@multiplatform.one/forms 7.58.0 → 7.60.0

package/src/fields/DatePicker/MultiDatePicker.tsx

@@ -23,6 +23,7 @@ import {
   CalendarHeader,
   CalendarPanelFrame,
   DatePickerInputTrigger,
+  DatePickerReadOnlyField,
   DatePickerPopoverShell,
   CalendarViewSwitcher,
   isSameDay,
@@ -424,16 +425,12 @@ export function MultiDatePicker<
   ) => {
     if (readOnly) {
       return (
-        <InputParts.Box>
-          <InputParts.Area
-            value={formatMultiDates(selectedDates)}
-            readOnly
-            aria-readonly="true"
-            aria-required={required || undefined}
-            aria-invalid={hasError || undefined}
-            placeholder={placeholder}
-          />
-        </InputParts.Box>
+        <DatePickerReadOnlyField
+          value={formatMultiDates(selectedDates)}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          placeholder={placeholder}
+        />
       );
     }
     const handleOpenChange = (isOpen: boolean) => {

package/src/fields/DatePicker/catalog.tsx

@@ -22,6 +22,7 @@ import {
   CalendarHeader,
   CalendarPanelFrame,
   DatePickerInputTrigger,
+  DatePickerReadOnlyField,
   DatePickerPopoverShell,
   CalendarViewSwitcher,
   formatDateDisplay,
@@ -283,16 +284,12 @@ export function DatePicker<
   ) => {
     if (readOnly) {
       return (
-        <InputParts.Box>
-          <InputParts.Area
-            value={formatDateDisplay(selectedDate)}
-            readOnly
-            aria-readonly="true"
-            aria-required={required || undefined}
-            aria-invalid={hasError || undefined}
-            placeholder={placeholder}
-          />
-        </InputParts.Box>
+        <DatePickerReadOnlyField
+          value={formatDateDisplay(selectedDate)}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          placeholder={placeholder}
+        />
       );
     }
 

package/src/fields/DatePicker/fieldStates.spec.tsx

@@ -0,0 +1,120 @@
+import type { ReactElement } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { YStack } from "tamagui";
+import { TimePicker } from "../TimePicker";
+import * as timeStories from "../TimePicker/TimePicker.stories";
+import { DatePicker, DateRangePicker, DatetimePicker, MonthPicker, MultiDatePicker } from "./index";
+
+vi.mock("@multiplatform.one/storybook", () => ({ action: () => () => {} }));
+vi.mock("@multiplatform.one/table", () => ({ DataTable: () => null }));
+
+// FZ-7853 round 2. happy-dom has no layout, so these pin the CSS and the
+// anatomy; lc-verify LC-10 fieldEdge measures the shared right edge in the
+// browser at 320 and 390.
+
+function render(node: ReactElement) {
+  return renderWithProviders(<YStack width={360}>{node}</YStack>).container;
+}
+
+function box(root: HTMLElement) {
+  const found = root.querySelector<HTMLElement>("[data-mp-input-box]");
+  expect(found).toBeTruthy();
+  return found as HTMLElement;
+}
+
+const datePickers = [
+  ["DatePicker", (p: object) => <DatePicker label="Date" {...p} />, "2026-10-31"],
+  [
+    "DatetimePicker",
+    (p: object) => <DatetimePicker label="When" {...p} />,
+    new Date("2026-10-31T09:30:00"),
+  ],
+  [
+    "MonthPicker",
+    ({ value, ...p }: { value?: unknown; readOnly?: boolean }) => (
+      <MonthPicker label="Month" defaultValue={value} {...p} />
+    ),
+    { year: 2026, month: 9 },
+  ],
+] as const;
+
+describe("FZ-7853 one right edge: every state fills its row", () => {
+  it.each([
+    ["DatePicker empty", <DatePicker key="a" label="Date" />],
+    ["DatePicker filled", <DatePicker key="b" label="Date" value="2026-10-31" />],
+    ["DatePicker read-only", <DatePicker key="c" label="Date" value="2026-10-31" readOnly />],
+    ["DatePicker disabled", <DatePicker key="d" label="Date" value="2026-10-31" disabled />],
+    ["DatetimePicker empty", <DatetimePicker key="e" label="When" />],
+    ["MonthPicker empty", <MonthPicker key="f" label="Month" />],
+    ["DateRangePicker empty", <DateRangePicker key="g" label="Range" />],
+    ["MultiDatePicker empty", <MultiDatePicker key="h" label="Days" />],
+    ["TimePicker empty", <TimePicker key="i" label="Time" />],
+    ["TimePicker filled", <TimePicker key="j" label="Time" value="09:30" />],
+    ["TimePicker read-only", <TimePicker key="k" label="Time" value="09:30" readOnly />],
+    ["TimePicker disabled", <TimePicker key="l" label="Time" value="09:30" disabled />],
+  ])("%s grows to the row, not to its content", (_name, node) => {
+    const cs = getComputedStyle(box(render(node)));
+    expect(cs.flexGrow).toBe("1");
+    expect(cs.minWidth).toBe("0px");
+    expect(cs.maxWidth).toBe("100%");
+  });
+});
+
+describe("FZ-7853 same shell in every state", () => {
+  it.each(datePickers)(
+    "%s read-only keeps the glyph and the insets, and drops only the clear action",
+    (_name, make, value) => {
+      const editable = box(render(make({ value })));
+      const readOnly = render(make({ value, readOnly: true }));
+      const readOnlyBox = box(readOnly);
+      expect(readOnlyBox.querySelector("[data-testid='date-picker-glyph']")).toBeTruthy();
+      expect(readOnly.querySelector("[data-testid='date-picker-clear']")).toBeNull();
+      expect(readOnly.querySelector("input")?.getAttribute("aria-readonly")).toBe("true");
+      for (const side of ["paddingLeft", "paddingRight", "height", "borderTopWidth"] as const) {
+        expect(getComputedStyle(readOnlyBox)[side]).toBe(getComputedStyle(editable)[side]);
+      }
+    },
+  );
+
+  it("TimePicker read-only keeps the clock glyph, drops the clear action and opens nothing", () => {
+    const editable = box(render(<TimePicker label="Time" value="09:30" />));
+    const root = render(<TimePicker label="Time" value="09:30" readOnly />);
+    const readOnlyBox = box(root);
+    expect(readOnlyBox.querySelector("[data-testid='time-picker-glyph']")).toBeTruthy();
+    expect(root.querySelector("[data-testid='time-picker-clear']")).toBeNull();
+    expect(root.querySelector("input")?.getAttribute("aria-readonly")).toBe("true");
+    for (const side of ["paddingLeft", "paddingRight", "height"] as const) {
+      expect(getComputedStyle(readOnlyBox)[side]).toBe(getComputedStyle(editable)[side]);
+    }
+  });
+
+  it.each([
+    ["DatePicker", <DatePicker key="a" label="Date" value="2026-10-31" disabled />, "date"],
+    ["TimePicker", <TimePicker key="b" label="Time" value="09:30" disabled />, "time"],
+  ])("%s disabled keeps the glyph and the geometry, dimmed", (_name, node, kind) => {
+    const disabled = box(render(node));
+    expect(disabled.querySelector(`[data-testid='${kind}-picker-glyph']`)).toBeTruthy();
+    expect(getComputedStyle(disabled).opacity).toBe("0.5");
+  });
+});
+
+describe("FZ-7853 TimePicker stories carry one label (LC-171)", () => {
+  it.each(["Basic", "Standalone", "WithError", "Disabled"] as const)(
+    "%s: the hint is the placeholder, not a second line under the label",
+    (name) => {
+      const args = (timeStories[name] as { args: Record<string, unknown> }).args;
+      expect(args.helperText).toBeUndefined();
+      const root = render(<TimePicker {...(args as object)} />);
+      expect(root.textContent ?? "").not.toContain("Select a time");
+      if (name !== "Disabled") {
+        expect(args.placeholder).toBe("Select a time");
+      }
+    },
+  );
+
+  it("an empty TimePicker shows the hint inside the field", () => {
+    const root = render(<TimePicker label="Time" placeholder="Select a time" />);
+    expect(root.querySelector("input")?.getAttribute("placeholder")).toBe("Select a time");
+  });
+});

package/src/fields/DatePicker/index.native.tsx

@@ -24,7 +24,7 @@ import { loadDateTimePicker } from "../nativeDateTime/dateTimePickerLoader";
 import { OsDateTimeSheet } from "../nativeDateTime/OsDateTimeSheet";
 import { DatePicker as CatalogDatePicker } from "./catalog";
 import { DatePickerFieldValueSync } from "./fieldValueSync";
-import { DatePickerInputTrigger, formatDateDisplay } from "./parts";
+import { DatePickerInputTrigger, DatePickerReadOnlyField, formatDateDisplay } from "./parts";
 import { coerceToDate } from "./utils";
 
 export type DatePickerProps<
@@ -138,16 +138,12 @@ export function DatePicker<
   ) => {
     if (readOnly) {
       return (
-        <InputParts.Box>
-          <InputParts.Area
-            value={formatDateDisplay(selectedDate)}
-            readOnly
-            aria-readonly="true"
-            aria-required={required || undefined}
-            aria-invalid={hasError || undefined}
-            placeholder={placeholder}
-          />
-        </InputParts.Box>
+        <DatePickerReadOnlyField
+          value={formatDateDisplay(selectedDate)}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          placeholder={placeholder}
+        />
       );
     }
     return (

package/src/fields/DatePicker/parts.tsx

@@ -933,8 +933,11 @@ export function DatePickerInputTrigger({
       pointerEvents={isWeb ? undefined : "none"}
     >
       <InputParts.Box
-        // Yoga has no intrinsic TextInput width to size this row child.
-        {...(isWeb ? undefined : { flex: 1, minWidth: 0 })}
+        // FZ-7853: the box fills its row on every platform, so an empty
+        // trigger ends on the same inset as a filled one (Yoga also has no
+        // intrinsic TextInput width to size it).
+        flex={1}
+        minWidth={0}
         // Elevation is an overlay recipe: it belongs on the open panel, never
         // on the closed text-field trigger.
         elevation={undefined}
@@ -984,6 +987,62 @@ export function DatePickerInputTrigger({
   );
 }
 
+interface DatePickerReadOnlyFieldProps {
+  value: string;
+  placeholder?: string;
+  id?: string;
+  glyph?: "calendar" | "clock";
+  "aria-label"?: string;
+  "aria-required"?: boolean;
+  "aria-invalid"?: boolean;
+}
+
+/**
+ * FZ-7853: a read-only picker keeps the trigger's shell (glyph in the
+ * secondary ink, same insets, full row) and leaves out only the clear action.
+ */
+export function DatePickerReadOnlyField({
+  value,
+  placeholder,
+  id,
+  glyph = "calendar",
+  "aria-label": ariaLabel,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid,
+}: DatePickerReadOnlyFieldProps) {
+  const Glyph = glyph === "clock" ? ClockIcon : CalendarBlankIcon;
+  return (
+    <View flexDirection="row" alignItems="center" width="100%">
+      <InputParts.Box
+        flex={1}
+        minWidth={0}
+        elevation={undefined}
+        data-testid="date-picker-readonly"
+      >
+        <InputParts.Section data-testid="date-picker-glyph">
+          <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
+            <Glyph />
+          </InputParts.Icon>
+        </InputParts.Section>
+        <InputParts.Section>
+          <InputParts.Area
+            readOnly
+            id={id}
+            value={value}
+            placeholder={placeholder}
+            color={formCommonColors.text}
+            placeholderTextColor={formCommonColors.muted}
+            aria-label={ariaLabel}
+            aria-readonly="true"
+            aria-required={ariaRequired}
+            aria-invalid={ariaInvalid}
+          />
+        </InputParts.Section>
+      </InputParts.Box>
+    </View>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // DatePickerPopoverShell — FloatingPanel (sheet below OVERLAY_BREAKPOINT)
 // ---------------------------------------------------------------------------

package/src/fields/Select/InlineChoices.tsx

@@ -0,0 +1,156 @@
+import { hairline, IconSlot, keyboardFocusRingProps } from "@multiplatform.one/theme";
+import { CheckIcon } from "@phosphor-icons/react";
+import { useRef, type KeyboardEvent, type ReactNode } from "react";
+import { Pressable } from "react-native";
+import { isWeb, Text, View, XStack, YStack } from "tamagui";
+import { useFieldDescribedBy } from "../../fieldLayout";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import { choiceItemA11y } from "../../shared/nativeA11y";
+
+export interface InlineChoice {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface InlineChoicesProps {
+  options: InlineChoice[];
+  value?: string;
+  onValueChange: (value: string) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  /** The field id: FieldLayout's label points at it. */
+  id?: string;
+  labelledBy?: string;
+  "aria-label"?: string;
+  knobProps: any;
+  /** The LC-05 selected mark, already resolved to a paint. */
+  markColor: string;
+}
+
+const nextKeys = new Set(["ArrowDown", "ArrowRight"]);
+const previousKeys = new Set(["ArrowUp", "ArrowLeft"]);
+
+/**
+ * A short Select inside a sheet laid out in place (LC-262 DIRECT-ACTIONS): one
+ * grouped list of radio rows, each with its glyph and label, the chosen row
+ * marked by the accent check alone. No trigger and no popover. On the web it
+ * is one tab stop, arrows move and choose, Space and Enter choose (APG radio
+ * group).
+ */
+export function InlineChoices({
+  options,
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  id,
+  labelledBy,
+  "aria-label": ariaLabel,
+  knobProps,
+  markColor,
+}: InlineChoicesProps) {
+  const describedBy = useFieldDescribedBy();
+  const rowsRef = useRef<Array<HTMLElement | null>>([]);
+  const textColor = knobProps.textAccentColor;
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+
+  const choose = (index: number) => {
+    const option = options[index];
+    if (disabled || !option || option.value === value) return;
+    onValueChange(option.value);
+  };
+
+  const onKeyDown = (index: number) => (event: KeyboardEvent) => {
+    const step = nextKeys.has(event.key) ? 1 : previousKeys.has(event.key) ? -1 : 0;
+    if (step) {
+      event.preventDefault();
+      const next = (index + step + options.length) % options.length;
+      rowsRef.current[next]?.focus();
+      choose(next);
+    } else if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      choose(index);
+    }
+  };
+
+  const rowContent = (option: InlineChoice, index: number, selected: boolean) => (
+    <XStack
+      alignItems="center"
+      height={knobProps.menuRow.minHeight}
+      paddingHorizontal={knobProps.panelPadding.padding}
+      {...knobProps.gap}
+      {...(index === 0 ? undefined : hairline.top)}
+      borderColor={formCommonColors.divider}
+      pointerEvents="none"
+    >
+      <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
+        <IconSlot icon={option.icon} color={textColor} />
+      </View>
+      <Text
+        fontFamily={knobProps.body.fontFamily}
+        fontWeight={knobProps.body.fontWeight}
+        color={textColor}
+        numberOfLines={1}
+        flex={1}
+      >
+        {option.label}
+      </Text>
+      {selected ? <CheckIcon size={14} weight="bold" color={markColor} /> : null}
+    </XStack>
+  );
+
+  return (
+    <YStack
+      id={id}
+      role="radiogroup"
+      aria-labelledby={labelledBy}
+      aria-label={labelledBy ? undefined : ariaLabel}
+      aria-describedby={describedBy}
+      aria-disabled={disabled || undefined}
+      data-testid="select-inline-choices"
+      {...knobProps.borderRadius}
+      borderColor={formInputColors.border.base}
+      backgroundColor={formInputColors.background.base}
+      overflow="hidden"
+      width="100%"
+    >
+      {options.map((option, index) => {
+        const selected = option.value === value;
+        if (isWeb) {
+          return (
+            <View
+              key={option.value}
+              ref={(node: any) => {
+                rowsRef.current[index] = node;
+              }}
+              role="radio"
+              aria-checked={selected}
+              aria-disabled={disabled || undefined}
+              tabIndex={!disabled && index === tabStop ? 0 : -1}
+              cursor={disabled ? "default" : "pointer"}
+              onPress={() => choose(index)}
+              onKeyDown={onKeyDown(index)}
+              onBlur={onBlur}
+              outlineWidth={0}
+              focusVisibleStyle={keyboardFocusRingProps}
+            >
+              {rowContent(option, index, selected)}
+            </View>
+          );
+        }
+        return (
+          <Pressable
+            key={option.value}
+            {...choiceItemA11y({ name: option.label, selected, disabled: !!disabled })}
+            disabled={disabled}
+            onPress={() => choose(index)}
+          >
+            {rowContent(option, index, selected)}
+          </Pressable>
+        );
+      })}
+    </YStack>
+  );
+}

package/src/fields/Select/index.tsx

@@ -1,4 +1,4 @@
-import { useTouchSurface } from "@multiplatform.one/theme";
+import { IconSlot, useTouchSurface } from "@multiplatform.one/theme";
 import type { KeyboardEvent, MouseEvent, ReactNode, RefObject, UIEvent } from "react";
 import {
   useCallback,
@@ -71,6 +71,8 @@ import { useIsInTableCell } from "../../shared/tableCellContext";
 import { t } from "../../shared/t";
 import { orderOptionsBySelected, type SelectedOrder } from "../selectedOrder";
 import { shouldUseIosNativeSelect } from "../nativeSelect";
+import { InlineChoices } from "./InlineChoices";
+import { shouldInlineChoices } from "./shouldInlineChoices";
 
 /** Undefined on web (RNW ships no ActionSheetIOS); real on iOS. */
 const actionSheetIOS = (ReactNative as { ActionSheetIOS?: typeof ReactNative.ActionSheetIOS })
@@ -83,6 +85,12 @@ export interface SelectOption {
   label: string;
   /** Optional group label for grouping options */
   group?: string;
+  /**
+   * Leading glyph on the option's row (LC-112: every menu row carries one when
+   * the options have them). Inside a sheet, five or fewer options that all
+   * carry one render inline as an icon choice list (LC-262).
+   */
+  icon?: ReactNode;
 }
 
 export interface SelectProps {
@@ -160,8 +168,9 @@ const SelectRow = styled(View, {
   // Do not put outlineWidth here — Tamagui maps these onto mouse :focus and
   // they beat instance ring props. Rows paint the ring via selectItemRingProps.
   variants: {
+    // LC-262: the accent check alone marks the chosen row, never a grey fill.
     selected: {
-      true: { backgroundColor: formInputColors.background.base, borderRadius: 0 },
+      true: { backgroundColor: "transparent", borderRadius: 0 },
       false: { backgroundColor: "transparent" },
     },
     active: {
@@ -174,6 +183,15 @@ const SelectRow = styled(View, {
   } as const,
 });
 
+/** An option's leading glyph, in the row's ink. */
+function OptionGlyph({ icon, color }: { icon: ReactNode; color?: string }) {
+  return (
+    <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
+      <IconSlot icon={icon} color={color} />
+    </View>
+  );
+}
+
 function GroupHeader(props: HouseTextProps) {
   return (
     <HouseText
@@ -442,7 +460,9 @@ const SelectItem = memo(function SelectItem({
       role="option"
       tabIndex={-1}
       selected={isSelected}
-      active={isActive}
+      // The open-time cursor sits on the chosen row; it only paints while the
+      // keyboard drives it, so the chosen row never opens grey (LC-262).
+      active={Boolean(isActive) && ctx.kbNav}
       aria-selected={isSelected}
       data-state={isSelected ? "active" : "inactive"}
       height={ctx.knobProps.menuRow.minHeight}
@@ -456,22 +476,15 @@ const SelectItem = memo(function SelectItem({
       {...(suppressHover
         ? {
             hoverStyle: {
-              backgroundColor: isActive
-                ? formInputColors.background.focus
-                : isSelected
-                  ? formInputColors.background.base
-                  : "transparent",
+              backgroundColor: isActive ? formInputColors.background.focus : "transparent",
             },
           }
         : {
-            hoverStyle: {
-              backgroundColor: isSelected
-                ? formInputColors.background.base
-                : formInputColors.background.focus,
-            },
+            hoverStyle: { backgroundColor: formInputColors.background.focus },
           })}
       {...transitionProps(ctx.knobProps.motion.control)}
     >
+      {option.icon ? <OptionGlyph icon={option.icon} color={ctx.textColor} /> : null}
       <Text
         fontFamily={ctx.knobProps.body.fontFamily}
         fontWeight={ctx.knobProps.body.fontWeight}
@@ -1435,30 +1448,16 @@ function NativeSelectCore({
             {...(isWeb ? selectItemRingProps(active, kbNav) : undefined)}
             hoverStyle={
               activeIndex != null
-                ? {
-                    backgroundColor: active
-                      ? formInputColors.background.focus
-                      : selected
-                        ? formInputColors.background.base
-                        : "transparent",
-                  }
-                : {
-                    backgroundColor: selected
-                      ? formInputColors.background.base
-                      : formInputColors.background.focus,
-                  }
-            }
-            backgroundColor={
-              active
-                ? formInputColors.background.focus
-                : selected
-                  ? formInputColors.background.base
-                  : "transparent"
+                ? { backgroundColor: active ? formInputColors.background.focus : "transparent" }
+                : { backgroundColor: formInputColors.background.focus }
             }
+            // LC-262: the accent check alone marks the chosen row.
+            backgroundColor={active && kbNav ? formInputColors.background.focus : "transparent"}
             pressStyle={{ backgroundColor: formInputColors.background.focus }}
             // Native: parent RNPressable owns the hit; disable child stealing.
             pointerEvents={isWeb ? undefined : "none"}
           >
+            {option.icon ? <OptionGlyph icon={option.icon} color={textColor} /> : null}
             <Text
               fontFamily={knobProps.body.fontFamily}
               fontWeight={knobProps.body.fontWeight}
@@ -1747,13 +1746,6 @@ export function Select({
   const isControlled = value !== undefined;
   const hasLabel = Boolean(label);
 
-  // DG-CTRL-01 / DG-CTRL-05 — short single-select lists prefer RadioGroup.
-  warnSelectTooFewOptions({
-    count: options?.length ?? 0,
-    multiple,
-    component: "Select",
-    id,
-  });
   const viewportGtSm = useViewportGtSm();
   const insideOverlay = useInsideOverlay();
   // Sheet core on native and below `$sm` (viewport < 640, OVERLAY_BREAKPOINT).
@@ -1767,6 +1759,19 @@ export function Select({
     hydrated &&
     resolveCompactFace(pickerCompactFace(options?.length ?? 0), insideOverlay) === "menu";
   const shouldUseSheet = !isWeb || (!effectiveGtSm && !compactMenu);
+  const inTableCell = useIsInTableCell();
+  const inline = !inTableCell && shouldInlineChoices({ insideOverlay, multiple, options });
+  // DG-CTRL-01 / DG-CTRL-05 — short single-select lists prefer RadioGroup,
+  // which the inline face already is.
+  if (!inline) {
+    warnSelectTooFewOptions({
+      count: options?.length ?? 0,
+      multiple,
+      component: "Select",
+      id,
+    });
+  }
+  const markColor = useSelectedMarkColor();
 
   // Render skeleton placeholder
   if (skeleton) {
@@ -1831,6 +1836,26 @@ export function Select({
     handleBlur?: (...args: any[]) => void,
   ) => {
     if (readOnly) return renderReadOnly(selectValue);
+    if (inline) {
+      return (
+        <InlineChoices
+          options={options}
+          value={typeof selectValue === "string" ? selectValue : undefined}
+          onValueChange={(val) => {
+            if (disabled) return;
+            handleValueChange?.(val);
+            emitValueChange(val);
+          }}
+          onBlur={handleBlur}
+          disabled={disabled}
+          id={id}
+          labelledBy={hasLabel ? `${id}-label` : undefined}
+          aria-label={ariaLabel}
+          knobProps={knobProps}
+          markColor={markColor}
+        />
+      );
+    }
     const SelectCore = shouldUseSheet ? NativeSelectCore : FloatingSelectCore;
     return (
       <SelectCore

package/src/fields/Select/shouldInlineChoices.spec.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { INLINE_CHOICES_MAX, shouldInlineChoices } from "./shouldInlineChoices";
+
+const glyph = "•";
+const withIcons = (n: number) => Array.from({ length: n }, () => ({ icon: glyph }));
+
+describe("shouldInlineChoices (LC-262, FZ-7830)", () => {
+  it("lays out five or fewer glyphed options inline inside an overlay", () => {
+    expect(INLINE_CHOICES_MAX).toBe(5);
+    expect(shouldInlineChoices({ insideOverlay: true, options: withIcons(2) })).toBe(true);
+    expect(shouldInlineChoices({ insideOverlay: true, options: withIcons(5) })).toBe(true);
+  });
+
+  it("keeps the trigger past five, without a glyph on every option, at page level, or for multiple", () => {
+    expect(shouldInlineChoices({ insideOverlay: true, options: withIcons(6) })).toBe(false);
+    expect(shouldInlineChoices({ insideOverlay: true, options: [...withIcons(3), {}] })).toBe(
+      false,
+    );
+    expect(shouldInlineChoices({ insideOverlay: false, options: withIcons(3) })).toBe(false);
+    expect(
+      shouldInlineChoices({ insideOverlay: true, multiple: true, options: withIcons(3) }),
+    ).toBe(false);
+    expect(shouldInlineChoices({ insideOverlay: true, options: [] })).toBe(false);
+  });
+});