@ai-matrx/design-system 0.11.3 → 0.11.4

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # Changelog
 
+## 0.11.4 — 2026-09-08
+
+**0.11.3 SHIPPED THE FIX INTO A LAYER WHERE IT DID NOT APPLY — and the census
+that forced found three older contracts in the same state.** Take this patch,
+not 0.11.3.
+
+0.11.3 moved the sticky-footer geometry into a shipped `.matrx-dialog-footer`
+rule inside `@layer matrx-design-system`. On the live matrx-frontend build that
+rule was present in the CSSOM and its padding computed to **`0px`**:
+
+```
+layer order  →  properties, [matrx-design-system-tokens, matrx-design-system],
+                theme, base, components, utilities
+@layer base  →  *, ::after, ::before, ::backdrop { … margin: 0; padding: 0 }
+```
+
+🚨 **THE PREFLIGHT RULE.** Tailwind's preflight zeroes `margin`, `padding`,
+`border` and `box-sizing` on every element from `@layer base` — and a host that
+follows THIS PACKAGE'S OWN documented layer statement puts
+`matrx-design-system` BELOW `base`. So a layered declaration of any of those
+four is not lower-priority: it is **gone**, with no error and nothing on screen
+to trace it by, in the consumer that followed the docs most carefully.
+
+**The census that finding forced — three contracts that were already inert,
+silently, in matrx-frontend:**
+
+| Rule | Shipped | Property preflight ate |
+|---|---|---|
+| `.pb-safe` | 0.5.0 | `padding-bottom` — the safe-area floor under every BottomSheet body/footer and the CommandDialog mobile sheet |
+| `.pt-safe` | 0.7.0 | `padding-top` — the notch clearance on a `direction="top"` Drawer |
+| `.matrx-glass-thin-border` | 0.5.0 | `border` — the glass chrome's whole stroke |
+
+All four now live **unlayered**, under a banner that says why, and the glass
+rule is split so only its stroke leaves the layer (fill, blur and elevation
+stay layered, so a host utility can still re-tint them).
+
+**Guard:** `styles.test.ts` § THE PREFLIGHT RULE — no layered rule may declare
+a preflight-reset property, and the four known contracts must be unlayered and
+intact. Proven RED on the 0.11.3 sheet, where it named all three older
+offenders as well as the new one.
+
+### Consumer action (C28)
+
+**Take 0.11.4.** 0.11.3 has the correct structure and an inert footer rule: the
+occlusion is gone but the footer renders with no padding and no bleed. Three
+contracts get quietly *better* here — safe-area padding and the glass stroke
+start working in every Tailwind host for the first time. One behaviour change
+worth knowing: because `.matrx-dialog-footer`, `.pb-safe`, `.pt-safe` and the
+glass stroke are now unlayered, a host utility on the same element no longer
+overrides those specific properties. Pass geometry through the component's own
+seams (`--dialog-pad`, `--dialog-pad-bottom`) rather than a padding utility.
+
 ## 0.11.3 — 2026-09-07
 
 **THE STICKY FOOTER STOPPED PAINTING OVER THE CONSEQUENCE.** `ConfirmDialog`'s

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,6 +750,81 @@
   );
 }
 
+/* ────────────────────────────────────────────────────────────────────────
+   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.
 

package/package.json

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