feat(ui): add OverflowPillButton — tooltip, Escape focus return, use:clickOutside

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

frontend/src/lib/components/OverflowPillButton.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { tick } from 'svelte';
+import { clickOutside } from '$lib/actions/clickOutside';
+
+type Person = { id: string; firstName: string; lastName: string };
+
+type Props = {
+	extraCount: number;
+	persons: Person[];
+};
+
+let { extraCount, persons }: Props = $props();
+
+let open = $state(false);
+let buttonEl: HTMLButtonElement | undefined = $state();
+
+function toggle() {
+	open = !open;
+}
+
+async function close() {
+	open = false;
+	await tick();
+	buttonEl?.focus();
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === 'Escape') {
+		e.stopPropagation();
+		close();
+	}
+}
+</script>
+
+<div
+	class="relative hidden md:block"
+	use:clickOutside
+	onclickoutside={() => (open = false)}
+	onkeydown={handleKeydown}
+>
+	<button
+		bind:this={buttonEl}
+		type="button"
+		aria-haspopup="true"
+		aria-expanded={open}
+		aria-label="{extraCount} weitere Empfänger anzeigen"
+		onclick={toggle}
+		onkeydown={handleKeydown}
+		class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[9px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
+	>
+		+{extraCount} weitere
+	</button>
+
+	{#if open}
+		<div
+			role="list"
+			class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg"
+		>
+			<p class="mb-2 text-[9px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
+			{#each persons as person (person.id)}
+				<div role="listitem">
+					<a
+						href="/persons/{person.id}"
+						class="block py-0.5 text-[11px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
+					>
+						{person.firstName}
+						{person.lastName}
+					</a>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>