@lotics/ui 23.1.1 → 24.0.0

package/examples/tpl_task_board.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View, type ViewStyle } from "react-native";
 import { Text } from "@lotics/ui/text";
-import { TextLink } from "@lotics/ui/text_link";
+import { TextButton } from "@lotics/ui/text_button";
 import { colors, solid, asColorName } from "@lotics/ui/colors";
 import { Icon } from "@lotics/ui/icon";
 import { CheckCircle } from "@lotics/ui/check_circle";
@@ -527,7 +527,7 @@ function RowActionCell({ task, result, onAttach, onApprove }: { task: Task; resu
   const onPress = a.kind === "attach" ? () => onAttach(task.id) : a.kind === "approve" ? () => onApprove(task.id) : () => {};
   return (
     <View style={styles.action}>
-      <TextLink size="sm" numberOfLines={1} onPress={onPress}>{a.label}</TextLink>
+      <TextButton numberOfLines={1} onPress={onPress}>{a.label}</TextButton>
     </View>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "23.1.1",
+  "version": "24.0.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -9,6 +9,7 @@
     },
     "./tokens": "./src/tokens.ts",
     "./colors": "./src/colors.ts",
+    "./deadline": "./src/deadline.ts",
     "./option_badge": "./src/option_badge.tsx",
     "./member_chip": "./src/member_chip.tsx",
     "./member_select": "./src/member_select.tsx",
@@ -176,6 +177,8 @@
     "./slider_math": "./src/slider_math.ts",
     "./counter": "./src/counter.tsx",
     "./link": "./src/link.tsx",
+    "./reference_field": "./src/reference_field.tsx",
+    "./text_button": "./src/text_button.tsx",
     "./text_link": "./src/text_link.tsx",
     "./sort_header": "./src/sort_header.tsx",
     "./skeleton": "./src/skeleton.tsx",
@@ -266,7 +269,7 @@
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@lotics/docx": "^0.2.0",
+    "@lotics/docx": "^0.3.0",
     "@lotics/xlsx": "^0.1.0",
     "ai": "^7.0.30",
     "mdast-util-from-markdown": "^2.0.3",

package/src/breakdown.tsx

@@ -97,7 +97,9 @@ export function Breakdown(props: BreakdownProps) {
             <PressableHighlight
               focusRing              key={item.key}
               accessibilityRole="button"
-              accessibilityState={{ selected }}
+              // The W3C prop — `accessibilityState` is dropped by this react-native-web
+              // build, and `selected` has no meaning on a `button` role regardless.
+              aria-pressed={selected}
               accessibilityLabel={`${item.label}: ${formatValue(item.value)}`}
               onPress={() => onSelect(selected ? null : item.key)}
               style={[styles.row, styles.pressable, selected ? styles.selected : null]}

package/src/choice_list.tsx

@@ -46,7 +46,9 @@ function ChoiceRow({ option, selected, onSelect }: { option: ChoiceOption; selec
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={option.label}
-      accessibilityState={{ selected }}
+      // The W3C prop — `accessibilityState` is dropped by this react-native-web
+      // build, and `selected` has no meaning on a `button` role regardless.
+      aria-pressed={selected}
       onPress={onSelect}
       {...focusProps}
       style={({ hovered, pressed }) => [

package/src/date_calendar.tsx

@@ -31,7 +31,9 @@ function DayCell(props: {
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={props.label}
-      accessibilityState={{ selected: props.isActive }}
+      // The W3C prop — `accessibilityState` is dropped by this react-native-web
+      // build, and `selected` has no meaning on a `button` role regardless.
+      aria-pressed={props.isActive}
       {...focusProps}
       style={({ hovered }) => [
         styles.dayCell,

package/src/deadline.ts

@@ -0,0 +1,157 @@
+import { type ColorName } from "./colors";
+
+/**
+ * DEADLINES — the countdown vocabulary: how many days are left, what to CALL
+ * that number, and how loud it should read.
+ *
+ * It lives in the kit because all three are contracts, not layout. A screen
+ * that invents its own thresholds says "urgent" at a different distance than
+ * the screen beside it; one that invents its own wording says "2 days late" in
+ * four different phrasings; and one that renders the countdown as a trailing
+ * badge detaches it from the date it is about. Every departmental register
+ * ordered by "what is due next" needs the same three answers.
+ *
+ * RN-free on purpose: the rules are unit-testable, and a component renders
+ * their result rather than owning them.
+ */
+
+/** What a deadline's proximity means. Directly usable as a `Text` `color` —
+ *  text collapses to these tokens rather than wearing a hue (see `deadlineColor`
+ *  for the badge/dot side, which keeps hue nuance). */
+export type DeadlineTone = "danger" | "warning" | "muted";
+
+/** Where "act now" and "act soon" start, in whole days.
+ *
+ *  The defaults (1 / 3) come from freight, where a missed cut-off costs a
+ *  sailing and demurrage accrues inside three days. A domain whose consequences
+ *  arrive slower moves them out; the point is that ONE screen never disagrees
+ *  with the next about where the line sits. */
+export interface DeadlineThresholds {
+  /** ≤ this many days out reads `danger`. Default 1 (today and tomorrow). */
+  dangerWithinDays?: number;
+  /** ≤ this many days out reads `warning`. Default 3. */
+  warningWithinDays?: number;
+}
+
+/** The four things a countdown can say. Resolved from `LoticsLocale.deadline`
+ *  (English defaults, Vietnamese pack shipped) or passed per instance. */
+export interface DeadlineLabels {
+  /** Past due, given the count as a POSITIVE number of days. */
+  overdue: (days: number) => string;
+  /** Due today — the count is 0, and "0 days left" is not what a reader wants. */
+  today: string;
+  /** Due tomorrow. Named for the same reason as `today`. */
+  tomorrow: string;
+  /** Any distance further out, in whole days. */
+  inDays: (days: number) => string;
+}
+
+/** A milestone resolved against a clock: what it is, when, how far off. */
+export interface Deadline {
+  label: string;
+  date: Date;
+  /** Calendar days from now — NEGATIVE when the date has passed. */
+  days: number;
+}
+
+const MS_DAY = 86_400_000;
+const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+
+/**
+ * Whole CALENDAR days until `due`, negative once it has passed.
+ *
+ * Both ends collapse to midnight first, because the vocabulary this feeds is
+ * DAY-granular and so the arithmetic has to be. Diffing the raw instants and
+ * rounding lands on the wrong day whenever `now` and the deadline sit on
+ * opposite sides of noon — and carriers really do set cut-offs at 02:00:
+ *
+ *   now 14:30, cut-off 02:00 TOMORROW  → 1 "Tomorrow".  Raw: 0, "Today".
+ *   now 14:30, cut-off 02:00 TODAY     → 0 "Today".     Raw: -1, "1 day overdue"
+ *                                                       for something 12h old.
+ *   now 00:30, cut-off 23:00 TONIGHT   → 0 "Today".     Raw: 1, "Tomorrow".
+ *
+ * Each wrong answer makes the countdown contradict the date printed beside it.
+ */
+export function daysUntil(due: Date, now: Date): number {
+  return Math.round((startOfDay(due).getTime() - startOfDay(now).getTime()) / MS_DAY);
+}
+
+/** How loud a day-count reads. Overdue folds into `danger` — a missed deadline
+ *  and one due today both mean ACT NOW, and the LABEL is what distinguishes
+ *  them ("2 days overdue" vs "Today"), so the tone does not have to. */
+export function deadlineTone(days: number, thresholds?: DeadlineThresholds): DeadlineTone {
+  const { dangerWithinDays = 1, warningWithinDays = 3 } = thresholds ?? {};
+  if (days <= dangerWithinDays) return "danger";
+  if (days <= warningWithinDays) return "warning";
+  return "muted";
+}
+
+/** The same decision as a `ColorName`, for a `Badge` / `Badge variant="dot"`
+ *  where hue nuance survives. `muted` becomes `zinc`: a deadline comfortably
+ *  out is a standing fact, and coloring it spends the page's attention budget
+ *  on the one row that needs none. */
+export function deadlineColor(days: number, thresholds?: DeadlineThresholds): ColorName {
+  const tone = deadlineTone(days, thresholds);
+  return tone === "danger" ? "red" : tone === "warning" ? "amber" : "zinc";
+}
+
+/** A day-count as words: "2 days overdue" / "Today" / "Tomorrow" / "5 days left".
+ *
+ *  0 and 1 get their own words because a countdown that renders them
+ *  arithmetically ("0 days left") reads as broken at exactly the moment it
+ *  matters most. */
+export function countdownLabel(days: number, labels: DeadlineLabels): string {
+  if (days < 0) return labels.overdue(-days);
+  if (days === 0) return labels.today;
+  if (days === 1) return labels.tomorrow;
+  return labels.inDays(days);
+}
+
+/**
+ * The countdown as a FIELD ANNOTATION rather than a trailing badge — spread it
+ * onto the `DetailRow` holding the date.
+ *
+ * A deadline is a property OF the date it sits on, so it annotates that field
+ * the way every other field annotation does, and the three annotation slots
+ * carry the three urgency levels exactly: past due or due today is the field
+ * being WRONG (`error`), the warning window is "accepted, and something
+ * downstream is worse for it" (`warning`), and anything further out is the
+ * standing fact (`description`). A badge at the end of the row would say the
+ * same thing in a vocabulary the rest of the field grid does not speak.
+ *
+ *     <DetailRow label="SI cut-off" {...deadlineAnnotation(days, words.deadline)}>
+ */
+export function deadlineAnnotation(
+  days: number,
+  labels: DeadlineLabels,
+  thresholds?: DeadlineThresholds,
+): { description?: string; warning?: string; error?: string } {
+  const text = countdownLabel(days, labels);
+  const tone = deadlineTone(days, thresholds);
+  return tone === "danger" ? { error: text } : tone === "warning" ? { warning: text } : { description: text };
+}
+
+/**
+ * The nearest of several milestones — the one a desk is actually working to.
+ *
+ * Undated candidates drop out; the rest sort by date, so an OVERDUE milestone
+ * comes back FIRST. That is deliberate: a cut-off you missed yesterday is the
+ * most urgent thing on the record, and a "next deadline" that skips past it to
+ * the following one silently stops reporting the failure.
+ *
+ * Which means the CALLER passes only the milestones still OPEN. Done-ness is
+ * not knowable from a date — a met cut-off and a missed one are both in the
+ * past — and a milestone left in after it was satisfied would dominate this
+ * answer forever.
+ */
+export function nearestDeadline(
+  candidates: ReadonlyArray<{ label: string; date: Date | null | undefined }>,
+  now: Date,
+): Deadline | null {
+  // `flatMap` hands back a FRESH array, so sorting it in place cannot reach the
+  // caller's — the copy a defensive `[...dated]` would add is dead weight.
+  const dated = candidates.flatMap((c) =>
+    c.date ? [{ label: c.label, date: c.date, days: daysUntil(c.date, now) }] : [],
+  );
+  return dated.sort((a, b) => a.date.getTime() - b.date.getTime())[0] ?? null;
+}

package/src/filter_chip.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
-import { TextLink } from "./text_link";
+import { TextButton } from "./text_button";
 import { Chip } from "./chip";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import type { PopoverSide, PopoverAlign } from "./popover";
@@ -110,7 +110,7 @@ export function FilterChip(props: FilterChipProps) {
           <PopoverFooter>{footer}</PopoverFooter>
         ) : showClear ? (
           <PopoverFooter align="start">
-            <TextLink onPress={onClear}>{clearLabel}</TextLink>
+            <TextButton onPress={onClear}>{clearLabel}</TextButton>
           </PopoverFooter>
         ) : null}
       </PopoverContent>

package/src/funnel.tsx

@@ -91,7 +91,9 @@ export function Funnel(props: FunnelProps) {
     return (
       <PressableHighlight
         accessibilityRole="button"
-        accessibilityState={{ selected: selectedKey === key }}
+        // The W3C prop — `accessibilityState` is dropped by this react-native-web
+        // build, and `selected` has no meaning on a `button` role regardless.
+        aria-pressed={selectedKey === key}
         accessibilityLabel={label}
         onPress={() => onSelect(selectedKey === key ? null : key)}
         style={fill ? styles.pressFill : undefined}

package/src/heatmap.tsx

@@ -108,7 +108,9 @@ function Cell(props: CellProps) {
   return (
     <Pressable
       accessibilityRole="button"
-      accessibilityState={{ selected }}
+      // The W3C prop — `accessibilityState` is dropped by this react-native-web
+      // build, and `selected` has no meaning on a `button` role regardless.
+      aria-pressed={selected}
       accessibilityLabel={label}
       onPress={onPress}
       {...focusProps}

package/src/locale.tsx

@@ -8,6 +8,7 @@ import { type RemainderMeterLabels } from "./remainder_meter";
 import { type DateRangeFilterFieldLabels } from "./date_range_filter_field";
 import { type GalleryLabels } from "./file_preview_types";
 import { type FindingLabels } from "./finding";
+import { type DeadlineLabels } from "./deadline";
 
 /**
  * The kit's localizable strings, one slice per string-bearing component. A
@@ -69,6 +70,9 @@ export interface LoticsLocale {
   sequence: { moveUp: string; moveDown: string; remove: string };
   /** `TrendFooter`: the direction words of the trend sentence. */
   trendFooter: { up: string; down: string };
+  /** The countdown vocabulary — see `deadline.ts`. 0 and 1 get their own words
+   *  because "0 days left" reads as broken exactly when it matters most. */
+  deadline: DeadlineLabels;
   /** `SuggestionChip`: the press target's default name and the ✕ tooltip. */
   suggestionChip: { add: (label: string) => string; dismiss: string };
   /** `Confidence`: the full level phrase ("High confidence" …). */
@@ -226,6 +230,12 @@ export const en: LoticsLocale = {
   chip: { remove: "Remove" },
   sequence: { moveUp: "Move up", moveDown: "Move down", remove: "Remove" },
   trendFooter: { up: "Up", down: "Down" },
+  deadline: {
+    overdue: (days) => `${days} ${days === 1 ? "day" : "days"} overdue`,
+    today: "Today",
+    tomorrow: "Tomorrow",
+    inDays: (days) => `${days} days left`,
+  },
   suggestionChip: { add: (label) => `Add: ${label}`, dismiss: "Dismiss suggestion" },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
   remainderMeter: {
@@ -378,6 +388,12 @@ export const vi: LoticsLocale = {
   chip: { remove: "Xóa" },
   sequence: { moveUp: "Lên trên", moveDown: "Xuống dưới", remove: "Xóa" },
   trendFooter: { up: "Tăng", down: "Giảm" },
+  deadline: {
+    overdue: (days) => `Quá hạn ${days} ngày`,
+    today: "Hôm nay",
+    tomorrow: "Ngày mai",
+    inDays: (days) => `Còn ${days} ngày`,
+  },
   suggestionChip: { add: (label) => `Thêm: ${label}`, dismiss: "Bỏ gợi ý" },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
   remainderMeter: {

package/src/matrix.tsx

@@ -222,7 +222,9 @@ function MatrixCell({ ctx, display, row, col, value }: MatrixCellProps) {
   return (
     <FocusRingPressable
       accessibilityRole="button"
-      accessibilityState={{ selected: isSelected }}
+      // The W3C prop — `accessibilityState` is dropped by this react-native-web
+      // build, and `selected` has no meaning on a `button` role regardless.
+      aria-pressed={isSelected}
       accessibilityLabel={label}
       onPress={() => onSelectCell?.(isSelected ? null : { row: row.key, col: col.key })}
       style={(state) => [

package/src/option_list.tsx

@@ -7,7 +7,7 @@ import { Checkbox } from "./checkbox";
 import { MenuButton } from "./menu_button";
 import { MenuListItem } from "./menu_list_item";
 import { Button } from "./button";
-import { TextLink } from "./text_link";
+import { TextButton } from "./text_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { TextInputField } from "./text_input_field";
 import { useScreenSize } from "./use_screen_size";
@@ -176,9 +176,9 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
 
       {list.showSelectAll || list.showDeselectAll ? (
         <View style={styles.selectAllContainer}>
-          {list.showSelectAll ? <TextLink onPress={list.selectAll}>{selectAllLabel}</TextLink> : null}
+          {list.showSelectAll ? <TextButton onPress={list.selectAll}>{selectAllLabel}</TextButton> : null}
           {list.showDeselectAll ? (
-            <TextLink onPress={list.deselectAll}>{deselectAllLabel}</TextLink>
+            <TextButton onPress={list.deselectAll}>{deselectAllLabel}</TextButton>
           ) : null}
         </View>
       ) : null}

package/src/press_door.tsx

@@ -10,6 +10,13 @@ export interface PressDoorProps {
    * without a label it is a nameless button. Name the destination ("Open ORD-1042").
    */
   accessibilityLabel: string;
+  /**
+   * Set ONLY when the press toggles a disclosure the door owns (`TableRow`'s
+   * `detail`), never when it navigates: it emits `aria-expanded`, which promises
+   * a screen-reader user that this control shows and hides something in place.
+   * Omit and no state is announced.
+   */
+  expanded?: boolean;
   /** Focus-ring corner radius — match the surface the door spans. Default 10 (the register wash). */
   radius?: number;
 }
@@ -44,12 +51,16 @@ export interface PressDoorProps {
  *
  * `TableRow` is the in-kit consumer.
  */
-export function PressDoor({ onPress, accessibilityLabel, radius = 10 }: PressDoorProps) {
+export function PressDoor({ onPress, accessibilityLabel, expanded, radius = 10 }: PressDoorProps) {
   const { focusVisible, focusProps } = useFocusRing();
   return (
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
+      // The W3C prop, NOT `accessibilityState` — this react-native-web build drops
+      // the latter silently. Set only when the door TOGGLES something: on a door
+      // that navigates it would promise a disclosure the press does not perform.
+      aria-expanded={expanded}
       onPress={onPress}
       {...focusProps}
       style={[styles.door, { borderRadius: radius }, focusVisible && { boxShadow: FOCUS_RING }]}

package/src/reference_field.tsx

@@ -0,0 +1,174 @@
+import { useRef, useState } from "react";
+import { View } from "react-native";
+import { Button } from "./button";
+import { DetailRow, DetailTable } from "./detail_row";
+import { Divider } from "./divider";
+import { InlineEditView } from "./inline_edit";
+import { Popover, PopoverContent } from "./popover";
+import { DialogSectionHeadingTitle } from "./section_heading";
+import { Text } from "./text";
+import { TextButton } from "./text_button";
+import { TextLink } from "./text_link";
+
+/**
+ * A REFERENCE to another record, rendered as a FIELD VALUE.
+ *
+ * It wears the inline editor's resting surface — same 40px band, same zinc-50
+ * chip, same radius — so a pointer at another record sits in the value column
+ * exactly like the editors above and below it, rather than announcing itself as
+ * a different species of thing. (The chip's usual promise is "editable"; here it
+ * reads as "pressable", which is what `InlineSelect` and `InlineDatePicker`
+ * already mean by it — they open a popover too.)
+ *
+ * ONE act on the surface, the rest one layer in:
+ *   press the value  → the facts, in a popover (free, so it's the whole surface)
+ *   Open, in the peek → the referenced record's own page
+ *   Remove, in the peek → detach (destructive and rare)
+ *
+ * Open used to sit ON the field as an `InlineButton`, justified as "the common
+ * act". It was neither common nor an act about the value. `actions` is for verbs
+ * ABOUT the value, so they travel with what they act on — Call this number, Copy
+ * this reference, set this date to Today; "Open" is DEPARTURE to another record,
+ * and on a record page leaving is the rare move, not the frequent one. It also
+ * put two different destinations behind one word: press the box → a summary,
+ * press "Open" 8px away → navigate. And the kit had already ruled — `LedgerRow`
+ * IGNORES `reference` while `peek` is set, because a reference belongs inside
+ * the peek. Dropping it hands the field its plain anatomy back: the press target
+ * is the whole box again and the focus ring rings the field, not a narrower
+ * region inside it.
+ *
+ * Remove earns its depth twice over. It is the answer to the question the PEEK
+ * asks — "is this the right one?" — so the check and the correction are the same
+ * gesture; and a detach link repeated down a column of references is noise in the
+ * scan path for an act most readers never perform. Depth is not a hiding place
+ * here: pressing a field-shaped value is the first thing anyone tries, and the
+ * verb is plainly visible once open.
+ *
+ * What it encodes is the PEEK CONTRACT — the marker, the popover's grammar, and
+ * where each verb sits — not a layout convenience. It was a template composition
+ * until a second surface needed it (a register's workspace drawer lists the same
+ * references), which is the bar for lifting one here.
+ */
+export interface ReferenceFieldProps {
+  name: string;
+  code?: string;
+  facts: { label: string; value: string }[];
+  /** Announced name of the peek trigger, e.g. "Harbor Freight Lines — details". */
+  accessibilityLabel: string;
+  onOpen: () => void;
+  openLabel: string;
+  /** Detach — omit where the link cannot be broken (a handoff's sibling record). */
+  onRemove?: () => void;
+}
+
+export function ReferenceField(props: ReferenceFieldProps) {
+  const { name, code, facts, accessibilityLabel, onOpen, openLabel, onRemove } = props;
+  const anchor = useRef<View>(null);
+  const [peekOpen, setPeekOpen] = useState(false);
+  return (
+    <Popover open={peekOpen} onOpenChange={setPeekOpen} triggerRef={anchor} side="bottom" align="start">
+      {/* THE KIT'S FIELD, not a lookalike. This was hand-rolled — a Pressable
+          wearing copies of the field's border, radius, height and hover — and it
+          promptly fell out of step the moment the kit's field changed: it kept a
+          pointer cursor no editor has, and missed the hover TINT that every other
+          field gained. A copied surface always drifts; the fix is to stop copying.
+
+          `InlineEditView` gives all of it: the surface and its states, hover, and
+          focus-within. `anchorRef` hands the popover the FIELD's box, which is
+          what the peek must line up with; it happens to equal `ref` now that the
+          field carries no verbs, and stays correct if one is ever added.
+
+          OPEN, never toggle: the press target and the popover's own dismissal
+          would otherwise fight, and idempotent `true` makes the pair safe. The
+          popover closes on outside press / Escape. */}
+      <InlineEditView
+        anchorRef={anchor}
+        accessibilityLabel={accessibilityLabel}
+        onPress={() => setPeekOpen(true)}
+        active={peekOpen}
+        /* THE MARKER — what says this value is a RECORD and not typed text.
+           `TextLink` with neither `href` nor `onPress` is exactly that: the kit's
+           underline, non-interactive, so it drops inside the field's own press
+           target without a button landing inside a button. NOT a `Badge` (that
+           is STATUS only, and a reference is not a state) and NOT `Link`'s fixed
+           blue + role="link", which would promise navigation this press does not
+           perform — it opens a summary. The underline says "there is more here";
+           where to go is the peek's business. */
+        display={
+          <View style={{ flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: 6 }}>
+            <TextLink size="sm" numberOfLines={1}>{name}</TextLink>
+            {code ? <Text size="sm" color="muted" numberOfLines={1}>{code}</Text> : null}
+          </View>
+        }
+      />
+      {/* THE PEEK'S FORMAT — the kit's own grammar, not a bespoke one. A popover
+          is dialog-scale, so the identity takes the ramp's dialog rung
+          (`DialogSectionHeadingTitle`, ####) with the code as its description
+          rather than a hand-picked font weight; the facts are `DetailRow`s, which
+          is what label-beside-value IS everywhere else on this page; and the
+          destructive verb is fenced off by a `Divider` instead of floating after
+          the last fact. Width matches `Peek`'s own content width so every peek in
+          an app is the same object.
+          `labelWidth` is the one override, and it is not arbitrary: a `DetailTable`
+          STACKS its columns below `labelWidth + MIN_CONTROL_WIDTH + 24`, so the
+          page's 150 would flip a 320 popover into stacked form grammar. 88 keeps
+          the summary side-by-side, which is the whole point of a glance. */}
+      <PopoverContent style={{ width: 320 }} disableBodyScroll>
+        <View style={{ gap: 12 }}>
+          <DialogSectionHeadingTitle description={code}>{name}</DialogSectionHeadingTitle>
+          {/* PLAIN `Text`, not `InlineStatic` — and `minHeight` 28, `DetailRow`'s
+              own default, instead of the `DetailTable`'s 40.
+
+              Both come from one fact: this grid has NO editors. `InlineStatic`
+              exists to align pixel-for-pixel with the `Inline*` controls — it
+              hard-sets `INLINE_CONTROL_HEIGHT` so a computed total sits flush
+              beside editable rows in a record. Here there is nothing to sit flush
+              WITH, so it only reserved a 40px control band for a 20px value:
+              three facts, 60px of air, in a popover whose whole job is a glance.
+              `minHeight` alone does not fix it (the value's own box still forces
+              40) and `Text` alone does not either (the table's band re-imposes
+              it) — the row is the max of the two, so both have to go. */}
+          <DetailTable labelWidth={88} minHeight={28}>
+            {facts.map((f) => (
+              <DetailRow key={f.label} label={f.label} flat>
+                <Text size="sm">{f.value || "—"}</Text>
+              </DetailRow>
+            ))}
+          </DetailTable>
+          {/* THE FOOTER — destructive LEFT, go-to RIGHT, the kit's convention.
+              Open repeats the verb on the surface deliberately: the popover now
+              covers the button that opened it, and having read the facts, "take me
+              there" is the next move. That is the shape `Peek` prescribes — a
+              summary with one action to the full record. Remove closes the peek
+              first, because the surface it is anchored to is about to stop
+              existing. */}
+          <Divider />
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            {onRemove ? (
+              // `TextButton color="danger"` — this act wanted the component, not a
+              // Button wearing three corrections. It went `danger` (solid, too
+              // loud for the rarest verb here) → `danger-secondary` (a ghost, so
+              // its ink sat a padding's width inside the column every fact label
+              // starts on) → `+ flush` (that geometry, patched). A text-weight
+              // destructive act aligned to a column of text IS this component: red
+              // ink, no fill, its own bleed, and a hover wash and focus ring a bare
+              // pressable Text never had.
+              //
+              // Pairing a text action with the filled `secondary` "Open" is the
+              // standard footer shape, not a mismatch — Material and HIG both put
+              // the quiet/destructive verb at text weight beside a filled primary.
+              // No icon: an ✕ beside "Remove" says it twice, and the glyph alone
+              // made this read as the popover's dismiss rather than a decision.
+              <TextButton color="danger" onPress={() => { setPeekOpen(false); onRemove(); }}>Remove</TextButton>
+            ) : null}
+            <View style={{ flex: 1 }} />
+            {/* `openLabel` names the DESTINATION ("Open customer"): a page carries
+                four of these peeks, and four buttons announcing a bare "Open"
+                are four controls a screen reader cannot tell apart. */}
+            <Button title="Open" color="secondary" accessibilityLabel={openLabel} onPress={() => { setPeekOpen(false); onOpen(); }} />
+          </View>
+        </View>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/status_grid.tsx

@@ -133,7 +133,9 @@ export function StatusLegend(props: StatusLegendProps) {
           <PressableHighlight
             focusRing            key={state.key}
             accessibilityRole="button"
-            accessibilityState={{ selected }}
+            // The W3C prop — `accessibilityState` is dropped by this react-native-web
+            // build, and `selected` has no meaning on a `button` role regardless.
+            aria-pressed={selected}
             accessibilityLabel={`${state.label}: ${count}`}
             onPress={() => onSelect(selected ? null : state.key)}
             style={[styles.legendItem, styles.legendPressable, selected ? styles.legendSelected : null]}