@lotics/ui 16.2.0 → 17.0.1

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,15 +165,9 @@ 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 own note (`""` = none). The `ChecklistRow` `note` contract owns
-   *  the whole affordance — the muted second line, the tap-to-edit, the add
-   *  button on a note-less row, and removal by saving empty. */
-  note: string;
-  /** The task's CHILD STEPS (`[]` = none, and then nothing renders — not even
-   *  the expander). The `ChecklistRow` `subtasks` contract owns the whole
-   *  affordance: the chevron + remaining count on the parent, the open/closed
-   *  state, and the indented child rows. A step that needs its own note, due
-   *  date, or assignee is a TASK — give it a row, not a subtask. */
+  /** 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 }[];
 }
 
@@ -213,23 +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), note: "", subtasks: [] },
-  { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01", due: "", note: "", subtasks: [] },
+  { 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), note: "Their finance desk answers after 15:00 only.", subtasks: [] },
+  { 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), note: "", subtasks: [
+  { 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), note: "Waiting on the signed copy from the yard.", subtasks: [] },
-  { id: "t6", label: "Issue every invoice", stage: "accounting", done: false, assignee: "mem_03", due: "", note: "", subtasks: [] },
-  { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null, due: dueIn(14), note: "", subtasks: [] },
+  { 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.
@@ -1158,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: "", note: "", subtasks: [] }]);
+    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: "", note: "", subtasks: [] }]);
+    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)));
@@ -1173,9 +1167,6 @@ 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)));
-  // Saving an EMPTY note is the removal — one write path, no separate delete.
-  const noteTask = (tid: string, note: string) =>
-    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, note } : 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) =>
@@ -1864,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[] = [
@@ -1874,54 +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>
-                        }
-                        // the row's own NOTE — the muted second line under the
-                        // title (the "why it's stuck" a task carries); the kit
-                        // owns the whole affordance, so nothing here hand-rolls
-                        // a line + editor. Empty = the add button on the row.
-                        note={{ value: t.note, onSave: (v) => noteTask(t.id, v), addLabel: `Add note: ${t.label}` }}
-                        // the row's CHILD STEPS — one task made of several
-                        // ticks. The kit renders the chevron + remaining count
-                        // on the parent and the indented child rows when open;
-                        // an EMPTY list renders nothing, so every row can pass
-                        // the prop unconditionally. Expansion is left
-                        // UNCONTROLLED: a row with work left opens itself.
-                        subtasks={{
-                          items: t.subtasks.map((s) => ({ key: s.key, label: s.label, checked: s.done, onToggle: (on) => toggleSubtask(t.id, s.key, on) })),
-                          // the row name matters once the list is long — the
-                          // locale default ("Subtasks: 3 left") can't know it
-                          countLabel: (missing) => (missing > 0 ? `Subtasks · ${t.label}: ${missing} left` : `Subtasks · ${t.label}: all done`),
-                        }}
-                        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,
@@ -1938,7 +1923,7 @@ export function TplRecord() {
                       ))}
                     </View>
                   ) : null}
-                </Checklist>
+                </TaskList>
               </Subsection>
               );
             })}
@@ -2259,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
@@ -2271,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) => (
@@ -2302,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.2.0",
+  "version": "17.0.1",
   "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",
@@ -314,4 +314,4 @@
     "unified": "^11.0.5",
     "vite": "^7.2.4"
   }
-}
+}

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/checkbox.tsx

@@ -9,6 +9,12 @@ interface CheckboxProps {
 
 export function Checkbox(props: CheckboxProps) {
   const { checked, indeterminate } = props;
+  // `indeterminate` FILLS the box, exactly as `checked` does — the mixed state is a painted
+  // box with a dash on every platform that has one, and the dash is drawn in `white`. Keying
+  // the fill on `checked` alone meant a mixed-but-unchecked control drew a white dash on the
+  // white background: invisible. Every `selectAll` therefore reported "nothing selected" while
+  // rows were selected — under-reporting, which is the worse direction to be wrong in.
+  const filled = checked || indeterminate === true;
 
   return (
     <View
@@ -19,7 +25,7 @@ export function Checkbox(props: CheckboxProps) {
         alignItems: "center",
         borderWidth: 1,
         borderColor: colors.border,
-        backgroundColor: checked ? colors.zinc["800"] : colors.background,
+        backgroundColor: filled ? colors.zinc["800"] : colors.background,
         borderRadius: 6,
       }}
     >

package/src/locale.tsx

@@ -69,18 +69,6 @@ export interface LoticsLocale {
   trendFooter: { up: string; down: string };
   /** `SuggestionChip`: the press target's default name and the ✕ tooltip. */
   suggestionChip: { add: (label: string) => string; dismiss: string };
-  /** `ChecklistRow`'s per-row NOTE: the add affordance's name/tooltip, the note
-   *  line's press name (it WRAPS the note text so the line is announced with
-   *  it), and the editor's placeholder — plus the SUBTASK expander's name,
-   *  given the count of unchecked children. The expander's open/closed state
-   *  rides `aria-expanded`, so `subtasks` must NOT name it: one stable name,
-   *  or every toggle re-announces the control. */
-  checklist: {
-    addNote: string;
-    editNote: (note: string) => string;
-    notePlaceholder: string;
-    subtasks: (missing: number) => string;
-  };
   /** `Confidence`: the full level phrase ("High confidence" …). */
   confidence: ConfidenceLabels;
   /** `Finding`: the severity badge word ("Critical" …). */
@@ -188,12 +176,6 @@ export const en: LoticsLocale = {
   chip: { remove: "Remove" },
   trendFooter: { up: "Up", down: "Down" },
   suggestionChip: { add: (label) => `Add: ${label}`, dismiss: "Dismiss suggestion" },
-  checklist: {
-    addNote: "Add note",
-    editNote: (note) => `Edit note: ${note}`,
-    notePlaceholder: "Add a note…",
-    subtasks: (missing) => (missing > 0 ? `Subtasks: ${missing} left` : "Subtasks: all done"),
-  },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
   remainderMeter: {
     applied: (allocated, total) => `${allocated} of ${total} applied`,
@@ -292,12 +274,6 @@ export const vi: LoticsLocale = {
   chip: { remove: "Xóa" },
   trendFooter: { up: "Tăng", down: "Giảm" },
   suggestionChip: { add: (label) => `Thêm: ${label}`, dismiss: "Bỏ gợi ý" },
-  checklist: {
-    addNote: "Thêm ghi chú",
-    editNote: (note) => `Sửa ghi chú: ${note}`,
-    notePlaceholder: "Thêm ghi chú…",
-    subtasks: (missing) => (missing > 0 ? `Việc con: còn ${missing}` : "Việc con: đã xong"),
-  },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
   remainderMeter: {
     applied: (allocated, total) => `Đã phân bổ ${allocated}/${total}`,