@marianmeres/stuic 3.25.0 → 3.26.0

package/dist/components/Carousel/Carousel.svelte

@@ -72,6 +72,12 @@
 		/** Custom class for active item */
 		classItemActive?: string;
 
+		/** Show prev/next arrow buttons overlaid on left/right edges */
+		arrows?: boolean;
+
+		/** Custom class for arrow buttons */
+		classArrow?: string;
+
 		/** Skip all default styling */
 		unstyled?: boolean;
 
@@ -90,6 +96,11 @@
 	import { ItemCollection } from "@marianmeres/item-collection";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Thc from "../Thc/Thc.svelte";
+	import Button from "../Button/Button.svelte";
+	import {
+		iconArrowLeft as iconPrevious,
+		iconArrowRight as iconNext,
+	} from "../../icons/index.js";
 
 	let {
 		items,
@@ -111,6 +122,8 @@
 		classTrack,
 		classItem,
 		classItemActive,
+		arrows = false,
+		classArrow,
 		unstyled = false,
 		el = $bindable(),
 		onActiveChange,
@@ -367,5 +380,47 @@
 				</div>
 			{/each}
 		</div>
+
+		{#if arrows && coll.size > 1}
+			<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",
+						classArrow
+					)}
+					onclick={() => {
+						coll.setActivePrevious();
+						scrollActiveIntoView();
+					}}
+					type="button"
+					disabled={!loop && coll.activeIndex === 0}
+					aspect1
+					variant="soft"
+					roundedFull
+				>
+					{@html iconPrevious({ size: 24 })}
+				</Button>
+
+				<Button
+					class={twMerge(
+						"stuic-carousel-arrow pointer-events-auto p-0! mr-4",
+						classArrow
+					)}
+					onclick={() => {
+						coll.setActiveNext();
+						scrollActiveIntoView();
+					}}
+					type="button"
+					disabled={!loop && coll.activeIndex === coll.size - 1}
+					aspect1
+					variant="soft"
+					roundedFull
+				>
+					{@html iconNext({ size: 24 })}
+				</Button>
+			</div>
+		{/if}
 	</div>
 {/if}

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

@@ -51,6 +51,10 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     classItem?: string;
     /** Custom class for active item */
     classItemActive?: string;
+    /** Show prev/next arrow buttons overlaid on left/right edges */
+    arrows?: boolean;
+    /** Custom class for arrow buttons */
+    classArrow?: string;
     /** Skip all default styling */
     unstyled?: boolean;
     /** Bindable element reference */

package/dist/components/Checkout/_internal/checkout-utils.js

@@ -1,3 +1,4 @@
+import { validatePhoneNumber } from "../../Input/phone-validation.js";
 // ====================================================================
 // Default price formatter
 // ====================================================================
@@ -28,6 +29,9 @@ export function validateCustomerForm(data, t) {
     const emailError = validateEmail(data.email, t);
     if (emailError)
         errors.push({ field: "email", message: emailError });
+    const phoneError = validatePhoneNumber(data.phone);
+    if (phoneError)
+        errors.push({ field: "phone", message: phoneError });
     return errors;
 }
 // ====================================================================
@@ -52,6 +56,9 @@ export function validateAddress(address, prefix, t) {
             });
         }
     }
+    const phoneError = validatePhoneNumber(address.phone);
+    if (phoneError)
+        errors.push({ field: `${prefix}.phone`, message: phoneError });
     return errors;
 }
 // ====================================================================

package/dist/components/Input/FieldPhoneNumber.svelte

@@ -201,12 +201,12 @@
 		localNumber = _localNumber;
 	}
 
-	// Compose full value from parts
+	// Compose full value from parts (strip only formatting chars, keep letters so they fail validation)
 	function composeValue(): string {
-		const digits = _localNumber.replace(/\D/g, "");
-		if (!digits) return "";
-		if (selectedCountry) return `+${selectedCountry.dialCode}${digits}`;
-		return digits;
+		const cleaned = _localNumber.replace(/[\s\-().\/]/g, "");
+		if (!cleaned) return "";
+		if (selectedCountry) return `+${selectedCountry.dialCode}${cleaned}`;
+		return cleaned;
 	}
 
 	// Sync internal -> external value

package/package.json

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