@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/fields/Stepper/index.tsx

@@ -1,3 +1,5 @@
+import { motionDurationMs } from "@multiplatform.one/theme";
+import { cssAnimationConfig } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { CaretDownIcon, CaretUpIcon, MinusIcon, PlusIcon } from "@phosphor-icons/react";
@@ -38,18 +40,10 @@ const repeatDelay = 400;
 const repeatInterval = 80;
 const boundCaptionDuration = 2000;
 const LARGE_STEP_FACTOR = 10;
+/** A hugging stepper reserves room for at least this many characters. */
+const hugMinChars = 4;
 
 /** CSS timings for discrete value motion (mirrors theme animationConfig). */
-const stepperCssTimings: Record<string, string> = {
-  bouncy: "ease-in 200ms",
-  lazy: "ease-in 600ms",
-  slow: "ease-in 500ms",
-  medium: "ease-in-out 250ms",
-  quick: "ease-in 100ms",
-  tooltip: "ease-in 400ms",
-  snappy: "ease-out 80ms",
-  gentle: "ease-in-out 450ms",
-};
 
 const noButtonRing = {
   outlineWidth: 0,
@@ -132,6 +126,16 @@ export type StepperProps<
      * (end) alignment.
      */
     currency?: string;
+    /**
+     * Unit written after the value ("kg", "dm"). The value aligns to the
+     * end beside it, the way the currency glyph does.
+     */
+    unit?: string;
+    /**
+     * The field hugs its value: the input is as wide as the longest value
+     * the bounds allow (or a short default), not the column.
+     */
+    hug?: boolean;
     allowEmpty?: boolean;
     placeholder?: string;
     inputProps?: Omit<InputProps, "value" | "onChangeText" | "ref">;
@@ -141,8 +145,6 @@ export type StepperProps<
     value?: number | null;
     /** When true, renders a skeleton placeholder instead of the stepper */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
-    compact?: boolean;
   };
 
 function StepperSpinButton({
@@ -269,6 +271,11 @@ function StepperSpinButton({
   );
 }
 
+/** Native has no `ch`: a digit is about half the control's type size wide. */
+function hugNativeCharPx(controlSize: unknown): number {
+  return Math.ceil(sizeRecipeForToken(String(controlSize)).fontSize * 0.62);
+}
+
 export function Stepper<
   TParentData,
   TName extends DeepKeys<TParentData>,
@@ -306,16 +313,17 @@ export function Stepper<
     onChange,
     value: valueProp,
     skeleton,
-    compact,
     id: idProp,
     currency,
+    unit,
+    hug = false,
     ...restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
-  const affix = currencyAffix(currency);
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
+  const affix = unit ? { glyph: unit, position: "trailing" as const } : currencyAffix(currency);
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const motionTransition = knobProps.transition as string | undefined;
+  const motionTransition = knobProps.motion.control.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;
@@ -331,6 +339,17 @@ export function Stepper<
     }
     return "";
   });
+  const hugChars = hug
+    ? Math.max(
+        inputValue.length,
+        Math.max(
+          hugMinChars,
+          ...[min, max]
+            .filter((bound): bound is number => typeof bound === "number" && Number.isFinite(bound))
+            .map((bound) => String(Math.trunc(Math.abs(bound))).length + 1),
+        ) + (precision > 0 ? precision + 1 : 0),
+      )
+    : 0;
   // LC-25: discrete +/- taps tween the value chrome; hold-repeat / typing stay live.
   // Opacity (not transform) — Tamagui Input owns transform internally on web.
   const [valueFlash, setValueFlash] = useState(false);
@@ -372,8 +391,8 @@ export function Stepper<
     if (!motionTransition) return;
     setValueFlash(true);
     // Hold the dipped opacity long enough for the CSS transition to paint
-    // intermediates (quick = 100ms).
-    setTimeout(() => setValueFlash(false), 90);
+    // intermediates before restoring the resting opacity.
+    setTimeout(() => setValueFlash(false), motionDurationMs(motionTransition));
   }, [motionTransition]);
 
   const repeatIncrement = useRepeatAction(() => incrementRef.current(), repeatingRef);
@@ -572,7 +591,8 @@ export function Stepper<
     const atMax = currentValue !== null && boundsHi !== undefined && currentValue >= boundsHi;
     const live = repeatingRef.current || typingRef.current;
     const timing = motionTransition
-      ? (stepperCssTimings[motionTransition] ?? stepperCssTimings.quick)
+      ? (cssAnimationConfig[motionTransition as keyof typeof cssAnimationConfig] ??
+        cssAnimationConfig.quick)
       : undefined;
     // Prefer explicit CSS opacity transition — Tamagui `transition` on Input can
     // compile to `all` and fight focus rings; scoped opacity is enough for LC-25.
@@ -678,7 +698,12 @@ export function Stepper<
         data-stepper-live={live ? "true" : undefined}
         data-stepper-flash={valueFlash ? "true" : undefined}
         onChangeText={readOnly ? undefined : handleInputChange}
-        textAlign={affix ? "right" : "center"}
+        textAlign={affix ? "right" : showSpin ? "center" : "left"}
+        {...(hug
+          ? isWeb
+            ? { flexGrow: 0, flexShrink: 0 }
+            : { flexGrow: 0, flexShrink: 0, width: hugChars * hugNativeCharPx(controlSize) }
+          : undefined)}
         opacity={valueMotionStyle.opacity}
         // LC-25 native value tween intentionally disabled: Tamagui's RN
         // animation driver crashes Hermes ("Cannot add new property
@@ -688,6 +713,7 @@ export function Stepper<
           ? {
               style: {
                 ...(inputProps as any)?.style,
+                ...(hug ? { width: `${hugChars}ch` } : undefined),
                 transition: valueMotionStyle.transition,
                 opacity: valueMotionStyle.opacity,
               },
@@ -742,6 +768,8 @@ export function Stepper<
         data-stepper="true"
         data-stepper-control="true"
         data-stepper-placement={placement}
+        data-stepper-hug={hug ? "true" : undefined}
+        {...(hug ? { alignSelf: "flex-start" as const } : undefined)}
         {...(showSpin
           ? {
               paddingHorizontal: 0,
@@ -762,7 +790,10 @@ export function Stepper<
     // Wrap with wheel handler on web
     if (isWeb && !disabled && !readOnly) {
       return (
-        <div {...wheelProps} style={{ minWidth: 0, width: "100%" }}>
+        <div
+          {...wheelProps}
+          style={hug ? { minWidth: 0, maxWidth: "100%" } : { minWidth: 0, width: "100%" }}
+        >
           {box}
         </div>
       );
@@ -797,6 +828,7 @@ export function Stepper<
         size={size}
         knobProps={knobProps}
         onBlur={onBlur}
+        hug={hug}
         // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
@@ -831,6 +863,7 @@ export function Stepper<
             readOnly,
             disabled,
             onBlur,
+            hug,
             ...restProps,
           }}
           id={id}
@@ -902,6 +935,7 @@ function StepperFieldRenderer<TData>({
       size={fieldProps.size}
       knobProps={knobProps}
       onBlur={mergeFieldHandler(field, "handleBlur", fieldProps.onBlur)}
+      hug={fieldProps.hug}
       // LC-40: see standalone branch — FieldLayout carries dimWhole.
       disabled={fieldProps.disabled}
     >

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

@@ -1,16 +1,12 @@
 /**
- * MPO-356 / LC-91 SWITCH-FOOTPRINT, native half. Clay's iPhone measured the
- * default track at about 85 × 43 pt; the track is UISwitch's 51 × 31, and the
- * thumb follows Tamagui's proportion, filling the track inside the 1 pt
- * hairline (29 pt) as it does on web. Mock tamagui's isWeb so the native
- * branch runs on the test host renderer (RadioGroup.native.spec pattern) and
- * read the painted track back.
+ * LC-91: native uses UISwitch's 51 × 31 pt at the scale's control.
+ * The thumb is inset 1 pt and the press target can grow independently.
  */
 
 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 { Preset, Surface } from "@multiplatform.one/theme";
 import { Switch } from "./index";
 import { paintedBox, thumbOf, trackBox } from "../../../tests/switchFootprintProbe";
 
@@ -21,15 +17,19 @@ vi.mock("tamagui", async (importOriginal) => ({
 
 afterEach(cleanup);
 
-function mount(overrides: Record<string, unknown> = {}, minTargetHeight?: number) {
+const rowToken = { small: "$3", medium: "$4", large: "$5" } as const;
+
+function mount({ size }: { size?: keyof typeof rowToken } = {}, minTargetHeight?: number) {
   const result = renderWithProviders(
-    <Preset overrides={{ elevation: "none", ...overrides }}>
-      <Switch
-        name="sw"
-        defaultValue={false}
-        aria-label="Notifications"
-        {...(minTargetHeight !== undefined && { minTargetHeight })}
-      />
+    <Preset overrides={{ elevation: "none" }}>
+      <Surface size={size ? rowToken[size] : undefined}>
+        <Switch
+          name="sw"
+          defaultValue={false}
+          aria-label="Notifications"
+          {...(minTargetHeight !== undefined && { minTargetHeight })}
+        />
+      </Surface>
     </Preset>,
   );
   const frame = result.getSwitch() as HTMLElement;
@@ -38,7 +38,7 @@ function mount(overrides: Record<string, unknown> = {}, minTargetHeight?: number
 }
 
 describe("Switch footprint on native (MPO-356)", () => {
-  it("paints a UISwitch-sized 51 × 31 track with a 29 pt thumb at default knobs", () => {
+  it("paints a 51 × 31 track with a 29 pt thumb at default knobs", () => {
     const { track, thumb } = mount();
     expect(track).toEqual({ width: 51, height: 31 });
     expect(thumb).toEqual({ width: 29, height: 29 });
@@ -50,7 +50,7 @@ describe("Switch footprint on native (MPO-356)", () => {
     expect(track).toEqual({ width: 51, height: 31 });
   });
 
-  it("steps with the size knob at the UISwitch aspect", () => {
+  it("steps with the size token at the UISwitch aspect", () => {
     const small = mount({ size: "small" }).track;
     cleanup();
     const large = mount({ size: "large" }).track;
@@ -59,7 +59,7 @@ describe("Switch footprint on native (MPO-356)", () => {
   });
 
   for (const size of ["small", "medium", "large"] as const) {
-    it(`size ${size}: the thumb fills the track inside the 1 pt hairline, Tamagui's proportion`, () => {
+    it(`size ${size}: the thumb is inset 1 pt inside the borderless track`, () => {
       const { track, thumb } = mount({ size });
       expect(thumb).toEqual({ width: track.height - 2, height: track.height - 2 });
     });

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

@@ -1,79 +1,89 @@
 /**
- * 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.
+ * LC-91: web tracks use 22/40 of the recipe height at 42:22.
+ * The default track is 42 × 22 with an 18 px thumb inset 2 px.
  */
-
 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 { Switch, type SwitchProps } from "./index";
+import { switchFootprint } from "./footprint";
 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"]) {
+function mount(props: SwitchProps = {}, outlined = false) {
   const result = renderWithProviders(
-    <Preset overrides={{ elevation: "none", ...(size && { size }) }}>
-      <Switch name="sw" defaultValue={false} aria-label="Notifications" />
+    <Preset overrides={{ elevation: "none", fillStyle: outlined ? "outlined" : "filled" }}>
+      <Switch aria-label="Notifications" {...props} />
     </Preset>,
   );
   const frame = result.getSwitch() as HTMLElement;
-  expect(frame).toBeTruthy();
-  return { track: trackBox(frame), thumb: paintedBox(thumbOf(frame)) };
+  return { frame, thumb: thumbOf(frame), track: trackBox(frame) };
 }
 
-function stock(token: string) {
-  const result = renderWithProviders(
-    <TamaguiSwitch size={token as never} aria-label="Stock">
-      <TamaguiSwitch.Thumb />
-    </TamaguiSwitch>,
+describe("Switch footprint on web", () => {
+  it.each([
+    { size: undefined, width: 42, height: 22, thumbSize: 18 },
+    { size: "$3", width: 34, height: 18, thumbSize: 14 },
+    { size: "$5", width: 50, height: 26, thumbSize: 22 },
+    { size: "$2", width: 27, height: 14, thumbSize: 10 },
+  ] as const)(
+    "$size paints $width × $height with a $thumbSize px thumb",
+    ({ size, width, height, thumbSize }) => {
+      const { track, thumb } = mount({ size });
+      expect(track).toEqual({ width, height });
+      expect(paintedBox(thumb)).toEqual({ width: thumbSize, height: thumbSize });
+    },
   );
-  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.each([false, true])("checked=%s rests with a 2 px outer inset", (checked) => {
+    const { thumb } = mount({ checked });
+    const transform = thumb.style.transform || getComputedStyle(thumb).transform;
+    expect(transform).toContain(`translateX(${checked ? 22 : 2}px)`);
+    expect(transform).toContain("translateY(2px)");
   });
 
-  it("the default track is the stock Tamagui $true Switch", () => {
-    expect(ours().track).toEqual(stock("$true").track);
+  it("has no border under the default preset", () => {
+    const { frame } = mount();
+    expect(getComputedStyle(frame).borderTopWidth).toBe("0px");
   });
 
-  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");
+  it.each([
+    { size: undefined, width: 42, height: 22, thumbSize: 18 },
+    { size: "$3", width: 34, height: 18, thumbSize: 14 },
+  ] as const)(
+    "$size centers its paint inside a 44 × 44 target",
+    ({ size, width, height, thumbSize }) => {
+      const { frame, track, thumb } = mount({ size, minTargetHeight: 44 });
+      expect(paintedBox(frame)).toEqual({ width: 44, height: 44 });
+      expect(track).toEqual({ width, height });
+      expect(paintedBox(thumb)).toEqual({ width: thumbSize, height: thumbSize });
+      const transform = thumb.style.transform || getComputedStyle(thumb).transform;
+      expect(transform).toContain(`translateX(${(44 - width) / 2 + 2}px)`);
+      expect(transform).toContain(`translateY(${(44 - thumbSize) / 2}px)`);
+    },
+  );
+
+  it("outlines a transparent off track while preserving the 18 px thumb", () => {
+    const { frame, thumb } = mount({}, true);
+    expect(frame.className).toContain("_bg-transparent");
+    expect(parseFloat(getComputedStyle(frame).borderTopWidth)).toBeGreaterThanOrEqual(1);
+    expect(paintedBox(thumb)).toEqual({ width: 18, height: 18 });
   });
 
-  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,
-      });
-    });
-  }
+  it.each([0, 1, 2])("keeps the thumb 2 px from the outer edge with a %s px ring", (ring) => {
+    const footprint = switchFootprint("$4", ring);
+    expect(footprint.thumbSize).toBe(18);
+    expect(footprint.thumbInset + ring).toBe(2);
+    expect(footprint.travel).toBe(20);
+  });
+
+  it("restores the 44 px press target on both axes through press slop", () => {
+    const { frame, track } = mount();
+    const slop = Number(frame.getAttribute("data-mp-press-slop"));
+    expect(track.height + slop * 2).toBeGreaterThanOrEqual(44);
+    expect(track.width + slop * 2).toBeGreaterThanOrEqual(44);
+    expect(frame.hasAttribute("data-mp-press-axis")).toBe(false);
+  });
 });

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

@@ -1,9 +1,12 @@
+import { readFileSync } from "node:fs";
+import { URL as NodeURL } from "node:url";
 import { useForm } from "@tanstack/react-form";
-import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, waitFor } from "@testing-library/react";
 import { TamaguiProvider, YStack, createTamagui } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
+  Preset,
   createThemesBuilder,
   defaultAccentTheme,
   defaultBaseTheme,
@@ -14,6 +17,7 @@ import { animationsCSS } from "@tamagui/config/v5-css";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Switch } from "./index";
+import { thumbOf } from "../../../tests/switchFootprintProbe";
 
 // House builder themes for the LC-05 mark assertion — created at MODULE
 // scope: tamagui registers a config's theme variables globally at
@@ -236,8 +240,6 @@ describe("Switch", () => {
         fireEvent.pointerDown(switchElement, { clientX: 0, pointerId: 1, button: 0 });
       });
       await act(async () => {
-        // Past drag-intent (10px) but still below the snap midpoint
-        // (recipe $4 track ≈ 21px, midpoint ≈ 10.5).
         fireEvent(
           document,
           new PointerEvent("pointermove", { clientX: 10, pointerId: 1, bubbles: true }),
@@ -246,7 +248,7 @@ describe("Switch", () => {
       await act(async () => {
         fireEvent(
           document,
-          new PointerEvent("pointerup", { clientX: 10, pointerId: 1, bubbles: true }),
+          new PointerEvent("pointerup", { clientX: 9, pointerId: 1, bubbles: true }),
         );
       });
       // Same-gesture press that follows a drag must not flip the value.
@@ -413,3 +415,122 @@ describe("Switch", () => {
     });
   });
 });
+
+describe("Switch thumb and pointer paint", () => {
+  function paint(el: HTMLElement, prefix: "_bg-" | "_btc-") {
+    const property = prefix === "_bg-" ? "background-color" : "border-top-color";
+    const tokens = Array.from(el.classList)
+      .filter((name) => name.startsWith(prefix) && !/^_[a-z]+-0/.test(name))
+      .flatMap((name) =>
+        Array.from(document.styleSheets).flatMap((sheet) =>
+          Array.from(sheet.cssRules)
+            .filter(
+              (rule): rule is CSSStyleRule =>
+                rule instanceof CSSStyleRule && rule.selectorText.endsWith(`.${name}`),
+            )
+            .map((rule) => rule.style.getPropertyValue(property).trim())
+            .filter(Boolean),
+        ),
+      );
+    return tokens.join(" ");
+  }
+
+  function mount({
+    checked = false,
+    disabled = false,
+    readOnly = false,
+    grown = false,
+    outlined = false,
+    scheme = "light",
+    switchProps = {},
+  } = {}) {
+    const result = render(
+      <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+        <Preset overrides={{ fillStyle: outlined ? "outlined" : "filled" }}>
+          <Switch
+            label="Pointer"
+            checked={checked}
+            disabled={disabled}
+            readOnly={readOnly}
+            minTargetHeight={grown ? 44 : undefined}
+            switchProps={switchProps}
+          />
+        </Preset>
+      </TamaguiProvider>,
+    );
+    const frame = result.getByRole("switch");
+    const track = grown ? frame.querySelector<HTMLElement>("._pos-absolute._pe-none")! : frame;
+    return { frame, track, thumb: thumbOf(frame) };
+  }
+
+  it.each(["light", "dark"])("%s uses the same thumb token in both states", (scheme) => {
+    const off = mount({ scheme });
+    expect(off.thumb.className).toContain("_bg-switchThu");
+    cleanup();
+    const on = mount({ scheme, checked: true });
+    expect(on.thumb.className).toContain("_bg-switchThu");
+  });
+
+  it("has no luminance-dependent thumb override", () => {
+    expect(readFileSync(new NodeURL("./index.tsx", import.meta.url), "utf8")).not.toContain(
+      "useLuminanceThumbColor",
+    );
+  });
+
+  it.each([false, true])("grown=%s changes the off track on mouse enter and leave", (grown) => {
+    const { frame, track } = mount({ grown });
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
+    fireEvent.mouseEnter(frame);
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOffHover)");
+    fireEvent.mouseLeave(frame);
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
+  });
+
+  it.each([false, true])("grown=%s keeps the checked accent on hover", (grown) => {
+    const { frame, track } = mount({ grown, checked: true });
+    expect(paint(track, "_bg-")).toBe("var(--accentBackground)");
+    fireEvent.mouseEnter(frame);
+    expect(paint(track, "_bg-")).toBe("var(--accentBackground)");
+  });
+
+  it.each([{ disabled: true }, { readOnly: true }])("ignores hover for %o", (props) => {
+    const { frame, track } = mount(props);
+    fireEvent.mouseEnter(frame);
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
+  });
+
+  it.each([false, true])("grown=%s changes only the outlined ring on hover", (grown) => {
+    const { frame, track } = mount({ grown, outlined: true });
+    expect(track.className).toContain("_bg-transparent");
+    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
+    fireEvent.mouseEnter(frame);
+    expect(track.className).toContain("_bg-transparent");
+    expect(paint(track, "_btc-")).toBe("var(--switchTrackOffHover)");
+    fireEvent.mouseLeave(frame);
+    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
+  });
+
+  it("composes the caller's mouse handlers once", () => {
+    const onMouseEnter = vi.fn();
+    const onMouseLeave = vi.fn();
+    const { frame } = mount({ switchProps: { onMouseEnter, onMouseLeave } });
+    fireEvent.mouseEnter(frame);
+    fireEvent.mouseLeave(frame);
+    expect(onMouseEnter).toHaveBeenCalledTimes(1);
+    expect(onMouseLeave).toHaveBeenCalledTimes(1);
+  });
+
+  it("paints the press tier and composes press handlers", () => {
+    const onPressIn = vi.fn();
+    const onPressOut = vi.fn();
+    const { frame, track } = mount({ switchProps: { onPressIn, onPressOut } });
+    fireEvent.pointerDown(frame, { pointerId: 1, button: 0, clientX: 0 });
+    fireEvent.mouseDown(frame, { button: 0 });
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOffPress)");
+    expect(onPressIn).toHaveBeenCalledTimes(1);
+    fireEvent.mouseUp(frame, { button: 0 });
+    fireEvent.pointerUp(document, { pointerId: 1, clientX: 0 });
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+  });
+});

package/src/fields/Switch/Switch.stories.tsx

@@ -146,9 +146,9 @@ export const WithIcons: Story = {
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
-      <Switch label="Small" size="$2" />
-      <Switch label="Medium (default)" size="$3" />
-      <Switch label="Large" size="$4" />
+      <Switch label="Small ($3)" size="$3" />
+      <Switch label="Default ($4)" />
+      <Switch label="Large ($5)" size="$5" />
     </YStack>
   ),
 };

package/src/fields/Switch/footprint.ts

@@ -2,20 +2,13 @@ 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's 51 × 31 pt track at the 44 medium stop (Material 3's
- *   52 × 32 sits inside the same 10 percent), Tamagui's thumb filling it: 29 pt.
- *
- * 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.
+ * LC-91: web track = 22/40 of the token's recipe height at 42:22,
+ * with the thumb inset 2 px from the outer edge.
+ * Native uses UISwitch's 51 × 31 pt at the scale's control,
+ * scaled by the token's ratio to that control height.
  */
-const webSwitch = { heightRatio: 0.65, aspect: 2, rimGutter: 0 };
-const nativeSwitch = { heightRatio: 31 / 44, aspect: 51 / 31, rimGutter: 1 };
+const webSwitch = { heightRatio: 22 / 40, aspect: 42 / 22, rimGutter: 2 };
+const nativeSwitch = { width: 51, height: 31, rimGutter: 1 };
 
 export type SwitchFootprint = {
   trackHeight: number;
@@ -30,8 +23,14 @@ export type SwitchFootprint = {
 
 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 recipeHeight = sizeRecipeForToken(sizeToken).height;
+  const ratio = recipeHeight / sizeRecipeForToken("$4").height;
+  const trackHeight = Math.round(
+    isWeb ? recipeHeight * webSwitch.heightRatio : nativeSwitch.height * ratio,
+  );
+  const trackWidth = Math.round(
+    isWeb ? trackHeight * webSwitch.aspect : nativeSwitch.width * ratio,
+  );
   const thumbSlot = trackHeight - borderWidth * 2;
   const thumbInset = Math.max(0, platform.rimGutter - borderWidth);
   return {