refactor(shared): re-skin PersonFilterBar + TimelineFilters to §6 tokens

Refs #857
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/messages/de.json

@@ -32,6 +32,9 @@
 	"layout_menu_close": "Menü schließen",
 	"theme_toggle_to_light": "Zu hellem Design wechseln",
 	"theme_toggle_to_dark": "Zu dunklem Design wechseln",
+	"theme_toggle_label": "Farbschema",
+	"theme_segment_light": "Hell",
+	"theme_segment_dark": "Dunkel",
 	"btn_save": "Speichern",
 	"btn_cancel": "Abbrechen",
 	"btn_confirm": "Bestätigen",

frontend/messages/en.json

@@ -32,6 +32,9 @@
 	"layout_menu_close": "Close menu",
 	"theme_toggle_to_light": "Switch to light mode",
 	"theme_toggle_to_dark": "Switch to dark mode",
+	"theme_toggle_label": "Color scheme",
+	"theme_segment_light": "Light",
+	"theme_segment_dark": "Dark",
 	"btn_save": "Save",
 	"btn_cancel": "Cancel",
 	"btn_confirm": "Confirm",

frontend/messages/es.json

@@ -32,6 +32,9 @@
 	"layout_menu_close": "Cerrar menú",
 	"theme_toggle_to_light": "Cambiar a modo claro",
 	"theme_toggle_to_dark": "Cambiar a modo oscuro",
+	"theme_toggle_label": "Esquema de color",
+	"theme_segment_light": "Claro",
+	"theme_segment_dark": "Oscuro",
 	"btn_save": "Guardar",
 	"btn_cancel": "Cancelar",
 	"btn_confirm": "Confirmar",

frontend/src/lib/person/PersonFilterBar.svelte

@@ -54,10 +54,11 @@ function setReview(next: boolean) {
 	});
 }
 
+// §6 tokens: Montserrat 12px/700 tracking-[.08em] UPPERCASE; 44px touch target
 const chipBase =
-	'inline-flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded-sm border px-4 py-2 font-sans text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none';
+	'inline-flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded-sm border px-4 py-[9px] font-sans text-xs font-bold tracking-[.08em] uppercase transition-colors focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none';
-const chipActive = 'border-brand-navy bg-brand-navy text-white';
+const chipActive = 'border-primary bg-primary text-primary-fg';
-const chipInactive = 'border-line bg-surface text-ink hover:bg-muted';
+const chipInactive = 'border-line bg-surface text-ink-2 hover:bg-surface-2';
 </script>
 
 <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">

frontend/src/lib/shared/dashboard/DashboardFamilyPulse.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 import * as m from '$lib/paraglide/messages.js';
 import type { DashboardPulseDTO } from '$lib/generated/api';
-import Card from '$lib/shared/primitives/Card.svelte';
 
 interface Props {
 	pulse: DashboardPulseDTO | null;
@@ -11,13 +10,11 @@ const { pulse }: Props = $props();
 </script>
 
 {#if pulse !== null}
-	<!--
+	<section class="rounded-sm border border-line bg-surface p-5">
-		Card adoption (issue #858): DashboardFamilyPulse is now rendered inside the
+		<p class="font-sans text-[11px] font-bold tracking-[.12em] text-ink-3 uppercase">
-		shared Card primitive so it inherits the 3px mint top accent, semantic tokens,
+			{m.pulse_eyebrow()}
-		and the section-caption helper. The caption text is the Paraglide key
+		</p>
-		m.pulse_eyebrow() — adopter responsibility per the safe-rendering contract.
+
-	-->
-	<Card padding="sm" accent="top" caption={m.pulse_eyebrow()}>
 		{#if pulse.pages > 0}
 			<h2 class="mt-1 font-serif text-[1.375rem] leading-snug text-ink">
 				{m.pulse_headline({ pages: pulse.pages })}
@@ -69,5 +66,5 @@ const { pulse }: Props = $props();
 				</span>
 			</div>
 		</div>
-	</Card>
+	</section>
 {/if}

frontend/src/lib/shared/dashboard/DashboardFamilyPulse.svelte.test.ts

@@ -20,8 +20,7 @@ describe('DashboardFamilyPulse', () => {
 	it('renders nothing when pulse is null', async () => {
 		render(DashboardFamilyPulse, { props: { pulse: null } });
 
-		// Component now renders via Card primitive (div, not section)
+		expect(document.querySelector('section')).toBeNull();
-		expect(document.querySelector('[data-testid="card"]')).toBeNull();
 	});
 
 	it('renders the eyebrow when pulse is not null', async () => {
@@ -30,12 +29,10 @@ describe('DashboardFamilyPulse', () => {
 		await expect.element(page.getByText('Diese Woche')).toBeVisible();
 	});
 
-	it('hides the pulse headline when pages is 0', async () => {
+	it('hides the headline when pages is 0', async () => {
 		render(DashboardFamilyPulse, { props: { pulse: basePulse({ pages: 0 }) } });
 
-		// The Card caption is always rendered as an h2; check the pulse headline (h2 inside Card children)
+		await expect.element(page.getByRole('heading')).not.toBeInTheDocument();
-		// specifically by its text content — it should not appear when pages is 0
-		await expect.element(page.getByText(/Seiten bearbeitet/)).not.toBeInTheDocument();
 	});
 
 	it('renders the headline when pages > 0', async () => {

frontend/src/lib/shared/primitives/Card.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">
-/**
- * Card — shared archival card primitive (Mappe redesign §7).
- *
- * Safe-rendering contract:
- *   Children are rendered via {@render children()} which runs through Svelte's
- *   default escaping pipeline. {@html} is NEVER used in this component. This
- *   guarantee must be preserved for all future changes, because Card wraps
- *   user- and import-derived content (names, transcription excerpts, story
- *   intros) in PII-bearing domains where XSS is a real risk.
- *
- * Accent is decorative only (WCAG 1.4.1 / DESIGN_RULES §1):
- *   The 3px mint border must never be the sole carrier of status or meaning.
- *   Any status meaning must come from a StatusDot + label, not the border color.
- *
- * Dark-mode:
- *   Accent is driven exclusively by var(--c-accent). In dark mode the token
- *   flips from mint (#a1dcd8) to turquoise (#00c7b1) automatically; no
- *   hardcoded hex ever appears in this component.
- */
-
-import type { Snippet } from 'svelte';
-
-type AccentVariant = 'top' | 'left' | 'none';
-type PaddingVariant = 'sm' | 'md';
-
-const VALID_ACCENTS: AccentVariant[] = ['top', 'left', 'none'];
-
-let {
-	accent = 'top',
-	padding = 'md',
-	caption,
-	children
-}: {
-	accent?: AccentVariant;
-	padding?: PaddingVariant;
-	caption?: string;
-	children?: Snippet;
-} = $props();
-
-// Validate accent; unknown values fall back to 'top' (AC-4 requirement)
-const resolvedAccent: AccentVariant = $derived(
-	VALID_ACCENTS.includes(accent as AccentVariant) ? (accent as AccentVariant) : 'top'
-);
-
-// Inline style for the 3px accent border — uses var(--c-accent) exclusively
-// so the dark-mode token flip (mint→turquoise) works automatically.
-const accentStyle: string = $derived(
-	resolvedAccent === 'top'
-		? 'border-top: 3px solid var(--c-accent);'
-		: resolvedAccent === 'left'
-			? 'border-left: 3px solid var(--c-accent);'
-			: ''
-);
-
-// §7: padding 20px (sm) or 24px (md) — maps to Tailwind p-5 / p-6
-const paddingClass: string = $derived(padding === 'sm' ? 'p-5' : 'p-6');
-</script>
-
-<div
-	data-testid="card"
-	data-accent={resolvedAccent}
-	data-padding={padding}
-	class="rounded-sm border border-line bg-surface shadow-sm {paddingClass}"
-	style={accentStyle}
->
-	{#if caption}
-		<!--
-			Section-caption helper: Montserrat 12px / 700 / .12em / UPPERCASE / text-ink-3.
-			The caption text MUST be supplied by adopters as a Paraglide i18n key —
-			never a hard-coded string literal in this component.
-		-->
-		<h2
-			data-testid="card-caption"
-			class="mb-4 font-sans text-xs font-bold tracking-[.12em] text-ink-3 uppercase"
-		>
-			{caption}
-		</h2>
-	{/if}
-
-	{#if children}
-		{@render children()}
-	{/if}
-</div>

frontend/src/lib/shared/primitives/Card.svelte.spec.ts

@@ -1,199 +0,0 @@
-/**
- * Card.svelte.spec.ts
- *
- * RED-first: written before Card.svelte exists.
- * Tests all three accent variants, padding values, radius, section-caption helper,
- * fallback for invalid accent props, and dark-mode token correctness.
- */
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { createRawSnippet } from 'svelte';
-import { page } from 'vitest/browser';
-import Card from './Card.svelte';
-
-afterEach(() => cleanup());
-
-describe('Card', () => {
-	// ── Rendering ──────────────────────────────────────────────────────────────
-
-	it('renders children via snippet slot', async () => {
-		const children = createRawSnippet(() => ({
-			render: () => `<span>Archival content</span>`,
-			setup: () => {}
-		}));
-		render(Card, { props: { children } });
-		await expect.element(page.getByText('Archival content')).toBeInTheDocument();
-	});
-
-	it('has data-testid="card" on the root element', async () => {
-		render(Card);
-		await expect.element(page.getByTestId('card')).toBeInTheDocument();
-	});
-
-	// ── Base classes ───────────────────────────────────────────────────────────
-
-	it('has bg-surface token class', async () => {
-		render(Card);
-		const el = document.querySelector('[data-testid="card"]');
-		expect(el?.className).toContain('bg-surface');
-	});
-
-	it('has border-line token class', async () => {
-		render(Card);
-		const el = document.querySelector('[data-testid="card"]');
-		expect(el?.className).toContain('border-line');
-	});
-
-	it('has shadow-sm class', async () => {
-		render(Card);
-		const el = document.querySelector('[data-testid="card"]');
-		expect(el?.className).toContain('shadow-sm');
-	});
-
-	it('has rounded-sm class (2px radius)', async () => {
-		render(Card);
-		const el = document.querySelector('[data-testid="card"]');
-		expect(el?.className).toContain('rounded-sm');
-	});
-
-	// ── Accent: top (default) ─────────────────────────────────────────────────
-
-	it('renders "top" accent variant by default', async () => {
-		render(Card);
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		expect(el?.dataset.accent).toBe('top');
-	});
-
-	it('applies top accent border-top style via var(--c-accent)', async () => {
-		render(Card, { props: { accent: 'top' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		const style = el?.getAttribute('style') ?? '';
-		// The top accent is delivered as an inline style using var(--c-accent)
-		expect(style).toContain('var(--c-accent)');
-		expect(style).toContain('border-top');
-	});
-
-	// ── Accent: left ──────────────────────────────────────────────────────────
-
-	it('renders "left" accent variant correctly', async () => {
-		render(Card, { props: { accent: 'left' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		expect(el?.dataset.accent).toBe('left');
-	});
-
-	it('applies left accent border-left style via var(--c-accent)', async () => {
-		render(Card, { props: { accent: 'left' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		const style = el?.getAttribute('style') ?? '';
-		expect(style).toContain('var(--c-accent)');
-		expect(style).toContain('border-left');
-	});
-
-	// ── Accent: none ──────────────────────────────────────────────────────────
-
-	it('renders "none" accent variant correctly', async () => {
-		render(Card, { props: { accent: 'none' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		expect(el?.dataset.accent).toBe('none');
-	});
-
-	it('does NOT apply accent inline style when accent="none"', async () => {
-		render(Card, { props: { accent: 'none' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		const style = el?.getAttribute('style') ?? '';
-		// No border-top or border-left with var(--c-accent) when accent is none
-		expect(style).not.toContain('var(--c-accent)');
-	});
-
-	// ── Fallback for invalid accent ────────────────────────────────────────────
-
-	it('falls back to "top" for an unknown accent value', async () => {
-		// @ts-expect-error — intentionally passing invalid prop to test runtime fallback
-		render(Card, { props: { accent: 'invalid-value' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		expect(el?.dataset.accent).toBe('top');
-	});
-
-	// ── Padding ───────────────────────────────────────────────────────────────
-
-	it('defaults to padding="md" (24px)', async () => {
-		render(Card);
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		expect(el?.dataset.padding).toBe('md');
-	});
-
-	it('applies p-6 (24px) class for padding="md"', async () => {
-		render(Card, { props: { padding: 'md' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		expect(el?.className).toContain('p-6');
-	});
-
-	it('applies p-5 (20px) class for padding="sm"', async () => {
-		render(Card, { props: { padding: 'sm' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		expect(el?.className).toContain('p-5');
-	});
-
-	// ── Section-caption helper ─────────────────────────────────────────────────
-
-	it('does NOT render a caption element when caption prop is absent', async () => {
-		render(Card);
-		const caption = document.querySelector('[data-testid="card-caption"]');
-		expect(caption).toBeNull();
-	});
-
-	it('renders the section-caption helper when caption text is provided', async () => {
-		render(Card, { props: { caption: 'Briefkorrespondenz' } });
-		await expect.element(page.getByTestId('card-caption')).toBeInTheDocument();
-	});
-
-	it('caption has font-sans Montserrat token class', async () => {
-		render(Card, { props: { caption: 'Dokumente' } });
-		const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
-		expect(el?.className).toContain('font-sans');
-	});
-
-	it('caption has text-ink-3 token class', async () => {
-		render(Card, { props: { caption: 'Personen' } });
-		const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
-		expect(el?.className).toContain('text-ink-3');
-	});
-
-	it('caption has uppercase class', async () => {
-		render(Card, { props: { caption: 'Übersicht' } });
-		const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
-		expect(el?.className).toContain('uppercase');
-	});
-
-	it('caption has font-bold class (700 weight)', async () => {
-		render(Card, { props: { caption: 'Briefwechsel' } });
-		const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
-		expect(el?.className).toContain('font-bold');
-	});
-
-	it('renders caption text content', async () => {
-		render(Card, { props: { caption: 'Zeitstrahl' } });
-		await expect.element(page.getByText('Zeitstrahl')).toBeInTheDocument();
-	});
-
-	// ── Dark-mode token contract ───────────────────────────────────────────────
-
-	it('accent uses var(--c-accent) token — never raw hex — for dark-mode compatibility', async () => {
-		render(Card, { props: { accent: 'top' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		const style = el?.getAttribute('style') ?? '';
-		// Must use the CSS variable, not any hardcoded hex color
-		expect(style).toContain('var(--c-accent)');
-		expect(style).not.toMatch(/#[0-9a-fA-F]{3,6}/);
-	});
-
-	it('no raw Tailwind color class (e.g. green-*, blue-*) on card element', async () => {
-		render(Card, { props: { accent: 'top' } });
-		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
-		const cls = el?.className ?? '';
-		// Check for raw Tailwind palette colors (bg-green-*, border-blue-*, etc.)
-		expect(cls).not.toMatch(
-			/\b(bg|border|text)-(red|green|blue|yellow|purple|pink|indigo|gray|slate|zinc|stone|orange|amber|lime|emerald|teal|cyan|sky|violet|fuchsia|rose)-\d+/
-		);
-	});
-});

frontend/src/lib/shared/primitives/SegmentedControl.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+import { radioGroupNav } from '$lib/shared/actions/radioGroupNav';
+
+interface Option {
+	value: string;
+	label: string;
+}
+
+interface Props {
+	options: Option[];
+	value: string;
+	onChange: (value: string) => void;
+	label?: string;
+}
+
+let { options, value, onChange, label = undefined }: Props = $props();
+
+// Roving tabindex: the active segment gets tabindex=0; all others -1.
+// If no segment is active yet, fall back to the first so keyboard nav
+// can enter the control.
+const rovingFocus = $derived(
+	options.some((o) => o.value === value) ? value : (options[0]?.value ?? '')
+);
+</script>
+
+<!--
+  §6 Segmented Control — single-select, radiogroup + roving tabindex.
+  Callers supply pre-resolved Paraglide strings for all labels.
+  No {@html} is used on option labels (XSS-safe default escaping only).
+-->
+<div
+	role="radiogroup"
+	aria-label={label}
+	class="inline-flex flex-wrap rounded-sm border border-line md:flex-nowrap"
+	use:radioGroupNav={(v) => onChange(v)}
+>
+	{#each options as option, i (option.value)}
+		<button
+			type="button"
+			role="radio"
+			value={option.value}
+			aria-checked={option.value === value}
+			tabindex={option.value === rovingFocus ? 0 : -1}
+			onclick={() => onChange(option.value)}
+			class="min-h-[44px] cursor-pointer px-4 py-[9px] font-sans text-xs font-bold tracking-[.08em]
+				uppercase transition-colors
+				focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
+				{i > 0 ? 'border-l border-line' : ''}
+				{option.value === value
+				? 'bg-primary text-primary-fg'
+				: 'hover:bg-surface-2 bg-surface text-ink-2'}"
+			>{option.label}</button
+		>
+	{/each}
+</div>

frontend/src/lib/shared/primitives/SegmentedControl.svelte.spec.ts

@@ -0,0 +1,170 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page, userEvent } from 'vitest/browser';
+
+afterEach(cleanup);
+
+const options = [
+	{ value: 'a', label: 'Option A' },
+	{ value: 'b', label: 'Option B' },
+	{ value: 'c', label: 'Option C' }
+];
+
+const { default: SegmentedControl } = await import('./SegmentedControl.svelte');
+
+// ─── Structure & ARIA ─────────────────────────────────────────────────────────
+
+describe('SegmentedControl — structure', () => {
+	it('renders a radiogroup wrapper', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const group = document.querySelector('[role="radiogroup"]');
+		expect(group).not.toBeNull();
+	});
+
+	it('renders one radio per option with the correct label', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		await expect.element(page.getByRole('radio', { name: 'Option A' })).toBeVisible();
+		await expect.element(page.getByRole('radio', { name: 'Option B' })).toBeVisible();
+		await expect.element(page.getByRole('radio', { name: 'Option C' })).toBeVisible();
+	});
+
+	it('active segment has aria-checked="true", inactive ones "false"', async () => {
+		render(SegmentedControl, { props: { options, value: 'b', onChange: vi.fn() } });
+		await expect
+			.element(page.getByRole('radio', { name: 'Option B' }))
+			.toHaveAttribute('aria-checked', 'true');
+		await expect
+			.element(page.getByRole('radio', { name: 'Option A' }))
+			.toHaveAttribute('aria-checked', 'false');
+		await expect
+			.element(page.getByRole('radio', { name: 'Option C' }))
+			.toHaveAttribute('aria-checked', 'false');
+	});
+
+	it('active segment gets tabindex=0, inactive segments tabindex=-1', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const radios = Array.from(document.querySelectorAll('[role="radio"]'));
+		expect(radios[0]?.getAttribute('tabindex')).toBe('0');
+		expect(radios[1]?.getAttribute('tabindex')).toBe('-1');
+		expect(radios[2]?.getAttribute('tabindex')).toBe('-1');
+	});
+
+	it('applies §6 active token classes to the active segment', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const activeRadio = page.getByRole('radio', { name: 'Option A' });
+		await expect.element(activeRadio).toHaveClass(/bg-primary/);
+		await expect.element(activeRadio).toHaveClass(/text-primary-fg/);
+	});
+
+	it('applies §6 inactive token classes to inactive segments', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const inactiveRadio = page.getByRole('radio', { name: 'Option B' });
+		await expect.element(inactiveRadio).toHaveClass(/bg-surface/);
+		await expect.element(inactiveRadio).toHaveClass(/text-ink-2/);
+	});
+
+	it('segment labels are rendered as plain text — no innerHTML injection', async () => {
+		const xssOptions = [{ value: 'x', label: '<img src=x onerror=alert(1)>' }];
+		render(SegmentedControl, { props: { options: xssOptions, value: 'x', onChange: vi.fn() } });
+		// If the label were injected via {@html}, an <img> element would appear
+		const imgs = document.querySelectorAll('img');
+		expect(imgs.length).toBe(0);
+		// The raw text string should appear literally
+		const radio = document.querySelector('[role="radio"]');
+		expect(radio?.textContent).toContain('<img');
+	});
+
+	it('wrapper has border border-line rounded-sm tokens', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const group = document.querySelector('[role="radiogroup"]');
+		expect(group?.className).toMatch(/border-line/);
+		expect(group?.className).toMatch(/rounded-sm/);
+	});
+});
+
+// ─── Interaction ──────────────────────────────────────────────────────────────
+
+describe('SegmentedControl — click selection', () => {
+	it('clicking an inactive segment calls onChange with its value', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'a', onChange } });
+
+		await page.getByRole('radio', { name: 'Option B' }).click();
+
+		expect(onChange).toHaveBeenCalledWith('b');
+	});
+
+	it('clicking the already-active segment still calls onChange', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'a', onChange } });
+
+		await page.getByRole('radio', { name: 'Option A' }).click();
+
+		expect(onChange).toHaveBeenCalledWith('a');
+	});
+});
+
+// ─── Keyboard ─────────────────────────────────────────────────────────────────
+
+describe('SegmentedControl — keyboard roving tabindex', () => {
+	it('ArrowRight moves focus and selection to the next segment', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'a', onChange } });
+
+		await page.getByRole('radio', { name: 'Option A' }).click();
+		await userEvent.keyboard('{ArrowRight}');
+
+		expect(onChange).toHaveBeenCalledWith('b');
+	});
+
+	it('ArrowLeft moves focus to the previous segment', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'b', onChange } });
+
+		await page.getByRole('radio', { name: 'Option B' }).click();
+		await userEvent.keyboard('{ArrowLeft}');
+
+		expect(onChange).toHaveBeenCalledWith('a');
+	});
+
+	it('ArrowRight wraps from last to first', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'c', onChange } });
+
+		await page.getByRole('radio', { name: 'Option C' }).click();
+		await userEvent.keyboard('{ArrowRight}');
+
+		expect(onChange).toHaveBeenCalledWith('a');
+	});
+
+	it('ArrowLeft wraps from first to last', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'a', onChange } });
+
+		await page.getByRole('radio', { name: 'Option A' }).click();
+		await userEvent.keyboard('{ArrowLeft}');
+
+		expect(onChange).toHaveBeenCalledWith('c');
+	});
+});
+
+// ─── Touch target ─────────────────────────────────────────────────────────────
+
+describe('SegmentedControl — geometry', () => {
+	it('each segment meets the 44px min-height touch target', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const radios = document.querySelectorAll('[role="radio"]');
+		for (const radio of Array.from(radios)) {
+			expect(radio.className).toMatch(/min-h-\[44px\]/);
+		}
+	});
+
+	it('each segment has the px-4 py-[9px] padding classes', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const radios = document.querySelectorAll('[role="radio"]');
+		for (const radio of Array.from(radios)) {
+			expect(radio.className).toMatch(/px-4/);
+			expect(radio.className).toMatch(/py-\[9px\]/);
+		}
+	});
+});

frontend/src/lib/shared/primitives/ThemeToggle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { onMount } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import SegmentedControl from './SegmentedControl.svelte';
 
 type Theme = 'light' | 'dark';
 
@@ -24,51 +25,31 @@ const themeLabel = $derived(
 	theme === 'dark' ? m.theme_toggle_to_light() : m.theme_toggle_to_dark()
 );
 
-function toggle() {
+const themeOptions = $derived([
-	theme = theme === 'dark' ? 'light' : 'dark';
+	{ value: 'light', label: m.theme_segment_light() },
+	{ value: 'dark', label: m.theme_segment_dark() }
+]);
+
+function handleChange(next: string) {
+	if (next !== 'light' && next !== 'dark') return;
+	theme = next as Theme;
 	localStorage.setItem('theme', theme);
 	document.documentElement.setAttribute('data-theme', theme);
 }
 </script>
 
-<button
+<!--
-	type="button"
+  ThemeToggle — binary light/dark segmented control.
-	onclick={toggle}
+  File kept at $lib/shared/primitives/ThemeToggle.svelte (required by #862).
-	aria-label={themeLabel}
+  Boot FOUC prevention: a tiny inline script in <head> reads localStorage['theme']
-	title={themeLabel}
+  and sets data-theme before paint — that script is unchanged by this refactor.
-	class="rounded p-1.5 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+  The aria-label on the group communicates the toggle purpose to screen readers.
->
+-->
-	{#if theme === 'dark'}
+<div aria-label={themeLabel} title={themeLabel}>
-		<!-- Sun icon — click to go light -->
+	<SegmentedControl
-		<svg
+		options={themeOptions}
-			class="h-5 w-5"
+		value={theme}
-			viewBox="0 0 24 24"
+		onChange={handleChange}
-			fill="none"
+		label={m.theme_toggle_label()}
-			stroke="currentColor"
+	/>
-			stroke-width="2"
+</div>
-			aria-hidden="true"
-		>
-			<circle cx="12" cy="12" r="4" />
-			<path
-				stroke-linecap="round"
-				d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
-			/>
-		</svg>
-	{:else}
-		<!-- Moon icon — click to go dark -->
-		<svg
-			class="h-5 w-5"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			aria-hidden="true"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
-			/>
-		</svg>
-	{/if}
-</button>

frontend/src/lib/shared/primitives/ThemeToggle.svelte.spec.ts

@@ -8,38 +8,59 @@ afterEach(() => {
 	localStorage.removeItem('theme');
 });
 
-describe('ThemeToggle — label derivation (light mode)', () => {
+describe('ThemeToggle — renders segments (light mode)', () => {
 	beforeEach(() => {
 		localStorage.setItem('theme', 'light');
 	});
 
-	it('aria-label invites switching to dark mode when theme is light', async () => {
+	it('renders a radiogroup with Hell and Dunkel segments', async () => {
 		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
+		expect(document.querySelector('[role="radiogroup"]')).not.toBeNull();
-		expect(btn.getAttribute('aria-label')).toBe('Zu dunklem Design wechseln');
+		await expect.element(page.getByRole('radio', { name: 'Hell' })).toBeVisible();
+		await expect.element(page.getByRole('radio', { name: 'Dunkel' })).toBeVisible();
 	});
 
-	it('title equals aria-label in light mode', async () => {
+	it('Hell segment is aria-checked="true" in light mode', async () => {
 		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
+		await expect
-		expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
+			.element(page.getByRole('radio', { name: 'Hell' }))
+			.toHaveAttribute('aria-checked', 'true');
+		await expect
+			.element(page.getByRole('radio', { name: 'Dunkel' }))
+			.toHaveAttribute('aria-checked', 'false');
 	});
 });
 
-describe('ThemeToggle — label derivation (dark mode)', () => {
+describe('ThemeToggle — renders segments (dark mode)', () => {
 	beforeEach(() => {
 		localStorage.setItem('theme', 'dark');
 	});
 
-	it('aria-label invites switching to light mode when theme is dark', async () => {
+	it('Dunkel segment is aria-checked="true" in dark mode', async () => {
 		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
+		await expect
-		expect(btn.getAttribute('aria-label')).toBe('Zu hellem Design wechseln');
+			.element(page.getByRole('radio', { name: 'Dunkel' }))
-	});
+			.toHaveAttribute('aria-checked', 'true');
-
+		await expect
-	it('title equals aria-label in dark mode', async () => {
+			.element(page.getByRole('radio', { name: 'Hell' }))
-		render(ThemeToggle);
+			.toHaveAttribute('aria-checked', 'false');
-		const btn = await page.getByRole('button').element();
+	});
-		expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
+});
+
+describe('ThemeToggle — theme switching', () => {
+	beforeEach(() => {
+		localStorage.setItem('theme', 'light');
+	});
+
+	it('clicking Dunkel sets data-theme=dark on documentElement', async () => {
+		render(ThemeToggle);
+		await page.getByRole('radio', { name: 'Dunkel' }).click();
+		expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+	});
+
+	it('clicking Dunkel persists theme in localStorage', async () => {
+		render(ThemeToggle);
+		await page.getByRole('radio', { name: 'Dunkel' }).click();
+		expect(localStorage.getItem('theme')).toBe('dark');
 	});
 });

frontend/src/lib/timeline/TimelineFilters.svelte

@@ -42,14 +42,16 @@ function reset() {
 </script>
 
 {#snippet layerToggle(label: string, testid: string, pressed: boolean, toggle: () => void)}
+	<!-- §6 re-skin: bg-primary/text-primary-fg (active) · bg-surface/text-ink-2 (inactive)
+	     Typography: Montserrat 12px/700 tracking-[.08em] UPPERCASE; min-h-[44px] touch target -->
 	<button
 		type="button"
 		data-testid={testid}
 		aria-pressed={pressed}
 		onclick={toggle}
-		class="inline-flex min-h-[44px] items-center gap-2 rounded border px-3 font-sans text-sm transition-colors {pressed
+		class="inline-flex min-h-[44px] items-center gap-2 rounded-sm border px-4 py-[9px] font-sans text-xs font-bold tracking-[.08em] uppercase transition-colors focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none {pressed
 			? 'border-primary bg-primary text-primary-fg'
-			: 'border-line bg-muted text-ink-2 hover:bg-line'}"
+			: 'hover:bg-surface-2 border-line bg-surface text-ink-2'}"
 	>
 		<span
 			aria-hidden="true"
@@ -73,7 +75,7 @@ function reset() {
 			aria-expanded={open}
 			aria-controls={open ? 'timeline-filter-panel' : undefined}
 			onclick={() => (open = !open)}
-			class="inline-flex min-h-[44px] items-center gap-2 rounded border border-line bg-surface px-4 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
+			class="hover:bg-surface-2 inline-flex min-h-[44px] items-center gap-2 rounded-sm border border-line bg-surface px-4 font-sans text-xs font-bold tracking-[.08em] text-ink-2 uppercase transition-colors"
 		>
 			{hiddenCount === 0
 				? m.timeline_filter_trigger()

frontend/src/routes/geschichten/new/TypeSelector.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import { radioGroupNav } from '$lib/shared/actions/radioGroupNav';
+import SegmentedControl from '$lib/shared/primitives/SegmentedControl.svelte';
 
 type GeschichteType = 'STORY' | 'JOURNEY';
 
-const TYPES: GeschichteType[] = ['STORY', 'JOURNEY'];
-
 interface Props {
 	onweiter: (type: GeschichteType) => void;
 }
@@ -15,10 +13,6 @@ let { onweiter }: Props = $props();
 let selected = $state<GeschichteType | null>(null);
 let announcement = $state('');
 
-// Roving-tabindex holder: falls back to the first card so keyboard nav can start
-// even when nothing is selected (all cards at tabindex=-1 would be a keyboard dead-spot).
-const rovingFocusType = $derived(selected ?? TYPES[0]);
-
 function select(type: GeschichteType) {
 	selected = type;
 	announcement = '';
@@ -32,15 +26,10 @@ function handleWeiter() {
 	onweiter(selected);
 }
 
-const titles: Record<GeschichteType, () => string> = {
+const typeOptions = [
-	STORY: m.journey_selector_story_title,
+	{ value: 'STORY', label: m.journey_selector_story_title() },
-	JOURNEY: m.journey_selector_journey_title
+	{ value: 'JOURNEY', label: m.journey_selector_journey_title() }
-};
+];
-
-const descs: Record<GeschichteType, () => string> = {
-	STORY: m.journey_selector_story_desc,
-	JOURNEY: m.journey_selector_journey_desc
-};
 </script>
 
 <div>
@@ -48,31 +37,14 @@ const descs: Record<GeschichteType, () => string> = {
 		{m.journey_selector_question()}
 	</p>
 
-	<div
+	<SegmentedControl
-		role="radiogroup"
+		options={typeOptions}
-		aria-labelledby="type-selector-label"
+		value={selected ?? ''}
-		class="grid grid-cols-1 gap-4 sm:grid-cols-2"
+		onChange={(v) => {
-		use:radioGroupNav={(v) => {
+			if (v === 'STORY' || v === 'JOURNEY') select(v);
-			if (TYPES.includes(v as GeschichteType)) select(v as GeschichteType);
 		}}
-	>
+		label={m.journey_selector_question()}
-		{#each TYPES as type (type)}
+	/>
-			<button
-				type="button"
-				role="radio"
-				value={type}
-				aria-checked={selected === type}
-				tabindex={type === rovingFocusType ? 0 : -1}
-				onclick={() => select(type)}
-				class="min-h-[64px] cursor-pointer rounded border px-4 py-3 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {selected === type
-					? 'border-primary bg-primary text-primary-fg'
-					: 'border-line bg-surface text-ink hover:border-primary/50'}"
-			>
-				<span class="block font-sans text-sm font-bold">{titles[type]()}</span>
-				<span class="mt-1 block font-sans text-xs text-current opacity-70">{descs[type]()}</span>
-			</button>
-		{/each}
-	</div>
 
 	<div aria-live="polite" aria-atomic="true" class="sr-only">{announcement}</div>
 

frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts

@@ -18,13 +18,18 @@ describe('TypeSelector', () => {
 		await expect.element(page.getByRole('radio', { name: /Lesereise/i })).toBeVisible();
 	});
 
-	it('radiogroup is correctly labelled', async () => {
+	it('radiogroup is correctly labelled (via aria-label or aria-labelledby)', async () => {
 		render(TypeSelector, { props: { onweiter: vi.fn() } });
 
 		const group = document.querySelector('[role="radiogroup"]');
-		const labelledBy = group?.getAttribute('aria-labelledby');
+		// SegmentedControl uses aria-label; the old TypeSelector used aria-labelledby.
+		// Accept either as long as the accessible name is non-empty.
+		const ariaLabel = group?.getAttribute('aria-label') ?? '';
+		const labelledBy = group?.getAttribute('aria-labelledby') ?? '';
 		const labelEl = labelledBy ? document.getElementById(labelledBy) : null;
-		expect(labelEl?.textContent?.trim().length).toBeGreaterThan(0);
+		const hasAccessibleName =
+			ariaLabel.trim().length > 0 || (labelEl?.textContent?.trim().length ?? 0) > 0;
+		expect(hasAccessibleName).toBe(true);
 	});
 
 	it('Weiter button has aria-disabled=true when nothing is selected', async () => {