@ai-matrx/design-system 0.11.2 → 0.11.4

package/CHANGELOG.md

@@ -1,5 +1,135 @@
 # Changelog
 
+## 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
+opaque footer covered the last ~8px of a multi-line consequence description —
+the exact copy the platform's destructive-and-expensive-actions law requires
+authors to write. Feedback `bf8fb00b`.
+
+Measured in Chrome at 1280x800 on matrx-frontend, 0.11.2, with a real 3-line
+folder-delete consequence:
+
+```
+description.bottom = 429.3   footer.top = 421.7   overlap = 7.6px
+scrollHeight === clientHeight === 228
+```
+
+The second line is what made it a defect rather than a nuisance: **the card did
+not scroll**, so the occluded pixels could never be revealed by any user
+action. And the overlap was not a long-copy edge case — it was a constant 8px
+at EVERY description length, in both themes, on `Dialog` as well as
+`AlertDialog` and therefore on `ConfirmDialog`.
+
+**Root cause.** Both footers bled over the card's bottom padding with
+`mb-[calc(var(--dialog-pad,0px)*-1)]`. A negative bottom margin makes an
+element's border box taller than the grid area (or flex line) its parent
+allocated it, and `position: sticky` **clamps a box to its containing block** —
+so the browser yanked the whole footer UP by `--dialog-pad` (24px) against a
+`gap-4` (16px). 24 − 16 = the 8px of occlusion. Statically positioned, the same
+negative margin renders exactly as intended; it is the interaction with
+`sticky` that breaks it, which is why it survived review.
+
+**The fix.** The bleed is bought without a negative block margin. The card hands
+its bottom padding to the footer, and the footer reproduces it — so the footer's
+box is exactly the space it was given, sticky has nothing to clamp, and the
+opaque background still reaches the card's bottom edge with nothing scrolling
+through beneath the actions. Two rules now ship in `styles.css`:
+
+- `.matrx-dialog-footer` — the whole footer geometry (`position: sticky;
+  bottom: 0`, the top pad, the INLINE bleed, and
+  `padding-bottom: var(--dialog-pad-bottom, var(--dialog-pad, 0px))`). Sticky
+  clamps the block axis only, so the inline bleed stays a negative margin.
+- `.matrx-dialog-card:has(> .matrx-dialog-footer) { padding-bottom: 0 }` — the
+  reservation, **unlayered on purpose** so it beats the card's own `p-6` /
+  `p-4 pb-safe` utilities. Layered, it would lose and the fix would be silently
+  absent in every consumer. It is conditional on `:has()`, so a `DialogContent`
+  with no footer keeps its full padding.
+
+The mobile sheet's home-indicator clearance moved with the padding:
+`.matrx-mobile-sheet` sets `--dialog-pad-bottom: max(0.75rem,
+env(safe-area-inset-bottom, 0px))`, the same floor `pb-safe` had.
+
+**Guards.** `src/sticky-footer-geometry.test.tsx` — proven failing on the
+pre-fix sources (7 of its 8 assertions fail there) and passing here. It bans
+the MECHANISM by census, not the two known sites: nothing `sticky` anywhere in
+this package may carry a negative block margin. It also asserts the shipped
+rules exist, that the reservation is unlayered, and that every card and footer
+is wired to them. jsdom has no layout engine, so the paint itself is proven in
+a real browser and that proof is permanent, not a one-off: matrx-frontend
+`/demos/confirm-geometry` exposes `window.__confirmGeometry.runAll()`, which
+opens the real package `ConfirmDialog` at 1-, 2-, 3- and 6-line consequences
+and returns `descriptionBottom`, `footerTop`, `overlapPx` and whether the card
+scrolls. Invariant: `overlapPx <= 0` at every length, light and dark.
+
+**Why the existing tests all passed.** `confirm-dialog.test.tsx` asserts the
+consequence's DOM text, its `aria-describedby` wiring, and the absence of
+`line-clamp`/`truncate`. Every one of those was true the whole time. A guard
+that cannot see geometry cannot catch a geometry defect — recorded here because
+that is the class, not this instance.
+
+### Consumer action (C28)
+
+**None** — no API change; the footer's rendered geometry is identical minus the
+occlusion. Take the patch. Three assertions that spelled the footer contract as
+the literal `sticky` utility now assert `matrx-dialog-footer`; no consumer
+asserts on those class strings. Anything that overrode `DialogFooter`'s padding
+through `className` still wins (the rule is layered); anything that set
+`padding-bottom` on `DialogContent` itself while ALSO rendering a footer is now
+overridden by the reservation, which is the point.
+
 ## 0.11.2
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/index.cjs

@@ -1060,9 +1060,13 @@ var AlertDialogContent = React7.forwardRef(({ className, children, container, an
         ref,
         "data-slot": "alert-dialog-content",
         className: cn(
-          `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 border bg-background p-6 shadow-lg`,
+          `matrx-dialog-card fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 border bg-background p-6 shadow-lg`,
           // Ruling 3 — never taller than the viewport, always scrollable, and
           // the footer stays reachable via --dialog-pad like Dialog's.
+          // Ruling 5 (0.11.3) — `matrx-dialog-card` hands the bottom padding to
+          // 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",
           "sm:rounded-lg",
           animated && MOTION_DIALOG,
@@ -1100,9 +1104,12 @@ 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.
-      "sticky bottom-0 z-10 bg-background pt-3",
-      "mx-[calc(var(--dialog-pad,0px)*-1)] mb-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
+      // 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",
       className
     ),
     ...props
@@ -2123,8 +2130,8 @@ var DialogContentPrimitive = React17.forwardRef((props, ref) => {
   );
 });
 DialogContentPrimitive.displayName = "DialogContentPrimitive";
-var DIALOG_DESKTOP_CLASSES2 = `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 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_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(
   ({
@@ -2228,8 +2235,12 @@ var DialogFooter = ({
     "data-slot": "dialog-footer",
     className: cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      "sticky bottom-0 z-10 bg-background pt-3",
-      "mx-[calc(var(--dialog-pad,0px)*-1)] mb-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
+      // 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",
       className
     ),
     ...props