@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/Button/Button.lc71.spec.tsx

@@ -4,80 +4,67 @@
 
 import { cleanup, fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Surface } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { Button, buttonDensityFamily, buttonSizeRecipes, resolveButtonSizeRecipe } from "./index";
+import { Button, buttonSizeRecipes, resolveButtonSizeRecipe } from "./index";
 
 afterEach(cleanup);
 
 describe("Button size recipes", () => {
-  it("medium is the measured 44 / 18 / 14 / 16 / 9 (tamagui.dev $4 — MPO-13)", () => {
-    // Generated from recipeFamilies.control (LC-80): fontSize is the recipe's
-    // px number (md 14), no longer a drifted font token ("$3" = 13).
+  it("medium is 40 / 16 / 15 / 16 / 8 from the default scale", () => {
     expect(buttonSizeRecipes.$4).toEqual({
-      height: 44,
-      paddingHorizontal: 18,
-      fontSize: 14,
+      height: 40,
+      paddingHorizontal: 16,
+      fontSize: 15,
       iconSize: 16,
-      gap: 9,
+      gap: 8,
     });
-    expect(resolveButtonSizeRecipe("$true").height).toBe(44);
-    expect(resolveButtonSizeRecipe("$3").height).toBe(36);
-    expect(resolveButtonSizeRecipe("$5").height).toBe(52);
+    expect(resolveButtonSizeRecipe("$true").height).toBe(40);
+    expect(resolveButtonSizeRecipe("$3").height).toBe(32);
+    expect(resolveButtonSizeRecipe("$5").height).toBe(48);
   });
 
-  it("medium meets the 44 floor natively — no slop, no minHeight", () => {
+  it("medium paints 40 and restores the press floor with slop", () => {
     renderWithProviders(<Button>Save</Button>);
     const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("44");
-    expect(frame.getAttribute("data-mp-press-slop")).toBeNull();
+    expect(frame.getAttribute("data-mp-button-height")).toBe("40");
+    expect(frame.getAttribute("data-mp-press-slop")).toBe("2");
     expect((frame as HTMLElement).style.minHeight).not.toBe("44px");
   });
 
   it("sub-44 sizes restore the floor with slop, not minHeight", () => {
     renderWithProviders(<Button size="$2">Save</Button>);
     const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("28");
-    expect(frame.getAttribute("data-mp-press-slop")).toBe("8");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("26");
+    expect(frame.getAttribute("data-mp-press-slop")).toBe("9");
     expect((frame as HTMLElement).style.minHeight).not.toBe("44px");
   });
 
-  it("large paints 52 — already past the floor, no slop", () => {
+  it("large paints 48 — already past the floor, no slop", () => {
     renderWithProviders(<Button size="$5">Save</Button>);
     const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("52");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("48");
     expect(frame.getAttribute("data-mp-press-slop")).toBeNull();
   });
 });
 
-describe("Button density ≠ size", () => {
-  it("compact tightens pad without shrinking recipe height", () => {
-    // Density picks the FAMILY; it never subtracts from the recipe (LC-79).
-    expect(buttonDensityFamily("control", true)).toBe("controlCompact");
-    expect(buttonDensityFamily("control", false)).toBe("control");
-    expect(resolveButtonSizeRecipe("$4", "controlCompact").paddingHorizontal).toBeLessThan(
+describe("Button size comes from the token, not a density step", () => {
+  it("the chip family tightens pad without shrinking recipe height", () => {
+    expect(resolveButtonSizeRecipe("$4", "chip").paddingHorizontal).toBeLessThan(
       resolveButtonSizeRecipe("$4", "control").paddingHorizontal,
     );
-    expect(resolveButtonSizeRecipe("$4", "controlCompact").height).toBe(
+    expect(resolveButtonSizeRecipe("$4", "chip").height).toBe(
       resolveButtonSizeRecipe("$4", "control").height,
     );
-    renderWithProviders(
-      <Button compact size="$4">
-        Save
-      </Button>,
-    );
-    const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("44");
-    expect(frame.getAttribute("data-mp-density")).toBe("compact");
   });
 
-  it("size large + compact density stays large chrome", () => {
+  it("a $5 Surface renders large chrome", () => {
     renderWithProviders(
-      <Preset overrides={{ size: "large" }}>
-        <Button compact>Save</Button>
-      </Preset>,
+      <Surface size="$5">
+        <Button>Save</Button>
+      </Surface>,
     );
-    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("52");
+    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("48");
   });
 });
 
@@ -89,13 +76,13 @@ describe("Button nested scale (LC-73)", () => {
       </Button>,
     );
     const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-nested-px")).toBe("32");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("32");
-    expect(frame.getAttribute("data-mp-press-slop")).toBe("6");
+    expect(frame.getAttribute("data-nested-px")).toBe("29");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("29");
+    expect(frame.getAttribute("data-mp-press-slop")).toBe("8");
     expect(frame.getAttribute("style") ?? "").not.toMatch(/width:\s*44px/);
   });
 
-  it("pads a nested circle 0, so its label fits the 32px box (MPO-371)", () => {
+  it("pads a nested circle 0, so its label fits the nested token box (MPO-371)", () => {
     renderWithProviders(
       <>
         <Button nested circular aria-label="day">
@@ -106,10 +93,10 @@ describe("Button nested scale (LC-73)", () => {
     );
     const [circle, pill] = screen.getAllByRole("button");
     const circleAtoms = (circle.getAttribute("class") ?? "").split(/\s+/);
-    expect(circleAtoms).toEqual(expect.arrayContaining(["_w-32px", "_h-32px", "_btlr-100000px"]));
+    expect(circleAtoms).toEqual(expect.arrayContaining(["_w-29px", "_h-29px", "_btlr-100000px"]));
     expect(circleAtoms).toEqual(expect.arrayContaining(["_pl-0px", "_pr-0px"]));
-    expect(circleAtoms).not.toContain("_pl-18px");
-    expect((pill.getAttribute("class") ?? "").split(/\s+/)).toContain("_pl-18px");
+    expect(circleAtoms).not.toContain("_pl-16px");
+    expect((pill.getAttribute("class") ?? "").split(/\s+/)).toContain("_pl-16px");
   });
 });
 

package/src/Button/Button.loading.spec.tsx

@@ -0,0 +1,87 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { cleanup } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Button } from "./index";
+
+/**
+ * WP-c2: a loading Button renders the ONE Skeleton (forms, re-exported by
+ * components) at the button's recipe height, and the bone stops pulsing for a
+ * user who asked for reduced motion.
+ */
+
+let reduced = false;
+let originalMatchMedia: typeof window.matchMedia;
+
+beforeEach(() => {
+  originalMatchMedia = window.matchMedia;
+  window.matchMedia = vi.fn((query: string) => ({
+    matches: query.includes("prefers-reduced-motion") ? reduced : false,
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+  })) as unknown as typeof window.matchMedia;
+});
+
+afterEach(() => {
+  cleanup();
+  window.matchMedia = originalMatchMedia;
+  reduced = false;
+});
+
+function bone(container: HTMLElement): HTMLElement {
+  const el = container.querySelector("[data-button-loading] [data-skeleton]");
+  if (!el) throw new Error("no skeleton bone in the loading button");
+  return el as HTMLElement;
+}
+
+describe("Button loading (WP-c2 one Skeleton)", () => {
+  it("renders the shared rounded Skeleton at the recipe height in the label slot", () => {
+    const { container, getByRole } = renderWithProviders(
+      <Button loading size="$3">
+        Save
+      </Button>,
+    );
+    const el = bone(container);
+    expect(el.getAttribute("data-skeleton-variant")).toBe("rounded");
+    expect(el.getAttribute("data-height")).toBe(String(sizeRecipeForToken("$3").height));
+    expect(el.getAttribute("aria-hidden")).toBe("true");
+    const button = getByRole("button");
+    expect(button.getAttribute("aria-busy")).toBe("true");
+    // The label is swapped out for the bone (busy, not narrated).
+    expect(button.textContent).not.toContain("Save");
+  });
+
+  it("pulses with the animation knob on", () => {
+    const { container } = renderWithProviders(<Button loading>Save</Button>);
+    const el = bone(container);
+    expect(el.getAttribute("data-animate")).toBe("true");
+    expect(el.className).toMatch(/mp-skeleton-pulse/);
+    expect(el.style.animation).toContain("mp-skeleton-pulse");
+  });
+
+  it("respects prefers-reduced-motion: the bone goes static", () => {
+    reduced = true;
+    const { container } = renderWithProviders(<Button loading>Save</Button>);
+    const el = bone(container);
+    expect(el.getAttribute("data-animate")).toBe("false");
+    expect(el.className).toMatch(/mp-skeleton-static/);
+    expect(el.style.animation).toBe("");
+  });
+
+  it("mounts one keyframe sheet that also stops motion under reduced motion", () => {
+    renderWithProviders(
+      <>
+        <Button loading>One</Button>
+        <Button loading>Two</Button>
+      </>,
+    );
+    const sheets = document.querySelectorAll("#__mp-skeleton-pulse");
+    expect(sheets).toHaveLength(1);
+    const css = sheets[0]?.textContent ?? "";
+    expect(css.match(/@keyframes/g)).toHaveLength(1);
+    expect(css).toContain("prefers-reduced-motion:reduce");
+  });
+});

package/src/Button/Button.nativeInk.spec.tsx

@@ -0,0 +1,100 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { memo } from "react";
+import { getVariableValue, TamaguiProvider, useTheme } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "./index";
+
+const platform = vi.hoisted(() => ({ web: false }));
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  get isWeb() {
+    return platform.web;
+  },
+}));
+
+const config = createDefaultThemeConfig();
+
+function IconProbe({ color }: { size?: number; color?: string }) {
+  const theme = useTheme();
+  return (
+    <span
+      data-testid="icon"
+      data-color={color ?? ""}
+      data-theme-ink={String(getVariableValue(theme.color))}
+      data-muted-ink={String(getVariableValue(theme.color11))}
+      data-strong-ink={String(getVariableValue(theme.color12))}
+    />
+  );
+}
+
+const MemoIcon = memo(IconProbe);
+
+afterEach(() => {
+  cleanup();
+  platform.web = false;
+});
+
+describe("native Button icon ink", () => {
+  it.each(["light", "dark"] as const)(
+    "%s resolves icon components in the button theme",
+    (scheme) => {
+      render(
+        <TamaguiProvider config={config.tamagui} defaultTheme={scheme} disableInjectCSS>
+          <Button icon={IconProbe}>Refresh</Button>
+          <Button accent icon={MemoIcon}>
+            New
+          </Button>
+          <Button iconAfter={<IconProbe />}>Open</Button>
+        </TamaguiProvider>,
+      );
+      for (const icon of screen.getAllByTestId("icon")) {
+        expect(icon.dataset.color).not.toBe("");
+        expect(icon.dataset.color).toBe(icon.dataset.themeInk);
+      }
+    },
+  );
+
+  it.each(["light", "dark"] as const)(
+    "%s keeps disabled and outlined intent icons readable",
+    (scheme) => {
+      render(
+        <TamaguiProvider config={config.tamagui} defaultTheme={scheme} disableInjectCSS>
+          <Button error disabled disabledReason="Unavailable" icon={IconProbe}>
+            Delete
+          </Button>
+          <Button error outlined icon={IconProbe}>
+            Remove
+          </Button>
+        </TamaguiProvider>,
+      );
+      const [disabledIcon, outlinedIcon] = screen.getAllByTestId("icon");
+      expect(disabledIcon.dataset.color).toBe(disabledIcon.dataset.strongInk);
+      expect(outlinedIcon.dataset.color).toBe(outlinedIcon.dataset.mutedInk);
+    },
+  );
+
+  it("resolves the control's explicit token color and preserves an icon's own color", () => {
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <Button color="$color11" icon={IconProbe}>
+          Filter
+        </Button>
+        <Button icon={<IconProbe color="rebeccapurple" />}>Custom</Button>
+      </TamaguiProvider>,
+    );
+    const [controlIcon, explicitIcon] = screen.getAllByTestId("icon");
+    expect(controlIcon.dataset.color).toBe(controlIcon.dataset.mutedInk);
+    expect(explicitIcon.dataset.color).toBe("rebeccapurple");
+  });
+
+  it("leaves web icons on their inherited color path", () => {
+    platform.web = true;
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <Button icon={IconProbe}>Refresh</Button>
+      </TamaguiProvider>,
+    );
+    expect(screen.getByTestId("icon").dataset.color).toBe("");
+  });
+});

package/src/Button/Button.radiusLaw.spec.tsx

@@ -9,7 +9,7 @@
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { type Knobs, Preset } from "@multiplatform.one/theme";
+import { type Knobs, Preset, generateScale, defaultScaleInputs } from "@multiplatform.one/theme";
 import { cleanup, screen } from "@testing-library/react";
 import { Theme } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
@@ -17,8 +17,20 @@ import { Button } from "./index";
 
 afterEach(cleanup);
 
-const STOP_PX = { none: 0, small: 5, medium: 9, large: 16, full: 50 } as const;
-const RECIPE_RADIUS = { $2: 5, $3: 7, $4: 9, $6: 16 } as const;
+const scale = generateScale(defaultScaleInputs);
+const STOP_PX = {
+  none: 0,
+  small: scale.tokens.radius[2],
+  medium: scale.tokens.radius[4],
+  large: scale.tokens.radius[6],
+  full: scale.tokens.radius[12],
+} as const;
+const RECIPE_RADIUS = {
+  $2: scale.tokens.radius[2],
+  $3: scale.tokens.radius[3],
+  $4: scale.tokens.radius[4],
+  $6: scale.tokens.radius[6],
+} as const;
 const SCHEMES = ["light", "dark"] as const;
 const TOKENS = ["$2", "$3", "$4", "$6"] as const;
 
@@ -32,8 +44,6 @@ const COMBOS: Combo[] = [
     borderRadius: "none",
     borderWidth: "large",
     elevation: "none",
-    space: "medium",
-    size: "large",
     textAccent: "high",
     headingFont: "pixel",
     bodyFont: "mono",
@@ -45,21 +55,17 @@ const COMBOS: Combo[] = [
     borderRadius: "small",
     borderWidth: "none",
     elevation: "large",
-    space: "large",
-    size: "small",
     textAccent: "low",
     headingFont: "cursive",
     bodyFont: "serif",
     fontWeight: "bold",
-    animation: "snappy",
+    animation: "quickest",
   },
   {
     fillStyle: "outlined",
     borderRadius: "full",
     borderWidth: "none",
     elevation: "medium",
-    space: "small",
-    size: "small",
     textAccent: "medium",
     headingFont: "condensed",
     bodyFont: "handwriting",
@@ -71,8 +77,6 @@ const COMBOS: Combo[] = [
     borderRadius: "medium",
     borderWidth: "none",
     elevation: "small",
-    space: "medium",
-    size: "large",
     textAccent: "medium",
     headingFont: "pixel",
     bodyFont: "pixel",
@@ -84,8 +88,6 @@ const COMBOS: Combo[] = [
     borderRadius: "large",
     borderWidth: "small",
     elevation: "small",
-    space: "large",
-    size: "medium",
     textAccent: "low",
     headingFont: "slab",
     bodyFont: "pixel",
@@ -98,15 +100,7 @@ function lawRadius(stop: Stop, token: Token): number {
   return stop === "medium" ? RECIPE_RADIUS[token] : STOP_PX[stop];
 }
 
-const RADIUS_TOKEN_PX: Record<string, number> = {
-  "0": 0,
-  "2": 5,
-  "3": 7,
-  "4": 9,
-  "5": 10,
-  "6": 16,
-  "12": 50,
-};
+const RADIUS_TOKEN_PX: Record<string, number> = scale.tokens.radius;
 
 function radiusPx(el: HTMLElement): number | null {
   let found: number | null = null;
@@ -138,7 +132,7 @@ describe("MPO-162 Button frame radius: seeded fuzz against knob-laws.md § Radiu
   for (const [i, combo] of COMBOS.entries()) {
     const expected =
       combo.borderRadius === "medium"
-        ? "the size-recipe radius 5/7/9/16"
+        ? "the generated size-recipe radius"
         : `${STOP_PX[combo.borderRadius]}px at every size`;
     for (const scheme of SCHEMES) {
       it(`combo ${i + 1} ${scheme}: borderRadius ${combo.borderRadius} paints ${expected}`, () => {

package/src/Button/Button.sizeLadder.spec.tsx

@@ -2,33 +2,29 @@
  * @vitest-environment jsdom
  *
  * MPO-46 AC-1: the painted Button, not the recipe source, matches the
- * measured Tamagui v5 table at $2/$3/$4/$6. Radius used to sit on the
+ * generated default table at $2/$3/$4/$6. Radius used to sit on the
  * borderRadius knob (flat 9px); it must step with the size token, and
  * default gap matches that table. Corner shape overrides preserve the
  * internal spacing rather than jamming or separating the icon and label.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, generateScale, defaultScaleInputs } from "@multiplatform.one/theme";
 import { cleanup, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 import { Button } from "./index";
 
 afterEach(cleanup);
 
-const MEASURED = {
-  $2: { paddingHorizontal: 7, fontSize: 12, radius: 5 },
-  $3: { paddingHorizontal: 13, fontSize: 13, radius: 7 },
-  $4: { paddingHorizontal: 18, fontSize: 14, radius: 9 },
-  $6: { paddingHorizontal: 32, fontSize: 18, radius: 16 },
-} as const;
+const scale = generateScale(defaultScaleInputs);
+const MEASURED = scale.recipeInputs.tokenTable;
 
 const KNOB_STOPS = {
   none: 0,
-  small: 5,
-  medium: 9,
-  large: 16,
-  full: 50,
+  small: scale.tokens.radius[2],
+  medium: scale.tokens.radius[4],
+  large: scale.tokens.radius[6],
+  full: scale.tokens.radius[12],
 } as const;
 
 function lastPx(el: Element, re: RegExp): number | null {
@@ -40,15 +36,7 @@ function lastPx(el: Element, re: RegExp): number | null {
   return found;
 }
 
-const RADIUS_TOKEN_PX: Record<string, number> = {
-  "0": 0,
-  "2": 5,
-  "3": 7,
-  "4": 9,
-  "5": 10,
-  "6": 16,
-  "12": 50,
-};
+const RADIUS_TOKEN_PX: Record<string, number> = scale.tokens.radius;
 
 function radiusPx(el: HTMLElement): number | null {
   let found: number | null = null;
@@ -89,7 +77,7 @@ function renderSize(size: keyof typeof MEASURED) {
 describe("MPO-46 painted Button size ladder", () => {
   it("padX, label and radius at $2/$3/$4/$6 match the reference table", () => {
     for (const token of ["$2", "$3", "$4", "$6"] as const) {
-      const row = MEASURED[token];
+      const row = MEASURED[token]!;
       const frame = renderSize(token);
       expect(padXPx(frame), `${token} padX (${frame.className})`).toBe(row.paddingHorizontal);
       expect(labelPx(frame), `${token} label`).toBe(row.fontSize);
@@ -101,7 +89,7 @@ describe("MPO-46 painted Button size ladder", () => {
   it("gap equals radius at every size step", () => {
     for (const token of ["$2", "$3", "$4", "$6"] as const) {
       const frame = renderSize(token);
-      expect(gapPx(frame), `${token} gap`).toBe(MEASURED[token].radius);
+      expect(gapPx(frame), `${token} gap`).toBe(MEASURED[token]!.radius);
       expect(gapPx(frame), `${token} gap==radius`).toBe(radiusPx(frame));
       cleanup();
     }
@@ -118,7 +106,7 @@ describe("MPO-46 painted Button size ladder", () => {
       );
       const frame = screen.getByRole("button");
       expect(radiusPx(frame), `${stop} radius`).toBe(px);
-      expect(gapPx(frame), `${stop} gap`).toBe(MEASURED.$4.radius);
+      expect(gapPx(frame), `${stop} gap`).toBe(MEASURED.$4!.radius);
       cleanup();
     }
   });

package/src/Button/Button.sizeToken.spec.tsx

@@ -0,0 +1,123 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-100 TOKEN-SCALE / LC-78: a Button's size is Tamagui's own `size` token,
+ * forwarded by the nearest `<Surface size>` and clamped to it. The recipe at
+ * that token paints the height, pad and gap; there is no density step and no
+ * `compact` prop.
+ *
+ * LC-79 / LC-80: a tighter pad at the same height is the `chip` recipe
+ * FAMILY, picked per component through `recipeFamily`, never subtracted.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  Surface,
+  generateScale,
+  defaultScaleInputs,
+  recipeFamilies,
+} from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import type { SizeTokens } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button, resolveButtonSizeRecipe } from "./index";
+
+afterEach(cleanup);
+
+const sizes = ["$2", "$3", "$4"] as const;
+const scale = generateScale(defaultScaleInputs).tokens;
+
+/** 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;
+}
+
+function gapPxFromClass(el: HTMLElement): number | null {
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const m = c.match(/^_gap-(\d+)px$/);
+    if (m) return Number(m[1]);
+  }
+  return null;
+}
+
+function renderIn(surface: SizeTokens | undefined, size?: SizeTokens) {
+  const button = (
+    <Button size={size} icon={<span>i</span>}>
+      Save
+    </Button>
+  );
+  renderWithProviders(surface ? <Surface size={surface}>{button}</Surface> : button);
+  return screen.getByRole("button");
+}
+
+describe("Button size token through <Surface> (LC-78 / LC-100)", () => {
+  it('a Button under <Surface size="$3"> measures the scale\'s $3 height', () => {
+    const button = renderIn("$3");
+    expect(button.getAttribute("data-size-token")).toBe("$3");
+    expect(button.getAttribute("data-mp-button-height")).toBe(String(scale.size.$3));
+  });
+
+  it('a size="$5" request inside <Surface size="$3"> clamps to $3', () => {
+    const button = renderIn("$3", "$5");
+    expect(button.getAttribute("data-size-token")).toBe("$3");
+    expect(button.getAttribute("data-mp-button-height")).toBe(String(scale.size.$3));
+  });
+
+  it("a smaller request inside the Surface keeps its own token", () => {
+    const button = renderIn("$3", "$2");
+    expect(button.getAttribute("data-mp-button-height")).toBe(String(scale.size.$2));
+  });
+
+  it("with no Surface the Button renders at its own token, else $true", () => {
+    expect(renderIn(undefined).getAttribute("data-mp-button-height")).toBe(
+      String(scale.size.$true),
+    );
+    cleanup();
+    expect(renderIn(undefined, "$5").getAttribute("data-mp-button-height")).toBe(
+      String(scale.size.$5),
+    );
+  });
+
+  it("the painted pad and gap are the control recipe at the resolved token", () => {
+    for (const size of sizes) {
+      const button = renderIn(size);
+      expect(paddingPxFromClass(button), `padX at ${size}`).toBe(
+        resolveButtonSizeRecipe(size, "control").paddingHorizontal,
+      );
+      expect(gapPxFromClass(button), `gap at ${size}`).toBe(
+        resolveButtonSizeRecipe(size, "control").gap,
+      );
+      cleanup();
+    }
+  });
+});
+
+describe("the chip recipe family is the tighter pad (LC-79 / LC-80)", () => {
+  it("chip keeps the control height and tightens padX at every size", () => {
+    for (const size of sizes) {
+      const chip = resolveButtonSizeRecipe(size, "chip");
+      const control = resolveButtonSizeRecipe(size, "control");
+      expect(chip.height, `height at ${size}`).toBe(control.height);
+      expect(chip.paddingHorizontal, `padX at ${size}`).toBeLessThan(control.paddingHorizontal);
+      expect(chip.gap, `gap == radius at ${size}`).toBe(recipeFamilies.chip.radii[size]);
+    }
+  });
+
+  it('recipeFamily="chip" paints the chip pad at the same height', () => {
+    renderWithProviders(
+      <Button size="$4" recipeFamily="chip">
+        Save
+      </Button>,
+    );
+    const button = screen.getByRole("button");
+    expect(paddingPxFromClass(button)).toBe(
+      resolveButtonSizeRecipe("$4", "chip").paddingHorizontal,
+    );
+    expect(button.getAttribute("data-mp-button-height")).toBe(String(scale.size.$4));
+  });
+});