@multiplatform.one/forms 7.34.3 → 7.35.0

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)}

package/src/ContextualSaveBar/ContextualSaveBar.spec.tsx

@@ -315,7 +315,7 @@ describe("ContextualSaveBar", () => {
 
   it("CONTAINER-CAP on the top pair only; bottom pair pinned 0 (bottom-docked sheet)", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <Form formOptions={{ defaultValues: { name: "x" } }}>
           <Input name="name" label="Name" />
           <ContextualSaveBar forceVisible />
@@ -326,7 +326,7 @@ describe("ContextualSaveBar", () => {
     expect(bar).toBeTruthy();
     expect(bar?.getAttribute("data-mp-savebar-radius-class")).toBe("CONTAINER-CAP");
     expect(bar?.getAttribute("data-mp-savebar-dock")).toBe("bottom");
-    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("18");
+    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("16");
     expect(bar?.getAttribute("data-mp-savebar-bottom-radius")).toBe("0");
     const cls = String(bar?.className ?? "");
     expect(cls).not.toMatch(/t-radius-12/);
@@ -335,9 +335,9 @@ describe("ContextualSaveBar", () => {
     expect(cs?.borderBottomRightRadius === "0px" || cs?.borderBottomRightRadius === "0").toBe(true);
   });
 
-  it("large under space=small caps the top pair at pad 13; bottoms stay 0", () => {
+  it("large caps at the 16px panelPadding; bottoms stay 0", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ borderRadius: "large", space: "small" }}>
+      <Preset overrides={{ borderRadius: "large" }}>
         <Form formOptions={{ defaultValues: { name: "x" } }}>
           <Input name="name" label="Name" />
           <ContextualSaveBar forceVisible />
@@ -345,7 +345,7 @@ describe("ContextualSaveBar", () => {
       </Preset>,
     );
     const bar = savebar(result.container);
-    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("13");
+    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("16");
     expect(bar?.getAttribute("data-mp-savebar-bottom-radius")).toBe("0");
   });
 

package/src/ContextualSaveBar/UnsavedChangesDialog.tsx

@@ -1,3 +1,4 @@
+import { DialogContent, DialogOverlay } from "@multiplatform.one/theme";
 import {
   ensureKeyboardModalityTracking,
   useResolvedKnobs,
@@ -8,7 +9,7 @@ import { useEffect } from "react";
 import { Dialog, Paragraph, XStack } from "tamagui";
 import { Button } from "../Button";
 import { formCommonColors } from "../shared/colorRamps";
-import { DialogShowFocus, useReturnFocusOnClose } from "../shared/focusManagement";
+import { useReturnFocusOnClose } from "../shared/focusManagement";
 import { t } from "../shared/t";
 
 export interface UnsavedChangesDialogProps {
@@ -67,31 +68,14 @@ export function UnsavedChangesDialog({
   return (
     <Dialog modal open={open} onOpenChange={handleOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay
-          key="overlay"
-          backgroundColor="$background"
-          opacity={0.5}
-          transition={knobProps.transition}
-          enterStyle={knobProps.transition ? { opacity: 0 } : undefined}
-          exitStyle={knobProps.transition ? { opacity: 0 } : undefined}
-        />
-        <Dialog.Content
+        <DialogOverlay key="overlay" />
+        <DialogContent
           key="content"
           role="alertdialog"
           tabIndex={-1}
           width="90%"
           maxWidth={440}
-          padding="$4"
           gap="$4"
-          {...knobProps.elevatedSurface}
-          elevate={false}
-          backgroundColor="$background"
-          borderColor="$borderColor"
-          borderWidth={1}
-          {...knobProps.containerRadius}
-          outlineWidth={0}
-          focusStyle={{ outlineWidth: 0 }}
-          focusVisibleStyle={{ outlineWidth: 0 }}
           data-mp-savebar-guard=""
           onPointerDownOutside={(e) => e.preventDefault()}
           onInteractOutside={(e) => e.preventDefault()}
@@ -126,8 +110,7 @@ export function UnsavedChangesDialog({
               {t("Discard changes")}
             </Button>
           </XStack>
-          <DialogShowFocus onOpenAutoFocus={focusKeepEditing} />
-        </Dialog.Content>
+        </DialogContent>
       </Dialog.Portal>
     </Dialog>
   );

package/src/ContextualSaveBar/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import { useResolvedKnobs, warnCancelDisabled, type KnobProps } from "@multiplatform.one/theme";
 import { Store, useStore } from "@tanstack/react-store";
 import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
@@ -227,7 +228,7 @@ export function ContextualSaveBar({
   const elevationProps = getElevationWrapperProps(knobProps, elevation);
   const { className: smoothClass, rest: smoothRest } = containerRadiusRest(knobProps);
   const topRadius = knobProps.containerRadius.borderRadius;
-  const transition = knobProps.transition;
+  const transition = knobProps.motion.overlay.transition;
 
   return (
     <>
@@ -262,7 +263,7 @@ export function ContextualSaveBar({
             {...smoothRest}
             className={smoothClass}
             {...knobProps.gap}
-            transition={transition}
+            {...transitionProps(knobProps.motion.overlay)}
             enterStyle={transition ? { y: 12, opacity: 0 } : undefined}
             exitStyle={transition ? { y: 12, opacity: 0 } : undefined}
             {...elevationProps}

package/src/ControlGroup/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import {
   Children,
   isValidElement,
@@ -16,7 +17,7 @@ import {
   hairline,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { FocusContext, getInputFrameTransitionProps, InputContext } from "../InputParts";
+import { FocusContext, InputContext } from "../InputParts";
 import { formCommonColors, formControlColors, formInputColors } from "../shared/colorRamps";
 import { getElevationWrapperProps } from "../shared/utils";
 import { ControlGroupCtx } from "../shared/groupContext";
@@ -232,9 +233,13 @@ function ControlGroupImpl({ children, orientation = "horizontal", ...props }: Co
           {...knobProps.inputSurface}
           {...knobProps.borderRadius}
           {...elevationWrapperProps}
-          {...getInputFrameTransitionProps(
-            typeof knobProps.transition === "string" ? knobProps.transition : undefined,
-          )}
+          {...transitionProps(knobProps.motion.control, [
+            "borderRadius",
+            "borderWidth",
+            "boxShadow",
+            "shadowOpacity",
+            "shadowRadius",
+          ])}
           {...(control.focusKnobProps
             ? {
                 focusStyle: {

package/src/DescriptionList/DescriptionList.spec.tsx

@@ -243,15 +243,23 @@ describe("DescriptionList", () => {
     expect(list(result.container)?.getAttribute("data-stacked")).toBe("true");
   });
 
-  it("compact density marks the list", () => {
+  it("a size token below $true takes the tight rhythm", () => {
     const result = renderWithProviders(
       <DescriptionList
-        compact
+        size="$3"
         placement="top"
         items={[{ term: "A", field: "input", value: "1" }]}
       />,
     );
-    expect(list(result.container)?.getAttribute("data-compact")).toBe("true");
+    expect(list(result.container)?.getAttribute("data-rhythm")).toBe("tight");
+    expect(list(result.container)?.getAttribute("data-size-token")).toBe("$3");
+  });
+
+  it("the default token keeps the regular rhythm", () => {
+    const result = renderWithProviders(
+      <DescriptionList placement="top" items={[{ term: "A", field: "input", value: "1" }]} />,
+    );
+    expect(list(result.container)?.getAttribute("data-rhythm")).toBe("regular");
   });
 
   it("side rows share the list stacked flag (native host measures via onLayout)", () => {