Components · Navigation
Two moving-target patterns. PageTabs is link navigation — each tab is a real URL, so it's a <nav> with an aria-current="page" underline, not a WAI-ARIA tablist. Segmented controls and pill switches are client state (a view or scope toggle) — one pressed segment at a time.
Roster active — 2px accent underline + accent label + aria-current. Events pinned to :hover (border-strong cue). Overflows to a horizontal scroll, never wraps.
--surface-3 above the inset --surface-2 track.
One pressed segment (aria-pressed). Surface layering carries the state: sunken track, raised active chip.
The high-emphasis variant — active pill takes the solid accent fill on --on-accent. Use for a small either/or scope, not a long tab set.
Source · PageTabs.tsx — border-b-2 active underline, text-accent, aria-current="page", hover→--border-strong, single-row horizontal scroll. The segmented & pill switches are the portal's client-state view/scope toggles (raised-chip vs accent-fill), distinct from PageTabs' URL navigation.