@marianmeres/stuic 3.21.3 → 3.23.0

package/dist/components/Checkout/CheckoutCompleteStep.svelte

@@ -3,6 +3,7 @@
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { TranslateFn } from "../../types.js";
 	import type { CheckoutOrderData, CheckoutStep } from "./_internal/checkout-types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
 		/** Completed order data */
@@ -57,6 +58,9 @@
 		/** Additional content after the confirmation */
 		confirmationFooter?: Snippet<[{ orderId: string; order: CheckoutOrderData }]>;
 
+		/** Optional notifications instance — errors will be sent via notifications.error() */
+		notifications?: NotificationsStack;
+
 		t?: TranslateFn;
 		unstyled?: boolean;
 		class?: string;
@@ -79,6 +83,7 @@
 		emailSent,
 		isLoading = false,
 		error,
+		notifications,
 		hideProgress = false,
 		currentStep = "complete",
 		steps,
@@ -99,6 +104,10 @@
 
 	let t = $derived(tProp ?? t_default);
 
+	$effect(() => {
+		if (error && notifications) notifications.error(error);
+	});
+
 	let _class = $derived(
 		unstyled ? classProp : twMerge("stuic-checkout-complete-step", classProp)
 	);

package/dist/components/Checkout/CheckoutCompleteStep.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import type { TranslateFn } from "../../types.js";
 import type { CheckoutOrderData, CheckoutStep } from "./_internal/checkout-types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Completed order data */
     order: CheckoutOrderData;
@@ -38,6 +39,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
         orderId: string;
         order: CheckoutOrderData;
     }]>;
+    /** Optional notifications instance — errors will be sent via notifications.error() */
+    notifications?: NotificationsStack;
     t?: TranslateFn;
     unstyled?: boolean;
     class?: string;

package/dist/components/Checkout/CheckoutConfirmStep.svelte

@@ -7,6 +7,7 @@
 		CheckoutStep,
 		CheckoutValidationError,
 	} from "./_internal/checkout-types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
 		/** Order data to review and display totals */
@@ -73,6 +74,9 @@
 		/** Override entire right column */
 		rightColumn?: Snippet;
 
+		/** Optional notifications instance — errors will be sent via notifications.error() */
+		notifications?: NotificationsStack;
+
 		t?: TranslateFn;
 		unstyled?: boolean;
 		class?: string;
@@ -100,6 +104,7 @@
 		isLoading = false,
 		error,
 		validationErrors,
+		notifications,
 		isValid = true,
 		isSubmitting = false,
 		hideProgress = false,
@@ -129,6 +134,16 @@
 
 	let t = $derived(tProp ?? t_default);
 
+	$effect(() => {
+		if (error && notifications) notifications.error(error);
+	});
+
+	$effect(() => {
+		if (validationErrors && validationErrors.length > 0 && notifications) {
+			notifications.error(validationErrors.map((e) => e.message).join(", "));
+		}
+	});
+
 	let _class = $derived(
 		unstyled ? classProp : twMerge("stuic-checkout-confirm-step", classProp)
 	);

package/dist/components/Checkout/CheckoutConfirmStep.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import type { TranslateFn } from "../../types.js";
 import type { CheckoutOrderData, CheckoutStep, CheckoutValidationError } from "./_internal/checkout-types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Order data to review and display totals */
     order: CheckoutOrderData;
@@ -38,6 +39,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     leftColumn?: Snippet;
     /** Override entire right column */
     rightColumn?: Snippet;
+    /** Optional notifications instance — errors will be sent via notifications.error() */
+    notifications?: NotificationsStack;
     t?: TranslateFn;
     unstyled?: boolean;
     class?: string;

package/dist/components/Checkout/CheckoutGuestForm.svelte

@@ -6,6 +6,7 @@
 		CheckoutCustomerFormData,
 		CheckoutValidationError,
 	} from "./_internal/checkout-types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
 		/** Bindable form data. Default: createEmptyCustomerFormData() */
@@ -54,6 +55,9 @@
 		 */
 		validate?: (data: CheckoutCustomerFormData) => CheckoutValidationError[];
 
+		/** Optional notifications instance */
+		notifications?: NotificationsStack;
+
 		t?: TranslateFn;
 		unstyled?: boolean;
 		class?: string;
@@ -76,6 +80,7 @@
 		onSubmit,
 		isSubmitting = false,
 		errors: externalErrors = [],
+		notifications,
 		showB2bFields = true,
 		b2bExpanded = false,
 		fields,

package/dist/components/Checkout/CheckoutGuestForm.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import type { TranslateFn } from "../../types.js";
 import type { CheckoutCustomerFormData, CheckoutValidationError } from "./_internal/checkout-types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
     /** Bindable form data. Default: createEmptyCustomerFormData() */
     formData?: CheckoutCustomerFormData;
@@ -41,6 +42,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children">
      * Return empty array = valid. When provided, replaces (not extends) built-in validation.
      */
     validate?: (data: CheckoutCustomerFormData) => CheckoutValidationError[];
+    /** Optional notifications instance */
+    notifications?: NotificationsStack;
     t?: TranslateFn;
     unstyled?: boolean;
     class?: string;

package/dist/components/Checkout/CheckoutGuestOrLoginForm.svelte

@@ -4,6 +4,8 @@
 	import type { TranslateFn } from "../../types.js";
 	import type { Props as GuestFormProps } from "./CheckoutGuestForm.svelte";
 	import type { Props as LoginFormProps } from "./CheckoutLoginForm.svelte";
+	import type { Props as LoginFormModalProps } from "../LoginForm/LoginFormModal.svelte";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 
 	export type FormMode = "guest-only" | "login-only" | "tabbed" | "stacked";
 
@@ -23,6 +25,22 @@
 		 */
 		formMode?: FormMode;
 
+		/**
+		 * When provided, clicking the login tab opens a LoginFormModal
+		 * instead of rendering the form inline (tabbed mode only).
+		 * Form-related props are taken from loginForm.
+		 */
+		loginModal?: Pick<
+			LoginFormModalProps,
+			| "title"
+			| "classModal"
+			| "classInner"
+			| "classForm"
+			| "noXClose"
+			| "onClose"
+			| "showRememberMe"
+		>;
+
 		/** Tab label for the guest form tab. Default from i18n. */
 		guestTabLabel?: string;
 
@@ -35,6 +53,9 @@
 		/** Optional heading rendered above the switcher/forms */
 		heading?: Snippet | string;
 
+		/** Optional notifications instance — forwarded to child forms */
+		notifications?: NotificationsStack;
+
 		t?: TranslateFn;
 		unstyled?: boolean;
 		class?: string;
@@ -51,14 +72,35 @@
 	import { t_default } from "./_internal/checkout-i18n-defaults.js";
 	import CheckoutGuestForm from "./CheckoutGuestForm.svelte";
 	import CheckoutLoginForm from "./CheckoutLoginForm.svelte";
+	import LoginFormModal from "../LoginForm/LoginFormModal.svelte";
 	import TabbedMenu from "../TabbedMenu/TabbedMenu.svelte";
 	import { H, type HLevel } from "../H/index.js";
 	import CheckoutSectionHeader from "./CheckoutSectionHeader.svelte";
 
+	// Map login_form.* keys → checkout.login.* keys (same as CheckoutLoginForm)
+	const LOGIN_FORM_KEY_MAP: Record<string, string> = {
+		"login_form.email_label": "checkout.login.email_label",
+		"login_form.email_placeholder": "checkout.login.email_placeholder",
+		"login_form.password_label": "checkout.login.password_label",
+		"login_form.password_placeholder": "checkout.login.password_placeholder",
+		"login_form.submit": "checkout.login.submit",
+		"login_form.submitting": "checkout.login.submitting",
+		"login_form.forgot_password": "checkout.login.forgot_password",
+		"login_form.email_required": "checkout.login.email_required",
+		"login_form.email_invalid": "checkout.login.email_invalid",
+		"login_form.password_required": "checkout.login.password_required",
+		"login_form.social_divider": "checkout.login.social_divider",
+		"login_form.remember_me": "checkout.login.remember_me",
+		"login_form.remember_me_tooltip": "checkout.login.remember_me_tooltip",
+		"login_form.modal_title": "checkout.login.modal_title",
+	};
+
 	let {
 		guestForm,
 		loginForm,
 		formMode = "tabbed",
+		loginModal,
+		notifications,
 		guestTabLabel,
 		loginTabLabel,
 		activeTab = $bindable("guest"),
@@ -74,9 +116,33 @@
 
 	let t = $derived(tProp ?? t_default);
 
+	let loginModalRef: LoginFormModal = $state()!;
+
+	// Adapted t for LoginFormModal (maps login_form.* → checkout.login.*)
+	let modalT = $derived(
+		loginModal
+			? (
+					key: string,
+					values?: false | null | undefined | Record<string, string | number>,
+					fallback?: string | boolean
+				) => t(LOGIN_FORM_KEY_MAP[key] ?? key, values, fallback)
+			: undefined
+	);
+
 	let tabItems = $derived([
 		{ id: "guest", label: guestTabLabel ?? t("checkout.guest_or_login.guest_tab") },
-		{ id: "login", label: loginTabLabel ?? t("checkout.guest_or_login.login_tab") },
+		{
+			id: "login",
+			label: loginTabLabel ?? t("checkout.guest_or_login.login_tab"),
+			...(loginModal
+				? {
+						onSelect: () => {
+							loginModalRef?.open();
+							return false;
+						},
+					}
+				: {}),
+		},
 	]);
 
 	let _class = $derived(
@@ -100,11 +166,11 @@
 
 	{#if formMode === "guest-only"}
 		{#if guestForm}
-			<CheckoutGuestForm {...guestForm} t={tProp} {unstyled} />
+			<CheckoutGuestForm {...guestForm} {notifications} t={tProp} {unstyled} />
 		{/if}
 	{:else if formMode === "login-only"}
 		{#if loginForm}
-			<CheckoutLoginForm {...loginForm} t={tProp} {unstyled} />
+			<CheckoutLoginForm {...loginForm} {notifications} t={tProp} {unstyled} />
 		{/if}
 	{:else if formMode === "tabbed"}
 		<TabbedMenu
@@ -118,22 +184,45 @@
 		/>
 		{#if activeTab === "guest" && guestForm}
 			<div role="tabpanel">
-				<CheckoutGuestForm {...guestForm} t={tProp} {unstyled} />
+				<CheckoutGuestForm {...guestForm} {notifications} t={tProp} {unstyled} />
 			</div>
 		{:else if activeTab === "login" && loginForm}
 			<div role="tabpanel">
-				<CheckoutLoginForm {...loginForm} t={tProp} {unstyled} />
+				<CheckoutLoginForm {...loginForm} {notifications} t={tProp} {unstyled} />
 			</div>
 		{/if}
 	{:else if formMode === "stacked"}
 		{#if loginForm}
-			<CheckoutLoginForm {...loginForm} t={tProp} {unstyled} />
+			<CheckoutLoginForm {...loginForm} {notifications} t={tProp} {unstyled} />
 		{/if}
 		<div class={unstyled ? undefined : "stuic-checkout-guest-or-login-divider"}>
 			<span>{t("checkout.step.or_divider")}</span>
 		</div>
 		{#if guestForm}
-			<CheckoutGuestForm {...guestForm} t={tProp} {unstyled} />
+			<CheckoutGuestForm {...guestForm} {notifications} t={tProp} {unstyled} />
 		{/if}
 	{/if}
+
+	{#if loginModal && loginForm}
+		<LoginFormModal
+			bind:this={loginModalRef}
+			formData={loginForm.formData}
+			onSubmit={loginForm.onSubmit}
+			isSubmitting={loginForm.isSubmitting}
+			errors={loginForm.errors}
+			error={loginForm.error}
+			onForgotPassword={loginForm.onForgotPassword}
+			submitLabel={loginForm.submitLabel}
+			submittingLabel={loginForm.submittingLabel}
+			submitButton={loginForm.submitButton}
+			socialLogins={loginForm.socialLogins}
+			socialDividerLabel={loginForm.socialDividerLabel}
+			footer={loginForm.footer}
+			{notifications}
+			title={loginTabLabel ?? t("checkout.guest_or_login.login_tab")}
+			t={modalT}
+			{unstyled}
+			{...loginModal}
+		/>
+	{/if}
 </div>

package/dist/components/Checkout/CheckoutGuestOrLoginForm.svelte.d.ts

@@ -3,6 +3,8 @@ import type { HTMLAttributes } from "svelte/elements";
 import type { TranslateFn } from "../../types.js";
 import type { Props as GuestFormProps } from "./CheckoutGuestForm.svelte";
 import type { Props as LoginFormProps } from "./CheckoutLoginForm.svelte";
+import type { Props as LoginFormModalProps } from "../LoginForm/LoginFormModal.svelte";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 export type FormMode = "guest-only" | "login-only" | "tabbed" | "stacked";
 export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Guest form configuration. Required for "guest-only", "tabbed", "stacked" modes. */
@@ -17,6 +19,12 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
      * - "stacked": Show both forms stacked vertically with a divider
      */
     formMode?: FormMode;
+    /**
+     * When provided, clicking the login tab opens a LoginFormModal
+     * instead of rendering the form inline (tabbed mode only).
+     * Form-related props are taken from loginForm.
+     */
+    loginModal?: Pick<LoginFormModalProps, "title" | "classModal" | "classInner" | "classForm" | "noXClose" | "onClose" | "showRememberMe">;
     /** Tab label for the guest form tab. Default from i18n. */
     guestTabLabel?: string;
     /** Tab label for the login form tab. Default from i18n. */
@@ -25,6 +33,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     activeTab?: "guest" | "login";
     /** Optional heading rendered above the switcher/forms */
     heading?: Snippet | string;
+    /** Optional notifications instance — forwarded to child forms */
+    notifications?: NotificationsStack;
     t?: TranslateFn;
     unstyled?: boolean;
     class?: string;

package/dist/components/Checkout/CheckoutLoginForm.svelte

@@ -6,6 +6,7 @@
 		CheckoutLoginFormData,
 		CheckoutValidationError,
 	} from "./_internal/checkout-types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
 		/** Bindable login data. Default: createEmptyLoginFormData() */
@@ -62,6 +63,9 @@
 		 */
 		footer?: Snippet;
 
+		/** Optional notifications instance — errors will be sent via notifications.error() */
+		notifications?: NotificationsStack;
+
 		t?: TranslateFn;
 		unstyled?: boolean;
 		class?: string;
@@ -72,27 +76,28 @@
 <script lang="ts">
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { t_default } from "./_internal/checkout-i18n-defaults.js";
-	import {
-		createEmptyLoginFormData,
-		validateLoginForm,
-	} from "./_internal/checkout-utils.js";
-	import Button from "../Button/Button.svelte";
-	import DismissibleMessage from "../DismissibleMessage/DismissibleMessage.svelte";
-	import FieldInput from "../Input/FieldInput.svelte";
+	import { createEmptyLoginFormData } from "./_internal/checkout-utils.js";
+	import LoginForm from "../LoginForm/LoginForm.svelte";
+
+	// Map login_form.* keys → checkout.login.* keys for backwards compatibility
+	const KEY_MAP: Record<string, string> = {
+		"login_form.email_label": "checkout.login.email_label",
+		"login_form.email_placeholder": "checkout.login.email_placeholder",
+		"login_form.password_label": "checkout.login.password_label",
+		"login_form.password_placeholder": "checkout.login.password_placeholder",
+		"login_form.submit": "checkout.login.submit",
+		"login_form.submitting": "checkout.login.submitting",
+		"login_form.forgot_password": "checkout.login.forgot_password",
+		"login_form.email_required": "checkout.login.email_required",
+		"login_form.email_invalid": "checkout.login.email_invalid",
+		"login_form.password_required": "checkout.login.password_required",
+		"login_form.social_divider": "checkout.login.social_divider",
+		"login_form.remember_me": "checkout.login.remember_me",
+		"login_form.remember_me_tooltip": "checkout.login.remember_me_tooltip",
+	};
 
 	let {
 		formData = $bindable(createEmptyLoginFormData()),
-		onSubmit,
-		isSubmitting = false,
-		errors: externalErrors = [],
-		error,
-		onForgotPassword,
-		submitLabel,
-		submittingLabel,
-		submitButton,
-		socialLogins,
-		socialDividerLabel,
-		footer,
 		t: tProp,
 		unstyled = false,
 		class: classProp,
@@ -102,128 +107,19 @@
 
 	let t = $derived(tProp ?? t_default);
 
-	// Internal validation errors (set on submit)
-	let internalErrors = $state<CheckoutValidationError[]>([]);
-
-	// Merge internal + external errors; external takes precedence per field
-	let allErrors = $derived.by(() => {
-		const map = new Map<string, string>();
-		for (const e of internalErrors) map.set(e.field, e.message);
-		for (const e of externalErrors) map.set(e.field, e.message);
-		return [...map.entries()].map(([field, message]) => ({ field, message }));
-	});
-
-	function fieldError(field: string): string | undefined {
-		return allErrors.find((e) => e.field === field)?.message;
-	}
-
-	function handleSubmit(e: SubmitEvent) {
-		e.preventDefault();
-
-		const validationErrors = validateLoginForm(formData, t);
-		internalErrors = validationErrors;
-
-		if (validationErrors.length === 0 && externalErrors.length === 0) {
-			onSubmit(formData);
-		}
-	}
+	// Adapt the t function: LoginForm uses login_form.* keys,
+	// but checkout consumers provide checkout.login.* translations
+	let adaptedT = $derived(
+		(
+			key: string,
+			values?: false | null | undefined | Record<string, string | number>,
+			fallback?: string | boolean
+		) => t(KEY_MAP[key] ?? key, values, fallback)
+	);
 
 	let _class = $derived(
 		unstyled ? classProp : twMerge("stuic-checkout-login-form", classProp)
 	);
 </script>
 
-<form bind:this={el} class={_class} onsubmit={handleSubmit} novalidate {...rest}>
-	<!-- General error alert -->
-	<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
-
-	<!--
-		svelte-ignore binding_property_non_reactive:
-		formData is a $bindable prop — deep reactivity depends on the consumer
-		passing a $state() object. The bindings work correctly regardless.
-	-->
-	<!-- Email -->
-	<!-- svelte-ignore binding_property_non_reactive -->
-	<FieldInput
-		bind:value={formData.email}
-		label={t("checkout.login.email_label")}
-		type="email"
-		placeholder={t("checkout.login.email_placeholder")}
-		required
-		name="checkout-login-email"
-		labelLeftBreakpoint={0}
-		validate={{
-			customValidator(val) {
-				return fieldError("email") || "";
-			},
-		}}
-	/>
-
-	<!-- Password -->
-	<!-- svelte-ignore binding_property_non_reactive -->
-	<FieldInput
-		bind:value={formData.password}
-		label={t("checkout.login.password_label")}
-		type="password"
-		placeholder={t("checkout.login.password_placeholder")}
-		required
-		name="checkout-login-password"
-		labelLeftBreakpoint={0}
-		validate={{
-			customValidator(val) {
-				return fieldError("password") || "";
-			},
-		}}
-	/>
-
-	<!-- CTA -->
-	{#if submitButton}
-		{@render submitButton({ isSubmitting, disabled: isSubmitting })}
-	{:else}
-		<div class={unstyled ? undefined : "stuic-checkout-login-submit"}>
-			<Button intent="primary" type="submit" disabled={isSubmitting} class="w-full">
-				{isSubmitting
-					? (submittingLabel ?? t("checkout.login.submitting"))
-					: (submitLabel ?? t("checkout.login.submit"))}
-			</Button>
-		</div>
-	{/if}
-
-	<!-- Forgot password -->
-	{#if onForgotPassword}
-		<div class={unstyled ? undefined : "stuic-checkout-login-forgot"}>
-			<Button
-				variant="link"
-				type="button"
-				class="text-muted-foreground"
-				size="sm"
-				onclick={onForgotPassword}
-			>
-				{t("checkout.login.forgot_password")}
-			</Button>
-		</div>
-	{/if}
-
-	<!-- Social logins -->
-	{#if socialLogins}
-		<div class={unstyled ? undefined : "stuic-checkout-login-social"}>
-			{#if socialDividerLabel !== false}
-				<div class={unstyled ? undefined : "stuic-checkout-login-social-divider"}>
-					<span>
-						{typeof socialDividerLabel === "string"
-							? socialDividerLabel
-							: t("checkout.login.social_divider")}
-					</span>
-				</div>
-			{/if}
-			<div class={unstyled ? undefined : "stuic-checkout-login-social-buttons"}>
-				{@render socialLogins()}
-			</div>
-		</div>
-	{/if}
-
-	<!-- Footer -->
-	{#if footer}
-		{@render footer()}
-	{/if}
-</form>
+<LoginForm bind:formData bind:el t={adaptedT} {unstyled} class={_class} {...rest} />

package/dist/components/Checkout/CheckoutLoginForm.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import type { TranslateFn } from "../../types.js";
 import type { CheckoutLoginFormData, CheckoutValidationError } from "./_internal/checkout-types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
     /** Bindable login data. Default: createEmptyLoginFormData() */
     formData?: CheckoutLoginFormData;
@@ -48,6 +49,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children">
      * Use for "Or continue as guest" links, sign-up links, etc.
      */
     footer?: Snippet;
+    /** Optional notifications instance — errors will be sent via notifications.error() */
+    notifications?: NotificationsStack;
     t?: TranslateFn;
     unstyled?: boolean;
     class?: string;

package/dist/components/Checkout/CheckoutReviewStep.svelte

@@ -9,6 +9,7 @@
 		CheckoutStep,
 		CheckoutValidationError,
 	} from "./_internal/checkout-types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
 		/** Cart items to display in the cart review */
@@ -94,6 +95,9 @@
 		/** Override the right column entirely */
 		rightColumn?: Snippet;
 
+		/** Optional notifications instance — errors will be sent via notifications.error() */
+		notifications?: NotificationsStack;
+
 		t?: TranslateFn;
 		unstyled?: boolean;
 		class?: string;
@@ -114,6 +118,7 @@
 		items,
 		isLoading = false,
 		error,
+		notifications,
 		hideProgress = false,
 		currentStep = "review",
 		steps,
@@ -137,6 +142,10 @@
 
 	let t = $derived(tProp ?? t_default);
 
+	$effect(() => {
+		if (error && notifications) notifications.error(error);
+	});
+
 	let _class = $derived(
 		unstyled ? classProp : twMerge("stuic-checkout-review-step", classProp)
 	);
@@ -202,6 +211,7 @@
 						{guestTabLabel}
 						{loginTabLabel}
 						heading={t("checkout.step.contact_title")}
+						{notifications}
 						t={tProp}
 						{unstyled}
 					/>

package/dist/components/Checkout/CheckoutReviewStep.svelte.d.ts

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from "svelte/elements";
 import type { TranslateFn } from "../../types.js";
 import type { CartComponentItem } from "../Cart/Cart.svelte";
 import type { CheckoutCustomerFormData, CheckoutLoginFormData, CheckoutStep, CheckoutValidationError } from "./_internal/checkout-types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Cart items to display in the cart review */
     items: CartComponentItem[];
@@ -63,6 +64,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     leftColumn?: Snippet;
     /** Override the right column entirely */
     rightColumn?: Snippet;
+    /** Optional notifications instance — errors will be sent via notifications.error() */
+    notifications?: NotificationsStack;
     t?: TranslateFn;
     unstyled?: boolean;
     class?: string;