@lotics/ui 34.0.0 → 36.0.0

package/AGENTS.md

@@ -17,7 +17,7 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
 | [docs/catalog.md](./docs/catalog.md) | **The complete inventory** — Reach-by-role (each data role → the ONE canonical component) + every `@lotics/ui/<module>` entry point (incl. `@lotics/ui/vite`'s `loticsOptimizeDeps` + `loticsResolve()` — the pre-bundle list and the whole `resolve` block a custom-code app's `vite.config.ts` imports rather than hand-carries, dev-link included). Read before building any screen; reuse first. |
 | [docs/data_entry.md](./docs/data_entry.md) | Which editing pattern for which job — inline edit, fieldset forms, browser-autofill suppression (search controls only), find-or-create (`Combobox`), line items, handoffs, phased records, billing, tags, dispositions, attachments (the `FilesEditor` COMPOUND — root owns selection/gallery/confirm, you compose the bar, a HOST verb reads `useFilesEditorSelection` — plus the three-way file INTAKE: CTA + `FileDropTarget` + `usePasteFiles`), stage gates, the commit-on-blur vs action-press ordering law (the kit gates the press — `pending_commits`). |
 | [docs/ai_patterns.md](./docs/ai_patterns.md) | AI acts, the human stays in charge — composer, live run feed (`AgentRun`), the one law's split — it turns on WHO supplied the values (machine → a gate: a diff when something is being replaced, a full editable preview when records are being created from a document; human-typed → save-direct + the `ResultHeader` receipt), findings, provenance, confidence; the UI half of the SDK's [ai doc](../app-sdk/docs/ai.md)., the whole run in a dialog (`AgentRunScope`/`AgentRunPane`/`AgentRunActions` — a parked question REPLACES the feed, actions in the footer, **Stop** while streaming), **stopping** (`cancel` stops the run, `abort` only stops listening — so closing a dialog must `cancel` or it keeps billing); **review surfaces compose from atoms** — `DiffValue` (a changed value, droppable in any cell/row/total), `DiffMark` (what happened to the row — ONE circular disc, every surface), `useChangeSet` (accept/reject/undo bookkeeping, no layout) — see [MIGRATION.md](./MIGRATION.md) for the `ChangeReview` family they replace |
-| [docs/composition.md](./docs/composition.md) | The design-language contract — canvas + content column, heading altitude (incl. eyebrow vs group lead — a label is one or the other), banded cards, register vs inset rows, master-detail `Drawer` on a LIST screen vs a child collection's row EXPANDING inside a record, view controls, RECORD EXTENT (one page, sections scrolled to and never routed to), color discipline, typography, whitespace, and how to TEST an overlay component (a `Popover`-backed surface never mounts under jsdom). |
+| [docs/composition.md](./docs/composition.md) | The design-language contract — canvas + content column, heading altitude (incl. eyebrow vs group lead — a label is one or the other), banded cards, register vs inset rows (incl. the register laws a row centres its cells by: every cell a FIXED height, a pressable cell on the shared hover token, a column sized by what it carries), master-detail `Drawer` on a LIST screen vs a child collection's row EXPANDING inside a record, view controls, RECORD EXTENT (one page, sections scrolled to and never routed to), color discipline, typography, whitespace, and how to TEST an overlay component (a `Popover`-backed surface never mounts under jsdom). |
 | [docs/templates.md](./docs/templates.md) | The map of `examples/tpl_*.tsx` — what shape each template solves and which to start from (copy + adapt, never import) — plus the record-surface composition rules (pipeline order, static shape, decision budget). |
 
 ## Iron rules

package/MIGRATION.md

@@ -4,6 +4,89 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 36.0.0 — seven components stopped announcing English; their strings moved to the pack
+
+**Nothing to change if you pass a shipped pack** (`en` / `vi`) — both carry every
+new entry, and no component API changed. A HAND-BUILT pack must add them:
+
+```ts
+commentsButton: { comment: "bình luận", comments: "bình luận",
+                  withSubject: (counted, subject) => `${counted} về ${subject}` },
+infoPopover:    { more: "Thông tin thêm", about: (label) => `Thông tin về ${label}` },
+fileRow:        { open: (name) => `Mở ${name}` },
+sources:        { open: (label) => `Mở ${label}`, heading: "Nguồn" },
+counter:        { decrease: (label) => `Giảm ${label}`, increase: (label) => `Tăng ${label}` },
+allocationRow:  { allocateTo: (label) => `Phân bổ vào ${label}`,
+                  due: (amount) => `còn ${amount}`, clear: "Xoá", full: "Toàn bộ" },
+columnFilter:   { min: (label) => `${label} tối thiểu`, max: (label) => `${label} tối đa` },
+```
+
+**Why.** These components built user-facing strings by concatenating an English
+word onto caller data — `Open ${name}`, `About ${label}`, `${label} min`,
+`${amount} due` — with no locale lookup at all. Most were accessible names, so a
+Vietnamese app announced "Open hop_dong.pdf" to the one user who cannot see the
+screen and has only the announcement; `Sources`' eyebrow and `AllocationRow`'s
+caption and buttons were visibly English too.
+
+`CommentsButton` is the same defect one step further along: it composed
+`3 comments · Northwind`, and a middot is the one part of a string a screen reader
+drops, so the mark carrying the relation never survived being read aloud.
+
+**Every interpolated entry is a FUNCTION, not a word plus concatenation**, because
+the added word sits in a different PLACE in different languages — `5,000,000 due`
+against `còn 5.000.000`. A pack supplying only vocabulary would still be stuck with
+English order. This is how every other interpolated string in a pack already works
+(`sortHeader.sortBy`, `ledger.rowDetails`, `pagination.rangeWithTotal`).
+
+Required rather than optional on purpose: both shipped packs are compile-forced
+complete, and that is the mechanism that catches an untranslated string before it
+ships.
+
+`Checklist`'s phase toggle also lost a middot and needs nothing from you — its name
+is now `Show Picking` rather than `Show · Picking`, verb then object.
+
+### `PressableHighlight` now sets `accessibilityRole="button"` itself
+
+Nothing to pass; an explicit `accessibilityRole` still wins. Surfaces built on it
+that never declared a role now announce as buttons and take a tab stop, which is
+what the component always claimed to be — the docblock says "it IS a button", and
+that is the whole reason its children must be non-interactive while `PressableRow`
+stays role-less. In this package 18 of 35 call sites passed the role by hand and
+every one passed `"button"`; the other 17 rendered a surface a screen reader could
+name but not identify as pressable.
+
+If a surface of yours is genuinely not a button, say so (`accessibilityRole="link"`,
+…) — or reach for `PressableRow`, which carries no role by design.
+
+## 35.0.0 — `FilterChip` has no Clear footer; the × is the clear
+
+`FilterChip` no longer renders a Clear button in its popover footer. **Nothing to
+change at a call site** — `onClear` and `clearLabel` are unchanged, and the × on
+the pill still clears, still carries `clearLabel` as its tooltip, and still
+replaces the chevron whenever the chip is active.
+
+**Why.** The pill's × and the footer button did the same thing, and the footer
+cost a whole bordered band to say it twice. The editors this pill exists to wrap
+bring their own bottom actions — an `OptionList` with `enableSelectAll` renders
+"Select all / Deselect all" in a bordered band of its own — so a multi-select
+filter ended with TWO stacked rules, the lower one holding a single button that
+"Deselect all" directly above it already performed. Measured on a live filter:
+bands of 49px and 47px, each with its own 1px top border.
+
+The × is also the more reachable of the two: it is on the pill, which is on
+screen whether or not the popover is open, while the footer button needed the
+panel opened first.
+
+**One behaviour change worth knowing:** passing a custom `footer` no longer
+suppresses the ×. `showClear` used to gate both, so a Save-footer pill silently
+lost its clear — if you were relying on that to hide the ×, pass no `onClear`
+instead, which is what "not clearable" has always meant.
+
+**If your filter had no other way to empty itself**, it still does: the ×. And if
+your editor genuinely needs a clear INSIDE the panel (a range slider, a counter —
+controls with no per-option deselect), put one in the `footer` slot, which is
+still there and is now the only thing that draws a footer band.
+
 ## 34.0.0 — one avatar rung fits a control band
 
 **`AVATAR_PX.md` is 28, not 36.** Nothing to change at a call site — `md` is still

package/docs/catalog.md

@@ -555,8 +555,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   aims at, and splitting them leaves half the affordance dead under the pointer. FULL INK, unlike
   the muted values around it — everything else on a row is a fact ABOUT the record, this is people
   talking about it and the one thing there that can be UNREAD. `subject` reaches the accessible
-  NAME only ("3 comments · Northwind Packaging" is a destination; "3 comments" on the fortieth row
-  is not) — never the visible label, which would spend row width restating whose record it is.
+  NAME only ("3 comments on Northwind Packaging" is a destination; "3 comments" on the fortieth row
+  is not) — never the visible label, which would spend row width restating whose record it is. The
+  pack's `commentsButton.withSubject` builds that phrase, so the word ORDER is the pack's to choose
+  and the join is a WORD: this string exists to be read aloud, and a screen reader drops
+  punctuation along with the relation it was carrying.
   **Render it only when `count > 0`** — a zero on every quiet row is a column of noise that trains
   the eye to skip exactly where the signal will appear. Pair it with a jump that LANDS on the
   thread (`tpl_item_list` opens the record's drawer on its comments section), because a count the
@@ -634,7 +637,12 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   designing a pressable surface it doesn't cover.
 - **`pressable_highlight`** — `PressableHighlight`: the hover-wash + keyboard-focus-ring
   `Pressable` under `MenuButton`/`Switcher`/custom pressable surfaces; its style-fn/children
-  receive `hovered` + `focusVisible`.
+  receive `hovered` + `focusVisible`. It announces as `role="button"` by DEFAULT (pass
+  `accessibilityRole` to override), and that role is the line between it and
+  **`PressableRow`**, which stays role-less and out of the tab order: a button may not
+  contain interactive descendants, so a row carrying its own CTA / ⋯ / checkbox is a
+  `PressableRow` with the body as its door, never this. Give it an `accessibilityLabel` —
+  a button whose whole content is an icon or a chip announces as nothing otherwise.
 - **`focus_ring_pressable`** — `FocusRingPressable`: a Pressable that rings on keyboard
   focus; the raw-control default.
 - **`card_select_item`** — `CardSelectItem`: a bordered, card-shaped button; `selected` =
@@ -1117,7 +1125,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `isColumnFilterActive` + `columnFilterSummary`: the typed per-column filter pill; for a
   register filtering on several columns.
 - **`filter_chip`** — `FilterChip` + `selectSummary`: the toolbar filter pill hosting a
-  facet (options, a `Slider range`, a `Counter`).
+  facet (options, a `Slider range`, a `Counter`). It draws NO bottom band of its own — the ×
+  on the pill is the clear, and the editor inside brings whatever actions it has, so a
+  multi-select's "select all / deselect all" is the only rule in the panel. `footer` is for an
+  editor that must COMMIT (Cancel / Save); reach for it only then, since it adds a second band
+  under an editor that already has one.
 - **`summary_line`** — `SummaryLine`: the light inline summary of a register/list's FILTERED
   view, sits below the toolbar; NOT the boxed dashboard `kpi_strip` band. Every item is an
   AGGREGATE over the rows in view (a count, a sum, a fill), and the strip goes with the set it

package/docs/composition.md

@@ -397,6 +397,58 @@ so `Table` also serves read-only tabular data (a fee breakdown, a spec sheet), n
 registers. A pressable `TableRow` REQUIRES `accessibilityLabel` ("Open …") — its keyboard door is
 an empty overlay with no content to derive a name from.
 
+**A CELL THAT DOES NOT SET THE ROW'S HEIGHT MUST NOT VARY WITH THE DATA.** A row centres its
+cells, so such a cell's first line lands at `(rowH − cellH) / 2`: one line on some rows and two
+on others puts that first line at two different offsets, and the column stops having a baseline.
+Uniform ROW heights hide it completely — the rows measure identical, the content inside them does
+not — and the drift is against the row's own centred chrome (ordinal, checkbox) as much as
+against the neighbouring columns.
+
+**It takes a height FLOOR to bite**, which is the part worth understanding rather than
+memorising. A `TableRow` with `minHeight` above its tallest cell holds slack that centring then
+distributes; without the floor the tallest cell sets the row, every cell starts at the top of its
+own row, and nothing drifts. So the cell that IS tallest may vary freely — it just makes the rows
+ragged instead, which is a different and far more visible problem. It is the cells living inside
+another cell's slack that have to hold still.
+
+**"Fixed" means the same every row, NOT one line.** A two-line cell is fine if it is two lines on
+every row. And the cost is real: bounding a cell usually means `numberOfLines={1}` and
+truncation, so you are buying a baseline with clipped text. Worth it for an identifier beside a
+contact; think harder for a cell whose job is prose, where the honest answer may be to move that
+content off the register entirely.
+
+Two corollaries, both counter-intuitive enough to state:
+
+- **Shrinking a NEIGHBOURING cell does not fix it.** The spread is a function of the varying
+  cell's own range, not of the row's height: a 20/42 cell spreads 11px in a 52px row and 11px in
+  a 68px one. Only bounding the cell that varies removes it.
+- **The fix is never a cross-axis knob.** `Table` has no `align` (see MIGRATION 32.0.0): topping
+  the cells leaves the chrome centred, so the row reads as scatter instead.
+
+Bound a cell by giving every row the same content, not by hoping the data is uniform. A line that
+appears only when its field is set is the defect; RESERVING the line is the fix — **but only when
+the field is nearly always present.** A box reserved for a value that half the rows lack reads as
+a column that forgot something, which is its own defect: prefer a field the rows actually carry
+(an identifier, a contact) over one that is merely interesting. A cell may hold more than one line
+freely when something FIXED occupies its top — a meter, a thumbnail — because the primary text
+then still lands near the row's centre, where the chrome already is. `tpl_item_list`'s identity
+cell is the worked example: name on top, the supporting values UNCONDITIONALLY beneath.
+
+**A pressable CELL wears `ROW_CONTROL_HOVER` / `ROW_CONTROL_PRESS`, never a hand-picked grey.**
+Reaching a cell means crossing its row, so both wash at once — a cell painting the row's own
+`zinc-100` vanishes under the pointer, and anything LIGHTER reads as a hole punched in the row.
+The tokens are one step darker for exactly that reason, and they are what `IconButton`,
+`CopyButton` and `CommentsButton` already paint, so a register whose cells use them speaks one
+hover language. Bleed the wash outward (`marginHorizontal: -8` against its own padding) so the
+cell's content stays on the column's edge — see `ROW_WASH_BLEED`.
+
+**Size a flexible column by what it CARRIES, measured.** A `flex` share is a claim about content;
+when the content shrinks — a value moves to the record, a stacked pair becomes a count — the
+share left behind is white space, and the columns beside it pay for it. Measure the widest row's
+content per column and set `flex` from that. A column whose cell holds a PROPORTION (a meter, a
+bar) is the exception in one direction only: cap it, because a gauge stops reading as an
+instrument once its track is long enough to be a rule across the row.
+
 Make a register SELECTABLE with the `Table` `leading` gutter + `selectAll` slot — a
 `CheckboxInput` per `TableRow` (its `leading` slot) + a select-all in the header band, the ticked
 rows `marked`, paired with a `FloatingActionBar` (its "Clear" escape is locale-resolved — pass

package/examples/tpl_item_list.tsx

@@ -237,7 +237,16 @@ function HoSoRow({ hs, ordinal, daThu, selected, marked, selectable, onToggle, o
               because it is the one value copied often enough to earn one (a desk
               pastes it into a message, a rep dials it). The verb rides the value
               inside its own cell: the trailing gutter belongs to the ⋯, and with
-              two values in this cell it would have nothing to name. */}
+              two values in this cell it would have nothing to name.
+
+              UNCONDITIONAL, and that is the load-bearing part of this shape. A
+              row centres its cells, so a supporting line that appears only when
+              its field is set makes this cell two heights, and the NAME above it
+              then sits at two different offsets down the column while every row
+              still measures the same. That is why the values here are ones every
+              record carries — a key, a contact — rather than whichever field is
+              most interesting: the line has to be honest on every row to be
+              reservable at all. */}
           <View style={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
             {/* The KEY, muted, on the supporting line — at most this, never a
                 column and never the row's name.
@@ -250,8 +259,13 @@ function HoSoRow({ hs, ordinal, daThu, selected, marked, selectable, onToggle, o
                 gives way, which is also the right order of loss: the phone has a
                 Copy control beside it that hands over the full value regardless. */}
             <Text size="xs" color="muted" tabular numberOfLines={1} style={{ flexShrink: 0 }}>{hs.ma}</Text>
-            <Text size="xs" color="muted" style={{ flexShrink: 0 }}> · </Text>
-            <Text size="xs" color="muted" tabular numberOfLines={1} style={{ flexShrink: 1 }}>{hs.dienThoai}</Text>
+            {/* A GAP, not a middot. Two facts of different kinds sat either side
+                of a ` · ` here, which is the separator this kit bans outright —
+                punctuation claiming a relation it refuses to name, and dropped
+                entirely by a screen reader. Spacing separates them without
+                asserting anything, and the two are already told apart by shape:
+                one is a key, one is a number with a Copy control on it. */}
+            <Text size="xs" color="muted" tabular numberOfLines={1} style={{ flexShrink: 1, marginLeft: 8 }}>{hs.dienThoai}</Text>
             <CopyButton value={hs.dienThoai} label="Copy phone number" />
           </View>
         </View>

package/examples/tpl_record.tsx

@@ -2131,10 +2131,15 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
                 "the Harbor Freight order", never "RC-2026-0418" — the code is how
                 the SYSTEM refers to the record, which makes it a supporting value.
                 The register's identity cell makes the same trade, so the two
-                surfaces name a record the same way. */}
+                surfaces name a record the same way.
+
+                A COMMA joins them, never a middot — two identifying facts read as
+                a list, and the kit bans the glyph outright (composition.md
+                §Microcopy): it claims a relation while refusing to name it, and a
+                screen reader drops it, taking the only thing that joined them. */}
             <RecordSummary
               title={customer ? customer.name : "No customer"}
-              subtitle={[code, customer?.city].filter(Boolean).join(" · ")}
+              subtitle={[code, customer?.city].filter(Boolean).join(", ")}
             />
           </View>
         </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "34.0.0",
+  "version": "36.0.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/accordion.tsx

@@ -101,7 +101,8 @@ export function AccordionHeader(props: AccordionHeaderProps) {
 
   return (
     <PressableHighlight
-      focusRing      onPress={toggle}
+      focusRing
+      onPress={toggle}
       accessibilityRole="button"
       // The W3C prop, NOT `accessibilityState` — this react-native-web build drops the
       // latter silently, so a disclosure shipped a `role="button"` that never announced

package/src/agent_progress.tsx

@@ -68,7 +68,8 @@ export function AgentProgress(props: AgentProgressProps) {
       ) : null}
 
       <PressableHighlight
-        focusRing        onPress={() => setExpanded((e) => !e)}
+        focusRing
+        onPress={() => setExpanded((e) => !e)}
         style={styles.pill}
         accessibilityLabel={expanded ? "Hide the agent's steps" : "Show the agent's steps"}
       >

package/src/allocation_row.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { Text } from "./text";
 import { Button } from "./button";
 import { NumberInput } from "./number_input";
+import { useLoticsLocale } from "./locale";
 
 export interface AllocationRowProps {
   /** The target's primary line — an invoice no., an order, a cost centre. */
@@ -28,6 +29,7 @@ export interface AllocationRowProps {
  */
 export function AllocationRow(props: AllocationRowProps) {
   const { label, sublabel, cap, value, onValueChange, format = (n) => n.toLocaleString(), trailing } = props;
+  const locale = useLoticsLocale();
   const full = value >= cap;
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, minHeight: 60 }}>
@@ -38,17 +40,17 @@ export function AllocationRow(props: AllocationRowProps) {
         </View>
         {sublabel ? <Text size="xs" color="muted">{sublabel}</Text> : null}
       </View>
-      <Text size="sm" color="muted" tabular style={{ width: 128, textAlign: "right" }}>{`${format(cap)} due`}</Text>
+      <Text size="sm" color="muted" tabular style={{ width: 128, textAlign: "right" }}>{locale.allocationRow.due(format(cap))}</Text>
       <View style={{ width: 150 }}>
         <NumberInput
           value={value || null}
           onValueChange={(n) => onValueChange(Math.max(0, Math.min(cap, n ?? 0)))}
           min={0}
           max={cap}
-          accessibilityLabel={`Allocate to ${label}`}
+          accessibilityLabel={locale.allocationRow.allocateTo(label)}
         />
       </View>
-      <Button title={full ? "Clear" : "Full"} color="muted" onPress={() => onValueChange(full ? 0 : cap)} />
+      <Button title={full ? locale.allocationRow.clear : locale.allocationRow.full} color="muted" onPress={() => onValueChange(full ? 0 : cap)} />
     </View>
   );
 }

package/src/breakdown.tsx

@@ -95,7 +95,8 @@ export function Breakdown(props: BreakdownProps) {
           );
           return onSelect ? (
             <PressableHighlight
-              focusRing              key={item.key}
+              focusRing
+              key={item.key}
               accessibilityRole="button"
               // The W3C prop — `accessibilityState` is dropped by this react-native-web
               // build, and `selected` has no meaning on a `button` role regardless.
@@ -114,7 +115,8 @@ export function Breakdown(props: BreakdownProps) {
         })}
         {collapsible ? (
           <PressableHighlight
-              focusRing            accessibilityRole="button"
+            focusRing
+            accessibilityRole="button"
             // The W3C prop — `accessibilityState` is dropped by this react-native-web build.
             aria-expanded={expanded}
             accessibilityLabel={expanded ? labels.less : labels.more(hidden)}

package/src/checklist.tsx

@@ -165,9 +165,13 @@ export function ChecklistGroup({ title, open, onToggleOpen, labels, ...positiona
         {/* A TEXT link, not a chevron: the phase is a heading rather than a row, so
             a disclosure triangle would give it the affordance of something that
             opens INTO a place. This only shows and hides rows already in the run,
-            and it says which in words. */}
+            and it says which in words.
+
+            The NAME is verb then object with nothing between them — "Show Picking"
+            is already a phrase, and the middot that stood here bought no clarity
+            while being dropped by every screen reader that read it aloud. */}
         {onToggleOpen != null ? (
-          <Pressable onPress={onToggleOpen} accessibilityRole="button" accessibilityLabel={`${word} · ${title}`}>
+          <Pressable onPress={onToggleOpen} accessibilityRole="button" accessibilityLabel={`${word} ${title}`}>
             <TextLink size="xs">{word}</TextLink>
           </Pressable>
         ) : null}

package/src/chip_group.tsx

@@ -46,7 +46,8 @@ export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
         const active = option.value === value;
         return (
           <PressableHighlight
-            focusRing            key={option.value}
+            focusRing
+            key={option.value}
             testID={option.testID}
             onPress={() => onValueChange(option.value)}
             accessibilityRole="button"

package/src/column_filter.tsx

@@ -5,6 +5,7 @@ import { NumberInput } from "./number_input";
 import { OptionList } from "./option_list";
 import { FilterChip } from "./filter_chip";
 import type { PickerOption } from "./picker";
+import { useLoticsLocale } from "./locale";
 
 /** A column the picker can filter on. `type` selects the control + operators. */
 export interface FilterableColumn {
@@ -107,6 +108,7 @@ export interface ColumnFilterProps {
  */
 export function ColumnFilter(props: ColumnFilterProps) {
   const { column, value, onChange, clearLabel } = props;
+  const locale = useLoticsLocale();
   const active = isColumnFilterActive(value);
 
   return (
@@ -129,7 +131,7 @@ export function ColumnFilter(props: ColumnFilterProps) {
         ) : column.type === "number" ? (
           <View style={styles.range}>
             <NumberInput
-              accessibilityLabel={`${column.label} min`}
+              accessibilityLabel={locale.columnFilter.min(column.label)}
               value={value?.kind === "number" ? value.min : null}
               onValueChange={(min) =>
                 onChange({ kind: "number", min, max: value?.kind === "number" ? value.max : null })
@@ -139,7 +141,7 @@ export function ColumnFilter(props: ColumnFilterProps) {
               –
             </Text>
             <NumberInput
-              accessibilityLabel={`${column.label} max`}
+              accessibilityLabel={locale.columnFilter.max(column.label)}
               value={value?.kind === "number" ? value.max : null}
               onValueChange={(max) =>
                 onChange({ kind: "number", min: value?.kind === "number" ? value.min : null, max })

package/src/comments_button.tsx

@@ -20,8 +20,14 @@ export interface CommentsButtonProps {
   /** `sm` (the register row's) or `md`. Matches `CopyButton`'s scale so the two
    *  affordances a row carries sit at one size. */
   size?: "sm" | "md";
-  /** Override the wording; otherwise the locale's. */
-  labels?: { comments?: string; comment?: string };
+  /** Override the wording; otherwise the locale's. `withSubject` builds the whole
+   *  phrase from the counted noun and the subject, so an override changes the word
+   *  ORDER too, not just the words. */
+  labels?: {
+    comments?: string;
+    comment?: string;
+    withSubject?: (counted: string, subject: string) => string;
+  };
   disabled?: boolean;
   testID?: string;
 }
@@ -57,7 +63,15 @@ export function CommentsButton(props: CommentsButtonProps) {
   // The subject rides the NAME, never the visible label: a row already says whose
   // record it is, and repeating it beside the count spends the row's width on
   // something the eye has just read.
-  const name = subject ? `${count} ${noun} · ${subject}` : `${count} ${noun}`;
+  //
+  // The PACK composes it, exactly as `sortBy` and `rowDetails` do. Two reasons,
+  // and the second is the one that outlives this component: a middot is dropped by
+  // every screen reader, so the one mark carrying "these comments are about that
+  // record" is the one part that never survives being read aloud — and the word
+  // that replaces it sits in a different PLACE in different languages, which a
+  // component concatenating in English order cannot express at all.
+  const counted = `${count} ${noun}`;
+  const name = subject ? (labels?.withSubject ?? locale.commentsButton.withSubject)(counted, subject) : counted;
 
   return (
     <PressableHighlight

package/src/counter.tsx

@@ -2,6 +2,7 @@ import { StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { IconButton } from "./icon_button";
+import { useLoticsLocale } from "./locale";
 
 export interface CounterProps {
   value: number;
@@ -9,7 +10,8 @@ export interface CounterProps {
   min?: number;
   max?: number;
   step?: number;
-  /** Announced name — the buttons become "Decrease/Increase {label}". */
+  /** Announced name — the pack wraps it into each button's own phrase
+   *  ("Decrease {label}" in English, "Giảm {label}" in Vietnamese). */
   accessibilityLabel: string;
   /** Render the value with units ("3 nights", "2 guests"). Default: the number. */
   format?: (value: number) => string;
@@ -24,6 +26,7 @@ export interface CounterProps {
  */
 export function Counter(props: CounterProps) {
   const { value, onValueChange, min = 0, max = Infinity, step = 1, accessibilityLabel, format } = props;
+  const locale = useLoticsLocale();
   const clamp = (n: number) => Math.min(max, Math.max(min, n));
 
   return (
@@ -32,7 +35,7 @@ export function Counter(props: CounterProps) {
         icon="minus"
         size="md"
         style={styles.btn}
-        accessibilityLabel={`Decrease ${accessibilityLabel}`}
+        accessibilityLabel={locale.counter.decrease(accessibilityLabel)}
         disabled={value <= min}
         onPress={() => onValueChange(clamp(value - step))}
       />
@@ -43,7 +46,7 @@ export function Counter(props: CounterProps) {
         icon="plus"
         size="md"
         style={styles.btn}
-        accessibilityLabel={`Increase ${accessibilityLabel}`}
+        accessibilityLabel={locale.counter.increase(accessibilityLabel)}
         disabled={value >= max}
         onPress={() => onValueChange(clamp(value + step))}
       />

package/src/file_row.tsx

@@ -5,6 +5,7 @@ import { colors } from "./colors";
 import { FileBadge } from "./file_badge";
 import { FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
+import { useLoticsLocale } from "./locale";
 
 export interface FileRowProps {
   /** The file / document name — the primary line. */
@@ -76,6 +77,7 @@ export function FileRow({
   leading,
   size = "sm",
 }: FileRowProps) {
+  const locale = useLoticsLocale();
   const md = size === "md";
   const [hovered, setHovered] = useState(false);
   const [pressed, setPressed] = useState(false);
@@ -134,7 +136,7 @@ export function FileRow({
         onPressIn={() => setPressed(true)}
         onPressOut={() => setPressed(false)}
         accessibilityRole="button"
-        accessibilityLabel={`Open ${name}`}
+        accessibilityLabel={locale.fileRow.open(name)}
         style={[styles.door, focusVisible && { boxShadow: FOCUS_RING }]}
       >
         {content}

package/src/filter_chip.tsx

@@ -7,7 +7,6 @@ import { Chip } from "./chip";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import type { PopoverSide, PopoverAlign } from "./popover";
 import { useLoticsLocale } from "./locale";
-import { Button } from "./button";
 
 export interface FilterChipProps {
   /** The dimension name — shown alone when inactive ("Owner"), prefixed when
@@ -18,10 +17,12 @@ export interface FilterChipProps {
    *  selection RICHLY in the trigger (member avatars, colour dots). Empty /
    *  undefined renders the inactive pill (label + chevron, no clear). */
   summary?: ReactNode;
-  /** Clears the dimension — renders the × on the pill AND a Clear in the popover
-   *  footer whenever a summary is present. */
+  /** Clears the dimension — renders the × on the pill whenever a summary is
+   *  present. The × is the ONLY clear: the editor inside brings its own bottom
+   *  actions, and a second clear in the popover footer stacked a redundant band
+   *  under them. */
   onClear?: () => void;
-  /** Label for the clear affordances (pass a translated string). */
+  /** Tooltip on the pill's × (pass a translated string). */
   clearLabel?: string;
   /** The editor revealed on press — a premium primitive (`Slider range`,
    *  `Counter`, `OptionList` multi) or any composed control. `FilterChip` owns
@@ -35,8 +36,11 @@ export interface FilterChipProps {
   /** Optional controlled popover state — for an editor that closes on Save. */
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  /** A custom popover footer (e.g. Cancel / Save) — replaces the baked Clear.
-   *  Lets a non-filter VALUE pill (a setting gate) reuse the same shell. */
+  /** A custom popover footer (e.g. Cancel / Save) — for an editor that commits
+   *  rather than applying live. Lets a non-filter VALUE pill (a setting gate)
+   *  reuse the same shell. Reach for it only when the editor NEEDS a commit: an
+   *  editor that already carries bottom actions of its own gets a second
+   *  bordered band from this. */
   footer?: ReactNode;
 }
 
@@ -61,9 +65,11 @@ export function selectSummary(
  * filter dimension, the sibling of `ChipGroup` (which lays ONE hot dimension's
  * options out inline). Many dimensions stay scannable because each collapses to
  * a single pill: inactive reads "Label ⌄", active reads "Label: summary" with an
- * × to clear. `FilterChip` bakes the consistent chrome — the preview pill, a
- * padded popover body for the composed editor, and a Clear footer when active —
- * so every filter looks and behaves the same. Drop a premium primitive inside
+ * × to clear. `FilterChip` bakes the consistent chrome — the preview pill and a
+ * padded popover body for the composed editor — so every filter looks and
+ * behaves the same. It adds NO bottom band of its own: the editor inside brings
+ * whatever actions it has, and a shell that also contributed one gave every
+ * multi-select filter two stacked rules. Drop a premium primitive inside
  * (`Slider range`, `Counter`, `OptionList` multi). With `footer` (+ controlled
  * `open`/`onOpenChange`) the same shell wraps a non-filter VALUE pill — a
  * setting gate with Cancel/Save — keeping it on the one pill surface. The table
@@ -73,9 +79,23 @@ export function FilterChip(props: FilterChipProps) {
   const { label, summary, onClear, children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
   const clearLabel = props.clearLabel ?? useLoticsLocale().filterChip.clear;
   const active = summary != null && (typeof summary !== "string" || summary.length > 0);
-  // The clear × / Clear footer only when there's a clearable selection AND no
-  // custom footer — a valued, non-clearable pill ("Target: 20") keeps its chevron.
-  const showClear = active && !!onClear && !footer;
+  // THE × IS THE CLEAR, and it is the only one. A valued, non-clearable pill
+  // ("Target: 20") keeps its chevron.
+  //
+  // There used to be a baked Clear in the popover footer as well, and it was a
+  // duplicate that cost a whole extra band. The editors this pill is built for
+  // bring their own bottom actions — an `OptionList` with `enableSelectAll`
+  // renders "Select all / Deselect all" in a bordered band of its own — so the
+  // popover ended with TWO stacked rules whose lower one held a single button
+  // that "Deselect all" directly above it already performed. Measured on a live
+  // filter: bands at 49px and 47px, each with its own 1px top border.
+  //
+  // The × is also the more discoverable of the two: it sits on the pill, which
+  // is on screen whether or not the popover is open, and it carries `clearLabel`
+  // as its tooltip. The footer button was reachable only by opening the panel
+  // first. A custom `footer` (Cancel / Save) no longer suppresses it either —
+  // that coupling meant a Save-footer pill silently lost its clear.
+  const showClear = active && !!onClear;
 
   // Own the open state so the editor can close itself via the render-prop
   // `close`, while still honoring a controlled `open`/`onOpenChange` from the
@@ -112,13 +132,7 @@ export function FilterChip(props: FilterChipProps) {
       </PopoverTrigger>
       <PopoverContent style={styles.body} disableBodyScroll>
         {typeof children === "function" ? children({ close: () => setOpen(false) }) : children}
-        {footer ? (
-          <PopoverFooter>{footer}</PopoverFooter>
-        ) : showClear ? (
-          <PopoverFooter align="start">
-            <Button title={clearLabel} color="muted" onPress={onClear} />
-          </PopoverFooter>
-        ) : null}
+        {footer ? <PopoverFooter>{footer}</PopoverFooter> : null}
       </PopoverContent>
     </Popover>
   );
@@ -126,9 +140,9 @@ export function FilterChip(props: FilterChipProps) {
 
 const styles = StyleSheet.create({
   // The popover hugs its content — a wide control (e.g. Slider) sets its
-  // OWN fixed width; the shell never forces one. No extra padding: the editor and
-  // the Clear footer then share the popover's own 8px inset, so a multi-select's
-  // options, its select-all, and the Clear all line up on one left edge.
+  // OWN fixed width; the shell never forces one. No extra padding: the editor
+  // then sits on the popover's own 8px inset, so a multi-select's options and
+  // its select-all band line up on one left edge.
   body: {
     gap: 8,
   },

package/src/kpi_card.tsx

@@ -3,6 +3,7 @@ import { Text } from "./text";
 import { Metric, type MetricFormat, type MetricSize, type MetricTone } from "./metric";
 import { TrendChip } from "./trend_chip";
 import { InfoPopover } from "./info_popover";
+import { useLoticsLocale } from "./locale";
 import { SPACE } from "./spacing";
 
 interface KPICardProps {
@@ -50,13 +51,16 @@ interface KPICardProps {
  */
 export function KPICard(props: KPICardProps) {
   const { label, value, format, currency, locale, emptyLabel, compact, size = "lg", tone, trend, caption, info, style } = props;
+  // `pack`, not `locale` — that name is taken by the BCP-47 tag this card passes
+  // to `Metric` for number formatting, which is a different axis entirely.
+  const pack = useLoticsLocale();
   return (
     <View style={[styles.container, style]}>
       <View style={styles.labelRow}>
         <Text size="xs" color="muted" transform="uppercase">
           {label}
         </Text>
-        {info ? <InfoPopover text={info} accessibilityLabel={`About ${label}`} /> : null}
+        {info ? <InfoPopover text={info} accessibilityLabel={pack.infoPopover.about(label)} /> : null}
       </View>
       <View style={styles.valueRow}>
         <Metric

package/src/locale.tsx

@@ -164,8 +164,27 @@ export interface LoticsLocale {
   /** `ImageGallery`: the empty state, the inline rotate controls, and the
    *  press-to-zoom a11y name. */
   imageGallery: { empty: string; rotateLeft: string; rotateRight: string; zoom: string };
-  /** `InfoPopover`: the ⓘ trigger's a11y name. */
-  infoPopover: { more: string };
+  /** `InfoPopover`: the ⓘ trigger's a11y name. `more` is the bare default;
+   *  `about` names the SUBJECT, which is what a screen a11y reader needs when a
+   *  page carries several ⓘ buttons and "More information" is said four times. */
+  infoPopover: { more: string; about: (label: string) => string };
+  /** `FileRow` / `Sources`: the door onto one file or one cited source. Two
+   *  slices rather than one shared verb, because a pack may open a FILE and open
+   *  a SOURCE with different words. */
+  fileRow: { open: (name: string) => string };
+  sources: { open: (label: string) => string; heading: string };
+  /** `Counter`: the two steppers, named for the value they move. */
+  counter: { decrease: (label: string) => string; increase: (label: string) => string };
+  /** `AllocationRow`: the a11y name of the amount input (naming its destination),
+   *  the outstanding-amount caption, and the two fill/empty verbs. */
+  allocationRow: {
+    allocateTo: (label: string) => string;
+    due: (amount: string) => string;
+    clear: string;
+    full: string;
+  };
+  /** `ColumnFilter`: the two bounds of a numeric range, named for their column. */
+  columnFilter: { min: (label: string) => string; max: (label: string) => string };
   /** `Matrix`: the total column/row header and the legend's less→more ends. */
   matrix: { total: string; less: string; more: string };
   /** `ScrollToBottom`: the jump-to-latest tooltip. */
@@ -209,8 +228,17 @@ export interface LoticsLocale {
    *  value only the call site knows, the same split `referenceField.open` draws. */
   copyButton: { copy: string; copied: string };
   /** `CommentsButton`'s accessible name — the kit owns the noun so one surface
-   *  does not say "comments" while the next says "notes" for the same thread. */
-  commentsButton: { comment: string; comments: string };
+   *  does not say "comments" while the next says "notes" for the same thread.
+   *  `withSubject` builds the WHOLE phrase, so a pack chooses the word ORDER and
+   *  not merely the vocabulary: the subject leads in some languages, and a
+   *  component that concatenates in English order cannot be translated into one.
+   *  It joins with a WORD because this string exists to be read aloud, and a
+   *  screen reader drops punctuation, taking the relation with it. */
+  commentsButton: {
+    comment: string;
+    comments: string;
+    withSubject: (counted: string, subject: string) => string;
+  };
 }
 
 /** The platform default — English. Every component's hardcoded default lives
@@ -329,7 +357,17 @@ export const en: LoticsLocale = {
     retryAll: "Retry all",
   },
   imageGallery: { empty: "No images.", rotateLeft: "Rotate left", rotateRight: "Rotate right", zoom: "Zoom image" },
-  infoPopover: { more: "More information" },
+  infoPopover: { more: "More information", about: (label) => `About ${label}` },
+  fileRow: { open: (name) => `Open ${name}` },
+  sources: { open: (label) => `Open ${label}`, heading: "Sources" },
+  counter: { decrease: (label) => `Decrease ${label}`, increase: (label) => `Increase ${label}` },
+  allocationRow: {
+    allocateTo: (label) => `Allocate to ${label}`,
+    due: (amount) => `${amount} due`,
+    clear: "Clear",
+    full: "Full",
+  },
+  columnFilter: { min: (label) => `${label} min`, max: (label) => `${label} max` },
   matrix: { total: "Total", less: "Less", more: "More" },
   scrollToBottom: { tooltip: "Scroll to bottom" },
   textInputField: { clear: "Clear" },
@@ -366,7 +404,11 @@ export const en: LoticsLocale = {
   approvalPrompt: { message: "The assistant wants to perform an action that needs your approval.", approve: "Approve", deny: "Deny" },
   messageActions: { copy: "Copy", copied: "Copied", regenerate: "Regenerate", edit: "Edit", previousVersion: "Previous version", nextVersion: "Next version" },
   copyButton: { copy: "Copy", copied: "Copied" },
-  commentsButton: { comment: "comment", comments: "comments" },
+  commentsButton: {
+    comment: "comment",
+    comments: "comments",
+    withSubject: (counted, subject) => `${counted} on ${subject}`,
+  },
 };
 
 /** Vietnamese. Maintained once here so every app (and the frontend) shares one
@@ -482,7 +524,22 @@ export const vi: LoticsLocale = {
     retryAll: "Thử lại tất cả",
   },
   imageGallery: { empty: "Chưa có ảnh.", rotateLeft: "Xoay trái", rotateRight: "Xoay phải", zoom: "Phóng to ảnh" },
-  infoPopover: { more: "Thông tin thêm" },
+  infoPopover: { more: "Thông tin thêm", about: (label) => `Thông tin về ${label}` },
+  fileRow: { open: (name) => `Mở ${name}` },
+  sources: { open: (label) => `Mở ${label}`, heading: "Nguồn" },
+  counter: { decrease: (label) => `Giảm ${label}`, increase: (label) => `Tăng ${label}` },
+  allocationRow: {
+    allocateTo: (label) => `Phân bổ vào ${label}`,
+    // The word LEADS in Vietnamese and trails in English — "còn 5.000.000 ₫"
+    // against "5,000,000 ₫ due". A pack-owned function is the only shape that
+    // expresses both.
+    due: (amount) => `còn ${amount}`,
+    clear: "Xoá",
+    full: "Toàn bộ",
+  },
+  // The qualifier FOLLOWS the noun in Vietnamese — "Doanh thu tối thiểu", never
+  // "tối thiểu Doanh thu". Exactly what a pack-owned function is for.
+  columnFilter: { min: (label) => `${label} tối thiểu`, max: (label) => `${label} tối đa` },
   matrix: { total: "Tổng", less: "Ít", more: "Nhiều" },
   scrollToBottom: { tooltip: "Cuộn xuống cuối" },
   textInputField: { clear: "Xóa" },
@@ -519,7 +576,11 @@ export const vi: LoticsLocale = {
   approvalPrompt: { message: "Trợ lý muốn thực hiện thao tác cần bạn duyệt.", approve: "Cho phép", deny: "Từ chối" },
   messageActions: { copy: "Sao chép", copied: "Đã sao chép", regenerate: "Tạo lại", edit: "Chỉnh sửa", previousVersion: "Phiên bản trước", nextVersion: "Phiên bản sau" },
   copyButton: { copy: "Sao chép", copied: "Đã sao chép" },
-  commentsButton: { comment: "bình luận", comments: "bình luận" },
+  commentsButton: {
+    comment: "bình luận",
+    comments: "bình luận",
+    withSubject: (counted, subject) => `${counted} về ${subject}`,
+  },
 };
 
 const LoticsLocaleContext = createContext<LoticsLocale>(en);

package/src/peek.tsx

@@ -33,7 +33,8 @@ export function Peek(props: PeekProps) {
     <Popover side={side} align={align}>
       <PopoverTrigger>
         <PressableHighlight
-          focusRing          accessibilityRole="button"
+          focusRing
+          accessibilityRole="button"
           accessibilityLabel={accessibilityLabel}
           style={styles.trigger}
           // 32px visual, 40px touch target (32 + 2×4) — same as IconButton.

package/src/pressable_highlight.tsx

@@ -71,12 +71,14 @@ export interface PressableHighlightProps extends PressableProps {
  * A pressable component that highlights when hovered and pressed.
  * It will darken the `backgroundColor` prop when hovered and pressed.
  *
- * It IS a button and it WRAPS its children — so its content must be non-interactive by
- * construction. A row whose content carries its own controls (a CTA, a ⋯ menu, a
- * checkbox, a `Link`) must not be built on it: a button cannot contain interactive
- * descendants. Compose the role-less `PressableRow` + a `PressDoor` sibling instead —
- * the surface takes the mouse, the door takes the keyboard, the controls stay their own
- * tab stops (`TableRow` is the reference).
+ * It IS a button — it says so itself, with `accessibilityRole="button"` by default —
+ * and it WRAPS its children, so its content must be non-interactive by construction.
+ * A row whose content carries its own controls (a CTA, a ⋯ menu, a checkbox, a
+ * `Link`) must not be built on it: a button cannot contain interactive descendants.
+ * Compose the role-less `PressableRow` + a `PressDoor` sibling instead — the surface
+ * takes the mouse, the door takes the keyboard, the controls stay their own tab stops
+ * (`TableRow` is the reference). That role split IS the difference between the two
+ * components, which is why neither leaves it to the call site.
  */
 export function PressableHighlight(props: PressableHighlightProps) {
   const {
@@ -122,6 +124,15 @@ export function PressableHighlight(props: PressableHighlightProps) {
         ] as StyleProp<ViewStyle>;
       }}
       onPress={handlePress}
+      // THE ROLE IS THE CONTRACT, so it is set here rather than asked for at every
+      // call site. This component IS a button — that is what separates it from the
+      // role-less `PressableRow`, and it is why its children must be
+      // non-interactive. Left to the call sites the split existed only in prose:
+      // 18 of 35 passed the role, all 18 passed "button", and the other 17
+      // rendered a surface a screen reader could name but not identify as
+      // pressable. Before the spread, so a caller that genuinely means something
+      // else still wins.
+      accessibilityRole="button"
       {...restPressableProps}
       // `onFocus` / `onBlur` are part of `PressableProps`, so a trailing
       // `{...tooltipProps}` spread would silently overwrite caller-provided

package/src/scroll_to_bottom.tsx

@@ -17,7 +17,8 @@ export function ScrollToBottom(props: ScrollToBottomProps) {
 
   return (
     <PressableHighlight
-      focusRing      testID="scroll-to-bottom-button"
+      focusRing
+      testID="scroll-to-bottom-button"
       tooltip={tooltip}
       onPress={onPress}
       style={styles.button}

package/src/sources.tsx

@@ -3,6 +3,7 @@ import { colors, solid, tint, type ColorName } from "./colors";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
+import { useLoticsLocale } from "./locale";
 
 export type SourceKind = "record" | "document" | "table" | "web" | "knowledge";
 
@@ -43,18 +44,19 @@ const KIND: Record<SourceKind, { icon: IconName; color: ColorName }> = {
  * Renders nothing for an empty list.
  */
 export function Sources(props: SourcesProps) {
+  const locale = useLoticsLocale();
   if (props.sources.length === 0) return null;
   return (
     <View style={{ gap: 8 }}>
       {props.label === null ? null : (
         <Text size="xs" color="muted" weight="medium">
-          {props.label ?? "Sources"}
+          {props.label ?? locale.sources.heading}
         </Text>
       )}
       <View style={styles.row}>
         {props.sources.map((s) =>
           props.onOpen ? (
-            <PressableHighlight focusRing key={s.id} onPress={() => props.onOpen?.(s)} accessibilityLabel={`Open ${s.label}`} style={styles.chip}>
+            <PressableHighlight focusRing key={s.id} onPress={() => props.onOpen?.(s)} accessibilityLabel={locale.sources.open(s.label)} style={styles.chip}>
               <SourceChip source={s} openable />
             </PressableHighlight>
           ) : (

package/src/status_grid.tsx

@@ -131,7 +131,8 @@ export function StatusLegend(props: StatusLegendProps) {
         );
         return onSelect ? (
           <PressableHighlight
-            focusRing            key={state.key}
+            focusRing
+            key={state.key}
             accessibilityRole="button"
             // The W3C prop — `accessibilityState` is dropped by this react-native-web
             // build, and `selected` has no meaning on a `button` role regardless.

package/src/summary_line.tsx

@@ -3,6 +3,7 @@ import { Text } from "./text";
 import { Metric, type MetricFormat, type MetricTone } from "./metric";
 import { TrendChip } from "./trend_chip";
 import { InfoPopover } from "./info_popover";
+import { useLoticsLocale } from "./locale";
 
 export interface SummaryLineItem {
   /** Label that reads AFTER the value ("below minimum", "stock value"). */
@@ -49,6 +50,7 @@ export interface SummaryLineProps {
  */
 export function SummaryLine(props: SummaryLineProps) {
   const { items } = props;
+  const locale = useLoticsLocale();
   return (
     <View style={styles.row}>
       {items.map((item) => (
@@ -67,7 +69,7 @@ export function SummaryLine(props: SummaryLineProps) {
             {item.label}
           </Text>
           {item.trend != null ? <TrendChip value={item.trend} /> : null}
-          {item.info ? <InfoPopover text={item.info} accessibilityLabel={`About ${item.label}`} /> : null}
+          {item.info ? <InfoPopover text={item.info} accessibilityLabel={locale.infoPopover.about(item.label)} /> : null}
         </View>
       ))}
     </View>

package/src/switch_button.tsx

@@ -16,7 +16,8 @@ export function SwitchButton(props: SwitchButtonProps) {
 
   return (
     <PressableHighlight
-      focusRing      style={{
+      focusRing
+      style={{
         flexDirection: "row",
         gap: 16,
         alignItems: "center",