@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/fields/Geolocation/index.tsx

@@ -1,6 +1,7 @@
 import {
   ensureFocusVisibleRing,
   pressTargetHitSlop,
+  sizeTokenStep,
   useResolvedKnobs,
   useGlyphColor,
   useTouchSurface,
@@ -76,7 +77,6 @@ function coordinateKey({ lat, lng }: { lat: number; lng: number }): string {
 
 const SEARCH_DEBOUNCE_MS = 300;
 const COORD_LINE_HEIGHT = 28;
-const RESULTS_PANEL_SHADOW = "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)";
 
 /**
  * Geolocation capability pre-flight (LC-19 CAPABILITY-PREFLIGHT). Runs BEFORE
@@ -776,8 +776,6 @@ export interface GeolocationProps {
   renderMap?: (props: GeolocationMapProps) => ReactNode;
   /** When true, renders a skeleton placeholder instead of the geolocation field */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
   /**
    * Forward geocode. Injected — the field never ships a default provider
    * (R4). Without this, search is disabled and the map / locate / coordinate
@@ -860,13 +858,12 @@ export function Geolocation({
   expandIcon,
   renderMap,
   skeleton,
-  compact,
   geocode: geocodeProp,
   reverseGeocode: reverseGeocodeProp,
   geocoder,
 }: GeolocationProps) {
   const hydrationTouch = useTouchSurface();
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const glyphColor = useGlyphColor();
   const resolvedLocationIcon =
@@ -1171,7 +1168,7 @@ export function Geolocation({
 
   const mapHeight = getFieldHeight(
     (size ?? knobProps.sizeToken) as SizeTokens,
-    compact ? 4 : 5,
+    sizeTokenStep((size ?? knobProps.sizeToken) as string) < 0 ? 4 : 5,
     hydrationTouch,
   );
   const displayError = error || preflightError;
@@ -1413,12 +1410,8 @@ export function Geolocation({
             left={0}
             right={0}
             zIndex={zIndex.dropdown}
-            backgroundColor="$color1"
-            borderWidth={1}
-            borderColor={formInputColors.border.base}
-            borderRadius={knobProps.borderRadius.borderRadius}
+            {...knobProps.elevatedSurface}
             overflow="hidden"
-            style={{ boxShadow: RESULTS_PANEL_SHADOW }}
           >
             <ScrollView keyboardShouldPersistTaps="handled" maxHeight={mapHeight * 1.5}>
               {renderResults(handlers)}
@@ -1466,7 +1459,7 @@ export function Geolocation({
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
         <YStack gap="$2">
-          <Skeleton variant="rounded" width="100%" height={44} />
+          <Skeleton variant="rounded" width="100%" height={knobProps.control.height} />
           <Skeleton variant="rounded" width="100%" height={mapHeight} />
         </YStack>
       </FieldLayout>

package/src/fields/Icon/Icon.stories.tsx

@@ -26,7 +26,7 @@ export const Main: Story = {
     const Example = () => {
       const [value, setValue] = useState("mail");
       return (
-        <YStack gap="$4" width={320}>
+        <YStack gap="$4" width={320} maxWidth="100%">
           <Icon
             label="Workspace icon"
             value={value}
@@ -44,7 +44,7 @@ export const Main: Story = {
 
 export const Empty: Story = {
   render: () => (
-    <YStack width={320}>
+    <YStack width={320} maxWidth="100%">
       <Icon label="Workspace icon" placeholder="Choose an icon" />
     </YStack>
   ),
@@ -60,7 +60,7 @@ export const Wide: Story = {
 
 export const ReadOnly: Story = {
   render: () => (
-    <YStack width={320}>
+    <YStack width={320} maxWidth="100%">
       <Icon label="Workspace icon" value="upload" readOnly />
     </YStack>
   ),

package/src/fields/Icon/index.tsx

@@ -1,12 +1,7 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { Pressable as RNPressable } from "react-native";
-import {
-  ensureFocusVisibleRing,
-  useAaSolidFill,
-  useReadableTextOn,
-  useResolvedKnobs,
-} from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState, type ComponentRef } from "react";
 import { Text, View, XStack, YStack, isWeb, useProps } from "tamagui";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -14,7 +9,7 @@ import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { FloatingPanel, useViewportGtSm } from "../../FloatingPanel";
 import { Skeleton } from "../../Skeleton";
-import { formCommonColors, formSelectedColors } from "../../shared/colorRamps";
+import { formCommonColors, formSelectionColors } from "../../shared/colorRamps";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import {
   getFieldError,
@@ -25,7 +20,6 @@ import {
 import { t } from "../../shared/t";
 import type { FieldComponentProps, Validator } from "../../types";
 import {
-  DRAWN_ICON_NAMES,
   DrawnIcon,
   filterDrawnIcons,
   isDrawnIconName,
@@ -67,7 +61,6 @@ export type IconProps<
     /** @deprecated Use `onChange` instead. */
     onValueChange?: (value: string) => void;
     skeleton?: boolean;
-    compact?: boolean;
     /** Restrict the picker to a subset of the drawn set (df.options). */
     icons?: readonly string[];
     options?: string;
@@ -129,9 +122,6 @@ function IconControl({
   const shouldUseSheet = !isWeb || !(typeof window !== "undefined" && viewportGtSm);
   const drawn = isDrawnIconName(value) ? value : undefined;
   const matches = useMemo(() => filterDrawnIcons(catalog, query), [catalog, query]);
-  // Ink that reads on the accent fill the selected cell carries (LC-05).
-  const markFill = useAaSolidFill(formSelectedColors.mark);
-  const onMark = useReadableTextOn(markFill);
 
   const closePanel = useCallback(() => {
     // Focus restoration retries after 320ms in focusManagement.ts. Let that
@@ -199,10 +189,10 @@ function IconControl({
         cursor="pointer"
         onPress={isWeb && !disabled ? () => setOpen(true) : undefined}
         size={knobProps.sizeToken}
+        {...(hasError ? { theme: "error" } : undefined)}
       >
         <InputParts.Box
           testID="icon-field"
-          theme={hasError ? "error" : undefined}
           disabled={disabled}
           {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
         >
@@ -343,7 +333,7 @@ function IconControl({
           <XStack flexWrap="wrap">
             {matches.map((name) => {
               const selected = name === value;
-              const cellInk = (selected && onMark) || formCommonColors.text;
+              const cellInk = selected ? formSelectionColors.ink : formCommonColors.text;
               const cell = (
                 <View
                   key={name}
@@ -362,9 +352,8 @@ function IconControl({
                     justifyContent="center"
                     gap="$1"
                     borderRadius="$3"
-                    // LC-05 ONE-EMPHASIS: the selected mark is the active
-                    // accent, never a neutral ramp step.
-                    backgroundColor={selected ? markFill : "transparent"}
+                    // LC-05: a selected icon cell uses the neutral selection tier.
+                    backgroundColor={selected ? formSelectionColors.background : "transparent"}
                     hoverStyle={selected ? undefined : { backgroundColor: "$color3" }}
                   >
                     {/* Outside InputParts.Icon, so the colour is passed here. */}
@@ -430,7 +419,6 @@ export function Icon<
     onChange,
     onValueChange,
     skeleton,
-    compact,
     id: idProp,
     icons,
     options,
@@ -449,7 +437,7 @@ export function Icon<
     [onChange, onValueChange],
   );
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const [standaloneValue, setStandaloneValue] = useState<string>(
     () => (controlledValue ?? (defaultValue as string)) || "",

package/src/fields/ImageField/index.tsx

@@ -9,6 +9,7 @@
  * the borderRadius fragment, never clampRadiusForControl / containerRadius.
  */
 
+import { transitionProps } from "@multiplatform.one/theme";
 import { ImageSquareIcon, XIcon } from "@phosphor-icons/react";
 import {
   ensureFocusVisibleRing,
@@ -78,8 +79,6 @@ export interface ImageFieldProps {
   objectFit?: "cover" | "contain" | "fill" | "none";
   /** When true, renders a skeleton placeholder instead of the image field */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 const ImageFrame = styled(View, {
@@ -337,7 +336,7 @@ function ImageControl({
             : formInputColors.background.base
         }
         elevation={inTableCell ? undefined : knobProps.elevation}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
         {...(disabled ? disabledSurface : undefined)}
         aria-required={required || undefined}
         aria-invalid={!!errorProp || undefined}
@@ -462,12 +461,10 @@ export function ImageField({
   placeholder,
   objectFit = "cover",
   skeleton,
-  compact,
 }: ImageFieldProps) {
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const [validationError, setValidationError] = useState<string | undefined>();

package/src/fields/Input/Input.copy.spec.tsx

@@ -50,19 +50,19 @@ describe("Input copy (CopyField slot)", () => {
     );
     const copy = copyOf(result.container);
     if (!copy) throw new Error("copy missing when disabled");
-    expect(copy.getAttribute("data-end-cap")).toBe("44");
+    expect(copy.getAttribute("data-end-cap")).toBe("40");
     expect(copy.getAttribute("tabindex")).toBe("-1");
   });
 
-  it("default size stays 44 tall with the copy cap present", () => {
+  it("default size stays 40 tall with the copy cap present", () => {
     const result = renderWithProviders(
       <Input copy readOnly label="API token" value="mpo_live_4f2a9c81e0b3" />,
     );
     const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
     const copy = copyOf(result.container);
     if (!box || !copy) throw new Error("box or copy not found");
-    expect(box.getAttribute("data-visual-height")).toBe("44");
-    expect(copy.getAttribute("data-end-cap")).toBe("44");
+    expect(box.getAttribute("data-visual-height")).toBe("40");
+    expect(copy.getAttribute("data-end-cap")).toBe("40");
   });
 
   it("copy cap tracks the size recipe at every step", () => {

package/src/fields/Input/Input.spec.tsx

@@ -2,7 +2,7 @@ import { act, fireEvent, waitFor } from "@testing-library/react";
 import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface, sizeRecipeForToken, textFieldInset } from "@multiplatform.one/theme";
 import { Form } from "../../Form";
 import { TableCellContext } from "../../shared/tableCellContext";
 import { Input } from "./index";
@@ -288,42 +288,66 @@ describe("Input", () => {
     });
   });
 
-  describe("density ≠ size", () => {
-    it("compact steps density without requiring a size token", () => {
-      const result = renderWithProviders(<Input label="Name" name="n" compact />);
+  describe("size token (LC-100 / LC-78)", () => {
+    it("renders at the ambient token, $true by default, with no density attribute", () => {
+      const result = renderWithProviders(<Input label="Name" name="n" />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(box.getAttribute("data-density")).toBe("compact");
-      // LC-76: compact steps space, never the size axis — the painted height
-      // token must be exactly what a comfortable field resolves to.
-      expect(box.getAttribute("data-size")).toBe("$4");
+      expect(box.getAttribute("data-size-token")).toBe("$true");
+      expect(box.hasAttribute("data-density")).toBe(false);
     });
 
-    it("size ejects painted height and leaves density comfortable", () => {
+    it("size is Tamagui's own token and paints that height", () => {
       const result = renderWithProviders(<Input label="Name" name="n" size="$5" />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(box.getAttribute("data-density")).toBe("comfortable");
-      expect(box.getAttribute("data-size")).toBe("$5");
+      expect(box.getAttribute("data-size-token")).toBe("$5");
+    });
+
+    it.each(["$2", "$3", "$4", "$5"] as const)(
+      "at %s the text renders at the recipe font size and the box at the recipe height and inset",
+      (size) => {
+        const recipe = sizeRecipeForToken(size);
+        const inset = textFieldInset(recipe);
+        const result = renderWithProviders(<Input label="Name" name="n" size={size} />);
+        const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+        const input = result.container.querySelector("input") as HTMLElement;
+        expect(getComputedStyle(input).fontSize).toBe(`${recipe.fontSize}px`);
+        expect(box.className).toContain(`_h-${recipe.height}px`);
+        expect(box.className).toContain(`_pl-${inset}px`);
+        expect(box.className).toContain(`_pr-${inset}px`);
+      },
+    );
+
+    it("a Surface-forwarded size reaches the text too", () => {
+      const recipe = sizeRecipeForToken("$3");
+      const result = renderWithProviders(
+        <Surface size="$3">
+          <Input label="Name" name="n" />
+        </Surface>,
+      );
+      const input = result.container.querySelector("input") as HTMLElement;
+      expect(getComputedStyle(input).fontSize).toBe(`${recipe.fontSize}px`);
     });
 
-    it("compact + size stay orthogonal", () => {
-      const result = renderWithProviders(<Input label="Name" name="n" compact size="$5" />);
+    it("a $5 request inside a $3 Surface clamps to $3", () => {
+      const result = renderWithProviders(
+        <Surface size="$3">
+          <Input label="Name" name="n" size="$5" />
+        </Surface>,
+      );
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(box.getAttribute("data-density")).toBe("compact");
-      expect(box.getAttribute("data-size")).toBe("$5");
+      expect(box.getAttribute("data-size-token")).toBe("$3");
     });
   });
 
   describe("44px press floor", () => {
-    it("default painted box meets the 44px floor", () => {
+    it("default desktop box paints 40 and restores the press floor with slop", () => {
       const result = renderWithProviders(<Input label="Name" name="n" />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(Number(box.getAttribute("data-visual-height"))).toBe(44);
-      expect(box.getAttribute("data-press-floor")).toBe("box");
+      expect(Number(box.getAttribute("data-visual-height"))).toBe(40);
+      expect(box.getAttribute("data-press-floor")).toBe("slop");
     });
 
     it("sub-44 sizes restore press via slop, not giant chrome", () => {
-      // MPO-13: $4 now paints 44 natively (compact keeps recipe height,
-      // LC-76), so the sub-floor path is proven with a genuinely small size.
       const result = renderWithProviders(<Input label="Name" name="n" size="$2" />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
       const visual = Number(box.getAttribute("data-visual-height"));
@@ -403,26 +427,28 @@ describe("Input", () => {
     });
 
     it("paints the size table's corner at medium, as Button does (MPO-23 L1)", () => {
-      const at = (size: "small" | "medium" | "large", borderRadius = "medium" as const) => {
+      const at = (size: "$3" | "$4" | "$5", borderRadius = "medium" as const) => {
         const result = renderWithProviders(
-          <Preset overrides={{ size, borderRadius }}>
-            <Input label="Name" name="n" />
+          <Preset overrides={{ borderRadius }}>
+            <Surface size={size}>
+              <Input label="Name" name="n" />
+            </Surface>
           </Preset>,
         );
         return radiusClasses(
           result.container.querySelector("[data-ring-target='box']") as HTMLElement,
         );
       };
-      expect(at("small")).toEqual(["_btlr-7px"]);
-      expect(at("medium")).toEqual(["_btlr-9px"]);
-      expect(at("large")).toEqual(["_btlr-10px"]);
+      expect(at("$3")).toEqual(["_btlr-6px"]);
+      expect(at("$4")).toEqual(["_btlr-8px"]);
+      expect(at("$5")).toEqual(["_btlr-9px"]);
     });
 
     it("an explicit size prop picks the corner too", () => {
       const result = renderWithProviders(<Input label="Name" name="n" size="$5" />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(radiusClasses(box)).toEqual(["_btlr-10px"]);
-      expect(box.className).toContain("_h-52px");
+      expect(radiusClasses(box)).toEqual(["_btlr-9px"]);
+      expect(box.className).toContain("_h-48px");
     });
 
     it("focus ring offset is 0 (F1 / reference §10 / cover-offset-0)", () => {

package/src/fields/Input/Input.stories.tsx

@@ -20,7 +20,6 @@ const meta: Meta<typeof Input> = {
     error: { control: "text" },
     required: { control: "boolean" },
     disabled: { control: "boolean" },
-    compact: { control: "boolean" },
     chromeless: { control: "boolean" },
     labelHidden: { control: "boolean" },
     copy: { control: "boolean" },
@@ -105,24 +104,11 @@ export const WithError: Story = {
   },
 };
 
-/**
- * Density and size are orthogonal. Compact steps knob chrome; `size` ejects
- * the painted box height. Default density is comfortable (44px box).
- */
-export const Density: Story = {
-  render: () => (
-    <YStack gap="$4" maxWidth={400}>
-      <Input label="Comfortable" placeholder="Default density — 44px box" />
-      <Input compact label="Compact" placeholder="Density step, same size axis" />
-    </YStack>
-  ),
-};
-
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
-      <Input label="Default size" placeholder="sizeToken from knobs ($4 / 44px)" />
-      <Input size="$5" label="Size eject large" placeholder="Explicit size, comfortable density" />
+      <Input label="Default size" placeholder="Default $true (40px)" />
+      <Input size="$5" label="Size eject large" placeholder='size="$5" (48px)' />
     </YStack>
   ),
 };
@@ -213,7 +199,7 @@ export const Comparison: StoryObj = {
       const [tamaguiVal, setTamaguiVal] = useState("");
       return (
         <XStack gap="$6" alignItems="flex-start" padding="$4">
-          <YStack gap="$3" width={300}>
+          <YStack gap="$3" width={300} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Custom Input
             </Paragraph>
@@ -227,7 +213,7 @@ export const Comparison: StoryObj = {
             />
           </YStack>
 
-          <YStack gap="$3" width={300}>
+          <YStack gap="$3" width={300} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Tamagui Input
             </Paragraph>

package/src/fields/Input/index.tsx

@@ -67,8 +67,8 @@ export interface InputProps {
   readOnly?: boolean;
   linkResolver?: LinkResolver;
   /**
-   * Painted control height (Tamagui size token). Orthogonal to `compact`:
-   * density steps the knob sizeToken, `size` ejects the box height.
+   * Control size token (Tamagui's own `size`, e.g. `"$3"`), clamped to the
+   * nearest `<Surface size>` ceiling (LC-78). Omitted = the ambient token.
    */
   size?: SizeTokens;
   id?: string;
@@ -103,11 +103,6 @@ export interface InputProps {
   children?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the input */
   skeleton?: boolean;
-  /**
-   * Density override. Compact steps knob size+space down one level; it is
-   * not a `size` token. Default remains comfortable (44px painted box).
-   */
-  compact?: boolean;
   /** When true, renders without borders/background (for toolbar integration) */
   chromeless?: boolean;
   /**
@@ -156,7 +151,6 @@ export function Input({
   inputProps,
   children,
   skeleton,
-  compact,
   chromeless,
   copy,
   onCopyResult,
@@ -165,7 +159,7 @@ export function Input({
   const { resolvedForm, knobProps, control, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
+    size,
   });
   const inputRef = useRef<TamaguiElement>(null);
   const focusTrigger = useForwardFocus(inputRef);
@@ -177,9 +171,7 @@ export function Input({
   // autoComplete/keyboardType/inputProps below eject per key.
   const purposeInputProps = resolveFieldInputProps(purpose, autoComplete);
 
-  // density ≠ size: compact steps knobProps.sizeToken; an explicit `size`
-  // ejects only the painted box height and leaves density alone.
-  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const resolvedSize = knobProps.sizeToken as SizeTokens;
   const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
   const belowFloor = visualHeight < MIN_PRESS_TARGET;
   const visibleLabel = labelHidden ? undefined : label;
@@ -188,8 +180,7 @@ export function Input({
 
   const boxContract = {
     size: resolvedSize,
-    "data-density": knobProps.density,
-    "data-size": String(resolvedSize),
+    "data-size-token": String(resolvedSize),
     "data-visual-height": String(visualHeight),
     "data-press-floor": belowFloor ? "slop" : "box",
     "data-ring-target": "box",
@@ -321,6 +312,7 @@ export function Input({
           ) : (
             <InputParts.Area
               ref={inputRef}
+              size={resolvedSize}
               value={inputValue ?? ""}
               readOnly
               id={id}
@@ -334,6 +326,7 @@ export function Input({
         ) : (
           <InputParts.Area
             ref={inputRef}
+            size={resolvedSize}
             {...(purposeInputProps.inputMode !== undefined
               ? { inputMode: purposeInputProps.inputMode }
               : undefined)}

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -217,7 +217,7 @@ describe("MentionInput", () => {
     // LC-73: overlay rows paint nestedControl (32px at medium), not a raw 28.
     const slots = listbox.querySelectorAll("[data-media-slot]");
     expect(slots.length).toBe(2);
-    expect(slots[0]?.getAttribute("data-media-slot")).toBe("32");
+    expect(slots[0]?.getAttribute("data-media-slot")).toBe("29");
   });
 
   // Same contract every other FloatingPanel consumer honors, reached by a

package/src/fields/MentionInput/MentionInput.stories.tsx

@@ -28,7 +28,6 @@ const meta: Meta<typeof MentionInput> = {
     required: { control: "boolean", description: "Mark field as required" },
     disabled: { control: "boolean", description: "Disable the input" },
     readOnly: { control: "boolean", description: "Read-only display" },
-    compact: { control: "boolean", description: "Use compact density (tighter layout gaps)" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
     minHeight: { control: "number", description: "Minimum height of input" },
     maxHeight: { control: "number", description: "Maximum height of input" },
@@ -185,7 +184,7 @@ export const Sizes: Story = {
         placeholder="Type @ to mention"
       />
       <MentionInput
-        label="Medium (default)"
+        label="Medium ($3)"
         size="$3"
         mentions={[userMentions]}
         placeholder="Type @ to mention"

package/src/fields/MentionInput/index.tsx

@@ -24,7 +24,7 @@ import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { ScrollArrow } from "../../shared/floatingList";
 import { Skeleton } from "../../Skeleton";
 import { zIndex } from "../../shared/zIndex";
-import { useFloatingPanel, panelTransition } from "../../FloatingPanel";
+import { useFloatingPanel } from "../../FloatingPanel";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal";
 import { Field, FieldLayout } from "../../fieldLayout";
 import {
@@ -148,8 +148,6 @@ export type MentionInputProps<
     textAreaProps?: Record<string, any>;
     /** When true, renders a skeleton placeholder instead of the mention input */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
   };
 
 const blurCloseDelayMs = 150;
@@ -157,7 +155,7 @@ const zeroWidthSpace = "\u200b";
 
 // One fontSize step below the field size token \u2014 the T-HELPER register for the
 // secondary (role/description) line, matching the shared suggestion-row recipe.
-const helperFontSizeMap: Record<string, string> = { $3: "$2", $4: "$3", $5: "$4" };
+const helperFontSizeMap: Record<string, string> = { $3: "$2", $4: "$3", $true: "$3", $5: "$4" };
 
 // LC-01 SP-EDGE-MENU: the row spans the full menu width and owns ALL padding
 // (the overlay container owns only its border), so the active/hover highlight
@@ -269,12 +267,11 @@ export function MentionInput<
     size,
     onBlur,
     skeleton,
-    compact,
     id: idProp,
     value: valueProp,
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const resolvedSizeToken = (size || knobProps.sizeToken) as SizeTokens;
   const minHeight = minHeightProp ?? getFieldHeight(resolvedSizeToken, 3, hydrationTouch);
@@ -815,7 +812,7 @@ export function MentionInput<
             overflow: "auto",
             opacity: panel.visible ? 1 : 0,
             transform: panel.visible ? "scale(1)" : "scale(0.96)",
-            transition: panel.knobProps.transition ? panelTransition : "none",
+            transition: panel.panelTransition,
             transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
           },
           onScroll: (e: any) => panel.updateArrows(e.target as HTMLElement),
@@ -944,7 +941,6 @@ export function MentionInput<
       helperText={helperText}
       required={required}
       size={size}
-      compact={compact}
       onBlur={(...args: any[]) => {
         handleBlurInternal(...args);
         if (fieldBlurHandler) {

package/src/fields/OTPInput/OtpInput.spec.tsx

@@ -680,7 +680,7 @@ describe("OTPInput", () => {
       "large",
       "full",
     ] as const satisfies readonly BorderRadius[];
-    const TOKEN_SCALE = { none: 0, small: 5, medium: 9, large: 16 } as const;
+    const TOKEN_SCALE = { none: 0, small: 4, medium: 8, large: 14 } as const;
 
     function paintedRadiusPx(el: Element): number {
       const inline = (el as HTMLElement).style.borderRadius;
@@ -716,7 +716,7 @@ describe("OTPInput", () => {
     it("cell measures height/2 at full and 0 at none, riding the token scale between", () => {
       // the cell's own painted edge — `height={cellSize}` is the `$size` token,
       // so the circle is that token halved. Reading the recipe here instead would
-      // pass on a desktop run and lie on a touch one (recipe $4 = 48 vs token 44).
+      // pass on a desktop run and lie when touch grows a smaller control.
       const heightPx = getVariableValue(getSize("$4" as SizeTokens)) as number;
       for (const stop of RADIUS_STOPS) {
         const result = renderWithProviders(
@@ -741,11 +741,11 @@ describe("OTPInput", () => {
       for (const token of ["$2", "$3", "$4", "$6"] as const) {
         const painted = getVariableValue(getSize(token as SizeTokens)) as number;
         expect(otpCellHeightPx(token), `painted height @ ${token}`).toBe(painted);
-        // The recipe's touch column is a different number at EVERY step (44/44/48/68
-        // against 28/36/44/64). Halving it puts the radius past the cell's own edge,
-        // and the engine clamps it back — the browser clamp MPO-56 exists to kill.
         const touchHeight = sizeRecipeForToken(token, { touch: true }).height;
-        expect(touchHeight, `touch recipe @ ${token}`).not.toBe(painted);
+        expect(touchHeight, `touch recipe @ ${token}`).toBe(
+          Math.max(sizeRecipeForToken(token).height, 44),
+        );
+        if (token === "$2" || token === "$3") expect(touchHeight).not.toBe(painted);
         expect(
           resolveRadiusClass("CIRCULAR-AT-FULL", "full", { heightPx: otpCellHeightPx(token) }),
           `full @ ${token}`,

package/src/fields/OTPInput/OtpInput.stories.tsx

@@ -155,7 +155,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <OTPInput label="Small" size="$2" length={6} />
-      <OTPInput label="Medium (default)" size="$3" length={6} />
+      <OTPInput label="Medium ($3)" size="$3" length={6} />
       <OTPInput label="Large" size="$4" length={6} />
     </YStack>
   ),