@ai-matrx/design-system 0.11.0 → 0.11.2

package/dist/styles.css

@@ -312,30 +312,55 @@
 }
 
 /* --- centred dialog card ----------------------------------------------
-   The card is positioned by `translate-x-[-50%] translate-y-[-50%]`
-   utilities, and an animation REPLACES `transform` for its whole duration —
-   which is why the shadcn original had to re-state the centring inside the
-   motion (`slide-in-from-left-1/2 slide-in-from-top-[48%]`). Owning the
-   keyframes lets us just say it: the card rises 2% and scales up from 95%,
-   ending exactly on the resting transform so nothing jumps at the end. */
+   CENTRING AND MOTION ARE TWO DIFFERENT CSS PROPERTIES HERE, ON PURPOSE.
+   0.10.0 centred the card with `translate-x-[-50%] translate-y-[-50%]`
+   utilities and RE-STATED that centring inside the keyframes, on the
+   assumption an animation of `transform` replaces whatever positioned the
+   element. That assumption is a Tailwind v3 assumption, and it shipped a
+   live regression:
+
+     Tailwind v3  `translate-x-[-50%]` -> `transform: translate(…)`  (replaced)
+     Tailwind v4  `translate-x-[-50%]` -> `translate: -50% -50%`     (COMPOSES)
+
+   `translate` is an independent transform property: per spec it is applied
+   IN ADDITION to `transform`, not replaced by it. So on every v4 host the
+   card was centred twice for the animation's whole duration and snapped back
+   at the end. Measured live, 2560x1289, resting rect x=128 y=32:
+   currentTime=0 -> x=-966 y=-525 (off the top-left of the viewport);
+   `el.style.translate='none'` mid-animation -> x=137 y=41, i.e. resting.
+   Three of four consumers regressed (aidream/dashboard, workflow-studio,
+   matrx-extend went from instant-and-centred to flying in from off-screen).
+
+   The fix does not pick a Tailwind version. The package owns the centring
+   itself, in the `translate` property, on `.matrx-dialog-centered` below —
+   so it reads identically under v3 and v4 hosts — and the keyframes express
+   ONLY the delta: opacity, and a 2% rise scaled up from 95% carried by
+   `transform`, which now has no other job. Resting state is
+   `translate: -50% -50%; transform: none`, byte-identical to 0.10.0's
+   rendered rect. The two never restate each other again, and
+   `motion.test.tsx` fails the build if a centred surface goes back to
+   wearing a non-zero translate utility. */
+.matrx-dialog-centered {
+  translate: -50% -50%;
+}
 @keyframes matrx-dialog-in {
   from {
     opacity: 0;
-    transform: translate(-50%, -48%) scale(0.95);
+    transform: translateY(2%) scale(0.95);
   }
   to {
     opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
+    transform: none;
   }
 }
 @keyframes matrx-dialog-out {
   from {
     opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
+    transform: none;
   }
   to {
     opacity: 0;
-    transform: translate(-50%, -48%) scale(0.95);
+    transform: translateY(2%) scale(0.95);
   }
 }
 .matrx-motion-dialog[data-state="open"] {
@@ -608,6 +633,30 @@
     var(--matrx-motion-ease-in);
 }
 
+/* THE POPPER'S RESTING GAP — same law as `.matrx-dialog-centered` above, same
+   reason. `Select` in `popper` position used to nudge itself off its trigger
+   with `data-[side=bottom]:translate-y-1` and three siblings. Those are
+   Tailwind translate utilities on a surface whose keyframes animate
+   `transform` — the identical composite hazard the centred card shipped in
+   0.10.0, at 4px instead of half a viewport: on a v4 host the gap composed
+   correctly by luck, on a v3 host the animation replaced it and the surface
+   snapped 4px at the end. Stated as the `translate` property, it is the
+   resting offset in every host and the keyframes keep `transform` to
+   themselves. Sides are Radix's `data-side` (where the surface SITS), so a
+   surface below its trigger moves further down. */
+.matrx-popper-offset[data-side="bottom"] {
+  translate: 0 var(--matrx-popper-offset);
+}
+.matrx-popper-offset[data-side="top"] {
+  translate: 0 calc(-1 * var(--matrx-popper-offset));
+}
+.matrx-popper-offset[data-side="right"] {
+  translate: var(--matrx-popper-offset) 0;
+}
+.matrx-popper-offset[data-side="left"] {
+  translate: calc(-1 * var(--matrx-popper-offset)) 0;
+}
+
 /* --- the two indefinite loops -----------------------------------------
    `animate-pulse` and `animate-spin` ARE core Tailwind, so they survive in a
    Tailwind host — but a Skeleton that does not pulse is indistinguishable

package/dist/tokens.css

@@ -142,6 +142,11 @@
     /* The distance a popper travels toward its anchor as it opens. 0.5rem is
        the `slide-in-from-*-2` the primitives carried. */
     --matrx-motion-popper-travel: 0.5rem;
+    /* The RESTING gap between a `popper`-positioned surface and its trigger —
+       not motion, geometry. 0.25rem is the `translate-y-1` the primitives
+       carried before 0.10.1 moved it off Tailwind's translate utilities and
+       into the `translate` property (see `.matrx-popper-offset`). */
+    --matrx-popper-offset: 0.25rem;
   }
 
   /* Dark theme. Matches the `.dark`-class convention (Tailwind v4 hosts wire

package/package.json

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