@ai-matrx/design-system 0.11.3 → 0.11.5

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);
@@ -141,48 +142,6 @@
     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
@@ -791,14 +750,76 @@
   );
 }
 
+/* ────────────────────────────────────────────────────────────────────────
+   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);
+}
+
+/* -----------------------------------------------------------------------
+   --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-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).
+   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
@@ -810,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.3",
+  "version": "0.11.5",
   "description": "AI Matrx semantic React primitives shared across Vite, Next.js, desktop, and customer-built applications.",
   "type": "module",
   "license": "MIT",