Color-theme picker — a unified segmented control for light / dark / system.

One recessed track holding three segments (icon + label); the active segment renders as a contained, raised "thumb" with a subtle accent ring. The control is purely presentational: persistence and the live data-theme swap are owned by the accrue_theme JS hook (delegated click + arrow-key nav), keyed off the stable data-theme-target attribute. Server-rendered @theme sets the initial active segment so there is no flash before the hook syncs.

<ThemePicker.theme_picker theme={@theme} />

Accessibility: role="radiogroup" with role="radio" segments, roving tabindex, and a per-segment aria-label so the control keeps an accessible name when labels collapse to icon-only on narrow viewports.