Analysis level navigation

import { AnalysisLevelNavigation, AnalysisOverviewButton, AnalysisLevelButton } from '@wafm/ui/components/analysis-level-navigation'
import { participantSectionOrder } from '@wafm/ui/lib/participant-sections'

<AnalysisLevelNavigation>
  <AnalysisOverviewButton aria-pressed={selected === 'overview'} onClick={() => setSelected('overview')} />
  {participantSectionOrder.map((section) => (
    <AnalysisLevelButton key={section} section={section}
      aria-pressed={selected === section} onClick={() => setSelected(section)} />
  ))}
  {additionalActions}
</AnalysisLevelNavigation>

children / className / HTML nav props

One shared tabbar for individual and comparison views, with 16px top spacing and a bottom divider. Horizontally scrolls on narrow screens. Compose AnalysisOverviewButton before the level buttons for the individual view only. Selection and content remain in the caller.

<AnalysisLevelButton section="abilities" aria-pressed={selected === "abilities"}
  aria-controls="results" onClick={() => setSelected("abilities")} />

section

Required ParticipantSection. Derives the canonical level, German navigation label, and decorative token color; personality uses the short navigation label Persönlichkeit.

Canonical tab styling

There is one appearance: yellow Selbstbild, olive Fähigkeiten, dark blue Persönlichkeit, and sage Motive. Selection adds a 10% color tint, matching underline, and semibold label. Unselected tabs use 75% opacity. Styles come from the shared component; do not override colors per screen.

aria-pressed / onClick / aria-controls

Caller-controlled selection and action. Associate the button with the content it changes when appropriate. These are buttons, not tabs: Tab moves focus; Enter or Space activates.

disabled / className / Button props

Supports the shared Button API except children, which are supplied by the translated label. Disabled prevents activation.

<AnalysisOverviewButton aria-pressed={selected === "overview"}
  aria-controls="results" onClick={() => setSelected("overview")} />

aria-label

Defaults to Alle Ebenen. The four decorative squares use the same section colors as the level buttons.

aria-pressed / onClick / disabled / Button props

Compose only in the individual-person view; omit in comparison. The caller controls selection and restores the overview on activation. Supports Button props except children; it does not reset any state itself.