@insymetri/styleguide 0.1.26 → 0.1.28

package/dist/MobileOnboarding/LoginFlowBareAlt.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const LoginFlowBareAlt: import("svelte").Component<Record<string, never>, {}, "">;
+type LoginFlowBareAlt = ReturnType<typeof LoginFlowBareAlt>;
+export default LoginFlowBareAlt;

package/dist/MobileOnboarding/LoginScreenBare.svelte

@@ -13,9 +13,13 @@
 		stepIndicator?: Snippet
 		/** Hide the built-in step indicator (when managed externally) */
 		hideStepIndicator?: boolean
+		/** When true, content above step indicator fades out */
+		transitioning?: boolean
+		/** Hide the illustration banner on mobile/tablet */
+		hideBanner?: boolean
 	}
 
-	let {onContinue, illustration, stepIndicator, hideStepIndicator = false}: Props = $props()
+	let {onContinue, illustration, stepIndicator, hideStepIndicator = false, transitioning = false, hideBanner = false}: Props = $props()
 
 	let email = $state('')
 	let showError = $state(false)
@@ -23,61 +27,67 @@
 </script>
 
 <!-- Outer wrapper: grey bg on tablet+, full bleed on mobile -->
-<div class="min-h-screen md:bg-background md:flex md:items-start md:justify-center md:pt-[18vh] md:p-24">
+<div class="flex h-screen flex-col md:h-auto md:min-h-screen md:items-center md:justify-center md:bg-background md:p-24">
 	<!-- Card on tablet+, split on desktop -->
 	<DensityProvider density="mobile">
-		<div class="flex flex-col lg:flex-row lg:w-[860px] md:w-[440px] md:rounded-16 md:bg-white md:shadow-card md:overflow-hidden">
+		<div class="flex min-w-0 flex-1 flex-col bg-white md:flex-initial md:h-[694px] lg:h-[595px] lg:flex-row lg:w-[860px] md:w-[440px] md:rounded-16 md:shadow-card md:overflow-hidden">
 			<!-- Illustration banner — mobile & tablet only -->
-			<div class="lg:hidden relative h-[100px] md:h-[90px] overflow-hidden shrink-0" style="background: linear-gradient(135deg, var(--ii-primary), var(--ii-primary-hover))">
-				<svg class="absolute inset-0 w-full h-full" viewBox="0 0 600 120" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
-					<!-- Background texture -->
-					{#each Array(2) as _, row}
-						{#each Array(12) as _, col}
-							<circle cx={30 + col * 50} cy={25 + row * 50} r="1.5" fill="white" opacity="0.1" />
+			{#if !hideBanner}
+				<div class="lg:hidden relative h-[100px] md:h-[90px] overflow-hidden shrink-0" style="background: linear-gradient(135deg, var(--ii-primary), var(--ii-primary-hover))">
+					<svg class="absolute inset-0 w-full h-full" viewBox="0 0 600 120" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
+						<!-- Background texture -->
+						{#each Array(2) as _, row}
+							{#each Array(12) as _, col}
+								<circle cx={30 + col * 50} cy={25 + row * 50} r="1.5" fill="white" opacity="0.1" />
+							{/each}
 						{/each}
-					{/each}
-					<!-- Steps path -->
-					<line x1="120" y1="60" x2="240" y2="60" stroke="white" stroke-width="2" opacity="0.3" />
-					<line x1="240" y1="60" x2="360" y2="60" stroke="white" stroke-width="2" opacity="0.15" />
-					<line x1="360" y1="60" x2="480" y2="60" stroke="white" stroke-width="2" opacity="0.08" />
-					<!-- Step nodes -->
-					<circle cx="120" cy="60" r="12" fill="white" opacity="0.3" />
-					<circle cx="120" cy="60" r="6" fill="white" opacity="0.4" />
-					<circle cx="240" cy="60" r="12" fill="white" opacity="0.15" />
-					<circle cx="240" cy="60" r="4" fill="white" opacity="0.3" />
-					<circle cx="360" cy="60" r="10" fill="white" opacity="0.12" />
-					<circle cx="480" cy="60" r="8" fill="white" opacity="0.08" />
-				</svg>
-			</div>
+						<!-- Steps path -->
+						<line x1="120" y1="60" x2="240" y2="60" stroke="white" stroke-width="2" opacity="0.3" />
+						<line x1="240" y1="60" x2="360" y2="60" stroke="white" stroke-width="2" opacity="0.15" />
+						<line x1="360" y1="60" x2="480" y2="60" stroke="white" stroke-width="2" opacity="0.08" />
+						<!-- Step nodes -->
+						<circle cx="120" cy="60" r="12" fill="white" opacity="0.3" />
+						<circle cx="120" cy="60" r="6" fill="white" opacity="0.4" />
+						<circle cx="240" cy="60" r="12" fill="white" opacity="0.15" />
+						<circle cx="240" cy="60" r="4" fill="white" opacity="0.3" />
+						<circle cx="360" cy="60" r="10" fill="white" opacity="0.12" />
+						<circle cx="480" cy="60" r="8" fill="white" opacity="0.08" />
+					</svg>
+				</div>
+			{/if}
 
 			<!-- Form side -->
-			<div class="flex flex-col h-[calc(100vh-100px)] md:h-auto md:min-h-0 md:flex-1 px-24 md:p-40">
-				<!-- Logo -->
-				<div class="flex items-center gap-10 pt-24 md:pt-0">
-					<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<div class="flex w-full min-w-0 flex-1 flex-col px-24 md:p-40">
+				<!-- Content that fades between steps -->
+				<div class="step-content flex flex-1 flex-col" class:fade-out={transitioning}>
+				<!-- Row 1: Logo — fixed height so headers align between steps -->
+				<div class="flex h-56 shrink-0 items-center justify-center gap-8 pt-24 md:pt-0">
+					<svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<path d="M16 2L4 9v14l12 7 12-7V9L16 2z" fill="var(--ii-primary)" />
 						<path d="M16 6l-8 4.5v9L16 24l8-4.5v-9L16 6z" fill="white" />
 						<path d="M16 10l-4 2.25v4.5L16 19l4-2.25v-4.5L16 10z" fill="var(--ii-primary)" />
 					</svg>
-					<span class="text-display-sm text-body">Meridian Finance</span>
+					<span class="text-h3 text-body">Meridian Finance</span>
 				</div>
 
-				<!-- Header -->
+				<!-- Row 2: Header -->
 				<div class="pt-24 pb-48">
-					<h1 class="text-h2 text-body m-0">Your Loan Application</h1>
+					<div class="text-h2 text-body m-0">Your Loan Application</div>
 					<p class="text-m3-emphasis text-tertiary mt-4 m-0">
 						Get started or continue your application
 					</p>
 				</div>
 
-				<!-- Form -->
-				<div class="flex flex-col gap-16">
+				<!-- Row 3: Input -->
+				<form id="login-email-form" class="flex flex-col" onsubmit={(e) => { e.preventDefault(); loading = true; setTimeout(() => { loading = false; onContinue?.() }, 800) }}>
 					{#if showError}
-						<IIAlert variant="error" dismissible onDismiss={() => (showError = false)}>
-							{#snippet children()}
-								We couldn't find an account with that email address.
-							{/snippet}
-						</IIAlert>
+						<div class="mb-16">
+							<IIAlert variant="error" dismissible onDismiss={() => (showError = false)}>
+								{#snippet children()}
+									We couldn't find an account with that email address.
+								{/snippet}
+							</IIAlert>
+						</div>
 					{/if}
 
 					<IIInput
@@ -89,35 +99,37 @@
 						autocomplete="email"
 						error={showError}
 					/>
+				</form>
+
+				<!-- Info section — pushed to bottom on mobile -->
+				<div class="mb-24 mt-auto">
+					<p class="text-emphasis text-body m-0 mb-12">Here's what happens next:</p>
+					<ul class="m-0 list-none p-0 flex flex-col gap-8">
+						<li class="relative pl-20 text-default text-secondary">
+							<span class="absolute left-0 text-accent">&#x2713;</span>
+							New here? We'll help you get started
+						</li>
+						<li class="relative pl-20 text-default text-secondary">
+							<span class="absolute left-0 text-accent">&#x2713;</span>
+							Already applied? Pick up right where you left off
+						</li>
+						<li class="relative pl-20 text-default text-secondary">
+							<span class="absolute left-0 text-accent">&#x2713;</span>
+							All done? Check your loan status
+						</li>
+					</ul>
+				</div>
 				</div>
 
-				<!-- CTA pinned to bottom on mobile, inline on tablet+ -->
-				<div class="mt-auto md:mt-48 pb-24 md:pb-0">
-					<!-- Info Section -->
-					<div class="mb-24">
-						<p class="text-emphasis text-body m-0 mb-12">Here's what happens next:</p>
-						<ul class="m-0 list-none p-0 flex flex-col gap-8">
-							<li class="relative pl-20 text-default text-secondary">
-								<span class="absolute left-0 text-accent">&#x2713;</span>
-								New here? We'll help you get started
-							</li>
-							<li class="relative pl-20 text-default text-secondary">
-								<span class="absolute left-0 text-accent">&#x2713;</span>
-								Already applied? Pick up right where you left off
-							</li>
-							<li class="relative pl-20 text-default text-secondary">
-								<span class="absolute left-0 text-accent">&#x2713;</span>
-								All done? Check your loan status
-							</li>
-						</ul>
-					</div>
+				<!-- Persistent bottom area — step indicator + button (doesn't fade) -->
+				<div class="pb-24 md:pb-0">
 					{#if stepIndicator}
-						<div class="mt-56 mb-24">
+						<div class="mb-24 mt-24">
 							{@render stepIndicator()}
 						</div>
 					{:else if !hideStepIndicator}
 						<!-- Step indicator -->
-						<div class="flex items-center justify-center gap-8 mt-56 mb-24">
+						<div class="flex items-center justify-center gap-8 mb-24 mt-24">
 							<div class="h-6 rounded-full" style="background: var(--ii-primary); width: 36px; transition: width 0.4s ease, background-color 0.4s ease"></div>
 							<div class="h-6 rounded-full" style="background: var(--ii-gray-300); width: 16px; transition: width 0.4s ease, background-color 0.4s ease"></div>
 						</div>
@@ -125,15 +137,9 @@
 					<IIButton
 						variant="primary"
 						class="w-full"
+						type="submit"
+						form="login-email-form"
 						{loading}
-						disabled={!email}
-						onclick={() => {
-							loading = true
-							setTimeout(() => {
-								loading = false
-								onContinue?.()
-							}, 800)
-						}}
 					>
 						{#snippet children()}
 							Continue
@@ -198,3 +204,14 @@
 		</div>
 	</DensityProvider>
 </div>
+
+<style>
+	.step-content {
+		opacity: 1;
+		transition: opacity 200ms ease;
+	}
+
+	.step-content.fade-out {
+		opacity: 0;
+	}
+</style>

package/dist/MobileOnboarding/LoginScreenBare.svelte.d.ts

@@ -7,6 +7,10 @@ type Props = {
     stepIndicator?: Snippet;
     /** Hide the built-in step indicator (when managed externally) */
     hideStepIndicator?: boolean;
+    /** When true, content above step indicator fades out */
+    transitioning?: boolean;
+    /** Hide the illustration banner on mobile/tablet */
+    hideBanner?: boolean;
 };
 declare const LoginScreenBare: import("svelte").Component<Props, {}, "">;
 type LoginScreenBare = ReturnType<typeof LoginScreenBare>;

package/dist/MobileOnboarding/OTPScreenBare.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import DensityProvider from '../DensityProvider/DensityProvider.svelte'
 	import IIButton from '../IIButton/IIButton.svelte'
+	import IIAlert from '../IIAlert/IIAlert.svelte'
 
 	import type {Snippet} from 'svelte'
 
@@ -9,28 +10,36 @@
 		onBack?: () => void
 		stepIndicator?: Snippet
 		hideStepIndicator?: boolean
+		/** When true, content above step indicator fades out */
+		transitioning?: boolean
+		/** Hide the illustration banner on mobile/tablet */
+		hideBanner?: boolean
 	}
 
-	let {onContinue, onBack, stepIndicator, hideStepIndicator = false}: Props = $props()
+	let {onContinue, onBack, stepIndicator, hideStepIndicator = false, transitioning = false, hideBanner = false}: Props = $props()
 
 	let digits = $state<string[]>(['', '', '', '', '', ''])
 	let inputs: HTMLInputElement[] = []
 	let showError = $state(false)
-	let resendTimer = $state(30)
 	let verifying = $state(false)
+	let isResending = $state(false)
 
-	let deliveryStatus = $state<'sending' | 'sent' | 'delivered'>('delivered')
+	let deliveryStatus = $state<'idle' | 'sending' | 'sent' | 'delivered' | 'bounced' | 'failed'>('delivered')
+	let deliveryError = $state('')
 
 	const code = $derived(digits.join(''))
 	const isComplete = $derived(code.length === 6 && digits.every((d) => d !== ''))
+	const hasFailed = $derived(deliveryStatus === 'bounced' || deliveryStatus === 'failed')
+	const sentComplete = $derived(deliveryStatus !== 'idle')
+	const deliveredComplete = $derived(deliveryStatus === 'delivered')
+	const isInFlight = $derived(deliveryStatus === 'sent' || deliveryStatus === 'sending')
 
 	function handleInput(index: number, event: Event) {
 		const target = event.target as HTMLInputElement
-		const value = target.value
-		if (value.length > 1) {
-			digits[index] = value.slice(-1)
-		}
-		if (value && index < 5) {
+		const val = target.value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase()
+		digits[index] = val.slice(-1)
+		target.value = digits[index]
+		if (digits[index] && index < 5) {
 			inputs[index + 1]?.focus()
 		}
 	}
@@ -43,7 +52,11 @@
 
 	function handlePaste(event: ClipboardEvent) {
 		event.preventDefault()
-		const paste = event.clipboardData?.getData('text')?.replace(/\D/g, '')?.slice(0, 6)
+		const paste = event.clipboardData
+			?.getData('text')
+			?.replace(/[^a-zA-Z0-9]/g, '')
+			?.toUpperCase()
+			?.slice(0, 6)
 		if (paste) {
 			for (let i = 0; i < 6; i++) {
 				digits[i] = paste[i] || ''
@@ -52,20 +65,11 @@
 			inputs[nextEmpty]?.focus()
 		}
 	}
-
-	$effect(() => {
-		if (resendTimer > 0) {
-			const interval = setInterval(() => {
-				resendTimer--
-			}, 1000)
-			return () => clearInterval(interval)
-		}
-	})
 </script>
 
-<div class="min-h-screen md:bg-background md:flex md:items-start md:justify-center md:pt-[18vh] md:p-24">
+<div class="flex h-screen flex-col md:h-auto md:min-h-screen md:items-center md:justify-center md:bg-background md:p-24">
 	<DensityProvider density="mobile">
-		<div class="flex flex-col lg:flex-row lg:w-[860px] md:w-[440px] md:rounded-16 md:bg-white md:shadow-card md:overflow-hidden">
+		<div class="flex min-w-0 flex-1 flex-col bg-white md:flex-initial md:h-[694px] lg:h-[595px] lg:flex-row lg:w-[860px] md:w-[440px] md:rounded-16 md:shadow-card md:overflow-hidden">
 			<!-- Illustration banner — mobile & tablet only -->
 			<div class="lg:hidden relative h-[100px] md:h-[90px] overflow-hidden shrink-0" style="background: linear-gradient(135deg, var(--ii-primary), var(--ii-primary-hover))">
 				<svg class="absolute inset-0 w-full h-full" viewBox="0 0 600 120" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
@@ -88,9 +92,11 @@
 			</div>
 
 			<!-- Form side -->
-			<div class="flex flex-col h-[calc(100vh-100px)] md:h-auto md:min-h-0 md:flex-1 px-24 md:p-40">
-				<!-- Back link -->
-				<div class="pt-24 md:pt-0 mb-24">
+			<div class="flex w-full min-w-0 flex-1 flex-col px-24 md:p-40">
+				<!-- Content that fades between steps -->
+				<div class="step-content flex flex-1 flex-col" class:fade-out={transitioning}>
+				<!-- Row 1: Back button — fixed height so headers align with email screen -->
+				<div class="flex h-56 shrink-0 items-center gap-10 pt-24 md:pt-0">
 					<button
 						class="text-small text-secondary bg-transparent border-0 cursor-default p-0 hover:text-body"
 						onclick={onBack}
@@ -99,137 +105,191 @@
 					</button>
 				</div>
 
-				<!-- Header -->
-				<div class="mb-32">
-					<h1 class="text-h2 text-body m-0">Enter verification code</h1>
+				<!-- Row 2: Header -->
+				<div class="pt-24 pb-48">
+					<div class="text-h2 text-body m-0">Enter verification code</div>
 					<p class="text-m3-emphasis text-tertiary mt-4 m-0">
 						We sent a 6-digit code to <strong class="text-body">john@example.com</strong>
 					</p>
 				</div>
 
-				<!-- Delivery Status -->
-				<div class="flex items-center gap-0 mb-32" role="status" aria-label="Code delivery status">
-					<div class="flex items-center gap-0">
-						<div
-							class="w-24 h-24 rounded-full flex items-center justify-center shrink-0 {deliveryStatus === 'sending'
-								? 'bg-primary text-inverse animate-pulse'
-								: 'bg-primary text-inverse'}"
-						>
-							{#if deliveryStatus !== 'sending'}
-								<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor">
-									<path d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32" />
-								</svg>
-							{/if}
+				<!-- Row 3: OTP Input — pt-20 matches the email input's label height -->
+				<form id="login-otp-form" class="flex flex-col pt-20" onsubmit={(e) => { e.preventDefault(); verifying = true; setTimeout(() => { verifying = false; onContinue?.() }, 800) }}>
+					{#if showError}
+						<div class="mb-16">
+							<IIAlert variant="error" dismissible onDismiss={() => (showError = false)}>
+								{#snippet children()}
+									Invalid verification code. Please try again.
+								{/snippet}
+							</IIAlert>
 						</div>
-						<span class="text-[10px] text-secondary ml-4 mr-8">Sent</span>
-					</div>
-					<div class="h-[2px] w-48 {deliveryStatus === 'delivered' ? 'bg-primary' : 'bg-muted'} transition-colors duration-500"></div>
-					<div class="flex items-center gap-0">
-						<span class="text-[10px] text-secondary mr-4 ml-8">Delivered</span>
-						<div
-							class="w-24 h-24 rounded-full flex items-center justify-center shrink-0 {deliveryStatus === 'delivered'
-								? 'bg-primary text-inverse'
-								: deliveryStatus === 'sent'
-									? 'bg-primary text-inverse animate-pulse'
-									: 'bg-muted text-secondary'}"
-						>
-							{#if deliveryStatus === 'delivered'}
-								<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor">
-									<path d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32" />
-								</svg>
-							{/if}
+					{/if}
+
+					<div class="mb-16">
+						<div class="flex justify-center gap-8" role="group" aria-label="Verification code">
+							{#each digits as digit, i}
+								<input
+									bind:this={inputs[i]}
+									bind:value={digits[i]}
+									type="text"
+									inputmode="text"
+									autocomplete={i === 0 ? 'one-time-code' : 'off'}
+									maxlength="1"
+									pattern="[a-zA-Z0-9]"
+									class="w-48 h-48 text-center !text-m1 font-medium text-body bg-input-bg border-2 rounded-8 outline-none transition-all duration-fast
+										{showError
+										? 'border-error'
+										: digit
+											? 'border-primary'
+											: 'border-input-border'}
+										focus:border-primary focus:ring-2 focus:ring-primary/20"
+									oninput={(e) => handleInput(i, e)}
+									onkeydown={(e) => handleKeydown(i, e)}
+									onpaste={handlePaste}
+									aria-label="Digit {i + 1}"
+								/>
+							{/each}
 						</div>
 					</div>
-				</div>
 
-				<!-- OTP Input -->
-				<div class="flex justify-center gap-8 mb-8" role="group" aria-label="Verification code">
-					{#each digits as digit, i}
-						<input
-							bind:this={inputs[i]}
-							bind:value={digits[i]}
-							type="text"
-							inputmode="numeric"
-							autocomplete={i === 0 ? 'one-time-code' : 'off'}
-							maxlength="1"
-							pattern="[0-9]"
-							class="w-48 h-56 text-center text-h3 font-semibold text-body bg-input-bg border-2 rounded-8 outline-none transition-all duration-fast
-								{showError
-								? 'border-error'
-								: digit
-									? 'border-primary'
-									: 'border-input-border'}
-								focus:border-primary focus:ring-2 focus:ring-primary/20"
-							oninput={(e) => handleInput(i, e)}
-							onkeydown={(e) => handleKeydown(i, e)}
-							onpaste={handlePaste}
-							aria-label="Digit {i + 1}"
-						/>
-					{/each}
-				</div>
+					<!-- Delivery Status -->
+					<div class="mb-16 flex justify-center">
+						<div class="flex justify-center gap-0" role="status" aria-label="Code delivery status">
+							<!-- Sent -->
+							<div class="flex flex-col items-center" style="min-width: 56px">
+								<div
+									class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
+										{hasFailed
+										? 'bg-error text-inverse'
+										: sentComplete
+											? 'bg-primary text-inverse'
+											: 'bg-muted text-secondary'}
+										{deliveryStatus === 'sending' ? ' animate-pulse' : ''}"
+								>
+									{#if sentComplete && !hasFailed}
+										<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor">
+											<path d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32" />
+										</svg>
+									{:else if hasFailed}
+										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+											<line x1="18" y1="6" x2="6" y2="18"></line>
+											<line x1="6" y1="6" x2="18" y2="18"></line>
+										</svg>
+									{/if}
+								</div>
+								<span class="mt-4 text-[10px] text-secondary">Sent</span>
+							</div>
 
-				{#if showError}
-					<p class="text-tiny text-error text-center mb-16">Invalid code. Please try again.</p>
-				{/if}
+							<!-- Connector -->
+							<div class="flex items-start pt-12">
+								<div
+									class="mx-6 h-[2px] w-80 transition-colors duration-500
+										{hasFailed ? 'bg-error' : deliveredComplete ? 'bg-primary' : 'bg-muted'}"
+								></div>
+							</div>
 
-				<!-- Resend -->
-				<div class="mt-20">
-					{#if resendTimer > 0}
-						<p class="text-small text-secondary m-0">
-							Resend code in <span class="text-body font-medium">{resendTimer}s</span>
-						</p>
-					{:else}
+							<!-- Delivered -->
+							<div class="flex flex-col items-center" style="min-width: 56px">
+								<div
+									class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
+										{hasFailed
+										? 'bg-error text-inverse'
+										: deliveredComplete
+											? 'bg-primary text-inverse'
+											: isInFlight
+												? 'bg-primary text-inverse animate-pulse'
+												: 'bg-muted text-secondary'}"
+								>
+									{#if deliveredComplete}
+										<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor">
+											<path d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32" />
+										</svg>
+									{:else if hasFailed}
+										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+											<line x1="18" y1="6" x2="6" y2="18"></line>
+											<line x1="6" y1="6" x2="18" y2="18"></line>
+										</svg>
+									{/if}
+								</div>
+								<span class="mt-4 text-[10px] text-secondary">
+									{#if hasFailed}Failed{:else}Delivered{/if}
+								</span>
+							</div>
+						</div>
+					</div>
+
+					{#if deliveryError}
+						<p class="mt-0 mb-16 p-0 text-center text-default text-error">{deliveryError}</p>
+					{/if}
+				</form>
+
+				<!-- Help text — pushed to bottom on mobile -->
+				<div class="mb-24 mt-auto">
+					<p class="m-0 text-tiny text-tertiary">
+						Didn't receive the code?
 						<button
-							class="text-small text-accent font-medium bg-transparent border-0 cursor-default p-0 underline"
+							type="button"
+							class="cursor-default border-0 bg-transparent p-0 text-tiny text-accent underline"
+							disabled={isResending}
 							onclick={() => {
-								resendTimer = 30
+								isResending = true
 								deliveryStatus = 'sending'
 								setTimeout(() => (deliveryStatus = 'sent'), 800)
-								setTimeout(() => (deliveryStatus = 'delivered'), 2000)
+								setTimeout(() => { deliveryStatus = 'delivered'; isResending = false }, 2000)
 							}}
 						>
-							Resend code
+							{isResending ? 'Sending...' : 'Resend code'}
 						</button>
-					{/if}
+						or
+						<button
+							type="button"
+							class="cursor-default border-0 bg-transparent p-0 text-tiny text-accent underline"
+							onclick={onBack}
+						>
+							try a different email
+						</button>
+					</p>
+				</div>
 				</div>
 
-				<!-- CTA pinned to bottom on mobile, inline on tablet+ -->
-				<div class="mt-auto md:mt-48 pb-24 md:pb-0">
-					<!-- Help text -->
-					<div class="mb-24">
-						<p class="text-tiny text-tertiary m-0">
-							Didn't receive the code? Check your spam folder or
-							<button class="text-accent bg-transparent border-0 cursor-default text-tiny p-0 underline">try a different email</button>
-						</p>
-					</div>
+				<!-- Persistent bottom area — step indicator + button (doesn't fade) -->
+				<div class="pb-24 md:pb-0">
 					{#if stepIndicator}
-						<div class="mt-56 mb-24">
+						<div class="mb-24 mt-24">
 							{@render stepIndicator()}
 						</div>
 					{:else if !hideStepIndicator}
 						<!-- Step indicator -->
-						<div class="flex items-center justify-center gap-8 mt-56 mb-24">
+						<div class="flex items-center justify-center gap-8 mb-24 mt-24">
 							<div class="h-6 rounded-full" style="background: var(--ii-gray-300); width: 16px; transition: width 0.4s ease, background-color 0.4s ease"></div>
 							<div class="h-6 rounded-full" style="background: var(--ii-primary); width: 36px; transition: width 0.4s ease, background-color 0.4s ease"></div>
 						</div>
 					{/if}
-					<IIButton
-						variant="primary"
-						class="w-full"
-						disabled={!isComplete}
-						loading={verifying}
-						onclick={() => {
-							verifying = true
-							setTimeout(() => {
-								verifying = false
-								onContinue?.()
-							}, 800)
-						}}
-					>
-						{#snippet children()}
-							Verify
-						{/snippet}
-					</IIButton>
+					{#if hasFailed}
+						<IIButton
+							variant="primary"
+							class="w-full"
+							type="button"
+							onclick={onBack}
+						>
+							{#snippet children()}
+								Use Different Email
+							{/snippet}
+						</IIButton>
+					{:else}
+						<IIButton
+							variant="primary"
+							class="w-full"
+							type="submit"
+							form="login-otp-form"
+							disabled={!isComplete || verifying}
+							loading={verifying}
+						>
+							{#snippet children()}
+								Verify
+							{/snippet}
+						</IIButton>
+					{/if}
 				</div>
 			</div>
 
@@ -283,3 +343,14 @@
 		</div>
 	</DensityProvider>
 </div>
+
+<style>
+	.step-content {
+		opacity: 1;
+		transition: opacity 200ms ease;
+	}
+
+	.step-content.fade-out {
+		opacity: 0;
+	}
+</style>