@lotics/ui 42.4.0 → 43.1.0

package/src/focus_ring_pressable.tsx

@@ -1,6 +1,6 @@
 import { Pressable, type PressableProps, type StyleProp, type View, type ViewStyle } from "react-native";
 import { type Ref } from "react";
-import { FOCUS_RING } from "./control_surface";
+import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { useFocusRing, composeHandler } from "./use_focus_ring";
 import { type PressableHighlightState } from "./pressable_highlight";
 
@@ -42,6 +42,11 @@ export function FocusRingPressable({ ref, style, onFocus, onBlur, userSelect, ..
       onBlur={composeHandler(onBlur ?? undefined, focusProps.onBlur)}
       style={(state) =>
         [
+          // The ARROW by default — see `CURSOR_DEFAULT`. This base is for fields,
+          // cells and tiles, none of which act on their own; without it they took
+          // react-native-web's `Pressable` pointer, which is not a default we
+          // chose.
+          ({ cursor: CURSOR_DEFAULT } as ViewStyle),
           userSelect ? ({ userSelect } as ViewStyle) : null,
           typeof style === "function" ? style({ ...state, focusVisible }) : style,
           focusVisible ? { boxShadow: FOCUS_RING } : null,

package/src/font_family.ts

@@ -0,0 +1,26 @@
+/**
+ * THE BODY FACE, as three weight rungs.
+ *
+ * Weight is a FAMILY in this kit, not a `font-weight`: Inter ships as three
+ * separate `@font-face` families (`Inter_400Regular` / `Inter_500Medium` /
+ * `Inter_600SemiBold`), which is the React Native convention and the reason a
+ * single family token cannot express the ladder on its own.
+ *
+ * So the tokens are per-rung, and `LoticsThemeProvider` FANS ONE VALUE OUT
+ * across all three when an app sets `bodyFont`. That is what keeps the app-facing
+ * surface at one parameter while the kit keeps a rung it can default correctly:
+ * unthemed, each rung resolves to its own Inter face; themed, all three resolve
+ * to the app's family and the numeric `font-weight` already on every style makes
+ * the weights. The fan-out lives in the provider, where it is explained once,
+ * rather than at 11 call sites that would each have to remember it.
+ */
+/** Native: literals. `var()` means nothing off the web. */
+export const fontFamilyRegular = `Inter_400Regular, "apple-system", "BlinkMacSystemFont",
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif`;
+export const fontFamilyMedium = `Inter_500Medium, "apple-system", "BlinkMacSystemFont",
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif`;
+export const fontFamilySemiBold = `Inter_600SemiBold, "apple-system", "BlinkMacSystemFont",
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif`;

package/src/font_family.web.ts

@@ -0,0 +1,29 @@
+/**
+ * THE BODY FACE, as three weight rungs.
+ *
+ * Weight is a FAMILY in this kit, not a `font-weight`: Inter ships as three
+ * separate `@font-face` families (`Inter_400Regular` / `Inter_500Medium` /
+ * `Inter_600SemiBold`), which is the React Native convention and the reason a
+ * single family token cannot express the ladder on its own.
+ *
+ * So the tokens are per-rung, and `LoticsThemeProvider` FANS ONE VALUE OUT
+ * across all three when an app sets `bodyFont`. That is what keeps the app-facing
+ * surface at one parameter while the kit keeps a rung it can default correctly:
+ * unthemed, each rung resolves to its own Inter face; themed, all three resolve
+ * to the app's family and the numeric `font-weight` already on every style makes
+ * the weights. The fan-out lives in the provider, where it is explained once,
+ * rather than at 11 call sites that would each have to remember it.
+ */
+/**
+ * Each rung carries its own Inter face as the inline fallback, so an app that
+ * themes nothing renders byte-identically to before these variables existed.
+ */
+export const fontFamilyRegular = `var(--lotics-font-regular, Inter_400Regular, "apple-system", "BlinkMacSystemFont",
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif)`;
+export const fontFamilyMedium = `var(--lotics-font-medium, Inter_500Medium, "apple-system", "BlinkMacSystemFont",
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif)`;
+export const fontFamilySemiBold = `var(--lotics-font-semibold, Inter_600SemiBold, "apple-system", "BlinkMacSystemFont",
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif)`;

package/src/icon_button.tsx

@@ -2,7 +2,7 @@ import { ActivityIndicator, GestureResponderEvent, StyleProp, StyleSheet, View,
 import { Icon, IconName } from "./icon";
 import { colors } from "./colors";
 import { PressableHighlight } from "./pressable_highlight";
-import { ROW_CONTROL_HOVER, ROW_CONTROL_PRESS } from "./control_surface";
+import { CURSOR_ACTION, ROW_CONTROL_HOVER, ROW_CONTROL_PRESS } from "./control_surface";
 import { type ButtonColor } from "./button";
 import { getButtonIconColor } from "./button_colors";
 import { Ref } from "react";
@@ -114,6 +114,8 @@ export function IconButton(props: IconButtonProps) {
 
 const styles = StyleSheet.create({
   button: {
+    // An icon-only ACTION — see `CURSOR_ACTION`.
+    cursor: CURSOR_ACTION,
     flexDirection: "row",
     gap: 8,
     alignItems: "center",

package/src/image_gallery.tsx

@@ -91,7 +91,7 @@ export function ImageGallery({
           borderColor: colors.border,
           backgroundColor: colors.zinc["100"],
           overflow: "hidden",
-          cursor: "pointer",
+          cursor: "auto",
         }}
       >
         <RotatableImage uri={main.url} alt={main.filename} rotation={rotation.rotationFor(main.id)} />

package/src/index.css

@@ -1,6 +1,4 @@
 :root {
-  --font-family: "Inter", sans-serif;
-
   --font-size-xs: 12px;
   --font-size-xs-line-height: 16px;
   --font-size-sm: 14px;

package/src/inline_button.tsx

@@ -2,7 +2,7 @@ import { type GestureResponderEvent } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { PressableHighlight } from "./pressable_highlight";
-import { CONTROL_CONTENT_HEIGHT, CONTROL_TRANSITION } from "./control_surface";
+import { CONTROL_CONTENT_HEIGHT, CONTROL_TRANSITION, CURSOR_ACTION } from "./control_surface";
 
 /** The height that fits INSIDE the 40px inline control band with 6px of air
  *  above and below — the same air a `DetailRow`'s label gets against its value.
@@ -65,6 +65,8 @@ export function InlineButton(props: InlineButtonProps) {
         onPress();
       }}
       style={(state) => [
+        // A verb ACTS — see `CURSOR_ACTION`.
+        { cursor: CURSOR_ACTION },
         {
           height: INLINE_BUTTON_HEIGHT,
           paddingHorizontal: 10,

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

@@ -272,7 +272,7 @@ 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…" },
   picker: { emptyOption: "None" },
-  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" },
+  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" },
@@ -444,7 +444,7 @@ 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…" },
   picker: { emptyOption: "Không có" },
-  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 đủ" },
+  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/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";
@@ -86,7 +86,11 @@ export function PressableRow(props: PressableRowProps) {
         styles.row,
         variant === "inset" ? styles.inset : variant === "bleed" ? styles.bleed : styles.register,
         {
-          backgroundColor: pressed ? colors.zinc[200] : selected ? colors.zinc[100] : hovered ? colors.zinc[100] : marked ? colors.blue[50] : undefined,
+          // Hover and selection wear the brand's WASH, whose default IS the zinc-100
+          // these states already used — so an unthemed app is unchanged and a themed
+          // one warms every row it touches. `pressed` stays neutral and one step
+          // darker: it is a momentary depth cue, not an identity.
+          backgroundColor: pressed ? colors.zinc[200] : selected ? colors.accent_wash : hovered ? colors.accent_wash : marked ? colors.blue[50] : undefined,
         },
         style,
       ]}
@@ -107,7 +111,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,