@ai-matrx/design-system 0.11.3 → 0.11.5

package/CHANGELOG.md

@@ -1,5 +1,103 @@
 # Changelog
 
+## 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
+that forced found three older contracts in the same state.** Take this patch,
+not 0.11.3.
+
+0.11.3 moved the sticky-footer geometry into a shipped `.matrx-dialog-footer`
+rule inside `@layer matrx-design-system`. On the live matrx-frontend build that
+rule was present in the CSSOM and its padding computed to **`0px`**:
+
+```
+layer order  →  properties, [matrx-design-system-tokens, matrx-design-system],
+                theme, base, components, utilities
+@layer base  →  *, ::after, ::before, ::backdrop { … margin: 0; padding: 0 }
+```
+
+🚨 **THE PREFLIGHT RULE.** Tailwind's preflight zeroes `margin`, `padding`,
+`border` and `box-sizing` on every element from `@layer base` — and a host that
+follows THIS PACKAGE'S OWN documented layer statement puts
+`matrx-design-system` BELOW `base`. So a layered declaration of any of those
+four is not lower-priority: it is **gone**, with no error and nothing on screen
+to trace it by, in the consumer that followed the docs most carefully.
+
+**The census that finding forced — three contracts that were already inert,
+silently, in matrx-frontend:**
+
+| Rule | Shipped | Property preflight ate |
+|---|---|---|
+| `.pb-safe` | 0.5.0 | `padding-bottom` — the safe-area floor under every BottomSheet body/footer and the CommandDialog mobile sheet |
+| `.pt-safe` | 0.7.0 | `padding-top` — the notch clearance on a `direction="top"` Drawer |
+| `.matrx-glass-thin-border` | 0.5.0 | `border` — the glass chrome's whole stroke |
+
+All four now live **unlayered**, under a banner that says why, and the glass
+rule is split so only its stroke leaves the layer (fill, blur and elevation
+stay layered, so a host utility can still re-tint them).
+
+**Guard:** `styles.test.ts` § THE PREFLIGHT RULE — no layered rule may declare
+a preflight-reset property, and the four known contracts must be unlayered and
+intact. Proven RED on the 0.11.3 sheet, where it named all three older
+offenders as well as the new one.
+
+### Consumer action (C28)
+
+**Take 0.11.4.** 0.11.3 has the correct structure and an inert footer rule: the
+occlusion is gone but the footer renders with no padding and no bleed. Three
+contracts get quietly *better* here — safe-area padding and the glass stroke
+start working in every Tailwind host for the first time. One behaviour change
+worth knowing: because `.matrx-dialog-footer`, `.pb-safe`, `.pt-safe` and the
+glass stroke are now unlayered, a host utility on the same element no longer
+overrides those specific properties. Pass geometry through the component's own
+seams (`--dialog-pad`, `--dialog-pad-bottom`) rather than a padding utility.
+
 ## 0.11.3 — 2026-09-07
 
 **THE STICKY FOOTER STOPPED PAINTING OVER THE CONSEQUENCE.** `ConfirmDialog`'s

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] overflow-x-clip [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
+          "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",
           "sm:rounded-lg",
           animated && MOTION_DIALOG,
           className
@@ -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-bottom,0px)]",
       className
     ),
     ...props
@@ -2130,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] 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] [--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_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(
@@ -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-bottom,0px)]",
       className
     ),
     ...props