@ai-matrx/design-system 0.11.4 → 0.11.5

package/dist/styles.css

@@ -783,44 +783,21 @@
 }
 
 /* -----------------------------------------------------------------------
-   .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.
+   --dialog-pad-bottom on the mobile sheet — the home-indicator clearance.
+
+   The dialog card's bottom padding belongs to its sticky footer (see THE
+   FOOTER RESERVATION below), so the safe area the sheet used to buy with
+   `pb-safe` has to arrive as the FOOTER's bottom pad instead. Same max()
+   floor. Unlayered like the rest of this section, though a custom property is
+   not something preflight touches — it is here so the whole contract reads in
+   one place.
+
+   The footer's own geometry is deliberately NOT a rule: it stays Tailwind
+   utilities on the element, so a caller's `className` still overrides it
+   through tailwind-merge exactly as it always has (matrx-frontend has ~10
+   footers that pass their own padding). Only the card half — which no caller
+   addresses — is CSS.
    ----------------------------------------------------------------------- */
-.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));
 }
@@ -831,8 +808,18 @@
    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).
+   footer upward over the preceding row.
+
+   THE MECHANISM (measured in Chrome at 1280x800, 0.11.2). The footer used to
+   bleed over this 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). The 8px difference was
+   opaque footer painted over the last line of the consequence copy, at EVERY
+   description length, and unreachable: the card's
+   `scrollHeight === clientHeight`, so nothing could scroll it into view.
+   Feedback `bf8fb00b`.
 
    Two consequences worth stating out loud:
      • a card with NO footer keeps its full padding — the reservation is
@@ -844,11 +831,17 @@
        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.
+   utilities, which live in `@layer utilities`. Unlayered beats every layered
+   rule regardless of specificity — the same reason the sheet density
+   restatement below is.
+
+   And deliberately ONE-SIDED: the FOOTER's geometry stays Tailwind utilities
+   on the element, never a rule, so a caller's `className` still overrides its
+   padding through tailwind-merge exactly as it always has. Only the card half,
+   which no caller addresses, is CSS.
    ──────────────────────────────────────────────────────────────────────── */
-.matrx-dialog-card:has(> .matrx-dialog-footer) {
+.matrx-dialog-card:has(> [data-slot="dialog-footer"]),
+.matrx-dialog-card:has(> [data-slot="alert-dialog-footer"]) {
   padding-bottom: 0;
 }
 

package/package.json

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