@marianmeres/stuic 3.17.0 → 3.18.1

package/dist/components/Book/Book.svelte

@@ -711,18 +711,20 @@
 										draggable="false"
 									/>
 								{/if}
-								{#if onAreaClick && sheet.frontPage.areas?.length && sheet.frontPage.width && sheet.frontPage.height}
+								{#if onAreaClick && Math.abs(sheet.id - activeSpread) <= 1 && sheet.frontPage.areas?.length && sheet.frontPage.width && sheet.frontPage.height}
 									<svg
 										viewBox="0 0 {sheet.frontPage.width} {sheet.frontPage.height}"
 										preserveAspectRatio="xMidYMid meet"
 										class={!unstyled ? "stuic-book-areas" : undefined}
 									>
 										<!-- svelte-ignore a11y_click_events_have_key_events -->
-									<!-- svelte-ignore a11y_no_static_element_interactions -->
-									{#each sheet.frontPage.areas as area (area.id)}
+										<!-- svelte-ignore a11y_no_static_element_interactions -->
+										{#each sheet.frontPage.areas as area (area.id)}
 											<rect
-												x={area.x} y={area.y}
-												width={area.w} height={area.h}
+												x={area.x}
+												y={area.y}
+												width={area.w}
+												height={area.h}
 												class={!unstyled ? "stuic-book-area" : undefined}
 												onclick={(e: MouseEvent) => {
 													if (_wasDragged) return;
@@ -759,18 +761,20 @@
 										draggable="false"
 									/>
 								{/if}
-								{#if onAreaClick && sheet.backPage.areas?.length && sheet.backPage.width && sheet.backPage.height}
+								{#if onAreaClick && Math.abs(sheet.id - activeSpread) <= 1 && sheet.backPage.areas?.length && sheet.backPage.width && sheet.backPage.height}
 									<svg
 										viewBox="0 0 {sheet.backPage.width} {sheet.backPage.height}"
 										preserveAspectRatio="xMidYMid meet"
 										class={!unstyled ? "stuic-book-areas" : undefined}
 									>
 										<!-- svelte-ignore a11y_click_events_have_key_events -->
-									<!-- svelte-ignore a11y_no_static_element_interactions -->
-									{#each sheet.backPage.areas as area (area.id)}
+										<!-- svelte-ignore a11y_no_static_element_interactions -->
+										{#each sheet.backPage.areas as area (area.id)}
 											<rect
-												x={area.x} y={area.y}
-												width={area.w} height={area.h}
+												x={area.x}
+												y={area.y}
+												width={area.w}
+												height={area.h}
 												class={!unstyled ? "stuic-book-area" : undefined}
 												onclick={(e: MouseEvent) => {
 													if (_wasDragged) return;

package/dist/components/Cart/Cart.svelte

@@ -62,13 +62,13 @@
 	}
 
 	/** Layout variant */
-	export type CartVariant = "default" | "compact";
+	export type CartVariant = "default" | "compact" | "summary";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
 		/** Cart items to display */
 		items: CartComponentItem[];
 
-		/** Layout variant. "compact" = smaller thumbnails, tighter spacing, scrollable, implicitly readonly */
+		/** Layout variant. "compact" = smaller thumbnails, tighter spacing, scrollable, implicitly readonly. "summary" = minimal receipt-style list (name ×qty, line total), no thumbnails/controls/footer, implicitly readonly */
 		variant?: CartVariant;
 
 		/** Format a numeric price for display. Default: (v) => (v / 100).toFixed(2) */
@@ -168,7 +168,8 @@
 	const bp = Breakpoint.instance;
 	let isDesktop = $derived(bp.md);
 	let isCompact = $derived(variant === "compact");
-	let isReadonly = $derived(readonlyProp || isCompact);
+	let isSummary = $derived(variant === "summary");
+	let isReadonly = $derived(readonlyProp || isCompact || isSummary);
 
 	// --- Derived ---
 	let total = $derived(items.reduce((sum, i) => sum + i.lineTotal, 0));
@@ -263,7 +264,19 @@
 		>
 			{#each items as item (item.id)}
 				{@const isUpdating = updatingItems.has(item.id)}
-				{#if itemRow}
+				{#if isSummary}
+					<div class={!unstyled ? "stuic-cart-item" : undefined} data-variant="summary">
+						<span>
+							<span class={!unstyled ? "stuic-cart-item-name" : undefined}>
+								{item.name}
+							</span>
+							<span class={!unstyled ? "stuic-cart-item-qty" : undefined}>
+								&times;{item.quantity}
+							</span>
+						</span>
+						<span>{formatPrice(item.lineTotal)}</span>
+					</div>
+				{:else if itemRow}
 					{@render itemRow({
 						item,
 						isUpdating,
@@ -429,34 +442,36 @@
 			{/each}
 		</div>
 
-		<!-- Summary -->
-		{#if summary}
-			{@render summary({ items, total, itemCount, formatPrice })}
-		{:else}
-			<div
-				class={!unstyled ? "stuic-cart-summary" : undefined}
-				data-variant={!unstyled ? variant : undefined}
-			>
-				<span class={!unstyled ? "stuic-cart-summary-label" : undefined}>
-					{t("total_label")}
-					({itemCount === 1
-						? t("item_count_1")
-						: t("item_count_n", { count: itemCount })})
-				</span>
-				<span
-					class={!unstyled ? "stuic-cart-summary-total" : undefined}
+		<!-- Summary (hidden in summary variant) -->
+		{#if !isSummary}
+			{#if summary}
+				{@render summary({ items, total, itemCount, formatPrice })}
+			{:else}
+				<div
+					class={!unstyled ? "stuic-cart-summary" : undefined}
 					data-variant={!unstyled ? variant : undefined}
 				>
-					{formatPrice(total)}
-				</span>
-			</div>
-		{/if}
+					<span class={!unstyled ? "stuic-cart-summary-label" : undefined}>
+						{t("total_label")}
+						({itemCount === 1
+							? t("item_count_1")
+							: t("item_count_n", { count: itemCount })})
+					</span>
+					<span
+						class={!unstyled ? "stuic-cart-summary-total" : undefined}
+						data-variant={!unstyled ? variant : undefined}
+					>
+						{formatPrice(total)}
+					</span>
+				</div>
+			{/if}
 
-		<!-- Footer -->
-		{#if footer}
-			<div class={!unstyled ? "stuic-cart-footer" : undefined}>
-				{@render footer({ items, total, itemCount })}
-			</div>
+			<!-- Footer -->
+			{#if footer}
+				<div class={!unstyled ? "stuic-cart-footer" : undefined}>
+					{@render footer({ items, total, itemCount })}
+				</div>
+			{/if}
 		{/if}
 	{/if}
 </div>

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

@@ -31,11 +31,11 @@ export interface CartComponentItem {
     maxQuantity?: number;
 }
 /** Layout variant */
-export type CartVariant = "default" | "compact";
+export type CartVariant = "default" | "compact" | "summary";
 export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Cart items to display */
     items: CartComponentItem[];
-    /** Layout variant. "compact" = smaller thumbnails, tighter spacing, scrollable, implicitly readonly */
+    /** Layout variant. "compact" = smaller thumbnails, tighter spacing, scrollable, implicitly readonly. "summary" = minimal receipt-style list (name ×qty, line total), no thumbnails/controls/footer, implicitly readonly */
     variant?: CartVariant;
     /** Format a numeric price for display. Default: (v) => (v / 100).toFixed(2) */
     formatPrice?: (value: number) => string;

package/dist/components/Cart/index.css

@@ -103,6 +103,10 @@
 		gap: 0;
 	}
 
+	.stuic-cart-items[data-variant="summary"] {
+		gap: var(--stuic-cart-summary-item-gap, 0.25rem);
+	}
+
 	/* ============================================================================
 	   ITEM CARD
 	   ============================================================================ */
@@ -130,6 +134,26 @@
 		border-top: 0;
 	}
 
+	.stuic-cart-item[data-variant="summary"] {
+		justify-content: space-between;
+		align-items: baseline;
+		font-size: 0.875rem;
+		gap: 0.5rem;
+		padding: 0;
+		border: 0;
+		background: transparent;
+	}
+
+	.stuic-cart-item[data-variant="summary"] .stuic-cart-item-name {
+		display: inline;
+		font-weight: 500;
+	}
+
+	.stuic-cart-item[data-variant="summary"] .stuic-cart-item-qty {
+		color: var(--stuic-color-muted-foreground);
+		margin-left: 0.5rem;
+	}
+
 	.stuic-cart-item[data-updating] {
 		opacity: 0.5;
 		pointer-events: none;
@@ -365,8 +389,8 @@
 		justify-content: space-between;
 		align-items: center;
 		margin-top: 1.5rem;
-		padding-top: 1.5rem;
-		border-top: 1px solid var(--stuic-cart-summary-border-color);
+		padding: 0 1rem;
+		/* border-top: 1px solid var(--stuic-cart-summary-border-color); */
 	}
 
 	.stuic-cart-summary[data-variant="compact"] {

package/dist/components/Checkout/CheckoutAddressForm.svelte

@@ -98,14 +98,29 @@
 		return requiredFields.includes(field);
 	}
 
+	let containerWidth = $state(0);
+	let isSmall = $derived(containerWidth > 0 && containerWidth < 480);
+
 	let _class = $derived(
 		unstyled ? classProp : twMerge("stuic-checkout-address", classProp)
 	);
 </script>
 
-<fieldset bind:this={el} class={_class} {...rest}>
+<fieldset
+	bind:this={el}
+	bind:offsetWidth={containerWidth}
+	class={_class}
+	data-small={!unstyled && isSmall ? "" : undefined}
+	{...rest}
+>
 	<!-- Name (full width, block label) -->
+	<!--
+		svelte-ignore binding_property_non_reactive:
+		address is a $bindable prop — deep reactivity depends on the consumer
+		passing a $state() object. The bindings work correctly regardless.
+	-->
 	{#if fields?.name !== false}
+		<!-- svelte-ignore binding_property_non_reactive -->
 		<FieldInput
 			bind:value={address.name}
 			label={t("checkout.address.name_label")}
@@ -124,6 +139,7 @@
 
 	<!-- Street (full width, block label) -->
 	{#if fields?.street !== false}
+		<!-- svelte-ignore binding_property_non_reactive -->
 		<FieldInput
 			bind:value={address.street}
 			label={t("checkout.address.street_label")}
@@ -144,9 +160,11 @@
 	{#if fields?.city !== false || fields?.postal_code !== false}
 		<div class={unstyled ? undefined : "stuic-checkout-address-row"}>
 			{#if fields?.city !== false}
+				<!-- svelte-ignore binding_property_non_reactive -->
 				<FieldInput
 					bind:value={address.city}
 					label={t("checkout.address.city_label")}
+					labelLeftBreakpoint={0}
 					placeholder={t("checkout.address.city_placeholder")}
 					required={isRequired("city")}
 					name="{label}-city"
@@ -159,9 +177,11 @@
 				/>
 			{/if}
 			{#if fields?.postal_code !== false}
+				<!-- svelte-ignore binding_property_non_reactive -->
 				<FieldInput
 					bind:value={address.postal_code}
 					label={t("checkout.address.postal_code_label")}
+					labelLeftBreakpoint={0}
 					placeholder={t("checkout.address.postal_code_placeholder")}
 					required={isRequired("postal_code")}
 					name="{label}-postal_code"
@@ -189,6 +209,7 @@
 				id: `${label}-country`,
 			})}
 		{:else}
+			<!-- svelte-ignore binding_property_non_reactive -->
 			<FieldInput
 				bind:value={address.country}
 				label={t("checkout.address.country_label")}
@@ -208,6 +229,7 @@
 
 	<!-- Phone (full width, block label) -->
 	{#if fields?.phone !== false}
+		<!-- svelte-ignore binding_property_non_reactive -->
 		<FieldInput
 			bind:value={address.phone}
 			label={t("checkout.address.phone_label")}

package/dist/components/Checkout/CheckoutCartReview.svelte

@@ -51,6 +51,9 @@
 		unstyled?: boolean;
 		class?: string;
 		el?: HTMLDivElement;
+
+		hLevel?: HLevel;
+		hRenderLevel?: HLevel;
 	}
 </script>
 
@@ -60,6 +63,8 @@
 	import { defaultFormatPrice } from "./_internal/checkout-utils.js";
 	import Cart from "../Cart/Cart.svelte";
 	import Button from "../Button/Button.svelte";
+	import { H, type HLevel } from "../H/index.js";
+	import CheckoutSectionHeader from "./CheckoutSectionHeader.svelte";
 
 	let {
 		items,
@@ -73,6 +78,8 @@
 		unstyled = false,
 		class: classProp,
 		el = $bindable(),
+		hLevel = 3,
+		hRenderLevel = 3,
 		...rest
 	}: Props = $props();
 
@@ -89,23 +96,29 @@
 
 <div bind:this={el} class={_class} {...rest}>
 	<!-- Header bar -->
-	<div class={unstyled ? undefined : "stuic-checkout-cart-review-header"}>
+	<CheckoutSectionHeader>
 		{#if typeof titleProp === "function"}
 			{@render titleProp()}
 		{:else}
-			<h3 class={unstyled ? undefined : "stuic-checkout-cart-review-title"}>
+			<H
+				level={hLevel}
+				renderLevel={hRenderLevel}
+				class={unstyled ? undefined : "stuic-checkout-cart-review-title"}
+			>
 				{typeof titleProp === "string" ? titleProp : t("checkout.cart.title")}
-			</h3>
+			</H>
 		{/if}
 
-		{#if editAction}
-			{@render editAction({ onEditCart })}
-		{:else if onEditCart}
-			<Button variant="outline" size="sm" onclick={onEditCart}>
-				{t("checkout.cart.edit")}
-			</Button>
-		{/if}
-	</div>
+		{#snippet right()}
+			{#if editAction}
+				{@render editAction({ onEditCart })}
+			{:else if onEditCart}
+				<Button variant="soft" size="sm" onclick={onEditCart}>
+					{t("checkout.cart.edit")}
+				</Button>
+			{/if}
+		{/snippet}
+	</CheckoutSectionHeader>
 
 	<!-- Cart (readonly) -->
 	<Cart {items} readonly formatPrice={fp} {thumbnail} t={tProp} {unstyled}>

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

@@ -41,7 +41,10 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" |
     unstyled?: boolean;
     class?: string;
     el?: HTMLDivElement;
+    hLevel?: HLevel;
+    hRenderLevel?: HLevel;
 }
+import { type HLevel } from "../H/index.js";
 declare const CheckoutCartReview: import("svelte").Component<Props, {}, "el">;
 type CheckoutCartReview = ReturnType<typeof CheckoutCartReview>;
 export default CheckoutCartReview;

package/dist/components/Checkout/CheckoutCompleteStep.svelte

@@ -64,6 +64,7 @@
 <script lang="ts">
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Button from "../Button/Button.svelte";
+	import DismissibleMessage from "../DismissibleMessage/DismissibleMessage.svelte";
 	import Skeleton from "../Skeleton/Skeleton.svelte";
 	import CheckoutOrderConfirmation from "./CheckoutOrderConfirmation.svelte";
 	import CheckoutProgress from "./CheckoutProgress.svelte";
@@ -118,9 +119,7 @@
 		</div>
 	{:else if error}
 		<div class={unstyled ? undefined : "stuic-checkout-complete-step-error"}>
-			<div class={unstyled ? undefined : "stuic-checkout-alert"} role="alert">
-				{error}
-			</div>
+			<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
 			<div class={unstyled ? undefined : "stuic-checkout-complete-step-error-actions"}>
 				{#if onReturnToCheckout}
 					<Button variant="outline" onclick={onReturnToCheckout}>

package/dist/components/Checkout/CheckoutConfirmStep.svelte

@@ -74,17 +74,23 @@
 		unstyled?: boolean;
 		class?: string;
 		el?: HTMLDivElement;
+
+		hLevel?: HLevel;
+		hRenderLevel?: HLevel;
 	}
 </script>
 
 <script lang="ts">
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Button from "../Button/Button.svelte";
+	import DismissibleMessage from "../DismissibleMessage/DismissibleMessage.svelte";
 	import Skeleton from "../Skeleton/Skeleton.svelte";
 	import CheckoutOrderReview from "./CheckoutOrderReview.svelte";
 	import CheckoutOrderSummary from "./CheckoutOrderSummary.svelte";
 	import CheckoutProgress from "./CheckoutProgress.svelte";
 	import { t_default } from "./_internal/checkout-i18n-defaults.js";
+	import H, { type HLevel } from "../H/H.svelte";
+	import CheckoutSectionHeader from "./CheckoutSectionHeader.svelte";
 
 	let {
 		order,
@@ -111,6 +117,9 @@
 		unstyled = false,
 		class: classProp,
 		el = $bindable(),
+
+		hLevel = 3,
+		hRenderLevel = 3,
 		...rest
 	}: Props = $props();
 
@@ -146,9 +155,14 @@
 			</div>
 		</div>
 	{:else}
-		{#if error}
-			<div class={unstyled ? undefined : "stuic-checkout-alert"} role="alert">
-				{error}
+		<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
+
+		<!-- Back link -->
+		{#if onBack}
+			<div class={unstyled ? undefined : "stuic-checkout-step-back"}>
+				<Button type="button" variant="link" size="sm" onclick={onBack}>
+					{t("checkout.step.back_to_shipping")}
+				</Button>
 			</div>
 		{/if}
 
@@ -158,17 +172,6 @@
 				{#if leftColumn}
 					{@render leftColumn()}
 				{:else}
-					<!-- Back link -->
-					{#if onBack}
-						<button
-							type="button"
-							class={unstyled ? undefined : "stuic-checkout-confirm-step-back"}
-							onclick={onBack}
-						>
-							{t("checkout.step.back_to_shipping")}
-						</button>
-					{/if}
-
 					<CheckoutOrderReview
 						{order}
 						{formatPrice}
@@ -188,11 +191,11 @@
 					{@render rightColumn()}
 				{:else}
 					<div class={unstyled ? undefined : "stuic-checkout-confirm-step-sidebar"}>
-						<h3
-							class={unstyled ? undefined : "stuic-checkout-confirm-step-section-heading"}
-						>
-							{t("checkout.step.summary_title")}
-						</h3>
+						<CheckoutSectionHeader noMinHeight>
+							<H level={hLevel} renderLevel={hRenderLevel}>
+								{t("checkout.step.summary_title")}
+							</H>
+						</CheckoutSectionHeader>
 						<CheckoutOrderSummary
 							totals={order.totals}
 							hasShipping={!!order.delivery_option_id}
@@ -219,7 +222,7 @@
 						<!-- Place Order CTA -->
 						<Button
 							intent="primary"
-							class="w-full"
+							class="w-full mt-4"
 							disabled={!isValid || isSubmitting}
 							onclick={onPlaceOrder}
 							aria-busy={isSubmitting}

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

@@ -40,7 +40,10 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     unstyled?: boolean;
     class?: string;
     el?: HTMLDivElement;
+    hLevel?: HLevel;
+    hRenderLevel?: HLevel;
 }
+import { type HLevel } from "../H/H.svelte";
 declare const CheckoutConfirmStep: import("svelte").Component<Props, {}, "el">;
 type CheckoutConfirmStep = ReturnType<typeof CheckoutConfirmStep>;
 export default CheckoutConfirmStep;

package/dist/components/Checkout/CheckoutGuestForm.svelte

@@ -122,13 +122,30 @@
 		}
 	}
 
+	let containerWidth = $state(0);
+	let isSmall = $derived(containerWidth > 0 && containerWidth < 480);
+
 	let _class = $derived(
 		unstyled ? classProp : twMerge("stuic-checkout-guest-form", classProp)
 	);
 </script>
 
-<form bind:this={el} class={_class} onsubmit={handleSubmit} novalidate {...rest}>
+<form
+	bind:this={el}
+	bind:offsetWidth={containerWidth}
+	class={_class}
+	data-small={!unstyled && isSmall ? "" : undefined}
+	onsubmit={handleSubmit}
+	novalidate
+	{...rest}
+>
+	<!--
+		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 (always shown, always required) -->
+	<!-- svelte-ignore binding_property_non_reactive -->
 	<FieldInput
 		bind:value={formData.email}
 		label={t("checkout.guest.email_label")}
@@ -148,17 +165,21 @@
 	{#if fields?.first_name !== false || fields?.last_name !== false}
 		<div class={unstyled ? undefined : "stuic-checkout-guest-row"}>
 			{#if fields?.first_name !== false}
+				<!-- svelte-ignore binding_property_non_reactive -->
 				<FieldInput
 					bind:value={formData.first_name}
 					label={t("checkout.guest.first_name_label")}
+					labelLeftBreakpoint={0}
 					placeholder={t("checkout.guest.first_name_placeholder")}
 					name="checkout-guest-first-name"
 				/>
 			{/if}
 			{#if fields?.last_name !== false}
+				<!-- svelte-ignore binding_property_non_reactive -->
 				<FieldInput
 					bind:value={formData.last_name}
 					label={t("checkout.guest.last_name_label")}
+					labelLeftBreakpoint={0}
 					placeholder={t("checkout.guest.last_name_placeholder")}
 					name="checkout-guest-last-name"
 				/>
@@ -168,6 +189,7 @@
 
 	<!-- Phone -->
 	{#if fields?.phone !== false}
+		<!-- svelte-ignore binding_property_non_reactive -->
 		<FieldInput
 			bind:value={formData.phone}
 			label={t("checkout.guest.phone_label")}
@@ -186,6 +208,7 @@
 			</summary>
 			<div class={unstyled ? undefined : "stuic-checkout-guest-b2b-content"}>
 				{#if fields?.company_name !== false}
+					<!-- svelte-ignore binding_property_non_reactive -->
 					<FieldInput
 						bind:value={formData.company_name}
 						label={t("checkout.guest.company_name_label")}
@@ -196,6 +219,7 @@
 				{#if fields?.tax_id !== false || fields?.vat_number !== false}
 					<div class={unstyled ? undefined : "stuic-checkout-guest-row"}>
 						{#if fields?.tax_id !== false}
+							<!-- svelte-ignore binding_property_non_reactive -->
 							<FieldInput
 								bind:value={formData.tax_id}
 								label={t("checkout.guest.tax_id_label")}
@@ -203,6 +227,7 @@
 							/>
 						{/if}
 						{#if fields?.vat_number !== false}
+							<!-- svelte-ignore binding_property_non_reactive -->
 							<FieldInput
 								bind:value={formData.vat_number}
 								label={t("checkout.guest.vat_number_label")}