@multiplatform.one/forms 7.20.0 → 7.22.0

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -0,0 +1,141 @@
+import { OVERLAY_ANCHOR_GAP } from "@multiplatform.one/theme";
+import { describe, expect, it } from "vitest";
+import {
+  contextMenuPoint,
+  placeAtPoint,
+  pointOpensUp,
+  pointPanelLeft,
+  type PanelBounds,
+} from "./pointAnchor";
+
+const bounds: PanelBounds = { top: 10, left: 10, right: 1014, bottom: 758 };
+const gap = OVERLAY_ANCHOR_GAP;
+
+describe("pointPanelLeft", () => {
+  it("puts the panel's start edge on the point when it fits", () => {
+    expect(pointPanelLeft({ x: 300, y: 0 }, 200, bounds)).toEqual({ left: 300, alignEnd: false });
+  });
+
+  it("flips to open toward the start when the end side would overflow", () => {
+    expect(pointPanelLeft({ x: 900, y: 0 }, 200, bounds)).toEqual({ left: 700, alignEnd: true });
+  });
+
+  it("clamps into the bounds when neither side fits", () => {
+    const narrow: PanelBounds = { top: 10, left: 10, right: 310, bottom: 758 };
+    expect(pointPanelLeft({ x: 200, y: 0 }, 250, narrow)).toEqual({ left: 60, alignEnd: false });
+  });
+
+  it("pins to the start bound when the panel is wider than the bounds", () => {
+    const narrow: PanelBounds = { top: 10, left: 10, right: 110, bottom: 758 };
+    expect(pointPanelLeft({ x: 50, y: 0 }, 400, narrow).left).toBe(10);
+  });
+
+  it("opens toward the left from the point in RTL and flips right at the left edge", () => {
+    expect(pointPanelLeft({ x: 600, y: 0 }, 200, bounds, true)).toEqual({
+      left: 400,
+      alignEnd: false,
+    });
+    expect(pointPanelLeft({ x: 100, y: 0 }, 200, bounds, true)).toEqual({
+      left: 100,
+      alignEnd: true,
+    });
+  });
+});
+
+describe("pointOpensUp", () => {
+  it("opens down whenever the panel fits below the point", () => {
+    expect(pointOpensUp({ x: 0, y: 600 }, 150, bounds, gap)).toBe(false);
+  });
+
+  it("flips up when only the space above fits", () => {
+    expect(pointOpensUp({ x: 0, y: 700 }, 150, bounds, gap)).toBe(true);
+  });
+
+  it("takes the roomier side when neither fits", () => {
+    expect(pointOpensUp({ x: 0, y: 300 }, 700, bounds, gap)).toBe(false);
+    expect(pointOpensUp({ x: 0, y: 500 }, 700, bounds, gap)).toBe(true);
+  });
+});
+
+describe("placeAtPoint", () => {
+  it("sits OVERLAY_ANCHOR_GAP below the point, start edge on the point", () => {
+    expect(
+      placeAtPoint({ point: { x: 300, y: 200 }, width: 180, height: 120, bounds, gap }),
+    ).toEqual({
+      left: 300,
+      top: 200 + gap,
+      maxHeight: 758 - (200 + gap),
+      dropup: false,
+      alignEnd: false,
+    });
+  });
+
+  it("flips both ways in the bottom-right corner, bottom edge gap above the point", () => {
+    const placement = placeAtPoint({
+      point: { x: 1000, y: 740 },
+      width: 180,
+      height: 120,
+      bounds,
+      gap,
+    });
+    expect(placement.left).toBe(1000 - 180);
+    expect(placement.top).toBe(740 - gap - 120);
+    expect(placement.dropup).toBe(true);
+    expect(placement.alignEnd).toBe(true);
+  });
+
+  it("caps the height at the chosen side's room, so a tall menu scrolls inside the bounds", () => {
+    const placement = placeAtPoint({
+      point: { x: 300, y: 500 },
+      width: 180,
+      height: 900,
+      bounds,
+      gap,
+    });
+    expect(placement.dropup).toBe(true);
+    expect(placement.maxHeight).toBe(500 - gap - 10);
+    expect(placement.top).toBe(10);
+  });
+});
+
+describe("contextMenuPoint", () => {
+  const reference = {
+    getBoundingClientRect: () => ({ left: 40, right: 240, top: 100, bottom: 144 }),
+  };
+
+  it("takes the pointer's viewport coordinates from a mouse right-click", () => {
+    expect(
+      contextMenuPoint({ clientX: 120, clientY: 130, button: 2, pointerType: "mouse" }, reference),
+    ).toEqual({ x: 120, y: 130 });
+  });
+
+  it("takes the press point from a touch long-press", () => {
+    expect(
+      contextMenuPoint({ clientX: 90, clientY: 110, button: 0, pointerType: "touch" }, reference),
+    ).toEqual({ x: 90, y: 110 });
+  });
+
+  it("takes a right-click's coordinates when the event is a plain MouseEvent", () => {
+    expect(contextMenuPoint({ clientX: 150, clientY: 120, button: 2 }, reference)).toEqual({
+      x: 150,
+      y: 120,
+    });
+  });
+
+  it("anchors a keyboard open (Shift+F10, the Menu key) to the target's bottom start corner", () => {
+    expect(
+      contextMenuPoint({ clientX: 0, clientY: 0, button: 0, pointerType: "" }, reference),
+    ).toEqual({ x: 40, y: 144 });
+    expect(contextMenuPoint({ clientX: 0, clientY: 0, button: 0 }, reference)).toEqual({
+      x: 40,
+      y: 144,
+    });
+    expect(
+      contextMenuPoint({ clientX: 0, clientY: 0, button: 0, pointerType: "" }, reference, true),
+    ).toEqual({ x: 240, y: 144 });
+  });
+
+  it("has no point without a pointer or a reference", () => {
+    expect(contextMenuPoint({ clientX: 0, clientY: 0, button: 0 }, null)).toBeNull();
+  });
+});

package/src/FloatingPanel/pointAnchor.ts

@@ -0,0 +1,122 @@
+import { OVERLAY_ANCHOR_GAP } from "@multiplatform.one/theme";
+
+/**
+ * A panel opened at a POINT rather than from a trigger's box: the ContextMenu
+ * gesture (MPO-21 G5). layoutTokens.ts files a pointer-positioned context menu
+ * as a FREE overlay: content-sized, `OVERLAY_ANCHOR_GAP` from its anchor,
+ * flipping at the viewport edges instead of overflowing. The anchor here is a
+ * zero-size box at the point, so "start-aligned to the anchor" puts the
+ * panel's start edge on the pointer's x.
+ */
+export interface PanelPoint {
+  x: number;
+  y: number;
+}
+
+/** The box a panel must stay inside, already inset by padding and safe area. */
+export interface PanelBounds {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export function pointPanelLeft(
+  point: PanelPoint,
+  width: number,
+  bounds: PanelBounds,
+  rtl = false,
+): { left: number; alignEnd: boolean } {
+  const towardEnd = rtl ? point.x - width : point.x;
+  const towardStart = rtl ? point.x : point.x - width;
+  const fits = (left: number) => left >= bounds.left && left + width <= bounds.right;
+  const alignEnd = !fits(towardEnd) && fits(towardStart);
+  const raw = alignEnd ? towardStart : towardEnd;
+  return { left: Math.max(bounds.left, Math.min(raw, bounds.right - width)), alignEnd };
+}
+
+/** Below when it fits, above when only that fits, else the roomier side. */
+export function pointOpensUp(
+  point: PanelPoint,
+  height: number,
+  bounds: PanelBounds,
+  gap: number = OVERLAY_ANCHOR_GAP,
+): boolean {
+  const below = bounds.bottom - (point.y + gap);
+  const above = point.y - gap - bounds.top;
+  if (height <= below) return false;
+  if (height <= above) return true;
+  return above > below;
+}
+
+export interface PointPlacement {
+  left: number;
+  top: number;
+  maxHeight: number;
+  dropup: boolean;
+  alignEnd: boolean;
+}
+
+export function placeAtPoint({
+  point,
+  width,
+  height,
+  bounds,
+  gap = OVERLAY_ANCHOR_GAP,
+  rtl = false,
+}: {
+  point: PanelPoint;
+  width: number;
+  height: number;
+  bounds: PanelBounds;
+  gap?: number;
+  rtl?: boolean;
+}): PointPlacement {
+  const { left, alignEnd } = pointPanelLeft(point, width, bounds, rtl);
+  const dropup = pointOpensUp(point, height, bounds, gap);
+  const maxHeight = Math.max(
+    0,
+    dropup ? point.y - gap - bounds.top : bounds.bottom - (point.y + gap),
+  );
+  const top = dropup ? point.y - gap - Math.min(height, maxHeight) : point.y + gap;
+  return { left, top, maxHeight, dropup, alignEnd };
+}
+
+export interface ContextMenuEventLike {
+  clientX: number;
+  clientY: number;
+  button?: number;
+  pointerType?: string;
+}
+
+/**
+ * Where a `contextmenu` event asks the menu to open. A mouse right-click or a
+ * touch long-press carries the pointer's viewport coordinates. A keyboard open
+ * (Shift+F10, the Menu key) has no pointer: Chromium sends a PointerEvent with
+ * an empty `pointerType` aimed at the focused element's centre
+ * (`EventHandler::ShowNonLocatedContextMenu`). It opens from the target's
+ * bottom start corner. A plain MouseEvent counts as a pointer only when it is
+ * a right-click or carries coordinates.
+ */
+export function contextMenuPoint(
+  event: ContextMenuEventLike,
+  reference: PointReference | null,
+  rtl = false,
+): PanelPoint | null {
+  const fromPointer =
+    event.pointerType !== undefined
+      ? event.pointerType !== ""
+      : event.button === 2 || event.clientX !== 0 || event.clientY !== 0;
+  if (fromPointer) return { x: event.clientX, y: event.clientY };
+  return reference ? referenceCornerPoint(reference, rtl) : null;
+}
+
+export interface PointReference {
+  getBoundingClientRect(): { left: number; right: number; bottom: number };
+}
+
+/** The target's bottom start corner: where a menu with no pointer opens. */
+export function referenceCornerPoint(reference: PointReference, rtl = false): PanelPoint {
+  const rect = reference.getBoundingClientRect();
+  return { x: rtl ? rect.right : rect.left, y: rect.bottom };
+}

package/src/FloatingPanel/useFloatingPanel.ts

@@ -104,6 +104,12 @@ export interface UseFloatingPanelOptions {
    * at the compact space step.
    */
   compact?: boolean;
+  /**
+   * The panel opens at a point, not from the trigger's box (ContextMenu). It
+   * shares no corner with the trigger, so its radius stays the CONTAINER-CAP
+   * value instead of dropping to the trigger's drawn arc.
+   */
+  freeOverlay?: boolean;
 }
 
 /** One place that resolves the deprecated boolean onto the three modes, so
@@ -225,6 +231,7 @@ export function useFloatingPanel({
   widthMode: widthModeProp,
   fitContent,
   compact,
+  freeOverlay = false,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
   const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
   const { knobProps } = useResolvedKnobs({ compact });
@@ -295,14 +302,14 @@ export function useFloatingPanel({
   const setupForOpen = useCallback(() => {
     computePlacement();
     if (canUseDom && triggerRef.current) {
-      setMeasuredRadius(measureDrawnRadius(triggerRef.current));
+      setMeasuredRadius(freeOverlay ? null : measureDrawnRadius(triggerRef.current));
     }
     onBeforeOpenRef.current?.();
     if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
     floatingStyleRef.current = {};
     initializingRef.current = true;
     setMounted(true);
-  }, [computePlacement]);
+  }, [computePlacement, freeOverlay]);
 
   // ── Lifecycle effect ──────────────────────────────────────
 

package/src/fields/Combobox/Combobox.spec.tsx

@@ -227,6 +227,164 @@ describe("Combobox", () => {
     });
   });
 
+  describe("creatable", () => {
+    const initialWidth = window.innerWidth;
+    afterEach(() => {
+      window.innerWidth = initialWidth;
+    });
+
+    const toTag = (next: string) => ({ value: next.toLowerCase(), label: next });
+
+    async function openAndType(text: string) {
+      const trigger = document.body.querySelector<HTMLElement>('[role="combobox"]');
+      expect(trigger).toBeTruthy();
+      await act(async () => fireEvent.keyDown(trigger!, { key: "Enter" }));
+      const search = document.body.querySelector("input");
+      expect(search).toBeTruthy();
+      await act(async () => fireEvent.change(search!, { target: { value: text } }));
+      return search!;
+    }
+
+    function triggerText() {
+      return document.body.querySelector('[data-testid="combobox-trigger"]')?.textContent;
+    }
+
+    function createRow(text: string) {
+      return [...document.body.querySelectorAll('[role="option"]')].find(
+        (el) => el.textContent?.trim() === `Create "${text}"`,
+      );
+    }
+
+    for (const [surface, width] of [
+      ["panel", 1200],
+      ["sheet", 500],
+    ] as const) {
+      it(`${surface}: a created option shows in the trigger of an uncontrolled combobox`, async () => {
+        window.innerWidth = width;
+        const onCreate = vi.fn(toTag);
+        const onChange = vi.fn();
+        renderWithProviders(
+          <Combobox
+            label="Fruit"
+            options={options}
+            placeholder="Pick a fruit"
+            creatable
+            onCreate={onCreate}
+            onChange={onChange}
+          />,
+        );
+        await openAndType("Durian");
+        const row = createRow("Durian");
+        expect(row).toBeTruthy();
+        await act(async () => fireEvent.click(row!));
+
+        expect(onCreate).toHaveBeenCalledWith("Durian");
+        expect(onChange).toHaveBeenCalledWith("durian");
+        expect(triggerText()).toContain("Durian");
+        expect(triggerText()).not.toContain("Pick a fruit");
+      });
+
+      it(`${surface}: a created option is listed and selected, and is not offered again`, async () => {
+        window.innerWidth = width;
+        const onCreate = vi.fn(toTag);
+        renderWithProviders(
+          <Combobox label="Fruit" options={options} creatable onCreate={onCreate} />,
+        );
+        const search = await openAndType("Durian");
+        await act(async () => fireEvent.keyDown(search, { key: "Enter" }));
+        expect(onCreate).toHaveBeenCalledTimes(1);
+
+        await openAndType("durian");
+        expect(createRow("durian")).toBeUndefined();
+        const listed = [...document.body.querySelectorAll('[role="option"]')].find(
+          (el) => el.textContent?.trim() === "Durian",
+        );
+        expect(listed?.getAttribute("aria-selected")).toBe("true");
+      });
+    }
+
+    it("multiple: a created option's chip shows its label, not its value", async () => {
+      window.innerWidth = 1200;
+      const onChange = vi.fn();
+      renderWithProviders(
+        <Combobox
+          label="Fruits"
+          options={options}
+          multiple
+          creatable
+          onCreate={toTag}
+          onChange={onChange}
+        />,
+      );
+      const search = await openAndType("Durian");
+      await act(async () => fireEvent.keyDown(search, { key: "Enter" }));
+      expect(onChange).toHaveBeenCalledWith(["durian"]);
+      expect(triggerText()).toContain("Durian");
+    });
+
+    it("a create that the host handles itself still closes a single-value panel", async () => {
+      window.innerWidth = 1200;
+      const onCreate = vi.fn(() => undefined);
+      renderWithProviders(
+        <Combobox label="Customer" options={options} creatable onCreate={onCreate} />,
+      );
+      const search = await openAndType("Acme");
+      await act(async () => fireEvent.keyDown(search, { key: "Enter" }));
+      expect(onCreate).toHaveBeenCalledWith("Acme");
+      expect(document.body.querySelector('[role="combobox"]')?.getAttribute("aria-expanded")).toBe(
+        "false",
+      );
+    });
+
+    for (const [surface, width] of [
+      ["panel", 1200],
+      ["sheet", 500],
+    ] as const) {
+      it(`${surface}: a space in the typed text is typed, so a two-word option can be created`, async () => {
+        window.innerWidth = width;
+        const onCreate = vi.fn(toTag);
+        renderWithProviders(
+          <Combobox label="Author" options={options} creatable onCreate={onCreate} />,
+        );
+        const search = await openAndType("Octavia");
+        let typed = false;
+        await act(async () => {
+          typed = fireEvent.keyDown(search, { key: " ", code: "Space" });
+        });
+        expect(typed).toBe(true);
+        expect(onCreate).not.toHaveBeenCalled();
+        expect(
+          document.body.querySelector('[role="combobox"]')?.getAttribute("aria-expanded"),
+        ).toBe("true");
+
+        await act(async () => fireEvent.change(search, { target: { value: "Octavia Butler" } }));
+        await act(async () => fireEvent.keyDown(search, { key: "Enter" }));
+        expect(onCreate).toHaveBeenCalledWith("Octavia Butler");
+        expect(triggerText()).toContain("Octavia Butler");
+      });
+    }
+  });
+
+  describe("search typing", () => {
+    it("a space after search text is typed, not taken as a pick", async () => {
+      window.innerWidth = 1200;
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Combobox label="Fruit" options={options} open onChange={onChange} />,
+      );
+      await act(async () => {});
+      const search = result.baseElement.querySelector("input");
+      expect(search).toBeTruthy();
+      await act(async () => fireEvent.change(search!, { target: { value: "Ban" } }));
+      let typed = false;
+      await act(async () => {
+        typed = fireEvent.keyDown(search!, { key: " ", code: "Space" });
+      });
+      expect(typed).toBe(true);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
   describe("LC-71 / APG combobox", () => {
     it("points aria-activedescendant at the active option id", async () => {
       const result = renderWithProviders(

package/src/fields/Combobox/index.tsx

@@ -225,7 +225,11 @@ export interface ComboboxProps {
   compact?: boolean;
   /** Allow creating new options when search doesn't match existing options */
   creatable?: boolean;
-  /** Called when a new option is created. Should return the new option to be added. */
+  /**
+   * Called with the typed text. Return an option to select it; the Combobox
+   * keeps it listed until `options` carries it. Return nothing to handle
+   * creation yourself (a single-value panel still closes).
+   */
   onCreate?: (value: string) => ComboboxOption | void;
   /** Label template for the create option. Use {value} as placeholder. Default: 'Create "{value}"' */
   createLabel?: string;
@@ -596,19 +600,20 @@ function FloatingComboboxCore({
   }, [creatable, filter, options]);
 
   const handleCreate = useCallback(() => {
-    if (!onCreate || !filter.trim()) return;
-    const newOption = onCreate(filter.trim());
-    if (newOption) {
-      if (multiple) {
-        const current = Array.isArray(value) ? value : value ? [value] : [];
-        onValueChange?.([...current, newOption.value]);
-      } else {
-        onValueChange?.(newOption.value);
-        setOpen(false);
-      }
+    const typed = filter.trim();
+    if (!onCreate || !typed) return;
+    const newOption = onCreate(typed);
+    if (newOption && multiple) {
+      const current = Array.isArray(value) ? value : value ? [value] : [];
+      if (!current.includes(newOption.value)) onValueChange?.([...current, newOption.value]);
+    } else if (newOption) {
+      onValueChange?.(newOption.value);
     }
+    // A void onCreate hands creation to the host (a dialog, a server round
+    // trip); a single-value panel left open would sit over that UI.
+    if (!multiple) setOpen(false);
     setInternalFilter("");
-  }, [onCreate, filter, multiple, value, onValueChange]);
+  }, [onCreate, filter, multiple, value, onValueChange, setOpen]);
 
   // Multi-select: selected at front ONLY when first opening. Never reorder when searching or selecting.
   const initialOrderRef = useRef<ComboboxOption[] | null>(null);
@@ -1285,6 +1290,9 @@ function FloatingComboboxCore({
         lastKeyboardNavTimeRef.current = Date.now();
         setActiveIndex(Math.max(0, totalNavigableItems - 1));
       } else if (event.key === "Enter" || event.key === " ") {
+        // Space picks only from an empty search; after text it is part of
+        // the query (and of a value being created), as it is in the sheet.
+        if (event.key === " " && filter.trim()) return;
         event.preventDefault();
         if (activeIndex === createOptionIndex && showCreateOption) {
           handleCreate();
@@ -1312,6 +1320,7 @@ function FloatingComboboxCore({
       createOptionIndex,
       showCreateOption,
       multiple,
+      filter,
       setKeyboardNav,
     ],
   );
@@ -1909,19 +1918,20 @@ function NativeComboboxCore({
   }, [creatable, filter, options]);
 
   const handleCreate = useCallback(() => {
-    if (!onCreate || !filter.trim()) return;
-    const newOption = onCreate(filter.trim());
-    if (newOption) {
-      if (multiple) {
-        const current = Array.isArray(value) ? value : value ? [value] : [];
-        onValueChange?.([...current, newOption.value]);
-      } else {
-        onValueChange?.(newOption.value);
-        setOpen(false);
-      }
+    const typed = filter.trim();
+    if (!onCreate || !typed) return;
+    const newOption = onCreate(typed);
+    if (newOption && multiple) {
+      const current = Array.isArray(value) ? value : value ? [value] : [];
+      if (!current.includes(newOption.value)) onValueChange?.([...current, newOption.value]);
+    } else if (newOption) {
+      onValueChange?.(newOption.value);
     }
+    // A void onCreate hands creation to the host (a dialog, a server round
+    // trip); a single-value panel left open would sit over that UI.
+    if (!multiple) setOpen(false);
     setInternalFilter("");
-  }, [onCreate, filter, multiple, value, onValueChange]);
+  }, [onCreate, filter, multiple, value, onValueChange, setOpen]);
 
   // Async-search comboboxes (Awesomebar, Link fields) open with few or no
   // options and stream results as the user types — open the sheet tall
@@ -2639,6 +2649,25 @@ export function Combobox({
     defaultValue,
   );
   const isControlled = valueProp !== undefined;
+  const [createdOptions, setCreatedOptions] = useState<ComboboxOption[]>([]);
+  const knownOptions = useMemo(() => {
+    const unlisted = createdOptions.filter((c) => !options.some((o) => o.value === c.value));
+    return unlisted.length ? [...options, ...unlisted] : options;
+  }, [options, createdOptions]);
+  const handleCreateOption = useMemo(
+    () =>
+      onCreate &&
+      ((typed: string) => {
+        const created = onCreate(typed);
+        if (created) {
+          setCreatedOptions((prev) =>
+            prev.some((o) => o.value === created.value) ? prev : [...prev, created],
+          );
+        }
+        return created;
+      }),
+    [onCreate],
+  );
   const viewportGtSm = useViewportGtSm();
   // Sheet on native and below `$sm` (viewport < 640, OVERLAY_BREAKPOINT).
   // Floating from `$sm` up.
@@ -2659,7 +2688,7 @@ export function Combobox({
   const renderReadOnly = (selectValue: string | string[] | undefined) => {
     if (multiple && Array.isArray(selectValue)) {
       const labels = selectValue
-        .map((v) => options.find((o) => o.value === v)?.label ?? v)
+        .map((v) => knownOptions.find((o) => o.value === v)?.label ?? v)
         .join(", ");
       return (
         <Text
@@ -2675,7 +2704,7 @@ export function Combobox({
       );
     }
     const sv = typeof selectValue === "string" ? selectValue : undefined;
-    const selected = options.find((option) => option.value === sv);
+    const selected = knownOptions.find((option) => option.value === sv);
     const displayText = selected?.label ?? (sv ? (valueLabel ?? sv) : "-");
     return (
       <Text
@@ -2700,7 +2729,7 @@ export function Combobox({
     const ComboboxCore = shouldUseSheet ? NativeComboboxCore : FloatingComboboxCore;
     return (
       <ComboboxCore
-        options={options}
+        options={onSearch ? options : knownOptions}
         value={selectValue}
         onValueChange={(value) => {
           if (disabled) return;
@@ -2717,7 +2746,7 @@ export function Combobox({
         onSearch={onSearch}
         loading={loading}
         searchError={searchError}
-        valueLabel={valueLabel}
+        valueLabel={valueLabel ?? createdOptions.find((o) => o.value === selectValue)?.label}
         clearable={clearable}
         onLoadMore={onLoadMore}
         hasMore={hasMore}
@@ -2734,7 +2763,7 @@ export function Combobox({
         selectedOrder={selectedOrder}
         dismissible={dismissible}
         creatable={creatable}
-        onCreate={onCreate}
+        onCreate={handleCreateOption}
         createLabel={createLabel}
         hideSearch={hideSearch}
         searchValue={searchValue}

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

@@ -1,8 +1,10 @@
 /**
  * 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.
+ * 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.
  */
 
 import { cleanup } from "@testing-library/react";
@@ -36,10 +38,10 @@ 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 27 pt thumb at default knobs", () => {
+  it("paints a UISwitch-sized 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: 27, height: 27 });
+    expect(thumb).toEqual({ width: 29, height: 29 });
   });
 
   it("keeps the 51 × 31 paint inside a 44 pt press target on touch", () => {
@@ -55,4 +57,11 @@ describe("Switch footprint on native (MPO-356)", () => {
     expect(small).toEqual({ width: 41, height: 25 });
     expect(large).toEqual({ width: 61, height: 37 });
   });
+
+  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`, () => {
+      const { track, thumb } = mount({ size });
+      expect(thumb).toEqual({ width: track.height - 2, height: track.height - 2 });
+    });
+  }
 });

package/src/fields/Switch/footprint.ts

@@ -8,14 +8,14 @@ import { isWeb } from "tamagui";
  *
  * - 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.
+ * - 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.
  */
 const webSwitch = { heightRatio: 0.65, aspect: 2, rimGutter: 0 };
-const nativeSwitch = { heightRatio: 31 / 44, aspect: 51 / 31, rimGutter: 2 };
+const nativeSwitch = { heightRatio: 31 / 44, aspect: 51 / 31, rimGutter: 1 };
 
 export type SwitchFootprint = {
   trackHeight: number;