@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/AdaptivePopup/AdaptivePopup.spec.tsx

@@ -1,10 +1,11 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { fireEvent, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { OVERLAY_BREAKPOINT } from "@multiplatform.one/theme";
 import { useState, type ReactNode } from "react";
 import { Text } from "tamagui";
 import { Button } from "../Button";
-import { AdaptivePopup } from "./index";
+import { AdaptivePopup, pickAdaptivePopupFace } from "./index";
 
 /**
  * The trigger contract, and why every case fires a REAL press rather than
@@ -208,3 +209,213 @@ describe("AdaptivePopup LC-71", () => {
     expect(dialog()?.textContent).toMatch(/Dialog/);
   });
 });
+
+const originalInnerWidth = window.innerWidth;
+
+function setViewportWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+  window.dispatchEvent(new Event("resize"));
+}
+
+afterEach(() => {
+  setViewportWidth(originalInnerWidth);
+});
+
+function OpenPopup({
+  face,
+  size,
+  footer,
+}: {
+  face?: "dialog" | "drawer";
+  size?: "sm" | "md" | "lg" | "xl" | "fullscreen";
+  footer?: ReactNode;
+}) {
+  const [open, setOpen] = useState(true);
+  return (
+    <AdaptivePopup
+      open={open}
+      onOpenChange={setOpen}
+      title="Edit Profile"
+      description="Make changes to your profile here."
+      face={face}
+      size={size}
+      footer={footer}
+    >
+      <input aria-label="Name" />
+    </AdaptivePopup>
+  );
+}
+
+function surface() {
+  return document.querySelector("[data-testid='adaptive-popup-surface']") as HTMLElement | null;
+}
+
+function shadowClasses(el: Element): string[] {
+  return String(el.className || "")
+    .split(/\s+/)
+    .filter((c) => c.startsWith("_bxsh-"))
+    .sort();
+}
+
+describe("pickAdaptivePopupFace (C22 / OVERLAY_BREAKPOINT)", () => {
+  it("at the overlay breakpoint and below, any face is sheet", () => {
+    expect(pickAdaptivePopupFace({ viewportWidth: OVERLAY_BREAKPOINT, face: "drawer" })).toBe(
+      "sheet",
+    );
+    expect(pickAdaptivePopupFace({ viewportWidth: OVERLAY_BREAKPOINT - 1, face: "drawer" })).toBe(
+      "sheet",
+    );
+    expect(pickAdaptivePopupFace({ viewportWidth: 390 })).toBe("sheet");
+  });
+
+  it("above the overlay breakpoint, face=drawer is drawer", () => {
+    expect(pickAdaptivePopupFace({ viewportWidth: OVERLAY_BREAKPOINT + 1, face: "drawer" })).toBe(
+      "drawer",
+    );
+    expect(pickAdaptivePopupFace({ viewportWidth: 1440, face: "drawer", size: "md" })).toBe(
+      "drawer",
+    );
+  });
+
+  it("above the overlay breakpoint, omitted face is dialog", () => {
+    expect(pickAdaptivePopupFace({ viewportWidth: 1440 })).toBe("dialog");
+    expect(pickAdaptivePopupFace({ viewportWidth: 1440, face: "dialog" })).toBe("dialog");
+  });
+
+  it("size=fullscreen stays dialog-family even with face=drawer", () => {
+    expect(pickAdaptivePopupFace({ viewportWidth: 1440, face: "drawer", size: "fullscreen" })).toBe(
+      "dialog",
+    );
+    expect(
+      pickAdaptivePopupFace({
+        viewportWidth: OVERLAY_BREAKPOINT,
+        face: "drawer",
+        size: "fullscreen",
+      }),
+    ).toBe("sheet");
+  });
+});
+
+describe("AdaptivePopup face pick (same props, three faces)", () => {
+  it("above 640, omitted face renders dialog", async () => {
+    setViewportWidth(1440);
+    renderWithProviders(<OpenPopup />);
+    await waitFor(() => expect(surface()).not.toBeNull());
+    expect(surface()?.getAttribute("data-adaptive-popup-mode")).toBe("dialog");
+  });
+
+  it("above 640, face=drawer renders the edge drawer", async () => {
+    setViewportWidth(1440);
+    renderWithProviders(<OpenPopup face="drawer" />);
+    await waitFor(() => expect(surface()).not.toBeNull());
+    expect(surface()?.getAttribute("data-adaptive-popup-mode")).toBe("drawer");
+  });
+
+  it("at 640, face=drawer renders the existing sheet", async () => {
+    setViewportWidth(OVERLAY_BREAKPOINT);
+    renderWithProviders(<OpenPopup face="drawer" />);
+    await waitFor(() => expect(surface()).not.toBeNull());
+    expect(surface()?.getAttribute("data-adaptive-popup-mode")).toBe("sheet");
+  });
+
+  it("at 390, face=drawer renders the existing sheet", async () => {
+    setViewportWidth(390);
+    renderWithProviders(<OpenPopup face="drawer" />);
+    await waitFor(() => expect(surface()).not.toBeNull());
+    expect(surface()?.getAttribute("data-adaptive-popup-mode")).toBe("sheet");
+  });
+
+  it("size=fullscreen above 640 stays dialog even with face=drawer", async () => {
+    setViewportWidth(1440);
+    renderWithProviders(<OpenPopup face="drawer" size="fullscreen" />);
+    await waitFor(() => expect(surface()).not.toBeNull());
+    expect(surface()?.getAttribute("data-adaptive-popup-mode")).toBe("dialog");
+  });
+});
+
+describe("AdaptivePopup drawer contract (LC-48 / DG-OVL-01 / overlay ground)", () => {
+  beforeEach(() => {
+    setViewportWidth(1440);
+  });
+
+  it("traps focus in the drawer and restores it to the opener on close (LC-48)", async () => {
+    function RestoreHarness() {
+      const [open, setOpen] = useState(false);
+      return (
+        <AdaptivePopup
+          open={open}
+          onOpenChange={setOpen}
+          face="drawer"
+          title="Edit Profile"
+          trigger={<Button>Open Popup</Button>}
+        >
+          <input aria-label="Name" />
+        </AdaptivePopup>
+      );
+    }
+    const result = renderWithProviders(<RestoreHarness />);
+    const trigger = result.container.querySelector("[role='button']") as HTMLElement;
+    trigger.focus();
+    press(trigger);
+    await waitFor(() => expect(surface()?.getAttribute("data-adaptive-popup-mode")).toBe("drawer"));
+    const frame = dialog() as HTMLElement;
+    expect(frame.contains(document.activeElement)).toBe(true);
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(dialog()).toBeNull());
+    await waitFor(() => expect(document.activeElement).toBe(trigger));
+  });
+
+  it("Escape dismisses the drawer (DG-OVL-01; AdaptivePopup is not a destructive alertdialog)", async () => {
+    renderWithProviders(<OpenPopup face="drawer" />);
+    await waitFor(() => expect(surface()?.getAttribute("data-adaptive-popup-mode")).toBe("drawer"));
+    fireEvent.keyDown(document, { key: "Escape", code: "Escape" });
+    await waitFor(() => expect(dialog()).toBeNull());
+  });
+
+  it("grounds on $background and paints overlay elevation, not Button $1", async () => {
+    renderWithProviders(
+      <>
+        <Button testID="mpo-button-control">Save</Button>
+        <OpenPopup face="drawer" />
+      </>,
+    );
+    await waitFor(() => expect(surface()).not.toBeNull());
+    const button = document.querySelector('[data-testid="mpo-button-control"]');
+    expect(button).toBeTruthy();
+    expect(surface()?.getAttribute("data-popup-ground")).toBe("$background");
+    const drawerShadow = shadowClasses(surface() as Element);
+    const buttonShadow = shadowClasses(button as Element);
+    expect(drawerShadow.length, "drawer paints an overlay shadow").toBeGreaterThan(0);
+    expect(buttonShadow.length, "Button paints the $1 control shadow").toBeGreaterThan(0);
+    expect(drawerShadow, "overlay shadow must not be Button $1").not.toEqual(buttonShadow);
+  });
+
+  it("pins to the inline-end viewport edge at zero gap", async () => {
+    renderWithProviders(<OpenPopup face="drawer" />);
+    await waitFor(() => expect(surface()).not.toBeNull());
+    expect(surface()?.getAttribute("data-drawer-gap")).toBe("0");
+    expect(surface()?.getAttribute("data-drawer-edge")).toBe("inline-end");
+  });
+
+  it("width follows sizeToWidth (sm 400 / md 600 / lg 800 / xl 1000)", async () => {
+    const widths = { sm: "400", md: "600", lg: "800", xl: "1000" } as const;
+    for (const [size, width] of Object.entries(widths)) {
+      const { unmount } = renderWithProviders(
+        <OpenPopup face="drawer" size={size as keyof typeof widths} />,
+      );
+      await waitFor(() => expect(surface()).not.toBeNull());
+      expect(surface()?.getAttribute("data-popup-width")).toBe(width);
+      unmount();
+    }
+  });
+
+  it("attached-edge corners stay 0 (CONTAINER-CAP on the free edge only)", async () => {
+    renderWithProviders(<OpenPopup face="drawer" />);
+    await waitFor(() => expect(surface()).not.toBeNull());
+    expect(surface()?.getAttribute("data-drawer-attached-radius")).toBe("0");
+  });
+});

package/src/AdaptivePopup/AdaptivePopup.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof AdaptivePopup> = {
     docs: {
       description: {
         component:
-          "A responsive popup component that renders as a bottom Sheet on mobile/small screens and a centered Dialog on desktop. Resize your browser to see the adaptive behavior.",
+          'A responsive popup that renders as a bottom Sheet at OVERLAY_BREAKPOINT and below, a centered Dialog on desktop, or an edge-anchored Drawer when face="drawer" above that breakpoint.',
       },
     },
   },
@@ -22,6 +22,10 @@ const meta: Meta<typeof AdaptivePopup> = {
       control: "select",
       options: ["sm", "md", "lg", "xl", "fullscreen"],
     },
+    face: {
+      control: "select",
+      options: ["dialog", "drawer"],
+    },
     title: { control: "text" },
     description: { control: "text" },
     showCloseButton: { control: "boolean" },
@@ -64,6 +68,43 @@ export const Main: Story = {
   },
 };
 
+export const Drawer: Story = {
+  name: "Drawer",
+  render: () => {
+    const Example = () => {
+      const [open, setOpen] = useState(false);
+      return (
+        <AdaptivePopup
+          open={open}
+          onOpenChange={setOpen}
+          face="drawer"
+          title="Edit record"
+          description="Keep the page in view while you edit."
+          trigger={<Button>Open Drawer</Button>}
+          footer={
+            <XStack gap="$2" justifyContent="flex-end">
+              <Button chromeless onPress={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button onPress={() => setOpen(false)}>Save</Button>
+            </XStack>
+          }
+        >
+          <YStack gap="$3">
+            <Input label="Name" placeholder="Enter your name" />
+            <Input label="Email" placeholder="Enter your email" />
+            <Input label="Title" placeholder="Job title" />
+            <Input label="Team" placeholder="Team" />
+            <Input label="Location" placeholder="Location" />
+            <Input label="Notes" placeholder="Notes" />
+          </YStack>
+        </AdaptivePopup>
+      );
+    };
+    return <Example />;
+  },
+};
+
 export const Sizes: Story = {
   render: () => {
     const SizeExample = ({ size }: { size: "sm" | "md" | "lg" | "xl" | "fullscreen" }) => {

package/src/AdaptivePopup/index.tsx

@@ -1,6 +1,10 @@
 import { useCallback, useRef, type ReactNode } from "react";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
-import { Dialog, isWeb, Sheet, Unspaced, useMedia, View, XStack, YStack } from "tamagui";
+import {
+  OVERLAY_BREAKPOINT,
+  ensureFocusVisibleRing,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { Dialog, isWeb, Sheet, Unspaced, useMedia, View, VisuallyHidden, XStack, YStack } from "tamagui";
 import { X } from "@tamagui/lucide-icons-2";
 import { formCommonColors } from "../shared/colorRamps";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
@@ -30,6 +34,13 @@ export interface AdaptivePopupProps {
    * - `fullscreen`: fills viewport with padding
    */
   size?: "sm" | "md" | "lg" | "xl" | "fullscreen";
+  /**
+   * Desktop face. `"drawer"` is the edge-anchored companion (C22) above
+   * `OVERLAY_BREAKPOINT`. At the breakpoint and below the drawer face does
+   * not exist — the same props render the existing sheet. `size="fullscreen"`
+   * stays dialog-family. Default `"dialog"`.
+   */
+  face?: "dialog" | "drawer";
   /** Whether to show the close button. Default true. */
   showCloseButton?: boolean;
   /** Custom footer content (e.g. action buttons) */
@@ -54,6 +65,40 @@ const sizeToHeight: Record<NonNullable<AdaptivePopupProps["size"]>, number | str
   fullscreen: "90vh",
 };
 
+export type AdaptivePopupRenderedFace = "dialog" | "drawer" | "sheet";
+
+/**
+ * Face-picking rule (C22): ≤ OVERLAY_BREAKPOINT always sheet; above it,
+ * `face="drawer"` → edge panel unless `size="fullscreen"` (dialog-family).
+ * A panel the user keeps open is SupportingPaneLayout, not this overlay (LC-29).
+ */
+export function pickAdaptivePopupFace(options: {
+  face?: AdaptivePopupProps["face"];
+  size?: AdaptivePopupProps["size"];
+  viewportWidth: number;
+}): AdaptivePopupRenderedFace {
+  if (options.viewportWidth <= OVERLAY_BREAKPOINT) return "sheet";
+  if (options.size === "fullscreen") return "dialog";
+  if (options.face === "drawer") return "drawer";
+  return "dialog";
+}
+
+/** Reference §8 overlay shadow — rgba(0,0,0,0.12) 0 12px 24px. Not Button $1. */
+const overlayElevationShadow = {
+  shadowColor: "rgba(0,0,0,0.12)",
+  shadowOffset: { width: 0, height: 12 },
+  shadowOpacity: 1,
+  shadowRadius: 24,
+} as const;
+
+function readRtl(): boolean {
+  return (
+    isWeb &&
+    typeof document !== "undefined" &&
+    document.documentElement.getAttribute("dir") === "rtl"
+  );
+}
+
 /**
  * LC-71: the overlay frame is not a control. Auto-focus on open (Radix /
  * Sheet) must not paint a ring on the panel; the first inner field rings if
@@ -66,21 +111,6 @@ const overlayFrameFocus = {
   focusVisibleStyle: { outlineWidth: 0 },
 } as const;
 
-function VisuallyHidden({ children }: { children: ReactNode }) {
-  return (
-    <YStack
-      position="absolute"
-      width={1}
-      height={1}
-      overflow="hidden"
-      opacity={0}
-      pointerEvents="none"
-    >
-      {children}
-    </YStack>
-  );
-}
-
 /**
  * Overlay close: nested density (LC-73), keyboard-only ring on the painted
  * circle (LC-71). House Button's circular press floor is the page 44px well —
@@ -134,6 +164,7 @@ export function AdaptivePopup({
   description,
   children,
   size = "md",
+  face = "dialog",
   showCloseButton = true,
   footer,
   disabled,
@@ -145,19 +176,27 @@ export function AdaptivePopup({
   // `media.sm` = v5 minWidth 640 (`gtSm` died with the v5 media map,
   // MPO-13 C4) — SSR fallback only; the viewport hook wins on client.
   const isDesktop = typeof window !== "undefined" ? viewportGtSm : media.sm === true;
+  const renderedFace = pickAdaptivePopupFace({
+    face,
+    size,
+    viewportWidth: isDesktop ? OVERLAY_BREAKPOINT + 1 : OVERLAY_BREAKPOINT,
+  });
+  const rtl = readRtl();
   // Sheet mode only: the desktop Dialog already dismisses via Dismissable.
-  useSheetEscapeDismiss(open && !isDesktop, () => onOpenChange(false));
+  useSheetEscapeDismiss(open && renderedFace === "sheet", () => onOpenChange(false));
   // DG-A11Y-04 / Axiom 7: Tamagui's focus scope only restores focus when a
   // Dialog.Trigger lives inside the Dialog — this popup is (also) opened
   // programmatically, so close dropped focus on <body>. Restore it ourselves;
   // sheet mode additionally moves focus in and traps Tab (Sheet has no scope).
   const sheetFrameRef = useRef<HTMLElement | null>(null);
-  useReturnFocusOnClose(open && isDesktop);
-  useSheetModalFocus(open && !isDesktop, sheetFrameRef);
+  useReturnFocusOnClose(open && renderedFace !== "sheet");
+  useSheetModalFocus(open && renderedFace === "sheet", sheetFrameRef);
 
   const maxWidth = sizeToWidth[size];
   const maxHeight = sizeToHeight[size];
   const closePx = nestedKnobs.nestedControl.px;
+  const drawerWidth = typeof maxWidth === "number" ? maxWidth : sizeToWidth.md;
+  const { borderRadius: drawerFreeRadius, ...drawerRadiusRest } = knobProps.containerRadius;
 
   const openFromTrigger = useCallback(() => {
     if (!disabled) onOpenChange(true);
@@ -233,10 +272,12 @@ export function AdaptivePopup({
     </YStack>
   );
 
-  // Compact (Apple HIG / Radix Adapt): sheet. Regular: modal dialog (form
-  // sheet). Popover is the wrong desktop primitive here — AdaptivePopup is a
-  // titled form with a footer, not a small anchored bubble (that's FloatingPanel).
-  if (!isDesktop) {
+  // Compact: sheet. Regular: modal dialog (form sheet). Drawer is the third
+  // face: edge-anchored companion above the overlay breakpoint. Same 860
+  // pivot as FloatingPanel (useViewportGtSm) — never Tamagui Adapt. Popover
+  // is the wrong desktop primitive here — AdaptivePopup is a titled form
+  // with a footer, not a small anchored bubble (that's FloatingPanel).
+  if (renderedFace === "sheet") {
     return (
       <>
         {trigger && <View {...triggerWrap}>{trigger}</View>}
@@ -288,6 +329,97 @@ export function AdaptivePopup({
     );
   }
 
+  if (renderedFace === "drawer") {
+    const attached = 0;
+    const free = drawerFreeRadius;
+    const drawerRadius = rtl
+      ? {
+          borderTopLeftRadius: attached,
+          borderBottomLeftRadius: attached,
+          borderTopRightRadius: free,
+          borderBottomRightRadius: free,
+        }
+      : {
+          borderTopRightRadius: attached,
+          borderBottomRightRadius: attached,
+          borderTopLeftRadius: free,
+          borderBottomLeftRadius: free,
+        };
+    const slideFromEnd = rtl ? -24 : 24;
+    return (
+      <Dialog modal open={open} onOpenChange={onOpenChange}>
+        {trigger && (
+          <Dialog.Trigger asChild disabled={disabled}>
+            <View {...triggerWrap}>{trigger}</View>
+          </Dialog.Trigger>
+        )}
+
+        <Dialog.Portal zIndex={zIndex.dropdown}>
+          <Dialog.Overlay
+            key="overlay"
+            backgroundColor="$shadow6"
+            transition={knobProps.transition}
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+          <Dialog.Content
+            key="content"
+            unstyled
+            position="fixed"
+            top={0}
+            bottom={0}
+            {...(rtl ? { left: 0 } : { right: 0 })}
+            height="100%"
+            width={drawerWidth}
+            maxHeight="100%"
+            margin={0}
+            x={0}
+            y={0}
+            pointerEvents="auto"
+            tabIndex={-1}
+            data-testid="adaptive-popup-surface"
+            data-adaptive-popup-mode="drawer"
+            data-popup-ground="$background"
+            data-drawer-gap="0"
+            data-drawer-edge="inline-end"
+            data-popup-width={String(drawerWidth)}
+            data-drawer-attached-radius="0"
+            {...knobProps.elevatedSurface}
+            {...drawerRadiusRest}
+            {...drawerRadius}
+            elevate={false}
+            elevation={knobProps.elevatedSurface.elevation}
+            {...overlayElevationShadow}
+            backgroundColor="$background"
+            {...overlayFrameFocus}
+            transition={knobProps.transition}
+            animateOnly={["transform", "opacity"]}
+            enterStyle={{ opacity: 0, x: slideFromEnd }}
+            exitStyle={{ opacity: 0, x: slideFromEnd }}
+            {...knobProps.panelPadding}
+            onOpenAutoFocus={(event) => {
+              const root = event.currentTarget as unknown as HTMLElement | null;
+              const field = root?.querySelector<HTMLElement>(
+                "input, textarea, select, [contenteditable='true']",
+              );
+              if (!field) return;
+              event.preventDefault();
+              field.focus({ preventScroll: true });
+            }}
+            onCloseAutoFocus={(event) => {
+              // LC-48: Dialog.Trigger is the wrapper View (tabIndex -1), not
+              // the painted Button. Prevent Radix restoring there so
+              // useReturnFocusOnClose can return to the opener.
+              event.preventDefault();
+            }}
+          >
+            {body}
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    );
+  }
+
   return (
     <Dialog modal open={open} onOpenChange={onOpenChange}>
       {trigger && (
@@ -335,6 +467,12 @@ export function AdaptivePopup({
             event.preventDefault();
             field.focus({ preventScroll: true });
           }}
+          onCloseAutoFocus={(event) => {
+            // LC-48: Dialog.Trigger is the wrapper View (tabIndex -1), not
+            // the painted Button. Prevent Radix restoring there so
+            // useReturnFocusOnClose can return to the opener.
+            event.preventDefault();
+          }}
         >
           {body}
         </Dialog.Content>

package/src/Button/Button.density.spec.tsx

@@ -0,0 +1,78 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-42 / LC-76: the density knob and the `compact` PROP must land the
+ * SAME padX. Height stays 44 at both stops — density moves pad/gap only.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+/** Last `_pl-Npx` / `_pr-Npx` class wins (paddingHorizontal expands to both). */
+function paddingPxFromClass(el: HTMLElement): number | null {
+  let found: number | null = null;
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const m = c.match(/^_p[lr]-(\d+)px$/);
+    if (m) found = Number(m[1]);
+  }
+  return found;
+}
+
+describe("Button density knob = compact PROP (MPO-42)", () => {
+  it("compact PROP and density:compact knob land the SAME padX", () => {
+    renderWithProviders(
+      <Button compact size="$4">
+        Save
+      </Button>,
+    );
+    const viaProp = screen.getByRole("button");
+    const propPad = paddingPxFromClass(viaProp);
+    expect(viaProp.getAttribute("data-mp-density")).toBe("compact");
+    expect(propPad).toBe(16);
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ density: "compact" }}>
+        <Button size="$4">Save</Button>
+      </Preset>,
+    );
+    const viaKnob = screen.getByRole("button");
+    const knobPad = paddingPxFromClass(viaKnob);
+    expect(viaKnob.getAttribute("data-mp-density")).toBe("compact");
+    expect(knobPad).toBe(propPad);
+    expect(knobPad).toBe(16);
+  });
+
+  it("height stays 44 at comfortable and compact density stops", () => {
+    renderWithProviders(<Button size="$4">Save</Button>);
+    const comfortable = screen.getByRole("button");
+    expect(comfortable.getAttribute("data-mp-button-height")).toBe("44");
+    expect(comfortable.className).toMatch(/_h-44px/);
+    expect(paddingPxFromClass(comfortable)).toBe(18);
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ density: "compact" }}>
+        <Button size="$4">Save</Button>
+      </Preset>,
+    );
+    const viaKnob = screen.getByRole("button");
+    expect(viaKnob.getAttribute("data-mp-button-height")).toBe("44");
+    expect(viaKnob.className).toMatch(/_h-44px/);
+    cleanup();
+
+    renderWithProviders(
+      <Button compact size="$4">
+        Save
+      </Button>,
+    );
+    const viaProp = screen.getByRole("button");
+    expect(viaProp.getAttribute("data-mp-button-height")).toBe("44");
+    expect(viaProp.className).toMatch(/_h-44px/);
+  });
+});