Segmented Tabs

Features

• Sliding active highlight that animates with transform: translateX for GPU-friendly motion
• Full WAI-ARIA tabs pattern with role="tablist", role="tab", and role="tabpanel"
• Roving tabindex so only the active tab is in the tab order
• Arrow, Home, and End keyboard navigation with focus following selection
• Three panels of health metrics that swap on selection
• Per-tab accent hues (Move / Heart / Sleep) that retint the segmented track, sliding pill, headline eyebrow, panels, and goal bar — following the design-system accent when one is applied, with health-colour fallbacks
• Goal progress bar under the panels with per-tab targets (kcal, zone minutes, sleep hours) that animates via transform: scaleX on tab change
• Insight tile row (streak, deltas, bests) that swaps content per tab with a soft fade
• Overflow menu (aria-haspopup="menu") with Refresh data, Download CSV, and Copy summary actions — arrow-key roving, Escape to close, focus returned to the trigger
• Move panel: SVG activity rings with hover/click ring highlighting and a rAF count-up of the metric values, plus a per-hour bar chart with hover tooltips
• Heart panel: an SVG sparkline rendered from data with a hover tracker, interpolated read-out dot, and bpm value bubble, plus a stacked time-in-zones bar
• Sleep panel: a hypnogram of the night's stage timeline (lanes, hour gridlines, per-segment tooltips) that re-renders on resize via ResizeObserver
• Touch swipe on the panel area to move between tabs, ignoring vertical-dominant gestures so page scrolling is not hijacked
• Height-stable panel area — all panels share one CSS grid cell so the widget never resizes when switching tabs
• Responsive panel that adapts padding down to 280px
• Fully respects prefers-reduced-motion

Accessibility

Tablist

role="tablist" on the track with an aria-label

Tabs

Each tab has role="tab", aria-selected, and aria-controls

Tab panels

Each panel has role="tabpanel", aria-labelledby, and tabindex="0"

Roving tabindex

Only the selected tab has tabindex="0"; others are -1

Overflow menu

Trigger has aria-haspopup="menu" and aria-expanded; the menu is role="menu" with role="menuitem" children, and focus returns to the trigger on close

Goal progress

role="progressbar" with aria-valuenow and a descriptive aria-valuetext rewritten per tab

Live updates

.sg-bottom is aria-live="polite" so per-tab goal and insight changes are announced

Decorative graphics

Rings, sparkline, hypnogram, and icon SVGs are aria-hidden="true"; their values are exposed as text

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Segmented Tabs in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the tabs is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.