@ai-matrx/design-system 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # 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

package/README.md

@@ -12,6 +12,8 @@ The small, semantic UI foundation shared by AI Matrx React applications — prim
 
 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.
 
 ```bash