@ai-matrx/design-system 0.7.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # Changelog
 
+## 0.9.0 — 2026-09-07
+
+**`Collapsible` gets the open/close transition the package never shipped
+(census row 19f, the tail 0.8.0 left open).** Until now `collapsible.tsx` was a
+bare re-export of Radix, and Radix ships no motion — it only publishes the
+measured height as `--radix-collapsible-content-height` and leaves the
+keyframes to you. So every consumer invented the transition itself, and the
+inventions are the reason this is a package change and not a host one:
+
+- **Two matrx-frontend collapsibles had never animated, silently.**
+  `components/matrx/matrx-collapsible/matrx-collapsible.tsx` and
+  `enhanced-collapsible.tsx` carried `animate-accordion-down`/`-up` on a
+  COLLAPSIBLE panel. Those keyframes interpolate to
+  `--radix-ACCORDION-content-height`, which Radix never sets on a collapsible,
+  so the target height was always an undefined variable. No animation, no
+  error, for as long as the components existed. (Found while deleting the host
+  keyframes in 0.8.0; the dead classes were removed then, with the finding
+  recorded in place.)
+- **Six more animated correctly — in exactly one app.** `ChatCollapsible`,
+  `ChatCollapsibleWrapper`, `TranscriptBlock`, `StructuredPlanBlock`,
+  `AdvancedCollapsible` and `armani-collapsible` used
+  `animate-slide-down`/`-up`, whose keyframes lived only in matrx-frontend's
+  `globals.css`. Same C26 silent host contract as the accordion's, wearing a
+  working coat: any other consumer of this package got nothing.
+
+`CollapsibleContent` now applies `.matrx-collapsible-content overflow-hidden`
+by default. The rule and its keyframes ship in `styles.css`, keyed off the
+COLLAPSIBLE height variable, at the same 200ms ease-out as
+`.matrx-accordion-content` so the two primitives agree on the same screen, and
+`prefers-reduced-motion: reduce` drops the animation while keeping the
+clipping. The panel also carries `data-slot="collapsible-content"`.
+
+Unlike `AccordionContent`, this does NOT wrap children in a padding div —
+collapsibles in the fleet pad their own bodies, and inserting a box would move
+every one of them.
+
+**Opt-out:** `<CollapsibleContent animated={false}>` returns bare Radix — no
+class, no clipping, instant open — for the rare panel with a child that must
+overflow its bounds (a non-portalled popover, a sticky header). It is not the
+reduced-motion switch; the stylesheet already handles that.
+
+Guards: `collapsible.test.tsx` (transition class present and not either host
+utility; the keyframes read the collapsible variable and not the accordion's;
+both reduced-motion states silenced; the opt-out removing class AND clipping),
+`matrx-accordion-content` + `matrx-collapsible-content` added to
+`styles.test.ts`'s required-rule list, and the packed-tarball canary now
+asserts both rules, the collapsible height variable, and a reduced-motion
+block actually ship in `dist/styles.css`. Proven failing-then-passing by
+re-pointing the keyframes at the accordion variable.
+
+### Consumer action (C28)
+
+- 🔶 **This is a VISIBLE change, on purpose.** Every `CollapsibleContent` in
+  every consumer now animates open and closed at 200ms where most of them
+  previously snapped. If a panel must not move or must not clip, pass
+  `animated={false}` — do not re-add host keyframes.
+- **Delete host collapsible keyframes and the per-site classes that used
+  them.** In matrx-frontend that is `slide-down` / `slide-up` in
+  `app/globals.css`, the `--animate-slide-down` / `--animate-slide-up` theme
+  entries, and the `data-[state=open]:animate-slide-down
+  data-[state=closed]:animate-slide-up` pairs on the six components listed
+  above (all done in this same session, per THE SAME-SESSION LAW).
+- **The two components named at the top of this entry —
+  `matrx-collapsible.tsx` and `enhanced-collapsible.tsx` — animate for the
+  first time ever** with this release. They need no code change; they get the
+  transition from the package.
+- New type export: `CollapsibleContentProps`.
+
+## 0.8.0 — 2026-09-07
+
+**Accordion — the last stand-in in the fleet (census row 19c).** Growth waves 1
+and 2 collapsed Card, Table, Alert, Avatar, Progress, Collapsible, Checkbox,
+Slider and RadioGroup into this package, but nothing here was called
+`Accordion`. So `aidream/apps/workflow-studio`'s DB-authored component scope
+was still handing agent-authored components four dependency-free `<div>`s
+named `Accordion` / `AccordionItem` / `AccordionTrigger` / `AccordionContent`.
+A DB-authored component that asked for an accordion got four stacked divs:
+every section permanently open, no trigger, no keyboard, no ARIA — a screen
+that looks finished and is not.
+
+The port is built from matrx-frontend's `components/ui/accordion.tsx` (the only
+real implementation in the fleet), with three corrections recorded rather than
+preserved:
+
+- **The animation is package-owned CSS.** The original used
+  `animate-accordion-down` / `-up` — Tailwind utility names that exist only in
+  a host `tailwind.config.js`. Any consumer without that config got a component
+  that jumped open, silently, with no error. `.matrx-accordion-content` and its
+  keyframes now ship in `styles.css` (the C26 styling contract), keyed off
+  Radix's runtime `--radix-accordion-content-height`, and honour
+  `prefers-reduced-motion`.
+- **Density is a prop, not a fork** — `size="sm|md"` declared once on the root
+  and read from context by every trigger and panel, exactly as on `Card` and
+  `Table`, so an accordion cannot mix a `p-4` header with a `pb-2` body.
+- **The chevron is an inlined icon** (C19), not a `@radix-ui/react-icons`
+  import, so the package still carries no icon-library dependency.
+
+`rightElements` (controls on the trigger row, before the chevron) is kept from
+the original so matrx-frontend can adopt without losing a capability.
+
+The SSR note the original carried is kept and restated: **the root renders
+unconditionally.** There is no mount gate — Radix ids come from React's
+SSR-stable `useId`, and the gate deleted every header and every
+`defaultValue`-open item from SSR and the first client paint.
+
+New dependency: `@radix-ui/react-accordion`.
+
+### Consumer action (C28)
+
+- Nothing breaks; this is additive.
+- **Delete any local `Accordion` fork or `div` stand-in and import from here.**
+  Known holders at publish time: `aidream/apps/workflow-studio`'s
+  `component-scope.tsx` (adopted in this same session, per THE SAME-SESSION
+  LAW) and `matrx-frontend/components/ui/accordion.tsx` +
+  `components/matrx/matrx-collapsible/AccordionWrapper.tsx` (NOT adopted here —
+  a realtime lane held that tree; it is a live census row).
+- A host that previously relied on its own `animate-accordion-*` keyframes can
+  drop them.
+
 ## 0.7.1 — 2026-09-07
 
 - **`ResizableHandle` defaults to `xs` (2px), not `sm` (4px).** Caught in the

package/README.md

@@ -3,14 +3,16 @@
 The small, semantic UI foundation shared by AI Matrx React applications — primitives whose behavior and variants are identical across Vite and Next.js hosts.
 
 **Controls:** Button, Badge, Label, Separator, the Input family, the Textarea family, Checkbox, Switch, RadioGroup, Slider, Toggle + ToggleGroup, Avatar, Progress.
-**Surfaces:** Card, Table, Tabs, Collapsible, ScrollArea, Popover, Tooltip, HoverCard, Sheet, Dialog, AlertDialog, Drawer, BottomSheet + TabbedBottomSheet, Alert, Resizable, Skeleton.
+**Surfaces:** Card, Table, Tabs, Accordion, Collapsible, ScrollArea, Popover, Tooltip, HoverCard, Sheet, Dialog, AlertDialog, Drawer, BottomSheet + TabbedBottomSheet, Alert, Resizable, Skeleton.
 **Menus:** DropdownMenu, ContextMenu, Command / CommandDialog, Select, CreatablePicker.
 **Composed:** EditableLabel, SegmentedControl, ScoreRing, OverflowToolbar.
 **Hooks + utilities:** `useScrollFade`, `useIsMobile`, `usePortalContainer`, `useDialogContainer`, `useDrawerDirection`, `cn`.
 
 **The Tooltip lives here, and only here.** `@ai-matrx/tap-target` used to ship its own copy; since design-system 0.7.0 / tap-target 0.2.0 it consumes this one and re-exports nothing.
 
-Where hosts had forked a primitive over DENSITY, density is a prop, not a fork: `Card size="sm|md|lg"`, `Table size="sm|md"`, `Switch`/`Avatar`/`Checkbox`/`Slider`/`RadioGroup`/`Toggle` `size`, `ResizableHandle size="xs".."4xl"`. It is declared once on the root and every item reads it from context, so a card cannot mix paddings and a radio group cannot mix control sizes.
+Where hosts had forked a primitive over DENSITY, density is a prop, not a fork: `Card size="sm|md|lg"`, `Table size="sm|md"`, `Accordion size="sm|md"`, `Switch`/`Avatar`/`Checkbox`/`Slider`/`RadioGroup`/`Toggle` `size`, `ResizableHandle size="xs".."4xl"`. It is declared once on the root and every item reads it from context, so a card cannot mix paddings and a radio group cannot mix control sizes.
+
+**Motion ships with the component.** `Accordion` and `Collapsible` animate open and closed out of the box (200ms, `prefers-reduced-motion` honoured) from rules in `styles.css` — you never define keyframes or add an `animate-*` utility for them. `CollapsibleContent` also clips its body while it moves; pass `animated={false}` for the rare panel with a child that must overflow its bounds.
 
 **Mobile is the Drawer's job.** `Drawer` owns the iOS rules every host was re-deriving — `dvh` never `vh`, `pb-safe`/`pt-safe` safe-area padding, a 44px grab-handle target, `DrawerBody` as the `flex-1 min-h-0` scroll shard — and `direction` makes a top/side drawer a prop rather than a fork. Every touch control (`Slider`, `RadioGroup`, `ResizableHandle`) carries an invisible 44px target on coarse pointers, with desktop density untouched.