@marianmeres/stuic 3.70.1 → 3.71.0

package/AGENTS.md

@@ -23,7 +23,7 @@
 
 ```
 src/lib/
-├── components/     # 50 UI components
+├── components/     # 55 UI components
 ├── actions/        # 15 Svelte actions
 ├── utils/          # 43 utility modules
 ├── themes/         # Generated theme CSS (css/) — definitions from @marianmeres/design-tokens
@@ -116,7 +116,7 @@ Global tokens that control cross-component visual properties. Defined in `src/li
 
 ### Domain Docs
 
-- [Components](./docs/domains/components.md) — 46 component directories, Props pattern, snippets
+- [Components](./docs/domains/components.md) — 55 component directories, Props pattern, snippets
 - [Theming](./docs/domains/theming.md) — CSS tokens, dark mode, themes
 - [Actions](./docs/domains/actions.md) — 15 Svelte directives
 - [Utils](./docs/domains/utils.md) — 43 utility modules

package/README.md

@@ -148,7 +148,7 @@ AppShell, Accordion, Backdrop, Modal, ModalDialog, Drawer, Collapsible, Header,
 
 ### Forms & Inputs
 
-FieldInput, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldOptions, FieldKeyValues, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, CronInput, Fieldset, LoginForm, LoginFormModal
+FieldInput, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldOptions, FieldKeyValues, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
 
 ### Buttons & Controls
 

package/dist/components/EmailVerifyForm/EmailVerifyForm.svelte

@@ -0,0 +1,269 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { TranslateFn } from "../../types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+	import type { Props as OtpInputProps } from "../OtpInput/OtpInput.svelte";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
+		/** Email address the code was sent to. Displayed in the subhead. */
+		email: string;
+
+		/** Called when the user submits a code (manually or via OtpInput auto-complete). */
+		onSubmit: (code: string) => void;
+
+		/**
+		 * Called when the user clicks "Resend code". When provided, the resend control
+		 * renders inside the form. The form owns the cooldown UI internally.
+		 */
+		onResend?: () => Promise<void> | void;
+
+		/**
+		 * Cooldown (seconds) after a successful resend, during which the resend
+		 * link is disabled and shows a countdown. Default: 30.
+		 */
+		resendCooldownSeconds?: number;
+
+		/** Disables submit button + OtpInput while submitting. */
+		isSubmitting?: boolean;
+
+		/** General error (rendered as a DismissibleMessage above the form). */
+		error?: string;
+
+		/** Optional: shown inline, e.g., "3 attempts remaining". Set to undefined to hide. */
+		attemptsRemaining?: number;
+
+		/** Code length. Default: 6. Forwarded to OtpInput. */
+		codeLength?: number;
+
+		/** Pass-through props for the inner OtpInput (spread). */
+		otpInputProps?: Omit<
+			OtpInputProps,
+			"value" | "length" | "onComplete" | "error" | "disabled"
+		>;
+
+		/** Optional notifications instance — `error()` is called when `error` is set. */
+		notifications?: NotificationsStack;
+
+		/** Footer snippet (e.g., "Wrong email? Start over"). */
+		footer?: Snippet;
+
+		/** Override CTA section. */
+		submitButton?: Snippet<[{ isSubmitting: boolean; disabled: boolean }]>;
+
+		t?: TranslateFn;
+		unstyled?: boolean;
+		class?: string;
+		el?: HTMLFormElement;
+	}
+</script>
+
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { t_default } from "./_internal/email-verify-form-i18n-defaults.js";
+	import Button from "../Button/Button.svelte";
+	import DismissibleMessage from "../DismissibleMessage/DismissibleMessage.svelte";
+	import H from "../H/H.svelte";
+	import OtpInput from "../OtpInput/OtpInput.svelte";
+
+	let {
+		email,
+		onSubmit,
+		onResend,
+		resendCooldownSeconds = 30,
+		isSubmitting = false,
+		error,
+		attemptsRemaining,
+		codeLength = 6,
+		otpInputProps,
+		notifications,
+		footer,
+		submitButton,
+		t: tProp,
+		unstyled = false,
+		class: classProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let t = $derived(tProp ?? t_default);
+
+	let code = $state("");
+	let cooldownRemaining = $state(0);
+	let resentFlash = $state(false);
+	let isResending = $state(false);
+	let cooldownTimer: ReturnType<typeof setInterval> | null = null;
+	let resentFlashTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function clearTimers() {
+		if (cooldownTimer) {
+			clearInterval(cooldownTimer);
+			cooldownTimer = null;
+		}
+		if (resentFlashTimer) {
+			clearTimeout(resentFlashTimer);
+			resentFlashTimer = null;
+		}
+	}
+
+	onDestroy(clearTimers);
+
+	function escapeHtml(s: string): string {
+		return s.replace(/[&<>"']/g, (c) =>
+			c === "&"
+				? "&amp;"
+				: c === "<"
+					? "&lt;"
+					: c === ">"
+						? "&gt;"
+						: c === '"'
+							? "&quot;"
+							: "&#39;"
+		);
+	}
+
+	let subheadingHtml = $derived(
+		t("email_verify_form.subheading", {
+			email: `<strong>${escapeHtml(email ?? "")}</strong>`,
+		})
+	);
+
+	function startCooldown() {
+		cooldownRemaining = resendCooldownSeconds;
+		if (cooldownTimer) clearInterval(cooldownTimer);
+		cooldownTimer = setInterval(() => {
+			cooldownRemaining -= 1;
+			if (cooldownRemaining <= 0) {
+				cooldownRemaining = 0;
+				if (cooldownTimer) {
+					clearInterval(cooldownTimer);
+					cooldownTimer = null;
+				}
+			}
+		}, 1000);
+	}
+
+	function flashResent() {
+		resentFlash = true;
+		if (resentFlashTimer) clearTimeout(resentFlashTimer);
+		resentFlashTimer = setTimeout(() => {
+			resentFlash = false;
+			resentFlashTimer = null;
+		}, 3000);
+	}
+
+	async function handleResendClick() {
+		if (!onResend) return;
+		if (cooldownRemaining > 0 || isResending) return;
+		isResending = true;
+		try {
+			await onResend();
+			flashResent();
+			startCooldown();
+		} finally {
+			isResending = false;
+		}
+	}
+
+	function handleFormSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (isSubmitting) return;
+		if (code.length !== codeLength) return;
+		onSubmit(code);
+	}
+
+	$effect(() => {
+		if (error && notifications) notifications.error(error);
+	});
+
+	let _class = $derived(
+		unstyled ? classProp : twMerge("stuic-email-verify-form", classProp)
+	);
+
+	let submitDisabled = $derived(code.length !== codeLength || isSubmitting);
+</script>
+
+<form bind:this={el} class={_class} onsubmit={handleFormSubmit} {...rest}>
+	<!-- Heading -->
+	<H level={2} class={unstyled ? undefined : "stuic-email-verify-form-heading"}>
+		{t("email_verify_form.heading")}
+	</H>
+
+	<!-- Subheading with bolded email -->
+	<p class={unstyled ? undefined : "stuic-email-verify-form-subheading"}>
+		<!-- email is HTML-escaped before substitution; the surrounding template is i18n-controlled -->
+		{@html subheadingHtml}
+	</p>
+
+	<!-- General error alert -->
+	<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
+
+	<!-- OTP input -->
+	<div class={unstyled ? undefined : "stuic-email-verify-form-otp"}>
+		<OtpInput
+			bind:value={code}
+			length={codeLength}
+			onComplete={(c) => onSubmit(c)}
+			error={!!error}
+			disabled={isSubmitting}
+			{...otpInputProps}
+		/>
+	</div>
+
+	<!-- Attempts remaining hint -->
+	{#if attemptsRemaining != null}
+		<small class={unstyled ? undefined : "stuic-email-verify-form-attempts"}>
+			{t("email_verify_form.attempts_remaining", { count: attemptsRemaining })}
+		</small>
+	{/if}
+
+	<!-- Submit button -->
+	{#if submitButton}
+		{@render submitButton({ isSubmitting, disabled: submitDisabled })}
+	{:else}
+		<div class={unstyled ? undefined : "stuic-email-verify-form-submit"}>
+			<Button
+				intent="primary"
+				type="submit"
+				disabled={submitDisabled}
+				class="w-full"
+			>
+				{isSubmitting
+					? t("email_verify_form.submitting")
+					: t("email_verify_form.submit")}
+			</Button>
+		</div>
+	{/if}
+
+	<!-- Resend control -->
+	{#if onResend}
+		<div class={unstyled ? undefined : "stuic-email-verify-form-resend"}>
+			{#if cooldownRemaining > 0}
+				<span class={unstyled ? undefined : "stuic-email-verify-form-resend-cooldown"}>
+					{t("email_verify_form.resend_cooldown", { seconds: cooldownRemaining })}
+				</span>
+			{:else if resentFlash}
+				<span class={unstyled ? undefined : "stuic-email-verify-form-resend-flash"}>
+					{t("email_verify_form.resent")}
+				</span>
+			{:else}
+				<span>{t("email_verify_form.resend_prompt")}</span>
+				<Button
+					variant="link"
+					type="button"
+					size="sm"
+					onclick={handleResendClick}
+					disabled={isResending}
+				>
+					{t("email_verify_form.resend")}
+				</Button>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Footer -->
+	{#if footer}
+		{@render footer()}
+	{/if}
+</form>

package/dist/components/EmailVerifyForm/EmailVerifyForm.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TranslateFn } from "../../types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+import type { Props as OtpInputProps } from "../OtpInput/OtpInput.svelte";
+export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
+    /** Email address the code was sent to. Displayed in the subhead. */
+    email: string;
+    /** Called when the user submits a code (manually or via OtpInput auto-complete). */
+    onSubmit: (code: string) => void;
+    /**
+     * Called when the user clicks "Resend code". When provided, the resend control
+     * renders inside the form. The form owns the cooldown UI internally.
+     */
+    onResend?: () => Promise<void> | void;
+    /**
+     * Cooldown (seconds) after a successful resend, during which the resend
+     * link is disabled and shows a countdown. Default: 30.
+     */
+    resendCooldownSeconds?: number;
+    /** Disables submit button + OtpInput while submitting. */
+    isSubmitting?: boolean;
+    /** General error (rendered as a DismissibleMessage above the form). */
+    error?: string;
+    /** Optional: shown inline, e.g., "3 attempts remaining". Set to undefined to hide. */
+    attemptsRemaining?: number;
+    /** Code length. Default: 6. Forwarded to OtpInput. */
+    codeLength?: number;
+    /** Pass-through props for the inner OtpInput (spread). */
+    otpInputProps?: Omit<OtpInputProps, "value" | "length" | "onComplete" | "error" | "disabled">;
+    /** Optional notifications instance — `error()` is called when `error` is set. */
+    notifications?: NotificationsStack;
+    /** Footer snippet (e.g., "Wrong email? Start over"). */
+    footer?: Snippet;
+    /** Override CTA section. */
+    submitButton?: Snippet<[{
+        isSubmitting: boolean;
+        disabled: boolean;
+    }]>;
+    t?: TranslateFn;
+    unstyled?: boolean;
+    class?: string;
+    el?: HTMLFormElement;
+}
+declare const EmailVerifyForm: import("svelte").Component<Props, {}, "el">;
+type EmailVerifyForm = ReturnType<typeof EmailVerifyForm>;
+export default EmailVerifyForm;

package/dist/components/EmailVerifyForm/README.md

@@ -0,0 +1,76 @@
+# EmailVerifyForm
+
+"Check your email" form used after registration. Drop-in peer to `LoginForm` / `RegisterForm` — same prop conventions (`onSubmit`, `isSubmitting`, `error`, `notifications`, `t`, `unstyled`, `class`).
+
+The form owns:
+
+- A heading + subhead that displays the email the code was sent to.
+- An `OtpInput` (default 6 digits) that auto-submits on completion.
+- A general error banner via `DismissibleMessage`.
+- An optional inline "attempts remaining" hint.
+- An optional "Resend code" control with built-in cooldown countdown.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { EmailVerifyForm } from "@marianmeres/stuic";
+
+	async function handleVerify(code: string) {
+		// POST /api/verify with { email, code }
+	}
+
+	async function handleResend() {
+		// POST /api/resend-code with { email }
+	}
+</script>
+
+<EmailVerifyForm
+	email="user@example.com"
+	onSubmit={handleVerify}
+	onResend={handleResend}
+	resendCooldownSeconds={30}
+	error={errorMessage}
+/>
+```
+
+## Props
+
+| Prop                    | Type                                       | Default  | Description                                              |
+| ----------------------- | ------------------------------------------ | -------- | -------------------------------------------------------- |
+| `email`                 | `string`                                   | required | Email address shown in the subhead                       |
+| `onSubmit`              | `(code: string) => void`                   | required | Called with the entered code (auto on complete + manual) |
+| `onResend`              | `() => Promise<void> \| void`              | —        | When set, renders a resend control                       |
+| `resendCooldownSeconds` | `number`                                   | `30`     | Cooldown after a successful resend                       |
+| `isSubmitting`          | `boolean`                                  | `false`  | Disables submit + OtpInput                               |
+| `error`                 | `string`                                   | —        | General error (renders alert + applies error styling)    |
+| `attemptsRemaining`     | `number`                                   | —        | Inline hint, e.g. "3 attempts remaining"                 |
+| `codeLength`            | `number`                                   | `6`      | Forwarded to OtpInput                                    |
+| `otpInputProps`         | `Partial<OtpInputProps>`                   | —        | Pass-through props for the inner OtpInput                |
+| `notifications`         | `NotificationsStack`                       | —        | Route errors to notification system                      |
+| `submitButton`          | `Snippet`                                  | —        | Override submit section                                  |
+| `footer`                | `Snippet`                                  | —        | Content below the resend control                         |
+| `t`                     | `TranslateFn`                              | built-in | Translation function                                     |
+| `unstyled`              | `boolean`                                  | `false`  | Skip default styling                                     |
+| `class`                 | `string`                                   | —        | Additional CSS classes on the form root                  |
+| `el`                    | `HTMLFormElement`                          | —        | Bindable form element                                    |
+
+## i18n keys
+
+| Key                                       | Default                                    |
+| ----------------------------------------- | ------------------------------------------ |
+| `email_verify_form.heading`               | `Check your email`                         |
+| `email_verify_form.subheading`            | `We sent a 6-digit code to {email}`        |
+| `email_verify_form.submit`                | `Verify`                                   |
+| `email_verify_form.submitting`            | `Verifying...`                             |
+| `email_verify_form.resend_prompt`         | `Didn't receive it?`                       |
+| `email_verify_form.resend`                | `Resend code`                              |
+| `email_verify_form.resend_cooldown`       | `Resend available in {seconds}s`           |
+| `email_verify_form.resent`                | `New code sent`                            |
+| `email_verify_form.attempts_remaining`    | `{count} attempts remaining`               |
+
+## CSS Tokens
+
+Prefix: `--stuic-email-verify-form-*`
+
+`gap`, `subheading-color`, `attempts-color`, `resend-color`, `resend-flash-color`

package/dist/components/EmailVerifyForm/_internal/email-verify-form-i18n-defaults.d.ts

@@ -0,0 +1 @@
+export declare function t_default(k: string, values?: false | null | undefined | Record<string, string | number>, fallback?: string | boolean): string;

package/dist/components/EmailVerifyForm/_internal/email-verify-form-i18n-defaults.js

@@ -0,0 +1,21 @@
+import { isPlainObject } from "../../../utils/is-plain-object.js";
+import { replaceMap } from "../../../utils/replace-map.js";
+const DEFAULTS = {
+    "email_verify_form.heading": "Check your email",
+    "email_verify_form.subheading": "We sent a 6-digit code to {email}",
+    "email_verify_form.submit": "Verify",
+    "email_verify_form.submitting": "Verifying...",
+    "email_verify_form.resend_prompt": "Didn't receive it?",
+    "email_verify_form.resend": "Resend code",
+    "email_verify_form.resend_cooldown": "Resend available in {seconds}s",
+    "email_verify_form.resent": "New code sent",
+    "email_verify_form.attempts_remaining": "{count} attempts remaining",
+};
+export function t_default(k, values = null, fallback = "") {
+    const out = DEFAULTS[k] ?? (typeof fallback === "string" ? fallback : "") ?? k;
+    return isPlainObject(values)
+        ? replaceMap(out, values, {
+            preSearchKeyTransform: (k) => `{${k}}`,
+        })
+        : out;
+}

package/dist/components/EmailVerifyForm/index.css

@@ -0,0 +1,54 @@
+:root {
+	--stuic-email-verify-form-gap: 1rem;
+	--stuic-email-verify-form-subheading-color: var(--stuic-color-muted-foreground);
+	--stuic-email-verify-form-attempts-color: var(--stuic-color-muted-foreground);
+	--stuic-email-verify-form-resend-color: var(--stuic-color-muted-foreground);
+	--stuic-email-verify-form-resend-flash-color: var(--stuic-color-primary);
+}
+
+@layer components {
+	.stuic-email-verify-form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-email-verify-form-gap);
+	}
+
+	.stuic-email-verify-form-heading {
+		margin: 0;
+	}
+
+	.stuic-email-verify-form-subheading {
+		margin: 0;
+		color: var(--stuic-email-verify-form-subheading-color);
+		font-size: var(--text-sm);
+	}
+
+	.stuic-email-verify-form-otp {
+		display: flex;
+		justify-content: center;
+		padding: 0.25rem 0;
+	}
+
+	.stuic-email-verify-form-attempts {
+		color: var(--stuic-email-verify-form-attempts-color);
+		font-size: var(--text-xs);
+		text-align: center;
+	}
+
+	.stuic-email-verify-form-submit {
+		margin-top: 0.25rem;
+	}
+
+	.stuic-email-verify-form-resend {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		font-size: var(--text-sm);
+		color: var(--stuic-email-verify-form-resend-color);
+	}
+
+	.stuic-email-verify-form-resend-flash {
+		color: var(--stuic-email-verify-form-resend-flash-color);
+	}
+}

package/dist/components/EmailVerifyForm/index.d.ts

@@ -0,0 +1 @@
+export { default as EmailVerifyForm, type Props as EmailVerifyFormProps, } from "./EmailVerifyForm.svelte";

package/dist/components/EmailVerifyForm/index.js

@@ -0,0 +1 @@
+export { default as EmailVerifyForm, } from "./EmailVerifyForm.svelte";

package/dist/components/LoginOrRegisterForm/LoginOrRegisterForm.svelte

@@ -6,9 +6,10 @@
 	import type { LoginFormData } from "../LoginForm/_internal/login-form-types.js";
 	import type { Props as RegisterFormProps } from "../RegisterForm/RegisterForm.svelte";
 	import type { RegisterFormData } from "../RegisterForm/_internal/register-form-types.js";
+	import type { Props as EmailVerifyFormProps } from "../EmailVerifyForm/EmailVerifyForm.svelte";
 	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 
-	export type LoginOrRegisterFormMode = "login" | "register";
+	export type LoginOrRegisterFormMode = "login" | "register" | "verify";
 
 	type InnerPropsCommonOmit =
 		| "formData"
@@ -45,6 +46,27 @@
 		/** Pass-through props for the inner RegisterForm (spread). */
 		registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
 
+		/**
+		 * Bindable email used by EmailVerifyForm (typically copied from registerData.email
+		 * when transitioning to "verify" mode).
+		 */
+		verifyEmail?: string;
+
+		/** Called when the user submits a code in the verify view. */
+		onVerify?: (code: string) => void;
+
+		/** Called when the user clicks "Resend code" in the verify view. */
+		onResendCode?: () => Promise<void> | void;
+
+		/** Pass-through props for the inner EmailVerifyForm (spread). */
+		verifyProps?: Omit<
+			EmailVerifyFormProps,
+			"email" | "onSubmit" | "onResend" | "isSubmitting" | "t" | "notifications" | "footer"
+		>;
+
+		/** Reserved for future use (verify mode is not exposed in the default switcher). */
+		verifyModeLabel?: string;
+
 		/** Override the built-in ButtonGroupRadio mode switcher. */
 		modeSwitcher?: Snippet<
 			[
@@ -102,17 +124,23 @@
 	import { createEmptyLoginFormData } from "../LoginForm/_internal/login-form-utils.js";
 	import RegisterForm from "../RegisterForm/RegisterForm.svelte";
 	import { createEmptyRegisterFormData } from "../RegisterForm/_internal/register-form-utils.js";
+	import EmailVerifyForm from "../EmailVerifyForm/EmailVerifyForm.svelte";
 	import ButtonGroupRadio from "../ButtonGroupRadio/ButtonGroupRadio.svelte";
 
 	let {
 		mode = $bindable("login"),
 		loginData = $bindable(createEmptyLoginFormData()),
 		registerData = $bindable(createEmptyRegisterFormData()),
+		verifyEmail = $bindable(""),
 		onLogin,
 		onRegister,
+		onVerify,
+		onResendCode,
 		isSubmitting = false,
 		loginProps,
 		registerProps,
+		verifyProps,
+		verifyModeLabel: _verifyModeLabel,
 		modeSwitcher,
 		loginModeLabel,
 		registerModeLabel,
@@ -138,10 +166,19 @@
 	// effect (which would be prone to loops).
 	function setMode(next: LoginOrRegisterFormMode) {
 		if (next === mode) return;
+		const sourceEmail =
+			mode === "verify"
+				? verifyEmail
+				: mode === "register"
+					? registerData.email
+					: loginData.email;
 		if (next === "register") {
-			registerData.email = loginData.email;
+			registerData.email = sourceEmail;
+		} else if (next === "login") {
+			loginData.email = sourceEmail;
 		} else {
-			loginData.email = registerData.email;
+			// next === "verify"
+			verifyEmail = sourceEmail;
 		}
 		mode = next;
 	}
@@ -157,21 +194,23 @@
 </script>
 
 <div class={_class} {...rest}>
-	<!-- Mode switcher -->
-	<div class={unstyled ? undefined : "stuic-login-or-register-form-switcher"}>
-		{#if modeSwitcher}
-			{@render modeSwitcher({ mode, setMode, t })}
-		{:else}
-			<ButtonGroupRadio
-				options={switcherOptions}
-				value={mode}
-				onButtonClick={(idx) => {
-					setMode(idx === 0 ? "login" : "register");
-					return false;
-				}}
-			/>
-		{/if}
-	</div>
+	<!-- Mode switcher (verify mode is never rendered as a tab — it's an outcome state) -->
+	{#if mode !== "verify"}
+		<div class={unstyled ? undefined : "stuic-login-or-register-form-switcher"}>
+			{#if modeSwitcher}
+				{@render modeSwitcher({ mode, setMode, t })}
+			{:else}
+				<ButtonGroupRadio
+					options={switcherOptions}
+					value={mode}
+					onButtonClick={(idx) => {
+						setMode(idx === 0 ? "login" : "register");
+						return false;
+					}}
+				/>
+			{/if}
+		</div>
+	{/if}
 
 	<!-- Active form -->
 	<div class={unstyled ? undefined : "stuic-login-or-register-form-body"}>
@@ -185,7 +224,7 @@
 				t={tProp}
 				{...loginProps}
 			/>
-		{:else}
+		{:else if mode === "register"}
 			<!-- svelte-ignore binding_property_non_reactive -->
 			<RegisterForm
 				bind:formData={registerData}
@@ -195,11 +234,21 @@
 				t={tProp}
 				{...registerProps}
 			/>
+		{:else}
+			<EmailVerifyForm
+				email={verifyEmail || registerData.email || loginData.email}
+				onSubmit={(code) => onVerify?.(code)}
+				onResend={onResendCode}
+				{isSubmitting}
+				{notifications}
+				t={tProp}
+				{...verifyProps}
+			/>
 		{/if}
 	</div>
 
-	<!-- Shared social logins -->
-	{#if socialLogins}
+	<!-- Shared social logins (hidden in verify mode — OAuth doesn't apply mid-verification) -->
+	{#if socialLogins && mode !== "verify"}
 		<div class={unstyled ? undefined : "stuic-login-or-register-form-social"}>
 			{#if socialDividerLabel !== false}
 				<div class={unstyled ? undefined : "stuic-login-or-register-form-social-divider"}>

package/dist/components/LoginOrRegisterForm/LoginOrRegisterForm.svelte.d.ts

@@ -5,8 +5,9 @@ import type { Props as LoginFormProps } from "../LoginForm/LoginForm.svelte";
 import type { LoginFormData } from "../LoginForm/_internal/login-form-types.js";
 import type { Props as RegisterFormProps } from "../RegisterForm/RegisterForm.svelte";
 import type { RegisterFormData } from "../RegisterForm/_internal/register-form-types.js";
+import type { Props as EmailVerifyFormProps } from "../EmailVerifyForm/EmailVerifyForm.svelte";
 import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
-export type LoginOrRegisterFormMode = "login" | "register";
+export type LoginOrRegisterFormMode = "login" | "register" | "verify";
 type InnerPropsCommonOmit = "formData" | "onSubmit" | "isSubmitting" | "t" | "notifications" | "socialLogins" | "socialDividerLabel" | "footer";
 export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Bindable active mode. Default: "login" */
@@ -25,6 +26,19 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit>;
     /** Pass-through props for the inner RegisterForm (spread). */
     registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
+    /**
+     * Bindable email used by EmailVerifyForm (typically copied from registerData.email
+     * when transitioning to "verify" mode).
+     */
+    verifyEmail?: string;
+    /** Called when the user submits a code in the verify view. */
+    onVerify?: (code: string) => void;
+    /** Called when the user clicks "Resend code" in the verify view. */
+    onResendCode?: () => Promise<void> | void;
+    /** Pass-through props for the inner EmailVerifyForm (spread). */
+    verifyProps?: Omit<EmailVerifyFormProps, "email" | "onSubmit" | "onResend" | "isSubmitting" | "t" | "notifications" | "footer">;
+    /** Reserved for future use (verify mode is not exposed in the default switcher). */
+    verifyModeLabel?: string;
     /** Override the built-in ButtonGroupRadio mode switcher. */
     modeSwitcher?: Snippet<[
         {
@@ -63,6 +77,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     unstyled?: boolean;
     class?: string;
 }
-declare const LoginOrRegisterForm: import("svelte").Component<Props, {}, "mode" | "loginData" | "registerData">;
+declare const LoginOrRegisterForm: import("svelte").Component<Props, {}, "mode" | "loginData" | "registerData" | "verifyEmail">;
 type LoginOrRegisterForm = ReturnType<typeof LoginOrRegisterForm>;
 export default LoginOrRegisterForm;

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte

@@ -19,18 +19,29 @@
 		/** Bindable register formData */
 		registerData?: RegisterFormData;
 
+		/** Bindable email used by EmailVerifyForm. */
+		verifyEmail?: string;
+
 		onLogin: (data: LoginFormData) => void;
 		onRegister: (data: RegisterFormData) => void;
 
+		/** Called when the user submits a code in the verify view. */
+		onVerify?: (code: string) => void;
+
+		/** Called when the user clicks "Resend code" in the verify view. */
+		onResendCode?: () => Promise<void> | void;
+
 		isSubmitting?: boolean;
 
 		loginProps?: InnerProps["loginProps"];
 		registerProps?: InnerProps["registerProps"];
+		verifyProps?: InnerProps["verifyProps"];
 
 		modeSwitcher?: InnerProps["modeSwitcher"];
 
 		loginModeLabel?: string;
 		registerModeLabel?: string;
+		verifyModeLabel?: string;
 
 		/** Shared social logins (rendered below the active form). */
 		socialLogins?: Snippet;
@@ -84,14 +95,19 @@
 		mode = $bindable("login"),
 		loginData = $bindable(createEmptyLoginFormData()),
 		registerData = $bindable(createEmptyRegisterFormData()),
+		verifyEmail = $bindable(""),
 		onLogin,
 		onRegister,
+		onVerify,
+		onResendCode,
 		isSubmitting = false,
 		loginProps,
 		registerProps,
+		verifyProps,
 		modeSwitcher,
 		loginModeLabel,
 		registerModeLabel,
+		verifyModeLabel,
 		socialLogins,
 		socialDividerLabel,
 		footer,
@@ -112,9 +128,11 @@
 
 	let resolvedTitle = $derived(
 		title ??
-			(mode === "login"
-				? t("login_or_register_form.modal_title_login")
-				: t("login_or_register_form.modal_title_register"))
+			(mode === "verify"
+				? t("login_or_register_form.modal_title_verify")
+				: mode === "login"
+					? t("login_or_register_form.modal_title_login")
+					: t("login_or_register_form.modal_title_register"))
 	);
 
 	let modal: Modal = $state()!;
@@ -164,14 +182,19 @@
 			bind:mode
 			bind:loginData
 			bind:registerData
+			bind:verifyEmail
 			{onLogin}
 			{onRegister}
+			{onVerify}
+			{onResendCode}
 			{isSubmitting}
 			{loginProps}
 			{registerProps}
+			{verifyProps}
 			{modeSwitcher}
 			{loginModeLabel}
 			{registerModeLabel}
+			{verifyModeLabel}
 			{socialLogins}
 			{socialDividerLabel}
 			{footer}

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte.d.ts

@@ -11,14 +11,22 @@ export interface Props {
     loginData?: LoginFormData;
     /** Bindable register formData */
     registerData?: RegisterFormData;
+    /** Bindable email used by EmailVerifyForm. */
+    verifyEmail?: string;
     onLogin: (data: LoginFormData) => void;
     onRegister: (data: RegisterFormData) => void;
+    /** Called when the user submits a code in the verify view. */
+    onVerify?: (code: string) => void;
+    /** Called when the user clicks "Resend code" in the verify view. */
+    onResendCode?: () => Promise<void> | void;
     isSubmitting?: boolean;
     loginProps?: InnerProps["loginProps"];
     registerProps?: InnerProps["registerProps"];
+    verifyProps?: InnerProps["verifyProps"];
     modeSwitcher?: InnerProps["modeSwitcher"];
     loginModeLabel?: string;
     registerModeLabel?: string;
+    verifyModeLabel?: string;
     /** Shared social logins (rendered below the active form). */
     socialLogins?: Snippet;
     socialDividerLabel?: string | false;
@@ -50,6 +58,6 @@ export interface Props {
 declare const LoginOrRegisterFormModal: import("svelte").Component<Props, {
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
     close: () => void;
-}, "visible" | "mode" | "loginData" | "registerData">;
+}, "visible" | "mode" | "loginData" | "registerData" | "verifyEmail">;
 type LoginOrRegisterFormModal = ReturnType<typeof LoginOrRegisterFormModal>;
 export default LoginOrRegisterFormModal;

package/dist/components/LoginOrRegisterForm/_internal/login-or-register-form-i18n-defaults.js

@@ -3,9 +3,11 @@ import { replaceMap } from "../../../utils/replace-map.js";
 const DEFAULTS = {
     "login_or_register_form.mode_login": "Log in",
     "login_or_register_form.mode_register": "Sign up",
+    "login_or_register_form.mode_verify": "Verify",
     "login_or_register_form.social_divider": "or continue with",
     "login_or_register_form.modal_title_login": "Log In",
     "login_or_register_form.modal_title_register": "Create account",
+    "login_or_register_form.modal_title_verify": "Verify your email",
 };
 export function t_default(k, values = null, fallback = "") {
     const out = DEFAULTS[k] ?? (typeof fallback === "string" ? fallback : "") ?? k;

package/dist/components/OtpInput/OtpInput.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, HTMLInputAttributes } from "svelte/elements";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "oninput"> {
+    /** Bindable concatenated value (e.g., "123456"). Length always equals `length` or shorter. */
+    value?: string;
+    /** Number of slots. Default: 6. Sensible range: 4..8. */
+    length?: number;
+    /** Fired when all slots are filled. Receives the concatenated string. */
+    onComplete?: (code: string) => void;
+    /** Fired on every change (keystroke, paste, backspace). */
+    oninput?: (value: string) => void;
+    /** When true, slots render in error styling (red border + aria-invalid). */
+    error?: boolean;
+    /** Disables all slots. */
+    disabled?: boolean;
+    /** Auto-focus the first empty slot on mount. Default: true. */
+    autoFocus?: boolean;
+    /** Restrict input. "numeric" (default) | "alphanumeric". */
+    mode?: "numeric" | "alphanumeric";
+    /** Pass-through to first slot for browser auto-fill. Default: "one-time-code". */
+    autocomplete?: HTMLInputAttributes["autocomplete"];
+    /** Skip default styling */
+    unstyled?: boolean;
+    /** Additional CSS classes on the root */
+    class?: string;
+    /** Bindable root element ref */
+    el?: HTMLDivElement;
+}
+declare const OtpInput: import("svelte").Component<Props, {}, "el" | "value">;
+type OtpInput = ReturnType<typeof OtpInput>;
+export default OtpInput;

package/dist/components/OtpInput/README.md

@@ -0,0 +1,55 @@
+# OtpInput
+
+Generic N-slot one-time-code input. 6 digits by default, configurable. Building block for email verification, 2FA, and password-reset OTP flows.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { OtpInput } from "@marianmeres/stuic";
+
+	let code = $state("");
+</script>
+
+<OtpInput
+	bind:value={code}
+	length={6}
+	onComplete={(c) => console.log("Got code:", c)}
+/>
+```
+
+## Props
+
+| Prop           | Type                            | Default            | Description                                                       |
+| -------------- | ------------------------------- | ------------------ | ----------------------------------------------------------------- |
+| `value`        | `string`                        | `""`               | Bindable concatenated value                                       |
+| `length`       | `number`                        | `6`                | Number of slots                                                   |
+| `onComplete`   | `(code: string) => void`        | —                  | Fired when all slots are filled                                   |
+| `oninput`      | `(value: string) => void`       | —                  | Fired on every change                                             |
+| `error`        | `boolean`                       | `false`            | Renders error styling + `aria-invalid`                            |
+| `disabled`     | `boolean`                       | `false`            | Disables all slots                                                |
+| `autoFocus`    | `boolean`                       | `true`             | Auto-focus the first empty slot on mount                          |
+| `mode`         | `"numeric" \| "alphanumeric"`   | `"numeric"`        | Restrict input characters                                         |
+| `autocomplete` | `string`                        | `"one-time-code"`  | Pass-through to first slot for browser/iOS auto-fill              |
+| `unstyled`     | `boolean`                       | `false`            | Skip default styling                                              |
+| `class`        | `string`                        | —                  | Additional CSS classes on the root                                |
+| `el`           | `HTMLDivElement`                | —                  | Bindable root element ref                                         |
+
+## Behavior
+
+- **Auto-advance**: typing in slot K moves focus to slot K+1.
+- **Backspace**: clears current slot; if already empty, jumps to and clears slot K-1.
+- **Arrow keys**: ←/→ navigate without modifying values.
+- **Paste**: any slot accepts paste; the pasted string is sanitized to allowed chars, truncated to `length`, and distributed across all slots starting from slot 0.
+- **iOS/Android SMS auto-fill**: first slot has `autocomplete="one-time-code"` by default. The OS auto-fills the full code into slot 0 — the input handler distributes it.
+- **Click**: focusing a filled slot selects its content (for easy overwrite).
+- **Enter**: bubbles a native submit to the surrounding `<form>`.
+- **Accessibility**: each slot gets `aria-label="Digit {n+1} of {length}"`.
+
+## CSS Tokens
+
+Prefix: `--stuic-otp-input-*`
+
+`gap`, `slot-size`, `font-size`, `bg`, `color`, `radius`, `border-width`, `border-color`, `border-color-focus`, `border-color-error`, `transition`
+
+The shared structural tokens `--stuic-radius`, `--stuic-border-width`, and `--stuic-transition` are used as fallbacks.

package/dist/components/OtpInput/index.css

@@ -0,0 +1,41 @@
+@layer components {
+	.stuic-otp-input {
+		display: flex;
+		gap: var(--stuic-otp-input-gap, 0.5rem);
+	}
+
+	.stuic-otp-input-slot {
+		width: var(--stuic-otp-input-slot-size, 2.75rem);
+		height: var(--stuic-otp-input-slot-size, 2.75rem);
+		text-align: center;
+		font-size: var(--stuic-otp-input-font-size, 1.25rem);
+		font-variant-numeric: tabular-nums;
+		background: var(--stuic-otp-input-bg, var(--stuic-color-background));
+		color: var(--stuic-otp-input-color, var(--stuic-color-foreground));
+		border-radius: var(--stuic-otp-input-radius, var(--stuic-radius));
+		border-style: solid;
+		border-width: var(--stuic-otp-input-border-width, var(--stuic-border-width));
+		border-color: var(--stuic-otp-input-border-color, var(--stuic-color-border));
+		transition: border-color var(--stuic-otp-input-transition, var(--stuic-transition));
+	}
+
+	.stuic-otp-input-slot:focus {
+		border-color: var(
+			--stuic-otp-input-border-color-focus,
+			var(--stuic-color-primary)
+		);
+		outline: none;
+	}
+
+	.stuic-otp-input-slot:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.stuic-otp-input[data-error="true"] .stuic-otp-input-slot {
+		border-color: var(
+			--stuic-otp-input-border-color-error,
+			var(--stuic-color-destructive)
+		);
+	}
+}

package/dist/components/OtpInput/index.d.ts

@@ -0,0 +1 @@
+export { default as OtpInput, type Props as OtpInputProps, } from "./OtpInput.svelte";

package/dist/components/OtpInput/index.js

@@ -0,0 +1 @@
+export { default as OtpInput, } from "./OtpInput.svelte";

package/dist/index.css

@@ -71,6 +71,7 @@ In practice:
 @import "./components/DataTable/index.css";
 @import "./components/DismissibleMessage/index.css";
 @import "./components/DropdownMenu/index.css";
+@import "./components/EmailVerifyForm/index.css";
 @import "./components/H/index.css";
 @import "./components/Header/index.css";
 @import "./components/ImageCycler/index.css";
@@ -82,6 +83,7 @@ In practice:
 @import "./components/ModalDialog/index.css";
 @import "./components/Nav/index.css";
 @import "./components/Notifications/index.css";
+@import "./components/OtpInput/index.css";
 @import "./components/PricingTable/index.css";
 @import "./components/Progress/index.css";
 @import "./components/Separator/index.css";

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
+export * from "./components/EmailVerifyForm/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";
 export * from "./components/ImageCycler/index.js";
@@ -58,6 +59,7 @@ export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Nav/index.js";
 export * from "./components/Notifications/index.js";
+export * from "./components/OtpInput/index.js";
 export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Separator/index.js";

package/dist/index.js

@@ -44,6 +44,7 @@ export * from "./components/DataTable/index.js";
 export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
+export * from "./components/EmailVerifyForm/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";
 export * from "./components/ImageCycler/index.js";
@@ -59,6 +60,7 @@ export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Nav/index.js";
 export * from "./components/Notifications/index.js";
+export * from "./components/OtpInput/index.js";
 export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Separator/index.js";

package/docs/domains/components.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-50 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
+55 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
 
 ## Component Categories
 
@@ -62,6 +62,10 @@
 | FieldKeyValues                        | Key-value pair editor                             |
 | FieldAssets                           | File/asset management                             |
 | LoginForm, LoginFormModal             | Standalone login form with optional modal variant |
+| RegisterForm                          | Standalone registration form with declarative extra fields |
+| LoginOrRegisterForm, LoginOrRegisterFormModal | Composite login/register/verify form (3 modes, shared social-logins) |
+| EmailVerifyForm                       | Post-registration email-verify form (OtpInput + resend cooldown) |
+| OtpInput                              | Generic N-slot one-time-code input (numeric/alphanumeric, paste-distribute) |
 
 ### Display
 
@@ -154,6 +158,201 @@ Prefix: `--stuic-login-form-*`
 
 ---
 
+## RegisterForm
+
+Standalone registration form. Mirrors `LoginForm` conventions: `formData`, `onSubmit`, validation, errors, i18n, notifications, social-logins. Adds declarative `extraFields` (top/bottom positioning, custom validators) and an `extraFieldsSlot` escape hatch (e.g., terms checkbox).
+
+### Exports
+
+| Export                        | Kind      | Description                            |
+| ----------------------------- | --------- | -------------------------------------- |
+| `RegisterForm`                | component | Main register form                     |
+| `RegisterFormProps`           | type      | Props for RegisterForm                 |
+| `RegisterFormData`            | type      | `{ email, password, passwordConfirm, extra }` |
+| `RegisterFormValidationError` | type      | `{ field, message }`                   |
+| `RegisterFieldConfig`         | type      | Declarative extra-field descriptor     |
+| `createEmptyRegisterFormData` | function  | Factory for an empty `RegisterFormData` |
+
+### Key Props
+
+| Prop                  | Type                              | Default  | Description                                |
+| --------------------- | --------------------------------- | -------- | ------------------------------------------ |
+| `formData`            | `RegisterFormData`                | empty    | Bindable form data                         |
+| `onSubmit`            | `(data) => void`                  | required | Submit callback                            |
+| `isSubmitting`        | `boolean`                         | `false`  | Disables CTA                               |
+| `errors`              | `RegisterFormValidationError[]`   | `[]`     | Field-specific server errors               |
+| `error`               | `string`                          | —        | General error (alert above form)           |
+| `showPasswordConfirm` | `boolean`                         | `true`   | Render password-confirm field              |
+| `passwordMinLength`   | `number`                          | `8`      | Min password length (input + validator)    |
+| `extraFields`         | `RegisterFieldConfig[]`           | `[]`     | Declarative extra fields (top/bottom)      |
+| `extraFieldsSlot`     | `Snippet`                         | —        | Escape-hatch for non-FieldInput extras     |
+| `submitButton`        | `Snippet`                         | —        | Custom CTA section                         |
+| `socialLogins`        | `Snippet`                         | —        | OAuth buttons below form                   |
+| `footer`              | `Snippet`                         | —        | Content below form                         |
+| `notifications`       | `NotificationsStack`              | —        | Route errors to notifications              |
+| `compact`             | `boolean`                         | `false`  | Compact layout                             |
+| `t`                   | `TranslateFn`                     | built-in | Translation function                       |
+
+### CSS Tokens
+
+Prefix: `--stuic-register-form-*`
+
+`gap`, `gap-row`, `social-margin-top`, `social-gap`, `social-divider-color`, `social-divider-line-color`, `social-divider-font-size`, `social-divider-margin-bottom`
+
+---
+
+## LoginOrRegisterForm
+
+Composite form that toggles between `LoginForm`, `RegisterForm`, and (since 3.71) `EmailVerifyForm`. The mode switcher only exposes login/register tabs; verify is an outcome state entered programmatically (typically after a `requiresVerification` register response).
+
+### Exports
+
+| Export                         | Kind      | Description                            |
+| ------------------------------ | --------- | -------------------------------------- |
+| `LoginOrRegisterForm`          | component | Composite form                         |
+| `LoginOrRegisterFormModal`     | component | Modal-wrapped variant                  |
+| `LoginOrRegisterFormProps`     | type      | Props for the composite form           |
+| `LoginOrRegisterFormModalProps`| type      | Props for the modal                    |
+| `LoginOrRegisterFormMode`      | type      | `"login" \| "register" \| "verify"`    |
+
+### Key Props
+
+| Prop                | Type                                                 | Default     | Description                                                                  |
+| ------------------- | ---------------------------------------------------- | ----------- | ---------------------------------------------------------------------------- |
+| `mode`              | `LoginOrRegisterFormMode`                            | `"login"`   | Bindable active mode                                                         |
+| `loginData`         | `LoginFormData`                                      | empty       | Bindable login form data                                                     |
+| `registerData`      | `RegisterFormData`                                   | empty       | Bindable register form data                                                  |
+| `verifyEmail`       | `string`                                             | `""`        | Bindable email used by EmailVerifyForm (auto-seeded on transitions)          |
+| `onLogin`           | `(data) => void`                                     | required    | Login submit callback                                                        |
+| `onRegister`        | `(data) => void`                                     | required    | Register submit callback                                                     |
+| `onVerify`          | `(code: string) => void`                             | —           | Verify submit callback (required only when using verify mode)                |
+| `onResendCode`      | `() => Promise<void> \| void`                        | —           | Resend handler — when set, EmailVerifyForm renders the resend control        |
+| `loginProps`        | `Partial<LoginFormProps>`                            | —           | Pass-through to inner LoginForm                                              |
+| `registerProps`     | `Partial<RegisterFormProps>`                         | —           | Pass-through to inner RegisterForm                                           |
+| `verifyProps`       | `Partial<EmailVerifyFormProps>`                      | —           | Pass-through to inner EmailVerifyForm (e.g., `error`, `attemptsRemaining`)  |
+| `modeSwitcher`      | `Snippet`                                            | —           | Override the built-in ButtonGroupRadio                                       |
+| `socialLogins`      | `Snippet`                                            | —           | Shared OAuth buttons (hidden in verify mode)                                 |
+| `footer`            | `Snippet<[{ mode, setMode }]>`                       | —           | Mode-aware footer                                                            |
+| `isSubmitting`      | `boolean`                                            | `false`     | Forwarded to all three forms                                                 |
+| `notifications`     | `NotificationsStack`                                 | —           | Routes errors to notifications                                               |
+| `t`                 | `TranslateFn`                                        | built-in    | Translation function                                                         |
+
+### Modal additions (`LoginOrRegisterFormModal`)
+
+Inherits all `LoginOrRegisterForm` props, plus:
+
+| Prop         | Type                  | Default   | Description                                                       |
+| ------------ | --------------------- | --------- | ----------------------------------------------------------------- |
+| `title`      | `string`              | mode-aware | Modal title (defaults to "Log In" / "Create account" / "Verify your email") |
+| `visible`    | `boolean`             | `false`   | Bindable visibility                                               |
+| `trigger`    | `Snippet<[{ open }]>` | —         | Optional trigger element                                          |
+| `noXClose`   | `boolean`             | `false`   | Hide close button                                                 |
+
+### CSS Tokens
+
+Prefix: `--stuic-login-or-register-form-*`
+
+`gap`, `switcher-margin-bottom`, `social-margin-top`, `social-gap`, `social-divider-*`
+
+### i18n
+
+| Key                                              | Default              |
+| ------------------------------------------------ | -------------------- |
+| `login_or_register_form.mode_login`              | `Log in`             |
+| `login_or_register_form.mode_register`           | `Sign up`            |
+| `login_or_register_form.mode_verify`             | `Verify`             |
+| `login_or_register_form.modal_title_login`       | `Log In`             |
+| `login_or_register_form.modal_title_register`    | `Create account`     |
+| `login_or_register_form.modal_title_verify`      | `Verify your email`  |
+| `login_or_register_form.social_divider`          | `or continue with`   |
+
+---
+
+## EmailVerifyForm
+
+Post-registration email-verify form. Drop-in peer to `LoginForm` / `RegisterForm`. Renders a heading, a subhead with the bolded email address, a general error banner, an `OtpInput` (default 6 digits, auto-submits on completion), an optional attempts hint, a primary submit button, and an optional resend control with built-in cooldown countdown.
+
+### Exports
+
+| Export                  | Kind      | Description                |
+| ----------------------- | --------- | -------------------------- |
+| `EmailVerifyForm`       | component | Email-verify form          |
+| `EmailVerifyFormProps`  | type      | Props for EmailVerifyForm  |
+
+### Key Props
+
+| Prop                    | Type                                       | Default  | Description                                              |
+| ----------------------- | ------------------------------------------ | -------- | -------------------------------------------------------- |
+| `email`                 | `string`                                   | required | Email shown in the subhead                               |
+| `onSubmit`              | `(code: string) => void`                   | required | Called with the entered code (auto + manual submit)      |
+| `onResend`              | `() => Promise<void> \| void`              | —        | When set, renders the resend control                     |
+| `resendCooldownSeconds` | `number`                                   | `30`     | Cooldown after a successful resend                       |
+| `isSubmitting`          | `boolean`                                  | `false`  | Disables submit + OtpInput                               |
+| `error`                 | `string`                                   | —        | General error (alert + applies error styling to OtpInput)|
+| `attemptsRemaining`     | `number`                                   | —        | Inline "{count} attempts remaining" hint                 |
+| `codeLength`            | `number`                                   | `6`      | Forwarded to OtpInput                                    |
+| `otpInputProps`         | `Partial<OtpInputProps>`                   | —        | Pass-through to inner OtpInput                           |
+| `notifications`         | `NotificationsStack`                       | —        | Route errors to notifications                            |
+| `submitButton`          | `Snippet`                                  | —        | Override submit section                                  |
+| `footer`                | `Snippet`                                  | —        | Content below resend control                             |
+| `t`                     | `TranslateFn`                              | built-in | Translation function                                     |
+
+### CSS Tokens
+
+Prefix: `--stuic-email-verify-form-*`
+
+`gap`, `subheading-color`, `attempts-color`, `resend-color`, `resend-flash-color`
+
+### i18n keys
+
+`email_verify_form.heading`, `subheading`, `submit`, `submitting`, `resend_prompt`, `resend`, `resend_cooldown`, `resent`, `attempts_remaining`
+
+---
+
+## OtpInput
+
+Generic N-slot one-time-code input. 6 numeric digits by default, configurable to 4–8. Building block for email-verify, future 2FA, and password-reset OTP flows.
+
+### Exports
+
+| Export          | Kind      | Description           |
+| --------------- | --------- | --------------------- |
+| `OtpInput`      | component | OTP input             |
+| `OtpInputProps` | type      | Props for OtpInput    |
+
+### Key Props
+
+| Prop           | Type                            | Default            | Description                                                       |
+| -------------- | ------------------------------- | ------------------ | ----------------------------------------------------------------- |
+| `value`        | `string`                        | `""`               | Bindable concatenated value                                       |
+| `length`       | `number`                        | `6`                | Number of slots                                                   |
+| `onComplete`   | `(code: string) => void`        | —                  | Fired when all slots are filled                                   |
+| `oninput`      | `(value: string) => void`       | —                  | Fired on every change                                             |
+| `error`        | `boolean`                       | `false`            | Renders error styling + `aria-invalid`                            |
+| `disabled`     | `boolean`                       | `false`            | Disables all slots                                                |
+| `autoFocus`    | `boolean`                       | `true`             | Auto-focus first empty slot on mount                              |
+| `mode`         | `"numeric" \| "alphanumeric"`   | `"numeric"`        | Restrict input characters                                         |
+| `autocomplete` | `string`                        | `"one-time-code"`  | Pass-through to first slot for browser/iOS auto-fill              |
+
+### Behavior
+
+- Auto-advance on input; backspace clears or jumps back
+- Arrow keys navigate without modifying values
+- Paste anywhere distributes from slot 0 (after sanitization + truncation)
+- iOS / Android SMS auto-fill works via `autocomplete="one-time-code"` on slot 0
+- Each slot announces `aria-label="Digit {n+1} of {length}"`
+- Enter bubbles native submit to surrounding `<form>`
+
+### CSS Tokens
+
+Prefix: `--stuic-otp-input-*`
+
+`gap`, `slot-size`, `font-size`, `bg`, `color`, `radius`, `border-width`, `border-color`, `border-color-focus`, `border-color-error`, `transition`
+
+Falls back to shared structural tokens `--stuic-radius`, `--stuic-border-width`, `--stuic-transition`.
+
+---
+
 ## FieldObject
 
 Dual-mode JSON object editor with pretty-print and raw edit modes.
@@ -578,6 +777,10 @@ Prefix: `--stuic-tree-*`
 | src/lib/components/Modal/     | Complex component example                             |
 | src/lib/components/Input/     | Form field patterns (incl. FieldObject)               |
 | src/lib/components/LoginForm/ | Standalone login form + modal variant                 |
+| src/lib/components/RegisterForm/         | Standalone registration form                       |
+| src/lib/components/LoginOrRegisterForm/  | Composite login/register/verify form + modal       |
+| src/lib/components/EmailVerifyForm/      | Post-registration email-verify form                |
+| src/lib/components/OtpInput/             | N-slot one-time-code input                         |
 | src/lib/components/Checkout/  | E-commerce checkout flow (14 exported sub-components) |
 | src/lib/components/Card/      | Card with image/title/footer variants                 |
 | src/lib/components/Tree/      | Hierarchical tree with drag-and-drop                  |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.70.1",
+  "version": "3.71.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",