final flows including emails for passwords

frontend/src/lib/components/AccordionItem.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
 
-	let { title, open = $bindable(false), children }: { title: string; open?: boolean; children: Snippet } = $props();
+	let {
+		title,
+		icon,
+		open = $bindable(false),
+		children
+	}: { title: string; icon?: Snippet; open?: boolean; children: Snippet } = $props();
 </script>
 
 <div class="accordion-item" class:open>
-	<button
-		class="accordion-trigger"
-		onclick={() => (open = !open)}
-		aria-expanded={open}
-	>
-		<span>{title}</span>
-		<span class="accordion-arrow">{open ? '▾' : '▸'}</span>
+	<button class="accordion-trigger" onclick={() => (open = !open)} aria-expanded={open}>
+		<span class="accordion-title">
+			{#if icon}
+				<span class="accordion-icon">{@render icon()}</span>
+			{/if}
+			<span>{title}</span>
+		</span>
+		<span class="accordion-arrow" class:rotated={open}><ChevronDown /></span>
 	</button>
 	{#if open}
 		<div class="accordion-body">
@@ -21,16 +28,58 @@
 </div>
 
 <style>
-	.accordion-item { border-bottom: 1px solid #f3f4f6; }
-	.accordion-item:last-child { border-bottom: none; }
-	.accordion-trigger {
-		display: flex; justify-content: space-between; align-items: center;
-		width: 100%; padding: 0.7rem 1rem;
-		background: #fafafa; border: none;
-		font-size: 0.95rem; font-weight: 600; color: #374151;
-		cursor: pointer; text-align: left;
+	.accordion-item {
+		border-bottom: 1px solid #f3f4f6;
 	}
-	.accordion-trigger:hover { background: #f3f4f6; }
-	.accordion-arrow { font-size: 0.8rem; color: #9ca3af; }
-	.accordion-body { padding: 1rem; }
-</style>
+	.accordion-item:last-child {
+		border-bottom: none;
+	}
+	.accordion-trigger {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		padding: 0.7rem 1rem;
+		background: #fafafa;
+		border: none;
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: #374151;
+		cursor: pointer;
+		text-align: left;
+	}
+	.accordion-trigger:hover {
+		background: #f3f4f6;
+	}
+	.accordion-title {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.accordion-icon {
+		display: inline-flex;
+		align-items: center;
+		color: #6366f1;
+	}
+	.accordion-icon :global(svg) {
+		width: 1.05em;
+		height: 1.05em;
+	}
+	.accordion-arrow {
+		display: inline-flex;
+		align-items: center;
+		color: #9ca3af;
+		transition: transform 0.15s ease;
+		transform: rotate(-90deg);
+	}
+	.accordion-arrow.rotated {
+		transform: rotate(0deg);
+	}
+	.accordion-arrow :global(svg) {
+		width: 1.1em;
+		height: 1.1em;
+	}
+	.accordion-body {
+		padding: 1rem;
+	}
+</style>