@multiplatform.one/forms 7.11.0 → 7.15.0

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,6 +244,7 @@ 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}
           // LC-40: Box owns the disabled chrome wash (value text stays >= AA);

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}
+        // 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();

package/src/fields/pickerShellPadding.spec.tsx

@@ -0,0 +1,54 @@
+/**
+ * MPO-221: the picker shells hand FloatingPanel `contentPadding="none"`.
+ * Each picker owns one compact inset (MPO-262), so the panel adding its own
+ * `panelPadding` stacked a second pad around the widget.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const shellProps: Array<Record<string, unknown>> = [];
+
+vi.mock("../FloatingPanel", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../FloatingPanel")>();
+  return {
+    ...actual,
+    FloatingPanel: (props: Record<string, unknown>) => {
+      shellProps.push(props);
+      return React.createElement(
+        "div",
+        { "data-testid": "shell" },
+        props.trigger as React.ReactNode,
+        props.children as React.ReactNode,
+      );
+    },
+  };
+});
+
+import { ColorPicker } from "./ColorPicker";
+import { DatePicker } from "./DatePicker";
+import { TimePicker } from "./TimePicker";
+
+describe("picker shells do not pad around the widget (MPO-221)", () => {
+  beforeEach(() => {
+    shellProps.length = 0;
+  });
+
+  it("ColorPicker passes contentPadding none and pads its own body", () => {
+    const { container } = renderWithProviders(<ColorPicker name="c" label="Color" />);
+    expect(shellProps.at(-1)?.contentPadding).toBe("none");
+    expect(container.querySelector('[data-testid="color-picker-panel"]')).not.toBeNull();
+  });
+
+  it("TimePicker passes contentPadding none and pads its own panel", () => {
+    const { container } = renderWithProviders(<TimePicker name="t" label="Time" />);
+    expect(shellProps.at(-1)?.contentPadding).toBe("none");
+    expect(container.querySelector('[data-testid="time-picker-panel"]')).not.toBeNull();
+  });
+
+  it("DatePicker passes contentPadding none", () => {
+    renderWithProviders(<DatePicker name="d" label="Date" />);
+    expect(shellProps.at(-1)?.contentPadding).toBe("none");
+  });
+});

package/src/index.ts

@@ -227,6 +227,9 @@ export type {
   ReverseGeocodeQuery,
 } from "./fields/Geolocation/geocoder";
 export { resolveGeocoder } from "./fields/Geolocation/geocoder";
+export { GeocoderProvider, useGeocoder } from "./fields/Geolocation/geocoderContext";
+export { createPhotonGeocoder } from "./fields/Geolocation/photonGeocoder";
+export type { PhotonGeocoderOptions } from "./fields/Geolocation/photonGeocoder";
 
 export { ImageField } from "./fields/ImageField";
 export type { ImageFieldProps } from "./fields/ImageField";
@@ -273,6 +276,9 @@ export {
   panelTransition,
   panelViewportPadding,
 } from "./FloatingPanel";
+export { PanelPortal } from "./FloatingPanel/PanelPortal";
+export type { PanelPortalProps } from "./FloatingPanel/PanelPortal";
+export { containsAcrossPanels } from "./shared/panelPortal";
 export type {
   FloatingPanelProps,
   PanelWidthMode,
@@ -347,6 +353,8 @@ export {
   clampRadiusInStateProps,
 } from "./shared/utils";
 export type { ClampRadiusInStatePropsOptions, StatePropsRadiusClass } from "./shared/utils";
+export { pressSlopOutsetProps, pressSlopProps } from "./shared/pressSlopProps";
+export type { PressSlopProps } from "./shared/pressSlopProps";
 
 // ── Table Cell Context (for chromeless field rendering) ───────
 export { TableCellContext, useTableCellContext, useIsInTableCell } from "./shared/tableCellContext";

package/src/shared/panelPortal.ts

@@ -0,0 +1,36 @@
+/**
+ * Web floating panels render through a portal (MPO-335), so a panel's DOM is
+ * no longer inside the control that opened it. A `Node.contains` check that
+ * decides "inside or outside" follows the portal back to that control here,
+ * or a press in a cell editor's dropdown reads as a press outside the cell.
+ */
+
+export const panelPortalAttribute = "data-fp-portal";
+
+const anchors = new WeakMap<Element, Element>();
+
+export function registerPanelPortal(portal: Element, anchor: Element): () => void {
+  anchors.set(portal, anchor);
+  return () => {
+    if (anchors.get(portal) === anchor) anchors.delete(portal);
+  };
+}
+
+/** The element that opened the portaled panel `node` sits in, or null. */
+export function panelPortalAnchor(node: Node): Element | null {
+  const element = node instanceof Element ? node : node.parentElement;
+  const portal = element?.closest(`[${panelPortalAttribute}]`);
+  return portal ? (anchors.get(portal) ?? null) : null;
+}
+
+/** `root.contains(target)`, where a portaled panel counts as part of its anchor. */
+export function containsAcrossPanels(root: Node | null | undefined, target: unknown): boolean {
+  if (!root || typeof Node === "undefined" || !(target instanceof Node)) return false;
+  let node: Node | null = target;
+  // Each hop climbs out of one portal; nesting is shallow, the cap stops a cycle.
+  for (let hop = 0; node && hop < 32; hop++) {
+    if (root.contains(node)) return true;
+    node = panelPortalAnchor(node);
+  }
+  return false;
+}

package/src/shared/pressSlopProps.spec.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { pressSlopProps } from "./pressSlopProps";
+import { pressSlopOutsetProps, pressSlopProps } from "./pressSlopProps";
 import { pickerTriggerContract } from "./pickerTriggerContract";
 
 const platform = vi.hoisted(() => ({ web: true }));
@@ -37,3 +37,29 @@ describe("press-target deficient dimensions", () => {
     expect(pressSlopProps(28, true)).toEqual({ hitSlop: { top: 8, bottom: 8, left: 8, right: 8 } });
   });
 });
+
+describe("pitch-limited outset (LC-54, K12)", () => {
+  it("writes the given outset on the vertical axis on web, whatever the painted size", () => {
+    expect(pressSlopOutsetProps(4, "vertical")).toEqual({
+      "data-mp-press-slop": "4",
+      "data-mp-press-axis": "vertical",
+    });
+  });
+  it("floors a fractional outset so the target stays inside its pitch", () => {
+    expect(pressSlopOutsetProps(3.5, "vertical")).toEqual({
+      "data-mp-press-slop": "3",
+      "data-mp-press-axis": "vertical",
+    });
+  });
+  it("writes nothing for an outset under one pixel", () => {
+    expect(pressSlopOutsetProps(0, "vertical")).toBeUndefined();
+    expect(pressSlopOutsetProps(0.5)).toBeUndefined();
+  });
+  it("gives native a vertical-only hitSlop", () => {
+    platform.web = false;
+    expect(pressSlopOutsetProps(3, "vertical")).toEqual({
+      hitSlop: { top: 3, bottom: 3, left: 0, right: 0 },
+    });
+    expect(pressSlopOutsetProps(3)).toEqual({ hitSlop: { top: 3, bottom: 3, left: 3, right: 3 } });
+  });
+});