Components

Navigation & shell

Header, breadcrumbs, tabs, pagination, the locale switcher, and the two persistent design-system selectors. Mobile product header shows only wordmark + burger; drawer carries nav, locale, account, and footer links.

The two persistent selectors (top bar) documented here per the brief

Selector 1 · Language (product LocaleSwitcher)

EN default / DE secondary. On real pages it switches route (hreflang-correct); in the DS top bar it also live-swaps bilingual specimens and the example preview.

Selector 2 · Viewport

Frames the example-page preview at 390 / 768 / full width for mobile-first QA. (Live control is in the top bar above.)

Header.astro — live specimen desktop baseline nav · mobile dark overlay drawer

CurtainCritics

Specimen content sits below the header so the mobile drawer can be checked as a true overlay.

Breadcrumbs.astro

.cc-tabs — result tabs segmented · scrolls horizontally on mobile

.cc-pager — pagination

.cc-account__menu — account menu opened logged-in dropdown