@ai-matrx/design-system 0.11.4 → 0.11.5

package/dist/index.d.cts

@@ -182,8 +182,8 @@ declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttrib
  *    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`.
+ *    (`.matrx-dialog-card` hands its bottom padding to the 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
@@ -774,11 +774,11 @@ declare function CreatablePicker({ value, options, onSelect, placeholder, search
  *    `--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.
+ *    block size instead (`.matrx-dialog-card` in `styles.css` hands its bottom
+ *    padding to the footer), so scrolled content never shows through beneath
+ *    the actions AND the footer never covers the row above it. Outside a
+ *    DialogContent both variables are unset, the padding falls back to `0px`,
+ *    and the footer is the plain row it always was.
  *
  * 4. ON MOBILE THE SAME DIALOG IS A BOTTOM SHEET — full width, bottom
  *    anchored, height-capped, internally scrollable, safe-area padded. Opt out

package/dist/index.d.ts

@@ -182,8 +182,8 @@ declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttrib
  *    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`.
+ *    (`.matrx-dialog-card` hands its bottom padding to the 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
@@ -774,11 +774,11 @@ declare function CreatablePicker({ value, options, onSelect, placeholder, search
  *    `--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.
+ *    block size instead (`.matrx-dialog-card` in `styles.css` hands its bottom
+ *    padding to the footer), so scrolled content never shows through beneath
+ *    the actions AND the footer never covers the row above it. Outside a
+ *    DialogContent both variables are unset, the padding falls back to `0px`,
+ *    and the footer is the plain row it always was.
  *
  * 4. ON MOBILE THE SAME DIALOG IS A BOTTOM SHEET — full width, bottom
  *    anchored, height-capped, internally scrollable, safe-area padded. Opt out

package/dist/index.js

@@ -824,7 +824,7 @@ var AlertDialogContent = React7.forwardRef(({ className, children, container, an
           // 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",
+          "max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] [--dialog-pad-bottom:1.5rem] overflow-x-clip [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
           "sm:rounded-lg",
           animated && MOTION_DIALOG,
           className
@@ -861,12 +861,25 @@ 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. 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",
+      // through under the actions, and safe-area padded on a phone.
+      //
+      // 🚨 THERE IS NO `mb-[…]` HERE, AND THERE MUST NEVER BE ONE AGAIN
+      // (0.11.3, feedback bf8fb00b). The bleed over the card's bottom padding
+      // used to be a NEGATIVE BLOCK MARGIN, which makes this box taller than
+      // the grid area the card allocates it — and `position: sticky` CLAMPS a
+      // box to its containing block, so the browser yanked the footer UP by
+      // `--dialog-pad` against the card's `gap-4` and painted 8px of opaque
+      // footer over the last line of the consequence, at every length. The
+      // card now RESERVES this footer's block size instead (`matrx-dialog-card`
+      // in styles.css hands over its `padding-bottom`), so the bleed costs no
+      // margin at all. Guard: `sticky-footer-geometry.test.tsx`.
+      //
+      // These stay UTILITIES rather than a shipped rule so a caller's
+      // `className` still wins through tailwind-merge — a shipped rule would
+      // have to be unlayered to survive Tailwind preflight (§ THE PREFLIGHT
+      // RULE in styles.css) and would then override every caller's padding.
+      "sticky bottom-0 z-10 bg-background pt-3",
+      "mx-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad-bottom,0px)]",
       className
     ),
     ...props
@@ -1893,7 +1906,7 @@ var DialogContentPrimitive = React17.forwardRef((props, ref) => {
   );
 });
 DialogContentPrimitive.displayName = "DialogContentPrimitive";
-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_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] [--dialog-pad-bottom: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(
@@ -1998,12 +2011,26 @@ var DialogFooter = ({
     "data-slot": "dialog-footer",
     className: cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      // 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",
+      // 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.
+      //
+      // 🚨 THERE IS NO `mb-[…]` HERE, AND THERE MUST NEVER BE ONE AGAIN
+      // (0.11.3, feedback bf8fb00b). The bleed over the card's bottom padding
+      // used to be a NEGATIVE BLOCK MARGIN, which makes this box taller than
+      // the grid area the card allocates it — and `position: sticky` CLAMPS a
+      // box to its containing block, so the browser yanked the footer UP by
+      // `--dialog-pad` against the card's `gap-4` and painted 8px of opaque
+      // footer over the last line of the consequence, at every length. The
+      // card now RESERVES this footer's block size instead (`matrx-dialog-card`
+      // in styles.css hands over its `padding-bottom`), so the bleed costs no
+      // margin at all. Guard: `sticky-footer-geometry.test.tsx`.
+      //
+      // These stay UTILITIES rather than a shipped rule so a caller's
+      // `className` still wins through tailwind-merge — a shipped rule would
+      // have to be unlayered to survive Tailwind preflight (§ THE PREFLIGHT
+      // RULE in styles.css) and would then override every caller's padding.
+      "sticky bottom-0 z-10 bg-background pt-3",
+      "mx-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad-bottom,0px)]",
       className
     ),
     ...props