Pending dots on tabs and sub-nav rows
The 'still needs an answer' dot the Onboarding tab will use, on the shared tab and menu primitives
30 Sept 2026 · branch feat/onboarding-pending-dots-p2 · captured against propflow-stage · at 3c9ff5f2d5+local
Data note. Every name and balance below comes from propflow-stage, which is anonymized by construction (ADR-0097/0110 — phones in the impossible +1000 NPA, emails @example.test). The identical capture against prod would carry real tenants' names and balances and is not safe to attach anywhere, which is why the generator refuses to run against one.
1 · TabBar with one pending tab, light
The component gallery's TabBar preview, with Settings marked pending. The dot sits after the label, in the shared blue tone.
What to look at
One small blue dot after Settings, the same blue as the mock's dot. Nothing else on the bar changes: the count pills, the underline and the spacing are as before. No product screen sets pending yet, so this gallery preview is the only place the dot shows until the Onboarding tab uses it.
Asserted in the captured DOM — TabBar · Deployments · Settings · Needs an answer. The hidden label is in the DOM, which means the pending dot rendered on the flagged tab.
2 · SecondaryTabs with one pending tab
Notes
Analytics is marked pending. It is the same component and the same tone as on the TabBar, so the two can never show different colours.
Asserted in the captured DOM — SecondaryTabs · Analytics · Needs an answer. The dot rendered on the flagged tab.
3 · The same TabBar, dark (last, because the theme persists)
Notes
Switched to dark through the product's own theme control. The dot uses the shared --color-badge-blue-solid token (blue-600 in light, blue-400 in dark), so it stays visible on the dark surface.
Asserted in the captured DOM — TabBar · Settings · Needs an answer. Same strings as light: a theme change switches colours, never content.
Two critique rounds, against brand-and-design.md and the mock
Round 1 and round 2
Round 1 (light, against the mock). The mock draws a small round dot after the tab label, and a section's dot at the right of its row. That is what renders here. The dot sits after Settings, 6px from the label (the tab's existing gap), at 7px, which is the StatusDot size every table uses, next to the mock's 8px. It is a dot, not a badge or a pill, so it fits the no-badges rule and adds no background or border chip (design-standards §7.1). The count pills and the active underline are unchanged. Only the flagged tab changes, and every unflagged tab renders exactly as before. The DOM test pins that, plus a control showing that no flag means no dot.
Round 2 (dark). The dot is the shared blue-solid badge token (blue-400 in dark), so it reads clearly on the dark surface and was not recoloured by hand. Sub-nav rows have no gallery preview: the row variant (the dot at the right edge, before any chevron) is pinned by PendingDot.dom.test.tsx and will be captured on the Onboarding page once a section uses it. Screen readers hear Needs an answer. The dot itself is aria-hidden, as in every StatusDot.