@ai-matrx/design-system 0.7.1 → 0.9.0

package/dist/styles.css

@@ -154,6 +154,82 @@
   }
 }
 
+/* Accordion open/close. Ships HERE, in the package, because the matrx-frontend
+   original animated with `animate-accordion-down`/`-up` — utility names that
+   only exist in a host `tailwind.config.js`. Any consumer without that config
+   got a silently unanimated component and no error (C26, the styling
+   contract). Radix measures the panel and publishes
+   `--radix-accordion-content-height`; the keyframes just interpolate to it.
+   Colourless and inert until an element carries the class. */
+@keyframes matrx-accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes matrx-accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.matrx-accordion-content[data-state="open"] {
+  animation: matrx-accordion-down 200ms ease-out;
+}
+.matrx-accordion-content[data-state="closed"] {
+  animation: matrx-accordion-up 200ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .matrx-accordion-content[data-state="open"],
+  .matrx-accordion-content[data-state="closed"] {
+    animation: none;
+  }
+}
+
+/* Collapsible open/close. The SAME rule as the accordion above and a separate
+   one on purpose: Radix publishes a DIFFERENT measured variable per primitive
+   (`--radix-collapsible-content-height`), and the whole reason this ships here
+   is that two matrx-frontend collapsibles reached for the ACCORDION keyframes
+   and therefore interpolated to a variable that is never set on a collapsible
+   — no animation, no error, for as long as they existed (census row 19f).
+   Six more used host-only `slide-down`/`slide-up` keyframes that were keyed
+   correctly and existed in exactly one app's globals.css: the same C26 silent
+   host contract, wearing a working coat. One duration (200ms) for both
+   primitives, so a collapsible and an accordion on the same screen agree.
+   Colourless and inert until an element carries the class. */
+@keyframes matrx-collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+@keyframes matrx-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.matrx-collapsible-content[data-state="open"] {
+  animation: matrx-collapsible-down 200ms ease-out;
+}
+.matrx-collapsible-content[data-state="closed"] {
+  animation: matrx-collapsible-up 200ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .matrx-collapsible-content[data-state="open"],
+  .matrx-collapsible-content[data-state="closed"] {
+    animation: none;
+  }
+}
+
 /* ────────────────────────────────────────────────────────────────────────
    Scroll fade — the "there is more below" cue. UNLAYERED on purpose.
    Driven by `useScrollFade`, which sets the data attributes ONLY on edges

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/design-system",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "AI Matrx semantic React primitives shared across Vite, Next.js, desktop, and customer-built applications.",
   "type": "module",
   "license": "MIT",
@@ -36,6 +36,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.14",
     "@radix-ui/react-alert-dialog": "^1.1.17",
     "@radix-ui/react-avatar": "^1.2.6",
     "@radix-ui/react-checkbox": "^1.3.11",