@lotics/ui 9.0.0 → 11.0.0

package/AGENTS.md

@@ -1,5 +1,13 @@
 # @lotics/ui — the UI reference
 
+> **Upgrading to v11 from ≤10.x — the type scale was re-slotted.** The display sizes gained the
+> missing `##` step: `xl` is now 22/24 (section title), `xxl` is 28/32 (page/record title — the
+> OLD `xl` look), and the new `xxxl` is 32/48 (hero numbers — the OLD `xxl` look). Migrate an
+> app with two renames IN THIS ORDER: first `size="xxl"` → `size="xxxl"`, then `size="xl"` →
+> `size="xxl"` — every existing usage keeps its exact look. Also: `SectionHeadingTitle` is now
+> ALWAYS `##` (22/24), and disabled `Button`s fade their label to the zinc-400 disabled ink on
+> every variant.
+
 A React-Native-Web component kit (renders on web **and** native). This file is the design
 law + the "reach for what" guide. The **exact API** of any component is its source, which
 ships with the package: read `node_modules/@lotics/ui/src/<name>.tsx`. **Never guess a prop —
@@ -12,6 +20,10 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
   `PortalHost` at the app root.
 - RN-Web only: `View`/`ScrollView` from `react-native`, the `Text` primitive (no raw
   `div`/`span`, no raw `fontSize`/`fontWeight`); styles are RN objects.
+- Fonts: the app entry imports the Inter sheet ONCE — `import "@lotics/ui/fonts.css"` (400/500/600,
+  served by absolute URL so it resolves on every origin an app runs from) — or every `Text` falls
+  back to system fonts. File picking: `pickFiles` (`@lotics/ui/file_picker`) opens the browser
+  picker and resolves the chosen `File[]` — the imperative half behind every Add-file CTA.
 - i18n: most components are string-free. For the rest, set the language ONCE at the root with
   **`LoticsLocaleProvider`** (`@lotics/ui/locale`, the sibling of `LoticsThemeProvider`) — wrap
   `<LoticsLocaleProvider locale={vi}>` and every wired component picks up the pack, no per-instance
@@ -117,7 +129,12 @@ Pick by capability, not by name. (→ the source file for the API.)
   row/column/grand totals; press a cell to drill).
 - **Surfaces & layout** — `Card` (+ `CardHeader`/`CardHeaderTitle`/`CardHeaderMeta`/`CardBody`/
   `CardFooter`), `Section` (the card-less twin of `Card`: bare gap-spaced region + `SectionHeading`/
-  `SectionHeadingTitle`/`SectionHeadingMeta`; no body component — children are the body), `SectionCard`,
+  `SectionHeadingTitle`/`SectionHeadingMeta`; no body component — children are the body;
+  ), `Subsection` (+ `SubsectionHeading`/
+  `SubsectionHeadingTitle` — the named group INSIDE a section, `###` lg-semibold title),
+  `SectionStack` (the flat page's content column — owns the fixed 56px beat + hairline between
+  top-level blocks), `SubsectionStack` (the same law one step tighter — fixed 24px beat +
+  hairline between a section's `Subsection` groups), `SectionCard`,
   `PageHeader` /
   `PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `SegmentedControl`, `Stepper`,
   `DangerZone` (the destructive section — delete/archive — set apart at the bottom of a record/settings surface).
@@ -651,19 +668,32 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
 - **Canvas**: full-bleed `colors.zinc[50]` ScrollView; content column `maxWidth` 880–1040,
   centered, `padding: 28`. Cards float on the canvas — never white-on-white.
 - **Heading vocabulary — ONE construct per altitude, no drift.**
-  · **Page band**: one per screen — `Text size="xl" weight="semibold"` title + one `sm muted`
+  · **Page band**: one per screen — `Text size="xxl" weight="semibold"` title (`#`) + one `sm muted`
     subtitle that says what the screen decides. Right side: the screen's ONE primary action and/or
     a period filter — never a summary Badge (those belong to the KPI strip).
   · **Card header** (a card's own title band, or separate banded cards): `CardHeader` +
     `CardHeaderTitle` (`sm semibold`; `info` when the title alone doesn't define the numbers).
   · **Section title** — ONE construct: `Section` > `SectionHeading` > `SectionHeadingTitle`
     (lg semibold + optional muted `description`/`info`), everything left-aligned at the column
-    edge. The `Divider` goes BETWEEN sections (page column `gap: 32`, a bare hairline separating
-    one section from the next) — NEVER directly under the heading, which orphans the title from
-    its own content. Inside a DRAWER, a full multi-section WORKSPACE uses the real
+    edge. The page column is a `SectionStack` — it owns the between-section law (`gap: 32` +
+    a bare hairline separating one section from the next); the `Divider` NEVER goes directly
+    under the heading, which orphans the title from its own content. Inside a DRAWER, a full
+    multi-section WORKSPACE uses the real
     `SectionHeading` (lg) — its meta + CTA slots carry each section's count and action; a
     `Text size="sm" weight="semibold"` stand-in is only for small sub-groups. Do NOT wrap each section in its own `CardHeader`, do NOT
     hand-roll sm-semibold lead lines on a flat page. NEVER a bare eyebrow as a section title.
+  · **The heading ramp is FIXED — the markdown ladder, no size knobs.** `#` = xxl
+    (`RecordSummary` / `PageHeader` title) → `##` = xl (`SectionHeadingTitle`, always) →
+    `###` = lg (`SubsectionHeadingTitle`, always) → body sm. One outline on every surface;
+    never restyle a heading level per-page.
+  · **Subsection title** — the level BELOW a section on a long record surface: `Subsection` >
+    `SubsectionHeading` > `SubsectionHeadingTitle` (`###` lg semibold; siblings — a `Badge`, a
+    `SectionHeadingMeta`, an action — ride the heading row's right edge). Sibling subsections
+    stack in a `SubsectionStack` (24 + hairline between groups — no margins, no hand-rolled
+    dividers); a headingless `Subsection` is the section's lead group. Group leads INSIDE a
+    subsection's rows are `md medium` at most. Do NOT hand-roll `Text weight="semibold"` group
+    leads inside a section, and never promote a subsection to its own section-level heading
+    just to separate it.
   · **Eyebrow / label** (`<Text size="xs" color="muted" weight="medium">` — **sentence case, NEVER
     `transform="uppercase"`**): a small quiet label above or beside content — an artifact tag
     ("Proposed", "Question", "Suggested edit"), a field name, a metric caption, a minor one-line
@@ -1013,14 +1043,15 @@ recipe for a screen JOB; copy and adapt). Pick by the job:
 text ·
 markdown (Markdown — the single canonical markdown renderer for chat, apps, and `AgentRun`; rich on web via react-markdown/remark-gfm with copyable tables, plain-text on native; takes a markdown `children` string; import `@lotics/ui/markdown.css` once for styling) ·
 card (Card · CardHeader · CardHeaderTitle · CardHeaderMeta · CardBody · CardFooter) ·
-section_heading (Section · SectionHeading · SectionHeadingTitle · SectionHeadingMeta — the card-less twin of the Card family, compound, owns no margin; spacing via the Section gap, no body component. `SectionHeadingTitle` takes `weight` medium|semibold — default medium, `semibold` for dense surfaces (a side panel, a stacked group list) where medium blends into the body, matching `CardHeaderTitle`; + `info` for an ⓘ provenance popover after the title, same as `CardHeaderTitle.info`) · badge ·
+section_heading (Section · SectionHeading · SectionHeadingTitle · SectionHeadingMeta · Subsection · SubsectionHeading · SubsectionHeadingTitle — the card-less twin of the Card family, compound, owns no margin; spacing via the Section gap (12, fixed), no body component. `SectionHeadingTitle` is ALWAYS `##` (xl semibold; `weight="medium"` opt-down only) + `info` for an ⓘ provenance popover after the title, same as `CardHeaderTitle.info`. `SubsectionHeadingTitle` is the `###` lg-semibold level-3 title of a named group inside a section — heading-row siblings ride its right edge; the heading ramp is FIXED: # xxl / ## xl / ### lg, no size props) ·
+section_stack (SectionStack · SubsectionStack — divided stacks that own the between-block law: a fixed beat + hairline Divider BETWEEN blocks, skipping null children (56 for the flat page's Sections, 24 for a section's Subsections); stop hand-rolling gap + `<Divider />` pairs) · badge ·
 option_badge (OptionBadge — a select value as its configured colored badge) ·
 member_chip (MemberChip — avatar + name; the universal person render) ·
 member_select (MemberSelect — a Picker of MemberChip options; the member picker) ·
 status_badge · button · icon_button · link · text_link (TextLink — underlined text that's optionally an `onPress` action or an `href` link, or plain underlined text to wrap in your own pressable; the neutral counterpart to the fixed-blue `Link`) · chip (Chip — the generic pill: pressable when `onPress` (announces as a button; pass `accessibilityLabel` when children aren't self-describing text) + an absolutely-positioned dismiss ✕ sibling when `onDismiss` (its name = `dismissTooltip` ?? the `chip.remove` locale slice). Suggestion pills → `SuggestionChip`) · tabs (Tabs — switch between content sections; WAI-ARIA tablist + roving tabindex; each TabOption takes an optional `status` ColorName → a small attention dot before its label, for a tab whose area needs work) · segmented_control ·
 picker (native `<select>`, plain label-only single) · select (Select — rich/custom-rendered, single/multi, select-all, chips via `renderSelected` + `searchable` + `allowCustom` — the tag field is just a multi Select; opens `OptionList`) · option_list (OptionList — the ONE shared searchable listbox body every selector opens: single/multi, optional internal search, create row, keyboard + native-`<select>` typeahead; host it directly in a `Popover`/`Dialog` for a command palette) · combobox (COMPOUND single-select editable search: `Combobox` root + `ComboboxInput` + `ComboboxContent`, optional `ComboboxEmpty`/`ComboboxFooter`, `useCombobox()`; over the shared `useOptionList` engine; browses on focus; no `multi` — multi-value chips → `Select multi`) ·
 text_input_field · number_input · search_input · form_field · checkbox · checkbox_input · switch ·
-radio_picker · counter · range_slider · date_picker · date_range_filter_field · time_picker ·
+radio_picker · counter · range_slider · date_picker · date_range_filter_field · date_calendar (Calendar — the bare month grid: `mode="single"` or `"range"` ({start,end} — two months side by side on desktop), month/year pickers + arrows, localized weekday/month names via BCP-47 `locale`, `firstDayOfWeek` (default Monday), `ref.navigateToMonth`. The engine DatePicker/DateFilter wrap in field chrome — reach for it bare only when the calendar lives permanently on the surface, not behind a field) · form_switch (FormSwitch — the FormField-labeled twin of `Switch`: toggle + clickable `label` (pressing it flips the value) + optional `description`/`error`; the settings-form boolean row. A bare toggle in a cell/toolbar → `Switch`; a full-row menu toggle → `SwitchButton`) · form_text_input (FormTextInput — `FormField` (label / description / error / optional) wrapping a `TextInputField`; the one-line labeled text field. Controls without a Form* twin just wrap in `FormField`) · switch_button (SwitchButton — the full-ROW toggle: a PressableHighlight row (optional icon + medium title left, `Switch` pinned right) where the whole row IS the switch (`accessibilityRole="switch"`, the inner Switch read-only). The settings-panel/menu row toggle; vs `Switch` (bare control) and `FormSwitch` (form stack)) · use_form (useForm — THE batch draft-form state hook: `values` = `initialValues` + an edits overlay (a revalidation refreshes untouched fields, no sync effect), `validate` (sync/async, gates submit, editing clears the field's error), `onSubmit(values, helpers)` with a re-entry-guarded `submitting`, and `changes`/`changed` — the touched-fields diff that feeds DIFF-writes (send only edited fields); `setFieldValue` (curried or direct) + `setValues`/`setFieldError`/`reset`. Pairs with the Form* family for dialog/settings forms — the draft-validate-COMMIT-together twin of the self-persisting Inline* editors) · time_picker ·
 inline_text_input · inline_number_input · inline_select · inline_member_select · inline_date_picker ·
 inline_time_picker (the Inline* family — per-field editors on `inline_edit`'s `useInlineEdit` +
 `InlineEditView`; `InlineSelect`/`InlineMemberSelect` render the resting value like its option — `renderOptionContent` by default, `renderSelected` to override — a chip/badge at rest, not just text) ·
@@ -1031,14 +1062,14 @@ check_circle (CheckCircle — the completion ring: an empty ring that springs to
 floating_action_bar · filter_chip · column_filter (ColumnFilter — the typed per-column filter pill +
 columnFilterToConditions; for a register filtering on several columns) · chip_group · search_input ·
 sort_header · table · data_grid (DataGrid — the inline-managed grouped table: a grouped, sortable grid of LIVE inline-editor cells (`columns[].cell` → ANY field) + optional per-row `leading` (a CheckCircle) + `renderGroupFooter` (per-group add, align with the exported `gridRowStyle`) + `labels` (localize the sort-header a11y via `SortHeaderLabels`). Owns header/sections/rows; consumer owns data + sort/group/filter/collapse state + toolbar. Renders ALL rows — MODERATE data; 10k+ → the paginated `Table` register. Example: `tpl_task_board`) · pagination · accordion · stepper (Stepper + Step — done/current/upcoming/warning/complete progress on a track (horizontal) or spine (vertical); compound `<Step status>children` OR data `steps[]`+`current`; **navigable** via `Step.onPress` (both orientations — the whole step is the tap target) + `active` to wash the selected one, so it doubles as a section/phase switcher; the guided-run / agent-feed primitive — subsumes the old StepList) ·
-step_progress · timeline (heterogeneous event LOG — per-row icon + expandable details, models the past; NOT progress) · drawer (+ DrawerFooter) · dialog · modal (Modal + ModalHeader + ModalBody + ModalFooter — the full-bleed, edge-to-edge takeover: an OPAQUE surface that COVERS THE WHOLE SCREEN, so unlike Dialog (centered card WITH scrim) and Drawer (docked panel WITH scrim) there is nothing behind it to dim — NO scrim, NO backdrop. Lays children as a flex column: a pinned ModalHeader (eyebrow/title + an actions slot + close), a flex:1 scrolling ModalBody, a pinned ModalFooter (the commit bar, same chrome as DialogFooter/DrawerFooter). Reach for it for a focused capture / multi-step wizard / a console the user steps INTO, where surrounding chrome is a distraction; pick Dialog when the surface is a card the user can see context around) · screen_router (ScreenRouter + Screen + useScreenRouter — the SCREENS compound: a flat navigation stack (`navigate("/case/:id")` pushes, `goBack` pops, `canGoBack`, route `params`; stacked screens stay mounted `display:none` so scroll survives the round trip). Dialog BAKES a router in (`<Dialog><Screen route="">…`); ANY other container hosts the standalone `<ScreenRouter>` — and it wraps AROUND the container so the CHROME can read the stack: a Drawer drilling into a LINKED record swaps its header to a BACK IconButton + the pushed record's id while `canGoBack` (sequence ◀ ▶ hides — stepping the root from inside a linked record disorients), and the pushed `<Screen route="/case/:id">` is a REAL editable workspace with its own footer CTAs. Key the router by record id so stepping ◀ ▶ resets the stack. Worked example: `tpl_item_list` drawer) · popover · tooltip ·
+step_progress · timeline (heterogeneous event LOG — per-row icon + expandable details, models the past; NOT progress) · drawer (+ DrawerFooter) · dialog · modal (Modal + ModalHeader + ModalBody + ModalFooter — the full-bleed, edge-to-edge takeover: an OPAQUE surface that COVERS THE WHOLE SCREEN, so unlike Dialog (centered card WITH scrim) and Drawer (docked panel WITH scrim) there is nothing behind it to dim — NO scrim, NO backdrop. Lays children as a flex column: a pinned ModalHeader (eyebrow/title + an actions slot + close), a flex:1 scrolling ModalBody, a pinned ModalFooter (the commit bar, same chrome as DialogFooter/DrawerFooter). Reach for it for a focused capture / multi-step wizard / a console the user steps INTO, where surrounding chrome is a distraction; pick Dialog when the surface is a card the user can see context around) · screen_router (ScreenRouter + Screen + useScreenRouter — the SCREENS compound: a flat navigation stack (`navigate("/case/:id")` pushes, `goBack` pops, `canGoBack`, route `params`; stacked screens stay mounted `display:none` so scroll survives the round trip). Dialog BAKES a router in (`<Dialog><Screen route="">…`); ANY other container hosts the standalone `<ScreenRouter>` — and it wraps AROUND the container so the CHROME can read the stack: a Drawer drilling into a LINKED record swaps its header to a BACK IconButton + the pushed record's id while `canGoBack` (sequence ◀ ▶ hides — stepping the root from inside a linked record disorients), and the pushed `<Screen route="/case/:id">` is a REAL editable workspace with its own footer CTAs. Key the router by record id so stepping ◀ ▶ resets the stack. Worked example: `tpl_item_list` drawer) · popover · popover_nav (usePopoverNav + PopoverScreen + PopoverNavHeader — the popover's built-in mini-router: EVERY `Popover` provides the nav context (`navigate(route)` pushes, `goBack`, `currentRoute`, `canGoBack`; resets on close), `PopoverScreen route=""` is the root and screens render conditionally (unmounted when inactive — no scroll preservation), `PopoverNavHeader` is the title row whose back chevron auto-appears while `canGoBack` (`right` slot, `backLabel`). For a multi-screen menu inside ONE popover (an avatar/settings menu drilling into a sub-panel); route PATTERNS, `params`, and stacked-alive screens are `screen_router`'s job. Distinct from `Popover`'s plain `PopoverHeader` children container) · tooltip ·
 alert · peek · empty_state · completion_state · callout (Callout · CalloutTitle ·
 CalloutText · CalloutActions) · kpi_card · kpi_strip · 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) · metric · trend_chip · sparkline ·
 bar_chart · line_chart · pie_chart · ring_gauge · progress_bar · stacked_progress_bar · breakdown ·
 funnel (Funnel — conversion funnel: narrowing bars + the step rate as a bold aligned headline row, count below; `orientation` vertical|horizontal, `onSelect`/`selectedKey` press-to-drill; the subset/drop-off sibling of stacked_progress_bar's whole-split) ·
 status_grid (StatusGrid + StatusLegend) · heatmap (density cross-tab — colour-only, no numbers) · matrix (Matrix — the PIVOT cross-tab: band-compound `Matrix` root + `Matrix.Header` (corner + axis labels) + `Matrix.Grid` (`display` number|heat|both — the cells, pressable, the value IN the cell) + `Matrix.Totals` (row + column + grand) + `Matrix.Legend`; the data layer `matrixTotals`/`MatrixAxisItem`/`MatrixCellRef` import from `@lotics/ui/matrix_totals`. Pick over `Heatmap` when the NUMBER and totals matter, not just where it clusters) · legend_item · remainder_meter · allocation_row ·
 scan_field · file_dropzone · files_editor (FilesEditor — THE all-in-one attachment field: FileGrid + a toolbar (Upload primary · Select · Download all) that swaps into a batch SELECT mode (Select all · a Menu of Download/Share/Delete · Done; the per-tile ✕ is select-mode-only, never in the default view; `selectTileRemove={false}` drops even that so delete is menu-only) + built-in gallery (Download + inline preview; no "open in new tab") + Alert-confirmed remove; host wires `files` + `onAdd`/`onRemove` (+ optional `uploads`, `onShareSelected`, `readOnly`, `selectTileRemove`, `labels`, `galleryLabels`, `gridMaxHeight` — cap the grid height so it scrolls and the toolbar pins, for a popover/drawer); mirrors the frontend cell_files_editor. Use FileGrid/FileRows bare only when you own the chrome) · file_grid (FileGrid — the upload-aware grid: completed files + a live upload queue in one surface; FileUpload/PendingUpload types; the add-files default) · uploading_thumbnail (UploadingThumbnail — the single in-flight upload tile FileGrid renders; reach for it only when hand-rolling a non-grid upload layout) · file_thumbnail · file_thumbnail_grid · file_row · file_rows (FileRows — batteries-included file list: row press → built-in gallery + a ⋯ Download/Open-external/Remove menu; composes FileRow + ActionMenu + FileGalleryModal) · file_preview (FilePreview — the universal inline preview: image/PDF/video/audio + Word via `@lotics/docx` + Excel/CSV via `@lotics/xlsx`; the heavy engines (pdf.js · `@lotics/docx` · `@lotics/xlsx`) are LAZY (dynamic-imported, ~free until a doc of that type is opened) and SHIP AS `@lotics/ui` deps (7.14.0+) — custom-code apps get PDF/Word/Excel preview with ZERO extra install. Renders to canvas/DOM, never a nested iframe — works in the sandboxed app iframe) ·
-file_gallery_modal · image_gallery · use_selection (useSelection — always-on multi-select state for a register/list: the `selected` Set + `toggle`/`setAll`/`allSelected`/`indeterminate`/`count`/`clear`; selectability gating stays with the caller. The checkbox-always-visible counterpart to `use_selection_mode`) · use_selection_mode · use_section_nav (useSectionNav — scroll-spy for a LONG record surface with a left outline rail: keys in page order → {scrollRef, onScroll, register(key)→onLayout, jumpTo(key), activeKey}; rail items are `MenuButton`s (selected={activeKey===key}); section wrappers must be DIRECT children of the ScrollView content. On NARROW containers the rail becomes a PINNED bar naming the CURRENT section (the spy keeps it honest) that opens a full-page section-picker `Modal` (`MenuButton` list; Escape / the close control dismiss) — never a horizontal tab strip the thumb has to scroll. Worked example: `tpl_record`) · share_or_download · rotate_image · avatar · skeleton · activity_indicator · loading · divider ·
+app_icon (AppIcon — the app's launcher tile: a brand-gradient square from a `themeColor` palette token (unknown → neutral zinc) holding any Lucide icon by runtime name via DynamicIcon; `size` sm|md. One render wherever an app shows — launcher, list, picker, settings) · dynamic_icon (DynamicIcon — any Lucide icon by RUNTIME name (kebab-case string), for user/config-chosen icons a compile-time `IconName` can't express; web lazy-loads per icon, unknown name → blank. Decorative — the enclosing control carries the accessible name. A fixed, code-chosen glyph → `Icon`) · group_avatar (GroupAvatar — the first letter of `name` in a zinc rounded square (`size`, default 40); the avatar for image-less entities — groups, organizations. A person → `Avatar`/`MemberChip`) · rotatable_image (RotatableImage — an image rotating in 90° steps that REFITS: at a quarter turn the box lays out in SWAPPED dimensions then rotates into place, so a rotated landscape fills the frame; the VIEW half of image rotation — `rotate_image` bakes the pixels for re-upload; FilePreview/ImageGallery compose it) · file_preview_types (PreviewLabels / FilePreviewProps / GalleryLabels — the shared label + prop contracts of the file-preview family; types only) · file_gallery_modal · image_gallery · use_selection (useSelection — always-on multi-select state for a register/list: the `selected` Set + `toggle`/`setAll`/`allSelected`/`indeterminate`/`count`/`clear`; selectability gating stays with the caller. The checkbox-always-visible counterpart to `use_selection_mode`) · use_selection_mode · use_section_nav (useSectionNav — scroll-spy for a LONG record surface with a left outline rail: keys in page order → {scrollRef, onScroll, register(key)→onLayout, jumpTo(key), activeKey}; rail items are `MenuButton`s (selected={activeKey===key}); section wrappers must be DIRECT children of the ScrollView content. On NARROW containers the rail becomes a PINNED bar naming the CURRENT section (the spy keeps it honest) that opens a full-page section-picker `Modal` (`MenuButton` list; Escape / the close control dismiss) — never a horizontal tab strip the thumb has to scroll. Worked example: `tpl_record`) · share_or_download · rotate_image · avatar · skeleton · activity_indicator · loading · divider ·
 spacer · stack · section_card · page_header · page_content · calendar (calendar/index.ts) · gantt ·
 comments_thread · agent_run (live streaming work feed) · agent_progress (its compact floating
 expandable form — a composer's working state) · composer (Composer — the adaptive command/chat
@@ -1059,6 +1090,6 @@ children slot — with FindingComparison, the expected-vs-actual body: labeled s
 delta; the `finding` locale slice) ·
 format_money · format_date · colors (solid · tint · ramp · ColorName ·
 isColorName · asColorName — coerce a stored option/status token to a ColorName, neutral fallback) ·
-use_focus_ring (useFocusRing — keyboard-aware focus state for painting a control's own ring; see Focus rings) ·
+auto_sizer (AutoSizer — measures its own box via onLayout and renders the render-prop child only once `{width,height}` exist; `autoSizeWidthOnly`/`autoSizeHeightOnly`, `onResize`. For content needing pixel dimensions before first paint — a canvas, a virtualized grid) · separator (Separator — a `Divider` pre-wrapped in vertical padding (`padding: SpacerSize`, default 8): the between-groups rule WITH breathing room — what `Stack useSeparator` inserts and what menus/popovers put between option groups; `Divider` is the bare hairline) · back_button (BackButton — the chevron-left `IconButton` (lg, secondary) heading a screen/panel: `onPress` + translated `accessibilityLabel` (default "Back"); the one go-back glyph — don't hand-roll it) · info_popover (InfoPopover — the ⓘ button opening a 280px popover of explanatory `text`; the middle ground between Tooltip (short hover label) and composing Popover (rich content) — it is what `SectionHeadingTitle.info`/`CardHeaderTitle.info` render) · shortcut_badge (ShortcutBadge — the keycap hint pill: a zinc-50 badge rendering a shortcut from a raw string or `ShortcutDescriptor` (⌘B on Mac, Ctrl+B elsewhere); null on small screens. `TextInputField shortcut` renders it built-in) · trend_footer (TrendFooter — the "Up X% vs last period" caption under a chart card: signed `value` (0 = flat), `periodLabel`, optional `detail`; `goodDirection="down"` flips green/red for metrics where down is good; SKIP it when there's no comparator. Direction words via the `trendFooter` locale slice; goes in `SectionCard footer`) · dots_indicator (DotsIndicator — three looping bouncing dots (`size`/`color`); the indeterminate "working/typing" pulse `Loading` composes; use bare beside a caption while an agent thinks. Determinate work → ProgressBar) · scroll_to_bottom (ScrollToBottom — the floating jump-to-latest circle button for a chat/feed; ONLY the affordance — the caller owns positioning, visibility, and the actual scroll) · animation_fade_in (AnimationFadeIn — the mount transition: children fade (+ optional `translateY` rise) into place on first render, once; the entrance polish Accordion/Timeline/Stepper/AgentRun rows use) · landmark (Landmark — the semantic region wrapper: `kind` banner|navigation|main|complementary|contentinfo|region maps to the matching HTML element on web for screen-reader landmark navigation, `accessibilityRole` on native; `accessibilityLabel` required for `region`) · skip_link (SkipLink — the a11y bypass link: parked off-screen until keyboard focus slides it in; `href="#targetId"` jumps past repeated nav into the main region. One per app shell, FIRST in the tree; web-only) · use_async_fn (useAsyncFn — wrap an async function into a manual-trigger mutation: `[run, {loading, data, error}]`, unmount-safe, the error lands in state AND rethrows; the pending-state engine for a submit/download/upload action) · use_hover (useHover — pointer-hover state `{hovered, hoverProps}` for raw inputs/DOM controls that lack a hovered style state; native stays false. Pressable-based controls use the built-in `hovered` state instead) · use_auto_grow_height (useAutoGrowHeight — the grows-with-content textarea engine ({minLines,maxLines} → container height + `scrollEnabled` at the cap); powers Composer and multiline TextInputField — reach for it only when hand-rolling a growing input) · overlay_scope (isOverlayScopeActive / useOverlayScope — the module-level open-overlay counter every overlay primitive reports into; the host's shortcut registry reads it synchronously to floor page-level shortcuts while any overlay is open. Lives in the primitives — never call it from a screen) · route_matching (pure `:param` route-pattern utilities — routeMatches / parseRouteParams / findBestPattern (exact beats parameterized); the matching core under ScreenRouter/Dialog) · text_utils (text/typography plumbing: `getTextColor` (the TextColor→hex map incl. the AA-cleared valence set), the Inter `fontFamily*` stacks, and `getInputTextStyle`/`getInputLineHeight` — the 16px-mobile/14px-desktop input contract that stops Safari iOS auto-zoom; only for hand-rolled raw inputs) · use_focus_ring (useFocusRing — keyboard-aware focus state for painting a control's own ring; see Focus rings) ·
 focus_ring_pressable (FocusRingPressable — a Pressable that rings on keyboard focus; the raw-control default) ·
 control_surface (CONTROL_HEIGHT · CONTROL_RADIUS · FOCUS_RING · chipSurfaceStyle — the shared control-surface tokens).

package/examples/tpl_allocate.tsx

@@ -67,7 +67,7 @@ export function TplAllocate() {
       <View style={{ width: "100%", maxWidth: 1000, alignSelf: "center", gap: 16 }}>
         {/* header */}
         <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Apply payment</Text>
+          <Text size="xxl" weight="semibold">Apply payment</Text>
           <Text size="sm" color="muted">Split one received payment across the customer's open invoices — oldest first, or line by line</Text>
         </View>
 
@@ -76,7 +76,7 @@ export function TplAllocate() {
           <View style={{ padding: 20, flexDirection: "row", alignItems: "flex-start", gap: 24, flexWrap: "wrap" }}>
             <View style={{ gap: 2, flexGrow: 1, flexBasis: 220 }}>
               <Text size="xs" color="muted" weight="medium">Payment received</Text>
-              <Text size="xxl" weight="semibold" tabular>{formatMoney(PAYMENT.amount)}</Text>
+              <Text size="xxxl" weight="semibold" tabular>{formatMoney(PAYMENT.amount)}</Text>
               <Text size="sm" color="muted">{`${PAYMENT.from} · ref ${PAYMENT.ref} · ${PAYMENT.date}`}</Text>
             </View>
             <View style={{ gap: 10, flexGrow: 1, flexBasis: 300 }}>

package/examples/tpl_attendance.tsx

@@ -274,7 +274,7 @@ export function TplAttendance() {
         {/* header band */}
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
           <View style={{ gap: 2, flex: 1 }}>
-            <Text size="xl" weight="semibold">Attendance</Text>
+            <Text size="xxl" weight="semibold">Attendance</Text>
             <Text size="sm" color="muted">Today, Friday 12/06 — in/out times for 9 employees</Text>
           </View>
           <Picker

package/examples/tpl_calendar.tsx

@@ -209,7 +209,7 @@ export function TplCalendar() {
         {/* header band */}
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
           <View style={{ gap: 2, flex: 1 }}>
-            <Text size="xl" weight="semibold">Calendar & planning</Text>
+            <Text size="xxl" weight="semibold">Calendar & planning</Text>
             <Text size="sm" color="muted">This week — deliveries, reconciliations and customer visits</Text>
           </View>
           <Text size="sm" color="muted" tabular>

package/examples/tpl_dashboard.tsx

@@ -313,7 +313,7 @@ export function TplDashboard() {
             screen needs it) */}
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
           <View style={{ gap: 2, flex: 1 }}>
-            <Text size="xl" weight="semibold">Executive dashboard</Text>
+            <Text size="xxl" weight="semibold">Executive dashboard</Text>
             <Text size="sm" color="muted">Revenue, the sales pipeline and what needs handling — refreshed every morning</Text>
           </View>
           <DateRangeFilterField value={period} onValueChange={setPeriod} locale="en-GB" labels={NHAN_BO_LOC} />

package/examples/tpl_documents.tsx

@@ -351,7 +351,7 @@ export function TplDocuments() {
     <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28, paddingBottom: 120 }}>
       <View style={{ maxWidth: 720, width: "100%", alignSelf: "center", gap: 24 }}>
         <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">PO-2481 — Nordic Furniture AB</Text>
+          <Text size="xxl" weight="semibold">PO-2481 — Nordic Furniture AB</Text>
           <Text size="sm" color="muted">Sea freight · Gothenburg → Ho Chi Minh City · FOB · ETD 18 Jul 2026</Text>
         </View>
 

package/examples/tpl_item_list.tsx

@@ -1212,7 +1212,7 @@ export function TplItemList() {
       <View style={{ width: "100%", maxWidth: 1040, alignSelf: "center", gap: 16 }}>
         {/* header — title only; the New case action lives on the toolbar row */}
         <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Records</Text>
+          <Text size="xxl" weight="semibold">Records</Text>
           <Text size="sm" color="muted">Track each record's status and print the right document for its stage</Text>
         </View>
 

package/examples/tpl_lookup.tsx

@@ -255,7 +255,7 @@ export function TplLookup() {
                 <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Suggested HS code</Text>
                 <Confidence level={active.confidence} />
               </View>
-              <Text size="xxl" weight="semibold" tabular>{active.code}</Text>
+              <Text size="xxxl" weight="semibold" tabular>{active.code}</Text>
               <Text size="sm" color="muted">{active.heading}</Text>
             </View>
 

package/examples/tpl_pick.tsx

@@ -101,7 +101,7 @@ function CurrentTask({ line, index, total, onConfirm, onShort }: {
         {/* the bin is the biggest thing on screen — it's where you walk */}
         <View style={{ gap: 2 }}>
           <Text size="xs" color="muted" weight="medium">Go to bin</Text>
-          <Text size="xxl" weight="semibold" tabular>{line.bin}</Text>
+          <Text size="xxxl" weight="semibold" tabular>{line.bin}</Text>
         </View>
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 16, flexWrap: "wrap" }}>
           <View style={{ gap: 2, flexGrow: 1, flexBasis: 200 }}>
@@ -110,7 +110,7 @@ function CurrentTask({ line, index, total, onConfirm, onShort }: {
           </View>
           <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
             <Text size="sm" color="muted">Pick</Text>
-            <Text size="xl" weight="semibold" tabular>{line.qty}</Text>
+            <Text size="xxl" weight="semibold" tabular>{line.qty}</Text>
             <Text size="sm" color="muted">units</Text>
           </View>
         </View>
@@ -199,7 +199,7 @@ export function TplPick() {
         {/* header — the wave + the cart it's filling */}
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12, flexWrap: "wrap" }}>
           <View style={{ gap: 2, flex: 1 }}>
-            <Text size="xl" weight="semibold">Queue W-0142</Text>
+            <Text size="xxl" weight="semibold">Queue W-0142</Text>
             <Text size="sm" color="muted">7 lines for 3 outbound orders · Cart C-07</Text>
           </View>
           <Button title="Pause wave" color="muted" onPress={() => {}} />

package/examples/tpl_pivot.tsx

@@ -128,7 +128,7 @@ export function TplPivot() {
     <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 960, alignSelf: "center", gap: 16 }}>
         <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Stock distribution</Text>
+          <Text size="xxl" weight="semibold">Stock distribution</Text>
           <Text size="sm" color="muted">Where each category sits across the network — press a cell to list what's behind it</Text>
         </View>
 

package/examples/tpl_record.tsx

@@ -12,7 +12,8 @@ import type { PickerOption } from "@lotics/ui/picker";
 import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
 import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
 import { Callout, CalloutText } from "@lotics/ui/callout";
-import { Section, SectionHeading, SectionHeadingMeta, SectionHeadingTitle } from "@lotics/ui/section_heading";
+import { Section, SectionHeading, SectionHeadingMeta, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
+import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
 import { MenuButton } from "@lotics/ui/menu_button";
 import { Modal, ModalBody, ModalHeader } from "@lotics/ui/modal";
 import { useSectionNav } from "@lotics/ui/use_section_nav";
@@ -653,7 +654,12 @@ export function TplRecord() {
         </View>
       )}
     <ScrollView ref={nav.scrollRef} onScroll={nav.onScroll} scrollEventThrottle={16} style={{ flex: 1 }} contentContainerStyle={{ padding: 28, paddingBottom: 96 }}>
-      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 32 }}>
+      {/* the page column is a SectionStack — it owns the 56px beat + the
+          hairline BETWEEN top-level blocks (a conditional block that renders
+          null never leaves a stray divider) */}
+      <SectionStack style={{ width: "100%", maxWidth: 720, alignSelf: "center" }}>
+        {/* header band — app bar + summary + key facts read as ONE block */}
+        <View style={{ gap: 32 }}>
         {/* app bar — CREATE is one click; the surface is where everything is refined */}
         <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 10, rowGap: 8 }}>
           <Text size="sm" color="muted">Records <Text size="sm" color="muted">/</Text> <Text size="sm" weight="medium" color="default" tabular>{code}</Text></Text>
@@ -691,8 +697,7 @@ export function TplRecord() {
             <InlineSelect value={terms} options={TERMS} onSave={persist(setTerms)} accessibilityLabel="Payment terms" />
           </DetailRow>
         </DetailTable>
-
-        <Divider />
+        </View>
 
         {/* ONE DetailTable = the record's field grid: label · editor · trailing
             columns set once on the parent, every row aligned like a table —
@@ -743,8 +748,6 @@ export function TplRecord() {
         </Section>
         </View>
 
-        <Divider />
-
         {/* CUSTOMER — TWO states, no swap mode. Attached: the read-only-first
             card (identity + editable fields — Tax ID with the registry Fetch
             that fills Contact + City, which are inline-editable too); Remove
@@ -857,8 +860,6 @@ export function TplRecord() {
         </Section>
         </View>
 
-        <Divider />
-
         {/* BILLING — invoice documents on the record, in the inline vocabulary.
             The issue action lives in each band's header; ONE section-level
             callout explains what blocks issuing (no per-band totals, no
@@ -884,6 +885,9 @@ export function TplRecord() {
             </Callout>
           ) : null}
 
+          {/* the section's GROUPS — bands · collect · deposit — divide via the
+              SubsectionStack law (24 + hairline), no hand-rolled dividers */}
+          <SubsectionStack>
           <View style={{ gap: 10 }}>
             {invoices.map((inv) => (
               <InvoiceBand
@@ -905,9 +909,8 @@ export function TplRecord() {
             ))}
           </View>
 
-          {/* collect band */}
-          <Divider />
-          <View style={{ gap: 10 }}>
+          {/* collect band — a headingless Subsection: the total owns the number */}
+          <Subsection>
             <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
               <Text weight="semibold" style={{ flex: 1 }}>Total to collect</Text>
               <Text weight="semibold" size="lg" tabular>{formatMoney(grandTotal)}</Text>
@@ -923,15 +926,15 @@ export function TplRecord() {
               <Text size="xs" color="muted" style={{ flex: 1 }}>{issuedCount} of {invoices.length} issued</Text>
               <Button title="Print receipt" color="primary" disabled={grandTotal <= 0} onPress={printReceipt} />
             </View>
-          </View>
+          </Subsection>
 
-          {/* deposit band — labelled separate, never part of the total */}
-          <Divider />
-          <View style={{ gap: 8 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Text weight="semibold">Deposit</Text>
+          {/* deposit band — a named Subsection: labelled separate, never part
+              of the total (the badge rides the heading row's right edge) */}
+          <Subsection>
+            <SubsectionHeading>
+              <SubsectionHeadingTitle>Deposit</SubsectionHeadingTitle>
               <Badge label="Collected separately" color="zinc" />
-            </View>
+            </SubsectionHeading>
             <View style={{ flexDirection: "row", alignItems: "center", gap: 12, flexWrap: "wrap", minHeight: 40 }}>
               <Text size="sm" color="muted" style={{ width: 150 }}>Refundable</Text>
               <View style={{ flexGrow: 1, flexBasis: 160 }}>
@@ -951,12 +954,11 @@ export function TplRecord() {
                 onPress={() => Alert.alert("Deposit receipt", `Printing deposit receipt for ${formatMoney(deposit)}.`, [{ text: "OK" }])}
               />
             </View>
-          </View>
+          </Subsection>
+          </SubsectionStack>
         </Section>
         </View>
 
-        <Divider />
-
         {/* FILES — the record's document CRUD: drop to add, click a thumbnail
             to preview in the gallery, ✕ to delete. */}
         <View onLayout={nav.register("files")}>
@@ -996,8 +998,6 @@ export function TplRecord() {
         </Section>
         </View>
 
-        <Divider />
-
         {/* TASKS — the handoff checklist, grouped by the desk that owns
             them; every row edits (the stage gates the handoff and Billing,
             never task editing). The CURRENT desk's open tasks warn beside
@@ -1159,8 +1159,6 @@ export function TplRecord() {
         </Section>
         </View>
 
-        <Divider />
-
         {/* THE HANDOFF GATE — the atomic boundary between departments, not a
             form and not a message: the record itself changes desks. Each stage
             names what it owes (the why-hint) before its CTA un-gates; the
@@ -1191,8 +1189,6 @@ export function TplRecord() {
           </View>
         )}
 
-        <Divider />
-
         {/* the settings shape: title + description left, a live control right,
             applied on change */}
         <View onLayout={nav.register("preferences")}>
@@ -1217,15 +1213,13 @@ export function TplRecord() {
         </Section>
         </View>
 
-        <Divider />
-
         <DangerZone
           title="Delete record"
           description="Permanently remove this record and its invoices, charges, and history. This can't be undone."
         >
           <Button title="Delete record" color="danger" onPress={() => {}} />
         </DangerZone>
-      </View>
+      </SectionStack>
 
       {/* the narrow-mode section picker — a full-page takeover: pick a section
           to jump there; Escape or the close control dismisses */}

package/examples/tpl_report.tsx

@@ -222,7 +222,7 @@ export function TplReport() {
         {/* header band — title + the persistent period + the one primary action */}
         <View style={{ flexDirection: "row", gap: 16, alignItems: "flex-start", flexWrap: "wrap", zIndex: 20 }}>
           <View style={{ gap: 2, flex: 1, minWidth: 260 }}>
-            <Text size="xl" weight="semibold">Payments</Text>
+            <Text size="xxl" weight="semibold">Payments</Text>
             <Text size="sm" color="muted">Look up payments by customer, reference, or operator across a period — totals, facets, and the matching lines</Text>
           </View>
           <View style={{ flexDirection: "row", gap: 12, alignItems: "center", flexWrap: "wrap" }}>

package/examples/tpl_rollup.tsx

@@ -147,7 +147,7 @@ export function TplRollup() {
       <View style={{ width: "100%", maxWidth: 980, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Network rollup</Text>
+          <Text size="xxl" weight="semibold">Network rollup</Text>
           <Text size="sm" color="muted">This month by region, site and lane — expand the branch that drags the total</Text>
         </View>
 

package/examples/tpl_shifts.tsx

@@ -185,7 +185,7 @@ export function TplShifts() {
       <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Shift staffing · week 15–21/06</Text>
+          <Text size="xxl" weight="semibold">Shift staffing · week 15–21/06</Text>
           <Text size="sm" color="muted">Members sign up, you allocate — fill every slot without burning anyone out</Text>
         </View>
 

package/examples/tpl_statements.tsx

@@ -119,7 +119,7 @@ function StatementPage({ title, meta, children }: { title: string; meta: string;
       <View style={{ width: "100%", maxWidth: 680, alignSelf: "center", gap: 20 }}>
         <View style={{ flexDirection: "row", alignItems: "flex-start", flexWrap: "wrap", columnGap: 12, rowGap: 8 }}>
           <View style={{ flexGrow: 1, flexBasis: 240, gap: 2 }}>
-            <Text size="xl" weight="semibold">{title}</Text>
+            <Text size="xxl" weight="semibold">{title}</Text>
             <Text size="sm" color="muted">{meta}</Text>
           </View>
           <Button title="Export" color="secondary" icon="file-down" onPress={() => {}} />

package/examples/tpl_stock.tsx

@@ -193,7 +193,7 @@ export function TplStock() {
         {/* header band */}
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
           <View style={{ gap: 2, flex: 1 }}>
-            <Text size="xl" weight="semibold">Stock overview</Text>
+            <Text size="xxl" weight="semibold">Stock overview</Text>
             <Text size="sm" color="muted">The whole fleet at a glance — drill into any slice, then walk the units one by one</Text>
           </View>
           <Button title="Register units" color="primary" onPress={() => {}} />

package/examples/tpl_task_board.tsx

@@ -328,7 +328,7 @@ export function TplTaskBoard() {
     <>
     <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ paddingVertical: 28, paddingHorizontal: 24, paddingBottom: 96 }}>
       <View style={{ maxWidth: 1240, width: "100%", alignSelf: "center", gap: 16 }}>
-        <Text size="xl" weight="semibold">Task board</Text>
+        <Text size="xxl" weight="semibold">Task board</Text>
 
         <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
           <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8, flex: 1 }}>

package/examples/tpl_tasks.tsx

@@ -235,7 +235,7 @@ export function TplTasks() {
     <>
     <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ paddingVertical: 28, paddingHorizontal: 20, paddingBottom: 96 }}>
       <View style={{ maxWidth: 680, width: "100%", alignSelf: "center", gap: 14 }}>
-        <Text size="xl" weight="semibold">Tasks</Text>
+        <Text size="xxl" weight="semibold">Tasks</Text>
 
         <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
           <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8, flex: 1 }}>

package/examples/tpl_tower.tsx

@@ -166,7 +166,7 @@ export function TplTower() {
       <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Control tower</Text>
+          <Text size="xxl" weight="semibold">Control tower</Text>
           <Text size="sm" color="muted">Every unit's live state — scan for red, work the exceptions, read the pattern</Text>
         </View>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "9.0.0",
+  "version": "11.0.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -69,7 +69,6 @@
     "./theme": "./src/theme.tsx",
     "./progress_bar": "./src/progress_bar.tsx",
     "./form_date_picker": "./src/form_date_picker.tsx",
-    "./form_time_picker": "./src/form_time_picker.tsx",
     "./form_picker": "./src/form_picker.tsx",
     "./picker": "./src/picker.tsx",
     "./select": "./src/select.tsx",
@@ -170,11 +169,11 @@
     "./container": "./src/container.tsx",
     "./count": "./src/count.tsx",
     "./dots_indicator": "./src/dots_indicator.tsx",
-    "./highlighted_text": "./src/highlighted_text.tsx",
     "./list": "./src/list.tsx",
     "./list_item": "./src/list_item.tsx",
     "./section": "./src/section.tsx",
     "./section_heading": "./src/section_heading.tsx",
+    "./section_stack": "./src/section_stack.tsx",
     "./separator": "./src/separator.tsx",
     "./stack": "./src/stack.tsx",
     "./status_badge": "./src/status_badge.tsx",
@@ -185,11 +184,9 @@
     "./tabs": "./src/tabs.tsx",
     "./segmented_control": "./src/segmented_control.tsx",
     "./auto_sizer": "./src/auto_sizer.tsx",
-    "./animation_horizontal_slide": "./src/animation_horizontal_slide.tsx",
     "./group_avatar": "./src/group_avatar.tsx",
     "./page_content": "./src/page_content.tsx",
     "./page_header": "./src/page_header.tsx",
-    "./pager_view": "./src/pager_view.tsx",
     "./date_picker": "./src/date_picker.tsx",
     "./date_filter": "./src/date_filter.tsx",
     "./date_range_filter_field": "./src/date_range_filter_field.tsx",
@@ -200,7 +197,6 @@
     "./modal": "./src/modal.tsx",
     "./screen_router": "./src/screen_router.tsx",
     "./route_matching": "./src/route_matching.ts",
-    "./menu_title": "./src/menu_title.tsx",
     "./avatar": {
       "react-native": "./src/avatar.tsx",
       "default": "./src/avatar.web.tsx"
@@ -216,7 +212,6 @@
     "./json_panel": "./src/json_panel.tsx",
     "./timeline": "./src/timeline.tsx",
     "./loading": "./src/loading.tsx",
-    "./popover_header": "./src/popover_header.tsx",
     "./switch_button": "./src/switch_button.tsx",
     "./alert": "./src/alert.tsx",
     "./landmark": "./src/landmark.tsx",

package/src/button.tsx

@@ -151,6 +151,10 @@ export function Button(props: ButtonProps) {
 
 
 export function getButtonTextColor(color?: ButtonColor, disabled?: boolean): TextColor {
+  // Disabled fades the label to the zinc-400 disabled ink on EVERY variant —
+  // the washed background alone is a one-step tint nobody reads as disabled.
+  // (The primary keeps inverted ink; its zinc-300 surface carries the wash.)
+  if (disabled) return color === "primary" ? "inverted" : "zinc-400";
   switch (color) {
     case "primary":
       return "inverted";
@@ -162,7 +166,7 @@ export function getButtonTextColor(color?: ButtonColor, disabled?: boolean): Tex
     case "muted":
       return "muted";
     default:
-      return disabled ? "muted" : "default";
+      return "default";
   }
 }
 

package/src/button_colors.ts

@@ -6,6 +6,9 @@ import { colors } from "./colors";
  *  same colour. Lives in its own module (not `button.tsx`) so a test that mocks
  *  `@lotics/ui/button` can't leave `IconButton` without it. */
 export function getButtonIconColor(color?: ButtonColor, disabled?: boolean): string {
+  // Disabled mutes the glyph on EVERY variant (mirrors `getButtonTextColor`) —
+  // the primary keeps white ink on its washed zinc-300 disabled surface.
+  if (disabled) return color === "primary" ? colors.white : colors.zinc["400"];
   switch (color) {
     case "primary":
       return colors.white;
@@ -18,6 +21,6 @@ export function getButtonIconColor(color?: ButtonColor, disabled?: boolean): str
     case "muted":
       return colors.zinc["600"];
     default:
-      return disabled ? colors.zinc["300"] : colors.zinc["950"];
+      return colors.zinc["950"];
   }
 }