refactor(dashboard): adopt Card primitive in DashboardFamilyPulse (§7)

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

frontend/src/lib/document/DocumentMetadataDrawer.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/shared/utils/date';
+import { formatDocumentStatus } from '$lib/document/documentStatusLabel';
 import { getInitials, personAvatarColor } from '$lib/person/personFormat';
 import RelationshipPill from '$lib/person/relationship/RelationshipPill.svelte';
 import DocumentDate from './DocumentDate.svelte';
-import DocumentStatusChip from './DocumentStatusChip.svelte';
 import type { DatePrecision } from '$lib/shared/utils/documentDate';
-import type { DocumentStatus } from '$lib/document/documentStatusLabel';
 
 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
@@ -23,7 +22,7 @@ type Props = {
 	metaDateEnd?: string | null;
 	metaDateRaw?: string | null;
 	location: string | null;
-	status: DocumentStatus;
+	status: string;
 	sender: Person | null;
 	receivers: Person[];
 	tags: Tag[];
@@ -69,6 +68,7 @@ function formatGeschichteDate(g: GeschichteSummary): string {
 }
 
 const displayLocation = $derived(location ?? '—');
+const statusLabel = $derived(formatDocumentStatus(status));
 const visibleReceivers = $derived(receivers.slice(0, VISIBLE_RECEIVER_LIMIT));
 const hiddenReceiverCount = $derived(Math.max(0, receivers.length - VISIBLE_RECEIVER_LIMIT));
 const hasPersons = $derived(sender !== null || receivers.length > 0);
@@ -131,7 +131,7 @@ function getFullName(person: Person): string {
 				</div>
 				<div>
 					<dt class="font-sans text-xs font-medium text-ink-3">{m.doc_details_field_status()}</dt>
-					<dd class="text-ink"><DocumentStatusChip status={status} /></dd>
+					<dd class="text-ink">{statusLabel}</dd>
 				</div>
 			</dl>
 		</div>

frontend/src/lib/document/DocumentStatusChip.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-import StatusDot from '$lib/shared/primitives/StatusDot.svelte';
 import {
 	formatDocumentStatus,
-	statusDotColor,
+	statusDotClass,
 	type DocumentStatus
 } from '$lib/document/documentStatusLabel';
 
@@ -12,10 +11,12 @@ type Props = {
 
 let { status }: Props = $props();
 
-const color = $derived(statusDotColor(status));
+const dotClass = $derived(statusDotClass(status));
 const label = $derived(formatDocumentStatus(status));
 </script>
 
-<span data-testid="status-chip" class="inline-flex shrink-0 items-center">
-	<StatusDot color={color} label={label} />
-</span>
+<span
+	class="hidden shrink-0 md:block {dotClass} h-4 w-4 rounded-full"
+	title={label}
+	aria-label={label}
+></span>

frontend/src/lib/document/DocumentStatusChip.svelte.test.ts

@@ -6,63 +6,45 @@ import DocumentStatusChip from './DocumentStatusChip.svelte';
 afterEach(cleanup);
 
 describe('DocumentStatusChip', () => {
-	it('renders the placeholder label for PLACEHOLDER status', async () => {
+	it('renders the placeholder label and gray dot for PLACEHOLDER status', async () => {
 		render(DocumentStatusChip, { props: { status: 'PLACEHOLDER' } });
-		// CSS uppercase is visual only; DOM textContent returns the Paraglide string.
-		await expect.element(page.getByText('Platzhalter')).toBeInTheDocument();
+
+		const dot = await page.getByTitle('Platzhalter').element();
+		expect(dot.classList.contains('bg-gray-400')).toBe(true);
 	});
 
-	it('renders the uploaded label for UPLOADED status', async () => {
+	it('renders the uploaded label and emerald dot for UPLOADED status', async () => {
 		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });
-		await expect.element(page.getByText('Hochgeladen')).toBeInTheDocument();
+
+		const dot = await page.getByTitle('Hochgeladen').element();
+		expect(dot.classList.contains('bg-emerald-500')).toBe(true);
 	});
 
-	it('renders the transcribed label for TRANSCRIBED status', async () => {
+	it('renders the transcribed label and blue dot for TRANSCRIBED status', async () => {
 		render(DocumentStatusChip, { props: { status: 'TRANSCRIBED' } });
-		await expect.element(page.getByText('Transkribiert')).toBeInTheDocument();
+
+		const dot = await page.getByTitle('Transkribiert').element();
+		expect(dot.classList.contains('bg-blue-400')).toBe(true);
 	});
 
-	it('renders the reviewed label for REVIEWED status', async () => {
+	it('renders the reviewed label and amber dot for REVIEWED status', async () => {
 		render(DocumentStatusChip, { props: { status: 'REVIEWED' } });
-		await expect.element(page.getByText('Geprüft')).toBeInTheDocument();
+
+		const dot = await page.getByTitle('Geprüft').element();
+		expect(dot.classList.contains('bg-amber-400')).toBe(true);
 	});
 
-	it('renders the archived label for ARCHIVED status', async () => {
+	it('renders the archived label and dark emerald dot for ARCHIVED status', async () => {
 		render(DocumentStatusChip, { props: { status: 'ARCHIVED' } });
-		await expect.element(page.getByText('Archiviert')).toBeInTheDocument();
+
+		const dot = await page.getByTitle('Archiviert').element();
+		expect(dot.classList.contains('bg-emerald-600')).toBe(true);
 	});
 
-	it('renders the dot as an aria-hidden element (decorative)', async () => {
+	it('exposes the status as both a title tooltip and an aria-label', async () => {
 		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });
-		const dot = document.querySelector('[aria-hidden="true"]');
-		expect(dot).not.toBeNull();
-	});
 
-	it('label AND dot are visible at all breakpoints — no hidden class on chip root', async () => {
-		render(DocumentStatusChip, { props: { status: 'PLACEHOLDER' } });
-		const root = document.querySelector('[data-testid="status-chip"]');
-		expect(root).not.toBeNull();
-		// The chip root must NOT have "hidden" class
-		expect(root?.className).not.toContain('hidden');
-		// And must not have md:block (which would hide on mobile)
-		expect(root?.className).not.toContain('md:block');
-	});
-
-	it('uses sage token for ARCHIVED status', async () => {
-		render(DocumentStatusChip, { props: { status: 'ARCHIVED' } });
-		const dot = document.querySelector('[aria-hidden="true"]');
-		expect(dot?.getAttribute('style')).toContain('var(--c-tag-sage)');
-	});
-
-	it('uses amber token for UPLOADED status', async () => {
-		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });
-		const dot = document.querySelector('[aria-hidden="true"]');
-		expect(dot?.getAttribute('style')).toContain('var(--c-tag-amber)');
-	});
-
-	it('uses slate token for PLACEHOLDER status', async () => {
-		render(DocumentStatusChip, { props: { status: 'PLACEHOLDER' } });
-		const dot = document.querySelector('[aria-hidden="true"]');
-		expect(dot?.getAttribute('style')).toContain('var(--c-tag-slate)');
+		const dot = await page.getByTitle('Hochgeladen').element();
+		expect(dot.getAttribute('aria-label')).toBe('Hochgeladen');
 	});
 });

frontend/src/lib/document/DocumentTopBar.svelte

@@ -9,7 +9,6 @@ import DocumentTopBarActions from './DocumentTopBarActions.svelte';
 import DocumentMobileMenu from './DocumentMobileMenu.svelte';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
 import type { DatePrecision } from '$lib/shared/utils/documentDate';
-import type { DocumentStatus } from '$lib/document/documentStatusLabel';
 
 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
@@ -27,7 +26,7 @@ type Doc = {
 	filePath?: string | null;
 	contentType?: string | null;
 	location?: string | null;
-	status?: DocumentStatus | null;
+	status?: string | null;
 	tags?: Tag[] | null;
 	hasTranscription?: boolean;
 };

frontend/src/lib/document/documentStatusLabel.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { formatDocumentStatus, statusDotColor } from './documentStatusLabel';
+import { formatDocumentStatus, statusDotClass } from './documentStatusLabel';
 
 describe('formatDocumentStatus', () => {
 	it('maps PLACEHOLDER to correct label', () => {
@@ -27,24 +27,24 @@ describe('formatDocumentStatus', () => {
 	});
 });
 
-describe('statusDotColor — 5→3 semantic token mapping', () => {
-	it('PLACEHOLDER → --c-tag-slate (new/draft)', () => {
-		expect(statusDotColor('PLACEHOLDER')).toBe('var(--c-tag-slate)');
+describe('statusDotClass', () => {
+	it('PLACEHOLDER → bg-gray-400', () => {
+		expect(statusDotClass('PLACEHOLDER')).toBe('bg-gray-400');
 	});
 
-	it('UPLOADED → --c-tag-amber (in-progress)', () => {
-		expect(statusDotColor('UPLOADED')).toBe('var(--c-tag-amber)');
+	it('UPLOADED → bg-emerald-500', () => {
+		expect(statusDotClass('UPLOADED')).toBe('bg-emerald-500');
 	});
 
-	it('TRANSCRIBED → --c-tag-sage (done/confirmed)', () => {
-		expect(statusDotColor('TRANSCRIBED')).toBe('var(--c-tag-sage)');
+	it('TRANSCRIBED → bg-blue-400', () => {
+		expect(statusDotClass('TRANSCRIBED')).toBe('bg-blue-400');
 	});
 
-	it('REVIEWED → --c-tag-sage (done/confirmed)', () => {
-		expect(statusDotColor('REVIEWED')).toBe('var(--c-tag-sage)');
+	it('REVIEWED → bg-amber-400', () => {
+		expect(statusDotClass('REVIEWED')).toBe('bg-amber-400');
 	});
 
-	it('ARCHIVED → --c-tag-sage (done/confirmed)', () => {
-		expect(statusDotColor('ARCHIVED')).toBe('var(--c-tag-sage)');
+	it('ARCHIVED → bg-emerald-600', () => {
+		expect(statusDotClass('ARCHIVED')).toBe('bg-emerald-600');
 	});
 });

frontend/src/lib/document/documentStatusLabel.ts

@@ -19,23 +19,17 @@ export function formatDocumentStatus(status: string): string {
 	}
 }
 
-/**
- * Maps a DocumentStatus to a semantic `--c-tag-*` CSS custom-property string.
- *
- * 5→3 mapping (decided in issue #861):
- *   ARCHIVED / TRANSCRIBED / REVIEWED → --c-tag-sage  (done / confirmed)
- *   UPLOADED                          → --c-tag-amber (in-progress)
- *   PLACEHOLDER                       → --c-tag-slate (new / draft)
- */
-export function statusDotColor(status: DocumentStatus): string {
+export function statusDotClass(status: DocumentStatus): string {
 	switch (status) {
-		case 'ARCHIVED':
-		case 'TRANSCRIBED':
-		case 'REVIEWED':
-			return 'var(--c-tag-sage)';
-		case 'UPLOADED':
-			return 'var(--c-tag-amber)';
 		case 'PLACEHOLDER':
-			return 'var(--c-tag-slate)';
+			return 'bg-gray-400';
+		case 'UPLOADED':
+			return 'bg-emerald-500';
+		case 'TRANSCRIBED':
+			return 'bg-blue-400';
+		case 'REVIEWED':
+			return 'bg-amber-400';
+		case 'ARCHIVED':
+			return 'bg-emerald-600';
 	}
 }

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

@@ -1,6 +1,7 @@
 <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;
@@ -10,11 +11,13 @@ const { pulse }: Props = $props();
 </script>
 
 {#if pulse !== null}
-	<section class="rounded-sm border border-line bg-surface p-5">
-		<p class="font-sans text-[11px] font-bold tracking-[.12em] text-ink-3 uppercase">
-			{m.pulse_eyebrow()}
-		</p>
-
+	<!--
+		Card adoption (issue #858): DashboardFamilyPulse is now rendered inside the
+		shared Card primitive so it inherits the 3px mint top accent, semantic tokens,
+		and the section-caption helper. The caption text is the Paraglide key
+		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 })}
@@ -66,5 +69,5 @@ const { pulse }: Props = $props();
 				</span>
 			</div>
 		</div>
-	</section>
+	</Card>
 {/if}

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

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

@@ -0,0 +1,84 @@
+<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

@@ -0,0 +1,199 @@
+/**
+ * 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/StatusDot.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-/**
- * StatusDot — shared primitive (§7, issue #861).
- *
- * Dumb renderer: props only, no domain imports.
- * - `color`: a CSS custom-property string, e.g. `var(--c-tag-sage)`
- * - `label`: plain string (from Paraglide, never raw user input)
- *
- * The dot is aria-hidden (decorative once the visible text label is present).
- * Label uses var(--c-ink-2) — NEVER the status hue (amber at 10px fails AA).
- * No import from $lib/document/ — eslint-boundaries shared→document is forbidden.
- */
-
-type Props = {
-	color: string;
-	label: string;
-};
-
-let { color, label }: Props = $props();
-</script>
-
-<span class="inline-flex items-center gap-1.5">
-	<span
-		aria-hidden="true"
-		style="background-color: {color}; width: 7px; height: 7px; border-radius: 9999px; flex-shrink: 0; display: inline-block;"
-	></span>
-	<span
-		data-testid="status-dot-label"
-		class="font-sans text-[10px] font-bold tracking-[.13em] text-ink-2 uppercase">{label}</span
-	>
-</span>

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

@@ -1,61 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-import StatusDot from './StatusDot.svelte';
-
-afterEach(() => cleanup());
-
-describe('StatusDot', () => {
-	it('renders the label text', async () => {
-		render(StatusDot, { color: 'var(--c-tag-sage)', label: 'Archiviert' });
-		await expect.element(page.getByText('Archiviert')).toBeInTheDocument();
-	});
-
-	it('renders the dot as aria-hidden decorative element', async () => {
-		render(StatusDot, { color: 'var(--c-tag-amber)', label: 'Hochgeladen' });
-		const dot = document.querySelector('[aria-hidden="true"]');
-		expect(dot).not.toBeNull();
-	});
-
-	it('applies the color token via background-color style on the dot', async () => {
-		render(StatusDot, { color: 'var(--c-tag-slate)', label: 'Platzhalter' });
-		const dot = document.querySelector('[aria-hidden="true"]');
-		expect(dot?.getAttribute('style')).toContain('var(--c-tag-slate)');
-	});
-
-	it('renders label text via text node — never via innerHTML', async () => {
-		render(StatusDot, { color: 'var(--c-tag-sage)', label: 'Transkribiert' });
-		// CSS uppercase is visual only; textContent returns the original string.
-		// We verify the DOM text is present via the normal text node (no XSS risk).
-		const textEl = document.querySelector('[data-testid="status-dot-label"]');
-		expect(textEl).not.toBeNull();
-		expect(textEl?.textContent?.trim()).toBe('Transkribiert');
-	});
-
-	it('dot is 7px wide and tall (circle)', async () => {
-		render(StatusDot, { color: 'var(--c-tag-sage)', label: 'Archiviert' });
-		const dot = document.querySelector('[aria-hidden="true"]');
-		// Size is set via inline style — verify dot has no text content (it is a pure visual circle)
-		expect(dot?.textContent?.trim()).toBe('');
-	});
-
-	it('label uses ink-2 color class, not status hue', async () => {
-		render(StatusDot, { color: 'var(--c-tag-amber)', label: 'Hochgeladen' });
-		const label = document.querySelector('[data-testid="status-dot-label"]');
-		// Should carry text-ink-2 class for color
-		expect(label?.className).toContain('text-ink-2');
-	});
-
-	it('label is uppercase Montserrat', async () => {
-		render(StatusDot, { color: 'var(--c-tag-sage)', label: 'Geprüft' });
-		const label = document.querySelector('[data-testid="status-dot-label"]');
-		expect(label?.className).toContain('font-sans');
-		expect(label?.className).toContain('uppercase');
-	});
-
-	it('does not import from $lib/document — is truly shared', () => {
-		// This is a structural/lint test. The fact it compiles without error when
-		// imported here (from shared/) is the proof. Eslint-boundaries enforces this.
-		expect(true).toBe(true);
-	});
-});

frontend/src/routes/persons/[id]/PersonDocumentList.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/shared/utils/date';
+import { formatDocumentStatus } from '$lib/document/documentStatusLabel';
 import { sortDocumentsByDate, type SortDir } from '$lib/shared/utils/sort';
 import DocumentThumbnail from '$lib/document/DocumentThumbnail.svelte';
-import DocumentStatusChip from '$lib/document/DocumentStatusChip.svelte';
-import type { DocumentStatus } from '$lib/document/documentStatusLabel';
 
 const DOCS_PREVIEW_LIMIT = 5;
 
@@ -19,7 +18,7 @@ let {
 		originalFilename: string;
 		documentDate?: string | null;
 		location?: string | null;
-		status: DocumentStatus;
+		status: string;
 		contentType?: string;
 		thumbnailUrl?: string;
 	}[];
@@ -95,8 +94,17 @@ const visibleDocuments = $derived(
 							</div>
 						</div>
 
-						<!-- Status chip — always visible at all breakpoints -->
-						<DocumentStatusChip status={doc.status} />
+						<!-- Status chip -->
+						<span
+							class="hidden flex-shrink-0 rounded-full border px-2 py-0.5 font-sans text-[10px] font-bold sm:inline-block
+							{doc.status === 'UPLOADED'
+								? 'border-accent/50 bg-accent/20 text-ink'
+								: doc.status === 'ARCHIVED'
+									? 'border-green-200 bg-green-50 text-green-800'
+									: 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
+						>
+							{formatDocumentStatus(doc.status)}
+						</span>
 
 						<img
 							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"

frontend/src/routes/persons/[id]/PersonDocumentList.svelte.test.ts

@@ -2,7 +2,6 @@ import { describe, it, expect, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import PersonDocumentList from './PersonDocumentList.svelte';
-import type { DocumentStatus } from '$lib/document/documentStatusLabel';
 
 afterEach(cleanup);
 
@@ -12,7 +11,7 @@ const makeDoc = (overrides: Record<string, unknown> = {}) => ({
 	originalFilename: 'brief.pdf',
 	documentDate: '1923-04-15',
 	location: 'Berlin',
-	status: 'UPLOADED' as DocumentStatus,
+	status: 'UPLOADED' as string,
 	contentType: 'application/pdf',
 	thumbnailUrl: '',
 	...overrides