@ai-matrx/design-system 0.11.1 → 0.11.3

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 # Changelog
 
+## 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
+`git diff npm/design-system/v0.11.1..npm/design-system/v0.11.2 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.11.1 — 2026-09-07
 
 **The 0.10.1 dialog-centring fix, on the current line.** 0.11.0 was cut and

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