@ai-matrx/design-system 0.11.2 → 0.11.4

package/dist/index.d.cts

@@ -176,6 +176,15 @@ declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttrib
  *    `AlertDialogCancel` inherit the package Button's own target rules through
  *    `buttonVariants`; the footer keeps them safe-area padded on mobile.
  *
+ * 5. THE STICKY FOOTER NEVER PAINTS OVER THE BODY (0.11.3). Ruling 3's footer
+ *    bled over the card's bottom padding with a negative block margin, and
+ *    `position: sticky` clamps a box to its containing block — so the footer
+ *    was dragged UP by `--dialog-pad` against the card's `gap-4`, covering the
+ *    last 8px of the consequence copy at every length, unreachable because the
+ *    card did not scroll. The bleed is now the card's RESERVATION
+ *    (`matrx-dialog-card` gives its bottom padding to `matrx-dialog-footer`),
+ *    which sticky has nothing to clamp. See `sticky-footer-geometry.test.tsx`.
+ *
  * SEAM INVERSION. The host resolved its portal target through
  * `usePopoutContainer` (its window-panel popout body); here that is the
  * package's `PortalContainerProvider`, with an explicit `container` prop still
@@ -760,9 +769,14 @@ declare function CreatablePicker({ value, options, onSelect, placeholder, search
  *    dismisses WITHOUT writing, and is indistinguishable from a silent save
  *    failure. `max-h-[85dvh] overflow-y-auto` is the cap.
  *
- * 3. THE PRIMARY ACTION IS ALWAYS PRESSABLE. `DialogFooter` is sticky and
- *    bleeds to the card's edges using `--dialog-pad`, so scrolled content
- *    never shows through beneath it. Outside a DialogContent the variable is
+ * 3. THE PRIMARY ACTION IS ALWAYS PRESSABLE — AND NEVER ON TOP OF THE BODY.
+ *    `DialogFooter` is sticky and bleeds to the card's edges using
+ *    `--dialog-pad`. Until 0.11.3 that bleed was a NEGATIVE BLOCK MARGIN,
+ *    which sticky clamps: the footer was dragged up over the row above it by
+ *    `--dialog-pad` minus the card gap. The card now RESERVES the footer's
+ *    block size instead (`matrx-dialog-card` / `matrx-dialog-footer` in
+ *    `styles.css`), so scrolled content never shows through beneath it AND the
+ *    footer never covers the row above it. Outside a DialogContent the variable is
  *    unset, the padding falls back to `0px`, and the footer is the plain row
  *    it always was.
  *

package/dist/index.d.ts

@@ -176,6 +176,15 @@ declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttrib
  *    `AlertDialogCancel` inherit the package Button's own target rules through
  *    `buttonVariants`; the footer keeps them safe-area padded on mobile.
  *
+ * 5. THE STICKY FOOTER NEVER PAINTS OVER THE BODY (0.11.3). Ruling 3's footer
+ *    bled over the card's bottom padding with a negative block margin, and
+ *    `position: sticky` clamps a box to its containing block — so the footer
+ *    was dragged UP by `--dialog-pad` against the card's `gap-4`, covering the
+ *    last 8px of the consequence copy at every length, unreachable because the
+ *    card did not scroll. The bleed is now the card's RESERVATION
+ *    (`matrx-dialog-card` gives its bottom padding to `matrx-dialog-footer`),
+ *    which sticky has nothing to clamp. See `sticky-footer-geometry.test.tsx`.
+ *
  * SEAM INVERSION. The host resolved its portal target through
  * `usePopoutContainer` (its window-panel popout body); here that is the
  * package's `PortalContainerProvider`, with an explicit `container` prop still
@@ -760,9 +769,14 @@ declare function CreatablePicker({ value, options, onSelect, placeholder, search
  *    dismisses WITHOUT writing, and is indistinguishable from a silent save
  *    failure. `max-h-[85dvh] overflow-y-auto` is the cap.
  *
- * 3. THE PRIMARY ACTION IS ALWAYS PRESSABLE. `DialogFooter` is sticky and
- *    bleeds to the card's edges using `--dialog-pad`, so scrolled content
- *    never shows through beneath it. Outside a DialogContent the variable is
+ * 3. THE PRIMARY ACTION IS ALWAYS PRESSABLE — AND NEVER ON TOP OF THE BODY.
+ *    `DialogFooter` is sticky and bleeds to the card's edges using
+ *    `--dialog-pad`. Until 0.11.3 that bleed was a NEGATIVE BLOCK MARGIN,
+ *    which sticky clamps: the footer was dragged up over the row above it by
+ *    `--dialog-pad` minus the card gap. The card now RESERVES the footer's
+ *    block size instead (`matrx-dialog-card` / `matrx-dialog-footer` in
+ *    `styles.css`), so scrolled content never shows through beneath it AND the
+ *    footer never covers the row above it. Outside a DialogContent the variable is
  *    unset, the padding falls back to `0px`, and the footer is the plain row
  *    it always was.
  *

package/dist/index.js

@@ -817,9 +817,13 @@ var AlertDialogContent = React7.forwardRef(({ className, children, container, an
         ref,
         "data-slot": "alert-dialog-content",
         className: cn(
-          `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 border bg-background p-6 shadow-lg`,
+          `matrx-dialog-card fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 border bg-background p-6 shadow-lg`,
           // Ruling 3 — never taller than the viewport, always scrollable, and
           // the footer stays reachable via --dialog-pad like Dialog's.
+          // Ruling 5 (0.11.3) — `matrx-dialog-card` hands the bottom padding to
+          // a sticky footer when there is one, so the footer's box matches the
+          // space the grid gave it and sticky never clamps it up over the
+          // consequence copy.
           "max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
           "sm:rounded-lg",
           animated && MOTION_DIALOG,
@@ -857,9 +861,12 @@ var AlertDialogFooter = ({
     className: cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       // Ruling 3/4 — sticky to the card edges so a scrolled body never shows
-      // through under the actions, and safe-area padded on a phone.
-      "sticky bottom-0 z-10 bg-background pt-3",
-      "mx-[calc(var(--dialog-pad,0px)*-1)] mb-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
+      // through under the actions, and safe-area padded on a phone. ALL of
+      // that geometry is `matrx-dialog-footer`, a rule this package SHIPS
+      // (styles.css), because the utility spelling of it carried a negative
+      // block margin that sticky clamped — painting the footer over the last
+      // 8px of the consequence at every description length (0.11.3).
+      "matrx-dialog-footer bg-background",
       className
     ),
     ...props
@@ -1886,8 +1893,8 @@ var DialogContentPrimitive = React17.forwardRef((props, ref) => {
   );
 });
 DialogContentPrimitive.displayName = "DialogContentPrimitive";
-var DIALOG_DESKTOP_CLASSES2 = `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
-var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
+var DIALOG_DESKTOP_CLASSES2 = `matrx-dialog-card fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
+var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet matrx-dialog-card fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE2 = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
 var DialogContent = React17.forwardRef(
   ({
@@ -1991,8 +1998,12 @@ var DialogFooter = ({
     "data-slot": "dialog-footer",
     className: cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      "sticky bottom-0 z-10 bg-background pt-3",
-      "mx-[calc(var(--dialog-pad,0px)*-1)] mb-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
+      // Ruling 3 — the geometry is `matrx-dialog-footer`, a rule this package
+      // SHIPS (styles.css). It used to be utilities, one of which was a
+      // negative block margin that `position: sticky` clamps — the footer was
+      // yanked up over the row above it by `--dialog-pad` minus the card gap
+      // (0.11.3). The card gives the footer its bottom padding instead.
+      "matrx-dialog-footer bg-background",
       className
     ),
     ...props