@multiplatform.one/forms 7.7.4 → 7.7.6

package/src/ContextualSaveBar/index.tsx

@@ -39,7 +39,7 @@ export interface ContextualSaveBarProps {
    * Form reads this; the bar itself does not.
    */
   onAutoCommit?: (name: string, value: unknown) => void;
-  /** Override the in-bar status line. */
+  /** Override normal dirty-state copy; saving and failures retain their status. */
   message?: string;
 }
 
@@ -83,7 +83,6 @@ function statusCopy(args: {
   dirty: number;
   override?: string;
 }): { text: string; failed: boolean; qualifier?: string } {
-  if (args.override) return { text: args.override, failed: false };
   if (args.isSubmitting) return { text: t("Saving…"), failed: false };
   if (args.saveError) {
     return {
@@ -101,6 +100,7 @@ function statusCopy(args: {
       failed: true,
     };
   }
+  if (args.override) return { text: args.override, failed: false };
   const qualifier =
     args.dirty > 0
       ? args.dirty === 1
@@ -236,11 +236,13 @@ export function ContextualSaveBar({
             data-mp-savebar-bottom-radius="0"
             role="region"
             aria-label={t("Unsaved changes")}
-            position="sticky"
-            bottom={0}
+            // Tamagui maps sticky to absolute on native; keep the dock in flow there.
+            position={isWeb ? "sticky" : "relative"}
+            bottom={isWeb ? 0 : undefined}
             width="100%"
             zIndex={zIndex.sheet}
-            alignItems="center"
+            flexDirection={copy.failed ? "column" : "row"}
+            alignItems={copy.failed ? "stretch" : "center"}
             paddingTop="$2.5"
             paddingHorizontal={padX as never}
             paddingBottom="$2.5"
@@ -266,15 +268,17 @@ export function ContextualSaveBar({
               ...(elevationProps.style as object | undefined),
             }}
           >
-            <XStack flex={1} minWidth={0} alignItems="baseline" gap="$2">
+            <XStack flex={copy.failed ? undefined : 1} minWidth={0} alignItems="baseline" gap="$2">
               <Text
                 role="status"
                 {...knobProps.body}
                 fontSize="$4"
                 lineHeight="$4"
                 color={copy.failed ? formCommonColors.error : "$color"}
-                numberOfLines={1}
-                ellipsizeMode="tail"
+                flexShrink={1}
+                numberOfLines={copy.failed ? undefined : 1}
+                ellipsizeMode={copy.failed ? undefined : "tail"}
+                {...(isWeb && copy.failed ? { style: { overflowWrap: "anywhere" } } : {})}
               >
                 {copy.text}
               </Text>

package/src/ContextualSaveBar/nativeFlow.spec.tsx

@@ -0,0 +1,20 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { expect, it, vi } from "vitest";
+import { Form } from "../Form";
+import { ContextualSaveBar } from "./index";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+it("reserves native layout space instead of mapping a sticky dock to absolute", () => {
+  const view = renderWithProviders(
+    <Form formOptions={{ defaultValues: { name: "example" } }}>
+      <ContextualSaveBar forceVisible />
+    </Form>,
+  );
+  const bar = view.container.querySelector("[data-mp-contextual-savebar]")!;
+  expect(getComputedStyle(bar).position).toBe("relative");
+  expect(getComputedStyle(bar).bottom).not.toBe("0px");
+});

package/src/InputParts/index.tsx

@@ -443,7 +443,10 @@ const InputGroupImpl = InputGroupFrame.styleable<{
   // paints outside overflow:hidden, so the ring clip can stay.
   const paintsRing = !grouped && !inTableCell;
   const hasElevation = knobProps.elevation != null;
-  const boxOverflow: BoxOverflow = paintsRing && !(hasElevation && !isWeb) ? "hidden" : "visible";
+  const hasWebPressSlop =
+    isWeb && (props as { "data-mp-press-slop"?: string })["data-mp-press-slop"] != null;
+  const boxOverflow: BoxOverflow =
+    paintsRing && !(hasElevation && !isWeb) && !hasWebPressSlop ? "hidden" : "visible";
   const ringMode = boxRingMode(boxOverflow, paintsRing);
   if (isWeb) {
     ensureCompositeFocusRing();
@@ -536,6 +539,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
             minWidth={0}
             elevation={undefined}
             {...props}
+            {...controlFragment}
             {...passthroughSizeProps}
             {...insetPadProps}
             {...sizeRecipeEscapeOverride}

package/src/fields/Combobox/index.tsx

@@ -37,7 +37,9 @@ import {
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Pressable as RNPressable } from "react-native";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
+import { Button } from "../../Button";
 import { Chip, type ChipProps } from "../../Chip";
+import { pickerTriggerContract } from "../../shared/pickerTriggerContract";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -367,7 +369,7 @@ const ComboboxItem = memo(function ComboboxItem({
       active={isActive}
       aria-selected={isSelected}
       data-state={isSelected ? "active" : "inactive"}
-      size={ctx.knobProps.sizeToken}
+      height={ctx.knobProps.control.height}
       {...listItemRingProps(Boolean(keyboardRing))}
       {...(suppressHover
         ? {
@@ -1373,17 +1375,13 @@ function FloatingComboboxCore({
       // attaches below instead (MPO-38), leaving the trigger on screen and
       // focusable, so it keeps its ring.
       suppressFocusRing={open && !multiple}
+      {...pickerTriggerContract(knobProps.control.height)}
       {...(inTableCell
-        ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-          { minHeight: 44 }
+        ? // Chromeless in cells.
+          {}
         : {
             borderRadius: knobProps.borderRadius.borderRadius,
             borderWidth: knobProps.borderRadius.borderWidth,
-            // LC-54 PRESS-FLOOR: compact/small size tokens render a sub-44
-            // trigger (the 36px "Allocated To" quick filter breaking the
-            // list's 44px control row) — same floor the house Select holds
-            // on both its trigger variants.
-            minHeight: 44,
           })}
     >
       <SyncFocusToOpen open={open} />
@@ -1420,6 +1418,7 @@ function FloatingComboboxCore({
           </View>
         ) : (
           <Text
+            {...knobProps.controlType}
             fontFamily={knobProps.body.fontFamily}
             fontWeight={knobProps.body.fontWeight}
             color={
@@ -1435,11 +1434,13 @@ function FloatingComboboxCore({
         )}
       </View>
       {clearable && !multiple && !disabled && typeof value === "string" && value !== "" && (
-        <View
-          paddingInlineEnd="$1"
+        <Button
+          size={knobProps.control.height}
+          chromeless
+          {...pickerTriggerContract(knobProps.control.height)}
+          icon={<XIcon size={14} />}
           alignSelf="center"
           cursor="pointer"
-          role="button"
           tabIndex={-1}
           aria-label={t("Clear")}
           opacity={0.6}
@@ -1454,9 +1455,7 @@ function FloatingComboboxCore({
             e.stopPropagation?.();
             onValueChange?.("");
           }}
-        >
-          <XIcon size={14} />
-        </View>
+        />
       )}
       <View paddingInlineEnd="$2" alignSelf="center">
         <CaretDownIcon size={16} color={glyphColor} />
@@ -1607,7 +1606,7 @@ function FloatingComboboxCore({
                       id={comboboxOptionId(id, createOptionIndex)}
                       selected={false}
                       active={createOptionIndex === activeIndex}
-                      size={knobProps.sizeToken}
+                      height={knobProps.control.height}
                       data-combobox-index={createOptionIndex}
                       data-active={createOptionIndex === activeIndex}
                       {...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing)}
@@ -1649,7 +1648,7 @@ function FloatingComboboxCore({
                   id={comboboxOptionId(id, createOptionIndex)}
                   selected={false}
                   active={createOptionIndex === activeIndex}
-                  size={knobProps.sizeToken}
+                  height={knobProps.control.height}
                   data-combobox-index={createOptionIndex}
                   data-active={createOptionIndex === activeIndex}
                   {...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing)}
@@ -1736,7 +1735,7 @@ const comboboxSearchHeader = (
     alignItems="center"
     gap="$2"
     paddingHorizontal="$3"
-    height={knobProps.sizeToken}
+    height={knobProps.control.height}
     borderBottomWidth={1}
     borderBottomColor={formCommonColors.divider}
   >
@@ -2169,8 +2168,8 @@ function NativeComboboxCore({
                 data-active={active}
                 {...listItemRingProps(active && listKeyboardRing)}
                 {...(option.description
-                  ? { minHeight: knobProps.sizeToken, paddingVertical: "$2" }
-                  : { height: knobProps.sizeToken })}
+                  ? { minHeight: knobProps.control.height, paddingVertical: "$2" }
+                  : { height: knobProps.control.height })}
                 onPress={isWeb ? () => handleSelect(option) : undefined}
                 onMouseEnter={() => {
                   setKeyboardNav(false);
@@ -2262,7 +2261,7 @@ function NativeComboboxCore({
               alignItems="center"
               gap="$2"
               paddingHorizontal="$3"
-              height={knobProps.sizeToken}
+              height={knobProps.control.height}
               role="option"
               id={comboboxOptionId(id, createOptionIndex)}
               data-combobox-index={createOptionIndex}
@@ -2307,7 +2306,7 @@ function NativeComboboxCore({
           alignItems="center"
           gap="$2"
           paddingHorizontal="$3"
-          height={knobProps.sizeToken}
+          height={knobProps.control.height}
           role="option"
           id={comboboxOptionId(id, createOptionIndex)}
           data-combobox-index={createOptionIndex}
@@ -2395,9 +2394,10 @@ function NativeComboboxCore({
       // paint — it would ghost around the panel's corners. A multi-select
       // panel attaches below instead (MPO-38), so it keeps its ring.
       suppressFocusRing={open && !multiple}
+      {...pickerTriggerContract(knobProps.control.height)}
       {...(inTableCell
-        ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-          { minHeight: 44 }
+        ? // Chromeless in cells.
+          {}
         : {
             borderRadius: knobProps.borderRadius.borderRadius,
             borderWidth: knobProps.borderRadius.borderWidth,
@@ -2424,9 +2424,9 @@ function NativeComboboxCore({
             tabIndex: disabled ? -1 : 0,
           }
         : { importantForAccessibility: "no" as const })}
-      // Web: trigger owns toggle. Native: FloatingPanel.native owns open
-      // (avoid double-toggle that batches open then immediately closed).
-      onPress={isWeb && !disabled ? () => handleOpenChange(!open) : undefined}
+      // Sheet capture opens first on web, so this opener is idempotent.
+      // Native delegates the gesture to FloatingPanel.
+      onPress={isWeb && !disabled ? () => handleOpenChange(true) : undefined}
       onKeyDown={(e: React.KeyboardEvent) => {
         if (
           ["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) ||
@@ -2471,6 +2471,7 @@ function NativeComboboxCore({
           </View>
         ) : (
           <Text
+            {...knobProps.controlType}
             fontFamily={knobProps.body.fontFamily}
             fontWeight={knobProps.body.fontWeight}
             color={
@@ -2484,24 +2485,6 @@ function NativeComboboxCore({
           </Text>
         )}
       </View>
-      {clearable && !multiple && !disabled && typeof value === "string" && value !== "" && (
-        <View
-          paddingInlineEnd="$1"
-          alignSelf="center"
-          cursor="pointer"
-          role="button"
-          tabIndex={-1}
-          aria-label={t("Clear")}
-          opacity={0.6}
-          hoverStyle={{ opacity: 1 }}
-          onPress={(e: any) => {
-            e.stopPropagation?.();
-            onValueChange?.("");
-          }}
-        >
-          <XIcon size={14} />
-        </View>
-      )}
       <View paddingInlineEnd="$2" alignSelf="center">
         <CaretDownIcon size={16} color={glyphColor} />
       </View>
@@ -2523,6 +2506,19 @@ function NativeComboboxCore({
       // the user types, so a content-fit sheet would open as a sliver.
       sheetFill={Boolean(onSearch)}
       trigger={triggerContent}
+      triggerEnd={
+        clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? (
+          <Button
+            size={knobProps.sizeToken}
+            chromeless
+            minWidth={44}
+            minHeight={44}
+            aria-label={t("Clear")}
+            icon={<XIcon size={14} />}
+            onPress={() => onValueChange?.("")}
+          />
+        ) : undefined
+      }
       triggerA11y={{
         label: ariaLabel ?? fieldA11y?.label,
         value: triggerValueText,

package/src/fields/Select/index.tsx

@@ -12,7 +12,6 @@ import {
 } from "@floating-ui/react";
 import type { AnyFormApi } from "../../types";
 import {
-  MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
   menuRowFrame,
@@ -31,6 +30,7 @@ import * as ReactNative from "react-native";
 import { Platform, Pressable as RNPressable } from "react-native";
 import { Paragraph, Text, View, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip, type ChipProps } from "../../Chip";
+import { pickerTriggerContract } from "../../shared/pickerTriggerContract";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Input as InputParts, FocusContext } from "../../InputParts";
@@ -421,7 +421,7 @@ const SelectItem = memo(function SelectItem({
       active={isActive}
       aria-selected={isSelected}
       data-state={isSelected ? "active" : "inactive"}
-      size={ctx.knobProps.sizeToken}
+      height={ctx.knobProps.control.height}
       // LC-18 KNOB-TOTALITY (UX-021): menu rows re-rhythm with the space knob —
       // horizontal inset from the panelPadding token (SP-EDGE, sidebar-row
       // precedent) over menuRowFrame's static $3; in-row gap rides the gap
@@ -1005,13 +1005,9 @@ function FloatingSelectCore({
         // must not paint — it would ghost around the panel's corners.
         suppressFocusRing={open}
         size={knobProps.sizeToken}
-        // LC-54 PRESS-FLOOR: the size knob may shrink chrome (compact → $3
-        // = 36px) but the trigger's press target never drops below 44 —
-        // same minHeight floor the house Button holds. Without it a compact
-        // Select sat 36px beside 44px Inputs/Buttons in one control row.
-        minHeight={MIN_PRESS_TARGET}
+        {...pickerTriggerContract(knobProps.control.height)}
         {...(inTableCell
-          ? // Chromeless in cells (the floor above still applies).
+          ? // Chromeless in cells.
             {}
           : {
               borderRadius: knobProps.borderRadius.borderRadius,
@@ -1054,6 +1050,7 @@ function FloatingSelectCore({
             </View>
           ) : (
             <Text
+              {...knobProps.controlType}
               fontFamily={knobProps.body.fontFamily}
               fontWeight={knobProps.body.fontWeight}
               color={selectedOption ? textColor : formCommonColors.muted}
@@ -1370,7 +1367,7 @@ function NativeSelectCore({
             // menu rows — panelPadding inset + gap fragment.
             {...knobProps.gap}
             paddingHorizontal={knobProps.panelPadding.padding}
-            height={knobProps.sizeToken}
+            height={knobProps.control.height}
             onPress={isWeb ? () => handleSelect(option.value) : undefined}
             onMouseEnter={() => setActiveIndex(i)}
             onPointerDown={isWeb ? () => setKbNav(false) : undefined}
@@ -1467,7 +1464,7 @@ function NativeSelectCore({
         <InputParts.Box
           disabled={disabled}
           size={knobProps.sizeToken}
-          minHeight={MIN_PRESS_TARGET}
+          {...pickerTriggerContract(knobProps.control.height)}
           pointerEvents="none"
           {...(inTableCell
             ? {}
@@ -1486,6 +1483,7 @@ function NativeSelectCore({
             alignItems="flex-start"
           >
             <Text
+              {...knobProps.controlType}
               fontFamily={knobProps.body.fontFamily}
               fontWeight={knobProps.body.fontWeight}
               color={selectedOption ? formCommonColors.text : formCommonColors.muted}
@@ -1519,9 +1517,7 @@ function NativeSelectCore({
         <InputParts.Box
           disabled={disabled}
           size={knobProps.sizeToken}
-          // LC-54 PRESS-FLOOR: ≥44px trigger target at every size (matches
-          // the web trigger branch above).
-          minHeight={MIN_PRESS_TARGET}
+          {...pickerTriggerContract(knobProps.control.height)}
           {...(inTableCell
             ? {}
             : {
@@ -1551,11 +1547,9 @@ function NativeSelectCore({
                 tabIndex: disabled ? -1 : 0,
               }
             : { importantForAccessibility: "no" as const })}
-          // Web: trigger owns toggle. Native: FloatingPanel.native owns the
-          // open gesture (pointerEvents="none" on the trigger) — a second
-          // setOpen(prev => !prev) here double-toggles and the sheet never
-          // appears (batched true then !prev → false).
-          onPress={isWeb && !disabled ? () => setOpen((prev) => !prev) : undefined}
+          // Sheet capture opens first on web. Keep this opener idempotent;
+          // native delegates the gesture to FloatingPanel's Pressable.
+          onPress={isWeb && !disabled ? () => setOpen(true) : undefined}
           onFocus={isWeb ? onTriggerFocus : undefined}
           onBlur={isWeb ? onTriggerBlur : undefined}
           onPointerDown={isWeb ? onTriggerPointerDown : undefined}
@@ -1606,6 +1600,7 @@ function NativeSelectCore({
               </View>
             ) : (
               <Text
+                {...knobProps.controlType}
                 fontFamily={knobProps.body.fontFamily}
                 fontWeight={knobProps.body.fontWeight}
                 color={selectedOption ? textColor : formCommonColors.muted}

package/src/fields/pickerActivation.spec.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Select } from "./Select";
+import { Combobox } from "./Combobox";
+
+vi.mock("@multiplatform.one/theme", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/theme")>();
+  return {
+    ...actual,
+    useResolvedKnobs: (...args: Parameters<typeof actual.useResolvedKnobs>) => {
+      const resolved = actual.useResolvedKnobs(...args);
+      return {
+        ...resolved,
+        knobProps: {
+          ...resolved.knobProps,
+          control: { ...resolved.knobProps.control, height: 37 },
+        },
+      };
+    },
+  };
+});
+
+const options = [
+  { value: "alpha", label: "Alpha" },
+  { value: "beta", label: "Beta" },
+];
+const originalWidth = window.innerWidth;
+beforeEach(() => Object.defineProperty(window, "innerWidth", { configurable: true, value: 390 }));
+afterEach(() =>
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: originalWidth }),
+);
+
+function ClearHarness() {
+  const [value, setValue] = useState("alpha");
+  return (
+    <>
+      <Combobox
+        aria-label="Choice"
+        options={options}
+        value={value}
+        onValueChange={(next) => {
+          if (typeof next === "string") setValue(next);
+        }}
+        clearable
+      />
+      <span>Selected:{value || "none"}</span>
+    </>
+  );
+}
+
+describe("sheet picker pointer activation", () => {
+  for (const [name, Picker] of [
+    ["Select", Select],
+    ["Combobox", Combobox],
+  ] as const) {
+    it(`${name} opens once when the real trigger is clicked`, async () => {
+      const result = renderWithProviders(<Picker aria-label="Choice" options={options} />);
+      const trigger = result.getByRole("combobox", { name: "Choice" });
+      fireEvent.click(trigger, { detail: 1 });
+      await waitFor(() => expect(trigger.getAttribute("aria-expanded")).toBe("true"));
+    });
+    it(`${name} keeps keyboard opening and ignores disabled clicks`, () => {
+      const result = renderWithProviders(<Picker aria-label="Choice" options={options} />);
+      fireEvent.keyDown(result.getByRole("combobox"), { key: " " });
+      expect(result.getByRole("combobox").getAttribute("aria-expanded")).toBe("true");
+      result.unmount();
+      const disabled = renderWithProviders(
+        <Picker aria-label="Choice" options={options} disabled />,
+      );
+      fireEvent.click(disabled.getByRole("combobox"), { detail: 1 });
+      expect(disabled.getByRole("combobox").getAttribute("aria-expanded")).toBe("false");
+    });
+  }
+  it("clear changes the value without opening the sheet", async () => {
+    const result = renderWithProviders(<ClearHarness />);
+    const clear = result.getByRole("button", { name: "Clear" });
+    expect(clear.className).toContain("_miw-44px");
+    expect(clear.className).toContain("_mih-44px");
+    fireEvent.click(clear, { detail: 1 });
+    await waitFor(() => expect(result.getByText("Selected:none")).toBeTruthy());
+    expect(result.getByRole("combobox", { name: "Choice" }).getAttribute("aria-expanded")).toBe(
+      "false",
+    );
+  });
+});
+
+it("desktop clear retains compact geometry and never opens on pointer down or click", async () => {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: 1200 });
+  const result = renderWithProviders(<ClearHarness />);
+  const trigger = result.getByRole("combobox", { name: "Choice" });
+  const clear = result.getByRole("button", { name: "Clear" });
+  expect(trigger.className).toContain("_h-37px");
+  expect(clear.className).toContain("_h-37px");
+  expect(clear.className).toContain("_miw-44px");
+  expect(clear.getAttribute("data-mp-press-slop")).toBe("4");
+  expect(clear.getAttribute("data-mp-press-axis")).toBe("vertical");
+  fireEvent.mouseDown(clear, { detail: 1 });
+  expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  fireEvent.mouseUp(clear, { detail: 1 });
+  fireEvent.click(clear, { detail: 1 });
+  await waitFor(() => expect(result.getByText("Selected:none")).toBeTruthy());
+  expect(trigger.getAttribute("aria-expanded")).toBe("false");
+});

package/src/fields/pickerDensity.spec.tsx

@@ -0,0 +1,86 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { Select } from "./Select";
+import { Combobox } from "./Combobox";
+
+const mode = vi.hoisted(() => ({ height: 37, fontSize: 14, table: false }));
+vi.mock("../shared/tableCellContext", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../shared/tableCellContext")>()),
+  useIsInTableCell: () => mode.table,
+}));
+
+vi.mock("@multiplatform.one/theme", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/theme")>();
+  return {
+    ...actual,
+    useResolvedKnobs: (...args: Parameters<typeof actual.useResolvedKnobs>) => {
+      const resolved = actual.useResolvedKnobs(...args);
+      return {
+        ...resolved,
+        knobProps: {
+          ...resolved.knobProps,
+          control: { ...resolved.knobProps.control, height: mode.height },
+          controlType: { ...resolved.knobProps.controlType, fontSize: mode.fontSize },
+        },
+      };
+    },
+  };
+});
+
+describe("picker desktop recipe sizing", () => {
+  for (const [name, Picker] of [
+    ["Select", Select],
+    ["Combobox", Combobox],
+  ] as const) {
+    for (const table of [false, true]) {
+      it(`${name} table=${table} honors the resolved height and label font without a desktop floor`, () => {
+        mode.table = table;
+        mode.height = 37;
+        mode.fontSize = 14;
+        const result = renderWithProviders(
+          <Picker
+            options={[
+              { value: "one", label: "First choice" },
+              { value: "two", label: "Second choice" },
+            ]}
+            value="one"
+          />,
+        );
+        const trigger = result.container.querySelector('[data-testid$="-trigger"]')!;
+        expect(trigger).toBeTruthy();
+        expect(trigger.className).not.toContain("_mih-44px");
+        expect(trigger.className).toContain("_h-37px");
+        expect(trigger.getAttribute("data-visual-height")).toBe("37");
+        expect(trigger.getAttribute("data-mp-press-slop")).toBe("4");
+        expect(trigger.getAttribute("data-mp-press-axis")).toBe("vertical");
+        expect(trigger.className).toContain("_miw-44px");
+        expect(trigger.className).toContain("_oy-visible");
+        const targetCss = document.getElementById("mp-button-press-slop")?.textContent;
+        expect(targetCss).toContain("isolation:isolate");
+        expect(targetCss).toContain("z-index:-1");
+        const label = result.getByText("First choice");
+        expect(label.className).toContain("_fos-14px");
+      });
+      it(`${name} table=${table} retains the shared touch recipe floor`, () => {
+        const recipe = sizeRecipeForToken("$3", { touch: true });
+        mode.height = recipe.height;
+        mode.fontSize = recipe.fontSize;
+        mode.table = table;
+        expect(recipe.height).toBeGreaterThanOrEqual(44);
+        const result = renderWithProviders(
+          <Picker
+            options={[
+              { value: "one", label: "First choice" },
+              { value: "two", label: "Second choice" },
+            ]}
+            value="one"
+          />,
+        );
+        const trigger = result.container.querySelector('[data-testid$="-trigger"]')!;
+        expect(trigger.className).toContain(`_h-${recipe.height}px`);
+        expect(trigger.getAttribute("data-press-floor")).toBe("box");
+      });
+    }
+  }
+});