@ai-matrx/design-system 0.11.2 → 0.11.4

package/dist/styles.css

@@ -40,6 +40,26 @@
    rule regardless of specificity — that is the only way to re-scale
    utility-set font sizes, and the only way a mask survives a `mask-*` reset.
 
+   🚨 THE PREFLIGHT RULE (0.11.3, measured — not reasoned)
+   -------------------------------------------------------
+   A LAYERED rule here may not declare `margin*`, `padding*`, `border*` or
+   `box-sizing`. Tailwind's preflight zeroes all four on `*, ::before, ::after`
+   inside `@layer base`, and in a host that follows the order statement above
+   this package's layer sits BELOW `base` — so a layered padding is silently
+   discarded with nothing to see, in the consumer that follows the docs most
+   carefully. Read off matrx-frontend's LIVE stylesheet on 2026-09-08:
+
+     layer order  →  properties, [matrx-design-system-tokens,
+                     matrx-design-system], theme, base, components, utilities
+     @layer base  →  *, ::after, ::before, ::backdrop { … margin: 0; padding: 0 }
+
+   Found because `.matrx-dialog-footer`'s padding computed to `0px` on a live
+   dialog while its rule was demonstrably present in the CSSOM. The census it
+   forced found `.pb-safe`, `.pt-safe` and `.matrx-glass-thin-border`'s stroke
+   in the same state — three geometry contracts that had been INERT in
+   matrx-frontend since 0.5.0/0.7.0, silently. All four now live unlayered
+   below. Guard: `styles.test.ts` § THE PREFLIGHT RULE.
+
    Extracted from matrx-frontend `app/globals.css` (the tap-target precedent);
    the host originals were deleted in the same session that shipped this file.
    ========================================================================= */
@@ -88,25 +108,6 @@
     }
   }
 
-  /* -----------------------------------------------------------------------
-     pb-safe — safe-area bottom padding (BottomSheet body/footer, CommandDialog
-     mobile sheet). max() guarantees a minimum padding even when the inset is
-     0 (env() resolves to 0 on non-notched devices and when viewport-fit=cover
-     is absent).
-     ----------------------------------------------------------------------- */
-  .pb-safe {
-    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
-  }
-
-  /* -----------------------------------------------------------------------
-     pt-safe — the top twin, for a `direction="top"` Drawer, which lands under
-     the notch/status bar on exactly the devices where pb-safe matters. Same
-     max() floor and the same reason for it.
-     ----------------------------------------------------------------------- */
-  .pt-safe {
-    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
-  }
-
   /* -----------------------------------------------------------------------
      matrx-glass-thin-border — the glass chrome the BottomSheet close control
      and drag affordances wear. The STRUCTURE (tinted fill, backdrop blur +
@@ -126,8 +127,8 @@
       saturate(var(--matrx-glass-saturate));
     backdrop-filter: blur(var(--matrx-glass-blur))
       saturate(var(--matrx-glass-saturate));
-    border: var(--matrx-glass-border-width-thin) solid
-      var(--matrx-glass-border-color);
+    /* The stroke is NOT here — Tailwind preflight resets `border` in
+       `@layer base`, which outranks this layer. See THE PREFLIGHT RULE. */
   }
   .matrx-glass-thin-border:hover {
     background-color: var(--matrx-glass-bg-hover);
@@ -140,6 +141,7 @@
   .matrx-glass-thin-border:has(> a:active) {
     background-color: var(--matrx-glass-bg);
   }
+
 }
 
 /* Keyframes cannot live inside a cascade layer's rule set and be referenced
@@ -748,6 +750,108 @@
   );
 }
 
+/* ────────────────────────────────────────────────────────────────────────
+   THE PREFLIGHT-RESET GEOMETRY. Everything below this banner is UNLAYERED
+   because Tailwind preflight zeroes `margin`, `padding`, `border` and
+   `box-sizing` on every element from `@layer base` — which outranks this
+   package's layer in any host that declares the documented layer order. A
+   layered version of any of these rules is not "lower priority"; it is GONE,
+   with no error and nothing on screen to trace it by. See THE PREFLIGHT RULE
+   in this file's header for the measurement.
+   ──────────────────────────────────────────────────────────────────────── */
+
+/* pb-safe — safe-area bottom padding (BottomSheet body/footer, CommandDialog
+   mobile sheet, the dialog sheet's footer). max() guarantees a minimum padding
+   even when the inset is 0 (env() resolves to 0 on non-notched devices and
+   when viewport-fit=cover is absent). */
+.pb-safe {
+  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
+}
+
+/* pt-safe — the top twin, for a `direction="top"` Drawer, which lands under
+   the notch/status bar on exactly the devices where pb-safe matters. */
+.pt-safe {
+  padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
+}
+
+/* The glass chrome's STROKE. The fill, blur and elevation stay layered (a host
+   utility should still be able to re-tint them); the stroke cannot, because
+   preflight's `border: 0px solid` would erase it. */
+.matrx-glass-thin-border {
+  border: var(--matrx-glass-border-width-thin) solid
+    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.
+
+   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.4",
   "description": "AI Matrx semantic React primitives shared across Vite, Next.js, desktop, and customer-built applications.",
   "type": "module",
   "license": "MIT",