@multiplatform.one/forms 7.7.6 → 7.10.0

package/src/fields/Input/index.tsx

@@ -1,7 +1,8 @@
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { useCallback, useRef } from "react";
-import { ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { writeToClipboard } from "@multiplatform.one/platform";
 import { MIN_PRESS_TARGET, pressTargetHitSlop } from "@multiplatform.one/theme";
+import { ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import type {
   InputKeyboardType,
   InputTextContentType,
@@ -119,16 +120,6 @@ export interface InputProps {
 
 const COPY_LABEL = "Copy to clipboard";
 
-async function writeClipboard(text: string): Promise<boolean> {
-  try {
-    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return false;
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 export function Input({
   name,
   form: formProp,
@@ -247,7 +238,7 @@ export function Input({
 
   const handleCopy = useCallback(
     async (text: string) => {
-      const ok = await writeClipboard(text);
+      const ok = await writeToClipboard(text);
       onCopyResult?.(ok);
     },
     [onCopyResult],
@@ -361,7 +352,9 @@ export function Input({
             {...(placeholder !== undefined ? { placeholder } : undefined)}
             disabled={disabled}
             id={id}
-            {...(handleChange ? { value: inputValue ?? "" } : { defaultValue: inputValue })}
+            {...(handleChange || value !== undefined
+              ? { value: inputValue ?? "" }
+              : { defaultValue: inputValue })}
             aria-required={required || undefined}
             aria-invalid={hasError || undefined}
             {...areaName}
@@ -381,6 +374,7 @@ export function Input({
             disabled={disabled}
             tabIndex={disabled ? -1 : 0}
             aria-label={COPY_LABEL}
+            accessibilityLabel={COPY_LABEL}
             hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
             onPress={disabled ? undefined : activateCopy}
             onKeyDown={

package/src/fields/PhoneInput/index.tsx

@@ -43,8 +43,6 @@ const phoneInputCss = `/* LC-71: flag+dial are adornments of one control. Ring l
 .mp-phone-input [data-testid="combobox-trigger"] {
   outline: none !important;
   box-shadow: none !important;
-  width: auto !important;
-  flex: 0 0 auto;
 }
 .mp-phone-input [data-testid="combobox-trigger"]:focus,
 .mp-phone-input [data-testid="combobox-trigger"]:focus-visible {
@@ -329,9 +327,11 @@ export function PhoneInput<
           alignItems="stretch"
           flexGrow={0}
           flexShrink={0}
+          gap="$1.5"
           {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
         >
           <Combobox
+            triggerSizing="content"
             options={countryOptions}
             value={regionCode}
             onChange={(val) => handleRegionChange(typeof val === "string" ? val : (val[0] ?? ""))}

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

@@ -0,0 +1,67 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { RadioGroup } from "./index";
+
+// MPO-283. Mock tamagui's isWeb so the native branch runs on the test host
+// renderer, then read the React Native prop names back off the DOM. The state
+// object itself is pinned in shared/nativeA11y.spec.ts — the host stringifies
+// it — so what this file proves is that the component reaches the helper with
+// the right role and the right name.
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+const phase = [
+  { label: "CREDITS", value: "CREDITS" },
+  { label: "DEBITS", value: "DEBITS" },
+  { label: "DISCRETIONARY", value: "DISCRETIONARY", disabled: true },
+];
+
+const names = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("[accessibilityrole]")).map((el) => [
+    el.getAttribute("accessibilityrole"),
+    el.getAttribute("accessibilitylabel"),
+  ]);
+
+describe("native RadioGroup accessibility contract", () => {
+  it("makes every option a named control instead of bare StaticText", () => {
+    const { container } = renderWithProviders(
+      <RadioGroup label="Phase" options={phase} value="DEBITS" />,
+    );
+    expect(names(container)).toEqual([
+      ["button", "CREDITS"],
+      ["button", "DEBITS"],
+      ["button", "DISCRETIONARY"],
+    ]);
+  });
+
+  it("prefixes a group accessibilityLabel onto each option, because iOS never reads a container", () => {
+    const { container } = renderWithProviders(
+      <RadioGroup accessibilityLabel="Phase" options={phase} value="DEBITS" />,
+    );
+    expect(names(container)).toContainEqual(["button", "Phase, DEBITS"]);
+  });
+
+  it("takes aria-label as an alias, since tamagui never maps it onto native", () => {
+    const { container } = renderWithProviders(
+      <RadioGroup aria-label="Phase" options={phase} value="DEBITS" />,
+    );
+    expect(names(container)).toContainEqual(["button", "Phase, DEBITS"]);
+  });
+
+  it("lets an option override its own name", () => {
+    const { container } = renderWithProviders(
+      <RadioGroup
+        options={[{ label: "▲", value: "up", accessibilityLabel: "Increasing" }]}
+        value="up"
+      />,
+    );
+    expect(names(container)).toEqual([["button", "Increasing"]]);
+  });
+
+  // The sibling Label is also told to stay out of the native tree so an option
+  // is not read twice. It cannot be asserted here — the web renderer drops the
+  // React Native accessibility props off Label entirely — so that one is
+  // measured on device instead.
+});

package/src/fields/RadioGroup/index.tsx

@@ -28,6 +28,7 @@ import { getSize } from "@tamagui/get-token";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { choiceItemA11y, composeA11yName } from "../../shared/nativeA11y";
 import {
   getElevationWrapperProps,
   getFieldError,
@@ -131,6 +132,14 @@ export interface RadioGroupOption {
   disabled?: boolean;
   /** Muted secondary line under the label; rendered in `card` mode. */
   description?: string;
+  /**
+   * MPO-283 — accessible name for THIS option, overriding `label`. Use it
+   * when the option carries meaning the label text does not: a glyph, or a
+   * state encoded in fill/weight/position rather than words.
+   */
+  accessibilityLabel?: string;
+  /** Extra spoken context for this option (native `accessibilityHint`). */
+  accessibilityHint?: string;
 }
 
 export interface RadioGroupProps {
@@ -179,11 +188,33 @@ export interface RadioGroupProps {
    * primitives (same anatomy as `CheckboxGroup card`).
    */
   card?: boolean;
+  /**
+   * MPO-283 — accessible name for the whole group.
+   *
+   * tamagui does not map `aria-label` onto React Native's
+   * `accessibilityLabel`, so the web attribute is inert on native; this prop
+   * is the native channel and `aria-label` is accepted as an alias.
+   *
+   * iOS speaks elements, never non-element containers, so a name set here is
+   * PREFIXED onto each option's accessible name ("Phase, CREDITS") instead of
+   * sitting on the frame where nothing reads it. Options stay individually
+   * reachable and keep their own checked state.
+   */
+  accessibilityLabel?: string;
+  /** Alias for `accessibilityLabel`; also emitted as the web attribute. */
+  "aria-label"?: string;
+  /** Web-only name reference. Native has no id-based equivalent. */
+  "aria-labelledby"?: string;
+  /** Extra spoken context for the group (native `accessibilityHint`). */
+  accessibilityHint?: string;
 }
 
 interface RadioOptionItemProps {
   option: RadioGroupOption;
   itemId: string;
+  /** MPO-283 — the resolved native accessible name for this option. */
+  nativeLabel: string;
+  nativeHint?: string;
   a11y?: { "aria-labelledby"?: string; "aria-describedby"?: string };
   selected: boolean;
   isTabStop?: boolean;
@@ -203,6 +234,8 @@ interface RadioOptionItemProps {
 function RadioOptionItem({
   option,
   itemId,
+  nativeLabel,
+  nativeHint,
   a11y,
   selected,
   isTabStop,
@@ -277,15 +310,22 @@ function RadioOptionItem({
       {...(groupDisabled || option.disabled ? disabledChrome : undefined)}
       pointerEvents={readOnly ? "none" : undefined}
       {...a11y}
-      // RN only exposes the radio to the a11y tree when `accessible` is set;
-      // web keeps Tamagui's role=radio + label association untouched.
+      // MPO-283. RN only exposes the radio when `accessible` is set, and the
+      // aria-* spellings this block used to carry never reached iOS at all:
+      // tamagui does not map them onto React Native's accessibility props, so
+      // options came back as bare StaticText with no role and no checked
+      // state. The RN prop names are the ones iOS actually reads.
       {...(!isWeb
-        ? {
-            accessible: true,
-            "aria-label": typeof option.label === "string" ? option.label : String(option.value),
-            "aria-checked": selected,
-          }
-        : {})}
+        ? choiceItemA11y({
+            kind: "radio",
+            name: nativeLabel,
+            selected,
+            disabled: Boolean(groupDisabled || option.disabled),
+            hint: nativeHint,
+          })
+        : option.accessibilityLabel
+          ? { "aria-label": option.accessibilityLabel }
+          : {})}
       {...(hoverProps && {
         hoverStyle: {
           ...hoverProps,
@@ -344,6 +384,10 @@ export function RadioGroup({
   skeleton,
   compact,
   card,
+  accessibilityLabel,
+  accessibilityHint,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
 }: RadioGroupProps) {
   // Canonical `onChange` and the alias `onValueChange` both fire from the
   // single emit site below (same reconciliation as Switch).
@@ -351,6 +395,17 @@ export function RadioGroup({
     onChange?.(val);
     onValueChange?.(val);
   };
+  // MPO-283: one name, two channels — tamagui drops `aria-label` on native, so
+  // the prop and the attribute are reconciled here.
+  const groupA11yName = accessibilityLabel ?? ariaLabel;
+  // iOS reads elements, not containers, so an explicit group name rides in
+  // front of each option's own name rather than sitting on the frame.
+  const optionA11yName = (option: RadioGroupOption) =>
+    composeA11yName(
+      groupA11yName,
+      option.accessibilityLabel ??
+        (typeof option.label === "string" ? option.label : String(option.value)),
+    );
   const { resolvedForm, knobProps, control, text, elevation, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
@@ -440,6 +495,8 @@ export function RadioGroup({
     <RadioOptionItem
       option={option}
       itemId={itemId}
+      nativeLabel={optionA11yName(option)}
+      nativeHint={option.accessibilityHint ?? accessibilityHint}
       a11y={a11y}
       selected={!!selected}
       isTabStop={isTabStop}
@@ -541,6 +598,15 @@ export function RadioGroup({
               )}
               <Label
                 htmlFor={itemId}
+                // MPO-283: on native the radio itself now carries this text as
+                // its accessible name, so leaving the Label in the tree reads
+                // every option twice. Web keeps the label/control association.
+                {...(!isWeb
+                  ? {
+                      accessibilityElementsHidden: true,
+                      importantForAccessibility: "no-hide-descendants" as const,
+                    }
+                  : undefined)}
                 size={(size || knobProps.sizeToken) as FontSizeTokens}
                 {...knobProps.body}
                 color={knobProps.textAccentColor}
@@ -615,6 +681,14 @@ export function RadioGroup({
         aria-required={required || undefined}
         aria-invalid={hasError || undefined}
         aria-readonly={readOnly || undefined}
+        // MPO-283: web reads the attribute, Android reads the RN prop off the
+        // container. iOS reads neither, which is why the name is also prefixed
+        // onto every option above.
+        {...(groupA11yName ? { "aria-label": groupA11yName } : undefined)}
+        {...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : undefined)}
+        {...(!isWeb && groupA11yName
+          ? { accessibilityLabel: groupA11yName, accessibilityRole: "radiogroup" as const }
+          : undefined)}
       >
         {renderItems(radioValue, emit)}
       </TamaguiRadioGroup>

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

@@ -5,6 +5,7 @@ import { fireEvent } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useTheme } from "tamagui";
 import { Form } from "../../Form";
 import { SearchInput } from "./index";
 
@@ -31,6 +32,19 @@ describe("SearchInput", () => {
     expect(result.container.querySelector("svg")).toBeTruthy();
   });
 
+  it("uses readable glyph ink for search and clear rather than the boundary ramp", () => {
+    let expectedInk = "";
+    function Sample() {
+      const theme = useTheme();
+      expectedInk = String(theme.color11?.val);
+      return <SearchInput placeholder="Search things" defaultValue="corp" />;
+    }
+    const { container } = renderWithProviders(<Sample />);
+    const glyphs = container.querySelectorAll("svg");
+    expect(glyphs).toHaveLength(2);
+    for (const glyph of glyphs) expect(glyph.getAttribute("fill")).toBe(expectedInk);
+  });
+
   it("bidi-isolates the default placeholder (LC-58) and passes explicit ones through", () => {
     // Default: FSI…PDI framing so the trailing "..." cannot reorder to
     // "…Search" under RTL; the visible run stays byte-identical inside.

package/src/fields/SearchInput/index.tsx

@@ -28,7 +28,7 @@ import { View, isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
-import { formControlColors } from "../../shared/colorRamps";
+import { formCommonColors } from "../../shared/colorRamps";
 import { bidiIsolate, t } from "../../shared/t";
 import type { AnyFormApi } from "../../types";
 import {
@@ -339,7 +339,7 @@ export function SearchInput({
       >
         <InputParts.Icon
           adornment="leading"
-          color={formControlColors.boundary}
+          color={formCommonColors.muted}
           className={isWeb ? "mp-search-leading" : undefined}
           {...leadingWebProps}
         >
@@ -363,11 +363,8 @@ export function SearchInput({
             justifyContent="center"
             cursor="pointer"
             outlineWidth={0}
-            hoverStyle={{ opacity: 1 }}
-            pressStyle={{ opacity: 0.9 }}
             focusStyle={{ outlineWidth: 0 }}
             focusVisibleStyle={{ outlineWidth: 0 }}
-            opacity={0.85}
             flexShrink={0}
             hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
             onPress={() => clearText(fieldChange)}
@@ -385,8 +382,10 @@ export function SearchInput({
               className={isWeb ? "mp-chip-dismiss-ring" : undefined}
               alignItems="center"
               justifyContent="center"
+              hoverStyle={{ backgroundColor: "$color4" }}
+              pressStyle={{ backgroundColor: "$color5" }}
             >
-              <InputParts.Icon aria-hidden color={formControlColors.boundary}>
+              <InputParts.Icon aria-hidden color={formCommonColors.muted}>
                 <XIcon size={resolvedIconSize} />
               </InputParts.Icon>
             </View>

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

@@ -334,3 +334,57 @@ describe("Select Components", () => {
     });
   });
 });
+
+describe("Select pointer intent", () => {
+  it("commits a deliberate cross-row release immediately after keyboard open", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Select options={mockOptions} onChange={onChange} />);
+    const trigger = result.getByTestId("select-trigger");
+    fireEvent.keyDown(trigger, { key: "Enter" });
+    const options = await result.findAllByRole("option");
+    fireEvent.pointerDown(options[0], { button: 0, pointerId: 1 });
+    fireEvent.mouseDown(options[0]);
+    fireEvent.mouseUp(options[1]);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith("option2");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("consumes the opening gesture release over the covered row", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Select options={mockOptions} onChange={onChange} />);
+    const trigger = result.getByTestId("select-trigger");
+    fireEvent.mouseDown(trigger);
+    const options = await result.findAllByRole("option");
+    fireEvent.mouseUp(options[0]);
+    expect(onChange).not.toHaveBeenCalled();
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("does not select when a background drag releases over an option", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Select options={mockOptions} onChange={onChange} />);
+    fireEvent.mouseDown(result.getByTestId("select-trigger"));
+    const options = await result.findAllByRole("option");
+    fireEvent.mouseUp(options[0]);
+    const panel = result.getByTestId("select-dropdown");
+    fireEvent.pointerDown(panel, { button: 0, clientY: 10 });
+    fireEvent.pointerMove(document, { clientY: 50 });
+    fireEvent.pointerUp(document);
+    fireEvent.mouseUp(options[1]);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("toggles a multiple option exactly once on an immediate click", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Select options={mockOptions} multiple onChange={onChange} />,
+    );
+    fireEvent.keyDown(result.getByTestId("select-trigger"), { key: "Enter" });
+    const options = await result.findAllByRole("option");
+    fireEvent.pointerDown(options[0], { button: 0, pointerId: 1 });
+    fireEvent.mouseDown(options[0]);
+    fireEvent.mouseUp(options[0]);
+    fireEvent.click(options[0]);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(["option1"]);
+  });
+});

package/src/fields/Select/index.tsx

@@ -125,10 +125,13 @@ export interface SelectProps {
 // LC-71: Tamagui maps `focusVisibleStyle` onto mouse/:focus, so the ring is
 // painted from `wasKeyboardFocus()` (inset — overlay overflow clips it).
 // LC-72 CONTAINER-CLIP: rows stay square; the panel radius cuts the corners.
-const selectRowOutlineRest = {
+const selectOutlineRest = {
   outlineWidth: 0,
   outlineStyle: "solid" as const,
   outlineColor: "transparent",
+};
+const selectRowOutlineRest = {
+  ...selectOutlineRest,
   borderRadius: 0,
 };
 
@@ -266,7 +269,8 @@ function selectTriggerRingProps(kbTrigger: boolean, open: boolean) {
   if (kbTrigger && !open) {
     return { ...keyboardFocusRingProps, "data-kb-ring": "true" as const };
   }
-  return { ...selectRowOutlineRest, "data-kb-ring": undefined };
+  // Focus modality owns the outline; the control recipe owns trigger shape.
+  return { ...selectOutlineRest, "data-kb-ring": undefined };
 }
 
 function selectItemRingProps(isActive: boolean, kbNav: boolean) {
@@ -398,6 +402,10 @@ const SelectItem = memo(function SelectItem({
         },
         onPointerDown() {
           ctx.setKbNav(false);
+          // A press on a mounted row is a new gesture, not the release that
+          // opened this covering panel. Arm immediately, regardless of time.
+          ctx.allowMouseUpRef.current = true;
+          ctx.allowSelectRef.current = true;
         },
         onMouseUp() {
           if (!ctx.allowMouseUpRef.current) {
@@ -598,6 +606,16 @@ function FloatingSelectCore({
 
   const { scrollRef: dragScrollRef, dragProps } = useDragScroll({
     direction: "vertical",
+    onDragEnd: () => {
+      // The following mouseup finishes scrolling; it must not pick a row.
+      allowSelectRef.current = false;
+      allowMouseUpRef.current = false;
+      if (selectTimeoutRef.current) clearTimeout(selectTimeoutRef.current);
+      selectTimeoutRef.current = setTimeout(() => {
+        allowSelectRef.current = true;
+        allowMouseUpRef.current = true;
+      });
+    },
   });
 
   // Sync drag scroll ref with floating ref
@@ -1006,6 +1024,7 @@ function FloatingSelectCore({
         suppressFocusRing={open}
         size={knobProps.sizeToken}
         {...pickerTriggerContract(knobProps.control.height)}
+        paddingHorizontal={knobProps.panelPadding.padding}
         {...(inTableCell
           ? // Chromeless in cells.
             {}
@@ -1017,9 +1036,8 @@ function FloatingSelectCore({
         <SyncKeyboardFocusToBox active={kbTrigger && !open} />
         <View
           flex={1}
-          // LC-18 (UX-021): trigger inset rides the space knob so trigger text
-          // stays column-aligned with the menu rows at every density.
-          paddingHorizontal={knobProps.panelPadding.padding}
+          // The Box owns the same horizontal inset as the option rows.
+          minWidth={0}
           paddingVertical="$2"
           justifyContent={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
           alignItems={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
@@ -1061,7 +1079,7 @@ function FloatingSelectCore({
             </Text>
           )}
         </View>
-        <View paddingInlineEnd="$2" alignSelf="center">
+        <View flexShrink={0} alignSelf="center">
           <CaretDownIcon size={16} color={glyphColor} />
         </View>
       </InputParts.Box>
@@ -1221,6 +1239,8 @@ function NativeSelectCore({
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(0);
   const listRef = useRef<HTMLElement | null>(null);
+  const listboxId = `${id}-listbox`;
+  const optionId = (index: number) => `${listboxId}-option-${index}`;
   const { kbTrigger, kbNav, setKbNav, onTriggerFocus, onTriggerBlur, onTriggerPointerDown } =
     useSelectKeyboardRing();
 
@@ -1332,12 +1352,22 @@ function NativeSelectCore({
     // VoiceOver blob.
     <View
       ref={listRef as any}
+      // React Native's Role type omits listbox; these are DOM-only attributes.
       {...(isWeb
-        ? {
-            tabIndex: 0,
+        ? ({
+            id: listboxId,
+            role: "listbox" as const,
+            "aria-label": ariaLabel ?? fieldA11y?.label ?? placeholder,
+            "aria-multiselectable": multiple || undefined,
+            "aria-hidden": !open,
+            "aria-activedescendant":
+              activeIndex != null && displayOptions[activeIndex]
+                ? optionId(activeIndex)
+                : undefined,
+            tabIndex: open ? 0 : -1,
             onKeyDown: handleListKeyDown,
             onFocus: () => setKbNav(wasKeyboardFocus()),
-          }
+          } as Record<string, unknown>)
         : undefined)}
       outlineStyle="none"
     >
@@ -1360,6 +1390,9 @@ function NativeSelectCore({
         const row = (
           <View
             key={isWeb ? option.value : undefined}
+            {...(isWeb
+              ? { id: optionId(i), role: "option" as const, "aria-selected": selected }
+              : undefined)}
             flexDirection="row"
             alignItems="center"
             borderRadius={0}
@@ -1465,6 +1498,7 @@ function NativeSelectCore({
           disabled={disabled}
           size={knobProps.sizeToken}
           {...pickerTriggerContract(knobProps.control.height)}
+          paddingHorizontal={knobProps.panelPadding.padding}
           pointerEvents="none"
           {...(inTableCell
             ? {}
@@ -1477,7 +1511,7 @@ function NativeSelectCore({
         >
           <View
             flex={1}
-            paddingHorizontal={knobProps.panelPadding.padding}
+            minWidth={0}
             paddingVertical="$2"
             justifyContent="flex-start"
             alignItems="flex-start"
@@ -1492,7 +1526,7 @@ function NativeSelectCore({
               {triggerValueText}
             </Text>
           </View>
-          <View paddingInlineEnd="$2" alignSelf="center">
+          <View flexShrink={0} alignSelf="center">
             <CaretDownIcon size={16} />
           </View>
         </InputParts.Box>
@@ -1518,6 +1552,7 @@ function NativeSelectCore({
           disabled={disabled}
           size={knobProps.sizeToken}
           {...pickerTriggerContract(knobProps.control.height)}
+          paddingHorizontal={knobProps.panelPadding.padding}
           {...(inTableCell
             ? {}
             : {
@@ -1537,6 +1572,7 @@ function NativeSelectCore({
                 role: "combobox" as const,
                 "aria-haspopup": "listbox",
                 "aria-expanded": open,
+                "aria-controls": open ? listboxId : undefined,
                 "aria-autocomplete": "none",
                 // Standalone (no label): fall back to placeholder so the
                 // trigger still has a name (axe button-name). Labelled: the
@@ -1547,8 +1583,8 @@ function NativeSelectCore({
                 tabIndex: disabled ? -1 : 0,
               }
             : { importantForAccessibility: "no" as const })}
-          // Sheet capture opens first on web. Keep this opener idempotent;
-          // native delegates the gesture to FloatingPanel's Pressable.
+          // The web sheet shares this gesture with FloatingPanel's capture
+          // opener. Both must open idempotently. Native owns its own press.
           onPress={isWeb && !disabled ? () => setOpen(true) : undefined}
           onFocus={isWeb ? onTriggerFocus : undefined}
           onBlur={isWeb ? onTriggerBlur : undefined}
@@ -1567,9 +1603,8 @@ function NativeSelectCore({
           <SyncKeyboardFocusToBox active={kbTrigger && !open} />
           <View
             flex={1}
-            // LC-18 (UX-021): trigger inset rides the space knob (matches the
-            // floating trigger and sheet rows).
-            paddingHorizontal={knobProps.panelPadding.padding}
+            // The Box owns the same horizontal inset as the option rows.
+            minWidth={0}
             paddingVertical="$2"
             justifyContent={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
             alignItems={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
@@ -1610,7 +1645,7 @@ function NativeSelectCore({
               </Text>
             )}
           </View>
-          <View paddingInlineEnd="$2" alignSelf="center">
+          <View flexShrink={0} alignSelf="center">
             <CaretDownIcon size={16} color={glyphColor} />
           </View>
         </InputParts.Box>