@ai-matrx/design-system 0.11.5 → 0.11.6

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 0.11.6 — 2026-09-08
+
+**THE PATCH TO TAKE.** 0.11.3, 0.11.4 and 0.11.5 are all superseded; the
+history of why is kept below because each one is a distinct, reusable finding
+about shipping CSS from a package.
+
+🚨 **THE GENERATION HAZARD** — the third and last of them, measured on
+matrx-frontend's live stylesheet after adopting 0.11.5. That release spelled
+the footer's bottom pad `pb-[var(--dialog-pad-bottom,0px)]` and the card
+`[--dialog-pad-bottom:1.5rem]`. **Neither utility reached the consumer's
+stylesheet**, while the pre-existing `px-[var(--dialog-pad,0px)]` on the same
+element did — so the footer rendered with `padding-bottom: 0`. A consumer's
+Tailwind generates utilities from what it SCANS, and **a class name this
+package invents is not guaranteed to reach any consumer's sheet**. Silent, no
+error: the C26 host contract again, one layer further out.
+
+**So 0.11.6 invents no class name at all.** The footer's utilities are the
+0.11.2 string minus exactly one token — the negative block margin that caused
+the original defect:
+
+```
+- mx-[…] mb-[calc(var(--dialog-pad,0px)*-1)] px-[…] pb-[var(--dialog-pad,0px)]
++ mx-[…]                                     px-[…] pb-[var(--dialog-pad,0px)]
+```
+
+Everything genuinely new lives in `styles.css`, which the package ships itself:
+
+```css
+.matrx-dialog-card:has(> [data-slot="dialog-footer"]),
+.matrx-dialog-card:has(> [data-slot="alert-dialog-footer"]) { padding-bottom: 0 }
+
+.matrx-mobile-sheet > [data-slot="dialog-footer"] {
+  padding-bottom: max(var(--dialog-pad, 0px), env(safe-area-inset-bottom, 0px));
+}
+```
+
+The second rule restates the home-indicator floor the sheet's card used to buy
+with `pb-safe`, since the reservation hands that padding to the footer. It is
+the ONE place a shipped rule overrides a caller's footer padding, and it is a
+safety floor rather than taste.
+
+**Measured on the live app, 1280x800, after adoption** — every consequence
+length, `overlapPx = -16` (a full `gap-4` of clearance where 0.11.2 had `+7.6`
+of occlusion), footer padding `12/24/24/24px` identical to 0.11.2, footer bottom
+flush to the card's inner edge, and the card's total height unchanged. Nothing
+about the dialog changed except that the consequence is now fully visible.
+
+**Guard added:** `sticky-footer-geometry.test.tsx` § "invents NO new Tailwind
+class name". All 9 of its assertions and both `styles.test.ts` § THE PREFLIGHT
+RULE assertions are proven RED on the pre-fix baseline and GREEN here.
+
+### Consumer action (C28)
+
+**Take 0.11.6.** No API change; the footer's rendered geometry is identical to
+0.11.2 minus the occlusion, and every `DialogFooter` / `AlertDialogFooter`
+`className` override behaves exactly as it did. Three older contracts also
+start working for the first time — see § 0.11.4.
+
 ## 0.11.5 — 2026-09-08
 
 **0.11.4's footer rule was correct and in the wrong place a second time — it

package/dist/index.cjs

@@ -1067,7 +1067,7 @@ var AlertDialogContent = React7.forwardRef(({ className, children, container, an
           // a sticky footer when there is one, so the footer's box matches the
           // space the grid gave it and sticky never clamps it up over the
           // consequence copy.
-          "max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] [--dialog-pad-bottom:1.5rem] overflow-x-clip [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
+          "max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
           "sm:rounded-lg",
           animated && MOTION_DIALOG,
           className
@@ -1122,7 +1122,7 @@ var AlertDialogFooter = ({
       // have to be unlayered to survive Tailwind preflight (§ THE PREFLIGHT
       // RULE in styles.css) and would then override every caller's padding.
       "sticky bottom-0 z-10 bg-background pt-3",
-      "mx-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad-bottom,0px)]",
+      "mx-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
       className
     ),
     ...props
@@ -2143,7 +2143,7 @@ var DialogContentPrimitive = React17.forwardRef((props, ref) => {
   );
 });
 DialogContentPrimitive.displayName = "DialogContentPrimitive";
-var DIALOG_DESKTOP_CLASSES2 = `matrx-dialog-card fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] [--dialog-pad-bottom:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
+var DIALOG_DESKTOP_CLASSES2 = `matrx-dialog-card fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
 var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet matrx-dialog-card fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE2 = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
 var DialogContent = React17.forwardRef(
@@ -2267,7 +2267,7 @@ var DialogFooter = ({
       // have to be unlayered to survive Tailwind preflight (§ THE PREFLIGHT
       // RULE in styles.css) and would then override every caller's padding.
       "sticky bottom-0 z-10 bg-background pt-3",
-      "mx-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad-bottom,0px)]",
+      "mx-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
       className
     ),
     ...props