@multiplatform.one/forms 7.34.3 → 7.35.0

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

@@ -0,0 +1,111 @@
+import { createRef, forwardRef, useImperativeHandle, type ComponentProps } from "react";
+import { act, fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { SearchInput, type SearchInputHandle } from "./index";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+const host = vi.hoisted(() => ({
+  focus: vi.fn(),
+  blur: vi.fn(),
+  autoFocus: undefined as boolean | undefined,
+}));
+
+vi.mock("../../InputParts", async (importOriginal) => {
+  const original = await importOriginal<typeof import("../../InputParts")>();
+  const NativeArea = forwardRef<SearchInputHandle, { autoFocus?: boolean }>(
+    function NativeArea(props, ref) {
+      useImperativeHandle(ref, () => ({ focus: host.focus, blur: host.blur }), []);
+      host.autoFocus = props.autoFocus;
+      return null;
+    },
+  );
+  const Input = Object.assign(
+    (props: ComponentProps<typeof original.Input>) => <original.Input {...props} />,
+    original.Input,
+    { Area: NativeArea },
+  );
+  return { ...original, Input };
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  host.autoFocus = undefined;
+});
+
+describe("SearchInput native focus API (FZ-7606)", () => {
+  it("delegates focus and blur to the native input handle", () => {
+    const ref = createRef<SearchInputHandle>();
+    renderWithProviders(<SearchInput ref={ref} />);
+    expect(host.focus).not.toHaveBeenCalled();
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    act(() => ref.current!.blur());
+    expect(host.blur).toHaveBeenCalledTimes(1);
+  });
+
+  it("delegates in the form-integrated branch", () => {
+    const ref = createRef<SearchInputHandle>();
+    renderWithProviders(
+      <Form formOptions={{ defaultValues: { q: "" } }} onSubmit={() => {}} submitText="Go">
+        <SearchInput ref={ref} name="q" label="Find" />
+      </Form>,
+    );
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    act(() => ref.current!.blur());
+    expect(host.blur).toHaveBeenCalledTimes(1);
+  });
+
+  it("passes autoFocus to the native input and respects inputProps overrides", () => {
+    const { rerender } = renderWithProviders(<SearchInput autoFocus />);
+    expect(host.autoFocus).toBe(true);
+    rerender(<SearchInput autoFocus inputProps={{ autoFocus: false }} />);
+    expect(host.autoFocus).toBe(false);
+    rerender(<SearchInput inputProps={{ autoFocus: true }} />);
+    expect(host.autoFocus).toBe(true);
+  });
+
+  it("does not focus while disabled and uses current disabled state", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { rerender } = renderWithProviders(<SearchInput ref={ref} disabled />);
+    act(() => ref.current!.focus());
+    expect(host.focus).not.toHaveBeenCalled();
+    rerender(<SearchInput ref={ref} />);
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    rerender(<SearchInput ref={ref} disabled />);
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    act(() => ref.current!.blur());
+    expect(host.blur).toHaveBeenCalledTimes(1);
+  });
+
+  it("tolerates a missing input while skeleton and focuses when ready", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { rerender, unmount } = renderWithProviders(<SearchInput ref={ref} skeleton />);
+    act(() => {
+      ref.current!.focus();
+      ref.current!.blur();
+    });
+    expect(host.focus).not.toHaveBeenCalled();
+    expect(host.blur).not.toHaveBeenCalled();
+    rerender(<SearchInput ref={ref} />);
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    unmount();
+    expect(ref.current).toBeNull();
+  });
+
+  it("still returns focus to the native input after clearing", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { getByRole } = renderWithProviders(<SearchInput ref={ref} defaultValue="query" />);
+    fireEvent.click(getByRole("button", { name: "Clear search" }));
+    expect(host.focus).toHaveBeenCalledTimes(1);
+  });
+});

package/src/fields/SearchInput/SearchInput.spec.tsx

@@ -1,13 +1,14 @@
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { fireEvent } from "@testing-library/react";
+import { createRef } from "react";
+import { act, fireEvent } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
+import { SIZE_RECIPE_TOKENS, Surface, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { useTheme } from "tamagui";
 import { Form } from "../../Form";
-import { SearchInput } from "./index";
+import { SearchInput, type SearchInputHandle } from "./index";
 
 const SEARCH_INPUT_SRC = readFileSync(
   join(dirname(fileURLToPath(import.meta.url)), "index.tsx"),
@@ -235,14 +236,14 @@ describe("SearchInput", () => {
     expect(chrome).toMatch(/mp-search-input/);
   });
 
-  it("default painted box is 44 tall; end-cap is the size-recipe square", () => {
+  it("default painted box is 40 tall; end-cap is the size-recipe square", () => {
     const result = renderWithProviders(<SearchInput defaultValue="abc" />);
     const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
     const clear = result.container.querySelector("[aria-label='Clear search']") as HTMLElement;
     if (!box || !clear) throw new Error("box or clear not found");
-    expect(box.getAttribute("data-visual-height")).toBe("44");
-    expect(clear.getAttribute("data-end-cap")).toBe("44");
-    expect(box.getAttribute("data-press-floor")).toBe("box");
+    expect(box.getAttribute("data-visual-height")).toBe("40");
+    expect(clear.getAttribute("data-end-cap")).toBe("40");
+    expect(box.getAttribute("data-press-floor")).toBe("slop");
   });
 
   it("end-cap square is generated from the size recipe at every token", () => {
@@ -260,22 +261,23 @@ describe("SearchInput", () => {
     }
   });
 
-  it("compact steps density and leaves size on the recipe; size ejects height", () => {
-    const compact = renderWithProviders(<SearchInput compact />);
-    const compactBox = compact.container.querySelector("[data-ring-target='box']") as HTMLElement;
-    expect(compactBox.getAttribute("data-density")).toBe("compact");
-    // LC-76: compact is density only — default size stays the medium recipe.
-    expect(compactBox.getAttribute("data-size")).toBe("$4");
+  it("size is Tamagui's own token, clamped by a Surface ceiling", () => {
+    const plain = renderWithProviders(<SearchInput />);
+    const plainBox = plain.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(plainBox.getAttribute("data-size-token")).toBe("$true");
+    expect(plainBox.hasAttribute("data-density")).toBe(false);
 
     const sized = renderWithProviders(<SearchInput size="$5" />);
     const sizedBox = sized.container.querySelector("[data-ring-target='box']") as HTMLElement;
-    expect(sizedBox.getAttribute("data-density")).toBe("comfortable");
-    expect(sizedBox.getAttribute("data-size")).toBe("$5");
+    expect(sizedBox.getAttribute("data-size-token")).toBe("$5");
 
-    const both = renderWithProviders(<SearchInput compact size="$5" />);
-    const bothBox = both.container.querySelector("[data-ring-target='box']") as HTMLElement;
-    expect(bothBox.getAttribute("data-density")).toBe("compact");
-    expect(bothBox.getAttribute("data-size")).toBe("$5");
+    const clamped = renderWithProviders(
+      <Surface size="$3">
+        <SearchInput size="$5" />
+      </Surface>,
+    );
+    const clampedBox = clamped.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(clampedBox.getAttribute("data-size-token")).toBe("$3");
   });
 
   it("renders skeleton without a searchbox (LC-20)", () => {
@@ -306,3 +308,88 @@ describe("SearchInput", () => {
     expect(onChange).toHaveBeenCalledWith("abc");
   });
 });
+
+describe("SearchInput focus API (FZ-7606)", () => {
+  it("focuses and blurs the searchbox through its public ref", () => {
+    const ref = createRef<SearchInputHandle>();
+    const onFocus = vi.fn();
+    const onBlur = vi.fn();
+    const { getByRole, container } = renderWithProviders(
+      <SearchInput ref={ref} inputProps={{ onFocus, onBlur }} />,
+    );
+    const input = getByRole("searchbox");
+    expect(document.activeElement).not.toBe(input);
+    act(() => ref.current!.focus());
+    expect(document.activeElement).toBe(input);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(
+      container.querySelector("[data-ring-target='box']")?.contains(document.activeElement),
+    ).toBe(true);
+    act(() => ref.current!.blur());
+    expect(document.activeElement).not.toBe(input);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it("focuses the form-integrated field", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { getByRole } = renderWithProviders(
+      <Form formOptions={{ defaultValues: { q: "" } }} onSubmit={() => {}} submitText="Go">
+        <SearchInput ref={ref} name="q" label="Find" />
+      </Form>,
+    );
+    act(() => ref.current!.focus());
+    expect(document.activeElement).toBe(getByRole("searchbox"));
+    act(() => ref.current!.blur());
+    expect(document.activeElement).not.toBe(getByRole("searchbox"));
+  });
+
+  it("autoFocus focuses the field on mount", () => {
+    const { getByRole } = renderWithProviders(<SearchInput autoFocus />);
+    expect(document.activeElement).toBe(getByRole("searchbox"));
+  });
+
+  it("preserves inputProps autoFocus and its consumer override", () => {
+    const { getByRole, unmount } = renderWithProviders(
+      <SearchInput inputProps={{ autoFocus: true }} />,
+    );
+    expect(document.activeElement).toBe(getByRole("searchbox"));
+    unmount();
+    const overridden = renderWithProviders(
+      <SearchInput autoFocus inputProps={{ autoFocus: false }} />,
+    );
+    expect(document.activeElement).not.toBe(overridden.getByRole("searchbox"));
+  });
+
+  it("does not focus a disabled field", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { getByRole } = renderWithProviders(<SearchInput ref={ref} disabled autoFocus />);
+    act(() => ref.current!.focus());
+    expect(document.activeElement).not.toBe(getByRole("searchbox"));
+  });
+
+  it("allows focusing a read-only field", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { getByRole } = renderWithProviders(<SearchInput ref={ref} readOnly />);
+    act(() => ref.current!.focus());
+    expect(document.activeElement).toBe(getByRole("searchbox"));
+  });
+
+  it("is safe while a skeleton and targets the input when ready", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { rerender, getByRole, unmount } = renderWithProviders(
+      <SearchInput ref={ref} skeleton autoFocus />,
+    );
+    expect(() => {
+      ref.current!.focus();
+      ref.current!.blur();
+    }).not.toThrow();
+    rerender(<SearchInput ref={ref} autoFocus />);
+    const input = getByRole("searchbox");
+    expect(document.activeElement).toBe(input);
+    act(() => ref.current!.blur());
+    act(() => ref.current!.focus());
+    expect(document.activeElement).toBe(input);
+    unmount();
+    expect(ref.current).toBeNull();
+  });
+});

package/src/fields/SearchInput/SearchInput.stories.tsx

@@ -1,8 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Paragraph, YStack } from "tamagui";
-import { SearchInput } from "./index";
+import { Button } from "../../Button";
+import { SearchInput, type SearchInputHandle } from "./index";
 
 const meta: Meta<typeof SearchInput> = {
   title: "Forms/SearchInput",
@@ -13,7 +14,7 @@ const meta: Meta<typeof SearchInput> = {
     debounceMs: { control: "number" },
     clearable: { control: "boolean" },
     disabled: { control: "boolean" },
-    compact: { control: "boolean" },
+    autoFocus: { control: "boolean" },
     chromeless: { control: "boolean" },
     size: { control: "select", options: ["$2", "$3", "$4", "$5"] },
     defaultValue: { control: "text" },
@@ -96,14 +97,14 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <SearchInput size="$2" placeholder="Small" />
-      <SearchInput size="$3" placeholder="Medium (default)" defaultValue="bulbasaur" />
+      <SearchInput size="$3" placeholder="Medium ($3)" defaultValue="bulbasaur" />
       <SearchInput size="$4" placeholder="Large" />
     </YStack>
   ),
 };
 
 export const ToolbarCompact: Story = {
-  name: "Toolbar (compact + chromeless)",
+  name: "Toolbar ($3 + chromeless)",
   render: () => (
     <YStack
       maxWidth={400}
@@ -112,7 +113,7 @@ export const ToolbarCompact: Story = {
       borderColor="$borderColor"
       padding="$2"
     >
-      <SearchInput compact chromeless size="$3" onSearch={(text) => action("onSearch")(text)} />
+      <SearchInput chromeless size="$3" onSearch={(text) => action("onSearch")(text)} />
     </YStack>
   ),
 };
@@ -148,3 +149,22 @@ export const WithError: Story = {
     </YStack>
   ),
 };
+
+function ImperativeFocusExample(args: React.ComponentProps<typeof SearchInput>) {
+  const ref = useRef<SearchInputHandle>(null);
+  return (
+    <YStack gap="$3">
+      <SearchInput {...args} ref={ref} label="Search" />
+      <Button onPress={() => ref.current?.focus()}>Focus search</Button>
+      <Button onPress={() => ref.current?.blur()}>Blur search</Button>
+    </YStack>
+  );
+}
+
+export const ImperativeFocus: Story = {
+  render: (args) => <ImperativeFocusExample {...args} />,
+};
+
+export const AutoFocus: Story = {
+  args: { autoFocus: true, label: "Search" },
+};

package/src/fields/SearchInput/index.tsx

@@ -21,8 +21,8 @@ import {
   pressTargetHitSlop,
   sizeRecipeForToken,
 } from "@multiplatform.one/theme";
-import type { ComponentProps, ReactNode, RefObject } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import type { ComponentProps, ReactNode, Ref, RefObject } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
 import { View, isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
@@ -41,6 +41,11 @@ import {
 
 type AreaProps = ComponentProps<typeof InputParts.Area>;
 
+export interface SearchInputHandle {
+  focus(): void;
+  blur(): void;
+}
+
 export interface SearchInputProps {
   name?: string;
   form?: AnyFormApi;
@@ -61,13 +66,12 @@ export interface SearchInputProps {
   /** Show the clear (X) button when there is text. Escape always clears. */
   clearable?: boolean;
   disabled?: boolean;
+  autoFocus?: boolean;
   readOnly?: boolean;
   required?: boolean;
   helperText?: string;
   error?: string | boolean;
   size?: SizeTokens;
-  /** Compact density (toolbar embedding). Orthogonal to `size`. */
-  compact?: boolean;
   /** Borderless/background-less (flush toolbar bands). */
   chromeless?: boolean;
   skeleton?: boolean;
@@ -77,7 +81,7 @@ export interface SearchInputProps {
   "aria-label"?: string;
   /** Leading icon size in px. Defaults from the size token. */
   iconSize?: number;
-  inputProps?: Omit<AreaProps, "value" | "id" | "onChange" | "onChangeText">;
+  inputProps?: Omit<AreaProps, "value" | "id" | "onChange" | "onChangeText" | "ref">;
 }
 
 const SEARCH_STYLE_ID = "mp-search-input-chrome";
@@ -115,47 +119,50 @@ function focusArea(ref: RefObject<TamaguiElement | null>) {
   (ref.current as { focus?: () => void } | null)?.focus?.();
 }
 
-export function SearchInput({
-  name,
-  form: formProp,
-  validators,
-  value,
-  defaultValue,
-  onChange,
-  onSearch,
-  onClear,
-  onBlur,
-  debounceMs = 300,
-  // Bidi-isolated at the interpolation site (LC-58): under RTL the trailing
-  // weak "..." otherwise reorders to the start ("…Search"). First-strong
-  // isolation keeps a translated RTL placeholder rendering RTL. Consumer
-  // placeholders are the consumer's interpolation site — passed through.
-  placeholder = bidiIsolate(t("Search...")),
-  clearable = true,
-  disabled,
-  readOnly,
-  required,
-  helperText,
-  error,
-  size,
-  compact,
-  chromeless,
-  skeleton,
-  label,
-  labelProps,
-  id: idProp,
-  "aria-label": ariaLabel,
-  iconSize,
-  inputProps,
-}: SearchInputProps) {
+function SearchInputImpl(
+  {
+    name,
+    form: formProp,
+    validators,
+    value,
+    defaultValue,
+    onChange,
+    onSearch,
+    onClear,
+    onBlur,
+    debounceMs = 300,
+    // Bidi-isolated at the interpolation site (LC-58): under RTL the trailing
+    // weak "..." otherwise reorders to the start ("…Search"). First-strong
+    // isolation keeps a translated RTL placeholder rendering RTL. Consumer
+    // placeholders are the consumer's interpolation site — passed through.
+    placeholder = bidiIsolate(t("Search...")),
+    clearable = true,
+    disabled,
+    autoFocus,
+    readOnly,
+    required,
+    helperText,
+    error,
+    size,
+    chromeless,
+    skeleton,
+    label,
+    labelProps,
+    id: idProp,
+    "aria-label": ariaLabel,
+    iconSize,
+    inputProps,
+  }: SearchInputProps,
+  ref: Ref<SearchInputHandle>,
+) {
   const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, control, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
+    size,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const resolvedSize = knobProps.sizeToken as SizeTokens;
   const recipe = sizeRecipeForToken(String(resolvedSize), { touch: hydrationTouch });
   const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
   const belowFloor = visualHeight < MIN_PRESS_TARGET;
@@ -163,6 +170,16 @@ export function SearchInput({
   const [internalText, setInternalText] = useState(defaultValue ?? "");
   const standaloneText = isControlled ? value : internalText;
   const inputRef = useRef<TamaguiElement>(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => {
+        if (!disabled) focusArea(inputRef);
+      },
+      blur: () => inputRef.current?.blur?.(),
+    }),
+    [disabled],
+  );
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const onSearchRef = useRef(onSearch);
@@ -224,8 +241,7 @@ export function SearchInput({
   const resolvedIconSize = iconSize ?? recipe.iconSize;
   const boxContract = {
     size: resolvedSize,
-    "data-density": knobProps.density,
-    "data-size": String(resolvedSize),
+    "data-size-token": String(resolvedSize),
     "data-visual-height": String(visualHeight),
     "data-press-floor": belowFloor ? "slop" : "box",
     "data-ring-target": "box",
@@ -294,6 +310,7 @@ export function SearchInput({
       enterKeyHint: "search",
       value: current,
       disabled,
+      autoFocus,
       readOnly,
       placeholder,
       // T-VALUE (knob-laws § textAccent › entered text): full ramp, never
@@ -332,12 +349,7 @@ export function SearchInput({
     } as unknown as AreaProps;
 
     return (
-      <InputParts.Box
-        {...boxContract}
-        disabled={disabled}
-        {...chromelessProps}
-        {...(hasError ? { theme: "error" } : undefined)}
-      >
+      <InputParts.Box {...boxContract} disabled={disabled} {...chromelessProps}>
         <InputParts.Icon
           adornment="leading"
           color={formCommonColors.muted}
@@ -409,7 +421,9 @@ export function SearchInput({
   if (!resolvedForm || !name) {
     return (
       <FieldLayout {...layoutBind} error={error} onBlur={onBlur}>
-        <InputParts size={resolvedSize}>{renderBox(standaloneText, undefined, !!error)}</InputParts>
+        <InputParts size={resolvedSize} {...(error ? { theme: "error" } : undefined)}>
+          {renderBox(standaloneText, undefined, !!error)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -442,3 +456,5 @@ export function SearchInput({
     </Field>
   );
 }
+
+export const SearchInput = forwardRef<SearchInputHandle, SearchInputProps>(SearchInputImpl);

package/src/fields/Select/Select.spec.tsx

@@ -1,8 +1,11 @@
+import { defaultKnobs, resolveKnobs } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor, within } from "@testing-library/react";
 import { YStack } from "tamagui";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getSizeRecipeFamily } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { __resetDevWarnSeen } from "../../shared/devWarn";
@@ -302,6 +305,15 @@ describe("Select Components", () => {
       });
     });
 
+    it("paints the elevated surface shadow on the open listbox", async () => {
+      const result = renderWithProviders(<Select options={many} />);
+      fireEvent.keyDown(result.getByTestId("select-trigger"), { key: "Enter" });
+      const dropdown = await result.findByTestId("select-dropdown");
+      expect(dropdown.style.boxShadow).toBe(
+        resolveKnobs(defaultKnobs).knobProps.elevatedSurface.style?.boxShadow,
+      );
+    });
+
     it("does not ring the trigger or a row on mouse open", async () => {
       const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
       const trigger = result.baseElement.querySelector(
@@ -320,6 +332,24 @@ describe("Select Components", () => {
       }
     });
 
+    it("pitches every row at the menuRow family height, not the control height", async () => {
+      const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
+      const trigger = result.baseElement.querySelector(
+        '[data-testid="select-trigger"]',
+      ) as HTMLElement;
+      fireEvent.pointerDown(trigger);
+      fireEvent.mouseDown(trigger);
+      fireEvent.click(trigger);
+      await waitFor(() => {
+        expect(result.baseElement.querySelector('[role="option"]')).toBeTruthy();
+      });
+      const pitch = getSizeRecipeFamily("menuRow").heights.$true;
+      expect(pitch).toBe(36);
+      for (const opt of result.baseElement.querySelectorAll('[role="option"]')) {
+        expect(opt.className).toMatch(new RegExp(`_h-${pitch}px`));
+      }
+    });
+
     it("paints an inset ring on the keyboard-active row; rows stay square", async () => {
       const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
       const trigger = result.baseElement.querySelector(
@@ -395,3 +425,38 @@ describe("Select pointer intent", () => {
     expect(onChange).toHaveBeenCalledExactlyOnceWith(["option1"]);
   });
 });
+
+describe("Select size forwarding (WP-c2)", () => {
+  const many: SelectOption[] = Array.from({ length: 6 }, (_, i) => ({
+    value: `v${i}`,
+    label: `Label ${i}`,
+  }));
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+
+  it('size="$3" reaches the InputParts trigger and every listbox row', async () => {
+    const recipe = sizeRecipeForToken("$3");
+    const rowRecipe = getSizeRecipeFamily("menuRow").recipes.$3;
+    const result = renderWithProviders(<Select options={many} placeholder="Pick" size="$3" />);
+    const trigger = result.baseElement.querySelector(
+      '[data-testid="select-trigger"]',
+    ) as HTMLElement;
+    const box = trigger.closest("[class*='_h-']") ?? trigger;
+    expect(String(box.className)).toContain(`_h-${recipe.height}px`);
+    fireEvent.pointerDown(trigger);
+    fireEvent.mouseDown(trigger);
+    fireEvent.click(trigger);
+    await waitFor(() => {
+      expect(result.baseElement.querySelector('[role="option"]')).toBeTruthy();
+    });
+    for (const row of result.baseElement.querySelectorAll('[role="option"]')) {
+      expect(String(row.className)).toContain(`_h-${rowRecipe.height}px`);
+    }
+  });
+});