@multiplatform.one/forms 7.11.0 → 7.16.0

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,
+  };
+}

package/src/fields/Switch/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { AnyFormApi } from "../../types";
@@ -24,8 +25,8 @@ import {
   borderRadiusMap,
   contrastRatio,
   ensureFocusVisibleRing,
-  isTouchSurface,
   normalizeToHex,
+  radiusResolutionProps,
   relativeLuminance,
   resolveRadiusClass,
   sizeRecipeForToken,
@@ -33,6 +34,7 @@ import {
   wasKeyboardFocus,
   ensureKeyboardModalityTracking,
   type BorderRadius,
+  type RadiusResolutionDeclaration,
 } from "@multiplatform.one/theme";
 import { commitImmediateField } from "../../ContextualSaveBar/commitImmediateField";
 import { useFormSaveMode } from "../../Form";
@@ -48,7 +50,9 @@ import {
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
+import { pressSlopProps } from "../../shared/pressSlopProps";
 import { useIsInTableCell } from "../../shared/tableCellContext";
+import { switchFootprint, type SwitchFootprint } from "./footprint";
 
 /** Pointer travel (px) before a gesture counts as thumb-drag instead of click. */
 const SWITCH_DRAG_INTENT_PX = 10;
@@ -56,14 +60,6 @@ const SWITCH_DRAG_INTENT_PX = 10;
 /** Minimum pressable height for the switch inside table cells (SP-FIXED). */
 const SWITCH_CELL_TARGET_HEIGHT = 44;
 
-/**
- * Apple / Material 3 / Polaris: the thumb floats inside the track (≈2px
- * gutter), never flush to the rim. Shrinks on tiny sizes so the handle
- * stays ≥10px.
- */
-const switchThumbInset = (trackInner: number) =>
-  Math.min(2, Math.max(0, Math.floor((trackInner - 10) / 2)));
-
 /** `animation=none` resolves to undefined — do not fall back to `quick`. */
 const resolveSwitchMotion = (token: string | undefined) =>
   token && token !== "none" ? token : "none";
@@ -94,25 +90,14 @@ const stripOutlineFromState = (props?: Record<string, any>) => {
 // ─── Switch internals ─────────────────────────────────────────────────────────
 
 /**
- * Switch geometry rides the GENERATED size recipe (LC-75 / LC-80): the
- * painted TRACK equals the family height for the token (track = thumb slot +
- * 2×border), so a `$4` switch is exactly as tall as a `$4` input (32).
- * Previously thumb/track indexed the flat Tamagui size ramp (getSize × 0.65)
- * — the independent-position drift LC-75 bans. The styled fallbacks assume
- * the 1px hairline track border; the component passes exact frameProps with
- * the live knob borderWidth. Touch keeps the DESKTOP recipe for the painted
- * track (a 44px-tall painted switch is not a control anyone ships) and
- * restores the 44 floor on the PRESSABLE frame via grown-target mode below.
+ * The painted track is `switchFootprint` of the recipe height (LC-91), never
+ * the recipe height itself. The styled fallbacks assume the 1px hairline
+ * track border; the component passes exact frameProps with the live knob
+ * borderWidth. The 44 press floor lands on the PRESSABLE frame (grown-target
+ * mode on touch and in cells, press slop on a fine pointer), never on paint.
  */
 const SWITCH_TRACK_BORDER_FALLBACK = 1;
 
-const getSwitchTrackHeight = (val: SizeTokens) => sizeRecipeForToken(String(val)).height;
-
-const getSwitchThumbHeight = (
-  val: SizeTokens,
-  borderWidth: number = SWITCH_TRACK_BORDER_FALLBACK,
-) => getSwitchTrackHeight(val) - borderWidth * 2;
-
 const resolveRadiusValue = (radius: unknown) => {
   if (typeof radius === "number") return radius;
   if (typeof radius !== "string") return undefined;
@@ -200,8 +185,8 @@ const SwitchThumbStyled = styled(View, {
 
     size: {
       "...size": (val) => {
-        const size = getSwitchThumbHeight(val);
-        return { height: size, width: size };
+        const { thumbSize } = switchFootprint(String(val), SWITCH_TRACK_BORDER_FALLBACK);
+        return { height: thumbSize, width: thumbSize };
       },
     },
   } as const,
@@ -246,9 +231,11 @@ const SwitchFrameStyled = styled(View, {
 
     size: {
       "...size": (val) => {
-        const height = getSwitchTrackHeight(val);
-        const width = getSwitchThumbHeight(val) * 2 + SWITCH_TRACK_BORDER_FALLBACK * 2;
-        return { height, minHeight: height, width };
+        const { trackHeight, trackWidth } = switchFootprint(
+          String(val),
+          SWITCH_TRACK_BORDER_FALLBACK,
+        );
+        return { height: trackHeight, minHeight: trackHeight, width: trackWidth };
       },
     },
   } as const,
@@ -369,7 +356,7 @@ type SwitchControlProps = {
   hasError?: boolean;
   id: string;
   sizeToken: SizeTokens;
-  thumbHeight: number;
+  footprint: SwitchFootprint;
   thumbRadius: number;
   transition?: string;
   frameProps: Record<string, any>;
@@ -410,6 +397,8 @@ type SwitchControlProps = {
     pressStyle?: Record<string, any>;
     focusStyle?: Record<string, any>;
   };
+  /** BINARY declaration for the thumb and the cell track; absent under a radius override. */
+  radiusResolution?: RadiusResolutionDeclaration;
 };
 
 function SwitchControl({
@@ -422,7 +411,7 @@ function SwitchControl({
   hasError,
   id,
   sizeToken,
-  thumbHeight,
+  footprint,
   thumbRadius,
   transition,
   frameProps,
@@ -442,6 +431,7 @@ function SwitchControl({
   ariaLabel,
   ariaLabelledBy,
   cellTrack,
+  radiusResolution,
 }: SwitchControlProps) {
   if (isWeb) {
     ensureKeyboardModalityTracking();
@@ -451,11 +441,8 @@ function SwitchControl({
   const outlined = knobProps.outlined;
   const trackOffFill = outlined ? "transparent" : formSwitchColors.track.off;
   const trackOffBorder = formControlColors.boundary;
-  const thumbInset = switchThumbInset(thumbHeight);
-  const thumbSize = thumbHeight - thumbInset * 2;
+  const { thumbInset, thumbSize, travel: dragDistance } = footprint;
   const motion = resolveSwitchMotion(transition);
-  // Travel distance for a 2:1 track (inner width − thumb − gutters = thumb height).
-  const dragDistance = thumbHeight;
   const [dragX, setDragX] = useState<number | null>(null);
   // Hold snapped thumb until the controlled `checked` prop catches up (avoids flash).
   const [snapChecked, setSnapChecked] = useState<boolean | null>(null);
@@ -677,6 +664,7 @@ function SwitchControl({
           y={-cellTrack.height / 2}
           height={cellTrack.height}
           borderRadius={cellTrack.borderRadius}
+          {...radiusResolution}
           borderWidth={cellTrack.borderWidth}
           borderColor={displayChecked ? formSwitchColors.track.on : trackOffBorder}
           backgroundColor={displayChecked ? formSwitchColors.track.on : trackOffFill}
@@ -693,6 +681,7 @@ function SwitchControl({
       {rightIcon && <StyledSwitch.Icon placement="right">{rightIcon}</StyledSwitch.Icon>}
       <StyledSwitch.Thumb
         borderRadius={thumbRadius}
+        {...radiusResolution}
         width={thumbSize}
         height={thumbSize}
         // Own position so drag can override Tamagui's initialChecked alignSelf/x math.
@@ -791,6 +780,7 @@ export function Switch({
   compact,
   minTargetHeight,
 }: SwitchProps) {
+  const hydrationTouch = useTouchSurface();
   // Canonical `onChange` and the alias `onCheckedChange` both fire; standalone
   // (formless) callers get real toggling from either name.
   const handleValueChange = (val: boolean) => {
@@ -817,12 +807,12 @@ export function Switch({
 
   // Coordinated geometry (LC-10): ONE size token drives the control (track,
   // thumb) AND the row slot, so an explicit `size` prop can never make the
-  // control outgrow its own row. Track = recipe height (LC-75); the thumb
-  // rides inside it.
+  // control outgrow its own row. The row is the recipe height (LC-75); the
+  // track is the platform switch's fraction of it (LC-91).
   const sizeToken = (size ?? knobProps.sizeToken) as SizeTokens;
   const borderWidth = knobProps.borderRadius.borderWidth ?? 1;
-  const thumbHeight = getSwitchThumbHeight(sizeToken, borderWidth);
-  const trackHeight = thumbHeight + borderWidth * 2;
+  const footprint = switchFootprint(String(sizeToken), borderWidth);
+  const { trackHeight, trackWidth } = footprint;
   // Grown-target mode (SP-FIXED): table cells always grow the pressable
   // frame to 44px; standalone consumers opt in via `minTargetHeight`; touch
   // surfaces get the LC-77 44px floor on the PRESSABLE frame while the
@@ -833,7 +823,7 @@ export function Switch({
     ? SWITCH_CELL_TARGET_HEIGHT
     : minTargetHeight !== undefined
       ? Math.max(minTargetHeight, trackHeight)
-      : isTouchSurface() && trackHeight < TOUCH_HEIGHT_FLOOR
+      : hydrationTouch && trackHeight < TOUCH_HEIGHT_FLOOR
         ? TOUCH_HEIGHT_FLOOR
         : undefined;
   const grownTarget = targetHeight !== undefined;
@@ -848,8 +838,7 @@ export function Switch({
   ) => {
     const overrideRadius = (switchProps as any)?.borderRadius;
     const radiusStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
-    const thumbInset = switchThumbInset(thumbHeight);
-    const thumbPaintedHeight = thumbHeight - thumbInset * 2;
+    const thumbPaintedHeight = footprint.thumbSize;
     const trackRadius =
       overrideRadius != null
         ? (resolveRadiusValue(overrideRadius) ?? 1000)
@@ -859,11 +848,17 @@ export function Switch({
         ? (resolveRadiusValue(overrideRadius) ?? 1000)
         : resolveRadiusClass("BINARY", radiusStop, { heightPx: thumbPaintedHeight });
 
+    const radiusResolution = overrideRadius == null ? radiusResolutionProps("BINARY") : undefined;
     let frameProps: Record<string, any> = {
       borderRadius: overrideRadius ?? trackRadius,
-      height: thumbHeight + borderWidth * 2,
-      minHeight: thumbHeight + borderWidth * 2,
-      width: thumbHeight * 2 + borderWidth * 2,
+      height: trackHeight,
+      minHeight: trackHeight,
+      width: trackWidth,
+      ...pressSlopProps(
+        trackHeight,
+        !grownTarget,
+        trackWidth >= TOUCH_HEIGHT_FLOOR ? "vertical" : "both",
+      ),
     };
 
     // Grown-target mode (SP-FIXED): grow the pressable frame (44px in cells,
@@ -944,12 +939,14 @@ export function Switch({
     } else if (switchChecked) {
       frameProps = {
         ...frameProps,
+        ...radiusResolution,
         backgroundColor: formSwitchColors.track.on,
         borderColor: formSwitchColors.track.on,
       };
     } else {
       frameProps = {
         ...frameProps,
+        ...radiusResolution,
         backgroundColor: knobProps.outlined ? "transparent" : formSwitchColors.track.off,
         borderColor: formControlColors.boundary,
       };
@@ -980,7 +977,7 @@ export function Switch({
         hasError={hasError}
         id={id}
         sizeToken={sizeToken}
-        thumbHeight={thumbHeight}
+        footprint={footprint}
         thumbRadius={thumbRadius}
         transition={resolveSwitchMotion(knobProps.transition as string | undefined)}
         frameProps={frameProps}
@@ -989,6 +986,7 @@ export function Switch({
         rightIcon={rightIcon}
         inputSurface={grownTarget ? {} : knobProps.inputSurface}
         cellTrack={cellTrack}
+        radiusResolution={radiusResolution}
         accessibilityLabel={
           typeof label === "string" ? `${label}${required ? " *" : ""}` : ariaLabel
         }
@@ -1017,7 +1015,7 @@ export function Switch({
 
     if (elevationWrapperProps.elevation && !grownTarget) {
       return (
-        <View {...elevationWrapperProps} borderRadius={trackRadius}>
+        <View {...elevationWrapperProps} borderRadius={trackRadius} {...radiusResolution}>
           {switchElement}
         </View>
       );
@@ -1033,7 +1031,6 @@ export function Switch({
     // deterministic px label width — never % inside this auto-width row
     // (%-width collapses and overflows the next sibling).
     const skeletonStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
-    const trackWidth = thumbHeight * 2 + borderWidth * 2;
     return (
       <FieldLayout id={id} size={size} knobProps={knobProps} compactSpacing>
         <XStack {...knobProps.gap} alignItems="center" height={sizeToken}>

package/src/fields/TextArea/TextArea.spec.tsx

@@ -1,7 +1,7 @@
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { Preset } from "@multiplatform.one/theme";
-import { YStack } from "tamagui";
+import { Theme, YStack } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
@@ -406,6 +406,18 @@ describe("TextArea", () => {
       expect(fullClasses.join(" ")).not.toMatch(/t-radius-12/);
     });
 
+    it("declares the cap on the painted box with the knob stops it resolved", () => {
+      const result = renderWithProviders(
+        <Preset overrides={{ borderRadius: "full", space: "small" }}>
+          <TextArea label="Notes" defaultValue="x" />
+        </Preset>,
+      );
+      const box = result.container.querySelector("textarea")?.closest(".mp-composite-ring");
+      expect(box?.getAttribute("data-constraint-container")).toBe("TextArea");
+      expect(box?.getAttribute("data-radius-knob")).toBe("full");
+      expect(box?.getAttribute("data-space-knob")).toBe("small");
+    });
+
     it("caps large under space=small at the padding px", () => {
       const result = renderWithProviders(
         <Preset overrides={{ borderRadius: "large", space: "small" }}>
@@ -414,6 +426,23 @@ describe("TextArea", () => {
       );
       expect(boxRadiusClasses(result.container as HTMLElement)).toEqual(["_btlr-13px"]);
     });
+
+    it("caps full at the padding px in both schemes, never at the $4 clamp", () => {
+      for (const scheme of ["light", "dark"] as const) {
+        const ui = (
+          <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+            <TextArea label="Notes" defaultValue="x" />
+          </Preset>
+        );
+        const result = renderWithProviders(
+          scheme === "dark" ? <Theme name="dark">{ui}</Theme> : ui,
+        );
+        const classes = boxRadiusClasses(result.container as HTMLElement);
+        expect(classes, scheme).toEqual(["_btlr-18px"]);
+        expect(classes.join(" "), scheme).not.toMatch(/t-radius-(4|12)/);
+        result.unmount();
+      }
+    });
   });
 
   describe("LC-20 skeleton mirrors anatomy", () => {

package/src/fields/TextArea/index.tsx

@@ -1,3 +1,4 @@
+import { containerCapProps, useTouchSurface } from "@multiplatform.one/theme";
 import type { ComponentProps, Ref, RefObject, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { AnyFormApi } from "../../types";
@@ -89,6 +90,7 @@ export function TextArea({
   skeleton,
   compact,
 }: TextAreaProps) {
+  const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const theme = useTheme();
@@ -100,8 +102,8 @@ export function TextArea({
   const [autoHeight, setAutoHeight] = useState<number | undefined>(undefined);
 
   const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
-  const minHeightPx = getFieldHeight(resolvedSize, minRows || 3);
-  const maxHeightPx = getFieldHeight(resolvedSize, maxRows);
+  const minHeightPx = getFieldHeight(resolvedSize, minRows || 3, hydrationTouch);
+  const maxHeightPx = getFieldHeight(resolvedSize, maxRows, hydrationTouch);
   // Polaris/GOV.UK: a declared limit always surfaces a live count. Explicit
   // `showCount={false}` ejects.
   const showCharacterCount = showCount ?? maxLength != null;
@@ -215,7 +217,7 @@ export function TextArea({
           | "hidden",
       }
     : numberOfLines
-      ? { numberOfLines, minHeight: getFieldHeight(resolvedSize, numberOfLines) }
+      ? { numberOfLines, minHeight: getFieldHeight(resolvedSize, numberOfLines, hydrationTouch) }
       : { numberOfLines: minRows, minHeight: minHeightPx };
 
   const isControlled = value !== undefined;
@@ -242,8 +244,9 @@ export function TextArea({
           width="100%"
           alignItems="stretch"
           {...knobProps.containerRadius}
+          {...containerCapProps("TextArea", knobProps.borderRadius.borderRadius, knobProps.space)}
           cursor={disabled ? "not-allowed" : "text"}
-          theme={hasError ? "red" : undefined}
+          theme={hasError ? "error" : undefined}
           // LC-40: Box owns the disabled chrome wash (value text stays >= AA);
           // the old 0.5 whole-box dim dropped text under the floor.
           disabled={disabled}
@@ -339,7 +342,7 @@ export function TextArea({
   if (!resolvedForm || !name) {
     return (
       <FieldLayout {...layoutBind} error={error} onBlur={onBlur}>
-        <InputParts size={resolvedSize} {...(error ? { theme: "red" } : undefined)}>
+        <InputParts size={resolvedSize} {...(error ? { theme: "error" } : undefined)}>
           {renderTextArea(value ?? defaultValue, undefined, undefined, !!error)}
         </InputParts>
       </FieldLayout>
@@ -361,7 +364,7 @@ export function TextArea({
             error={resolvedError}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
           >
-            <InputParts size={resolvedSize} {...(resolvedError ? { theme: "red" } : undefined)}>
+            <InputParts size={resolvedSize} {...(resolvedError ? { theme: "error" } : undefined)}>
               {renderTextArea(
                 field.state.value as string,
                 (text) => field.handleChange(text as any),

package/src/fields/TimePicker/TimePicker.native.spec.tsx

@@ -0,0 +1,48 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { TimePicker } from "./index.native";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+vi.mock("../nativeDateTime/OsDateTimeSheet", () => ({
+  OsDateTimeSheet: ({ open, onConfirm }: { open: boolean; onConfirm: (date: Date) => void }) =>
+    open ? (
+      <div role="dialog" aria-label="OS time">
+        <button onClick={() => onConfirm(new Date(2026, 2, 5, 14, 30))}>Confirm OS time</button>
+      </div>
+    ) : null,
+}));
+
+const paintedBox = (result: ReturnType<typeof renderWithProviders>) =>
+  result.getByTestId("time-picker-glyph").parentElement as HTMLElement;
+
+describe("native TimePicker trigger (MPO-363)", () => {
+  it("paints the empty trigger across the row with its placeholder", () => {
+    const result = renderWithProviders(<TimePicker />);
+    expect(getComputedStyle(result.getByRole("button", { name: "Time" })).width).toBe("100%");
+    const box = paintedBox(result);
+    expect(getComputedStyle(box).flexGrow).toBe("1");
+    expect(getComputedStyle(box).minWidth).toBe("0px");
+    expect(box.querySelector("input")?.placeholder).toBe("Select time");
+  });
+
+  it("leaves the tap to the native press owner", () => {
+    const result = renderWithProviders(<TimePicker />);
+    expect(getComputedStyle(result.getByTestId("time-picker-trigger")).pointerEvents).toBe("none");
+  });
+
+  it("renders a picked time inside the same full-row box", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<TimePicker onChange={onChange} />);
+    fireEvent.click(result.getByRole("button", { name: "Time" }));
+    fireEvent.click(result.getByRole("button", { name: "Confirm OS time" }));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith("14:30");
+    const box = paintedBox(result);
+    expect(getComputedStyle(box).flexGrow).toBe("1");
+    expect(box.querySelector("input")?.value).toBe("2:30 PM");
+  });
+});

package/src/fields/TimePicker/catalog.tsx

@@ -182,6 +182,7 @@ export function TimePicker({
         disabled={disabled}
         sizing="grow"
         widthMode="at-least-trigger"
+        contentPadding="none"
         triggerA11y={{
           label: (typeof label === "string" && label) || t("Time"),
           value: triggerValue || placeholder,

package/src/fields/TimePicker/parts.tsx

@@ -150,9 +150,13 @@ export function TimePickerInputTrigger({
       width="100%"
       cursor={disabled ? "not-allowed" : "pointer"}
       data-testid="time-picker-trigger"
+      pointerEvents={isWeb ? undefined : "none"}
     >
       <InputParts.Box
-        theme={error ? "red" : undefined}
+        theme={error ? "error" : undefined}
+        // Yoga has no intrinsic TextInput width: without this the empty
+        // trigger collapses to its clock glyph on native (MPO-363).
+        {...(isWeb ? undefined : { flex: 1, minWidth: 0 })}
         elevation={undefined}
         onPress={isWeb && !disabled ? onOpen : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" as const } : undefined)}

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

@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
   MIN_PRESS_TARGET,
+  Preset,
   createThemesBuilder,
   defaultAccentTheme,
   defaultBaseTheme,
@@ -301,9 +302,13 @@ describe("ToggleGroup", () => {
       return wrapper;
     }
 
+    // The wrapper only exists to carry a shadow, and the default stop paints
+    // none on a control since MPO-96, so these render at elevation medium.
     it("lays the wrapper out as a row so the segment's zero flex-basis sizes width, not height", () => {
       const { container } = renderWithHouseThemes(
-        <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
+        <Preset overrides={{ elevation: "medium" }}>
+          <ToggleGroup label="Alignment" options={options} defaultValue="left" />
+        </Preset>,
       );
       const segments = [...container.querySelectorAll("[data-state]")] as HTMLElement[];
       expect(segments).toHaveLength(3);
@@ -317,12 +322,14 @@ describe("ToggleGroup", () => {
 
     it("keeps the row wrapper in the vertical orientation", () => {
       const { container } = renderWithHouseThemes(
-        <ToggleGroup
-          label="Alignment"
-          options={options}
-          defaultValue="left"
-          orientation="vertical"
-        />,
+        <Preset overrides={{ elevation: "medium" }}>
+          <ToggleGroup
+            label="Alignment"
+            options={options}
+            defaultValue="left"
+            orientation="vertical"
+          />
+        </Preset>,
       );
       const segments = [...container.querySelectorAll("[data-state]")] as HTMLElement[];
       expect(segments).toHaveLength(3);
@@ -334,7 +341,9 @@ describe("ToggleGroup", () => {
 
     it("leaves the group frame flat while the segments carry the shadow (E-FLAT)", () => {
       const { container } = renderWithHouseThemes(
-        <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
+        <Preset overrides={{ elevation: "medium" }}>
+          <ToggleGroup label="Alignment" options={options} defaultValue="left" />
+        </Preset>,
       );
       const group = container.querySelector('[role="group"]') as HTMLElement;
       expect(group).toBeTruthy();