@ai-matrx/design-system 0.55.1 → 0.56.1

package/dist/styles.css

@@ -453,50 +453,49 @@
   }
 }
 .matrx-motion-sheet-top[data-state="open"] {
-  animation: matrx-slide-in-top var(--matrx-motion-duration-sheet)
-    var(--matrx-motion-ease-out);
+  animation: matrx-slide-in-top var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 .matrx-motion-sheet-top[data-state="closed"] {
-  animation: matrx-slide-out-top var(--matrx-motion-duration-slow)
-    var(--matrx-motion-ease-in);
+  animation: matrx-slide-out-top var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 .matrx-motion-sheet-bottom[data-state="open"] {
-  animation: matrx-slide-in-bottom var(--matrx-motion-duration-sheet)
-    var(--matrx-motion-ease-out);
+  animation: matrx-slide-in-bottom var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 .matrx-motion-sheet-bottom[data-state="closed"] {
-  animation: matrx-slide-out-bottom var(--matrx-motion-duration-slow)
-    var(--matrx-motion-ease-in);
+  animation: matrx-slide-out-bottom var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 .matrx-motion-sheet-left[data-state="open"] {
-  animation: matrx-slide-in-left var(--matrx-motion-duration-sheet)
-    var(--matrx-motion-ease-out);
+  animation: matrx-slide-in-left var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 .matrx-motion-sheet-left[data-state="closed"] {
-  animation: matrx-slide-out-left var(--matrx-motion-duration-slow)
-    var(--matrx-motion-ease-in);
+  animation: matrx-slide-out-left var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 .matrx-motion-sheet-right[data-state="open"] {
-  animation: matrx-slide-in-right var(--matrx-motion-duration-sheet)
-    var(--matrx-motion-ease-out);
+  animation: matrx-slide-in-right var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 .matrx-motion-sheet-right[data-state="closed"] {
-  animation: matrx-slide-out-right var(--matrx-motion-duration-slow)
-    var(--matrx-motion-ease-in);
+  animation: matrx-slide-out-right var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 /* A `side="center"` Sheet has no edge to come from, so it fades like a
    dialog scrim rather than sliding from nowhere. */
 .matrx-motion-sheet-center[data-state="open"] {
-  animation: matrx-fade-in var(--matrx-motion-duration-sheet)
-    var(--matrx-motion-ease-out);
+  animation: matrx-fade-in var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 .matrx-motion-sheet-center[data-state="closed"] {
-  animation: matrx-fade-out var(--matrx-motion-duration-slow)
-    var(--matrx-motion-ease-in);
+  animation: matrx-fade-out var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
-/* The mobile Dialog / CommandDialog bottom sheet: slides AND fades, at the
-   dialog's 200ms rather than the Sheet's 500ms, because it is a dialog
-   wearing sheet geometry and it opens from a tap, not from a nav gesture. */
+/* The mobile Dialog / CommandDialog bottom sheet: slides AND fades on THE
+   panel motion (0.56.0, the motion standard) — a bottom sheet is a panel. */
 @keyframes matrx-bottom-sheet-in {
   from {
     opacity: 0;
@@ -518,12 +517,12 @@
   }
 }
 .matrx-motion-bottom-sheet[data-state="open"] {
-  animation: matrx-bottom-sheet-in var(--matrx-motion-duration-base)
-    var(--matrx-motion-ease-out);
+  animation: matrx-bottom-sheet-in var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 .matrx-motion-bottom-sheet[data-state="closed"] {
-  animation: matrx-bottom-sheet-out var(--matrx-motion-duration-base)
-    var(--matrx-motion-ease-in);
+  animation: matrx-bottom-sheet-out var(--matrx-motion-duration-panel)
+    var(--matrx-motion-ease-panel);
 }
 
 /* --- poppers -----------------------------------------------------------
@@ -957,6 +956,26 @@
   animation: none;
 }
 
+/* THE PANEL MOTION on the vaul Drawer (0.56.0, the motion standard). vaul
+   1.1.2 injects `[data-vaul-drawer]{transition: transform .5s
+   cubic-bezier(.32,.72,0,1); animation-duration: .5s; …}` (0,1,0) and sets the
+   same pace INLINE when a released drag settles. Two attributes (0,2,0) beat
+   its sheet whatever the load order; `!important` on the two timing longhands
+   beats its inline settle WITHOUT touching `transition-property`, so vaul's
+   inline `transition: none` while a finger drags still means no motion. */
+[data-vaul-drawer][data-vaul-drawer-direction] {
+  animation-duration: var(--matrx-motion-duration-panel) !important;
+  animation-timing-function: var(--matrx-motion-ease-panel) !important;
+  transition-duration: var(--matrx-motion-duration-panel) !important;
+  transition-timing-function: var(--matrx-motion-ease-panel) !important;
+}
+[data-vaul-overlay][data-vaul-snap-points][data-state] {
+  animation-duration: var(--matrx-motion-duration-panel);
+  animation-timing-function: var(--matrx-motion-ease-panel);
+  transition-duration: var(--matrx-motion-duration-panel);
+  transition-timing-function: var(--matrx-motion-ease-panel);
+}
+
 .matrx-mobile-sheet > [data-slot="dialog-footer"] {
   padding-bottom: max(var(--dialog-pad, 0px), env(safe-area-inset-bottom, 0px));
 }

package/dist/tokens.css

@@ -139,14 +139,21 @@
        switch: `prefers-reduced-motion: reduce` silences the animations
        outright in styles.css, regardless of these values.
 
-       The numbers are the ones the primitives already carried as Tailwind
-       `duration-*` utilities before the package owned the keyframes:
-       poppers/tooltips 150ms, dialogs and overlays 200ms, a sheet closing
-       300ms and opening 500ms. */
+       The small-motion numbers are the ones the primitives already carried as
+       Tailwind `duration-*` utilities before the package owned the keyframes:
+       poppers/tooltips 150ms, dialogs and overlays 200ms, 300ms slow. */
     --matrx-motion-duration-fast: 150ms;
     --matrx-motion-duration-base: 200ms;
     --matrx-motion-duration-slow: 300ms;
-    --matrx-motion-duration-sheet: 500ms;
+    /* THE PANEL MOTION (0.56.0) — the motion standard (AI Matrx
+       common-docs/policies/motion-standard.md, Arman 2026-10-02): every panel-like
+       slide — the Sheet on every side, the mobile Dialog bottom sheet, the vaul
+       Drawer and the Sidebar's collapse — opens AND closes on this one pair. The
+       NAMES are the package's contract; the VALUES are the host's (a host that
+       declares them unlayered wins over this layered default). An even
+       ease-in-out, never a spring; 0ms under reduced motion (below). */
+    --matrx-motion-duration-panel: 600ms;
+    --matrx-motion-ease-panel: cubic-bezier(0.4, 0, 0.2, 1);
     /* Enters decelerate (the surface arrives and settles); exits accelerate
        (it leaves and is gone). Linear on both — which is what
        `tailwindcss-animate` defaulted to — reads mechanical at these
@@ -263,4 +270,11 @@
     --background-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cpath fill='%23999' fill-opacity='0.07' d='M1 1h0.5v0.5H1V1z'%3E%3C/path%3E%3C/svg%3E");
     --card-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cpath fill='%23fff' fill-opacity='0.02' d='M1 1h0.5v0.5H1V1z'%3E%3C/path%3E%3C/svg%3E");
   }
+
+  /* Reduced motion means no panel slide (the motion standard, rule 6). */
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --matrx-motion-duration-panel: 0ms;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/design-system",
-  "version": "0.55.1",
+  "version": "0.56.1",
   "description": "AI Matrx semantic React primitives shared across Vite, Next.js, desktop, and customer-built applications.",
   "type": "module",
   "license": "MIT",