@ai-matrx/design-system 0.11.4 → 0.11.6

package/dist/styles.css

@@ -782,48 +782,6 @@
     var(--matrx-glass-border-color);
 }
 
-/* -----------------------------------------------------------------------
-   .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));
-}
 
 /* ────────────────────────────────────────────────────────────────────────
    .matrx-dialog-card — THE FOOTER RESERVATION.
@@ -831,8 +789,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,14 +812,33 @@
        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;
 }
 
+/* The mobile sheet's bottom edge IS the phone's bottom edge. Its card used to
+   buy the home-indicator clearance with `pb-safe`; the reservation above hands
+   that padding to the footer, so the floor has to be restated HERE or the
+   actions land under the indicator. `max()` so the sheet's own `--dialog-pad`
+   (1rem) still applies on a device with no inset.
+
+   This is the ONE place a shipped rule overrides a caller's footer padding, and
+   it is a safety floor rather than taste — exactly what `.pb-safe` was doing on
+   this element's parent before. */
+.matrx-mobile-sheet > [data-slot="dialog-footer"] {
+  padding-bottom: max(var(--dialog-pad, 0px), env(safe-area-inset-bottom, 0px));
+}
+
 /* ────────────────────────────────────────────────────────────────────────
    .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.4",
+  "version": "0.11.6",
   "description": "AI Matrx semantic React primitives shared across Vite, Next.js, desktop, and customer-built applications.",
   "type": "module",
   "license": "MIT",