@lotics/ui 16.1.0 → 17.0.0

package/examples/tpl_record.tsx

@@ -32,7 +32,7 @@ import { CheckCircle } from "@lotics/ui/check_circle";
 import { ProgressBar } from "@lotics/ui/progress_bar";
 import { FilterChip } from "@lotics/ui/filter_chip";
 import { CaptureRow } from "@lotics/ui/capture_row";
-import { Checklist, ChecklistRow } from "@lotics/ui/checklist";
+import { TaskActions, TaskDetail, TaskFields, TaskItem, TaskList, TaskStatus, TaskTitle } from "@lotics/ui/task";
 import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { SuggestionChip } from "@lotics/ui/suggestion_chip";
 import { OptionList } from "@lotics/ui/option_list";
@@ -165,6 +165,10 @@ interface StageTask {
   /** ISO date (`""` = no due). The row shows it in a `variant="cell"` date field —
    *  no calendar glyph, coloured by urgency (`tone`), press to edit. */
   due: string;
+  /** The task's CHILD STEPS (`[]` = none). They render as a NESTED `TaskList`,
+   *  so a step is a task: give one a due date, a menu or children of its own and
+   *  it simply works. Collapsing is the app's call — render the list or don't. */
+  subtasks: { key: string; label: string; done: boolean }[];
 }
 
 // A due date N days from today — keeps the seeded urgency states (overdue / soon /
@@ -203,13 +207,23 @@ const newTaskId = () => `t_${(taskSeq += 1)}`;
 
 // The in-flight demo record's existing checklist (a NEW record gets []).
 const TASK_SEEDS: StageTask[] = [
-  { id: "t1", label: "Confirm pricing with the customer", stage: "sales", done: true, assignee: "mem_01", due: dueIn(-10) },
-  { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01", due: "" },
-  { id: "t3", label: "Verify the customer's tax ID", stage: "sales", done: false, assignee: null, due: dueIn(-2) },
-  { id: "t4", label: "Book the carrier", stage: "operations", done: false, assignee: "mem_02", due: dueIn(1) },
-  { id: "t5", label: "Attach the delivery documents", stage: "operations", done: false, assignee: null, due: dueIn(6) },
-  { id: "t6", label: "Issue every invoice", stage: "accounting", done: false, assignee: "mem_03", due: "" },
-  { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null, due: dueIn(14) },
+  { id: "t1", label: "Confirm pricing with the customer", stage: "sales", done: true, assignee: "mem_01", due: dueIn(-10), subtasks: [] },
+  { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01", due: "", subtasks: [] },
+  // two seeded NOTES — the "why it's stuck" a task carries and nothing else
+  // holds; every other row shows the add affordance instead
+  { id: "t3", label: "Verify the customer's tax ID", stage: "sales", done: false, assignee: null, due: dueIn(-2), subtasks: [] },
+  // the one task with SUBTASKS — a booking is a sequence, and its steps carry
+  // nothing but a tick, so they stay child rows instead of four more tasks
+  // (the row opens with work left; press the chevron to close it)
+  { id: "t4", label: "Book the carrier", stage: "operations", done: false, assignee: "mem_02", due: dueIn(1), subtasks: [
+    { key: "s1", label: "Confirm the pickup window", done: true },
+    { key: "s2", label: "Send the packing list", done: false },
+    { key: "s3", label: "Get the booking reference", done: false },
+    { key: "s4", label: "Share the reference with the customer", done: false },
+  ] },
+  { id: "t5", label: "Attach the delivery documents", stage: "operations", done: false, assignee: null, due: dueIn(6), subtasks: [] },
+  { id: "t6", label: "Issue every invoice", stage: "accounting", done: false, assignee: "mem_03", due: "", subtasks: [] },
+  { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null, due: dueIn(14), subtasks: [] },
 ];
 
 // The assignable roster — an app feeds `useMembers()` here.
@@ -1138,11 +1152,11 @@ export function TplRecord() {
   const addTask = () => {
     const label = newTask.trim();
     if (!label) return;
-    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: captureDesk, done: false, assignee: null, due: "" }]);
+    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: captureDesk, done: false, assignee: null, due: "", subtasks: [] }]);
     setNewTask("");
   };
   const addSuggested = (desk: Desk, label: string) =>
-    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: desk, done: false, assignee: null, due: "" }]);
+    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: desk, done: false, assignee: null, due: "", subtasks: [] }]);
   const removeTask = (tid: string) => setTasks((prev) => prev.filter((t) => t.id !== tid));
   const moveTask = (tid: string, desk: Desk) =>
     setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, stage: desk } : t)));
@@ -1153,6 +1167,12 @@ export function TplRecord() {
     setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, assignee: member } : t)));
   const dueTask = (tid: string, due: string) =>
     setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, due } : t)));
+  // A child step patches by key — the kit owns the expander and the count, the
+  // app owns nothing but the tick.
+  const toggleSubtask = (tid: string, key: string, done: boolean) =>
+    setTasks((prev) =>
+      prev.map((t) => (t.id === tid ? { ...t, subtasks: t.subtasks.map((s) => (s.key === key ? { ...s, done } : s)) } : t)),
+    );
   // The Task-list grammar: a clearable Group-by + filter chips derive the
   // sections; empty groups drop (except desks — the journey stays visible).
   const [taskGroup, setTaskGroup] = useState<"desk" | "assignee" | "status" | null>("desk");
@@ -1835,7 +1855,7 @@ export function TplRecord() {
                     desk's rows fully editable (the stage gates the handoff
                     and Billing, never task editing — planning ahead on a
                     later desk is normal work) */}
-                <Checklist trailingWidth={152}>
+                <TaskList>
                   {g.items.map((t) => {
                     const next = nextDeskOf(t.stage);
                     const menuItems: ActionMenuItem[] = [
@@ -1845,37 +1865,48 @@ export function TplRecord() {
                       { key: "xoa", label: "Delete task", icon: "trash", danger: true, onPress: () => removeTask(t.id) },
                     ];
                     return (
-                      <ChecklistRow
-                        key={t.id}
-                        control={
+                      <TaskItem key={t.id}>
+                        <TaskStatus>
+                          {/* Half-filled once any subtask is in: progress the row already
+                              holds, that a binary ring would have hidden. Display only —
+                              the parent's own `done` still wins, and still only it. */}
                           <CheckCircle
-                            checked={t.done}
+                            state={t.done ? "done" : t.subtasks.some((s) => s.done) ? "partial" : "none"}
                             onChange={(on) => toggleTask(t.id, on)}
                             accessibilityLabel={t.label}
                           />
-                        }
-                        trailing={
-                          // Due + assignee as COMPACT grid cells (`variant="cell"`): the due a
-                          // urgency-coloured date (no calendar glyph), the assignee a bare AVATAR
-                          // (`avatarOnly` — no name/chevron, a dashed add-ghost when unset). Both
-                          // hug within the list's `trailingWidth` so the title never overlaps.
-                          <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 }}>
-                            <View style={{ width: 104 }}>
-                              <InlineDatePicker variant="cell" tone={dueTone(t.due, t.done)} value={t.due || null} onSave={(v) => dueTask(t.id, v)} onClear={() => dueTask(t.id, "")} placeholder="Due…" locale="en-US" accessibilityLabel={`Due · ${t.label}`} />
-                            </View>
-                            <InlineMemberSelect variant="cell" avatarOnly members={TEAM} value={t.assignee} onSave={(m) => assignTask(t.id, m)} accessibilityLabel={`Assignee · ${t.label}`} />
+                        </TaskStatus>
+                        <TaskTitle>
+                          <InlineTextInput variant="cell" value={t.label} onSave={(v) => renameTask(t.id, v)} struck={t.done} accessibilityLabel="Task title" />
+                        </TaskTitle>
+                        {/* Due + assignee as COMPACT grid cells (`variant="cell"`): the due an
+                            urgency-coloured date (no calendar glyph), the assignee a bare AVATAR
+                            (`avatarOnly`). They sit inline on a wide record and take their own
+                            line in a drawer — the SAME JSX, no surface guess. */}
+                        <TaskFields>
+                          <View style={{ width: 104 }}>
+                            <InlineDatePicker variant="cell" tone={dueTone(t.due, t.done)} value={t.due || null} onSave={(v) => dueTask(t.id, v)} onClear={() => dueTask(t.id, "")} placeholder="Due…" locale="en-US" accessibilityLabel={`Due · ${t.label}`} />
                           </View>
-                        }
-                        menu={{ items: menuItems, accessibilityLabel: `Task options: ${t.label}` }}
-                      >
-                        <InlineTextInput
-                          variant="cell"
-                          value={t.label}
-                          onSave={(v) => renameTask(t.id, v)}
-                          struck={t.done}
-                          accessibilityLabel="Task title"
-                        />
-                      </ChecklistRow>
+                          <InlineMemberSelect variant="cell" avatarOnly members={TEAM} value={t.assignee} onSave={(m) => assignTask(t.id, m)} accessibilityLabel={`Assignee · ${t.label}`} />
+                        </TaskFields>
+                        <TaskActions>
+                          <ActionMenu items={menuItems} accessibilityLabel={`Task options: ${t.label}`} />
+                        </TaskActions>
+                        {t.subtasks.length > 0 ? (
+                          <TaskList>
+                            {t.subtasks.map((sub) => (
+                              <TaskItem key={sub.key}>
+                                <TaskStatus>
+                                  <CheckCircle state={sub.done ? "done" : "none"} onChange={(on) => toggleSubtask(t.id, sub.key, on)} accessibilityLabel={sub.label} />
+                                </TaskStatus>
+                                <TaskTitle>
+                                  <Text size="sm" color={sub.done ? "muted" : "default"} decoration={sub.done ? "lineThrough" : undefined}>{sub.label}</Text>
+                                </TaskTitle>
+                              </TaskItem>
+                            ))}
+                          </TaskList>
+                        ) : null}
+                      </TaskItem>
                     );
                   })}
                   {/* SUGGESTIONS are pills, not rows — tap to materialize,
@@ -1892,7 +1923,7 @@ export function TplRecord() {
                       ))}
                     </View>
                   ) : null}
-                </Checklist>
+                </TaskList>
               </Subsection>
               );
             })}
@@ -2213,7 +2244,7 @@ export function TplRecord() {
                       the geometry (row height, control/title alignment, the
                       meta/expansion indent); hand-rolling this anatomy is how
                       alignment drifts. controlWidth 24 = CheckboxInput. */}
-                  <Checklist controlWidth={24}>
+                  <TaskList controlWidth={24}>
                     {shown.map((f) => {
                       // READINESS per row, CO-LOCATED: a not-ready row's mark NAMES what's
                       // missing (muted at rest — discoverable without checking; warning once
@@ -2225,16 +2256,23 @@ export function TplRecord() {
                       const missing = missingOf(f);
                       const checked = chosenForms.has(f.id);
                       return (
-                        <ChecklistRow
-                          key={f.id}
-                          control={<CheckboxInput accessibilityLabel={f.label} checked={checked} onChange={(on) => toggleForm(f.id, on)} />}
-                          meta={missing.length > 0 ? (
+                        <TaskItem key={f.id}>
+                          <TaskStatus>
+                            <CheckboxInput accessibilityLabel={f.label} checked={checked} onChange={(on) => toggleForm(f.id, on)} />
+                          </TaskStatus>
+                          <TaskTitle>
+                            <Text size="sm" style={{ flexShrink: 1 }}>{f.label}</Text>
+                          </TaskTitle>
+                          {missing.length > 0 ? (
+                            <TaskFields>
                             <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 5 }}>
                               <Icon name="circle-alert" size={13} color={checked ? colors.amber[500] : colors.zinc[400]} />
                               <Text size="xs" color={checked ? "warning" : "muted"} style={{ flexShrink: 1 }}>{`Needs: ${missing.map((k) => NEEDS[k].label).join(", ")}`}</Text>
                             </View>
-                          ) : undefined}
-                          expansion={checked && missing.length > 0 ? (
+                            </TaskFields>
+                          ) : null}
+                          {checked && missing.length > 0 ? (
+                            <TaskDetail>
                             <Inset>
                               <Text size="xs" color="muted">These values save onto the order and unlock the form.</Text>
                               {missing.map((k) => (
@@ -2256,13 +2294,12 @@ export function TplRecord() {
                                 />
                               </View>
                             </Inset>
-                          ) : undefined}
-                        >
-                          <Text size="sm" style={{ flexShrink: 1 }}>{f.label}</Text>
-                        </ChecklistRow>
+                            </TaskDetail>
+                          ) : null}
+                        </TaskItem>
                       );
                     })}
-                  </Checklist>
+                  </TaskList>
                   {hidden > 0 ? (
                     <View style={{ flexDirection: "row" }}>
                       <Button

package/examples/tpl_task_board.tsx

@@ -366,7 +366,13 @@ export function TplTaskBoard() {
           columns={columns}
           groups={groups}
           getRowKey={(t) => t.id}
-          leading={{ width: 20, render: (t) => <CheckCircle checked={t.status === "done"} onChange={(on) => patch(t.id, { status: on ? "done" : "todo" })} accessibilityLabel={t.title} /> }}
+          leading={{
+            width: 20,
+            // The ring carries all three positions this board already models: a task at "doing"
+            // is not finished and is not untouched, and a binary ring would call it untouched.
+            // Clicking still only finishes or reopens — "doing" is set from the status column.
+            render: (t) => <CheckCircle state={t.status === "done" ? "done" : t.status === "doing" ? "partial" : "none"} onChange={(on) => patch(t.id, { status: on ? "done" : "todo" })} accessibilityLabel={t.title} />,
+          }}
           sort={sort}
           onSort={onSort}
           collapsed={collapsed}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "16.1.0",
+  "version": "17.0.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -182,7 +182,7 @@
     "./detail_row": "./src/detail_row.tsx",
     "./record_summary": "./src/record_summary.tsx",
     "./capture_row": "./src/capture_row.tsx",
-    "./checklist": "./src/checklist.tsx",
+    "./task": "./src/task.tsx",
     "./suggestion_chip": "./src/suggestion_chip.tsx",
     "./danger_zone": "./src/danger_zone.tsx",
     "./scan_field": "./src/scan_field.tsx",

package/src/capture_row.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet, View } from "react-native";
 import { Button } from "./button";
 import { colors } from "./colors";
+import { Icon } from "./icon";
 import { useLoticsLocale } from "./locale";
 import { TextInputField } from "./text_input_field";
 
@@ -30,7 +31,11 @@ export function CaptureRow(props: CaptureRowProps) {
   const labels = useLoticsLocale().inline;
   return (
     <View style={styles.row}>
-      <View style={styles.emptyRing} />
+      {/* The ghost ring holds the task column, and the plus says what pressing here does —
+          a dashed circle alone reads as an unchecked task, not as an invitation. */}
+      <View style={styles.emptyRing}>
+        <Icon name="plus" size={12} color={colors.zinc[400]} />
+      </View>
       <View style={styles.field}>
         <View style={styles.grow}>
           <TextInputField
@@ -50,7 +55,7 @@ export function CaptureRow(props: CaptureRowProps) {
 
 const styles = StyleSheet.create({
   row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 32 },
-  emptyRing: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: colors.zinc[300], borderStyle: "dashed" },
+  emptyRing: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: colors.zinc[300], borderStyle: "dashed", alignItems: "center", justifyContent: "center" },
   field: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8 },
   grow: { flex: 1 },
   // Borderless, matching an inline title's resting inset so the invitation

package/src/check_circle.tsx

@@ -4,11 +4,26 @@ import { colors } from "./colors";
 import { FocusRingPressable } from "./focus_ring_pressable";
 import { Icon } from "./icon";
 
+/**
+ * Three positions, not two. `partial` is the state a BINARY ring has to lie about — a step
+ * whose vocabulary reads "No portal account → Account created → Filed online" is not finished
+ * at "Account created", but it is emphatically not untouched either, and an empty ring says
+ * untouched. A column of rings is the fastest scan on a task surface, so the one row shape it
+ * reports wrongly is the one the reader most needs to find.
+ */
+export type CheckCircleState = "none" | "partial" | "done";
+
 export interface CheckCircleProps {
-  checked: boolean;
-  /** Toggle handler. Omit for a read-only ring (shows state, not pressable). */
-  onChange?: (checked: boolean) => void;
-  /** Fill colour when checked. Default zinc-900 (pass a list/project colour to tint it). */
+  state: CheckCircleState;
+  /**
+   * Completion handler — `true` to finish, `false` to reopen. Binary ON PURPOSE even though
+   * the ring shows three: the ring's meaning has to stay constant ("is this finished") or a
+   * click becomes unpredictable. `partial` is reached through whatever NAMES it — a status
+   * cell in the step's own words, or children ticking off — never by cycling this control.
+   * Omit for a read-only ring (shows state, not pressable).
+   */
+  onChange?: (done: boolean) => void;
+  /** Fill colour when done (and the half-fill when partial). Default zinc-900. */
   color?: string;
   /** Diameter. Default 20. */
   size?: number;
@@ -17,22 +32,43 @@ export interface CheckCircleProps {
 }
 
 /**
- * A circular completion toggle — an empty ring that fills with a spring + a white
- * check when checked (the iOS-Reminders / Linear "done" gesture), distinct from
- * the square form `Checkbox`. The signature control for a task / to-do / checklist
- * item; pair it with a title that strikes + mutes on the same `checked`. It stops
- * the press, so it works inside a pressable row. Read-only (no `onChange`) shows
- * the state without a tap.
+ * A circular completion control — an empty ring that fills with a spring + a white check when
+ * done (the iOS-Reminders / Linear gesture), distinct from the square form `Checkbox`. The
+ * signature control for a task / to-do / checklist item; pair it with a title that strikes +
+ * mutes on the same `done`. It stops the press, so it works inside a pressable row. Read-only
+ * (no `onChange`) shows the state without a tap.
+ *
+ * `partial` half-fills it. Deliberately MONOCHROME at every position: a task row that also
+ * carries a coloured status would otherwise double-code the same fact, and the ring's job is
+ * "how far", not "which state".
  */
 export function CheckCircle(props: CheckCircleProps) {
-  const { checked, onChange, color = colors.zinc[900], size = 20, disabled, accessibilityLabel } = props;
-  const v = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const { state, onChange, color = colors.zinc[900], size = 20, disabled, accessibilityLabel } = props;
+  const done = state === "done";
+  const v = useRef(new Animated.Value(done ? 1 : 0)).current;
   useEffect(() => {
-    Animated.spring(v, { toValue: checked ? 1 : 0, useNativeDriver: false, friction: 6, tension: 160 }).start();
-  }, [checked, v]);
+    Animated.spring(v, { toValue: done ? 1 : 0, useNativeDriver: false, friction: 6, tension: 160 }).start();
+  }, [done, v]);
 
+  // Sits INSIDE the 1.5px border so the outline stays whole around it — a filled half in a
+  // complete ring reads as progress, where a half-covered ring would read as a rendering bug.
+  const half = (size - 3) / 2;
   const face = (borderColor: string) => (
     <View style={[styles.ring, { width: size, height: size, borderRadius: size / 2, borderColor }]}>
+      {state === "partial" ? (
+        <View
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: half,
+            height: size - 3,
+            borderTopLeftRadius: half,
+            borderBottomLeftRadius: half,
+            backgroundColor: color,
+          }}
+        />
+      ) : null}
       <Animated.View style={{ position: "absolute", width: size, height: size, borderRadius: size / 2, backgroundColor: color, transform: [{ scale: v }], opacity: v }} />
       <Animated.View style={{ opacity: v, transform: [{ scale: v }] }}>
         <Icon name="check" size={Math.round(size * 0.62)} color={colors.white} />
@@ -40,22 +76,30 @@ export function CheckCircle(props: CheckCircleProps) {
     </View>
   );
 
+  // Anything past "none" is engaged, so the outline darkens — the half-fill alone was too
+  // quiet to catch in a column.
+  const resting = state === "none" ? colors.zinc[300] : color;
+
   if (!onChange) {
     return (
       <View accessibilityRole="image" accessibilityLabel={accessibilityLabel} style={[styles.tap, { width: size, height: size }, disabled ? styles.disabled : null]}>
-        {face(checked ? color : colors.zinc[300])}
+        {face(resting)}
       </View>
     );
   }
 
   const press = (e: GestureResponderEvent) => {
     e?.stopPropagation?.();
-    if (!disabled) onChange(!checked);
+    if (!disabled) onChange(!done);
   };
   return (
     <FocusRingPressable
       accessibilityRole="checkbox"
-      accessibilityState={{ checked, disabled }}
+      // The W3C prop, NOT `accessibilityState` — this react-native-web build drops the latter
+      // silently, so every ring shipped a `role="checkbox"` that never announced whether it was
+      // checked. "mixed" is aria's own tri-state, which is exactly what `partial` is.
+      aria-checked={done ? true : state === "partial" ? "mixed" : false}
+      aria-disabled={disabled}
       accessibilityLabel={accessibilityLabel}
       disabled={disabled}
       onPress={press}
@@ -64,7 +108,7 @@ export function CheckCircle(props: CheckCircleProps) {
       // the keyboard ring hugs the toggle instead of boxing it.
       style={[styles.tap, { width: size, height: size, borderRadius: size / 2 }, disabled ? styles.disabled : null]}
     >
-      {({ hovered }: { hovered?: boolean }) => face(checked ? color : hovered ? colors.zinc[500] : colors.zinc[300])}
+      {({ hovered }: { hovered?: boolean }) => face(state === "none" && hovered ? colors.zinc[500] : resting)}
     </FocusRingPressable>
   );
 }

package/src/date_picker.tsx

@@ -48,6 +48,10 @@ export interface DatePickerLabels extends SegmentLabels {
   startTime: string;
   /** Accessible name for the end-time field (datetime range). */
   endTime: string;
+  /** Accessible name for the start-date segment group (range formats). */
+  startDate: string;
+  /** Accessible name for the end-date segment group (range formats). */
+  endDate: string;
   /** Footer action: commit and close the popover. */
   done: string;
   /** Inline error when a typed date is left incomplete/invalid (never committed). */
@@ -79,6 +83,11 @@ export interface DatePickerProps {
   locale?: string;
   /** Shown in the field when nothing is selected yet. */
   placeholder?: string;
+  /** Accessible name for the field's segment group (both groups on a range,
+   *  suffixed with the start/end names). `FormDatePicker` defaults it to its own
+   *  visible label; a bare `DatePicker` must be given one — a visible label
+   *  beside the field is not programmatically associated. */
+  accessibilityLabel?: string;
 }
 
 // =============================================================================
@@ -328,6 +337,7 @@ export function DatePicker(props: DatePickerProps) {
     labels,
     locale,
     placeholder,
+    accessibilityLabel,
   } = props;
 
   const isRange = isRangeFormat(format);
@@ -385,10 +395,21 @@ export function DatePicker(props: DatePickerProps) {
     <Icon name="calendar" size={20} color={disabled ? colors.zinc["300"] : colors.zinc["400"]} />
   );
 
+  // Each segment group's accessible name. A range names both halves even without
+  // a field label — an unnamed pair of identical-looking groups is unnavigable.
+  const partLabels = isRange
+    ? ([mergedLabels.startDate, mergedLabels.endDate].map((part) =>
+        accessibilityLabel ? `${accessibilityLabel} — ${part}` : part,
+      ) as string[])
+    : accessibilityLabel
+      ? [accessibilityLabel]
+      : undefined;
+
   const trigger = (
     <DateField
       triggerRef={triggerRef}
       testID={testID}
+      partLabels={partLabels}
       parts={isRange ? halves : [value ?? ""]}
       onPartChange={isRange ? setHalf : (_, next) => onValueChange(next)}
       hasTime={hasTime}

package/src/detail_row.tsx

@@ -155,7 +155,11 @@ export function DetailRow(props: DetailRowProps) {
   const flatTuck = flat && annotated ? -Math.max(0, Math.round((minHeight - getInputLineHeight(false)) / 2)) : 0;
   const labelCell = (cellStyle: StyleProp<ViewStyle>) => (
     <View style={[styles.labelCell, { minHeight }, cellStyle]}>
-      <Text size={labelSize} color="muted" numberOfLines={1}>
+      {/* The label WRAPS inside its column — it is NEVER clipped. A field name
+          the reader can't finish is worse than a taller row, and a fixed
+          `labelWidth` guarantees the clip on every long name ("Registered
+          business address"), not just the odd one. */}
+      <Text size={labelSize} color="muted">
         {label}
       </Text>
     </View>
@@ -191,9 +195,9 @@ export function DetailRow(props: DetailRowProps) {
     // inline editor self-persists — only the look converges.
     return (
       <View style={styles.stackedRow}>
-        <Text weight="medium" numberOfLines={1}>
-          {label}
-        </Text>
+        {/* Wraps, like the horizontal label — a stacked row has the FULL width
+            to spend, so clipping here would be gratuitous. */}
+        <Text weight="medium">{label}</Text>
         {/* stacked wears the FORM grammar exactly: label · description ·
             control · warning · error (the `FormField` order) */}
         {description != null ? <Text color="muted">{description}</Text> : null}
@@ -259,6 +263,12 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   flexLabel: { flex: 1 },
+  // `center` is what makes a WRAPPED label align sanely, and it does both jobs
+  // with no measurement: a one-line label is shorter than the control band, so
+  // it centers on the control line (the alignment law); a wrapped label is as
+  // tall as the band or taller, so it fills it and its FIRST line tops out
+  // level with the value's first control line. Do not "fix" this to
+  // `flex-start` — that drops every single-line label to the band's top edge.
   labelCell: { justifyContent: "center" },
   // The first line of the value cell — the control centers in it exactly like
   // the label and trailing cells do.

package/src/form_date_picker.tsx

@@ -19,7 +19,9 @@ export function FormDatePicker(props: FormDatePickerProps) {
       optional={optional}
       optionalLabel={optionalLabel}
     >
-      <DatePicker {...datePickerProps} />
+      {/* The visible FormField label is not programmatically associated with the
+          segment inputs, so it doubles as the accessible name unless overridden. */}
+      <DatePicker accessibilityLabel={label} {...datePickerProps} />
     </FormField>
   );
 }

package/src/form_field.tsx

@@ -75,8 +75,11 @@ export function FormField(props: FormFieldProps & { children: React.ReactNode })
             justifyContent: "space-between",
           }}
         >
+          {/* The label WRAPS (same law as DetailRow) — a clamp plus a fixed row
+              width guaranteed the clip. The optional marker keeps its single
+              line and never shrinks; the label yields. */}
           {!!label && (
-            <Text nativeID={labelId} numberOfLines={1} weight="medium">
+            <Text nativeID={labelId} weight="medium" style={{ flexShrink: 1 }}>
               {label}
             </Text>
           )}

package/src/icon.tsx

@@ -176,6 +176,7 @@ import Square from "lucide-react-native/dist/esm/icons/square";
 import SquareCheck from "lucide-react-native/dist/esm/icons/square-check";
 import SquarePen from "lucide-react-native/dist/esm/icons/square-pen";
 import SquareSigma from "lucide-react-native/dist/esm/icons/square-sigma";
+import StickyNote from "lucide-react-native/dist/esm/icons/sticky-note";
 import Table from "lucide-react-native/dist/esm/icons/table";
 import Table2 from "lucide-react-native/dist/esm/icons/table-2";
 import Tag from "lucide-react-native/dist/esm/icons/tag";
@@ -372,6 +373,7 @@ const iconComponents = {
   "square-check": SquareCheck,
   "square-pen": SquarePen,
   "square-sigma": SquareSigma,
+  "sticky-note": StickyNote,
   table: Table,
   "table-2": Table2,
   tag: Tag,