@lotics/ui 42.3.0 → 43.0.0

package/src/inline_time_picker.tsx

@@ -1,18 +1,23 @@
-import { useCallback, useRef, type ReactNode } from "react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
+import { View } from "react-native";
+import { ActivityIndicator } from "./activity_indicator";
 import { Icon } from "./icon";
+import { Text } from "./text";
 import { colors } from "./colors";
-import { TimePicker } from "./time_picker";
-import { useLoticsLocale } from "./locale";
-import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { TimeColumns } from "./time_columns";
+import { formatTimeOfDay } from "./time_options";
+import { type InlineEditVariant, InlineEditView } from "./inline_edit";
+import { useLoticsLocale, useLocaleTag } from "./locale";
 
 export interface InlineTimePickerProps {
   /** Canonical 24-hour "HH:mm", "" when empty. */
   value: string;
   onSave: (next: string) => void | Promise<void>;
   placeholder?: string;
-  /** "blur" (default): clicking away or Enter saves; Escape reverts. "buttons":
-   *  an explicit ✓ saves and ✕ reverts. */
-  controls?: InlineEditControls;
+  /** BCP-47 locale deciding 12- vs 24-hour display and whether a period column
+   *  shows. Defaults to the active `LoticsLocaleProvider` locale. */
+  locale?: string;
   disabled?: boolean;
   /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
@@ -25,51 +30,95 @@ export interface InlineTimePickerProps {
 }
 
 /**
- * An inline-editable time of day — the `InlineTextInput` pattern over
- * `TimePicker`. The value reads as plain text; clicking swaps in the native time
- * field at the same height, so the form never reflows.
+ * An inline-editable time of day: the value at rest, the hour / minute / period
+ * columns in a popover anchored to the field. The pick commits when the popover
+ * closes; dismissing without changing anything writes nothing.
+ *
+ * On the POPOVER inline shell, beside `InlineDatePicker` — not the typed one it
+ * used to sit on. `useInlineEdit` commits when the field BLURS, and a picker
+ * cannot live there: opening one moves focus into it, which reads as a blur,
+ * commits and unmounts the editor before the picker can paint. A pick is not a
+ * keystroke, and the kit keeps two shells precisely to hold that line.
  */
 export function InlineTimePicker(props: InlineTimePickerProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel, variant, actions } = props;
-  const edit = useInlineEdit<string>({ value, onSave });
-  const dateLabels = useLoticsLocale().datePicker;
-  // Segments emit ONLY on a complete "HH:mm", so a half-typed entry (an hour and
-  // no minute) reaches the draft as "" and would otherwise commit as a silent
-  // clear. Blocking on it keeps the entry fixable instead of wiping the value.
-  const incomplete = useRef(false);
+  const { value, onSave, placeholder, locale, disabled, accessibilityLabel, variant, actions } = props;
+  const localeTag = useLocaleTag(locale);
+  const loc = useLoticsLocale().datePicker;
+  const anchorRef = useRef<View>(null);
 
-  const onBlur = useCallback(() => {
-    if (controls === "buttons") return;
-    if (incomplete.current) return;
-    void edit.commit();
-  }, [controls, edit]);
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Closing IS the commit — every column emits a COMPLETE time, so there is
+  // never a half-picked draft to reject and no "incomplete" state to guard. An
+  // unchanged draft writes nothing rather than sending a no-op update.
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) {
+        setDraft(value);
+        setError(null);
+        setOpen(true);
+        return;
+      }
+      setOpen(false);
+      if (draft === value) return;
+      setSaving(true);
+      void (async () => {
+        try {
+          await onSave(draft);
+          setError(null);
+        } catch (err) {
+          setError(err instanceof Error ? err.message : String(err));
+          setDraft(value);
+        } finally {
+          setSaving(false);
+        }
+      })();
+    },
+    [draft, value, onSave],
+  );
+
+  const trailing = saving ? (
+    <ActivityIndicator size={16} color={colors.zinc[400]} />
+  ) : (
+    <Icon name="clock" size={18} color={colors.zinc[400]} />
+  );
 
   return (
-    <InlineEditFrame
-      variant={variant}
-      actions={actions}
-      editing={edit.editing}
-      display={value}
-      placeholder={placeholder}
-      onBegin={edit.begin}
-      controls={controls}
-      onCommit={() => void edit.commit()}
-      onCancel={edit.cancel}
-      saving={edit.saving}
-      error={edit.error ?? (incomplete.current ? dateLabels.invalidTime : null)}
-      disabled={disabled}
-      accessibilityLabel={accessibilityLabel}
-      affordance={<Icon name="clock" size={18} color={colors.zinc[400]} />}
-    >
-      <TimePicker
-        value={edit.draft}
-        onValueChange={edit.setDraft}
-        onBlur={onBlur}
-        onEscape={edit.cancel}
-        onIncompleteChange={(next) => { incomplete.current = next; }}
-        autoFocus
-        accessibilityLabel={accessibilityLabel}
-      />
-    </InlineEditFrame>
+    <View>
+      <Popover
+        open={open && !disabled}
+        onOpenChange={handleOpenChange}
+        triggerRef={anchorRef}
+        side="bottom"
+        align="start"
+      >
+        <PopoverTrigger>
+          <InlineEditView
+            variant={variant}
+            actions={actions}
+            anchorRef={anchorRef}
+            display={value ? formatTimeOfDay(value, localeTag) : ""}
+            placeholder={placeholder ?? loc.chooseTime}
+            disabled={disabled}
+            active={open && !disabled}
+            accessibilityLabel={accessibilityLabel ?? loc.chooseTime}
+            // The resting clock glyph marks an empty field as a TIME control —
+            // the same promise the standalone picker's trigger makes.
+            trailing={trailing}
+          />
+        </PopoverTrigger>
+        <PopoverContent disableBodyScroll>
+          <TimeColumns value={draft} onValueChange={setDraft} locale={locale} />
+        </PopoverContent>
+      </Popover>
+      {error ? (
+        <Text size="xs" color="danger" style={{ marginTop: 4 }}>
+          {error}
+        </Text>
+      ) : null}
+    </View>
   );
 }

package/src/list_item.tsx

@@ -1,8 +1,8 @@
-import { Ref, useCallback } from "react";
+import { Ref, useCallback, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
-import { PressableHighlight } from "./pressable_highlight";
+import { FocusRingPressable } from "./focus_ring_pressable";
 
 export interface ListItemProps {
   ref?: Ref<View>;
@@ -21,6 +21,29 @@ export interface ListItemProps {
  * A settings / detail ROW — optional `left` (icon/avatar), `title` + `description`, a `right`
  * control, optional `onPress`/`selected`. For settings lists and detail rows; NOT a data register
  * row (`PressableRow` / `Table`) and NOT a menu/listbox row (`MenuListItem`).
+ *
+ * **A pressable row always presses BESIDE its `right` slot, never around it.** The slot is
+ * documented as holding a control, and a button may not contain one: `<button>` inside
+ * `<button>` is invalid HTML that React warns about, and it puts a second tab stop and a
+ * second name inside a control that is supposed to be one thing. So the surface is a wrapper,
+ * the press target is the region holding `left` and the text, and the slot sits outside it —
+ * the anatomy `InlineEditView` uses for its `actions`.
+ *
+ * It does NOT fix a double press: react-native-web's press responder calls
+ * `stopPropagation`, so a nested control's press never reached the row in the first place.
+ * The nesting alone is the defect.
+ *
+ * ALWAYS, not only when a slot is passed. `right` is routinely conditional
+ * (`updateAvailable ? <Badge/> : undefined`), and an anatomy that flipped on that would make
+ * two rows in one list press differently — the badge row's right edge dead, its neighbour's
+ * live — for a reason a reader cannot see. One shape, whatever the data does. With no slot
+ * the region takes the whole row, so the press target is unchanged.
+ *
+ * That the anatomy carries this rather than a prop opting into safety is the point: every
+ * call site already passing a control here is fixed without being touched, and a caller
+ * cannot reintroduce the nesting by forgetting a flag. The cost is that a decorative `right`
+ * (a badge, a chevron) is not part of the press target — uniformly, which is what makes it
+ * readable rather than surprising.
  */
 export function ListItem(props: ListItemProps) {
   const { ref, left, title, description, right, onPress, selected, disabled, style, testID } =
@@ -30,7 +53,8 @@ export function ListItem(props: ListItemProps) {
     onPress?.();
   }, [title, testID, onPress]);
 
-  const inner = (
+  // Everything the row is ABOUT — never the `right` slot, which may hold a control.
+  const body = (
     <>
       {left}
       <View style={styles.textContainer}>
@@ -48,7 +72,6 @@ export function ListItem(props: ListItemProps) {
             description
           ))}
       </View>
-      {right}
     </>
   );
 
@@ -56,21 +79,79 @@ export function ListItem(props: ListItemProps) {
 
   if (onPress) {
     return (
-      <PressableHighlight
-        focusRing
-        ref={ref}        testID={testID}
+      <PressRow
+        ref={ref}
+        testID={testID}
+        containerStyle={containerStyle}
         onPress={handlePress}
         disabled={disabled}
-        style={containerStyle}
+        right={right}
       >
-        {inner}
-      </PressableHighlight>
+        {body}
+      </PressRow>
     );
   }
 
   return (
     <View ref={ref} testID={testID} style={containerStyle}>
-      {inner}
+      {body}
+      {right}
+    </View>
+  );
+}
+
+/**
+ * The pressable anatomy: a non-pressable surface, the press target inside it, the
+ * slot beside that.
+ *
+ * The wash lives on the WRAPPER and is driven by the press region's own hover and
+ * press, so the whole row lights up as one thing — the region alone would light up
+ * to the edge of the slot and stop, which reads as two rows. It uses
+ * `FocusRingPressable` for exactly that reason: the wash-free base, for a control
+ * that paints its own surface.
+ *
+ * `ref` and `testID` go on the REGION, not the wrapper, because they identify the
+ * thing that presses: a test that clicks the row by `testID` must land on the
+ * press target rather than on a box that happens to contain it. The region also
+ * keeps the focus ring and the accessible name, since the text it wraps is what
+ * names the row.
+ */
+function PressRow(props: {
+  ref?: Ref<View>;
+  testID?: string;
+  containerStyle: StyleProp<ViewStyle>;
+  onPress: () => void;
+  disabled?: boolean;
+  right?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const { ref, testID, containerStyle, onPress, disabled, right, children } = props;
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <View
+      style={[
+        containerStyle,
+        !disabled && pressed && styles.pressed,
+        !disabled && !pressed && hovered && styles.hovered,
+      ]}
+    >
+      <FocusRingPressable
+        ref={ref}
+        testID={testID}
+        style={styles.pressRegion}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        onHoverIn={() => setHovered(true)}
+        onHoverOut={() => setHovered(false)}
+        onPressIn={() => setPressed(true)}
+        onPressOut={() => setPressed(false)}
+      >
+        {children}
+      </FocusRingPressable>
+      {right}
     </View>
   );
 }
@@ -93,4 +174,21 @@ const styles = StyleSheet.create({
   selected: {
     backgroundColor: colors.zinc["100"],
   },
+  // The wash `PressableHighlight` would have painted, moved to the wrapper so it
+  // covers the row rather than stopping at the slot.
+  hovered: {
+    backgroundColor: colors.zinc["100"],
+  },
+  pressed: {
+    backgroundColor: colors.zinc["200"],
+  },
+  // Takes the slack, so the press target reaches the slot and the row presses
+  // everywhere the row is ABOUT.
+  pressRegion: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    alignSelf: "stretch",
+  },
 });

package/src/locale.tsx

@@ -47,6 +47,11 @@ export interface LoticsLocale {
    *  in-cell editors): the select-all/deselect-all links, the empty state, the
    *  internal search-field placeholder, and the `Combobox` recents header. */
   optionList: { selectAll: string; deselectAll: string; clear: string; noResults: string; recent: string; searchPlaceholder: string };
+  /** `Picker`'s empty option, when the caller declares empty a CHOICE
+   *  (`includeEmptyOption`). A value, not an action — hence "None" rather than
+   *  the option list's "Clear": in a native `<select>` the reader picks it the
+   *  same way they pick any other row, so it has to read like one. */
+  picker: { emptyOption: string };
   datePicker: DatePickerLabels;
   calendar: CalendarLabels;
   /** `FilterChip` (and `ColumnFilter`): the generic clear affordance, used when
@@ -266,7 +271,8 @@ export const en: LoticsLocale = {
   },
   referenceField: { open: "Open", change: "Change", clear: "Clear", edit: "Edit", save: "Save", saving: "Saving…", cancel: "Cancel" },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
-  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date", invalidTime: "Enter a complete time" },
+  picker: { emptyOption: "None" },
+  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", chooseTime: "Choose a time", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date", invalidTime: "Enter a complete time" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
   filterChip: { clear: "Clear" },
   floatingActionBar: { clear: "Clear" },
@@ -437,7 +443,8 @@ export const vi: LoticsLocale = {
   },
   referenceField: { open: "Mở", change: "Đổi", clear: "Bỏ chọn", edit: "Sửa", save: "Lưu", saving: "Đang lưu…", cancel: "Huỷ" },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
-  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
+  picker: { emptyOption: "Không có" },
+  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", chooseTime: "Chọn giờ", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
   filterChip: { clear: "Xóa" },
   floatingActionBar: { clear: "Bỏ chọn" },

package/src/menu_button.tsx

@@ -47,6 +47,21 @@ export interface MenuButtonProps {
    * the common popover-menu usage.
    */
   role?: "menuitem" | "button" | "option";
+  /**
+   * Roving tabindex for a listbox this row belongs to: the selected row passes
+   * `0` and every other row `-1`, so Tab reaches the list ONCE and arrows move
+   * within it (the composite-widget rule — sixty rows must not be sixty stops).
+   *
+   * Here rather than hand-rolled beside it because this component already claims
+   * to BE the listbox row — it owns `selected` and the `aria-selected` that
+   * carries the state — and a row that cannot take the tab stop or the keys is
+   * only half of one. `OptionList` does not need it: that body drives keys from
+   * a hidden input, the combobox pattern, where the rows are never focused.
+   */
+  tabIndex?: 0 | -1;
+  /** Web-only key handler, forwarded to the DOM by react-native-web. Pairs with
+   *  {@link MenuButtonProps.tabIndex} to move the roving focus. */
+  onKeyDown?: (event: { key: string; preventDefault?: () => void }) => void;
 }
 
 export function MenuButton(props: MenuButtonProps) {
@@ -68,6 +83,8 @@ export function MenuButton(props: MenuButtonProps) {
     accessibilityLabel,
     role = "menuitem",
     nativeID,
+    tabIndex,
+    onKeyDown,
   } = props;
 
   const resolvedLabel = accessibilityLabel ?? (typeof title === "string" ? title : undefined) ?? tooltip;
@@ -126,6 +143,8 @@ export function MenuButton(props: MenuButtonProps) {
           onPress?.();
         }}
         onHoverIn={onHoverIn}
+        onKeyDown={onKeyDown}
+        tabIndex={tabIndex}
         disabled={disabled}
         tooltip={tooltip}
         style={containerStyle}

package/src/option_list.tsx

@@ -139,6 +139,14 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
                 !props.multi && row.selected ? (
                   <Icon name="check" size={18} color={colors.zinc["950"]} />
                 ) : undefined,
+              // A chosen row is `selected`, which is what puts `aria-selected` on
+              // it — the property an `option` carries its state in. Until now the
+              // only signal was the check GLYPH beside it (and a checkbox in
+              // multi), so which option was chosen was information available to
+              // whoever could see the row and to nobody else. It also brings the
+              // resting `zinc.100` highlight, one weight above the `zinc.50` the
+              // keyboard/hover row takes, so the two states stay distinguishable.
+              selected: row.selected,
               focused: row.index === list.activeIndex,
               disabled: opt.disabled,
               onPress: () => list.pickRow(row.index),

package/src/picker.tsx

@@ -7,6 +7,9 @@ import { useFocusRing } from "./use_focus_ring";
 import { useHover } from "./use_hover";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { Icon } from "./icon";
+import { useLoticsLocale } from "./locale";
+import { useFormField } from "./form_field";
+import { pickerEmptyOptionLabel } from "./picker_empty_option";
 
 export interface PickerOption<T extends string = string, D = unknown> {
   label?: string;
@@ -41,7 +44,15 @@ export interface PickerProps<T extends string = string> {
   testID?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  /** Declares empty a CHOICE: the reader may pick it to clear the field, so the
+   *  option stays in the list after something is selected. Because it is a value
+   *  they pick, it is NAMED — see `emptyOptionLabel`. */
   includeEmptyOption?: boolean;
+  /** Overrides the name of that empty choice (locale default: "None"). Distinct
+   *  from `placeholder`, which is the hint shown while nothing is chosen: a hint
+   *  and a value are different jobs, and one string cannot do both — read as a
+   *  prompt it invites input, read as a row it looks selectable. */
+  emptyOptionLabel?: string;
   value?: T | null;
   onValueChange?: (value: T) => void;
 }
@@ -61,12 +72,25 @@ export function Picker<T extends string>(props: PickerProps<T>) {
     includeEmptyOption,
     onValueChange,
     placeholder,
+    emptyOptionLabel,
     accessibilityLabel,
     style,
     disabled = false,
     autoFocus = false,
   } = props;
 
+  const binding = useFormField();
+  const describedBy =
+    [binding?.descriptionId, binding?.warningId, binding?.errorId].filter(Boolean).join(" ") ||
+    undefined;
+  const locale = useLoticsLocale();
+  const emptyLabel = pickerEmptyOptionLabel({
+    includeEmptyOption,
+    emptyOptionLabel,
+    placeholder,
+    localeEmptyOption: locale.picker.emptyOption,
+  });
+
   const pickerRef = useRef<RNPicker<string>>(null);
   // The native <select> is a text-like control — ring on any focus (like the inputs).
   const { focusVisible, focusProps } = useFocusRing({ always: true });
@@ -100,7 +124,18 @@ export function Picker<T extends string>(props: PickerProps<T>) {
       <RNPicker
         ref={pickerRef}
         testID={testID}
-        accessibilityLabel={accessibilityLabel}
+        // Inside a `FormField` the VISIBLE label names the control, the same way
+        // it does for `NumberInput` / `TextInputField`. Without this a
+        // `FormPicker` rendered a label the select was never associated with, so
+        // it announced its current value and no name at all — the label was
+        // there for sighted readers only. An explicit `accessibilityLabel` is
+        // used only OUTSIDE a field: inside one, an aria-label that differs from
+        // the visible text is what breaks label-in-name.
+        id={binding?.inputId}
+        aria-labelledby={binding?.labelId}
+        aria-label={!binding ? accessibilityLabel : undefined}
+        aria-describedby={describedBy}
+        aria-invalid={binding?.invalid || undefined}
         onFocus={focusProps.onFocus}
         onBlur={focusProps.onBlur}
         // Empty selection maps to "" (the placeholder option's value), never
@@ -113,10 +148,20 @@ export function Picker<T extends string>(props: PickerProps<T>) {
         enabled={!disabled}
       >
         {(!value || includeEmptyOption) && (
-          // Show the placeholder as the empty option (the standard
-          // `<option value="" selected>Placeholder</option>` pattern) so a
-          // native select hints what to choose.
-          <RNPicker.Item label={!value ? (placeholder ?? "") : ""} value="" />
+          // Two different jobs share this one row, and which one it is doing
+          // depends on `includeEmptyOption`:
+          //
+          // A CHOICE (`includeEmptyOption`) — the reader picks it to clear the
+          // field, so it is named, and named the SAME whether or not something
+          // is currently selected. It previously went blank the moment a value
+          // existed, which is exactly when the reader needs it: every select in
+          // the product offered an unlabelled row as its only way back to empty.
+          //
+          // A PLACEHOLDER (otherwise) — it exists only because nothing is
+          // chosen yet, so it carries the caller's hint and disappears on
+          // selection. Naming it "None" here would turn a prompt into an
+          // apparent value.
+          <RNPicker.Item label={emptyLabel} value="" />
         )}
         {options.map((option) =>
           option ? (

package/src/picker_empty_option.ts

@@ -0,0 +1,30 @@
+/**
+ * What `Picker`'s empty row is called — and it depends on which of two jobs that
+ * row is doing.
+ *
+ * A CHOICE (`includeEmptyOption`) is how the reader gets back to no value. They
+ * pick it the way they pick any other row, so it is NAMED, and named the same
+ * whether or not something is currently selected — a name that vanishes on
+ * selection vanishes exactly when it is needed.
+ *
+ * A PLACEHOLDER exists only because nothing is chosen yet. It carries the
+ * caller's hint and leaves on selection; naming it "None" would turn a prompt
+ * into an apparent value.
+ *
+ * RN-free so the rule is testable as the rule, rather than through a native
+ * `<select>` and its untranspiled dependency.
+ */
+export function pickerEmptyOptionLabel(opts: {
+  includeEmptyOption?: boolean;
+  /** Per-instance override for the choice's name. */
+  emptyOptionLabel?: string;
+  /** The caller's hint, used only when the row is a placeholder. */
+  placeholder?: string;
+  /** The locale pack's word for "no value". */
+  localeEmptyOption: string;
+}): string {
+  if (opts.includeEmptyOption) {
+    return opts.emptyOptionLabel ?? opts.localeEmptyOption;
+  }
+  return opts.placeholder ?? "";
+}

package/src/pressable_highlight.tsx

@@ -10,7 +10,7 @@ import {
 import { Ref, useCallback } from "react";
 import { TooltipSide, useTooltip } from "./tooltip";
 import { colors } from "./colors";
-import { FOCUS_RING } from "./control_surface";
+import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { composeHandler, useFocusRing } from "./use_focus_ring";
 
 /** The pressable state, plus the web-only `hovered` flag react-native-web adds and
@@ -58,11 +58,19 @@ export interface PressableHighlightProps extends PressableProps {
    */
   "aria-current"?: "true" | "page" | "step" | "location";
   /**
-   * Pass "none" on row/card surfaces: a pressable surface is a button, not a
-   * text-selection surface — drag jitter on selectable text starts a
-   * selection and can swallow the click. Exposed as a prop because RN types
-   * only carry `userSelect` on TextStyle, while react-native-web applies it
-   * to any element.
+   * Defaults to `"none"`, because this component IS a button (see the role note
+   * below) and a button's label is not a text-selection surface — drag jitter on
+   * selectable text starts a selection and can swallow the click.
+   *
+   * It was opt-in, and the result was what an opt-in rule always produces:
+   * `Switcher`, `Chip`, `CardSelectItem` and `Stepper` had simply never been
+   * told, so their labels dragged into a selection. Pass `"auto"` where the
+   * content genuinely is text to read and copy — nothing in the kit does, and the
+   * register row that DOES want selectable text is `PressableRow`, which is a
+   * role-less bare `Pressable` and unaffected by this.
+   *
+   * Exposed as a prop at all because RN types only carry `userSelect` on
+   * TextStyle, while react-native-web applies it to any element.
    */
   userSelect?: "auto" | "none";
 }
@@ -89,7 +97,7 @@ export function PressableHighlight(props: PressableHighlightProps) {
     tooltip,
     tooltipSide = "top",
     onPress,
-    userSelect,
+    userSelect = "none",
     focusRing,
     ...restPressableProps
   } = props;
@@ -114,7 +122,11 @@ export function PressableHighlight(props: PressableHighlightProps) {
         const { pressed, hovered } = state;
         return [
           {
-            ...({ touchAction: "manipulation", cursor: disabled ? "auto" : "pointer", transitionDuration: "0.1s", transitionProperty: "background-color", userSelect } as ViewStyle),
+            // The ARROW by default — see `CURSOR_DEFAULT`. Rows, menu options and
+            // cards are what this base is for, and none of them act on their own;
+            // the handful that do set `CURSOR_ACTION` in their own style, which
+            // lands after this one.
+            ...({ touchAction: "manipulation", cursor: CURSOR_DEFAULT, transitionDuration: "0.1s", transitionProperty: "background-color", userSelect } as ViewStyle),
           },
           {
             backgroundColor: pressed ? colors.zinc["200"] : hovered ? colors.zinc["100"] : null,

package/src/pressable_row.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, Ref, useCallback, useState } from "react";
-import { ROW_WASH_BLEED } from "./control_surface";
+import { CURSOR_DEFAULT, ROW_WASH_BLEED } from "./control_surface";
 import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
 import { pressSelectedText } from "./press_selection";
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
     // furniture that must not be dragged over already opts out for itself
     // (`Badge`, `Avatar`, `Button` each set none), so the blanket only ever cost
     // the text it had no business covering.
-    ...({ cursor: "pointer", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
+    ...({ cursor: CURSOR_DEFAULT, transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
   },
   // THE register row — FULL-WIDTH rounded highlight that BLEEDS past the content
   // (`ROW_WASH_BLEED`, net-zero margin+padding), so the row's content sits on the

package/src/scroll_to_bottom.tsx

@@ -1,5 +1,6 @@
 import { colors } from "./colors";
 import { StyleSheet } from "react-native";
+import { CURSOR_ACTION } from "./control_surface";
 import { Icon } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 import { useLoticsLocale } from "./locale";
@@ -30,6 +31,8 @@ export function ScrollToBottom(props: ScrollToBottomProps) {
 
 const styles = StyleSheet.create({
   button: {
+    // Jumping to the bottom ACTS — see `CURSOR_ACTION`.
+    cursor: CURSOR_ACTION,
     borderWidth: 1,
     borderColor: colors.border,
     backgroundColor: colors.background,