@multiplatform.one/forms 7.10.0 → 7.15.0

package/src/fields/Select/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { KeyboardEvent, MouseEvent, ReactNode, RefObject, UIEvent } from "react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
 import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
@@ -19,6 +20,7 @@ import {
   useGlyphColor,
   useResolvedKnobs,
   wasKeyboardFocus,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
 // `react-native` aliases to react-native-web on the web, and RNW 0.21 exports
@@ -51,6 +53,7 @@ import {
   panelViewportPadding,
   useViewportGtSm,
 } from "../../FloatingPanel";
+import { PanelPortal } from "../../FloatingPanel/PanelPortal";
 import { zIndex } from "../../shared/zIndex";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
@@ -454,7 +457,7 @@ const SelectItem = memo(function SelectItem({
                 : formInputColors.background.focus,
             },
           })}
-      {...(ctx.knobProps.transition ? { transition: ctx.knobProps.transition } : undefined)}
+      {...transitionProps(ctx.knobProps.transition)}
     >
       <Text
         fontFamily={ctx.knobProps.body.fontFamily}
@@ -506,6 +509,7 @@ function FloatingSelectCore({
   selectedOrder,
   dismissible,
 }: FloatingSelectCoreProps) {
+  const hydrationTouch = useTouchSurface();
   const inTableCell = useIsInTableCell();
   const describedBy = useFieldDescribedBy();
   const glyphColor = useGlyphColor();
@@ -1048,7 +1052,9 @@ function FloatingSelectCore({
               flexWrap="nowrap"
               gap="$1.5"
               alignItems="center"
-              maxHeight={getFieldHeight(knobProps.sizeToken as SizeTokens) * 0.75}
+              maxHeight={
+                getFieldHeight(knobProps.sizeToken as SizeTokens, 1, hydrationTouch) * 0.75
+              }
               overflow="hidden"
               overflowX="auto"
             >
@@ -1085,7 +1091,7 @@ function FloatingSelectCore({
       </InputParts.Box>
 
       {panel.mounted && (
-        <>
+        <PanelPortal anchor={panel.triggerRef.current}>
           <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
             <YStack
               outlineWidth={0}
@@ -1207,7 +1213,7 @@ function FloatingSelectCore({
               />
             </YStack>
           </FloatingFocusManager>
-        </>
+        </PanelPortal>
       )}
     </>
   );
@@ -1232,6 +1238,7 @@ function NativeSelectCore({
   dismissible,
   native,
 }: FloatingSelectCoreProps) {
+  const hydrationTouch = useTouchSurface();
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
   const inTableCell = useIsInTableCell();
@@ -1615,7 +1622,9 @@ function NativeSelectCore({
                 flexWrap="nowrap"
                 gap="$1.5"
                 alignItems="center"
-                maxHeight={getFieldHeight(knobProps.sizeToken as SizeTokens) * 0.75}
+                maxHeight={
+                  getFieldHeight(knobProps.sizeToken as SizeTokens, 1, hydrationTouch) * 0.75
+                }
                 overflow="hidden"
                 overflowX="auto"
               >

package/src/fields/Signature/index.tsx

@@ -1,8 +1,10 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   wasKeyboardFocus,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import type { PointerEvent, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -304,6 +306,7 @@ function SignatureCanvasImpl({
   required,
   hasError,
 }: SignatureCanvasProps) {
+  const hydrationTouch = useTouchSurface();
   const [strokes, setStrokes] = useState<Stroke[]>([]);
   const [currentStroke, setCurrentStroke] = useState<Stroke | null>(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -315,7 +318,7 @@ function SignatureCanvasImpl({
   const describedBy = useFieldDescribedBy();
   const aspectRatio = width / height;
   const resolvedSizeToken = (size ?? knobProps.sizeToken) as SizeTokens;
-  const minHeightPx = getFieldHeight(resolvedSizeToken, signatureHeightRows);
+  const minHeightPx = getFieldHeight(resolvedSizeToken, signatureHeightRows, hydrationTouch);
   const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
   const canDraw = !disabled && !readOnly;
   const canFocus = !disabled;
@@ -537,7 +540,7 @@ function SignatureCanvasImpl({
         borderColor: error ? formCommonColors.error : formInputColors.border.focus,
       })}
       {...frameRing}
-      {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
+      {...transitionProps(knobProps.transition)}
       focusable={canFocus}
       tabIndex={isWeb ? (canFocus ? 0 : -1) : undefined}
       onFocus={() => {
@@ -672,6 +675,7 @@ export function Signature({
   skeleton,
   compact,
 }: SignatureProps) {
+  const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
@@ -680,7 +684,7 @@ export function Signature({
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const tamaguiTheme = useTamaguiTheme();
   const resolvedSizeToken = (size ?? knobProps.sizeToken) as SizeTokens;
-  const minHeightPx = getFieldHeight(resolvedSizeToken, signatureHeightRows);
+  const minHeightPx = getFieldHeight(resolvedSizeToken, signatureHeightRows, hydrationTouch);
   const padHeight = height ?? minHeightPx;
   const padWidth = width ?? Math.round(padHeight * signatureAspect);
 

package/src/fields/Slider/index.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+import { useTouchSurface, isTouchSurface } from "@multiplatform.one/theme";
+import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
 import type { AnyFormApi } from "../../types";
 import type { LabelProps, SizeTokens } from "tamagui";
 import {
@@ -75,7 +76,11 @@ const getTrackProps = (outlined: boolean | undefined, borderRadius: number) => (
 
 /** Single source for the thumb size: styled default + native jump-delta math. */
 const THUMB_SIZE_TOKEN = "$1.5";
-const THUMB_RENDER_SIZE = getSliderThumbRenderSize(THUMB_SIZE_TOKEN);
+const THUMB_RENDER_SIZE = getSliderThumbRenderSize(
+  THUMB_SIZE_TOKEN,
+  undefined,
+  !isWeb && isTouchSurface(),
+);
 
 const SliderThumbFrame = styled(TamaguiSlider.Thumb, {
   size: THUMB_SIZE_TOKEN,
@@ -280,7 +285,8 @@ function SliderControl({
   // UNSHIFTED size token and wins over the size variant's shift -1; see
   // getSliderThumbRenderSize). Using the shifted token here put the base-x
   // replica 1-4pt off the true rendered position.
-  const thumbSize = useMemo(() => getSliderThumbRenderSize(THUMB_SIZE_TOKEN), []);
+  const hydrationTouch = useTouchSurface();
+  const thumbSize = getSliderThumbRenderSize(THUMB_SIZE_TOKEN, undefined, hydrationTouch);
   const jumpMotionEnabled =
     !isWeb && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl";
   const jumpMotion = useSliderJumpMotion({
@@ -381,7 +387,7 @@ function SliderControl({
 
   const motionTransition = animateJump ? transitionToken : undefined;
   const thumbRadius = resolveRadiusClass("BINARY", radiusStop, {
-    heightPx: THUMB_RENDER_SIZE,
+    heightPx: thumbSize,
   });
 
   // `"none"` (not omitted): Tamagui styled defaults / animateOnly can leave a
@@ -613,6 +619,8 @@ function SliderControl({
             return elevationWrapperProps.elevation && isWeb ? (
               <View key={thumbIndex} {...elevationWrapperProps} borderRadius={thumbRadius}>
                 <SliderThumbFrame
+                  width={thumbSize}
+                  height={thumbSize}
                   index={thumbIndex}
                   circular={false}
                   borderRadius={thumbRadius}
@@ -626,6 +634,8 @@ function SliderControl({
               </View>
             ) : (
               <SliderThumbFrame
+                width={thumbSize}
+                height={thumbSize}
                 key={thumbIndex}
                 index={thumbIndex}
                 circular={false}

package/src/fields/Slider/jumpMotion.ts

@@ -127,8 +127,12 @@ export function hasMinStepsBetween(values: number[], minStepsBetweenValues: numb
  * (`$4` is 32, not 44). Radius is not on the recipe; circular vs square
  * does not change diameter.
  */
-export function getSliderThumbRenderSize(sizeToken: string, _circular?: boolean): number {
-  return sizeRecipeForToken(sizeToken, { touch: isTouchSurface() }).height;
+export function getSliderThumbRenderSize(
+  sizeToken: string,
+  _circular?: boolean,
+  touch = isTouchSurface(),
+): number {
+  return sizeRecipeForToken(sizeToken, { touch }).height;
 }
 
 /**

package/src/fields/Stepper/Stepper.spec.tsx

@@ -320,3 +320,33 @@ describe("Stepper", () => {
     });
   });
 });
+
+describe("Stepper currency (MPO-221)", () => {
+  const glyph = (container: HTMLElement) =>
+    container.querySelector("[data-testid='stepper-currency']") as HTMLElement | null;
+  const input = (container: HTMLElement) =>
+    container.querySelector("input[data-stepper-value]") as HTMLInputElement;
+
+  it("writes the currency glyph beside the value and aligns the value to the end", () => {
+    const { container } = renderWithProviders(
+      <Stepper aria-label="Price" currency="USD" defaultValue={12} showButtons={false} />,
+    );
+    expect(glyph(container)?.textContent).toBe("$");
+    expect(input(container).className).toMatch(/_ta-right/);
+  });
+
+  it("resolves a Frappe-style symbol to its glyph", () => {
+    const { container } = renderWithProviders(
+      <Stepper aria-label="Price" currency="₹" defaultValue={12} showButtons={false} />,
+    );
+    expect(glyph(container)?.textContent).toBe("₹");
+  });
+
+  it("without a currency the value stays centred and no glyph renders", () => {
+    const { container } = renderWithProviders(
+      <Stepper aria-label="Qty" defaultValue={12} showButtons={false} />,
+    );
+    expect(glyph(container)).toBeNull();
+    expect(input(container).className).toMatch(/_ta-center/);
+  });
+});

package/src/fields/Stepper/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { CaretDownIcon, CaretUpIcon, MinusIcon, PlusIcon } from "@phosphor-icons/react";
 import {
@@ -10,9 +11,9 @@ import {
   useState,
 } from "react";
 import { Pressable } from "react-native";
-import { isWeb, useProps, View } from "tamagui";
+import { isWeb, Text, useProps, View } from "tamagui";
 import { Input as TamaguiInput } from "tamagui";
-import { isTouchSurface, sizeRecipeForToken, useGlyphColor } from "@multiplatform.one/theme";
+import { currencyAffix, sizeRecipeForToken, useGlyphColor } from "@multiplatform.one/theme";
 import { resolveStepperPlacement } from "./resolveStepperPlacement";
 
 export { resolveStepperPlacement, type StepperButtonPosition } from "./resolveStepperPlacement";
@@ -125,6 +126,12 @@ export type StepperProps<
      * coerced to `both` on touch — LC-84).
      */
     buttonPosition?: "left" | "right" | "both";
+    /**
+     * ISO 4217 code or Frappe-style symbol. Writes the currency glyph beside
+     * the value on the locale's side and puts the value on the numeric
+     * (end) alignment.
+     */
+    currency?: string;
     allowEmpty?: boolean;
     placeholder?: string;
     inputProps?: Omit<InputProps, "value" | "onChangeText" | "ref">;
@@ -269,6 +276,7 @@ export function Stepper<
   TFormValidator = any,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(props: StepperProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const hydrationTouch = useTouchSurface();
   const {
     defaultValue,
     form,
@@ -300,17 +308,19 @@ export function Stepper<
     skeleton,
     compact,
     id: idProp,
+    currency,
     ...restProps
   } = useProps(props);
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const affix = currencyAffix(currency);
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const motionTransition = knobProps.transition as string | undefined;
   const controlSize = size || knobProps.sizeToken;
   // +/- glyphs are control-internal icons: the recipe's icon channel (LC-79).
   const iconPx = sizeRecipeForToken(String(controlSize)).iconSize;
   const glyphColor = useGlyphColor();
-  const placement = resolveStepperPlacement(buttonPosition, isTouchSurface());
+  const placement = resolveStepperPlacement(buttonPosition, hydrationTouch);
   const isControlled = valueProp !== undefined && !name;
 
   // Initialize inputValue from defaultValue for standalone mode
@@ -668,7 +678,7 @@ export function Stepper<
         data-stepper-live={live ? "true" : undefined}
         data-stepper-flash={valueFlash ? "true" : undefined}
         onChangeText={readOnly ? undefined : handleInputChange}
-        textAlign="center"
+        textAlign={affix ? "right" : "center"}
         opacity={valueMotionStyle.opacity}
         // LC-25 native value tween intentionally disabled: Tamagui's RN
         // animation driver crashes Hermes ("Cannot add new property
@@ -706,6 +716,24 @@ export function Stepper<
       />
     );
 
+    // T-VALUE: the glyph is part of the amount, never dimmed by textAccent.
+    const affixGlyph = affix ? (
+      <Text
+        data-testid="stepper-currency"
+        data-text-class="T-VALUE"
+        aria-hidden
+        alignSelf="center"
+        flexShrink={0}
+        paddingHorizontal="$1.5"
+        {...knobProps.body}
+        fontSize={sizeRecipeForToken(String(controlSize), { touch: hydrationTouch }).fontSize}
+        color="$color"
+        userSelect="none"
+      >
+        {affix.glyph}
+      </Text>
+    ) : null;
+
     // LC-71: ring rides Input.Box so +/− sit inside the perceived boundary.
     const box = (
       <InputParts.Box
@@ -723,7 +751,9 @@ export function Stepper<
       >
         {showSpin && placement === "both" ? decrementButton : null}
         {showSpin && placement === "left" ? spinColumn("start") : null}
+        {affix?.position === "leading" ? affixGlyph : null}
         {area}
+        {affix?.position === "trailing" ? affixGlyph : null}
         {showSpin && placement === "right" ? spinColumn("end") : null}
         {showSpin && placement === "both" ? incrementButton : null}
       </InputParts.Box>

package/src/fields/Switch/Switch.footprint.native.spec.tsx

@@ -0,0 +1,58 @@
+/**
+ * MPO-356 / LC-91 SWITCH-FOOTPRINT, native half. Clay's iPhone measured the
+ * default track at about 85 × 43 pt; a UISwitch is 51 × 31 with a 27 pt
+ * thumb. Mock tamagui's isWeb so the native branch runs on the test host
+ * renderer (RadioGroup.native.spec pattern) and read the painted track back.
+ */
+
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { Switch } from "./index";
+import { paintedBox, thumbOf, trackBox } from "../../../tests/switchFootprintProbe";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+afterEach(cleanup);
+
+function mount(overrides: Record<string, unknown> = {}, minTargetHeight?: number) {
+  const result = renderWithProviders(
+    <Preset overrides={{ elevation: "none", ...overrides }}>
+      <Switch
+        name="sw"
+        defaultValue={false}
+        aria-label="Notifications"
+        {...(minTargetHeight !== undefined && { minTargetHeight })}
+      />
+    </Preset>,
+  );
+  const frame = result.getSwitch() as HTMLElement;
+  expect(frame).toBeTruthy();
+  return { frame, track: trackBox(frame), thumb: paintedBox(thumbOf(frame)) };
+}
+
+describe("Switch footprint on native (MPO-356)", () => {
+  it("paints a UISwitch-sized 51 × 31 track with a 27 pt thumb at default knobs", () => {
+    const { track, thumb } = mount();
+    expect(track).toEqual({ width: 51, height: 31 });
+    expect(thumb).toEqual({ width: 27, height: 27 });
+  });
+
+  it("keeps the 51 × 31 paint inside a 44 pt press target on touch", () => {
+    const { frame, track } = mount({}, 44);
+    expect(paintedBox(frame)).toEqual({ width: 51, height: 44 });
+    expect(track).toEqual({ width: 51, height: 31 });
+  });
+
+  it("steps with the size knob at the UISwitch aspect", () => {
+    const small = mount({ size: "small" }).track;
+    cleanup();
+    const large = mount({ size: "large" }).track;
+    expect(small).toEqual({ width: 41, height: 25 });
+    expect(large).toEqual({ width: 61, height: 37 });
+  });
+});

package/src/fields/Switch/Switch.footprint.spec.tsx

@@ -0,0 +1,79 @@
+/**
+ * MPO-356 / LC-91 SWITCH-FOOTPRINT, web half. At default knobs the painted
+ * track is Tamagui's own Switch: `getSwitchHeight` = size × 0.65, width 2×,
+ * so `$4` paints 58 × 29, not the 86 × 44 control row it used to fill.
+ * The size knob keeps stepping it along Tamagui's ladder.
+ */
+
+import { cleanup } from "@testing-library/react";
+import { Switch as TamaguiSwitch } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { Switch } from "./index";
+import { paintedBox, thumbOf, trackBox } from "../../../tests/switchFootprintProbe";
+
+afterEach(cleanup);
+
+const LADDER = [
+  { knob: "small", token: "$3" },
+  { knob: "medium", token: "$4" },
+  { knob: "large", token: "$5" },
+] as const;
+
+function ours(size?: (typeof LADDER)[number]["knob"]) {
+  const result = renderWithProviders(
+    <Preset overrides={{ elevation: "none", ...(size && { size }) }}>
+      <Switch name="sw" defaultValue={false} aria-label="Notifications" />
+    </Preset>,
+  );
+  const frame = result.getSwitch() as HTMLElement;
+  expect(frame).toBeTruthy();
+  return { track: trackBox(frame), thumb: paintedBox(thumbOf(frame)) };
+}
+
+function stock(token: string) {
+  const result = renderWithProviders(
+    <TamaguiSwitch size={token as never} aria-label="Stock">
+      <TamaguiSwitch.Thumb />
+    </TamaguiSwitch>,
+  );
+  const frame = result.getSwitch() as HTMLElement;
+  expect(frame).toBeTruthy();
+  return { track: paintedBox(frame), thumb: paintedBox(thumbOf(frame)) };
+}
+
+describe("Switch footprint on web (MPO-356)", () => {
+  it("paints Tamagui's 58 × 29 track at default knobs, not the 44 px control row", () => {
+    const { track } = ours();
+    expect(track).toEqual({ width: 58, height: 29 });
+  });
+
+  it("the default track is the stock Tamagui $true Switch", () => {
+    expect(ours().track).toEqual(stock("$true").track);
+  });
+
+  it("restores the 44 px press target on a fine pointer through the house slop channel (LC-54)", () => {
+    const result = renderWithProviders(
+      <Switch name="sw" defaultValue={false} aria-label="Notifications" />,
+    );
+    const frame = result.getSwitch() as HTMLElement;
+    const outset = Number(frame.getAttribute("data-mp-press-slop"));
+    expect(trackBox(frame).height + outset * 2).toBeGreaterThanOrEqual(44);
+    expect(frame.getAttribute("data-mp-press-axis")).toBe("vertical");
+  });
+
+  for (const { knob, token } of LADDER) {
+    it(`size ${knob} steps with Tamagui's ${token} Switch and keeps its 2:1 track`, () => {
+      const { track, thumb } = ours(knob);
+      const reference = stock(token);
+      expect(track).toEqual(reference.track);
+      expect(track.width).toBe(track.height * 2);
+      // Tamagui's thumb fills the track; ours fills it inside the 1 px hairline.
+      expect(thumb).toEqual({
+        width: reference.thumb.width - 2,
+        height: reference.thumb.height - 2,
+      });
+    });
+  }
+});

package/src/fields/Switch/Switch.radius.spec.tsx

@@ -16,12 +16,14 @@ const SCHEMES = ["light", "dark"] as const;
 
 afterEach(cleanup);
 
+const atomPx = (value: string) => Number(value.replace("--", "."));
+
 function paintedHeight(el: HTMLElement): number {
   const rect = el.getBoundingClientRect().height;
   if (rect > 0) return rect;
   for (const cls of String(el.className || "").split(/\s+/)) {
-    const m = /^_h-(\d+(?:\.\d+)?)px$/.exec(cls);
-    if (m) return Number(m[1]);
+    const m = /^_h-(\d+(?:--\d+)?)px$/.exec(cls);
+    if (m) return atomPx(m[1]);
   }
   if (el.style.height) {
     const n = parseFloat(el.style.height);
@@ -31,14 +33,17 @@ function paintedHeight(el: HTMLElement): number {
   return cs > 0 ? cs : 0;
 }
 
-/** Rest atom is `_btlr-22px`; hover/press/focus are `_btlr-0hover-22px` / `_btlr-0active-22px` / `_btlr-0focus-22px`. */
+/**
+ * Rest atom is `_btlr-22px`; hover/press/focus are `_btlr-0hover-22px` / `_btlr-0active-22px` / `_btlr-0focus-22px`.
+ * An odd-height part rounds to a half pixel, which tamagui writes with `--` for the dot (`_btlr-14--5px`).
+ */
 function paintedRadius(el: HTMLElement, state?: "hover" | "active" | "focus"): number {
   const className = String(el.className || "");
   const re = state
-    ? new RegExp(`_btlr-0${state}-(\\d+(?:\\.\\d+)?)px`)
-    : /(?:^|\s)_btlr-(\d+(?:\.\d+)?)px(?:\s|$)/;
+    ? new RegExp(`_btlr-0${state}-(\\d+(?:--\\d+)?)px`)
+    : /(?:^|\s)_btlr-(\d+(?:--\d+)?)px(?:\s|$)/;
   const m = re.exec(className);
-  if (m) return Number(m[1]);
+  if (m) return atomPx(m[1]);
   if (!state && el.style.borderRadius) {
     const n = parseFloat(el.style.borderRadius);
     if (Number.isFinite(n)) return n;
@@ -112,3 +117,29 @@ describe("Switch BINARY radius (thumb and track are one member)", () => {
     });
   }
 });
+
+describe("Switch declares its BINARY class for the constraint audit", () => {
+  it("thumb and track carry data-radius-resolution at every stop", () => {
+    for (const stop of STOPS) {
+      const result = mountSwitch(stop, "light");
+      const { track, thumb } = parts(result);
+      expect(track.getAttribute("data-radius-resolution")).toBe("BINARY");
+      expect(thumb.getAttribute("data-radius-resolution")).toBe("BINARY");
+      result.unmount();
+    }
+  });
+
+  it("a consumer radius override drops the declaration", () => {
+    const result = renderWithProviders(
+      <Switch
+        name="sw-override"
+        defaultValue={false}
+        aria-label="Notifications"
+        switchProps={{ borderRadius: 9 } as never}
+      />,
+    );
+    const { track, thumb } = parts(result);
+    expect(track.hasAttribute("data-radius-resolution")).toBe(false);
+    expect(thumb.hasAttribute("data-radius-resolution")).toBe(false);
+  });
+});

package/src/fields/Switch/footprint.ts

@@ -0,0 +1,45 @@
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { isWeb } from "tamagui";
+
+/**
+ * LC-91 SWITCH-FOOTPRINT (MPO-356). The recipe height is the control ROW and
+ * the press target (44 at `$4`); the painted switch is a glyph inside it, so
+ * it takes the platform switch's own fraction of that height:
+ *
+ * - web: Tamagui's Switch, `getSwitchHeight` = size × 0.65 at a 2:1 aspect,
+ *   thumb filling the track (tamagui.dev `$4` = 58 × 29, thumb 29).
+ * - native: UISwitch, 51 × 31 pt with a 27 pt thumb (2 pt rim gutter) at the
+ *   44 medium stop. Material 3's 52 × 32 sits inside the same 10 percent.
+ *
+ * Painting the whole recipe height is what made `$4` an 86 × 44 slab once
+ * MPO-13 lifted the recipe from 32 to Tamagui's 44.
+ */
+const webSwitch = { heightRatio: 0.65, aspect: 2, rimGutter: 0 };
+const nativeSwitch = { heightRatio: 31 / 44, aspect: 51 / 31, rimGutter: 2 };
+
+export type SwitchFootprint = {
+  trackHeight: number;
+  trackWidth: number;
+  /** Track height inside its border: the lane the thumb rides in. */
+  thumbSlot: number;
+  thumbInset: number;
+  thumbSize: number;
+  /** Thumb travel from off to on. */
+  travel: number;
+};
+
+export function switchFootprint(sizeToken: string, borderWidth: number): SwitchFootprint {
+  const platform = isWeb ? webSwitch : nativeSwitch;
+  const trackHeight = Math.round(sizeRecipeForToken(sizeToken).height * platform.heightRatio);
+  const trackWidth = Math.round(trackHeight * platform.aspect);
+  const thumbSlot = trackHeight - borderWidth * 2;
+  const thumbInset = Math.max(0, platform.rimGutter - borderWidth);
+  return {
+    trackHeight,
+    trackWidth,
+    thumbSlot,
+    thumbInset,
+    thumbSize: thumbSlot - thumbInset * 2,
+    travel: trackWidth - borderWidth * 2 - thumbSlot,
+  };
+}