feat(bulk-upload): add FileSwitcherStrip component

Horizontal chip strip for switching between files in a bulk upload session.
Supports keyboard navigation (arrow keys cycle within the strip), error state
chips, and onSelect/onRemove callbacks.

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

frontend/src/lib/components/document/FileSwitcherStrip.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+export interface FileEntry {
+	id: string;
+	file: File;
+	title: string;
+	status: 'idle' | 'error';
+}
+
+let {
+	files,
+	activeId,
+	onSelect,
+	onRemove
+}: {
+	files: FileEntry[];
+	activeId: string;
+	onSelect: (id: string) => void;
+	onRemove: (id: string) => void;
+} = $props();
+
+let ulEl = $state<HTMLUListElement | null>(null);
+
+$effect(() => {
+	if (!ulEl) return;
+	const node = ulEl;
+
+	function handleKeyDown(event: KeyboardEvent) {
+		const buttons = Array.from(node.querySelectorAll<HTMLElement>('[role="button"]'));
+		if (buttons.length === 0) return;
+
+		const focusedIndex = buttons.indexOf(document.activeElement as HTMLElement);
+		if (focusedIndex === -1) return;
+
+		if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+			event.preventDefault();
+			const nextIndex = (focusedIndex + 1) % buttons.length;
+			buttons[nextIndex].focus();
+		} else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+			event.preventDefault();
+			const prevIndex = (focusedIndex - 1 + buttons.length) % buttons.length;
+			buttons[prevIndex].focus();
+		}
+	}
+
+	node.addEventListener('keydown', handleKeyDown);
+	return () => {
+		node.removeEventListener('keydown', handleKeyDown);
+	};
+});
+</script>
+
+<ul
+	bind:this={ulEl}
+	data-testid="file-switcher-strip"
+	aria-live="polite"
+	role="list"
+	class="flex flex-row gap-2 overflow-x-auto px-1 py-2"
+>
+	{#each files as entry (entry.id)}
+		<li role="listitem" class="inline-flex items-center gap-0.5">
+			<button
+				type="button"
+				role="button"
+				tabindex="0"
+				aria-current={entry.id === activeId ? 'true' : undefined}
+				data-status={entry.status}
+				data-chip-id={entry.id}
+				onclick={() => onSelect(entry.id)}
+				class={[
+					'inline-flex cursor-pointer items-center gap-1 rounded-sm border px-3 py-1.5 text-xs font-medium transition-colors',
+					entry.id === activeId
+						? 'border-brand-mint bg-brand-mint/10 font-bold text-brand-navy'
+						: 'border-brand-sand bg-white text-brand-navy',
+					entry.status === 'error'
+						? 'border-dashed border-red-300 bg-red-50 text-red-700'
+						: ''
+				].join(' ')}
+				>{entry.title}</button
+			>
+			<button
+				type="button"
+				aria-label="Entfernen"
+				data-remove-id={entry.id}
+				onclick={() => onRemove(entry.id)}
+				class="ml-1 text-xs text-gray-400 hover:text-brand-navy"
+			>
+				×
+			</button>
+		</li>
+	{/each}
+</ul>