@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/fields/ToggleGroup/ToggleGroup.spec.tsx

@@ -225,4 +225,31 @@ describe("ToggleGroup", () => {
       expect(selected.className).not.toContain("_bg-color8");
     });
   });
+
+  describe("segmented anatomy (LC-71 / LC-72)", () => {
+    it("does not paint a border on every segment — selected is fill, idle is chromeless", () => {
+      const { container } = renderWithHouseThemes(
+        <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
+      );
+      const segments = [...container.querySelectorAll('[data-state]')] as HTMLElement[];
+      expect(segments).toHaveLength(3);
+      for (const segment of segments) {
+        expect(segment.className).toMatch(/_bw-0\b|_borderw-0\b|bw-0/);
+        expect(segment.className).not.toMatch(/_bw-1\b/);
+      }
+    });
+
+    it("squares interior corners and rounds only the outer edges (LC-72)", () => {
+      const { container } = renderWithHouseThemes(
+        <ToggleGroup label="Alignment" options={options} defaultValue="center" />,
+      );
+      const segments = [...container.querySelectorAll('[data-state]')] as HTMLElement[];
+      expect(segments).toHaveLength(3);
+      const [first, middle, last] = segments;
+      // Tamagui emits per-corner radius classes from stackRadiusProps.
+      expect(middle.className).toMatch(/bssr-0|bstr-0|borderStartStartRadius-0/i);
+      expect(first.className).not.toEqual(middle.className);
+      expect(last.className).not.toEqual(middle.className);
+    });
+  });
 });

package/src/fields/ToggleGroup/ToggleGroup.stories.tsx

@@ -181,6 +181,21 @@ export const WithError: Story = {
   },
 };
 
+export const Vertical: Story = {
+  args: {
+    label: "Density",
+    helperText: "Stacked segments keep square interior seams",
+    type: "single",
+    orientation: "vertical",
+    defaultValue: "comfortable",
+    options: [
+      { label: "Compact", value: "compact" },
+      { label: "Comfortable", value: "comfortable" },
+      { label: "Spacious", value: "spacious" },
+    ],
+  },
+};
+
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>

package/src/fields/ToggleGroup/index.tsx

@@ -1,9 +1,15 @@
 import type { ReactNode } from "react";
 import { useState } from "react";
 import {
+  MIN_PRESS_TARGET,
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
+  getGroupPosition,
+  hairline,
+  hairlineWidth,
   keyboardFocusRingProps,
+  pressTargetHitSlop,
+  stackRadiusProps,
   useAccentTintedSurface,
   useReadableTextOn,
   wasKeyboardFocus,
@@ -20,112 +26,52 @@ import {
 } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formButtonColors, formCommonColors } from "../../shared/colorRamps";
+import { formButtonColors, formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { warnBareDisabled } from "../../shared/devWarn";
 import {
   getElevationWrapperProps,
   getFieldError,
+  getFieldHeight,
   mergeFieldHandler,
   stripRadiusFromStateProps,
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
 
-// NOTE: no `active` variant here — the selected fill is runtime-resolved
-// (accent-tinted surface, LC-05/D-01), so it rides direct props re-applied
-// through hover/press. A static variant would expand at its key position and
-// paint its stale value OVER those direct props (the exact drift the LC-40
-// wash comment below records for the disabled tier).
+// Headless Tamagui item: the stock ToggleFrame paints borderWidth:1 +
+// margin:-1 on EVERY segment (collapsed-border ButtonGroup). Segmented
+// controls (Apple / Carbon / Polaris, LC-71) mark selection with FILL on
+// the chosen item only; the frame owns the one border (R-OUTER).
 const ToggleItemFrame = styled(TamaguiToggleGroup.Item, {
+  unstyled: true,
   cursor: "pointer",
   userSelect: "none",
-  backgroundColor: formButtonColors.background.base,
-  borderColor: formButtonColors.border.base,
-  borderWidth: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexDirection: "row",
+  backgroundColor: "transparent",
+  borderColor: "transparent",
+  borderWidth: 0,
+  margin: 0,
+  outlineWidth: 0,
+  position: "relative",
+  focusStyle: { outlineWidth: 0, backgroundColor: "transparent" },
+  focusVisibleStyle: { outlineWidth: 0 },
   hoverStyle: {
     backgroundColor: formButtonColors.background.hover,
   },
   pressStyle: {
     backgroundColor: formButtonColors.background.active,
   },
-  variants: {
-    outlined: {
-      true: {
-        backgroundColor: "transparent",
-        hoverStyle: {
-          backgroundColor: "transparent",
-          borderColor: formButtonColors.border.hover,
-        },
-        pressStyle: {
-          backgroundColor: "transparent",
-          borderColor: formButtonColors.border.active,
-        },
-      },
-    },
-  } as const,
 });
 
-/** Returns position-aware border radius so items connect as a segmented group. */
-function getGroupedBorderRadius(
-  index: number,
-  count: number,
-  orientation: "horizontal" | "vertical",
-  radius: string | number | undefined,
-): Record<string, unknown> {
-  const zero = 0;
-  if (count <= 1 || radius === 0 || radius === "$0") {
-    return { borderRadius: radius };
-  }
-  const isFirst = index === 0;
-  const isLast = index === count - 1;
-  if (isFirst && isLast) return { borderRadius: radius };
-  // Logical (start/end) corners so RTL flips the rounding with the items —
-  // physical corners would land rounded edges on interior seams (mirrors
-  // the ControlGroup fix).
-  if (orientation === "horizontal") {
-    return isFirst
-      ? {
-          borderStartStartRadius: radius,
-          borderEndStartRadius: radius,
-          borderStartEndRadius: zero,
-          borderEndEndRadius: zero,
-        }
-      : isLast
-        ? {
-            borderStartEndRadius: radius,
-            borderEndEndRadius: radius,
-            borderStartStartRadius: zero,
-            borderEndStartRadius: zero,
-          }
-        : {
-            borderRadius: zero,
-            borderStartStartRadius: zero,
-            borderStartEndRadius: zero,
-            borderEndStartRadius: zero,
-            borderEndEndRadius: zero,
-          };
-  }
-  return isFirst
-    ? {
-        borderStartStartRadius: radius,
-        borderStartEndRadius: radius,
-        borderEndStartRadius: zero,
-        borderEndEndRadius: zero,
-      }
-    : isLast
-      ? {
-          borderEndStartRadius: radius,
-          borderEndEndRadius: radius,
-          borderStartStartRadius: zero,
-          borderStartEndRadius: zero,
-        }
-      : {
-          borderRadius: zero,
-          borderStartStartRadius: zero,
-          borderStartEndRadius: zero,
-          borderEndStartRadius: zero,
-          borderEndEndRadius: zero,
-        };
+/** State recipes may carry border/outline; segments accept FILL only (LC-71). */
+function segmentFillState(
+  props: { backgroundColor?: unknown } | undefined,
+): { backgroundColor: unknown } | undefined {
+  const backgroundColor = props?.backgroundColor;
+  return backgroundColor != null ? { backgroundColor } : undefined;
 }
 
 function ToggleItemWithElevation({
@@ -237,15 +183,8 @@ export function ToggleGroup({
     compact,
   });
   // LC-05 / D-01: selection is ONE accent language across every choice-control
-  // family — this selected segment filled with the neutral `$color8` tier, the
-  // catalog's last ink/neutral-marked selection surface. Segmented-control
-  // STRENGTH is pinned at TINTED (the D-01 ViewSwitcher rider — not the solid
-  // an accent CTA takes), so the fill is the accent ramp's surface tier
-  // mirrored by scheme, the same channel ViewSwitcher resolves. When the
-  // accent ramp is absent (tint sub-themes) the neutral tier stays as the
-  // declared fallback so selection never goes invisible.
-  // UX-018 / Axiom 15 kept: the label is the paper/ink anchor luminance-picked
-  // for the ACTUAL fill, never an assumed scheme token.
+  // family. Segmented-control STRENGTH is pinned at TINTED (the D-01
+  // ViewSwitcher rider — not the solid an accent CTA takes).
   const selectedTint = useAccentTintedSurface();
   const selectedFill = selectedTint ?? formButtonColors.border.active;
   const onSelectedLabel = useReadableTextOn(selectedFill);
@@ -259,6 +198,10 @@ export function ToggleGroup({
   if (isWeb) ensureKeyboardModalityTracking();
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  const sz = knobProps.sizeToken;
+  const padH = sz === "$3" ? ("$2" as const) : sz === "$5" ? ("$4" as const) : ("$3" as const);
+  const padV = sz === "$3" ? ("$1" as const) : sz === "$5" ? ("$2" as const) : ("$1.5" as const);
+  const segmentHitSlop = pressTargetHitSlop(getFieldHeight(sz));
 
   // DG-ST-03: disabled groups/items explain themselves or DEV-warn.
   warnBareDisabled({
@@ -297,16 +240,24 @@ export function ToggleGroup({
   const optionDisabledByValue = (val: string) =>
     Boolean(options?.find((o) => o.value === val)?.disabled);
 
-  // Render skeleton placeholder
+  // Render skeleton placeholder — fused R-OUTER row, square interiors (LC-20 / LC-72).
   if (skeleton) {
     const optionCount = options?.length ?? 3;
+    const segmentH = getFieldHeight(knobProps.sizeToken);
+    const segmentW = Math.round(segmentH * 1.5);
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <XStack gap={0} alignSelf="flex-start">
+        <View
+          flexDirection={orientation === "vertical" ? "column" : "row"}
+          alignSelf="flex-start"
+          overflow="hidden"
+          {...knobProps.borderRadius}
+          {...knobProps.inputSurface}
+        >
           {Array.from({ length: optionCount }, (_, i) => (
-            <Skeleton key={i} variant="rounded" width={60} height={knobProps.sizeToken} />
+            <Skeleton key={i} variant="rectangular" width={segmentW} height={segmentH} />
           ))}
-        </XStack>
+        </View>
       </FieldLayout>
     );
   }
@@ -339,19 +290,22 @@ export function ToggleGroup({
           ? firstSelectedEnabled
           : options.findIndex((o) => !(disabled || o.disabled));
     return options.map((option, index) => {
-      const groupedRadius = getGroupedBorderRadius(index, count, orientation, radius);
+      const groupedRadius = stackRadiusProps(getGroupPosition(index, count), radius, orientation);
       const selected = isSelected(option.value);
+      const nextSelected = index < count - 1 && isSelected(options[index + 1]!.value);
       const itemDisabled = Boolean(disabled || option.disabled);
       const itemDescribedBy = option.disabled ? itemReasonIdFor(option.disabledReason) : undefined;
       const isTabStop = index === tabStopIndex;
-      // The accent-tinted selected fill (border rides the fill, as the
-      // neutral chip's did) — re-applied through hover/press below so the
-      // neutral state layer never paints over the selection mark (the LC-05
-      // rule the checked Switch track and ViewSwitcher chip already follow).
+      const showSeam = index < count - 1 && !selected && !nextSelected;
+      // Selected = FILL. Border stays transparent — never a ring around the
+      // chosen segment, and never a border on siblings (LC-71 / Apple / Carbon).
       const activeColors = {
         backgroundColor: selectedFill,
-        borderColor: selectedFill,
+        borderColor: "transparent",
+        borderWidth: 0,
       };
+      const hoverFill = segmentFillState(control.hoverKnobProps);
+      const pressFill = segmentFillState(control.pressKnobProps);
 
       return (
         <ToggleItemWithElevation
@@ -359,25 +313,28 @@ export function ToggleGroup({
           elevationWrapperProps={elevationWrapperProps}
           groupedRadius={groupedRadius}
           value={option.value}
+          unstyled
           {...(isWeb ? { tabIndex: isTabStop ? 0 : -1 } : undefined)}
           size={knobProps.sizeToken}
           width="auto"
           height="auto"
-          minHeight={knobProps.sizeToken}
+          minHeight={MIN_PRESS_TARGET}
+          hitSlop={segmentHitSlop}
           flexShrink={0}
-          flexGrow={orientation === "horizontal" ? 1 : 0}
-          paddingHorizontal="$2"
-          borderWidth={knobProps.borderRadius.borderWidth}
-          outlined={knobProps.outlined}
+          flexGrow={1}
+          flexBasis={isWeb ? 0 : undefined}
+          paddingHorizontal={padH}
+          paddingVertical={padV}
+          gap="$1.5"
+          borderWidth={0}
+          borderColor="transparent"
+          margin={0}
           transition={knobProps.transition}
           disabled={itemDisabled}
           {...(itemDescribedBy ? { "aria-describedby": itemDescribedBy } : undefined)}
-          // LC-40 DISABLED-VISIBLE (was DG-ST-03 hand-roll): segments are
-          // text-bearing chrome — a disabled segment drops the live selected
-          // fill entirely, so the wash owns the chrome and the label pins to
-          // the lowest AA tier below. A SELECTED disabled segment takes the
-          // recipe's stronger selected tier so the chosen option stays
-          // visible (Axiom 6), not aria-only.
+          // LC-40 DISABLED-VISIBLE: a disabled segment drops the live selected
+          // fill so the wash owns the chrome; a SELECTED disabled segment takes
+          // the recipe's stronger selected tier (Axiom 6).
           {...(selected && !itemDisabled ? activeColors : undefined)}
           {...(itemDisabled
             ? selected
@@ -385,28 +342,17 @@ export function ToggleGroup({
               : disabledState.surfaceKnobProps
             : undefined)}
           {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
-          // LC-40: no hover/press feedback while disabled — the live styles
-          // repainted the active colors over the wash (dishonest
-          // pressability signal; hovered selected segments fell below AA).
-          // Pinning the wash beats the item's intrinsic hover theme too.
           hoverStyle={
             itemDisabled
               ? selected
                 ? { ...disabledState.selectedSurfaceKnobProps }
                 : { ...disabledState.surfaceKnobProps }
               : {
-                  ...stripRadiusFromStateProps(control.hoverKnobProps),
                   ...(selected
                     ? activeColors
-                    : knobProps.outlined
-                      ? {
-                          backgroundColor: "transparent",
-                          borderColor: formButtonColors.border.hover,
-                        }
-                      : {
-                          backgroundColor: formButtonColors.background.hover,
-                          borderColor: formButtonColors.border.base,
-                        }),
+                    : (hoverFill ?? {
+                        backgroundColor: formButtonColors.background.hover,
+                      })),
                 }
           }
           pressStyle={
@@ -415,32 +361,30 @@ export function ToggleGroup({
                 ? { ...disabledState.selectedSurfaceKnobProps }
                 : { ...disabledState.surfaceKnobProps }
               : {
-                  ...stripRadiusFromStateProps(control.pressKnobProps),
                   ...(selected
                     ? activeColors
-                    : knobProps.outlined
-                      ? {
-                          backgroundColor: "transparent",
-                          borderColor: formButtonColors.border.active,
-                        }
-                      : {
-                          backgroundColor: formButtonColors.background.active,
-                          borderColor: formButtonColors.border.base,
-                        }),
+                    : (pressFill ?? {
+                        backgroundColor: formButtonColors.background.active,
+                      })),
                 }
           }
-          {...(stripRadiusFromStateProps(control.focusKnobProps) && {
-            focusStyle: {
-              borderColor: formButtonColors.border.active,
-              ...stripRadiusFromStateProps(control.focusKnobProps),
-            },
-          })}
-          {...(stripRadiusFromStateProps(control.focusVisibleKnobProps) && {
-            focusVisibleStyle: {
-              borderColor: formButtonColors.border.active,
-              ...stripRadiusFromStateProps(control.focusVisibleKnobProps),
-            },
-          })}
+          // Focus re-asserts the selected fill (the LC-05 rule hover/press
+          // above already follow, and the exact ViewSwitcher recipe):
+          // selecting a segment focuses it, and ToggleFrame's intrinsic
+          // active recipe carries a neutral `$backgroundActive` focus fill
+          // that would otherwise grey out the chip the moment it is chosen.
+          focusStyle={{
+            outlineWidth: 0,
+            borderColor: formButtonColors.border.active,
+            ...stripRadiusFromStateProps(control.focusKnobProps),
+            ...(selected && !itemDisabled ? activeColors : undefined),
+          }}
+          focusVisibleStyle={{
+            outlineWidth: 0,
+            borderColor: formButtonColors.border.active,
+            ...stripRadiusFromStateProps(control.focusVisibleKnobProps),
+            ...(selected && !itemDisabled ? activeColors : undefined),
+          }}
           {...(isWeb
             ? {
                 onFocus: () => {
@@ -467,10 +411,31 @@ export function ToggleGroup({
             hoverStyle={text.hoverKnobProps}
             pressStyle={text.pressKnobProps}
             focusStyle={text.focusKnobProps}
-            focusVisibleStyle={text.focusVisibleKnobProps}
           >
             {option.label}
           </SizableText>
+          {showSeam ? (
+            <View
+              pointerEvents="none"
+              position="absolute"
+              zIndex={1}
+              {...(orientation === "horizontal"
+                ? {
+                    ...hairline.vline,
+                    top: 8,
+                    bottom: 8,
+                    right: 0,
+                    flexBasis: hairlineWidth,
+                  }
+                : {
+                    ...hairline.line,
+                    left: 8,
+                    right: 8,
+                    bottom: 0,
+                    flexBasis: hairlineWidth,
+                  })}
+            />
+          ) : null}
         </ToggleItemWithElevation>
       );
     });
@@ -495,6 +460,15 @@ export function ToggleGroup({
       focusStyle: groupRing,
       focusVisibleStyle: groupRing,
       focusWithinStyle: groupRing,
+      // R-OUTER (LC-18, the ViewSwitcher recipe): the group frame owns the
+      // radius so its focus ring and the clipped segment fills follow the
+      // rounded container — without it the group ring paints a square around
+      // the rounded first/last segments. Clip so square interior seams stay
+      // inside the frame at high radius (DF-09); segment rings are inset
+      // (outlineOffset −2) so they survive the clip. Elevation is the one
+      // exception: per-segment shadow wrappers would be cut by the clip.
+      borderRadius: knobProps.borderRadius.borderRadius,
+      ...(elevationWrapperProps.elevation ? undefined : { overflow: "hidden" as const }),
       type,
       ...(type === "single" ? { disableDeactivation: true } : {}),
       ...(isControlled
@@ -535,7 +509,24 @@ export function ToggleGroup({
 
     return (
       <>
-        <TamaguiToggleGroup {...toggleProps}>
+        <TamaguiToggleGroup
+          {...toggleProps}
+          {...knobProps.borderRadius}
+          {...knobProps.inputSurface}
+          overflow="hidden"
+          backgroundColor={knobProps.outlined ? "transparent" : formInputColors.background.base}
+          {...(isWeb
+            ? {
+                display: "grid",
+                style: {
+                  gridAutoFlow: orientation === "vertical" ? "row" : "column",
+                  ...(orientation === "horizontal"
+                    ? { gridAutoColumns: "1fr" }
+                    : { gridAutoRows: "1fr" }),
+                },
+              }
+            : undefined)}
+        >
           {renderContent(resolvedValue ?? emptyValue)}
         </TamaguiToggleGroup>
         {uniqueItemReasons.map((reason, index) => (

package/src/formSpacing.ts

@@ -1,12 +1,7 @@
 /**
- * Form rhythm tokens (DG-FORM-06): section gap must exceed field gap.
- *
- * Mapped to Tamagui space tokens in this repo:
- * - `$4` ≈ 18px — field-to-field
- * - `$8` ≈ 46px — section-to-section (clearly larger)
- *
- * Fluent/Windows guidance is 24 / 48; our token ramp is the nearest encoding
- * without inventing raw pixel knobs.
+ * Fallback form rhythm tokens (DG-FORM-06). Prefer `knobProps.gap` /
+ * `knobProps.gapLg` (space/density) at the layout primitives — these
+ * constants are the medium-space snapshot, not a size mapping.
  */
 export const formFieldGap = "$4" as const;
 export const formSectionGap = "$8" as const;

package/src/index.ts

@@ -1,6 +1,7 @@
 // ── Core Form ────────────────────────────────────────────────
 export {
   Form,
+  FormActions,
   useFormContext,
   useFormValidate,
   useEffectiveValidateOn,
@@ -10,6 +11,7 @@ export {
 } from "./Form";
 export type {
   FormProps,
+  FormActionsProps,
   FormValidateOn,
   FormValidateContextValue,
   EffectiveValidateOn,

package/src/shared/devWarn.ts

@@ -8,6 +8,7 @@ export {
   warnBannedErrorWords,
   warnBareDisabled,
   warnPlaceholderAsLabel,
+  warnSizeRecipeEscape,
   warnPositiveTabIndex,
   warnSelectTooFewOptions,
   warnTooltipOnDisabled,

package/src/shared/focusManagement.ts

@@ -33,6 +33,7 @@
 
 import { useEffect, useRef, type RefObject } from "react";
 import { isWeb } from "tamagui";
+import { wasKeyboardFocus } from "@multiplatform.one/theme";
 
 const FOCUSABLE =
   'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -72,7 +73,12 @@ function restoreLater(
     if (!canUseDom()) return;
     const target = prevRef.current;
     if (!target || !target.isConnected) return;
-    if (focusIsDropped(insideRef?.current ?? null)) target.focus();
+    if (focusIsDropped(insideRef?.current ?? null)) {
+      target.focus({
+        preventScroll: true,
+        focusVisible: wasKeyboardFocus(),
+      } as FocusOptions);
+    }
   };
   // Exit animations unmount / park the overlay a few frames later; retry
   // after the typical exit window. All calls are idempotent.
@@ -109,7 +115,7 @@ export function useSheetModalFocus(open: boolean, frameRef: RefObject<HTMLElemen
       if (!canUseDom()) return;
       if (frame.contains(document.activeElement)) return;
       const first = frame.querySelector<HTMLElement>(FOCUSABLE);
-      (first ?? frame).focus({ preventScroll: true });
+      (first ?? frame).focus({ preventScroll: true, focusVisible: false } as FocusOptions);
     };
     // Both frames are tracked: cancelling only the outer one leaves the inner
     // callback live once the outer has already run.

package/src/shared/i18n.ts

@@ -0,0 +1,25 @@
+import * as ReactI18next from "react-i18next";
+
+/**
+ * react-i18next is an OPTIONAL peer: apps that never render the i18n-using
+ * fields may omit it entirely and tree-shake them away. When it is missing,
+ * the bundler substitutes an empty optional-peer-dep stub for the package —
+ * direct named imports would then surface as cryptic MISSING_EXPORT failures
+ * far from the cause. Route every usage through this namespace access
+ * instead, so omission stays warning-free for tree-shakers and fails loudly —
+ * naming the package and the fix — the moment an i18n-using field actually
+ * renders.
+ */
+export const useTranslation = ((...args: unknown[]) => {
+  const impl = (ReactI18next as { useTranslation?: (...args: unknown[]) => unknown })
+    .useTranslation;
+  if (typeof impl !== "function") {
+    throw new Error(
+      "[@multiplatform.one/forms] react-i18next is not installed, but a component that " +
+        "translates its built-in copy was rendered. Add react-i18next and i18next to your " +
+        "app's dependencies (they are optional peers so apps that never render these " +
+        "components can omit them).",
+    );
+  }
+  return impl(...args);
+}) as typeof ReactI18next.useTranslation;

package/src/shared/utils.ts

@@ -5,20 +5,19 @@ import type {
   KnobRecipe,
   ResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { isTouchSurface, sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { SizeTokens } from "tamagui";
-import { getVariableValue, isWeb } from "tamagui";
-import { getSize } from "@tamagui/get-token";
+import { isWeb } from "tamagui";
 import { useFormContext, useFormValidate } from "../Form";
 import { remapValidatorsForTiming, resolveEffectiveValidateOn } from "../Form/validateOn";
 import type { AnyFormApi, SimpleFieldApi } from "../types";
 
 /**
- * Resolve a size token to its pixel value, optionally multiplied by a row count.
- * e.g. getFieldHeight("$4") → 44, getFieldHeight("$4", 3) → 132
+ * Resolve a size token to its recipe height, optionally multiplied by a row count.
+ * e.g. getFieldHeight("$4") → 32, getFieldHeight("$4", 3) → 96
  */
 export function getFieldHeight(sizeToken: SizeTokens, rows = 1): number {
-  return Math.round(getVariableValue(getSize(sizeToken)) * rows);
+  return sizeRecipeForToken(String(sizeToken), { touch: isTouchSurface() }).height * rows;
 }
 
 function clampRadius(