@actioneer/ads 0.3.0 → 0.3.1

package/components/stepper.js

@@ -1,113 +1,102 @@
 "use client";
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import * as h from "react";
-import { cva as v } from "class-variance-authority";
-import { cn as t } from "../lib/cn.js";
-import { Check as d } from "../lib/icons.js";
-const f = v(
-  t(
-    "flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium tabular-nums",
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import * as v from "react";
+import { cva as k } from "class-variance-authority";
+import { cn as s } from "../lib/cn.js";
+import { Check as u, Close as f } from "../lib/icons.js";
+const p = k(
+  s(
+    "flex shrink-0 items-center justify-center rounded-full font-medium tabular-nums",
     "transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none"
   ),
   {
     variants: {
       status: {
-        complete: "bg-brand text-brand-foreground [&>svg]:size-3.5",
+        complete: "bg-success text-success-foreground",
         current: "bg-brand text-brand-foreground",
-        upcoming: "bg-fill text-tertiary"
+        upcoming: "bg-fill text-tertiary",
+        error: "bg-danger text-danger-foreground"
+      },
+      size: {
+        sm: "size-5 text-[11px] [&>svg]:size-3",
+        md: "size-6 text-xs [&>svg]:size-3.5"
       }
     },
-    defaultVariants: { status: "upcoming" }
+    defaultVariants: { status: "upcoming", size: "md" }
   }
-), N = h.forwardRef(
-  ({ className: g, steps: o, activeIndex: c, orientation: m = "horizontal", onSelect: i, ...u }, b) => {
-    const a = m === "vertical";
-    return /* @__PURE__ */ r(
-      "ol",
-      {
-        ref: b,
-        "data-slot": "stepper",
-        "data-orientation": m,
-        "aria-label": u["aria-label"] ?? "Progress",
-        className: t(
-          "flex w-full",
-          a ? "flex-col gap-0" : "flex-row items-start gap-0",
-          g
-        ),
-        ...u,
-        children: o.map((n, s) => {
-          const e = s < c ? "complete" : s === c ? "current" : "upcoming", p = s === o.length - 1, x = !!i && e === "complete";
-          return /* @__PURE__ */ l(
-            "li",
-            {
-              "data-status": e,
-              "aria-current": e === "current" ? "step" : void 0,
-              className: t(
-                "flex min-w-0",
-                a ? "flex-row gap-3" : "flex-1 flex-col gap-2",
-                !p && a && "pb-6"
-              ),
-              children: [
-                /* @__PURE__ */ l(
-                  "div",
+), w = v.forwardRef(
+  ({
+    className: d,
+    steps: l,
+    activeIndex: a,
+    size: n = "md",
+    onSelect: o,
+    ...c
+  }, g) => /* @__PURE__ */ e(
+    "ol",
+    {
+      ref: g,
+      "data-slot": "stepper",
+      "aria-label": c["aria-label"] ?? "Progress",
+      className: s("flex w-full flex-row items-start", d),
+      ...c,
+      children: l.map((i, t) => {
+        const r = i.isError ? "error" : t < a ? "complete" : t === a ? "current" : "upcoming", b = t === l.length - 1, x = !!o && t < a, h = t < a && !i.isError, N = /* @__PURE__ */ e("span", { "aria-hidden": !0, className: p({ status: r, size: n }), children: r === "complete" ? /* @__PURE__ */ e(u, {}) : r === "error" ? /* @__PURE__ */ e(f, {}) : t + 1 });
+        return /* @__PURE__ */ m(
+          "li",
+          {
+            "data-status": r,
+            "aria-current": r === "current" ? "step" : void 0,
+            className: "flex min-w-0 flex-1 flex-col gap-2",
+            children: [
+              /* @__PURE__ */ m("div", { className: "flex w-full flex-row items-center gap-2", children: [
+                x ? /* @__PURE__ */ e(
+                  "button",
                   {
-                    className: t(
-                      "flex min-w-0",
-                      a ? "flex-col items-center gap-1" : "w-full flex-row items-center gap-2"
+                    type: "button",
+                    onClick: () => o == null ? void 0 : o(t),
+                    "aria-label": `Go to step ${t + 1}`,
+                    className: s(
+                      p({ status: r, size: n }),
+                      "cursor-pointer outline-none focus-visible:ring-3 focus-visible:ring-ring",
+                      "active:scale-(--scale-press)"
                     ),
-                    children: [
-                      x ? /* @__PURE__ */ r(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => i == null ? void 0 : i(s),
-                          "aria-label": `Go to step ${s + 1}`,
-                          className: t(
-                            f({ status: e }),
-                            "cursor-pointer outline-none focus-visible:ring-3 focus-visible:ring-ring",
-                            "active:scale-(--scale-press)"
-                          ),
-                          children: /* @__PURE__ */ r(d, { "aria-hidden": !0 })
-                        }
-                      ) : /* @__PURE__ */ r("span", { "aria-hidden": !0, className: f({ status: e }), children: e === "complete" ? /* @__PURE__ */ r(d, {}) : s + 1 }),
-                      !p && /* @__PURE__ */ r(
-                        "span",
-                        {
-                          "aria-hidden": !0,
-                          className: t(
-                            "shrink-0 bg-border",
-                            a ? "w-px flex-1" : "h-px flex-1",
-                            e === "complete" && "bg-brand"
-                          )
-                        }
-                      )
-                    ]
+                    children: r === "complete" ? /* @__PURE__ */ e(u, {}) : r === "error" ? /* @__PURE__ */ e(f, {}) : t + 1
                   }
-                ),
-                /* @__PURE__ */ l("div", { className: t("min-w-0", a ? "pb-1" : "pr-4"), children: [
-                  /* @__PURE__ */ r(
-                    "div",
-                    {
-                      className: t(
-                        "truncate text-base",
-                        e === "upcoming" ? "text-tertiary" : "text-foreground"
-                      ),
-                      children: n.label
-                    }
+                ) : N,
+                !b && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    className: s(
+                      "h-px flex-1 shrink-0 bg-border",
+                      h && "bg-success"
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ e(
+                "div",
+                {
+                  className: s(
+                    "truncate",
+                    n === "sm" ? "text-xs" : "text-base",
+                    r === "upcoming" ? "text-tertiary" : "text-foreground",
+                    r === "error" && "text-danger"
                   ),
-                  n.description && /* @__PURE__ */ r("div", { className: "truncate text-xs text-tertiary", children: n.description })
-                ] })
-              ]
-            },
-            n.id
-          );
-        })
-      }
-    );
-  }
+                  children: i.label
+                }
+              ) })
+            ]
+          },
+          i.id
+        );
+      })
+    }
+  )
 );
-N.displayName = "Stepper";
+w.displayName = "Stepper";
 export {
-  N as Stepper,
-  f as stepperMarkerVariants
+  w as Stepper,
+  p as stepperMarkerVariants
 };

package/lib/icons.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
 import { HugeiconsIcon as s } from "@hugeicons/react";
-import { Tick02Icon as a, Copy01Icon as i, File02Icon as I, Cancel01Icon as l, Upload04Icon as h, ViewOffIcon as C, ViewIcon as g, MinusSignIcon as p, PlusSignIcon as f, ArrowDown01Icon as d, Search01Icon as u, InformationCircleIcon as k, AlertCircleIcon as w, Alert02Icon as A, CheckmarkCircle02Icon as L, ArrowLeft01Icon as m, ArrowRight01Icon as S, DatabaseIcon as M, Maximize01Icon as O, Magnet01Icon as P, ArrowUp01Icon as T, ArrowUpDownIcon as U, InboxIcon as B, ArrowLeft02Icon as D, MoreHorizontalIcon as y, RefreshIcon as F, CancelCircleIcon as R, Attachment01Icon as b, SparklesIcon as x, Clock01Icon as H, QuoteDownIcon as v, BrainIcon as G, Loading03Icon as V, AtIcon as z, BoltIcon as E, Table01Icon as W, File01Icon as N, Download01Icon as Q, Image01Icon as j, BracesIcon as q, MusicNote01Icon as J, Video01Icon as K, ImageNotFound01Icon as X, Activity01Icon as Y, AiChat02Icon as Z, ArrowDown02Icon as _, ArrowRight02Icon as $, ArrowUp02Icon as oo, Route01Icon as no, BlocksIcon as co, BookOpen01Icon as eo, Calendar01Icon as to, Call02Icon as ro, CheckListIcon as so, CircleDashedIcon as ao, CodeIcon as io, ComponentIcon as Io, LinkSquare02Icon as lo, Folder01Icon as ho, FolderOpenIcon as Co, DashboardSpeed01Icon as go, GitBranchIcon as po, HashtagIcon as fo, HistoryIcon as uo, Home01Icon as ko, ImageUploadIcon as wo, GridViewIcon as Ao, Leaf01Icon as Lo, Idea01Icon as mo, Link01Icon as So, Logout01Icon as Mo, Mail01Icon as Oo, Mic01Icon as Po, MicOff01Icon as To, MoreVerticalIcon as Uo, PaintBoardIcon as Bo, SidebarLeftIcon as Do, PencilEdit02Icon as yo, PhoneOff01Icon as Fo, PieChartIcon as Ro, PlugSocketIcon as bo, RocketIcon as xo, Settings01Icon as Ho, ShapesIcon as vo, Share01Icon as Go, StarIcon as Vo, StopIcon as zo, Target01Icon as Eo, Telescope01Icon as Wo, TextFontIcon as No, ToggleOnIcon as Qo, Delete02Icon as jo, UserIcon as qo, UserGroupIcon as Jo, Wrench01Icon as Ko, ArrowUpRight01Icon as Xo } from "@hugeicons/core-free-icons";
+import { Tick02Icon as a, Copy01Icon as i, File02Icon as I, Cancel01Icon as l, Upload01Icon as h, ViewOffIcon as C, ViewIcon as g, MinusSignIcon as p, PlusSignIcon as f, ArrowDown01Icon as d, Search01Icon as u, InformationCircleIcon as k, AlertCircleIcon as w, Alert02Icon as A, CheckmarkCircle02Icon as L, ArrowLeft01Icon as m, ArrowRight01Icon as S, DatabaseIcon as M, Maximize01Icon as O, Magnet01Icon as P, ArrowUp01Icon as T, ArrowUpDownIcon as U, InboxIcon as B, ArrowLeft02Icon as D, MoreHorizontalIcon as y, RefreshIcon as F, CancelCircleIcon as R, Attachment01Icon as b, SparklesIcon as x, Clock01Icon as H, QuoteDownIcon as v, BrainIcon as G, Loading03Icon as V, AtIcon as z, BoltIcon as E, Table01Icon as W, File01Icon as N, Download01Icon as Q, Image01Icon as j, BracesIcon as q, MusicNote01Icon as J, Video01Icon as K, ImageNotFound01Icon as X, Activity01Icon as Y, AiChat02Icon as Z, ArrowDown02Icon as _, ArrowRight02Icon as $, ArrowUp02Icon as oo, Route01Icon as no, BlocksIcon as co, BookOpen01Icon as eo, Calendar01Icon as to, Call02Icon as ro, CheckListIcon as so, CircleDashedIcon as ao, CodeIcon as io, ComponentIcon as Io, LinkSquare02Icon as lo, Folder01Icon as ho, FolderOpenIcon as Co, DashboardSpeed01Icon as go, GitBranchIcon as po, HashtagIcon as fo, HistoryIcon as uo, Home01Icon as ko, ImageUploadIcon as wo, GridViewIcon as Ao, Leaf01Icon as Lo, Idea01Icon as mo, Link01Icon as So, Logout01Icon as Mo, Mail01Icon as Oo, Mic01Icon as Po, MicOff01Icon as To, MoreVerticalIcon as Uo, PaintBoardIcon as Bo, SidebarLeftIcon as Do, PencilEdit02Icon as yo, PhoneOff01Icon as Fo, PieChartIcon as Ro, PlugSocketIcon as bo, RocketIcon as xo, Settings01Icon as Ho, ShapesIcon as vo, Share01Icon as Go, StarIcon as Vo, StopIcon as zo, Target01Icon as Eo, Telescope01Icon as Wo, TextFontIcon as No, ToggleOnIcon as Qo, Delete02Icon as jo, UserIcon as qo, UserGroupIcon as Jo, Wrench01Icon as Ko, ArrowUpRight01Icon as Xo } from "@hugeicons/core-free-icons";
 function o(c, e) {
   function n(t) {
     return /* @__PURE__ */ r(s, { icon: c, size: "1em", ...t });

package/lib/motion.d.ts

@@ -18,6 +18,8 @@ export declare const EASE_IN_OUT: readonly [0.77, 0, 0.175, 1];
 export declare const EASE_EXPO_OUT: readonly [0.16, 1, 0.3, 1];
 /** @deprecated Use `EASE_EXPO_OUT`. Kept as a compatibility alias. */
 export declare const EASE_DRAWER: readonly [0.16, 1, 0.3, 1];
+/** Mirror of --ease-disclosure — height reveals (see theme.css). */
+export declare const EASE_DISCLOSURE: readonly [0.32, 0.72, 0, 1];
 /**
  * Floating panels anchored to a trigger (popover / dropdown / listboxes).
  * Pair with an origin-aware `transformOrigin` so the panel grows out of the

package/lib/motion.js

@@ -1,5 +1,5 @@
 "use client";
-const t = [0.23, 1, 0.32, 1], s = [0.77, 0, 0.175, 1], a = [0.16, 1, 0.3, 1], i = a, r = {
+const t = [0.23, 1, 0.32, 1], s = [0.77, 0, 0.175, 1], a = [0.16, 1, 0.3, 1], i = a, r = [0.32, 0.72, 0, 1], o = {
   hidden: {
     opacity: 0,
     transform: "translate3d(0, -4px, 0) scale(0.96)",
@@ -10,7 +10,7 @@ const t = [0.23, 1, 0.32, 1], s = [0.77, 0, 0.175, 1], a = [0.16, 1, 0.3, 1], i
     transform: "translate3d(0, 0, 0) scale(1)",
     transition: { duration: 0.15, ease: t }
   }
-}, o = {
+}, e = {
   hidden: {
     opacity: 0,
     transform: "scale(0.96)",
@@ -21,7 +21,7 @@ const t = [0.23, 1, 0.32, 1], s = [0.77, 0, 0.175, 1], a = [0.16, 1, 0.3, 1], i
     transform: "scale(1)",
     transition: { duration: 0.14, ease: t }
   }
-}, e = {
+}, d = {
   hidden: {
     opacity: 0,
     transform: "translate3d(0, 8px, 0) scale(0.96)",
@@ -32,23 +32,23 @@ const t = [0.23, 1, 0.32, 1], s = [0.77, 0, 0.175, 1], a = [0.16, 1, 0.3, 1], i
     transform: "translate3d(0, 0, 0) scale(1)",
     transition: { duration: 0.22, ease: t }
   }
-}, d = {
+}, c = {
   hidden: { opacity: 0, transition: { duration: 0.12, ease: t } },
   visible: { opacity: 1, transition: { duration: 0.18, ease: t } }
-}, c = {
+}, l = {
   hidden: { opacity: 0, transition: { duration: 0.14, ease: t } },
   visible: { opacity: 1, transition: { duration: 0.22, ease: t } }
-}, l = {
+}, p = {
   duration: 0.24,
   ease: a
-}, p = {
+}, f = {
   duration: 0.18,
   ease: a
-}, f = {
+}, m = {
   right: { transform: "translate3d(100%, 0, 0)" },
   left: { transform: "translate3d(-100%, 0, 0)" },
   bottom: { transform: "translate3d(0, 100%, 0)" }
-}, m = {
+}, y = {
   hidden: { opacity: 0, transform: "translate3d(0, 8px, 0)" },
   visible: {
     opacity: 1,
@@ -60,7 +60,7 @@ const t = [0.23, 1, 0.32, 1], s = [0.77, 0, 0.175, 1], a = [0.16, 1, 0.3, 1], i
   stiffness: 420,
   damping: 34,
   mass: 0.9
-}, y = {
+}, u = {
   hidden: {
     opacity: 0,
     transform: "translate3d(0, 16px, 0) scale(0.98)",
@@ -78,19 +78,20 @@ const t = [0.23, 1, 0.32, 1], s = [0.77, 0, 0.175, 1], a = [0.16, 1, 0.3, 1], i
   }
 };
 export {
+  r as EASE_DISCLOSURE,
   i as EASE_DRAWER,
   a as EASE_EXPO_OUT,
   s as EASE_IN_OUT,
   t as EASE_OUT,
-  d as backdropVariants,
-  c as drawerBackdropVariants,
-  l as drawerEnterTransition,
-  p as drawerExitTransition,
-  f as drawerOffset,
-  r as floatVariants,
-  e as modalPanelVariants,
-  m as screenVariants,
+  c as backdropVariants,
+  l as drawerBackdropVariants,
+  p as drawerEnterTransition,
+  f as drawerExitTransition,
+  m as drawerOffset,
+  o as floatVariants,
+  d as modalPanelVariants,
+  y as screenVariants,
   n as toastSpring,
-  y as toastVariants,
-  o as tooltipVariants
+  u as toastVariants,
+  e as tooltipVariants
 };

package/llms.txt

@@ -187,7 +187,7 @@ When tabs and a search field control the same content, they share one responsive
 - [SettingList] — component (variants: isPressable: true|false) [docs](https://ads.actioneer.dev/#/review/setting-row)
 - [SettingRow] — component (variants: isPressable: true|false) [docs](https://ads.actioneer.dev/#/review/setting-row)
 - [Spinner] — Use for an indeterminate loading state (e.g. inside a Button's isLoading, or standalone while content is fetching) — not for measurable/determinate progress. (variants: size: sm|md|lg; color: current|primary|muted) [docs](https://ads.actioneer.dev/#/spinner)
-- [Stepper] — component (variants: status: complete|current|upcoming) [docs](https://ads.actioneer.dev/#/review/stepper)
+- [Stepper] — component (variants: status: complete|current|upcoming|error; size: sm|md) [docs](https://ads.actioneer.dev/#/review/stepper)
 - [Text] — Use Text for any body copy, caption, or inline run of prose instead of a raw p/span tag. [docs](https://ads.actioneer.dev/#/typography)
 - [ButtonProps] — TypeScript type
 - [CodeBlockProps] — TypeScript type
@@ -627,6 +627,7 @@ When tabs and a search field control the same content, they share one responsive
 - [AIChartProgress] — TypeScript type
 - [AIChartProps] — TypeScript type
 - [AIChartStatus] — TypeScript type
+- [ChainOfThoughtConnector] — TypeScript type
 - [ChainOfThoughtContentProps] — TypeScript type
 - [ChainOfThoughtEvidenceColumn] — TypeScript type
 - [ChainOfThoughtEvidenceProps] — TypeScript type

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [
@@ -16,9 +16,9 @@
     "Chat"
   ],
   "counts": {
-    "total": 668,
+    "total": 669,
     "component": 322,
-    "type": 283,
+    "type": 284,
     "hook": 10,
     "util": 53
   },
@@ -721,15 +721,22 @@
           "values": [
             "complete",
             "current",
-            "upcoming"
+            "upcoming",
+            "error"
           ],
           "default": "upcoming"
+        },
+        "size": {
+          "values": [
+            "sm",
+            "md"
+          ],
+          "default": "md"
         }
       },
       "props": [
         "steps",
         "activeIndex",
-        "orientation",
         "onSelect"
       ]
     },
@@ -5204,6 +5211,8 @@
         "stepCount",
         "summary",
         "sticky",
+        "collapsible",
+        "activityPlacement",
         "open",
         "defaultOpen",
         "onOpenChange",
@@ -5353,6 +5362,7 @@
         "className",
         "volume",
         "palette",
+        "seed",
         "onReady"
       ]
     },
@@ -5447,6 +5457,13 @@
       "importPath": "@actioneer/ads",
       "module": "chart"
     },
+    {
+      "name": "ChainOfThoughtConnector",
+      "family": "AI Elements",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "chain-of-thought"
+    },
     {
       "name": "ChainOfThoughtContentProps",
       "family": "AI Elements",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [

package/styles.css

@@ -34,11 +34,17 @@
  */
 @theme {
   /* ---- Typography ----
-     One typeface only. No monospace font — numeric/code contexts use
-     Aribau Grotesk with `tabular-nums` for aligned figures. */
+     One brand typeface. Figures inside prose stay in Aribau Grotesk with
+     `tabular-nums`; only literal source code steps to the mono stack. */
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
+  /* Source code only (CodeBlock, inline Code). ADS ships no mono webfont —
+     this resolves to the reader's platform mono, which is what a developer
+     already reads code in. Never use it for UI copy or data. */
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
   /* ---- Type scale ---- base = 15px (0.9375rem). Root stays 16px so the
      spacing grid is unaffected; only text sizes are anchored to 15px. */
   /* SIX sizes only — a deliberately small ladder (captions → display).
@@ -141,11 +147,13 @@
   --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); /* side-panel and drawer slide */
   --ease-drawer: var(--ease-expo-out); /* backwards-compatible alias */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot (rare) */
+  --ease-disclosure: cubic-bezier(0.32, 0.72, 0, 1); /* height reveals — moves off the mark immediately, settles long */
 
   /* Durations — every animation/transition timing flows from these.
      UI animations stay under 300ms; exits run faster than enters. */
   --duration-fast: 0.15s; /* menu / popover / tooltip enter */
   --duration-normal: 0.2s; /* state transitions */
+  --duration-disclosure: 0.28s; /* collapsible open — travels a real distance */
   --duration-spin: 0.8s; /* rotation loops (spinner) */
   --duration-pulse: 1.5s; /* breathing / shimmer loops */
   --duration-bloom: 0.9s; /* ambient reveals (chat texture bloom, curtain wipe) */
@@ -692,5 +700,103 @@
     animation: none !important;
   }
 }
+
+/* Collapsible disclosure (CSS path) — opt-in via .ads-collapsible for simple
+   disclosures. ChainOfThoughtContent does NOT use this: it animates with
+   Motion so a toggle mid-flight reverses from the current height instead of
+   restarting, which CSS keyframes cannot do.
+
+   Height, opacity and a short rise in ONE animation.
+   Two separate `animation` declarations cannot coexist (the shorthand replaces,
+   it does not merge), so animating height alongside tw-animate-css's enter/exit
+   silently drops the fade and leaves a bare height shutter — which reads as
+   rigid no matter how it is timed. Radix publishes the measured height as
+   --radix-collapsible-content-height; exits run faster than enters.
+   Eased with --ease-disclosure. --ease-out front-loads ~60% of the travel into
+   the first third (pop, then settle); --ease-in-out holds ~150ms before moving
+   (lag, then rush). A height reveal needs to leave the mark immediately and
+   settle long, which is what this curve does. */
+@keyframes ads-collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+    transform: translate3d(0, -4px, 0);
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes ads-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    height: 0;
+    opacity: 0;
+    transform: translate3d(0, -4px, 0);
+  }
+}
+.ads-collapsible[data-state="open"] {
+  animation: ads-collapsible-down var(--duration-disclosure) var(--ease-disclosure);
+}
+.ads-collapsible[data-state="closed"] {
+  animation: ads-collapsible-up var(--duration-normal) var(--ease-disclosure);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ads-collapsible[data-state="open"],
+  .ads-collapsible[data-state="closed"] {
+    animation: none;
+  }
+}
+
+/* Tree connector — the rail that links a group of children back to their
+   parent, and the L-shaped elbow that reaches an individual child.
+
+   Two classes so a rail can pass THROUGH content that is not itself a branch:
+   `.ads-tree-rail` draws the vertical only, `.ads-tree-branch` adds the elbow.
+   Mixing them keeps the rail unbroken from the parent icon while only the
+   rows that are actual children get an elbow.
+
+   - --tree-rail-lead : how far the FIRST child's rail climbs to meet the
+                        parent row.
+   - --tree-elbow     : where the elbow meets the child — its icon centre. */
+.ads-tree-rail,
+.ads-tree-branch {
+  position: relative;
+  padding-inline-start: 1.25rem;
+}
+.ads-tree-rail::before,
+.ads-tree-branch::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  border-left: 1px solid var(--border);
+}
+.ads-tree-rail:first-child::before,
+.ads-tree-branch:first-child::before {
+  top: calc(-1 * var(--tree-rail-lead, 0px));
+}
+/* The last child needs no rail: its elbow (or the content's end) terminates
+   the branch, and a rail there pokes through the curve. */
+.ads-tree-rail:last-child::before,
+.ads-tree-branch:last-child::before {
+  display: none;
+}
+.ads-tree-branch::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: var(--tree-elbow, 1.125rem);
+  width: 1rem;
+  border-bottom: 1px solid var(--border);
+  border-left: 1px solid var(--border);
+  border-bottom-left-radius: 9px;
+}
 /* Let the consumer's Tailwind discover the classes ADS components use. */
 @source "./**/*.{js,mjs}";

package/theme.css

@@ -7,11 +7,17 @@
  */
 @theme {
   /* ---- Typography ----
-     One typeface only. No monospace font — numeric/code contexts use
-     Aribau Grotesk with `tabular-nums` for aligned figures. */
+     One brand typeface. Figures inside prose stay in Aribau Grotesk with
+     `tabular-nums`; only literal source code steps to the mono stack. */
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
+  /* Source code only (CodeBlock, inline Code). ADS ships no mono webfont —
+     this resolves to the reader's platform mono, which is what a developer
+     already reads code in. Never use it for UI copy or data. */
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
   /* ---- Type scale ---- base = 15px (0.9375rem). Root stays 16px so the
      spacing grid is unaffected; only text sizes are anchored to 15px. */
   /* SIX sizes only — a deliberately small ladder (captions → display).
@@ -114,11 +120,13 @@
   --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); /* side-panel and drawer slide */
   --ease-drawer: var(--ease-expo-out); /* backwards-compatible alias */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot (rare) */
+  --ease-disclosure: cubic-bezier(0.32, 0.72, 0, 1); /* height reveals — moves off the mark immediately, settles long */
 
   /* Durations — every animation/transition timing flows from these.
      UI animations stay under 300ms; exits run faster than enters. */
   --duration-fast: 0.15s; /* menu / popover / tooltip enter */
   --duration-normal: 0.2s; /* state transitions */
+  --duration-disclosure: 0.28s; /* collapsible open — travels a real distance */
   --duration-spin: 0.8s; /* rotation loops (spinner) */
   --duration-pulse: 1.5s; /* breathing / shimmer loops */
   --duration-bloom: 0.9s; /* ambient reveals (chat texture bloom, curtain wipe) */