@ai-matrx/design-system 0.11.2 → 0.11.3

package/dist/styles.css

@@ -140,6 +140,49 @@
   .matrx-glass-thin-border:has(> a:active) {
     background-color: var(--matrx-glass-bg);
   }
+
+  /* -----------------------------------------------------------------------
+     .matrx-dialog-footer — THE STICKY FOOTER'S GEOMETRY, in one place.
+
+     This used to be a string of Tailwind utilities on `DialogFooter` and
+     `AlertDialogFooter`, and one of them — a NEGATIVE BOTTOM MARGIN used to
+     bleed the footer over the card's bottom padding — silently clipped the
+     thing the destructive-actions law exists to make readable (0.11.3, feedback
+     bf8fb00b). The mechanism, measured in Chrome at 1280x800:
+
+       a `position: sticky` element is CLAMPED to its containing block (here
+       the grid area / flex line the card gives it). A negative bottom margin
+       makes the footer's BORDER box taller than that area by exactly
+       `--dialog-pad`, so the browser yanks the whole footer UP by that amount.
+       With `--dialog-pad: 1.5rem` and `gap-4` that is 24px up against a 16px
+       gap: an 8px overlap in which the opaque footer painted over the last
+       line of the consequence — at EVERY description length, and unreachable
+       by scrolling, because the card's `scrollHeight === clientHeight`.
+
+     The bleed is now bought without a negative block margin: the footer owns
+     the card's BOTTOM padding (`padding-bottom`), the card gives it up (see
+     the reservation rule below), and only the INLINE bleed stays a negative
+     margin — sticky clamps the block axis, never the inline one.
+
+     `--dialog-pad-bottom` lets a card ask for more than `--dialog-pad` at the
+     bottom edge; the mobile sheet uses it for the home-indicator safe area.
+     ----------------------------------------------------------------------- */
+  .matrx-dialog-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    padding-top: 0.75rem;
+    margin-inline: calc(var(--dialog-pad, 0px) * -1);
+    padding-inline: var(--dialog-pad, 0px);
+    padding-bottom: var(--dialog-pad-bottom, var(--dialog-pad, 0px));
+  }
+
+  /* The sheet's bottom edge is the phone's bottom edge — the footer has to
+     clear the home indicator, which is what the card's `pb-safe` used to do
+     before the footer took the bottom padding over. Same `max()` floor. */
+  .matrx-mobile-sheet {
+    --dialog-pad-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
+  }
 }
 
 /* Keyframes cannot live inside a cascade layer's rule set and be referenced
@@ -748,6 +791,33 @@
   );
 }
 
+/* ────────────────────────────────────────────────────────────────────────
+   .matrx-dialog-card — THE FOOTER RESERVATION.
+
+   A card that contains a sticky footer gives its bottom padding TO that
+   footer, so the footer's box is exactly as tall as the space the card
+   allocated it. That is what keeps `position: sticky` from clamping the
+   footer upward over the preceding row (the 0.11.3 defect; see
+   `.matrx-dialog-footer` above for the measured mechanism).
+
+   Two consequences worth stating out loud:
+     • a card with NO footer keeps its full padding — the reservation is
+       conditional on purpose, so `DialogContent` without a `DialogFooter`
+       is unchanged;
+     • the footer's own `padding-bottom` reproduces the card's, so the visual
+       result is identical to the intended bleed: opaque background all the
+       way to the card's bottom edge, with nothing scrolling through beneath
+       the actions.
+
+   Deliberately UNLAYERED: it has to beat the card's own `p-6` / `p-4 pb-safe`
+   utilities, which live in `@layer utilities` (and in this package's own
+   layer, for `pb-safe`). Unlayered beats every layered rule regardless of
+   specificity — the same reason the sheet density restatement below is.
+   ──────────────────────────────────────────────────────────────────────── */
+.matrx-dialog-card:has(> .matrx-dialog-footer) {
+  padding-bottom: 0;
+}
+
 /* ────────────────────────────────────────────────────────────────────────
    .matrx-mobile-sheet — ONE mobile density for any desktop panel hosted in a
    bottom sheet (TabbedBottomSheet sets it; see that file's header).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/design-system",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "AI Matrx semantic React primitives shared across Vite, Next.js, desktop, and customer-built applications.",
   "type": "module",
   "license": "MIT",