The picker's listbox is portaled to document.body, so inside a modal
Radix dialog it inherits the pointer-events: none body lock: clicks on
items never register, the picker's outside-click handler sees the
mousedown as outside and closes the menu, and selection silently fails.
In the ROT/RUT payout dialog this made the ROT/RUT type switch (and the
year picker) dead, so a paid RUT invoice was unreachable (#1884
follow-up).
Apply the sanctioned companion-overlay pattern already used by
AccountCombobox and HelpPopover: pointer-events-auto undoes the body
lock, data-dialog-companion keeps DialogContent/SheetContent from
dismissing the dialog on a click in the list. Both are no-ops for
page-toolbar pickers outside dialogs.
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Seven radii were in circulation (4/5/6/8/12/16px + pill) with no rule for
which went where; one toolbar row on /transactions mixed four shape
languages. This locks a 4-tier ladder (design.md convention 16):
- pill: interactive toolbar controls (buttons, chips, pickers, segmented
controls, toolbar search, count nubs)
- rounded-xl (12px): overlay tier: page panel, dialogs, slide-overs
- rounded-lg (8px): cards, form fields, popover/menu content, boxes
- rounded-sm (4px): nested leaves (menu items, checkboxes, kbd/code nubs)
Changes:
- New SegmentedControl primitive (pill-in-pill tablist, h-8) replaces the
hand-rolled bg-muted/70 tablist copied across 11 files
- New ToolbarSearch primitive (pill, h-8) adopted on 9 page toolbars;
dialog/picker searches keep the rounded-lg Input
- dialog.tsx 8px -> 12px, matching SettingsModal/slide-over/CommandPalette
- ContextPicker chips at the shared h-8 toolbar height
- ~300 rounded-md / bare rounded call sites remapped by role; auth icon
tiles and the mobile nav sheet come down from 16px to 12px
- rounded-md, bare rounded, rounded-2xl and rounded-[Npx] are dead
vocabulary, enforced by a new off-ladder-radius check in check:guards
Verified: lint 0 errors, 14422 unit tests pass, check:guards green, tsc
clean on all changed files, sandbox screenshots of transactions/
bookkeeping/granskning toolbars and the Ny verifikation dialog.
Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
* feat(ui): shared migration primitives (UI migration PR 3)
The component kit every page migration (PR 4-8) builds on:
- ContextPicker: the one-per-page chip-dropdown context scope (convention
8), right-aligned popover with checks and muted annotations
- FyPicker: fiscal-year picker on ContextPicker with the same controlled
API and per-company localStorage key as FiscalYearSelector, which it
replaces page by page from PR 4
- SplitButton: primary + caret menu, last-used mode persisted per user
via ui_state.create_mode (lib/ui-state/client, unit-tested); nav
persistence refactored onto the same helper
- ConfirmDialog: centered min-460px confirm-up-front dialog (convention
10) with pending state on an awaitable onConfirm
- HelpPopover: 17px "?" after the H1 opening an anchored popover
(convention 7); PageHeader gets a `help` slot
- AttnLine: the one-ochre-sentence attention pattern (convention 6) with
optional inline action; new AA-safe --attn token pair
- RowStatus: chips-mark-exceptions helper (convention 5)
- SlideOver: right review panel, 480px, 18px inset, rounded, veil + Esc
(convention 13), with header kicker / body / footer slots
- Stagger: .stagger-enter applied to the five target pages' list
containers (bookkeeping, transactions, pending, invoices,
supplier-invoices); structural loading.tsx added for supplier-invoices,
customers, kpi, pending, deadlines
No page adopts the new pickers/dialogs yet: that is PR 4-8, one page per
PR against this kit.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(ui): FyPicker chip must not double the Rakenskapsar label
Real fiscal periods are often named "Rakenskapsar 2026" already; only
prefix the label when the period name lacks it.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
