@ai-matrx/design-system 0.11.4 → 0.11.6

package/CHANGELOG.md

@@ -1,5 +1,109 @@
 # 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
+would have overridden every caller's own footer padding.** Take this patch.
+0.11.3 and 0.11.4 are both superseded.
+
+0.11.4 fixed the layering by moving `.matrx-dialog-footer` OUT of the cascade
+layer. That made it apply — and, being unlayered, it then beat any host utility
+on the same element. matrx-frontend has ~10 footers that pass their own padding
+(`<DialogFooter className="p-0">`, `"px-4 py-3 border-t"`, `"px-5 py-3"`,
+`"mt-2 pt-2"`, …), and every one of them would have silently lost.
+
+**The resolution is to make the CARD carry the fix and leave the FOOTER
+alone.** The footer's geometry goes back to being Tailwind utilities on the
+element, exactly as it always was, so `cn` + tailwind-merge keeps a caller's
+`className` winning — minus the one utility that caused the defect:
+
+```
+- mx-[…] mb-[calc(var(--dialog-pad,0px)*-1)] px-[…] pb-[var(--dialog-pad,0px)]
++ mx-[…]                                     px-[…] pb-[var(--dialog-pad-bottom,0px)]
+```
+
+Only the card half — which no caller addresses — is CSS, and it stays unlayered
+because it must beat the card's own `p-6` / `p-4 pb-safe`:
+
+```css
+.matrx-dialog-card:has(> [data-slot="dialog-footer"]),
+.matrx-dialog-card:has(> [data-slot="alert-dialog-footer"]) { padding-bottom: 0 }
+```
+
+`--dialog-pad-bottom` is now declared by each card: `1.5rem` on the two desktop
+cards, and on the mobile sheet the unlayered
+`.matrx-mobile-sheet { --dialog-pad-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) }`
+so the actions still clear the home indicator.
+
+0.11.4's OTHER half stands and is the durable finding: **THE PREFLIGHT RULE**
+and the three contracts it rescued (`.pb-safe`, `.pt-safe`, the glass stroke)
+are unchanged here — see § 0.11.4.
+
+### Consumer action (C28)
+
+**Take 0.11.5.** 0.11.3 renders the footer with no padding at all; 0.11.4
+renders it with the package's padding regardless of what the caller asked for.
+Both are superseded within the hour. Every `DialogFooter` / `AlertDialogFooter`
+`className` override behaves exactly as it did in 0.11.2.
+
 ## 0.11.4 — 2026-09-08
 
 **0.11.3 SHIPPED THE FIX INTO A LAYER WHERE IT DID NOT APPLY — and the census

package/dist/index.cjs

@@ -1104,12 +1104,25 @@ var AlertDialogFooter = ({
     className: cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       // Ruling 3/4 — sticky to the card edges so a scrolled body never shows
-      // through under the actions, and safe-area padded on a phone. ALL of
-      // that geometry is `matrx-dialog-footer`, a rule this package SHIPS
-      // (styles.css), because the utility spelling of it carried a negative
-      // block margin that sticky clamped — painting the footer over the last
-      // 8px of the consequence at every description length (0.11.3).
-      "matrx-dialog-footer bg-background",
+      // through under the actions, and safe-area padded on a phone.
+      //
+      // 🚨 THERE IS NO `mb-[…]` HERE, AND THERE MUST NEVER BE ONE AGAIN
+      // (0.11.3, feedback bf8fb00b). The bleed over the card's bottom padding
+      // used to be a NEGATIVE BLOCK MARGIN, which makes this box taller than
+      // the grid area the card allocates it — and `position: sticky` CLAMPS a
+      // box to its containing block, so the browser yanked the footer UP by
+      // `--dialog-pad` against the card's `gap-4` and painted 8px of opaque
+      // footer over the last line of the consequence, at every length. The
+      // card now RESERVES this footer's block size instead (`matrx-dialog-card`
+      // in styles.css hands over its `padding-bottom`), so the bleed costs no
+      // margin at all. Guard: `sticky-footer-geometry.test.tsx`.
+      //
+      // These stay UTILITIES rather than a shipped rule so a caller's
+      // `className` still wins through tailwind-merge — a shipped rule would
+      // 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,0px)]",
       className
     ),
     ...props
@@ -2235,12 +2248,26 @@ var DialogFooter = ({
     "data-slot": "dialog-footer",
     className: cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      // Ruling 3 — the geometry is `matrx-dialog-footer`, a rule this package
-      // SHIPS (styles.css). It used to be utilities, one of which was a
-      // negative block margin that `position: sticky` clamps — the footer was
-      // yanked up over the row above it by `--dialog-pad` minus the card gap
-      // (0.11.3). The card gives the footer its bottom padding instead.
-      "matrx-dialog-footer bg-background",
+      // Ruling 3/4 — sticky to the card edges so a scrolled body never shows
+      // through under the actions, and safe-area padded on a phone.
+      //
+      // 🚨 THERE IS NO `mb-[…]` HERE, AND THERE MUST NEVER BE ONE AGAIN
+      // (0.11.3, feedback bf8fb00b). The bleed over the card's bottom padding
+      // used to be a NEGATIVE BLOCK MARGIN, which makes this box taller than
+      // the grid area the card allocates it — and `position: sticky` CLAMPS a
+      // box to its containing block, so the browser yanked the footer UP by
+      // `--dialog-pad` against the card's `gap-4` and painted 8px of opaque
+      // footer over the last line of the consequence, at every length. The
+      // card now RESERVES this footer's block size instead (`matrx-dialog-card`
+      // in styles.css hands over its `padding-bottom`), so the bleed costs no
+      // margin at all. Guard: `sticky-footer-geometry.test.tsx`.
+      //
+      // These stay UTILITIES rather than a shipped rule so a caller's
+      // `className` still wins through tailwind-merge — a shipped rule would
+      // 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,0px)]",
       className
     ),
     ...props