@lotics/ui 47.9.0 → 47.10.1

package/docs/catalog.md

@@ -425,7 +425,8 @@ component — children are the body), `Subsection` (+ `SubsectionHeading`/
 `SectionStack` (the flat page's content column — owns the fixed 56px beat + hairline between
 top-level blocks), `SubsectionStack` (a section's `Subsection` groups — fixed 32px beat,
 space-only while the groups are SHORT, `divided` once they run long), `SectionCard`, `PageHeader` /
-`PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `SegmentedControl`,
+`PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `PipelineTabs` (Tabs plus order —
+the stage strip of a lifecycle desk, outcomes set apart), `SegmentedControl`,
 `Stepper`, `DangerZone` (the destructive section — delete/archive — set apart at the bottom
 of a record/settings surface).
 
@@ -909,9 +910,30 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   can finish their task without ever opening it. → [composition.md](./composition.md)
   §"Canvas & content column". `Accordion` + `AccordionHeader`/`AccordionTitle`/`AccordionMeta`:
   expandable section rows.
-- **`tabs`** — `Tabs`: switch between content sections; WAI-ARIA tablist + roving tabindex;
-  each `TabOption` takes an optional `status` `ColorName` → a small attention dot before its
-  label, for a tab whose area needs work.
+- **`tabs`** — `Tabs`: switch between content sections; WAI-ARIA tablist + roving tabindex.
+  Each `TabOption` takes an optional `status` `ColorName` (a small dot before the label, for a
+  tab whose area needs work), `count` (the band's size, as a PROP — never formatted into the
+  label) and `caption` (a second line under the label, one pre-formatted figure; once any tab in
+  a strip has one, every tab reserves the line so the strip keeps one height). Also exports
+  `TabButton`, the ONE tab anatomy `PipelineTabs` shares, plus `TAB_PADDING_V` /
+  `TAB_LABEL_LINE` so a strip drawing something beside a tab can sit it on the label line.
+- **`pipeline_tabs`** — `PipelineTabs` + `PipelineTab` + `PipelineOutcomes`: `Tabs` plus ORDER
+  — the stage strip over a lifecycle desk, a compound. The root (`value`/`onValueChange`,
+  `accessibilityLabel`) is the `tablist` and owns the keyboard ring; each `PipelineTab` (`value`,
+  `label`, `count?`, `caption?`, `status?`) is `Tabs`' own `TabButton`, so the two strips cannot
+  drift; `PipelineOutcomes` wraps the terminal stages past a rule with no chevrons between them.
+  Children in PIPELINE ORDER, the flow joined by chevrons sat on the label line; a tab inserted
+  anywhere (through a Fragment too) joins the ring where it sits. `label` is the reader's word —
+  a field option's label or a locale string; the strip renders no words of its own. `status` is
+  an optional dot in the `Badge variant="dot"` vocabulary, with two honest uses: the verdict on
+  the outcomes only (the flow bare — being at a stage is not a status), or every stage in its
+  option's colour when the rows below badge that same field; never a decoration picked per
+  stage. Reach for it when each
+  stage changes what the register under it IS — its columns, its act, its figure — the
+  lifecycle desk's tab strip (→ [templates.md](./templates.md) §"App-screen shapes"). NOT a
+  filter: stages that show the same columns over fewer rows are a `ChipGroup` with counts. NOT a
+  report: a funnel's rates are `Funnel`'s, a share bar is `Breakdown`'s. NOT one record's ladder:
+  that is `Checklist connected` / `Stepper`. Owns its horizontal scroll, never the page's.
 - **`segmented_control`** — `SegmentedControl`: the exclusive small-set switch. Picking between
   this, `ChipGroup`, `RadioPicker`, `Select` and `Tabs` is decided by OPTION COUNT and by
   whether the choice filters a view or sets a value — not by taste. →
@@ -2006,6 +2028,11 @@ a child of the app root, which every overlay's body-level box follows.
   module-level open-overlay counter every overlay primitive reports into; the host's
   shortcut registry reads it synchronously to floor page-level shortcuts while any overlay
   is open. Lives in the primitives — never call it from a screen.
+- **`use_roving_tabs`** — `useRovingTabs({ count, selectedIndex, onSelect })` →
+  `{ tabStopIndex, onKeyDown, bindRef }`: the WAI-ARIA tabs keyboard contract (one tab stop, arrow
+  keys select AND move focus, Home/End) shared by `Tabs` and `Pipeline`. Reach for it when
+  building a NEW `tablist`; a `radiogroup` (`SegmentedControl`) selects on Space/Enter as well and
+  is not this hook.
 - **`use_section_nav`** — `useSectionNav`: scroll-spy for a LONG record surface with a left
   outline rail — keys in page order → `{scrollRef, onScroll, register(key)→onLayout,
   jumpTo(key), activeKey}`; rail items are `MenuButton`s (`current={activeKey===key}` — a

package/docs/composition.md

@@ -1132,6 +1132,11 @@ by what KIND of thing they are.
   screen) or a `SegmentedControl` (a mode of it); if neither fits because the two panels really
   are different content, that tab was **two destinations wearing one name** and the fix is to
   promote both into the strip above.
+  **The one strip that may sit under a `Tabs` is a `PipelineTabs`**, and only because it is not a
+  second copy of anything: its stages change the register's columns and act (the lifecycle desk, →
+  [templates.md](./templates.md)), so it is the section's own content, not a lens on it. The test
+  that keeps this honest is the same one that makes a tab a tab — if every stage showed the same
+  columns, it is a `ChipGroup`.
   **The label confesses it before the layout does: a tab named "X and Y" is two tabs.** Reach for
   the domain's own list of things — the entities its people already name one at a time — and give
   each one a tab; a pair invented to keep the strip short buys nothing, because the pair has to be

package/docs/templates.md

@@ -115,7 +115,10 @@ the filters, never a second copy of them; each states its own size and trouble a
 application, a shipment, a repair. *"What is stuck, and what do I move next?"*
 
 - **Tabs: the stages**, and here they earn it — each band carries its own act (confirm, dispatch,
-  close), its own summary, often its own columns. Roughly five; past that the tail is a lens.
+  close), its own summary, often its own columns. Roughly five; past that the tail is a lens. The
+  strip is a `PipelineTabs` — `Tabs` plus order: the same tab anatomy drawn as the flow, each stage
+  with its dot, count and caption, the won/lost outcomes set apart — rather than a plain `Tabs`,
+  because for a pipeline the ORDER is the subject and a wrapping row of names drops it.
 - **Record: a `Drawer`.** The reader came from the list and returns to it, and the drawer's ◀ ▶
   sequences the band they were reading.
 - **Row vs record:** the row carries what the NEXT act needs — the goods, the money, the clock —

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.9.0",
+  "version": "47.10.1",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",
@@ -277,6 +277,7 @@
     "./table": "./src/table.tsx",
     "./table_fit": "./src/table_fit.ts",
     "./tabs": "./src/tabs.tsx",
+    "./pipeline_tabs": "./src/pipeline_tabs.tsx",
     "./text": "./src/text.tsx",
     "./text_disclosure": "./src/text_disclosure.tsx",
     "./text_ink": "./src/text_ink.ts",
@@ -308,6 +309,7 @@
     "./use_hover": "./src/use_hover.ts",
     "./use_image_rotation": "./src/use_image_rotation.ts",
     "./use_persisted_state": "./src/use_persisted_state.ts",
+    "./use_roving_tabs": "./src/use_roving_tabs.ts",
     "./use_paste_files": {
       "react-native": "./src/use_paste_files.ts",
       "default": "./src/use_paste_files.web.ts"

package/src/pipeline_tabs.tsx

@@ -0,0 +1,201 @@
+import { Children, Fragment, createContext, isValidElement, useContext, type ReactNode } from "react";
+import { ScrollView, View } from "react-native";
+import { Icon } from "./icon";
+import { colors, type ColorName } from "./colors";
+import { SPACE } from "./spacing";
+import { TabButton, TAB_LABEL_LINE, TAB_PADDING_V } from "./tabs";
+import { useRovingTabs, type RovingTabs } from "./use_roving_tabs";
+
+interface PipelineCtx {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Every tab's value in render order — the flow first, then the outcomes.
+   *  Index into it is a tab's place in the keyboard ring. */
+  order: string[];
+  /** Whether any tab carries a caption — then every tab reserves the line. */
+  captionSlot: boolean;
+  roving: RovingTabs;
+}
+
+const PipelineContext = createContext<PipelineCtx | null>(null);
+const OutcomesContext = createContext(false);
+
+function usePipeline(component: string): PipelineCtx {
+  const ctx = useContext(PipelineContext);
+  if (!ctx) throw new Error(`${component} must be rendered inside <PipelineTabs>`);
+  return ctx;
+}
+
+export interface PipelineTabsProps<T extends string> {
+  /** Accessible name of the tablist. */
+  accessibilityLabel: string;
+  value: T;
+  onValueChange: (value: T) => void;
+  /** `PipelineTab`s in PIPELINE ORDER — the flow left to right — then one
+   *  `PipelineOutcomes` holding the stages a record leaves at. The strip never
+   *  re-ranks: the sequence is the process. */
+  children: ReactNode;
+  testID?: string;
+}
+
+export interface PipelineTabProps<T extends string = string> {
+  value: T;
+  /** The stage's name, in the reader's language — a field's option label, or
+   *  a locale string. The strip renders no words of its own. */
+  label: string;
+  /** How many records sit at this stage — see `TabOption.count`. */
+  count?: number;
+  /** The second line — see `TabOption.caption`. Pre-formatted: the strip knows
+   *  no currency from a count. */
+  caption?: string;
+  /** A dot before the label, in the `Badge variant="dot"` vocabulary. Optional,
+   *  and two honest uses: the VERDICT on an outcome only (`emerald` won, `red`
+   *  lost — the flow stays bare, since being at a stage is not a status), or
+   *  every stage in the colour its own option carries, when the rows below
+   *  badge that same field and the strip should agree with them. Never a
+   *  decoration picked per stage. */
+  status?: ColorName;
+  testID?: string;
+}
+
+interface Collected {
+  values: string[];
+  captionSlot: boolean;
+}
+
+/** Every tab under `children`, in render order, through a Fragment or a
+ *  `PipelineOutcomes` — so a tab inserted anywhere joins the keyboard ring
+ *  where it sits. */
+function collect(children: ReactNode, into: Collected = { values: [], captionSlot: false }): Collected {
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === PipelineTab && isValidElement<PipelineTabProps>(child)) {
+      into.values.push(child.props.value);
+      if (child.props.caption != null) into.captionSlot = true;
+    } else if (
+      (child.type === PipelineOutcomes || child.type === Fragment) &&
+      isValidElement<{ children?: ReactNode }>(child)
+    ) {
+      collect(child.props.children, into);
+    }
+  });
+  return into;
+}
+
+/**
+ * `Tabs` plus ORDER — the tab strip over a lifecycle desk, whose tabs are the
+ * stages a population of records is spread across, each changing what the
+ * register under it IS (its columns, its act, its figure). A compound: the root
+ * owns the selection and the keyboard ring, a `PipelineTab` is one tab, and
+ * `PipelineOutcomes` groups the stages a record LEAVES at, past a rule, because
+ * a record does not walk into them the way it walks from one open stage to the
+ * next.
+ *
+ * Every tab is `Tabs`' own `TabButton` — the same dot, count, caption line,
+ * hover wash and underline — so the two strips cannot drift; what this adds is
+ * the chevron between stages of the flow, sat on the label line, and the rule
+ * before the outcomes. A flat wrapping `Tabs` says nothing about order, and
+ * order is what a pipeline is. Owns its horizontal scroll rather than wrapping
+ * the flow onto a second row.
+ *
+ * Not one record's ladder — that is `Checklist connected` or `Stepper`. Not a
+ * report — a funnel's rates are `Funnel`'s, a share bar is `Breakdown`'s.
+ */
+export function PipelineTabs<T extends string>(props: PipelineTabsProps<T>) {
+  const { accessibilityLabel, value, onValueChange, children, testID } = props;
+  const { values: order, captionSlot } = collect(children);
+  const roving = useRovingTabs({
+    count: order.length,
+    selectedIndex: order.indexOf(value),
+    onSelect: (index) => {
+      const next = order[index];
+      // The ring is built from the tabs' own `value` props, which are T.
+      if (next != null) onValueChange(next as T);
+    },
+  });
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} testID={testID}>
+      <PipelineContext.Provider
+        value={{ value, onValueChange: (v) => onValueChange(v as T), order, captionSlot, roving }}
+      >
+        <View
+          style={{ flexDirection: "row", alignItems: "flex-start", columnGap: 4 }}
+          accessibilityRole="tablist"
+          accessibilityLabel={accessibilityLabel}
+        >
+          {children}
+        </View>
+      </PipelineContext.Provider>
+    </ScrollView>
+  );
+}
+
+/** A box the height of the label line, sat where the label line is, so a
+ *  joiner drawn beside a tab centres on the words and not on a cell whose
+ *  centre moves when a caption line is reserved. */
+function OnLabelLine({ width, children }: { width: number; children: ReactNode }) {
+  return (
+    <View
+      style={{
+        width,
+        height: TAB_PADDING_V + TAB_LABEL_LINE,
+        paddingTop: TAB_PADDING_V,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {children}
+    </View>
+  );
+}
+
+/**
+ * The stages a record leaves the pipeline at — won, lost, and anything else
+ * terminal. Drawn past a rule, with no chevrons between them: they are
+ * alternatives, not a sequence. Render it last.
+ */
+export function PipelineOutcomes({ children }: { children: ReactNode }) {
+  usePipeline("PipelineOutcomes");
+  return (
+    <OutcomesContext.Provider value={true}>
+      <OnLabelLine width={SPACE.sm * 2 + 1}>
+        <View style={{ width: 1, height: 20, backgroundColor: colors.zinc["200"] }} />
+      </OnLabelLine>
+      {children}
+    </OutcomesContext.Provider>
+  );
+}
+
+export function PipelineTab<T extends string>(props: PipelineTabProps<T>) {
+  const { value, label, count, caption, status, testID } = props;
+  const { value: selectedValue, onValueChange, order, captionSlot, roving } = usePipeline("PipelineTab");
+  const inOutcomes = useContext(OutcomesContext);
+  const index = order.indexOf(value);
+
+  return (
+    <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
+      {/* The chevron is what says "then": it sits between two stages of the
+          FLOW and nowhere else. The first stage has nothing before it, and an
+          outcome is not reached by walking. */}
+      {index > 0 && !inOutcomes ? (
+        <OnLabelLine width={20}>
+          <Icon name="chevron-right" size={14} color={colors.zinc["400"]} />
+        </OnLabelLine>
+      ) : null}
+      <TabButton
+        ref={roving.bindRef(index)}
+        label={label}
+        count={count}
+        status={status}
+        caption={caption}
+        captionSlot={captionSlot}
+        selected={value === selectedValue}
+        isTabStop={index === roving.tabStopIndex}
+        onPress={() => onValueChange(value)}
+        onKeyDown={(event) => roving.onKeyDown(event, index)}
+        testID={testID}
+      />
+    </View>
+  );
+}

package/src/pressable_row.tsx

@@ -32,7 +32,12 @@ export interface PressableRowProps {
    * `Pressable` with role="button" + "Open …" label. Wrap the row body with it
    * only when the body is non-interactive by construction; a body that can
    * carry its own controls gets an EMPTY absolutely-positioned door as their
-   * sibling instead (a button must not contain a button — see `TableRow`). */
+   * sibling instead (a button must not contain a button — see `TableRow`).
+   *
+   * The cell that takes the slack says so: `flex: 1, minWidth: 0`. This is a
+   * flex row, and a react-native `View` in one sizes to its max-content and
+   * never shrinks (`flexShrink: 0`, unlike the web), so a body left unstated
+   * lays out at the width of its longest line and overflows the container. */
   children: ReactNode;
   /** Layout only (gap, minHeight overrides). The surface owns its press
    * states — never pass backgroundColor for hover/selected. */

package/src/tabs.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useRef } from "react";
 import { View } from "react-native";
+import { useRovingTabs } from "./use_roving_tabs";
 import { PressableHighlight } from "./pressable_highlight";
 import { Text } from "./text";
 import { colors, solid, type ColorName } from "./colors";
@@ -25,6 +25,11 @@ export interface TabOption<T extends string> {
    *  band counts what matched, not what rendered. Omit when every band is
    *  always whole. */
   count?: number;
+  /** A second line under the label — one figure the band is read by (the money
+   *  in it, what is overdue), already formatted. Once ANY tab in a strip carries
+   *  one, every tab reserves the line, so the strip keeps one height and the
+   *  labels one baseline. */
+  caption?: string;
 }
 
 interface TabsProps<T extends string> {
@@ -37,43 +42,13 @@ interface TabsProps<T extends string> {
 
 export function Tabs<T extends string>(props: TabsProps<T>) {
   const { accessibilityLabel, options, selectedTab, onSelectTab } = props;
-  const tabRefs = useRef<Array<View | null>>([]);
-
-  // Roving tabindex + arrow-key navigation per the WAI-ARIA Tabs pattern.
-  // Home/End jump to the ends; Left/Right cycle.
-  const handleKeyDown = useCallback(
-    (event: { key: string; preventDefault?: () => void }, index: number) => {
-      const last = options.length - 1;
-      let next = index;
-      switch (event.key) {
-        case "ArrowRight":
-        case "ArrowDown":
-          next = index === last ? 0 : index + 1;
-          break;
-        case "ArrowLeft":
-        case "ArrowUp":
-          next = index === 0 ? last : index - 1;
-          break;
-        case "Home":
-          next = 0;
-          break;
-        case "End":
-          next = last;
-          break;
-        default:
-          return;
-      }
-      event.preventDefault?.();
-      onSelectTab?.(options[next].value);
-      tabRefs.current[next]?.focus();
-    },
-    [onSelectTab, options],
-  );
-
-  // When no tab matches the current selection, the first tab becomes the
-  // tab-stop so keyboard users can still enter the group.
   const selectedIndex = options.findIndex((option) => option.value === selectedTab);
-  const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
+  const roving = useRovingTabs({
+    count: options.length,
+    selectedIndex,
+    onSelect: (index) => onSelectTab?.(options[index].value),
+  });
+  const captionSlot = options.some((option) => option.caption != null);
 
   return (
     <View
@@ -83,62 +58,63 @@ export function Tabs<T extends string>(props: TabsProps<T>) {
     >
       {options.map((option, index) => (
         <TabButton
-          ref={(node: View | null) => {
-            tabRefs.current[index] = node;
-          }}
+          ref={roving.bindRef(index)}
           key={option.value}
-          option={option}
+          label={option.label}
+          count={option.count}
+          status={option.status}
+          caption={option.caption}
+          captionSlot={captionSlot}
+          testID={option.testID}
           selected={selectedTab === option.value}
-          isTabStop={index === tabStopIndex}
-          onSelectTab={onSelectTab}
-          onKeyDown={(event) => handleKeyDown(event, index)}
+          isTabStop={index === roving.tabStopIndex}
+          onPress={() => onSelectTab?.(option.value)}
+          onKeyDown={(event) => roving.onKeyDown(event, index)}
         />
       ))}
     </View>
   );
 }
 
-interface TabButtonProps<T extends string> {
+/** The pill's vertical inset. Exported so a strip that draws something BESIDE
+ *  a tab (a joiner, a rule) can sit it on the label line rather than the
+ *  cell's centre, which moves the moment a caption line is reserved. */
+export const TAB_PADDING_V = 8;
+/** The label line's height — the body rung's line box. */
+export const TAB_LABEL_LINE = 24;
+const DOT = 6;
+const DOT_GAP = 6;
+
+export interface TabButtonProps {
   ref: (node: View | null) => void;
-  option: TabOption<T>;
+  label: string;
+  count?: number;
+  status?: ColorName;
+  caption?: string;
+  /** Reserve the caption line even when this tab has none — the strip decides,
+   *  so every tab in it stands the same height. */
+  captionSlot?: boolean;
   selected: boolean;
   isTabStop: boolean;
-  onSelectTab?: (value: T) => void;
+  onPress: () => void;
   onKeyDown: (event: { key: string; preventDefault?: () => void }) => void;
+  testID?: string;
 }
 
-function TabButton<T extends string>(props: TabButtonProps<T>) {
-  const { ref, option, selected, isTabStop, onSelectTab, onKeyDown } = props;
-
-  const handlePress = useCallback(() => {
-    onSelectTab?.(option.value);
-  }, [option.value, option.label, option.testID, onSelectTab]);
-
-  const inner = (
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-      {option.status ? (
-        <View style={{ width: 6, height: 6, borderRadius: 999, backgroundColor: solid(option.status) }} />
-      ) : null}
-      <Text
-        weight={selected ? "medium" : "regular"}
-        color={selected ? "default" : "muted"}
-        userSelect="none"
-      >
-        {option.label}
-      </Text>
-      {option.count != null ? (
-        <Text color="muted" tabular userSelect="none">
-          {option.count}
-        </Text>
-      ) : null}
-
-    </View>
-  );
+/**
+ * ONE tab — the anatomy `Tabs` and `PipelineTabs` share, so the two strips
+ * cannot drift by a pixel: the dot, the label, the count, the optional caption
+ * line, the single hover wash on the inner pill, and the primary underline.
+ */
+export function TabButton(props: TabButtonProps) {
+  const { ref, label, count, status, caption, captionSlot = false, selected, isTabStop, onPress, onKeyDown, testID } =
+    props;
 
   return (
     <PressableHighlight
       focusRing
-      ref={ref}      style={{
+      ref={ref}
+      style={{
         // WHERE YOU ARE, painted in the INK THAT ACTS — `colors.primary`, which
         // defaults to near-black. A tab rail is the only thing on a screen that
         // answers "which section am I in", and a neutral grey underline would be
@@ -153,21 +129,17 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
         // at page scale, so it reads as one product rather than two brands.
         borderBottomWidth: 3,
         borderBottomColor: selected ? colors.primary : "transparent",
+        // Transparent HERE so the one hover wash is the inner pill's.
         backgroundColor: "transparent",
         paddingBottom: 4,
       }}
-      onPress={handlePress}
+      onPress={onPress}
       onKeyDown={onKeyDown}
-      testID={option.testID}
+      testID={testID}
       accessibilityRole="tab"
-      accessibilityLabel={option.label}
+      accessibilityLabel={label}
       aria-selected={selected}
-      // Roving tabindex: the selected tab is the tab-stop, others are reachable
-      // via arrow keys. When no tab matches the current selection (props.value
-      // is stale), the first tab is the fallback so the group stays keyboard-
-      // reachable. Drive it with tabIndex, NOT focusable: RN-Web's Pressable
-      // ignores `focusable` (it writes its own tabIndex), so a focusable-based
-      // roving model silently leaves every tab a tab-stop.
+      // Roving tabindex — see `useRovingTabs` for why it is `tabIndex`.
       tabIndex={isTabStop ? 0 : -1}
     >
       {(state) => {
@@ -176,7 +148,7 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
         return (
           <View
             style={{
-              paddingVertical: 8,
+              paddingVertical: TAB_PADDING_V,
               paddingHorizontal: 16,
               borderRadius: CONTROL_RADIUS,
               backgroundColor: pressed
@@ -186,7 +158,40 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
                   : "transparent",
             }}
           >
-            {inner}
+            <View style={{ flexDirection: "row", alignItems: "center", gap: DOT_GAP, height: TAB_LABEL_LINE }}>
+              {status ? (
+                <View style={{ width: DOT, height: DOT, borderRadius: 999, backgroundColor: solid(status) }} />
+              ) : null}
+              <Text
+                weight={selected ? "medium" : "regular"}
+                color={selected ? "default" : "muted"}
+                userSelect="none"
+                numberOfLines={1}
+              >
+                {label}
+              </Text>
+              {count != null ? (
+                <Text color="muted" tabular userSelect="none">
+                  {count}
+                </Text>
+              ) : null}
+            </View>
+            {captionSlot || caption != null ? (
+              // Indented past the dot so it starts under the LABEL's first letter
+              // — a caption flush with the dot reads as belonging to the dot.
+              <Text
+                size="xs"
+                color="muted"
+                tabular
+                userSelect="none"
+                numberOfLines={1}
+                style={{ marginLeft: status ? DOT + DOT_GAP : 0 }}
+              >
+                {/* A no-break space, not a space: whitespace-only text collapses
+                    to no height on web, and the reserved line with it. */}
+                {caption ?? " "}
+              </Text>
+            ) : null}
           </View>
         );
       }}

package/src/use_roving_tabs.ts

@@ -0,0 +1,75 @@
+import { useCallback, useRef } from "react";
+import type { View } from "react-native";
+
+export interface RovingTabsOptions {
+  /** How many tabs the strip holds. */
+  count: number;
+  /** Index of the selected tab, or -1 when the selection matches none. */
+  selectedIndex: number;
+  /** Arrow keys SELECT as they move — automatic activation, the pattern a tab
+   *  strip whose panels are cheap to show follows. */
+  onSelect: (index: number) => void;
+}
+
+export interface RovingTabs {
+  /** The ONE tab that is a tab stop. When nothing is selected the first tab
+   *  takes it, so a strip whose `selected` went stale stays keyboard-reachable. */
+  tabStopIndex: number;
+  /** `onKeyDown` for the tab at `index`: Left/Right and Up/Down cycle (wrapping),
+   *  Home/End jump to the ends; each selects AND moves focus. */
+  onKeyDown: (event: { key: string; preventDefault?: () => void }, index: number) => void;
+  /** `ref` for the tab at `index`, so the hook can move focus to it. */
+  bindRef: (index: number) => (node: View | null) => void;
+}
+
+/**
+ * The WAI-ARIA tabs keyboard contract — roving tabindex plus arrow-key
+ * navigation — shared by every strip that is a `tablist` (`Tabs`, `Pipeline`),
+ * so the two cannot drift on which keys do what.
+ *
+ * The tab stop is driven with `tabIndex`, NOT `focusable`: RN-Web's Pressable
+ * ignores `focusable` (it writes its own tabIndex), so a focusable-based roving
+ * model silently leaves every tab a tab stop.
+ */
+export function useRovingTabs(options: RovingTabsOptions): RovingTabs {
+  const { count, selectedIndex, onSelect } = options;
+  const refs = useRef<Array<View | null>>([]);
+
+  const onKeyDown = useCallback(
+    (event: { key: string; preventDefault?: () => void }, index: number) => {
+      const last = count - 1;
+      let next = index;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = index === last ? 0 : index + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = index === 0 ? last : index - 1;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = last;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault?.();
+      onSelect(next);
+      refs.current[next]?.focus();
+    },
+    [count, onSelect],
+  );
+
+  const bindRef = useCallback(
+    (index: number) => (node: View | null) => {
+      refs.current[index] = node;
+    },
+    [],
+  );
+
+  return { tabStopIndex: selectedIndex === -1 ? 0 : selectedIndex, onKeyDown, bindRef };
+}