@marianmeres/stuic 3.115.0 → 3.116.0

package/dist/components/Card/index.css

@@ -50,7 +50,8 @@
 		height: 100%;
 		overflow: hidden;
 		background: var(--stuic-card-bg);
-		border: var(--stuic-card-border-width, var(--stuic-border-width)) solid var(--stuic-card-border);
+		border: var(--stuic-card-border-width, var(--stuic-border-width)) solid
+			var(--stuic-card-border);
 		border-radius: var(--stuic-card-radius, var(--stuic-radius-container));
 		box-shadow: var(--stuic-card-shadow, var(--stuic-shadow));
 		transition:

package/dist/components/Carousel/Carousel.svelte

@@ -403,9 +403,7 @@
 		</div>
 
 		{#if arrows && coll.size > 1}
-			<div
-				class="absolute inset-0 flex items-center justify-between pointer-events-none"
-			>
+			<div class="absolute inset-0 flex items-center justify-between pointer-events-none">
 				<Button
 					class={twMerge(
 						"stuic-carousel-arrow pointer-events-auto p-0! ml-4",

package/dist/components/Carousel/README.md

@@ -5,34 +5,34 @@ keyboard navigation, snap scrolling, and flexible content rendering via THC.
 
 ## Props
 
-| Prop              | Type                                                                | Default    | Description                            |
-| ----------------- | ------------------------------------------------------------------- | ---------- | -------------------------------------- |
-| `items`           | `CarouselItem[]`                                                    | required   | Array of carousel items                |
-| `itemsPerView`    | `number`                                                            | `1`        | Number of items visible per view       |
-| `peekPercent`     | `number`                                                            | `0`        | Percentage of next item to show (0-50) |
-| `gap`             | `number \| string`                                                  | -          | Gap between items                      |
-| `minItemWidth`    | `number`                                                            | `150`      | Minimum item width in px (auto-fit floor) |
-| `trackActive`     | `boolean`                                                           | `false`    | Enable active item tracking            |
-| `syncActiveOnScroll` | `boolean`                                                        | `false`    | Update active item based on scroll position (requires `trackActive`) |
-| `activeIndex`     | `number`                                                            | `0`        | Active item index (bindable)           |
-| `value`           | `string \| number`                                                  | -          | Active item id (bindable)              |
-| `snap`            | `boolean`                                                           | `true`     | Enable scroll snap                     |
-| `snapAlign`       | `"start" \| "center" \| "end"`                                      | `"start"`  | Snap alignment                         |
-| `keyboard`        | `boolean`                                                           | `true`     | Enable keyboard navigation             |
-| `wheelScroll`     | `boolean`                                                           | `true`     | Enable horizontal scrolling via mouse wheel |
-| `loop`            | `boolean`                                                           | `false`    | Loop navigation (arrows / keyboard only — wheel never loops) |
-| `scrollBehavior`  | `ScrollBehavior`                                                    | `"smooth"` | Scroll behavior (overridden to `"instant"` when `prefers-reduced-motion: reduce`) |
-| `scrollbar`       | `boolean`                                                           | `true`     | Show the scrollbar on hover (set `false` when using nav buttons) |
-| `arrows`          | `boolean`                                                           | `false`    | Show prev/next arrow buttons overlaid on left/right edges |
-| `classArrow`      | `string`                                                            | -          | Custom class for arrow buttons         |
-| `class`           | `string`                                                            | -          | Custom class for container             |
-| `classTrack`      | `string`                                                            | -          | Custom class for scroll track          |
-| `classItem`       | `string`                                                            | -          | Custom class for items                 |
-| `classItemActive` | `string`                                                            | -          | Custom class for active item           |
-| `unstyled`        | `boolean`                                                           | `false`    | Skip default styling                   |
-| `el`              | `HTMLDivElement`                                                    | -          | Element reference (bindable)           |
-| `onActiveChange`  | `(item: CarouselItem, index: number) => void`                       | -          | Callback when active changes           |
-| `renderItem`      | `Snippet<[{ item: CarouselItem; index: number; active: boolean }]>` | -          | Custom item render snippet             |
+| Prop                 | Type                                                                | Default    | Description                                                                       |
+| -------------------- | ------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------- |
+| `items`              | `CarouselItem[]`                                                    | required   | Array of carousel items                                                           |
+| `itemsPerView`       | `number`                                                            | `1`        | Number of items visible per view                                                  |
+| `peekPercent`        | `number`                                                            | `0`        | Percentage of next item to show (0-50)                                            |
+| `gap`                | `number \| string`                                                  | -          | Gap between items                                                                 |
+| `minItemWidth`       | `number`                                                            | `150`      | Minimum item width in px (auto-fit floor)                                         |
+| `trackActive`        | `boolean`                                                           | `false`    | Enable active item tracking                                                       |
+| `syncActiveOnScroll` | `boolean`                                                           | `false`    | Update active item based on scroll position (requires `trackActive`)              |
+| `activeIndex`        | `number`                                                            | `0`        | Active item index (bindable)                                                      |
+| `value`              | `string \| number`                                                  | -          | Active item id (bindable)                                                         |
+| `snap`               | `boolean`                                                           | `true`     | Enable scroll snap                                                                |
+| `snapAlign`          | `"start" \| "center" \| "end"`                                      | `"start"`  | Snap alignment                                                                    |
+| `keyboard`           | `boolean`                                                           | `true`     | Enable keyboard navigation                                                        |
+| `wheelScroll`        | `boolean`                                                           | `true`     | Enable horizontal scrolling via mouse wheel                                       |
+| `loop`               | `boolean`                                                           | `false`    | Loop navigation (arrows / keyboard only — wheel never loops)                      |
+| `scrollBehavior`     | `ScrollBehavior`                                                    | `"smooth"` | Scroll behavior (overridden to `"instant"` when `prefers-reduced-motion: reduce`) |
+| `scrollbar`          | `boolean`                                                           | `true`     | Show the scrollbar on hover (set `false` when using nav buttons)                  |
+| `arrows`             | `boolean`                                                           | `false`    | Show prev/next arrow buttons overlaid on left/right edges                         |
+| `classArrow`         | `string`                                                            | -          | Custom class for arrow buttons                                                    |
+| `class`              | `string`                                                            | -          | Custom class for container                                                        |
+| `classTrack`         | `string`                                                            | -          | Custom class for scroll track                                                     |
+| `classItem`          | `string`                                                            | -          | Custom class for items                                                            |
+| `classItemActive`    | `string`                                                            | -          | Custom class for active item                                                      |
+| `unstyled`           | `boolean`                                                           | `false`    | Skip default styling                                                              |
+| `el`                 | `HTMLDivElement`                                                    | -          | Element reference (bindable)                                                      |
+| `onActiveChange`     | `(item: CarouselItem, index: number) => void`                       | -          | Callback when active changes                                                      |
+| `renderItem`         | `Snippet<[{ item: CarouselItem; index: number; active: boolean }]>` | -          | Custom item render snippet                                                        |
 
 ## CarouselItem Interface
 

package/dist/components/Cart/Cart.svelte

@@ -427,7 +427,8 @@
 										type="button"
 										class={!unstyled ? "stuic-cart-remove" : undefined}
 										disabled={isUpdating}
-										aria-label={t("remove_item_aria", { name: item.name }) || t("remove_item")}
+										aria-label={t("remove_item_aria", { name: item.name }) ||
+											t("remove_item")}
 										onclick={() => onRemove?.(item.id)}
 									>
 										{t("remove_item")}

package/dist/components/Cart/README.md

@@ -118,20 +118,20 @@ Minimal, dense read-only list for order confirmation screens or invoices. Each l
 
 ## Props
 
-| Prop               | Type                                | Default                       | Description                                                         |
-| ------------------ | ----------------------------------- | ----------------------------- | ------------------------------------------------------------------- |
-| `items`            | `CartComponentItem[]`               | required                      | Cart items to display                                               |
-| `variant`          | `"default" \| "compact" \| "summary"` | `"default"`                 | Layout variant. `compact` = smaller/scrollable (implicit readonly); `summary` = receipt-style list with name ×qty + line total, no thumbnails/controls/footer (implicit readonly) |
-| `formatPrice`      | `(value: number) => string`         | `(v) => (v / 100).toFixed(2)` | Format numeric price for display                                    |
-| `onQuantityChange` | `(id: string, qty: number) => void` | —                             | Called when quantity changes                                        |
-| `onRemove`         | `(id: string) => void`              | —                             | Called when remove is clicked                                       |
-| `readonly`         | `boolean`                           | `false`                       | Hide interactive controls                                           |
-| `loading`          | `boolean`                           | `false`                       | Show loading skeleton                                               |
-| `updatingItems`    | `Set<string>`                       | `new Set()`                   | Item IDs currently being updated                                    |
-| `t`                | `TranslateFn`                       | built-in                      | Translation function                                                |
-| `unstyled`         | `boolean`                           | `false`                       | Skip all default styling                                            |
-| `class`            | `string`                            | —                             | Additional CSS classes                                              |
-| `el`               | `HTMLDivElement`                    | —                             | Bindable element reference                                          |
+| Prop               | Type                                  | Default                       | Description                                                                                                                                                                       |
+| ------------------ | ------------------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items`            | `CartComponentItem[]`                 | required                      | Cart items to display                                                                                                                                                             |
+| `variant`          | `"default" \| "compact" \| "summary"` | `"default"`                   | Layout variant. `compact` = smaller/scrollable (implicit readonly); `summary` = receipt-style list with name ×qty + line total, no thumbnails/controls/footer (implicit readonly) |
+| `formatPrice`      | `(value: number) => string`           | `(v) => (v / 100).toFixed(2)` | Format numeric price for display                                                                                                                                                  |
+| `onQuantityChange` | `(id: string, qty: number) => void`   | —                             | Called when quantity changes                                                                                                                                                      |
+| `onRemove`         | `(id: string) => void`                | —                             | Called when remove is clicked                                                                                                                                                     |
+| `readonly`         | `boolean`                             | `false`                       | Hide interactive controls                                                                                                                                                         |
+| `loading`          | `boolean`                             | `false`                       | Show loading skeleton                                                                                                                                                             |
+| `updatingItems`    | `Set<string>`                         | `new Set()`                   | Item IDs currently being updated                                                                                                                                                  |
+| `t`                | `TranslateFn`                         | built-in                      | Translation function                                                                                                                                                              |
+| `unstyled`         | `boolean`                             | `false`                       | Skip all default styling                                                                                                                                                          |
+| `class`            | `string`                              | —                             | Additional CSS classes                                                                                                                                                            |
+| `el`               | `HTMLDivElement`                      | —                             | Bindable element reference                                                                                                                                                        |
 
 ### CartComponentItem
 
@@ -184,15 +184,15 @@ Minimal, dense read-only list for order confirmation screens or invoices. Each l
 
 ## Translation Keys
 
-| Key                 | Default              | Description               |
-| ------------------- | -------------------- | ------------------------- |
-| `empty_cart`        | "Your cart is empty" | Empty state text          |
-| `unit_price_each`   | "{price} each"       | Unit price label          |
-| `quantity_label`    | "Qty: {quantity}"    | Readonly quantity display |
-| `remove_item`       | "Remove"             | Remove button text        |
+| Key                 | Default              | Description                                                 |
+| ------------------- | -------------------- | ----------------------------------------------------------- |
+| `empty_cart`        | "Your cart is empty" | Empty state text                                            |
+| `unit_price_each`   | "{price} each"       | Unit price label                                            |
+| `quantity_label`    | "Qty: {quantity}"    | Readonly quantity display                                   |
+| `remove_item`       | "Remove"             | Remove button text                                          |
 | `remove_item_aria`  | "Remove {name}"      | Accessible label on the remove button (announces item name) |
-| `total_label`       | "Total"              | Summary label             |
-| `item_count_1`      | "1 item"             | Singular item count       |
-| `item_count_n`      | "{count} items"      | Plural item count         |
-| `decrease_quantity` | "Decrease quantity"  | Aria label for − button   |
-| `increase_quantity` | "Increase quantity"  | Aria label for + button   |
+| `total_label`       | "Total"              | Summary label                                               |
+| `item_count_1`      | "1 item"             | Singular item count                                         |
+| `item_count_n`      | "{count} items"      | Plural item count                                           |
+| `decrease_quantity` | "Decrease quantity"  | Aria label for − button                                     |
+| `increase_quantity` | "Increase quantity"  | Aria label for + button                                     |

package/dist/components/Checkout/CheckoutGuestOrLoginForm.svelte

@@ -156,7 +156,8 @@
 		"register_form.email_invalid": "checkout.register.email_invalid",
 		"register_form.password_required": "checkout.register.password_required",
 		"register_form.password_too_short": "checkout.register.password_too_short",
-		"register_form.password_confirm_required": "checkout.register.password_confirm_required",
+		"register_form.password_confirm_required":
+			"checkout.register.password_confirm_required",
 		"register_form.password_mismatch": "checkout.register.password_mismatch",
 		"register_form.field_required": "checkout.register.field_required",
 		"register_form.social_divider": "checkout.register.social_divider",
@@ -177,7 +178,8 @@
 		"login_or_register_form.mode_register": "checkout.login_or_register.mode_register",
 		"login_or_register_form.mode_verify": "checkout.login_or_register.mode_verify",
 		"login_or_register_form.social_divider": "checkout.login_or_register.social_divider",
-		"login_or_register_form.modal_title_login": "checkout.login_or_register.modal_title_login",
+		"login_or_register_form.modal_title_login":
+			"checkout.login_or_register.modal_title_login",
 		"login_or_register_form.modal_title_register":
 			"checkout.login_or_register.modal_title_register",
 		"login_or_register_form.modal_title_verify":
@@ -242,7 +244,10 @@
 	let _loroVerifyEmail = $state("");
 
 	$effect(() => {
-		if (loginOrRegisterModal?.mode !== undefined && loginOrRegisterModal.mode !== _loroMode) {
+		if (
+			loginOrRegisterModal?.mode !== undefined &&
+			loginOrRegisterModal.mode !== _loroMode
+		) {
 			_loroMode = loginOrRegisterModal.mode;
 		}
 	});

package/dist/components/Checkout/CheckoutShippingStep.svelte

@@ -222,8 +222,7 @@
 		opts?: Parameters<typeof scrollToFirstInvalidField>[1]
 	): boolean {
 		if (shippingFormRef?.scrollToFirstError(opts)) return true;
-		if (!billingSameAsShipping && billingFormRef?.scrollToFirstError(opts))
-			return true;
+		if (!billingSameAsShipping && billingFormRef?.scrollToFirstError(opts)) return true;
 		return false;
 	}
 

package/dist/components/Checkout/README.md

@@ -8,30 +8,30 @@ There is deliberately **no top-level `<Checkout>`** orchestrator. If you want a
 
 ### Step containers (one per route/screen)
 
-| Component | Purpose |
-| --- | --- |
-| `CheckoutReviewStep` | Guest/login + cart review (entry point) |
-| `CheckoutShippingStep` | Address + delivery option selection |
-| `CheckoutConfirmStep` | Final order review + place-order action |
-| `CheckoutCompleteStep` | Post-purchase confirmation screen |
+| Component              | Purpose                                 |
+| ---------------------- | --------------------------------------- |
+| `CheckoutReviewStep`   | Guest/login + cart review (entry point) |
+| `CheckoutShippingStep` | Address + delivery option selection     |
+| `CheckoutConfirmStep`  | Final order review + place-order action |
+| `CheckoutCompleteStep` | Post-purchase confirmation screen       |
 
 Each step container renders a `CheckoutProgress` indicator (unless `hideProgress`), its own heading, and exposes `onBack` / `onContinue` callbacks. The consumer maps those callbacks to route navigation or state changes.
 
 ### Building blocks (composed inside steps, or used standalone)
 
-| Component | Purpose |
-| --- | --- |
-| `CheckoutProgress` | Multi-step progress indicator (accessible stepper) |
-| `CheckoutCartReview` | Editable line-item list |
-| `CheckoutOrderSummary` | Totals (subtotal/tax/shipping/discount/total) |
-| `CheckoutOrderReview` | Read-only order dump (items + addresses + delivery) |
-| `CheckoutOrderConfirmation` | Completed-order summary with order number & next steps |
-| `CheckoutGuestOrLoginForm` | Guest / login switcher (segmented pill) |
-| `CheckoutGuestForm` | Guest-checkout fields |
-| `CheckoutLoginForm` | Login (adapts the generic `LoginForm` to checkout i18n) |
-| `CheckoutAddressForm` | Structured address input |
-| `CheckoutDeliveryOptions` | Delivery-method selector |
-| `CheckoutSectionHeader` | Consistent section heading |
+| Component                   | Purpose                                                 |
+| --------------------------- | ------------------------------------------------------- |
+| `CheckoutProgress`          | Multi-step progress indicator (accessible stepper)      |
+| `CheckoutCartReview`        | Editable line-item list                                 |
+| `CheckoutOrderSummary`      | Totals (subtotal/tax/shipping/discount/total)           |
+| `CheckoutOrderReview`       | Read-only order dump (items + addresses + delivery)     |
+| `CheckoutOrderConfirmation` | Completed-order summary with order number & next steps  |
+| `CheckoutGuestOrLoginForm`  | Guest / login switcher (segmented pill)                 |
+| `CheckoutGuestForm`         | Guest-checkout fields                                   |
+| `CheckoutLoginForm`         | Login (adapts the generic `LoginForm` to checkout i18n) |
+| `CheckoutAddressForm`       | Structured address input                                |
+| `CheckoutDeliveryOptions`   | Delivery-method selector                                |
+| `CheckoutSectionHeader`     | Consistent section heading                              |
 
 ## State ownership
 
@@ -39,25 +39,25 @@ The consumer owns the entire order shape — typically `CheckoutOrderData` from
 
 ```ts
 import type {
-    CheckoutOrderData,
-    CheckoutAddressData,
-    CheckoutCustomerFormData,
-    CheckoutLoginFormData,
-    CheckoutDeliveryOption,
+	CheckoutOrderData,
+	CheckoutAddressData,
+	CheckoutCustomerFormData,
+	CheckoutLoginFormData,
+	CheckoutDeliveryOption,
 } from "@marianmeres/stuic";
 ```
 
 **Field → owner table:**
 
-| Field | Owned by | Passed to |
-| --- | --- | --- |
-| `currentStep` (or equivalent) | Route/page state | `CheckoutProgress`, step visibility logic |
-| `CheckoutCustomerFormData` | Page `$state` | `CheckoutGuestForm` (two-way bind) |
-| `CheckoutLoginFormData` | Page `$state` | `CheckoutLoginForm` (two-way bind) |
-| `shippingAddress`, `billingAddress` | Page `$state` | `CheckoutShippingStep` (two-way bind) — re-used by `CheckoutConfirmStep` for display |
-| `selectedDeliveryId` | Page `$state` | `CheckoutShippingStep` (two-way bind) |
-| `CheckoutOrderData` (assembled) | Page `$state` / server | `CheckoutOrderReview`, `CheckoutConfirmStep`, `CheckoutCompleteStep` (read-only) |
-| Per-field validation errors | Page `$state` (derived from server response) | Forms via `errors` prop; merged with internal errors |
+| Field                               | Owned by                                     | Passed to                                                                            |
+| ----------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------ |
+| `currentStep` (or equivalent)       | Route/page state                             | `CheckoutProgress`, step visibility logic                                            |
+| `CheckoutCustomerFormData`          | Page `$state`                                | `CheckoutGuestForm` (two-way bind)                                                   |
+| `CheckoutLoginFormData`             | Page `$state`                                | `CheckoutLoginForm` (two-way bind)                                                   |
+| `shippingAddress`, `billingAddress` | Page `$state`                                | `CheckoutShippingStep` (two-way bind) — re-used by `CheckoutConfirmStep` for display |
+| `selectedDeliveryId`                | Page `$state`                                | `CheckoutShippingStep` (two-way bind)                                                |
+| `CheckoutOrderData` (assembled)     | Page `$state` / server                       | `CheckoutOrderReview`, `CheckoutConfirmStep`, `CheckoutCompleteStep` (read-only)     |
+| Per-field validation errors         | Page `$state` (derived from server response) | Forms via `errors` prop; merged with internal errors                                 |
 
 Each form exposes a bindable value plus an `errors` prop for server-driven validation messages. Internal client-side validation (via `validateCustomerForm` / `validateAddress` / `validateLoginForm`) fires on submit and populates internal error state, which is merged with the `errors` prop for display.
 
@@ -67,10 +67,10 @@ Client-side validation helpers live in `@marianmeres/stuic`:
 
 ```ts
 import {
-    validateCustomerForm,
-    validateAddress,
-    validateLoginForm,
-    validateEmail,
+	validateCustomerForm,
+	validateAddress,
+	validateLoginForm,
+	validateEmail,
 } from "@marianmeres/stuic";
 ```
 
@@ -78,8 +78,8 @@ Each returns `CheckoutValidationError[]`:
 
 ```ts
 interface CheckoutValidationError {
-    field: string; // e.g. "email" or "shipping.street"
-    message: string;
+	field: string; // e.g. "email" or "shipping.street"
+	message: string;
 }
 ```
 
@@ -87,36 +87,41 @@ interface CheckoutValidationError {
 
 ```svelte
 <script lang="ts">
-    import {
-        CheckoutShippingStep,
-        CheckoutAddressForm,
-        validateAddress,
-        type CheckoutAddressData,
-        type CheckoutValidationError,
-    } from "@marianmeres/stuic";
-
-    let shippingAddress = $state<CheckoutAddressData>(/* ... */);
-    let errors = $state<CheckoutValidationError[]>([]);
-
-    async function onContinue() {
-        // 1) Client-side gate
-        const clientErrors = validateAddress(shippingAddress, "shipping", t);
-        if (clientErrors.length) {
-            errors = clientErrors;
-            return;
-        }
-        // 2) Server round-trip; merge any server errors
-        const res = await submitShipping(shippingAddress);
-        if (!res.ok) {
-            errors = res.errors;
-            return;
-        }
-        // 3) Advance
-        goto("/checkout/confirm");
-    }
+	import {
+		CheckoutShippingStep,
+		CheckoutAddressForm,
+		validateAddress,
+		type CheckoutAddressData,
+		type CheckoutValidationError,
+	} from "@marianmeres/stuic";
+
+	let shippingAddress = $state<CheckoutAddressData>(/* ... */);
+	let errors = $state<CheckoutValidationError[]>([]);
+
+	async function onContinue() {
+		// 1) Client-side gate
+		const clientErrors = validateAddress(shippingAddress, "shipping", t);
+		if (clientErrors.length) {
+			errors = clientErrors;
+			return;
+		}
+		// 2) Server round-trip; merge any server errors
+		const res = await submitShipping(shippingAddress);
+		if (!res.ok) {
+			errors = res.errors;
+			return;
+		}
+		// 3) Advance
+		goto("/checkout/confirm");
+	}
 </script>
 
-<CheckoutShippingStep bind:shippingAddress {errors} {onContinue} onBack={() => history.back()} />
+<CheckoutShippingStep
+	bind:shippingAddress
+	{errors}
+	{onContinue}
+	onBack={() => history.back()}
+/>
 ```
 
 The step component **does not auto-advance**. It calls `onContinue` when the user clicks "Continue"; the consumer decides whether to actually advance, retry, or show errors.
@@ -129,8 +134,9 @@ The built-in `defaultFormatPrice(cents)` returns `"12.99"`. Replace it via each
 
 ```ts
 const formatPrice = (cents: number) =>
-    new Intl.NumberFormat("sk-SK", { style: "currency", currency: "EUR" })
-        .format(cents / 100);
+	new Intl.NumberFormat("sk-SK", { style: "currency", currency: "EUR" }).format(
+		cents / 100
+	);
 ```
 
 ## i18n
@@ -147,67 +153,74 @@ By default `CheckoutGuestOrLoginForm` in tabbed mode renders an inline `<Checkou
 
 ```svelte
 <script lang="ts">
-    import {
-        CheckoutGuestOrLoginForm,
-        createEmptyCustomerFormData,
-        createEmptyLoginFormData,
-        type LoginOrRegisterFormMode,
-        type LoginFormData,
-        type RegisterFormData,
-    } from "@marianmeres/stuic";
-
-    let formData = $state(createEmptyCustomerFormData());
-    let loginFormData = $state(createEmptyLoginFormData());
-
-    let mode = $state<LoginOrRegisterFormMode>("login");
-    let verifyEmail = $state("");
-    let isSubmitting = $state(false);
-    let formError = $state<string | null>(null);
-
-    const loginProps = $derived({ error: formError ?? undefined, showRememberMe: true });
-    const registerProps = $derived({ error: formError ?? undefined });
-    const verifyProps = $derived({ error: formError ?? undefined, heading: false as const });
-
-    async function onLogin(d: LoginFormData) {
-        // ... call API; on `requiresVerification`, flip:
-        //     verifyEmail = d.email; mode = "verify";
-    }
-    async function onRegister(d: RegisterFormData) {
-        // ... call API; on success, flip to verify:
-        //     verifyEmail = d.email; mode = "verify";
-    }
-    async function onVerify(code: string) {
-        // ... call API; on success, modal closes via consumer-managed state.
-    }
-    async function onResendCode() { /* ... */ }
+	import {
+		CheckoutGuestOrLoginForm,
+		createEmptyCustomerFormData,
+		createEmptyLoginFormData,
+		type LoginOrRegisterFormMode,
+		type LoginFormData,
+		type RegisterFormData,
+	} from "@marianmeres/stuic";
+
+	let formData = $state(createEmptyCustomerFormData());
+	let loginFormData = $state(createEmptyLoginFormData());
+
+	let mode = $state<LoginOrRegisterFormMode>("login");
+	let verifyEmail = $state("");
+	let isSubmitting = $state(false);
+	let formError = $state<string | null>(null);
+
+	const loginProps = $derived({ error: formError ?? undefined, showRememberMe: true });
+	const registerProps = $derived({ error: formError ?? undefined });
+	const verifyProps = $derived({
+		error: formError ?? undefined,
+		heading: false as const,
+	});
+
+	async function onLogin(d: LoginFormData) {
+		// ... call API; on `requiresVerification`, flip:
+		//     verifyEmail = d.email; mode = "verify";
+	}
+	async function onRegister(d: RegisterFormData) {
+		// ... call API; on success, flip to verify:
+		//     verifyEmail = d.email; mode = "verify";
+	}
+	async function onVerify(code: string) {
+		// ... call API; on success, modal closes via consumer-managed state.
+	}
+	async function onResendCode() {
+		/* ... */
+	}
 </script>
 
 <CheckoutGuestOrLoginForm
-    formMode="tabbed"
-    guestForm={{ formData, onSubmit: handleStartCheckout, isSubmitting, errors: [] }}
-    loginForm={{ formData: loginFormData, onSubmit: onLogin, isSubmitting }}
-    loginOrRegisterModal={{
-        mode,
-        verifyEmail,
-        onLogin,
-        onRegister,
-        onVerify,
-        onResendCode,
-        onForgotPassword: () => {/* ... */},
-        onModeChange: (next) => {
-            // mirror mode changes back into our local state and clear errors
-            mode = next;
-            formError = null;
-        },
-        isSubmitting,
-        loginProps,
-        registerProps,
-        verifyProps,
-        onClose: () => {
-            formError = null;
-            mode = "login";
-        },
-    }}
+	formMode="tabbed"
+	guestForm={{ formData, onSubmit: handleStartCheckout, isSubmitting, errors: [] }}
+	loginForm={{ formData: loginFormData, onSubmit: onLogin, isSubmitting }}
+	loginOrRegisterModal={{
+		mode,
+		verifyEmail,
+		onLogin,
+		onRegister,
+		onVerify,
+		onResendCode,
+		onForgotPassword: () => {
+			/* ... */
+		},
+		onModeChange: (next) => {
+			// mirror mode changes back into our local state and clear errors
+			mode = next;
+			formError = null;
+		},
+		isSubmitting,
+		loginProps,
+		registerProps,
+		verifyProps,
+		onClose: () => {
+			formError = null;
+			mode = "login";
+		},
+	}}
 />
 ```
 
@@ -237,9 +250,9 @@ Returns `true` when either address is missing or when every `CheckoutAddressData
 
 ```ts
 import {
-    createEmptyAddress,
-    createEmptyCustomerFormData,
-    createEmptyLoginFormData,
+	createEmptyAddress,
+	createEmptyCustomerFormData,
+	createEmptyLoginFormData,
 } from "@marianmeres/stuic";
 ```