@multiplatform.one/forms 6.7.0 → 7.0.0

package/src/AdaptivePopup/AdaptivePopup.spec.tsx

@@ -0,0 +1,210 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useState, type ReactNode } from "react";
+import { Text } from "tamagui";
+import { Button } from "../Button";
+import { AdaptivePopup } from "./index";
+
+/**
+ * The trigger contract, and why every case fires a REAL press rather than
+ * calling `onOpenChange` directly.
+ *
+ * `trigger` is a slot: the wrapper around it is what opens the popup, so the
+ * press has to travel from whatever the consumer put in the slot out to that
+ * wrapper. Tamagui's press wrapper calls `e.stopPropagation()` on any component
+ * carrying its own `onPress`/`onClick` (`@tamagui/web` `createComponent`, the
+ * `onPress` branch), so a pressable trigger — a Button, which is what every
+ * story and every doc example passes — swallowed the click and the popup never
+ * opened. A test that pressed the WRAPPER instead of the Button would have
+ * passed against that bug.
+ */
+
+function Harness({ trigger, disabled }: { trigger: ReactNode; disabled?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <AdaptivePopup
+      open={open}
+      onOpenChange={setOpen}
+      title="Edit Profile"
+      description="Make changes to your profile here."
+      trigger={trigger}
+      disabled={disabled}
+    >
+      <Text>popup body</Text>
+    </AdaptivePopup>
+  );
+}
+
+/** A real press: the half that opens a panel is mousedown, so fire all three. */
+const press = (el: Element) => {
+  fireEvent.mouseDown(el);
+  fireEvent.mouseUp(el);
+  fireEvent.click(el);
+};
+
+const dialog = () => document.querySelector("[role='dialog']");
+
+describe("AdaptivePopup trigger", () => {
+  it("a pressable trigger (Button) opens the popup", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} />);
+    const button = result.container.querySelector("[role='button']");
+    expect(button).not.toBeNull();
+    press(button as Element);
+    await waitFor(() => {
+      expect(dialog()).not.toBeNull();
+    });
+  });
+
+  // The press a real user makes lands on the innermost painted node — the
+  // label — not on the frame the test happens to query.
+  it("pressing the label inside a Button trigger opens the popup", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} />);
+    // The DEEPEST node carrying the whole string — several ancestors also
+    // report `textContent === "Open Popup"`, and pressing one of those would
+    // sidestep the very swallow this case exists to catch.
+    const label = Array.from(result.container.querySelectorAll("span")).findLast(
+      (el) => el.textContent === "Open Popup",
+    );
+    expect(label).toBeDefined();
+    expect(label?.closest("[role='button']")).not.toBeNull();
+    press(label as Element);
+    await waitFor(() => {
+      expect(dialog()).not.toBeNull();
+    });
+  });
+
+  // Axiom 12 LEGIBLE FLOOR: Button synthesizes a click on Enter/Space so
+  // keyboard activation rides the same path as a pointer press.
+  it.each(["Enter", " "])("keyboard %s on a Button trigger opens the popup", async (key) => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} />);
+    const button = result.container.querySelector("[role='button']") as Element;
+    fireEvent.keyDown(button, { key });
+    await waitFor(() => {
+      expect(dialog()).not.toBeNull();
+    });
+  });
+
+  // The trigger slot need not be pressable — this is the path that worked
+  // before, and it must not start double-firing now that a capture-phase
+  // opener runs alongside Dialog.Trigger's own bubble-phase toggle.
+  it("a non-pressable trigger opens the popup and stays open", async () => {
+    const result = renderWithProviders(<Harness trigger={<Text>Open Popup</Text>} />);
+    const label = Array.from(result.container.querySelectorAll("*")).find(
+      (el) => el.textContent === "Open Popup" && el.children.length === 0,
+    );
+    press(label as Element);
+    await waitFor(() => {
+      expect(dialog()).not.toBeNull();
+    });
+    // Both the capture-phase opener and Dialog.Trigger's own bubble-phase
+    // toggle see this press; a toggle-shaped second call would shut it again.
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(dialog()).not.toBeNull();
+  });
+
+  it("disabled: a pressable trigger opens nothing", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} disabled />);
+    press(result.container.querySelector("[role='button']") as Element);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(dialog()).toBeNull();
+  });
+
+  it("disabled: keyboard activation opens nothing", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} disabled />);
+    fireEvent.keyDown(result.container.querySelector("[role='button']") as Element, {
+      key: "Enter",
+    });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(dialog()).toBeNull();
+  });
+});
+
+describe("AdaptivePopup LC-71", () => {
+  it("close names itself and dismisses", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} />);
+    press(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(dialog()).not.toBeNull());
+    const close = document.querySelector("[data-testid='adaptive-popup-close']");
+    expect(close).not.toBeNull();
+    expect(close?.getAttribute("aria-label")).toBe("Close");
+    press(close as Element);
+    await waitFor(() => expect(dialog()).toBeNull());
+  });
+
+  it("keyboard Enter on close dismisses", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} />);
+    press(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(dialog()).not.toBeNull());
+    const close = document.querySelector("[data-testid='adaptive-popup-close']") as HTMLElement;
+    fireEvent.keyDown(close, { key: "Enter" });
+    await waitFor(() => expect(dialog()).toBeNull());
+  });
+
+  it("close paints at nested density, not the 44px page well", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} />);
+    press(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(dialog()).not.toBeNull());
+    const close = document.querySelector("[data-testid='adaptive-popup-close']");
+    const px = Number(close?.getAttribute("data-nested-px"));
+    expect(px).toBeGreaterThanOrEqual(24);
+    expect(px).toBeLessThan(44);
+  });
+
+  it("close sits after the body so fields are the first tab stop", async () => {
+    function FieldHarness() {
+      const [open, setOpen] = useState(false);
+      return (
+        <AdaptivePopup
+          open={open}
+          onOpenChange={setOpen}
+          title="Edit Profile"
+          trigger={<Button>Open Popup</Button>}
+        >
+          <input aria-label="Name" />
+        </AdaptivePopup>
+      );
+    }
+    const result = renderWithProviders(<FieldHarness />);
+    press(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(dialog()).not.toBeNull());
+    const input = dialog()?.querySelector("input");
+    const close = dialog()?.querySelector("[data-testid='adaptive-popup-close']");
+    expect(input).not.toBeNull();
+    expect(close).not.toBeNull();
+    expect(input!.compareDocumentPosition(close!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("the overlay frame suppresses its own ring (LC-71: panel is not a control)", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} />);
+    press(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(dialog()).not.toBeNull());
+    const surface = document.querySelector("[data-testid='adaptive-popup-surface']") as HTMLElement;
+    expect(surface).not.toBeNull();
+    expect(surface.getAttribute("data-adaptive-popup-mode")).toBe("dialog");
+    expect(surface.tabIndex).toBe(-1);
+  });
+
+  it("the trigger wrapper is not a tab stop — the painted Button is the ring boundary", () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Popup</Button>} />);
+    const wrap = result.container.querySelector("[data-testid='adaptive-popup-trigger']");
+    expect(wrap).not.toBeNull();
+    expect((wrap as HTMLElement).tabIndex).toBe(-1);
+    expect(wrap?.getAttribute("role")).not.toBe("button");
+  });
+
+  it("omitted title still exposes a dialog name for assistive tech", async () => {
+    function Untitled() {
+      const [open, setOpen] = useState(false);
+      return (
+        <AdaptivePopup open={open} onOpenChange={setOpen} trigger={<Button>Open Popup</Button>}>
+          <Text>body</Text>
+        </AdaptivePopup>
+      );
+    }
+    const result = renderWithProviders(<Untitled />);
+    press(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(dialog()).not.toBeNull());
+    expect(dialog()?.textContent).toMatch(/Dialog/);
+  });
+});

package/src/AdaptivePopup/index.tsx

@@ -1,8 +1,8 @@
-import { useRef, type ReactNode } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Dialog, Sheet, Unspaced, useMedia, View, XStack, YStack } from "tamagui";
+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 { X } from "@tamagui/lucide-icons-2";
-import { Button } from "../Button";
+import { formCommonColors } from "../shared/colorRamps";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
 import { zIndex } from "../shared/zIndex";
@@ -54,6 +54,78 @@ const sizeToHeight: Record<NonNullable<AdaptivePopupProps["size"]>, number | str
   fullscreen: "90vh",
 };
 
+/**
+ * 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
+ * the open was keyboard-origin (text-entry carve-out) or the close control
+ * rings when Tab reaches it.
+ */
+const overlayFrameFocus = {
+  outlineWidth: 0,
+  focusStyle: { outlineWidth: 0 },
+  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 —
+ * too big for dialog chrome, and it would put the ring on that well instead
+ * of the glyph the user reads as the control.
+ */
+function PopupCloseButton({ onPress }: { onPress: () => void }) {
+  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { px, hitSlop, ...box } = knobProps.nestedControl;
+  const glyph = Math.max(12, Math.round(px * 0.5));
+  const onKeyDown = (e: { key?: string; preventDefault?: () => void }) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      onPress();
+    }
+  };
+  return (
+    <View
+      {...box}
+      position="absolute"
+      top={0}
+      right={0}
+      zIndex={1}
+      role="button"
+      aria-label="Close"
+      data-testid="adaptive-popup-close"
+      data-nested-px={px}
+      cursor="pointer"
+      alignItems="center"
+      justifyContent="center"
+      borderRadius={knobProps.pointy ? 0 : 9999}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing()}
+      onPress={onPress}
+      {...(!isWeb ? { hitSlop } : {})}
+      {...(isWeb
+        ? { tabIndex: 0, onKeyDown: onKeyDown as unknown as () => void }
+        : { accessible: true, accessibilityRole: "button", accessibilityLabel: "Close" })}
+    >
+      <X size={glyph} color={formCommonColors.muted} />
+    </View>
+  );
+}
+
 export function AdaptivePopup({
   open,
   onOpenChange,
@@ -67,6 +139,7 @@ export function AdaptivePopup({
   disabled,
 }: AdaptivePopupProps) {
   const { knobProps } = useResolvedKnobs();
+  const { knobProps: nestedKnobs } = useResolvedKnobs({ compact: true });
   const media = useMedia();
   const viewportGtSm = useViewportGtSm();
   const isDesktop = typeof window !== "undefined" ? viewportGtSm : media.gtSm === true;
@@ -82,52 +155,96 @@ export function AdaptivePopup({
 
   const maxWidth = sizeToWidth[size];
   const maxHeight = sizeToHeight[size];
+  const closePx = nestedKnobs.nestedControl.px;
 
-  const headerContent = (title || showCloseButton) && (
-    <XStack justifyContent="space-between" alignItems="center">
-      {title && (
-        <YStack flex={1}>
-          <Dialog.Title {...knobProps.heading} fontSize="$6">
-            {title}
-          </Dialog.Title>
-        </YStack>
-      )}
-      {showCloseButton && (
-        <Dialog.Close asChild>
-          <Button size="$3" circular chromeless>
-            <X size={20} />
-          </Button>
-        </Dialog.Close>
-      )}
-    </XStack>
-  );
+  const openFromTrigger = useCallback(() => {
+    if (!disabled) onOpenChange(true);
+  }, [disabled, onOpenChange]);
+  // `trigger` is a SLOT: the wrapper below is what opens the popup, so the
+  // press has to travel from whatever the consumer put in the slot out to that
+  // wrapper. Tamagui's press wrapper calls `e.stopPropagation()` on any
+  // component carrying its own `onPress`/`onClick` (`@tamagui/web`
+  // `createComponent`, the `onPress` branch), so a PRESSABLE trigger — a
+  // Button, which is what every doc example and every story passes — swallowed
+  // the click and neither branch ever opened. The capture phase runs before
+  // any descendant handler and cannot be swallowed, and it also catches the
+  // click Button synthesizes for Enter/Space. Opening is idempotent
+  // (`onOpenChange(true)`, never a toggle), so it composes safely with the
+  // bubble-phase path a non-pressable trigger still takes.
+  const triggerActivation = isWeb
+    ? ({ onClickCapture: openFromTrigger } as Record<string, unknown>)
+    : undefined;
 
-  const descriptionContent = description && (
-    <Dialog.Description {...knobProps.body} color="$color11" fontSize={knobProps.sizeToken}>
-      {description}
-    </Dialog.Description>
+  // LC-49 / LC-71: the wrapper is a press-relay, not a control. The painted
+  // trigger (usually a Button) is the perceived boundary and the only tab stop.
+  // Web: capture-phase click is enough — putting `onPress` on this View makes
+  // Tamagui promote it to role=button and steal the ring. Native: the wrapper
+  // owns the gesture (no capture phase).
+  const triggerWrap = {
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    "data-testid": "adaptive-popup-trigger",
+    ...(isWeb
+      ? { tabIndex: -1, role: "presentation" as const, ...triggerActivation }
+      : { onPress: openFromTrigger }),
+  };
+
+  const headerContent = (title || showCloseButton) && (
+    <Unspaced>
+      <XStack
+        justifyContent="space-between"
+        alignItems="center"
+        paddingRight={showCloseButton ? closePx : undefined}
+        minHeight={showCloseButton ? closePx : undefined}
+      >
+        {title ? (
+          <YStack flex={1}>
+            <Dialog.Title {...knobProps.heading}>{title}</Dialog.Title>
+          </YStack>
+        ) : null}
+      </XStack>
+    </Unspaced>
   );
 
   const footerContent = footer && <YStack paddingTop="$2">{footer}</YStack>;
 
-  // Mobile: use Sheet
+  const body = (
+    <YStack flex={size === "fullscreen" ? 1 : undefined} position="relative" {...knobProps.gap}>
+      {!title ? (
+        <VisuallyHidden>
+          <Dialog.Title>Dialog</Dialog.Title>
+        </VisuallyHidden>
+      ) : null}
+      {headerContent}
+      {description ? (
+        <Dialog.Description {...knobProps.body} {...knobProps.label} color={formCommonColors.muted}>
+          {description}
+        </Dialog.Description>
+      ) : (
+        <VisuallyHidden>
+          <Dialog.Description> </Dialog.Description>
+        </VisuallyHidden>
+      )}
+      <YStack flex={size === "fullscreen" ? 1 : undefined}>{children}</YStack>
+      {footerContent}
+      {showCloseButton ? <PopupCloseButton onPress={() => onOpenChange(false)} /> : null}
+    </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) {
     return (
       <>
-        {trigger && (
-          <View
-            onPress={() => !disabled && onOpenChange(true)}
-            cursor={disabled ? "not-allowed" : "pointer"}
-            opacity={disabled ? 0.5 : 1}
-          >
-            {trigger}
-          </View>
-        )}
+        {trigger && <View {...triggerWrap}>{trigger}</View>}
         <Sheet
           modal
           open={open}
           onOpenChange={onOpenChange}
           dismissOnSnapToBottom
+          dismissOnOverlayPress
+          moveOnKeyboardChange
           snapPointsMode={size === "fullscreen" ? "percent" : "fit"}
           snapPoints={size === "fullscreen" ? [92] : undefined}
           zIndex={zIndex.sheet}
@@ -139,33 +256,41 @@ export function AdaptivePopup({
             enterStyle={{ opacity: 0 }}
             exitStyle={{ opacity: 0 }}
           />
-          <Sheet.Handle />
+          <Sheet.Handle {...({ "aria-hidden": true } as Record<string, unknown>)} />
           <Sheet.Frame
             // Sheet.Frame forwards its ref at runtime; the styled prop type
             // just omits `ref`, hence the cast. tabIndex -1 makes the frame a
             // programmatic focus target without joining the tab order.
-            {...({ ref: sheetFrameRef, tabIndex: -1 } as Record<string, unknown>)}
+            {...({
+              ref: sheetFrameRef,
+              tabIndex: -1,
+            } as Record<string, unknown>)}
+            unstyled
+            position="relative"
+            role="dialog"
+            aria-modal={true}
+            aria-label={typeof title === "string" ? title : "Dialog"}
+            data-testid="adaptive-popup-surface"
+            data-adaptive-popup-mode="sheet"
+            {...knobProps.elevatedSurface}
+            borderBottomLeftRadius={0}
+            borderBottomRightRadius={0}
+            {...overlayFrameFocus}
             {...knobProps.panelPadding}
-            {...knobProps.gap}
+            transition={knobProps.transition}
           >
-            {headerContent}
-            {descriptionContent}
-            <YStack flex={size === "fullscreen" ? 1 : undefined}>{children}</YStack>
-            {footerContent}
+            {body}
           </Sheet.Frame>
         </Sheet>
       </>
     );
   }
 
-  // Desktop: use Dialog
   return (
     <Dialog modal open={open} onOpenChange={onOpenChange}>
       {trigger && (
         <Dialog.Trigger asChild disabled={disabled}>
-          <View cursor={disabled ? "not-allowed" : "pointer"} opacity={disabled ? 0.5 : 1}>
-            {trigger}
-          </View>
+          <View {...triggerWrap}>{trigger}</View>
         </Dialog.Trigger>
       )}
 
@@ -186,20 +311,30 @@ export function AdaptivePopup({
           unstyled
           position="relative"
           pointerEvents="auto"
+          tabIndex={-1}
+          data-testid="adaptive-popup-surface"
+          data-adaptive-popup-mode="dialog"
           {...knobProps.elevatedSurface}
+          {...overlayFrameFocus}
           transition={knobProps.transition}
+          animateOnly={["transform", "opacity"]}
           enterStyle={{ opacity: 0, scale: 0.96, y: -10 }}
           exitStyle={{ opacity: 0, scale: 0.96, y: -10 }}
           maxWidth={maxWidth}
           maxHeight={maxHeight}
           width="90vw"
           {...knobProps.panelPadding}
-          {...knobProps.gap}
+          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 });
+          }}
         >
-          {headerContent && <Unspaced>{headerContent}</Unspaced>}
-          {descriptionContent}
-          <YStack flex={size === "fullscreen" ? 1 : undefined}>{children}</YStack>
-          {footerContent}
+          {body}
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog>

package/src/Button/Button.lc18.spec.tsx

@@ -0,0 +1,134 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+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";
+
+/**
+ * LC-18 KNOB-TOTALITY (Button arm): the borderRadius knob fragment must reach
+ * the rendered frame — one radius flip restyles every default/outlined Button
+ * — while `circular` stays an explicit consumer SHAPE eject that keeps its
+ * circle even at `borderRadius: none` (owner ruling 2026-08-13, supersedes
+ * the D-09-era inline squaring), and consumer `{...props}` stay the last
+ * word (STD-EJECT-LAST).
+ *
+ * jsdom's getComputedStyle cannot cascade Tamagui's class-based CSS, so the
+ * assertions read the atomic border-radius/box-shadow/height classes the
+ * knob emits (same technique as the Timeline SB-M-301 spec). `_btlr-*` is
+ * the top-left radius atom: `t-radius-0` is the `none` token, `t-radius-12`
+ * is `full`, and the tamagui `circular` variant renders a literal
+ * `_btlr-100000px`.
+ */
+
+afterEach(cleanup);
+
+function frameRadiusClasses(): string[] {
+  const frame = screen.getByRole("button");
+  return String(frame.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_btlr-"));
+}
+
+describe("Button LC-18 KNOB-TOTALITY — borderRadius knob", () => {
+  it("default variant squares at borderRadius none and follows the scale", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(frameRadiusClasses()).toEqual(["_btlr-t-radius-0"]);
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(frameRadiusClasses()).toEqual(["_btlr-t-radius-12"]);
+  });
+
+  it("outlined variant squares at borderRadius none", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Button outlined>Save</Button>
+      </Preset>,
+    );
+    expect(frameRadiusClasses()).toEqual(["_btlr-t-radius-0"]);
+  });
+
+  it("circular ignores the radius knob and keeps its circle at none", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Button circular icon={<span>x</span>} aria-label="favorite" />
+      </Preset>,
+    );
+    const frame = screen.getByRole("button");
+    expect(frameRadiusClasses()).toEqual(["_btlr-100000px"]);
+    // The old implementation squared circles with an inline style eject —
+    // the shape eject must not be re-overridden by the knob channel.
+    expect((frame as HTMLElement).style.borderRadius).toBe("");
+    // LC-60: the circle is licensed by the spec registry, not inferred.
+    expect(frame.getAttribute("data-radius-class")).toBe("R-IDENTITY");
+    expect(frame.getAttribute("data-radius-part")).toBe("circular Button");
+  });
+
+  it("default frames do not declare identity (they square at none)", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    const frame = screen.getByRole("button");
+    expect(frame.getAttribute("data-radius-class")).toBeNull();
+    expect(frame.getAttribute("data-radius-part")).toBeNull();
+  });
+
+  it("consumer borderRadius prop wins last over the knob fragment", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Button borderRadius="$6">Save</Button>
+      </Preset>,
+    );
+    expect(frameRadiusClasses()).toEqual(["_btlr-t-radius-6"]);
+  });
+});
+
+describe("Button LC-18 KNOB-TOTALITY — size and elevation fragments", () => {
+  it("size knob drives the recipe height (not the Tamagui token box)", () => {
+    renderWithProviders(
+      <Preset overrides={{ size: "small" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("28");
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ size: "large" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("40");
+  });
+
+  it("elevation knob reaches the frame (was dropped: styled(View) had no elevation variant)", () => {
+    renderWithProviders(
+      <Preset overrides={{ elevation: "none" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(screen.getByRole("button").className).not.toMatch(/_bxsh-/);
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ elevation: "large" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(screen.getByRole("button").className).toMatch(/_bxsh-/);
+  });
+});