@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/Button/Button.spec.tsx

@@ -1,21 +1,21 @@
 /**
  * @vitest-environment jsdom
  *
- * LC-65 SIZE-RECIPE (Button arm): medium/$4 paints at 44px — since MPO-13
- * the recipe table IS the measured Tamagui $size ramp ($4/$true = 44), so
+ * LC-65 SIZE-RECIPE (Button arm): medium/$4 paints at 40px — since MPO-13
+ * the recipe table IS the generated $size ramp ($4/$true = 40), so
  * the recipe fragment and the raw token finally agree. Radius steps with
  * the size token (MPO-46); the borderRadius knob is an override, not a
  * flat 9px across heights. jsdom cannot cascade Tamagui CSS, so
  * assertions read the atomic height/radius classes the frame emits.
  *
  * Desktop/jsdom: the touch floor (control.height >= 44) does not fire here;
- * at $4 it is a no-op anyway (desktop 44 = floor 44, touch lifts to 48).
+ * at $4 the desktop height is below the touch floor.
  * Height must come from the recipe fragment (concrete px class), never the
  * `_h-t-size-4` token class.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Surface } from "@multiplatform.one/theme";
 import { cleanup, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { __resetDevWarnSeen } from "../shared/devWarn";
@@ -41,31 +41,31 @@ function paddingPxFromClass(el: HTMLElement): number | null {
 }
 
 describe("Button LC-65 SIZE-RECIPE", () => {
-  it("desktop/jsdom medium height is the measured 44 from the recipe, not the token class", () => {
+  it("desktop/jsdom medium height is the generated 40 from the recipe, not the token class", () => {
     renderWithProviders(<Button>Save</Button>);
     const frame = screen.getByRole("button");
-    expect(frame.className).toMatch(/_h-44px/);
+    expect(frame.className).toMatch(/_h-40px/);
     expect(frame.className).not.toMatch(/_h-t-size-4/);
   });
 
   it("radius steps with the size token (MPO-46)", () => {
     renderWithProviders(
-      <Preset overrides={{ size: "small" }}>
+      <Surface size="$3">
         <Button>Save</Button>
-      </Preset>,
+      </Surface>,
     );
     const small = screen.getByRole("button");
-    expect(small.className).toMatch(/_h-36px/);
+    expect(small.className).toMatch(/_h-32px/);
     const smallRadius = frameRadiusClasses(small);
     cleanup();
 
     renderWithProviders(
-      <Preset overrides={{ size: "large" }}>
+      <Surface size="$5">
         <Button>Save</Button>
-      </Preset>,
+      </Surface>,
     );
     const large = screen.getByRole("button");
-    expect(large.className).toMatch(/_h-52px/);
+    expect(large.className).toMatch(/_h-48px/);
     const largeRadius = frameRadiusClasses(large);
 
     expect(smallRadius.length).toBeGreaterThan(0);
@@ -73,17 +73,17 @@ describe("Button LC-65 SIZE-RECIPE", () => {
     expect(smallRadius).not.toEqual(largeRadius);
   });
 
-  it("recipeFamily controlCompact has smaller padding than control at the same size token", () => {
+  it("recipeFamily chip has smaller padding than control at the same size token", () => {
     renderWithProviders(<Button>Save</Button>);
     const control = screen.getByRole("button");
-    expect(control.className).toMatch(/_h-44px/);
+    expect(control.className).toMatch(/_h-40px/);
     const controlPad = paddingPxFromClass(control);
     cleanup();
 
-    renderWithProviders(<Button recipeFamily="controlCompact">Save</Button>);
+    renderWithProviders(<Button recipeFamily="chip">Save</Button>);
     const compact = screen.getByRole("button");
     const compactPad = paddingPxFromClass(compact);
-    expect(compact.className).toMatch(/_h-44px/);
+    expect(compact.className).toMatch(/_h-40px/);
     if (controlPad != null && compactPad != null) {
       expect(compactPad).toBeLessThan(controlPad);
     }
@@ -106,7 +106,7 @@ describe("Button sizeRecipeEscape", () => {
   it("warns when numeric height is passed without sizeRecipeEscape", () => {
     renderWithProviders(<Button height={40}>Save</Button>);
     expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("size-recipe-escape"));
-    expect(screen.getByRole("button").className).toMatch(/_h-44px/);
+    expect(screen.getByRole("button").className).toMatch(/_h-40px/);
   });
 
   it("sizeRecipeEscape suppresses the numeric-height warn", () => {

package/src/Button/Button.stories.tsx

@@ -198,16 +198,13 @@ export const SizeLadder: Story = {
 };
 
 export const Anatomy: Story = {
-  name: "Anatomy (size / density / selected / nested)",
+  name: "Anatomy (size / selected / nested)",
   render: () => (
     <YStack gap="$4" padding="$4">
       <XStack gap="$3" alignItems="center" flexWrap="wrap">
         <Button size="$3">Small</Button>
         <Button size="$4">Medium</Button>
         <Button size="$5">Large</Button>
-        <Button size="$4" compact>
-          Compact pad
-        </Button>
       </XStack>
       <XStack gap="$3" alignItems="center" flexWrap="wrap">
         <Button outlined>Rest</Button>
@@ -381,3 +378,42 @@ export const StateFocus: Story = {
     </YStack>
   ),
 };
+
+export const DisabledReasons: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Disabled explanations stay on the parent surface. Switch the preset and light/dark scheme to compare accent, primary and plain actions in both placements.",
+      },
+    },
+  },
+  render: () => (
+    <YStack gap="$4" padding="$4" backgroundColor="$background">
+      {(["below", "inline"] as const).map((placement) => (
+        <YStack key={placement} gap="$3" alignItems="flex-start">
+          <Paragraph>{placement === "below" ? "Below the action" : "Beside the action"}</Paragraph>
+          <Button
+            accent
+            disabled
+            disabledReason="Complete the draft"
+            disabledReasonPlacement={placement}
+          >
+            Analyse
+          </Button>
+          <Button
+            actionRole="primary"
+            disabled
+            disabledReason="Choose a data source"
+            disabledReasonPlacement={placement}
+          >
+            Publish
+          </Button>
+          <Button disabled disabledReason="No saved changes" disabledReasonPlacement={placement}>
+            Save
+          </Button>
+        </YStack>
+      ))}
+    </YStack>
+  ),
+};

package/src/Button/index.tsx

@@ -1,6 +1,8 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import { pressSlopProps } from "../shared/pressSlopProps";
 import {
   Children,
+  cloneElement,
   createElement,
   isValidElement,
   useCallback,
@@ -23,6 +25,7 @@ import {
   solidPaletteThemes,
   useAccentOnSurface,
   useResolvedKnobs,
+  useTouchSurface,
   type RecipeFamilyName,
   type SizeRecipe,
   type SizeRecipeRadiusStop,
@@ -43,7 +46,7 @@ import {
   isWeb,
   useTheme,
 } from "tamagui";
-import { Spinner } from "../Spinner";
+import { Skeleton } from "../Skeleton";
 import type { ThemeName } from "@tamagui/web";
 import type { GestureResponderEvent } from "react-native";
 import type { AnyFormApi } from "../types";
@@ -60,7 +63,7 @@ import { useControlGrouped } from "../shared/groupContext";
  * 28/32/40, Spectrum S/M, M3 XS/S). Height, pad, type, icon, gap and radius
  * step together from the size table. The borderRadius knob is an override
  * of painted corners only (`resolveControlRadius`); internal gap keeps the
- * icon and label grouped. Density selects the same-height compact family.
+ * icon and label grouped. A `<Surface size>` ceiling clamps the token.
  *
  * GENERATED (LC-75 / LC-80): Button consumes `recipeFamilies.control` — the
  * handwritten mirror table this file used to carry drifted (md font 13 vs the
@@ -74,27 +77,14 @@ export const buttonSizeRecipes: Record<string, ButtonSizeRecipe> = recipeFamilie
 export function resolveButtonSizeRecipe(
   size: SizeTokens | number | undefined,
   family: RecipeFamilyName = "control",
+  touch = false,
 ): ButtonSizeRecipe {
   // Arbitrary numeric height: derive pad/font/icon/gap in ratio (the
   // non-enumerable escape LC-80 reserves for `sizeRecipeFromHeight`).
   if (typeof size === "number") {
     return sizeRecipeFromHeight(size, recipeFamilies[family]?.ratios);
   }
-  return sizeRecipeForToken(size == null ? "$true" : String(size), { family });
-}
-
-/**
- * Density selects the recipe FAMILY, it does not subtract from the recipe
- * (LC-79 / LC-80): control -> controlCompact, same heights, tighter ratios.
- * A hand-set delta is a second density writer and it drifts from the
- * generated table at every token but `$4` — it inverted at `$2`, where
- * `max(8, 7 - 2)` painted a compact Button WIDER than a comfortable one.
- */
-export function buttonDensityFamily(
-  family: RecipeFamilyName,
-  densityTight: boolean,
-): RecipeFamilyName {
-  return densityTight ? "controlCompact" : family;
+  return sizeRecipeForToken(size == null ? "$true" : String(size), { family, touch });
 }
 
 /**
@@ -111,21 +101,49 @@ function sizeTokenPx(size: SizeTokens | number | undefined): number {
 /** DG-ACT-01 role within an ActionBar / action region. */
 export type ButtonActionRole = "primary" | "secondary" | "chrome";
 
-type IconLike = ReactNode | ComponentType<{ size?: number }>;
+type IconLike = ReactNode | ComponentType<{ size?: number; color?: string }>;
 
 /** Many call sites pass Phosphor `Icon` (component) instead of `<Icon />`. */
-function normalizeButtonIcon(icon: IconLike | undefined, iconSize: number): ReactNode {
+function normalizeButtonIcon(
+  icon: IconLike | undefined,
+  iconSize: number,
+  color?: string,
+): ReactNode {
   if (icon == null || icon === false) return null;
-  if (isValidElement(icon)) return icon;
+  if (isValidElement<{ color?: string }>(icon)) {
+    return color == null || icon.props.color != null ? icon : cloneElement(icon, { color });
+  }
+  const iconProps = { size: iconSize, ...(color == null ? undefined : { color }) };
   if (typeof icon === "function") {
-    return createElement(icon, { size: iconSize });
+    return createElement(icon, iconProps);
   }
   if (typeof icon === "object" && icon !== null && "$$typeof" in icon) {
-    return createElement(icon as unknown as ComponentType<{ size?: number }>, { size: iconSize });
+    return createElement(
+      icon as unknown as ComponentType<{ size?: number; color?: string }>,
+      iconProps,
+    );
   }
   return icon;
 }
 
+function NativeButtonIcon({
+  icon,
+  size,
+  color,
+}: {
+  icon: IconLike;
+  size: number;
+  color: TamaguiButtonProps["color"];
+}) {
+  const theme = useTheme();
+  const ink = getVariableValue(
+    typeof color === "string" && color.startsWith("$")
+      ? (theme[color.slice(1) as keyof typeof theme] ?? theme.color)
+      : (color ?? theme.color),
+  );
+  return normalizeButtonIcon(icon, size, typeof ink === "string" ? ink : undefined);
+}
+
 const getButtonSized = (val: SizeTokens | number, { props }: VariantSpreadExtras<any>) => {
   if (!val || props.circular) return;
   const recipe = resolveButtonSizeRecipe(val);
@@ -275,7 +293,6 @@ export interface ButtonProps extends Omit<
   outlined?: boolean;
   icon?: IconLike;
   iconAfter?: IconLike;
-  compact?: boolean;
   /**
    * LC-71 / Spectrum ActionButton / Polaris `pressed`: selected is FILL, never
    * a second ring. Keyboard focus still paints the LC-71 outline on the frame.
@@ -284,7 +301,7 @@ export interface ButtonProps extends Omit<
   /**
    * LC-73: nested surfaces (dialog, overlay, calendar) paint `nestedControl`
    * (below the 44px chrome floor) and restore press with hitSlop. Does not
-   * change page-level `circularPressFloor` (toolbar icon wells stay 44px).
+   * change the touch-only page-level `circularPressFloor`.
    */
   nested?: boolean;
   /**
@@ -323,8 +340,8 @@ export interface ButtonProps extends Omit<
   sizeRecipeEscape?: string;
   /**
    * Size-recipe FAMILY (LC-80): same heights, different ratios.
-   * `controlCompact` tightens pad/font/icon/gap at the same height — a theme
-   * opt-in, never a per-component tweak. Defaults to `control`.
+   * `chip` tightens pad/font/icon/gap at the same height. Defaults to
+   * `control`.
    */
   recipeFamily?: RecipeFamilyName;
 }
@@ -347,7 +364,6 @@ export function Button({
   tabIndex,
   icon,
   iconAfter,
-  compact,
   selected,
   nested = false,
   circular,
@@ -415,14 +431,13 @@ export function Button({
     (warning && "warning") ||
     (success && "success") ||
     undefined;
-  // compact is density, not a size step — do not pass it through
-  // useResolvedKnobs (size stays on the size axis; LC-76). The PROP and the
-  // density knob share one channel: both pick the recipe FAMILY, the same
-  // way resolveKnobs picks it for every other control, so both land the
-  // same padX and the internals stay recipe-generated (LC-75 / LC-79).
+  // A size token is clamped to the nearest <Surface size> ceiling (LC-78); a
+  // numeric size is the LC-80 height escape and is used as given.
+  const sizeProp = (props as { size?: SizeTokens | number }).size;
   const { knobProps, control, text, disabledState } = useResolvedKnobs({
     intent,
     component: "Button",
+    size: typeof sizeProp === "number" ? undefined : sizeProp,
   });
   // Ring color resolved OUTSIDE the intent <Theme> wrapper below — the
   // page-scope `$outlineColor` literal (DG-A11Y-01; see focusVisibleStyle).
@@ -430,13 +445,9 @@ export function Button({
   const pageOutlineColor = parentScopeTheme.outlineColor?.val as string | undefined;
   const hostAccentInk = useAccentOnSurface();
   const grouped = useControlGrouped();
-  const sizeProp = (props as { size?: SizeTokens | number }).size;
-  const resolvedSize = sizeProp ?? knobProps.sizeToken;
-  const densityTight = compact !== undefined ? compact === true : knobProps.density === "compact";
-  const recipe = resolveButtonSizeRecipe(
-    resolvedSize,
-    buttonDensityFamily(recipeFamily, densityTight),
-  );
+  const resolvedSize = typeof sizeProp === "number" ? sizeProp : knobProps.sizeToken;
+  const touch = useTouchSurface();
+  const recipe = resolveButtonSizeRecipe(resolvedSize, recipeFamily, touch);
   const padX = recipe.paddingHorizontal;
   const radiusToken = knobProps.borderRadius.borderRadius;
   const radiusStop: SizeRecipeRadiusStop | undefined =
@@ -447,15 +458,15 @@ export function Button({
       : undefined;
   const paintedRadius = resolveControlRadius(recipe, radiusStop ?? "medium");
   const innerGap = paintedRadius.gap;
+  // The one Skeleton (forms), at the button's own recipe height.
+  const boneHeight = nested ? knobProps.nestedControl.px : recipe.height;
   if (skeleton) {
     return (
-      <View
-        {...knobProps.borderRadius}
-        backgroundColor="$gray5"
-        height={nested ? knobProps.nestedControl.px : recipe.height}
+      <Skeleton
+        variant="rounded"
+        height={boneHeight}
         width={120}
-        opacity={0.5}
-        {...props}
+        {...(props as Record<string, unknown>)}
       />
     );
   }
@@ -593,7 +604,7 @@ export function Button({
       // variant otherwise leaks 500/600 over it (MPO-125: a literal 400
       // here pinned the label and swallowed the fontWeight knob).
       fontWeight={knobProps.body.fontWeight}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control)}
     >
       {label}
     </SizableText>
@@ -603,22 +614,50 @@ export function Button({
   const flattenedChildren = Array.isArray(resolvedChildren)
     ? Children.toArray(resolvedChildren)
     : null;
+  const labelContent = isBareTextChild(resolvedChildren)
+    ? renderLabelText(resolvedChildren)
+    : flattenedChildren?.some(isBareTextChild)
+      ? wrapBareTextChildren(flattenedChildren, renderLabelText)
+      : resolvedChildren;
+  // Loading shows state, not a narration: the shared Skeleton bone takes the
+  // label's slot at the recipe height (the label is swapped out; hosts such as
+  // Toolbar name the busy button through `aria-label`). The frame stays, so
+  // focus never leaves the button.
   const textContent = loading ? (
-    <Spinner size="small" />
-  ) : isBareTextChild(resolvedChildren) ? (
-    renderLabelText(resolvedChildren)
-  ) : flattenedChildren?.some(isBareTextChild) ? (
-    wrapBareTextChildren(flattenedChildren, renderLabelText)
+    <View data-button-loading="">
+      <Skeleton variant="rounded" height={boneHeight} width={boneHeight * 2} aria-hidden />
+    </View>
   ) : (
-    resolvedChildren
+    labelContent
   );
 
   const hasIcon = icon || iconAfter;
+  const nativeIconColor =
+    props.color ??
+    (isDisabled ? disabledText.color : undefined) ??
+    (textColor
+      ? outlinedOnHost
+        ? hostScoped({ color: textColor }).color
+        : textColor
+      : outlinedInk) ??
+    "$color";
   const iconElement = icon ? (
-    <View flexShrink={0}>{normalizeButtonIcon(icon, iconSize)}</View>
+    <View flexShrink={0}>
+      {isWeb ? (
+        normalizeButtonIcon(icon, iconSize)
+      ) : (
+        <NativeButtonIcon icon={icon} size={iconSize} color={nativeIconColor} />
+      )}
+    </View>
   ) : null;
   const iconAfterElement = iconAfter ? (
-    <View flexShrink={0}>{normalizeButtonIcon(iconAfter, iconSize)}</View>
+    <View flexShrink={0}>
+      {isWeb ? (
+        normalizeButtonIcon(iconAfter, iconSize)
+      ) : (
+        <NativeButtonIcon icon={iconAfter} size={iconSize} color={nativeIconColor} />
+      )}
+    </View>
   ) : null;
 
   const explainedDisable = Boolean(disabledReason?.trim()) && Boolean(isDisabled);
@@ -629,12 +668,12 @@ export function Button({
   const isCircular = Boolean(circular);
   const circularTokenPx = sizeTokenPx(resolvedSize);
   const visualPx = nested ? knobProps.nestedControl.px : recipe.height;
-  // Circular tokens below 44 need an explicit box floor (circular variant also
+  // Touch circular tokens below 44 need an explicit box floor (circular variant also
   // sets maxWidth/maxHeight to the token). hitSlop covers native/touch leftovers.
   // Nested circulars skip this — they paint nestedControl and restore press
-  // with slop (LC-73). Page-level toolbar wells keep the 44px painted floor.
+  // with slop (LC-73). Desktop toolbar wells keep their token box.
   const circularPressFloor =
-    isCircular && circularTokenPx < MIN_PRESS_TARGET
+    isCircular && touch && typeof sizeProp !== "number" && circularTokenPx < MIN_PRESS_TARGET
       ? {
           width: MIN_PRESS_TARGET,
           height: MIN_PRESS_TARGET,
@@ -645,7 +684,11 @@ export function Button({
           hitSlop: pressTargetHitSlop(circularTokenPx),
         }
       : isCircular
-        ? { minWidth: MIN_PRESS_TARGET, minHeight: MIN_PRESS_TARGET }
+        ? {
+            minWidth: circularTokenPx,
+            minHeight: circularTokenPx,
+            ...pressSlopProps(circularTokenPx, true),
+          }
         : undefined;
   const nestedFloor = nested
     ? {
@@ -693,8 +736,9 @@ export function Button({
       // DG-ST-03: an explained disable is aria-disabled (focusable, press
       // swallowed in handlePress) instead of a natively disabled dead end.
       disabled={explainedDisable ? false : isDisabled || false}
+      aria-busy={loading || undefined}
       opacity={1}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control, ["borderRadius", "borderWidth"])}
       {...knobProps.borderRadius}
       {...(radiusStop === "medium" || radiusStop == null
         ? { borderRadius: paintedRadius.radius }
@@ -782,6 +826,9 @@ export function Button({
       {...(isWeb ? { onKeyDown: handleKeyDown as unknown as () => void } : undefined)}
       {...(tabIndex != null ? { tabIndex } : undefined)}
       gap={hasIcon && (resolvedChildren || textContent) ? innerGap : undefined}
+      // Form actions hug their label (Clay: no stretch): a Button inside a
+      // Form never takes the column's full width. A consumer width wins.
+      {...(formFromHook && !grouped ? { alignSelf: "flex-start" as const } : undefined)}
       // STD-EJECT-LAST: knob fragments and internal defaults (radius/size/
       // elevation/gap above) sit BEFORE the consumer spread so `{...props}`
       // stays the one styling eject. The spreads after it are not defaults:
@@ -841,9 +888,15 @@ export function Button({
         : undefined)}
       {...(resolvedRole ? { "data-mp-action-role": resolvedRole } : undefined)}
       data-mp-button-height={String(
-        nested ? visualPx : isCircular ? Math.max(circularTokenPx, MIN_PRESS_TARGET) : visualPx,
+        nested
+          ? visualPx
+          : isCircular
+            ? touch && typeof sizeProp !== "number"
+              ? Math.max(circularTokenPx, MIN_PRESS_TARGET)
+              : circularTokenPx
+            : visualPx,
       )}
-      data-mp-density={densityTight ? "compact" : "comfortable"}
+      data-size-token={knobProps.sizeToken}
       {...(selectedFill ? { "aria-pressed": true, "data-mp-selected": "true" } : undefined)}
     >
       {iconElement}

package/src/Chip/Chip.spec.tsx

@@ -1,7 +1,13 @@
+import { TamaguiProvider } from "tamagui";
 import { fireEvent } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import {
+  Preset,
+  generateScale,
+  defaultScaleInputs,
+  createDefaultThemeConfig,
+} from "@multiplatform.one/theme";
 import { CHIP_DISMISS_MIN_TARGET_FINE, Chip, chipDismissFloorOutset } from "./index";
 
 describe("Chip", () => {
@@ -67,8 +73,8 @@ describe("Chip", () => {
       return found;
     };
     expect(atoms("none")).toEqual([["_btlr-0px"], ["_btlr-0px"]]);
-    expect(atoms("small")).toEqual([["_btlr-5px"], ["_btlr-5px"]]);
-    expect(atoms("large")).toEqual([["_btlr-16px"], ["_btlr-16px"]]);
+    expect(atoms("small")).toEqual([["_btlr-4px"], ["_btlr-4px"]]);
+    expect(atoms("large")).toEqual([["_btlr-14px"], ["_btlr-14px"]]);
     expect(atoms("full")).toEqual([["_btlr-1000px"], ["_btlr-1000px"]]);
   });
 
@@ -241,3 +247,35 @@ describe("Chip", () => {
     expect(result.findTextElement("C")).toBeDefined();
   });
 });
+
+describe("Chip label line height", () => {
+  for (const [size, key] of [
+    [undefined, "3"],
+    ["$5", "4"],
+  ] as const) {
+    it(`uses body $${key} leading at ${size ?? "default"} size`, () => {
+      const scale = generateScale(defaultScaleInputs);
+      const config = createDefaultThemeConfig().tamagui;
+      const result = renderWithProviders(
+        <TamaguiProvider config={config} defaultTheme="light">
+          <Chip size={size}>Line height</Chip>
+        </TamaguiProvider>,
+        { tamagui: false },
+      );
+      const label = result.getByText("Line height");
+      const style = getComputedStyle(label);
+      expect(style.lineHeight).toBe(`${scale.fonts.bodyLineHeights[key]}px`);
+      if (size === undefined) {
+        const frame = getComputedStyle(result.container.querySelector(".is_Chip")!);
+        const height =
+          Number.parseFloat(style.lineHeight) +
+          Number.parseFloat(frame.paddingTop) +
+          Number.parseFloat(frame.paddingBottom) +
+          Number.parseFloat(frame.borderTopWidth) +
+          Number.parseFloat(frame.borderBottomWidth);
+        expect(height).toBe(31);
+      }
+      result.unmount();
+    });
+  }
+});

package/src/Chip/index.tsx

@@ -9,13 +9,14 @@ import {
   radiusStopFromToken,
   resolveRadiusClass,
   sizeRecipeForToken,
+  sizeKeyBelow,
   stackRadiusProps,
   useLegibleInkOn,
   useResolvedKnobs,
   type GroupOrientation,
   type GroupPosition,
 } from "@multiplatform.one/theme";
-import type { ColorTokens, GetProps } from "tamagui";
+import type { ColorTokens, FontSizeTokens, GetProps } from "tamagui";
 import { Text, View, isWeb, styled, useTheme } from "tamagui";
 import { t } from "../shared/t";
 
@@ -133,14 +134,14 @@ function resolveVariant(variant: ChipVariantProp | undefined): ChipVariant {
 // ── Styled components ─────────────────────────────────────────
 
 /**
- * Chip geometry rides the GENERATED `controlCompact` family (LC-75 / LC-80):
+ * Chip geometry rides the GENERATED `chip` family (LC-75 / LC-80):
  * padX / font / icon / inner gap come from the recipe table — no handwritten
  * per-size px map. The pill has no recipe height: it hugs its label, and the
  * vertical inset derives as a quarter of the recipe padX (preserves the
  * audited $3/$4 pill height). Module-eval objects so styled() can flatten
  * (pilot pattern: InputParts spreads `recipeFamilies.control.boxVariants`).
  */
-const CHIP_RECIPE_FAMILY = "controlCompact" as const;
+const CHIP_RECIPE_FAMILY = "chip" as const;
 const CHIP_SIZE_TOKENS = ["$2", "$3", "$4", "$5"] as const;
 
 function chipPadY(paddingHorizontal: number): number {
@@ -163,7 +164,10 @@ const chipFrameVariants = Object.fromEntries(
 const chipTextVariants = Object.fromEntries(
   CHIP_SIZE_TOKENS.map((token) => [
     token,
-    { fontSize: sizeRecipeForToken(token, { family: CHIP_RECIPE_FAMILY }).fontSize },
+    {
+      fontSize: sizeRecipeForToken(token, { family: CHIP_RECIPE_FAMILY }).fontSize,
+      lineHeight: sizeKeyBelow(token) as FontSizeTokens,
+    },
   ]),
 );
 
@@ -179,7 +183,7 @@ const chipDismissVariants = Object.fromEntries(
 /**
  * Exported so chip-scale companions (e.g. the Tags "Add Tag" trigger) share
  * the exact same size variants — padding/font stay in lockstep with Chip for
- * every size token, all derived from `recipeFamilies.controlCompact`.
+ * every size token, all derived from `recipeFamilies.chip`.
  */
 export const ChipFrame = styled(View, {
   name: "Chip",
@@ -226,6 +230,7 @@ export const ChipText = styled(Text, {
       ...chipTextVariants,
       "...size": (val: unknown) => ({
         fontSize: sizeRecipeForToken(String(val ?? "$3"), { family: CHIP_RECIPE_FAMILY }).fontSize,
+        lineHeight: sizeKeyBelow(String(val ?? "$3")) as FontSizeTokens,
       }),
     },
   } as const,
@@ -395,10 +400,10 @@ export function Chip({
   // area past it symmetrically (≈1.75px/side at $2 — inside the half-row-gap
   // cap) via an absolute overlay that cannot affect layout.
   const dismissFloorOutset = dismissSide ? chipDismissFloorOutset(dismissSide) : 0;
-  // Chip geometry (padding/font/icon) follows the size knob through the
+  // Chip geometry (padding/font/icon) follows the size token through the
   // shared size variants (Tags precedent, LC-18); an explicit size prop
-  // ejects. Control padding is size-derived (SP-PAD), so the space knob
-  // has no separate chip target.
+  // ejects. Control padding is size-derived (SP-PAD), so the spacing roles
+  // have no separate chip target.
   const resolvedSize = size ?? (knobProps.sizeToken as ChipSize);
   if (isWeb) ensureChipFocusRing();
 
@@ -468,6 +473,8 @@ export function Chip({
       {leading}
       <ChipText
         size={resolvedSize}
+        fontSize={sizeRecipeForToken(resolvedSize, { family: CHIP_RECIPE_FAMILY }).fontSize}
+        lineHeight={sizeKeyBelow(resolvedSize) as FontSizeTokens}
         color={textColor}
         {...knobProps.body}
         {...(disabled ? disabledState.textKnobProps : undefined)}