@multiplatform.one/components 7.4.1 → 7.6.0

package/src/Alert/Alert.spec.tsx

@@ -1,9 +1,23 @@
-import { __resetDevWarnSeen } from "@multiplatform.one/theme";
+import { __resetDevWarnSeen, Preset } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { fireEvent } from "@testing-library/react";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import type { ReactElement } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Alert } from "./index";
 
+function atoms(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+function renderFrame(node: ReactElement) {
+  const result = renderWithProviders(node);
+  const frame = result.container.querySelector('[role="status"], [role="alert"]') as HTMLElement;
+  return { ...result, frame };
+}
+
 describe("Alert", () => {
   it("renders title and description with role=status for info", () => {
     const { container } = renderWithProviders(
@@ -217,3 +231,120 @@ describe("Alert banned-error-word DEV warn", () => {
     expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("banned-error-word"));
   });
 });
+
+describe("Alert host data attributes reach the DOM", () => {
+  afterEach(cleanup);
+
+  it("puts data-accent-stripe, data-density and data-layout on the live region", () => {
+    const stacked = renderFrame(
+      <Alert intent="error" title="Connection lost" actionLabel="Retry">
+        Changes are no longer syncing.
+      </Alert>,
+    );
+    expect(stacked.frame.getAttribute("data-accent-stripe")).toBe("3");
+    expect(stacked.frame.getAttribute("data-density")).toBe("comfortable");
+    expect(stacked.frame.getAttribute("data-layout")).toBe("stacked");
+    cleanup();
+
+    const inline = renderFrame(
+      <Alert intent="error" title="Connection lost" actionLabel="Retry" />,
+    );
+    expect(inline.frame.getAttribute("data-accent-stripe")).toBe("3");
+    expect(inline.frame.getAttribute("data-layout")).toBe("inline");
+  });
+});
+
+describe("Alert action labels — weight 400 on the TEXT NODE (R7 / §6.1)", () => {
+  afterEach(cleanup);
+
+  it("measures Retry on the text node, never the press-floor", () => {
+    renderWithProviders(<Alert intent="error" title="Connection lost" actionLabel="Retry" />);
+    const floor = document.querySelector('[aria-label="Retry"]') as HTMLElement;
+    const textNode = screen.getByText("Retry");
+    expect(textNode).not.toBe(floor);
+    const weight = atoms(textNode, ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+    expect(atoms(floor, ["_fow-"])).toHaveLength(0);
+  });
+
+  it("keeps Open runbook and Mute 24h at weight 400 on their text nodes", () => {
+    renderWithProviders(
+      <Alert
+        intent="warning"
+        title="Runbook"
+        actionLabel="Open runbook"
+        secondaryActionLabel="Mute 24h"
+      />,
+    );
+    for (const label of ["Open runbook", "Mute 24h"]) {
+      const floor = document.querySelector(`[aria-label="${label}"]`) as HTMLElement;
+      const textNode = screen.getByText(label);
+      expect(textNode).not.toBe(floor);
+      const weight = atoms(textNode, ["_fow-"]);
+      expect(weight.length).toBeGreaterThan(0);
+      expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+    }
+  });
+});
+
+describe("Alert density — padX and gap move, height holds (LC-76)", () => {
+  afterEach(cleanup);
+
+  const padX = ["_px-", "_pl-", "_pr-"];
+  const padY = ["_py-", "_pt-", "_pb-"];
+  const gap = ["_gap-"];
+  const height = ["_h-", "_mih-", "_mah-"];
+
+  it("density knob restyles padX and gap without changing height", () => {
+    const comfortable = renderFrame(
+      <Preset overrides={{ density: "comfortable" }}>
+        <Alert intent="info" title="Read-only" />
+      </Preset>,
+    );
+    const comfortableMeasure = {
+      density: comfortable.frame.getAttribute("data-density"),
+      nested: comfortable.frame.getAttribute("data-nested-px"),
+      padX: atoms(comfortable.frame, padX),
+      padY: atoms(comfortable.frame, padY),
+      gap: atoms(comfortable.frame, gap),
+      height: atoms(comfortable.frame, height),
+    };
+    cleanup();
+
+    const compact = renderFrame(
+      <Preset overrides={{ density: "compact" }}>
+        <Alert intent="info" title="Read-only" />
+      </Preset>,
+    );
+    expect(comfortableMeasure.density).toBe("comfortable");
+    expect(compact.frame.getAttribute("data-density")).toBe("compact");
+    expect(comfortableMeasure.padX.length).toBeGreaterThan(0);
+    expect(atoms(compact.frame, padX)).not.toEqual(comfortableMeasure.padX);
+    expect(comfortableMeasure.gap.length).toBeGreaterThan(0);
+    expect(atoms(compact.frame, gap)).not.toEqual(comfortableMeasure.gap);
+    expect(atoms(compact.frame, padY)).toEqual(comfortableMeasure.padY);
+    expect(atoms(compact.frame, height)).toEqual(comfortableMeasure.height);
+    expect(compact.frame.getAttribute("data-nested-px")).toBe(comfortableMeasure.nested);
+  });
+
+  it("compact prop tightens padX and gap while height holds", () => {
+    const comfortable = renderFrame(<Alert intent="info" title="Read-only" />);
+    const comfortableMeasure = {
+      padX: atoms(comfortable.frame, padX),
+      padY: atoms(comfortable.frame, padY),
+      gap: atoms(comfortable.frame, gap),
+      height: atoms(comfortable.frame, height),
+      nested: comfortable.frame.getAttribute("data-nested-px"),
+    };
+    cleanup();
+
+    const compact = renderFrame(<Alert compact intent="info" title="Read-only" />);
+    expect(compact.frame.getAttribute("data-density")).toBe("compact");
+    expect(atoms(compact.frame, padX)).not.toEqual(comfortableMeasure.padX);
+    expect(atoms(compact.frame, gap)).not.toEqual(comfortableMeasure.gap);
+    expect(atoms(compact.frame, padY)).toEqual(comfortableMeasure.padY);
+    expect(atoms(compact.frame, height)).toEqual(comfortableMeasure.height);
+    expect(compact.frame.getAttribute("data-nested-px")).toBe(comfortableMeasure.nested);
+  });
+});

package/src/Alert/index.tsx

@@ -184,6 +184,20 @@ const activateOnEnterSpace = (onPress?: () => void) =>
     },
   }) as Record<string, unknown>;
 
+/**
+ * Tamagui styled hosts drop JSX `data-*` (Toast's empty gallery). RN-web
+ * reads `dataSet`; jsdom still accepts the kebab attributes. Write both so
+ * data-accent-stripe / data-density / data-layout reach the live-region node.
+ */
+function hostData(attrs: Record<string, string>): Record<string, unknown> {
+  const dataSet: Record<string, string> = {};
+  for (const [key, value] of Object.entries(attrs)) {
+    const camel = key.replace(/^data-/, "").replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+    dataSet[camel] = value;
+  }
+  return { ...attrs, dataSet };
+}
+
 function AlertAction({
   label,
   onPress,
@@ -203,7 +217,7 @@ function AlertAction({
   body: KnobProps["body"];
   labelType: KnobProps["label"];
   pointy: boolean;
-  radiusOuter: KnobProps["borderRadiusOuter"];
+  radiusOuter: KnobProps["borderRadiusNested"];
 }) {
   const outset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - nestedPx) / 2));
   const hOutset = besideAdjacent ? Math.min(outset, DISMISS_ADJACENT_OUTSET) : outset;
@@ -224,7 +238,7 @@ function AlertAction({
         {...radiusOuter}
         borderRadius={pointy ? 0 : radiusOuter.borderRadius}
       >
-        <SizableText {...body} {...labelType} fontWeight="600" color="$color12" userSelect="none">
+        <SizableText {...body} {...labelType} fontWeight="400" color="$color12" userSelect="none">
           {label}
         </SizableText>
       </AlertActionPill>
@@ -249,12 +263,21 @@ function AlertInner({
   onDismiss,
   visible,
   defaultVisible = true,
-  compact = false,
+  compact,
   ...props
 }: AlertProps) {
   const { t } = useTranslation();
   const titleId = useId();
+  // Do not default `compact` to false — that forced comfortable and made
+  // the gallery density strip inert (h62 / pad 18 / gap 18 at both stops).
+  // Omitted compact lets the density knob / Surface restyle the banner
+  // (LC-18 / DG-DEN-01). A second resolve with compact:false holds padY so
+  // height stays put while padX and gap step (LC-76).
   const { knobProps } = useResolvedKnobs({ component: "Alert", compact });
+  const { knobProps: comfortableKnobs } = useResolvedKnobs({
+    component: "Alert",
+    compact: false,
+  });
   if (typeof document !== "undefined") ensureCompositeFocusRing();
   const theme = useTheme();
   // Step 11: lowest AA-safe step of the hue on the step-3 tint (resolves to a
@@ -320,7 +343,7 @@ function AlertInner({
     body: knobProps.body,
     labelType: knobProps.label,
     pointy: knobProps.pointy,
-    radiusOuter: knobProps.borderRadiusOuter,
+    radiusOuter: knobProps.borderRadiusNested,
     besideAdjacent: actionBesideAdjacent,
   };
 
@@ -367,18 +390,21 @@ function AlertInner({
       // Polaris form-summary: parent may focus the banner on submit without
       // adding a tab stop (LC-71: the frame is not a control).
       tabIndex={-1}
-      data-density={knobProps.density}
-      data-layout={stackedActions ? "stacked" : "inline"}
-      data-nested-px={nestedPx}
-      data-accent-stripe="3"
       {...knobProps.borderRadius}
-      {...knobProps.panelPadding}
       {...knobProps.gap}
+      paddingHorizontal={knobProps.panelPadding.padding}
+      paddingVertical={comfortableKnobs.panelPadding.padding}
       borderColor="$color6"
       borderWidth={hairline}
       {...stripe}
       transition={knobProps.transition}
       {...props}
+      {...hostData({
+        "data-density": knobProps.density,
+        "data-layout": stackedActions ? "stacked" : "inline",
+        "data-nested-px": String(nestedPx),
+        "data-accent-stripe": "3",
+      })}
     >
       {iconNode ? (
         <View flexShrink={0} aria-hidden marginTop={1}>

package/src/AlertDialogContent.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { AlertDialog, XStack, YStack } from "tamagui";
+import { AlertDialogContent, AlertDialogOverlay } from "./surfaces";
+
+function AlertDialogHarness({ startOpen = true }: { startOpen?: boolean }) {
+  const [open, setOpen] = useState(startOpen);
+  return (
+    <YStack minHeight={400} alignItems="flex-start">
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialog.Trigger asChild>
+          <Button>Open confirm</Button>
+        </AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialogOverlay key="overlay" />
+          <AlertDialogContent key="content" maxWidth={420} role="alertdialog">
+            <AlertDialog.Title>Delete customer?</AlertDialog.Title>
+            <AlertDialog.Description>
+              This removes the customer record. This cannot be undone.
+            </AlertDialog.Description>
+            <XStack justifyContent="flex-end" gap="$2">
+              <AlertDialog.Cancel asChild>
+                <Button chromeless>Cancel</Button>
+              </AlertDialog.Cancel>
+              <AlertDialog.Action asChild>
+                <Button error>Delete</Button>
+              </AlertDialog.Action>
+            </XStack>
+          </AlertDialogContent>
+        </AlertDialog.Portal>
+      </AlertDialog>
+    </YStack>
+  );
+}
+
+const meta: Meta<typeof AlertDialogContent> = {
+  title: "Components/AlertDialogContent",
+  component: AlertDialogContent,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "House AlertDialog content surface (MPO-21 G6). `unstyled` drops Tamagui's " +
+          "baked-in `elevate: true` chrome so `elevatedSurface` (overlay elevation " +
+          "token, MPO-49) is the only surface source. Pairs with AlertDialogOverlay. " +
+          "Destructive confirms use this surface (DG-OVL-02).",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof AlertDialogContent>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => <AlertDialogHarness />,
+};
+
+export const Closed: Story = {
+  render: () => <AlertDialogHarness startOpen={false} />,
+};

package/src/Avatar/Avatar.spec.tsx

@@ -1,8 +1,11 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { fireEvent } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { Avatar, fallbackTone, fallbackToneIndex, getInitials } from "./index";
 
+afterEach(cleanup);
+
 describe("getInitials", () => {
   it("takes first letters of two words", () => {
     expect(getInitials("Ada Lovelace")).toBe("AL");
@@ -145,3 +148,67 @@ describe("Avatar identity-shape declaration (LC-60)", () => {
     expect(declaration(container)).toBeNull();
   });
 });
+
+// happy-dom cannot cascade Tamagui's class CSS, so the resolved radius is
+// read off the atomic `_btlr-*` class the face emits — same technique as
+// Button.spec.tsx. CIRCULAR-AT-FULL writes a px number, not a `$12` token.
+function squareFaceRadiusPx(container: HTMLElement): number | undefined {
+  const el = container.querySelector("[data-avatar-px]");
+  const token = String(el?.className || "")
+    .split(" ")
+    .find((c) => c.startsWith("_btlr-"));
+  if (!token) return undefined;
+  const px = token.match(/^_btlr-(\d+(?:\.\d+)?)px$/);
+  if (px) return Number(px[1]);
+  const bare = token.match(/^_btlr-(\d+(?:\.\d+)?)$/);
+  return bare ? Number(bare[1]) : undefined;
+}
+
+describe("Avatar square face radius (DG-RAD-02 CIRCULAR-AT-FULL)", () => {
+  const STOPS = {
+    none: 0,
+    small: 5,
+    medium: 9,
+    large: 16,
+  } as const;
+  const FACE = 44;
+
+  it("resolves full to height/2, not the raw $12 token (50)", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Avatar name="Bitspur Labs" circular={false} size={FACE} />
+      </Preset>,
+    );
+    const face = container.querySelector("[data-avatar-px]") as HTMLElement;
+    expect(face.getAttribute("data-avatar-px")).toBe(String(FACE));
+    const radius = squareFaceRadiusPx(container);
+    expect(radius).toBe(FACE / 2);
+    expect(radius).not.toBe(50);
+    expect(String(face.className)).not.toMatch(/_btlr-t-radius-12/);
+    expect(container.querySelector("[data-radius-class]")).toBeNull();
+  });
+
+  it("rides the token scale below full and squares at none", () => {
+    for (const [stop, px] of Object.entries(STOPS)) {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ borderRadius: stop as keyof typeof STOPS }}>
+          <Avatar name="Bitspur Labs" circular={false} size={FACE} />
+        </Preset>,
+      );
+      expect(squareFaceRadiusPx(container)).toBe(px);
+      cleanup();
+    }
+  });
+
+  it("leaves the circular face on R-IDENTITY — outside the knob", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Avatar name="Ada Lovelace" size={FACE} />
+      </Preset>,
+    );
+    const face = container.querySelector("[data-avatar-px]") as HTMLElement;
+    expect(face.getAttribute("data-radius-class")).toBe("R-IDENTITY");
+    expect(squareFaceRadiusPx(container)).not.toBe(FACE / 2);
+    expect(String(face.className)).toMatch(/_btlr-100000px/);
+  });
+});

package/src/Avatar/index.tsx

@@ -2,15 +2,17 @@ import { Children, createContext, isValidElement, useContext, type ReactNode } f
 import { UserIcon } from "@phosphor-icons/react";
 import {
   MIN_PRESS_TARGET,
+  borderRadiusMap,
   ensureFocusVisibleRing,
   getGroupPosition,
   pressTargetHitSlop,
   radiusClassProps,
+  resolveRadiusClass,
   stackRadiusProps,
   useReadableTextOn,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import type { ControlStateProps } from "@multiplatform.one/theme";
+import type { BorderRadius, ControlStateProps } from "@multiplatform.one/theme";
 import type { GetProps, SizeTokens } from "tamagui";
 import {
   Avatar as TamaguiAvatar,
@@ -127,6 +129,26 @@ function sizeToPx(size: AvatarSize): number | undefined {
   return avatarTokenPx(String(size));
 }
 
+/**
+ * Invert the canonical stop→token map so the square face can ask the
+ * resolver for a stop, not a raw `$12`. Silent fallback would widen the
+ * table; an unknown token is a wiring bug.
+ */
+function radiusStopFromToken(token: string | number | undefined): BorderRadius {
+  if (token === 0 || token === "0") return "none";
+  for (const stop of Object.keys(borderRadiusMap) as BorderRadius[]) {
+    if (borderRadiusMap[stop] === token) return stop;
+  }
+  throw new Error(
+    `Avatar square face: "${String(token)}" is not a borderRadiusMap token; CIRCULAR-AT-FULL needs a known stop`,
+  );
+}
+
+/** DG-RAD-02: square face rides CIRCULAR-AT-FULL — full is h/2, not the $12 token. */
+function squareFaceRadiusPx(token: string | number | undefined, heightPx: number): number {
+  return resolveRadiusClass("CIRCULAR-AT-FULL", radiusStopFromToken(token), { heightPx });
+}
+
 function resolveVisualPx(
   sizeProp: AvatarSize | undefined,
   nested: boolean,
@@ -207,10 +229,13 @@ function AvatarRoot({
     fallbackColor ??
     (onAccent ? (onAccentInitials ?? "$color") : (tone?.fg ?? componentColors.text.primary));
   const identityProps = circular ? identityShapeProps : null;
+  const squareRadiusPx = circular
+    ? undefined
+    : squareFaceRadiusPx(knobProps.borderRadius.borderRadius, visualPx);
   const position = group ? getGroupPosition(group.index, group.count) : undefined;
   const squareFlush = Boolean(group && !group.overlap && !circular && position);
   const stackCorners = squareFlush
-    ? stackRadiusProps(position!, knobProps.borderRadius.borderRadius, "horizontal")
+    ? stackRadiusProps(position!, squareRadiusPx, "horizontal")
     : undefined;
   const cutout = Boolean(group?.overlap);
   const labeled = Boolean(alt || name);
@@ -234,7 +259,9 @@ function AvatarRoot({
       flexShrink={0}
       outlineWidth={0}
       onPress={onPress}
-      {...(!circular && !stackCorners ? knobProps.borderRadius : undefined)}
+      {...(!circular && !stackCorners
+        ? { ...knobProps.borderRadius, borderRadius: squareRadiusPx }
+        : undefined)}
       {...stackCorners}
       {...(cutout
         ? { borderWidth: CUTOUT_BORDER, borderColor: "$background" }

package/src/Badge/Badge.spec.tsx

@@ -1,7 +1,24 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 import { Text } from "tamagui";
 import { Badge } from "./index";
+import * as BadgeModule from "./index";
+
+function atoms(el: Element | null, prefixes: string[]): string[] {
+  if (!el) return [];
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+function countText(container: HTMLElement): HTMLElement {
+  const pill = container.querySelector('[data-badge="count"]');
+  const node = pill?.querySelector("span, div") ?? pill?.firstElementChild;
+  return (node ?? pill) as HTMLElement;
+}
 
 describe("Badge", () => {
   it("hides when count is 0 and shows with showZero", () => {
@@ -80,4 +97,116 @@ describe("Badge", () => {
     expect(el?.getAttribute("data-radius-class")).toBe("R-PILL");
     expect(el?.getAttribute("data-radius-part")).toBe("Badge count/dot");
   });
+
+  it("hides the indicator when visible is false", () => {
+    const { container } = renderWithProviders(
+      <Badge count={5} visible={false}>
+        <Text>Bell</Text>
+      </Badge>,
+    );
+    expect(container.querySelector("[data-badge]")).toBeNull();
+    expect(container.textContent).toContain("Bell");
+  });
+
+  it("renders 0+ when max is 0 and count is positive", () => {
+    const { container } = renderWithProviders(<Badge count={1} max={0} />);
+    const pill = container.querySelector('[data-badge="count"]');
+    expect(pill?.getAttribute("data-overflow")).toBe("true");
+    expect(pill?.textContent).toContain("0+");
+    expect(pill?.getAttribute("aria-label")).toBe("1");
+  });
+});
+
+describe("Badge named exports", () => {
+  it("exports Badge as a named export and has no default", () => {
+    expect(typeof BadgeModule.Badge).toBe("function");
+    expect("default" in BadgeModule).toBe(false);
+  });
+});
+
+describe("Badge design-law — T-BODY count text (SB-M-101)", () => {
+  afterEach(cleanup);
+
+  it("keeps count text on the 400/700 weight ladder, never 600", () => {
+    const { container } = renderWithProviders(<Badge count={5} />);
+    const weight = atoms(countText(container), ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+  });
+
+  it("lets the fontWeight knob restyle the count text node", () => {
+    const regular = renderWithProviders(
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <Badge count={5} />
+      </Preset>,
+    );
+    const regularWeight = atoms(countText(regular.container), ["_fow-"]).join(" ");
+    cleanup();
+
+    const bold = renderWithProviders(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Badge count={5} />
+      </Preset>,
+    );
+    const boldWeight = atoms(countText(bold.container), ["_fow-"]).join(" ");
+    expect(regularWeight).not.toMatch(/600|weight-6|fow-6/);
+    expect(boldWeight).not.toMatch(/600|weight-6|fow-6/);
+    expect(boldWeight).not.toEqual(regularWeight);
+    expect(boldWeight).toMatch(/700|weight-7|fow-7/);
+  });
+
+  it("lets the bodyFont knob restyle the count text node", () => {
+    const sans = renderWithProviders(
+      <Preset overrides={{ bodyFont: "sans-serif" }}>
+        <Badge count={5} />
+      </Preset>,
+    );
+    const sansFamily = atoms(countText(sans.container), ["_ff-"]);
+    cleanup();
+
+    const mono = renderWithProviders(
+      <Preset overrides={{ bodyFont: "mono" }}>
+        <Badge count={5} />
+      </Preset>,
+    );
+    expect(sansFamily.length).toBeGreaterThan(0);
+    expect(countText(sans.container).getAttribute("data-body-font")).not.toBe(
+      countText(mono.container).getAttribute("data-body-font"),
+    );
+    expect(countText(mono.container).getAttribute("data-body-font")).toBe("$mono");
+  });
+});
+
+describe("Badge design-law — size geometry and R-PILL", () => {
+  afterEach(cleanup);
+
+  it("scales capsule height with the size knob", () => {
+    const small = renderWithProviders(
+      <Preset overrides={{ size: "small" }}>
+        <Badge count={5} />
+      </Preset>,
+    );
+    const smallHeight = atoms(small.container.querySelector("[data-badge]"), ["_h-"]);
+    cleanup();
+
+    const large = renderWithProviders(
+      <Preset overrides={{ size: "large" }}>
+        <Badge count={5} />
+      </Preset>,
+    );
+    expect(smallHeight.length).toBeGreaterThan(0);
+    expect(atoms(large.container.querySelector("[data-badge]"), ["_h-"])).not.toEqual(smallHeight);
+  });
+
+  it("stays a pill at borderRadius none (R-PILL, Axiom 3 does not square it)", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Badge count={1} />
+      </Preset>,
+    );
+    const pill = container.querySelector("[data-badge]") as HTMLElement;
+    expect(pill.getAttribute("data-radius-class")).toBe("R-PILL");
+    const radius = atoms(pill, ["_br-", "_btlr-"]);
+    expect(radius.join(" ")).not.toMatch(/radius-0\b|_br-0(?:px)?\b|_btlr-t-radius-0/);
+  });
 });

package/src/Badge/Badge.stories.tsx

@@ -1,8 +1,9 @@
+import type { ReactNode } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { BellIcon, EnvelopeIcon, ShoppingCartIcon, UserIcon } from "@phosphor-icons/react";
 // Catalog Button (LC-56 story honesty): stories compose catalog controls, never raw tamagui ones.
 import { Button } from "@multiplatform.one/forms";
-import { XStack, YStack, Text, View } from "tamagui";
+import { XStack, YStack, Text } from "tamagui";
 import { Badge, type BadgeColor, type BadgePosition } from "./index";
 
 const meta: Meta<typeof Badge> = {
@@ -35,17 +36,10 @@ export default meta;
 
 type Story = StoryObj<typeof Badge>;
 
-const IconButton = ({ children }: { children: React.ReactNode }) => (
-  <View
-    width={44}
-    height={44}
-    alignItems="center"
-    justifyContent="center"
-    backgroundColor="$color3"
-    borderRadius="$3"
-  >
+const IconButton = ({ children }: { children: ReactNode }) => (
+  <Button circular aria-label="Notifications">
     {children}
-  </View>
+  </Button>
 );
 
 export const Default: Story = {
@@ -167,7 +161,7 @@ export const Colors: Story = {
     return (
       <YStack gap="$4">
         <YStack gap="$2">
-          <Text fontWeight="600">Count badges</Text>
+          <Text fontWeight="700">Count badges</Text>
           <XStack gap="$4">
             {colors.map((color) => (
               <Badge key={color} count={5} color={color}>
@@ -179,7 +173,7 @@ export const Colors: Story = {
           </XStack>
         </YStack>
         <YStack gap="$2">
-          <Text fontWeight="600">Dot badges</Text>
+          <Text fontWeight="700">Dot badges</Text>
           <XStack gap="$4">
             {colors.map((color) => (
               <Badge key={color} dot color={color}>
@@ -325,7 +319,7 @@ export const AllStates: Story = {
   render: () => (
     <YStack gap="$6" padding="$3">
       <YStack gap="$2">
-        <Text fontWeight="600">Counts</Text>
+        <Text fontWeight="700">Counts</Text>
         <XStack gap="$4">
           <Badge count={1}>
             <IconButton>
@@ -351,7 +345,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Dots</Text>
+        <Text fontWeight="700">Dots</Text>
         <XStack gap="$4">
           <Badge dot color="red">
             <IconButton>
@@ -372,7 +366,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Positions</Text>
+        <Text fontWeight="700">Positions</Text>
         <XStack gap="$4">
           <Badge count={1} position="top-right">
             <IconButton>