@marianmeres/stuic 3.23.3 → 3.24.0

package/dist/components/Avatar/Avatar.svelte

@@ -33,6 +33,7 @@
 		autoColor?: boolean;
 		/** CSS class override */
 		class?: string;
+		classInner?: string;
 		/** Bindable element reference */
 		el?: HTMLDivElement | HTMLButtonElement;
 	}
@@ -57,6 +58,7 @@
 		textColor,
 		autoColor = false,
 		class: classProp,
+		classInner,
 		el = $bindable(),
 	}: Props = $props();
 
@@ -187,6 +189,8 @@
 		)
 	);
 
+	let _classInner = $derived(twMerge("inline-block", classInner));
+
 	function handleImageError() {
 		imageError = true;
 	}
@@ -202,13 +206,15 @@
 		data-size={isPresetSize(size) ? size : undefined}
 		data-interactive="true"
 	>
-		{#if renderMode === "photo"}
-			<img {src} {alt} class="size-full object-cover" onerror={handleImageError} />
-		{:else if renderMode === "initials"}
-			{fallbackInitials}
-		{:else}
-			{@html iconToRender({ size: iconSize })}
-		{/if}
+		<span class={_classInner}>
+			{#if renderMode === "photo"}
+				<img {src} {alt} class="size-full object-cover" onerror={handleImageError} />
+			{:else if renderMode === "initials"}
+				{fallbackInitials}
+			{:else}
+				{@html iconToRender({ size: iconSize })}
+			{/if}
+		</span>
 	</button>
 {:else}
 	<div
@@ -217,12 +223,14 @@
 		{style}
 		data-size={isPresetSize(size) ? size : undefined}
 	>
-		{#if renderMode === "photo"}
-			<img {src} {alt} class="size-full object-cover" onerror={handleImageError} />
-		{:else if renderMode === "initials"}
-			{fallbackInitials}
-		{:else}
-			{@html iconToRender({ size: iconSize })}
-		{/if}
+		<span class={_classInner}>
+			{#if renderMode === "photo"}
+				<img {src} {alt} class="size-full object-cover" onerror={handleImageError} />
+			{:else if renderMode === "initials"}
+				{fallbackInitials}
+			{:else}
+				{@html iconToRender({ size: iconSize })}
+			{/if}
+		</span>
 	</div>
 {/if}

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

@@ -34,6 +34,7 @@ export interface Props {
     autoColor?: boolean;
     /** CSS class override */
     class?: string;
+    classInner?: string;
     /** Bindable element reference */
     el?: HTMLDivElement | HTMLButtonElement;
 }

package/dist/components/Checkout/CheckoutAddressForm.svelte

@@ -6,6 +6,7 @@
 		CheckoutAddressData,
 		CheckoutValidationError,
 	} from "./_internal/checkout-types.js";
+	import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> {
 		/** Bindable address data. Default: createEmptyAddress() */
@@ -59,6 +60,9 @@
 			]
 		>;
 
+		/** Extra props forwarded to the internal FieldPhoneNumber component. */
+		phoneFieldProps?: Partial<FieldPhoneNumberProps>;
+
 		t?: TranslateFn;
 		unstyled?: boolean;
 		class?: string;
@@ -71,6 +75,8 @@
 	import { t_default } from "./_internal/checkout-i18n-defaults.js";
 	import { createEmptyAddress } from "./_internal/checkout-utils.js";
 	import FieldInput from "../Input/FieldInput.svelte";
+	import FieldPhoneNumber from "../Input/FieldPhoneNumber.svelte";
+	import { validatePhoneNumber } from "../Input/phone-validation.js";
 
 	const DEFAULT_REQUIRED = ["name", "street", "city", "postal_code", "country"];
 
@@ -81,6 +87,7 @@
 		fields,
 		requiredFields = DEFAULT_REQUIRED,
 		countryField,
+		phoneFieldProps,
 		t: tProp,
 		unstyled = false,
 		class: classProp,
@@ -229,21 +236,20 @@
 
 	<!-- Phone (full width, block label) -->
 	{#if fields?.phone !== false}
-		<!-- svelte-ignore binding_property_non_reactive -->
-		<FieldInput
-			bind:value={address.phone}
+		<FieldPhoneNumber
+			value={address.phone ?? ""}
+			onChange={(v) => { address.phone = v; }}
 			label={t("checkout.address.phone_label")}
-			type="tel"
 			placeholder={t("checkout.address.phone_placeholder")}
 			required={isRequired("phone")}
 			name="{label}-phone"
-			id="{label}-phone"
 			labelLeftBreakpoint={0}
 			validate={{
 				customValidator(val) {
-					return fieldError("phone") || "";
+					return fieldError("phone") || validatePhoneNumber(val) || "";
 				},
 			}}
+			{...phoneFieldProps}
 		/>
 	{/if}
 </fieldset>

package/dist/components/Checkout/CheckoutAddressForm.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 { CheckoutAddressData, CheckoutValidationError } from "./_internal/checkout-types.js";
+import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
 export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> {
     /** Bindable address data. Default: createEmptyAddress() */
     address?: CheckoutAddressData;
@@ -46,6 +47,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "childr
             id: string;
         }
     ]>;
+    /** Extra props forwarded to the internal FieldPhoneNumber component. */
+    phoneFieldProps?: Partial<FieldPhoneNumberProps>;
     t?: TranslateFn;
     unstyled?: boolean;
     class?: string;

package/dist/components/Checkout/CheckoutGuestForm.svelte

@@ -7,6 +7,7 @@
 		CheckoutValidationError,
 	} from "./_internal/checkout-types.js";
 	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+	import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
 		/** Bindable form data. Default: createEmptyCustomerFormData() */
@@ -40,6 +41,9 @@
 			vat_number?: boolean;
 		};
 
+		/** Extra props forwarded to the internal FieldPhoneNumber component. */
+		phoneFieldProps?: Partial<FieldPhoneNumberProps>;
+
 		/** Override the CTA button label. Takes precedence over i18n. */
 		submitLabel?: string;
 
@@ -74,6 +78,7 @@
 	} from "./_internal/checkout-utils.js";
 	import Button from "../Button/Button.svelte";
 	import FieldInput from "../Input/FieldInput.svelte";
+	import FieldPhoneNumber from "../Input/FieldPhoneNumber.svelte";
 
 	let {
 		formData = $bindable(createEmptyCustomerFormData()),
@@ -84,6 +89,7 @@
 		showB2bFields = true,
 		b2bExpanded = false,
 		fields,
+		phoneFieldProps,
 		submitLabel,
 		submittingLabel,
 		submitButton,
@@ -195,13 +201,13 @@
 	<!-- Phone -->
 	{#if fields?.phone !== false}
 		<!-- svelte-ignore binding_property_non_reactive -->
-		<FieldInput
+		<FieldPhoneNumber
 			bind:value={formData.phone}
 			label={t("checkout.guest.phone_label")}
-			type="tel"
 			placeholder={t("checkout.guest.phone_placeholder")}
 			name="checkout-guest-phone"
 			labelLeftBreakpoint={0}
+			{...phoneFieldProps}
 		/>
 	{/if}
 

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

@@ -3,6 +3,7 @@ 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";
+import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
 export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
     /** Bindable form data. Default: createEmptyCustomerFormData() */
     formData?: CheckoutCustomerFormData;
@@ -28,6 +29,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children">
         tax_id?: boolean;
         vat_number?: boolean;
     };
+    /** Extra props forwarded to the internal FieldPhoneNumber component. */
+    phoneFieldProps?: Partial<FieldPhoneNumberProps>;
     /** Override the CTA button label. Takes precedence over i18n. */
     submitLabel?: string;
     /** Override the CTA button label while submitting. */

package/dist/components/DropdownMenu/index.css

@@ -254,12 +254,12 @@
 
 	.stuic-dropdown-menu-search {
 		position: sticky;
-		top: 0;
+		top: calc(var(--stuic-dropdown-menu-padding) * -1);
 		z-index: 10;
 		display: flex;
 		align-items: center;
 		gap: calc(var(--spacing) * 1);
-		padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+		padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
 		background: var(--stuic-dropdown-menu-search-bg);
 		border-bottom: 1px solid var(--stuic-dropdown-menu-search-border);
 		margin: calc(var(--stuic-dropdown-menu-padding) * -1);

package/dist/components/Input/FieldPhoneNumber.svelte

@@ -0,0 +1,338 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { ValidateOptions } from "../../actions/validate.svelte.js";
+	import type { TranslateFn } from "../../types.js";
+	import type { THC } from "../Thc/Thc.svelte";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	export interface Props extends Record<string, any> {
+		input?: HTMLInputElement;
+		/** Full phone number string, e.g. "+421905123456". Bindable. */
+		value?: string;
+		/** Selected country ISO code, e.g. "SK". Bindable. */
+		country?: string;
+		/** The dial code part with leading +, e.g. "+421". Bindable (read-derived). */
+		dialCode?: string;
+		/** The local number part, e.g. "905123456". Bindable. */
+		localNumber?: string;
+		/** ISO code for initial country selection when value is empty. */
+		defaultCountry?: string;
+		/** Show country flag emoji. Default: true. */
+		flags?: boolean;
+		/** Filtered list of countries to show (ISO codes). If undefined, show all. */
+		countries?: string[];
+		/** ISO codes of countries to pin at the top of the dropdown list. */
+		preferredCountries?: string[];
+		/** Placeholder for the tel input. */
+		placeholder?: string;
+		/** Name attribute for hidden input (form submission). */
+		name?: string;
+		//
+		label?: SnippetWithId | THC;
+		description?: SnippetWithId | THC;
+		class?: string;
+		id?: string;
+		tabindex?: number;
+		renderSize?: "sm" | "md" | "lg" | string;
+		required?: boolean;
+		disabled?: boolean;
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		labelAfter?: SnippetWithId | THC;
+		inputAfter?: SnippetWithId | THC;
+		inputBelow?: SnippetWithId | THC;
+		below?: SnippetWithId | THC;
+		labelLeft?: boolean;
+		labelLeftWidth?: "normal" | "wide";
+		labelLeftBreakpoint?: number;
+		//
+		classInput?: string;
+		classLabel?: string;
+		classLabelBox?: string;
+		classInputBox?: string;
+		classInputBoxWrap?: string;
+		classInputBoxWrapInvalid?: string;
+		classDescBox?: string;
+		classBelowBox?: string;
+		classPrefixTrigger?: string;
+		classPrefixDropdown?: string;
+		style?: string;
+		//
+		t?: TranslateFn;
+		onChange?: (value: string) => void;
+	}
+</script>
+
+<script lang="ts">
+	import { tick } from "svelte";
+	import {
+		validate as validateAction,
+		type ValidationResult,
+	} from "../../actions/validate.svelte.js";
+	import { getId } from "../../utils/get-id.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import InputWrap from "./_internal/InputWrap.svelte";
+	import PhonePrefixPicker from "./_internal/PhonePrefixPicker.svelte";
+	import {
+		COUNTRIES,
+		ISO_MAP,
+		DIAL_CODES_DESC,
+		DIAL_CODE_MAP,
+		type Country,
+	} from "./_internal/countries.js";
+	import { validatePhoneNumber } from "./phone-validation.js";
+
+	let {
+		input = $bindable(),
+		value = $bindable(""),
+		country = $bindable(""),
+		dialCode = $bindable(""),
+		localNumber = $bindable(""),
+		defaultCountry,
+		flags = true,
+		countries: allowedCountries,
+		preferredCountries,
+		placeholder,
+		name,
+		//
+		label,
+		description,
+		class: classProp,
+		id = getId(),
+		tabindex = 0,
+		renderSize = "md",
+		required = false,
+		disabled = false,
+		validate,
+		//
+		labelAfter,
+		inputAfter,
+		inputBelow,
+		below,
+		//
+		labelLeft = false,
+		labelLeftWidth = "normal",
+		labelLeftBreakpoint = 480,
+		//
+		classInput,
+		classLabel,
+		classLabelBox,
+		classInputBox,
+		classInputBoxWrap,
+		classInputBoxWrapInvalid,
+		classDescBox,
+		classBelowBox,
+		classPrefixTrigger,
+		classPrefixDropdown,
+		style,
+		//
+		t: tProp,
+		onChange,
+		...rest
+	}: Props = $props();
+
+	let hiddenInputEl: HTMLInputElement | undefined = $state();
+
+	// Validation state
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	// Filtered country list
+	let countryList = $derived.by(() => {
+		if (!allowedCountries) return COUNTRIES;
+		const set = new Set(allowedCountries.map((c) => c.toUpperCase()));
+		return COUNTRIES.filter((c) => set.has(c.iso));
+	});
+
+	// Selected country object (initialize once from defaultCountry prop)
+	const _initCountry = defaultCountry;
+	let selectedCountry: Country | undefined = $state(
+		_initCountry ? ISO_MAP.get(_initCountry.toUpperCase()) : undefined
+	);
+
+	// Internal local number (for controlled input)
+	let _localNumber = $state("");
+
+	// Flag to prevent circular sync
+	let _syncing = false;
+
+	// Parse value into parts when value changes externally
+	$effect(() => {
+		const v = value;
+		const defCountry = defaultCountry;
+		if (_syncing) return;
+
+		if (!v) {
+			if (!selectedCountry && defCountry) {
+				selectedCountry = ISO_MAP.get(defCountry.toUpperCase());
+			}
+			_localNumber = "";
+			syncDerived();
+			return;
+		}
+
+		if (v.startsWith("+")) {
+			const digits = v.slice(1);
+			for (const code of DIAL_CODES_DESC) {
+				if (digits.startsWith(code)) {
+					const matched = DIAL_CODE_MAP.get(code);
+					if (matched?.length) {
+						// Preserve current selection if it shares the same dial code
+						if (!selectedCountry || selectedCountry.dialCode !== code) {
+							selectedCountry = matched[0];
+						}
+						_localNumber = digits.slice(code.length);
+						syncDerived();
+						return;
+					}
+				}
+			}
+		}
+
+		// Fallback: treat entire value as local number
+		_localNumber = v.replace(/^\+/, "");
+		syncDerived();
+	});
+
+	// Sync convenience bindable props
+	function syncDerived() {
+		dialCode = selectedCountry ? `+${selectedCountry.dialCode}` : "";
+		country = selectedCountry?.iso ?? "";
+		localNumber = _localNumber;
+	}
+
+	// Compose full value from parts
+	function composeValue(): string {
+		const digits = _localNumber.replace(/\D/g, "");
+		if (!digits) return "";
+		if (selectedCountry) return `+${selectedCountry.dialCode}${digits}`;
+		return digits;
+	}
+
+	// Sync internal -> external value
+	function syncToValue() {
+		_syncing = true;
+		value = composeValue();
+		syncDerived();
+		tick().then(() => {
+			hiddenInputEl?.dispatchEvent(new Event("change", { bubbles: true }));
+			_syncing = false;
+		});
+		onChange?.(value);
+	}
+
+	// Handle country selection from picker
+	function onCountrySelect(c: Country) {
+		selectedCountry = c;
+		syncToValue();
+		input?.focus();
+	}
+
+	// Handle paste: detect international prefix
+	function handlePaste(e: ClipboardEvent) {
+		const pasted = e.clipboardData?.getData("text") ?? "";
+		if (pasted.startsWith("+") || pasted.startsWith("00")) {
+			e.preventDefault();
+			const normalized = pasted.startsWith("00") ? "+" + pasted.slice(2) : pasted;
+			const digits = normalized.slice(1).replace(/\D/g, "");
+			for (const code of DIAL_CODES_DESC) {
+				if (digits.startsWith(code)) {
+					const matched = DIAL_CODE_MAP.get(code);
+					if (matched?.length) {
+						// Preserve existing selection if matching dial code
+						if (!selectedCountry || selectedCountry.dialCode !== code) {
+							selectedCountry = matched[0];
+						}
+						_localNumber = digits.slice(code.length);
+						syncToValue();
+						return;
+					}
+				}
+			}
+			// No recognized prefix
+			_localNumber = digits;
+			syncToValue();
+		}
+	}
+
+	// Handle local number input change
+	function handleInput(e: Event) {
+		_localNumber = (e.currentTarget as HTMLInputElement).value;
+		syncToValue();
+	}
+</script>
+
+<InputWrap
+	{id}
+	{label}
+	{description}
+	{labelAfter}
+	{inputAfter}
+	{inputBelow}
+	{below}
+	{required}
+	{disabled}
+	size={renderSize}
+	class={classProp}
+	{labelLeft}
+	{labelLeftWidth}
+	{labelLeftBreakpoint}
+	{classLabel}
+	{classLabelBox}
+	{classInputBox}
+	{classInputBoxWrap}
+	{classInputBoxWrapInvalid}
+	{classDescBox}
+	{classBelowBox}
+	{validation}
+	{style}
+>
+	{#snippet inputBefore()}
+		<PhonePrefixPicker
+			{selectedCountry}
+			{countryList}
+			{preferredCountries}
+			{flags}
+			{disabled}
+			classTrigger={classPrefixTrigger}
+			classDropdown={classPrefixDropdown}
+			onSelect={onCountrySelect}
+			t={tProp}
+		/>
+	{/snippet}
+
+	<input
+		bind:this={input}
+		type="tel"
+		inputmode="tel"
+		value={_localNumber}
+		oninput={handleInput}
+		onpaste={handlePaste}
+		{id}
+		{tabindex}
+		{required}
+		{disabled}
+		{placeholder}
+		class={twMerge(classInput)}
+		{...rest}
+	/>
+</InputWrap>
+
+<!-- Hidden input for form submission and validation -->
+{#if name}
+	<input
+		type="hidden"
+		{name}
+		value={value ?? ""}
+		bind:this={hiddenInputEl}
+		use:validateAction={() => {
+			const customOpts = typeof validate === "object" && validate ? validate : {};
+			return {
+				enabled: validate !== false,
+				...customOpts,
+				customValidator: customOpts.customValidator ?? validatePhoneNumber,
+				setValidationResult,
+			};
+		}}
+	/>
+{/if}

package/dist/components/Input/FieldPhoneNumber.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from "svelte";
+import type { ValidateOptions } from "../../actions/validate.svelte.js";
+import type { TranslateFn } from "../../types.js";
+import type { THC } from "../Thc/Thc.svelte";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+export interface Props extends Record<string, any> {
+    input?: HTMLInputElement;
+    /** Full phone number string, e.g. "+421905123456". Bindable. */
+    value?: string;
+    /** Selected country ISO code, e.g. "SK". Bindable. */
+    country?: string;
+    /** The dial code part with leading +, e.g. "+421". Bindable (read-derived). */
+    dialCode?: string;
+    /** The local number part, e.g. "905123456". Bindable. */
+    localNumber?: string;
+    /** ISO code for initial country selection when value is empty. */
+    defaultCountry?: string;
+    /** Show country flag emoji. Default: true. */
+    flags?: boolean;
+    /** Filtered list of countries to show (ISO codes). If undefined, show all. */
+    countries?: string[];
+    /** ISO codes of countries to pin at the top of the dropdown list. */
+    preferredCountries?: string[];
+    /** Placeholder for the tel input. */
+    placeholder?: string;
+    /** Name attribute for hidden input (form submission). */
+    name?: string;
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | string;
+    required?: boolean;
+    disabled?: boolean;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    labelAfter?: SnippetWithId | THC;
+    inputAfter?: SnippetWithId | THC;
+    inputBelow?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    classInput?: string;
+    classLabel?: string;
+    classLabelBox?: string;
+    classInputBox?: string;
+    classInputBoxWrap?: string;
+    classInputBoxWrapInvalid?: string;
+    classDescBox?: string;
+    classBelowBox?: string;
+    classPrefixTrigger?: string;
+    classPrefixDropdown?: string;
+    style?: string;
+    t?: TranslateFn;
+    onChange?: (value: string) => void;
+}
+declare const FieldPhoneNumber: import("svelte").Component<Props, {}, "value" | "input" | "country" | "dialCode" | "localNumber">;
+type FieldPhoneNumber = ReturnType<typeof FieldPhoneNumber>;
+export default FieldPhoneNumber;

package/dist/components/Input/_internal/PhonePrefixPicker.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { twMerge } from "../../../utils/tw-merge.js";
+	import { iconChevronDown } from "../../../icons/index.js";
+	import DropdownMenu, {
+		type DropdownMenuActionItem,
+		type DropdownMenuItem,
+		type DropdownMenuSearchConfig,
+	} from "../../DropdownMenu/DropdownMenu.svelte";
+	import { type Country, ISO_MAP } from "./countries.js";
+
+	interface Props {
+		selectedCountry?: Country;
+		countryList: Country[];
+		preferredCountries?: string[];
+		flags?: boolean;
+		disabled?: boolean;
+		classTrigger?: string;
+		classDropdown?: string;
+		onSelect: (country: Country) => void;
+		t?: (k: string, v?: any, f?: any) => string;
+	}
+
+	let {
+		selectedCountry,
+		countryList,
+		preferredCountries,
+		flags = true,
+		disabled = false,
+		classTrigger,
+		classDropdown,
+		onSelect,
+		t,
+	}: Props = $props();
+
+	let isOpen = $state(false);
+
+	function countryToItem(c: Country): DropdownMenuActionItem {
+		const prefix = flags ? `${c.flag} ` : "";
+		return {
+			type: "action",
+			id: c.iso,
+			label: `${prefix}${c.name} (+${c.dialCode})`,
+			onSelect: () => {
+				onSelect(c);
+				isOpen = false;
+			},
+		};
+	}
+
+	let items: DropdownMenuItem[] = $derived.by(() => {
+		const result: DropdownMenuItem[] = [];
+		const preferredSet = new Set(preferredCountries?.map((c) => c.toUpperCase()) ?? []);
+
+		if (preferredSet.size > 0) {
+			const preferred = countryList.filter((c) => preferredSet.has(c.iso));
+			preferred.forEach((c) => result.push(countryToItem(c)));
+			if (preferred.length > 0) {
+				result.push({ type: "divider" });
+			}
+		}
+
+		const rest =
+			preferredSet.size > 0
+				? countryList.filter((c) => !preferredSet.has(c.iso))
+				: countryList;
+		rest.forEach((c) => result.push(countryToItem(c)));
+
+		return result;
+	});
+
+	let searchConfig: DropdownMenuSearchConfig = $derived({
+		placeholder: t?.("phone_search_country") || "Search country...",
+		strategy: "prefix",
+		getContent: (item) => {
+			const c = ISO_MAP.get(String(item.id));
+			if (!c) return String(item.id);
+			return `${c.name} ${c.iso} +${c.dialCode} ${c.dialCode}`;
+		},
+		autoFocus: true,
+		noResultsMessage: t?.("phone_no_country_found") || "No country found",
+	});
+
+	let triggerText = $derived.by(() => {
+		if (!selectedCountry) return "+?";
+		const prefix = flags ? `${selectedCountry.flag} ` : "";
+		return `${prefix}+${selectedCountry.dialCode}`;
+	});
+</script>
+
+<DropdownMenu
+	{items}
+	bind:isOpen
+	position="bottom-span-right"
+	search={searchConfig}
+	maxHeight="300px"
+	closeOnSelect
+	class="stuic-phone-prefix-picker"
+	classDropdown={twMerge("min-w-64", classDropdown)}
+>
+	{#snippet trigger({ toggle, triggerProps })}
+		<button
+			type="button"
+			class={twMerge(
+				"stuic-phone-prefix-trigger",
+				"flex items-center gap-1 shrink-0 px-2 whitespace-nowrap cursor-pointer",
+				classTrigger
+			)}
+			onclick={toggle}
+			{disabled}
+			{...triggerProps}
+		>
+			<span>{triggerText}</span>
+			<span class={twMerge("transition-transform duration-150", isOpen && "rotate-180")}>
+				{@html iconChevronDown({ size: 14 })}
+			</span>
+		</button>
+	{/snippet}
+</DropdownMenu>

package/dist/components/Input/_internal/PhonePrefixPicker.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Country } from "./countries.js";
+interface Props {
+    selectedCountry?: Country;
+    countryList: Country[];
+    preferredCountries?: string[];
+    flags?: boolean;
+    disabled?: boolean;
+    classTrigger?: string;
+    classDropdown?: string;
+    onSelect: (country: Country) => void;
+    t?: (k: string, v?: any, f?: any) => string;
+}
+declare const PhonePrefixPicker: import("svelte").Component<Props, {}, "">;
+type PhonePrefixPicker = ReturnType<typeof PhonePrefixPicker>;
+export default PhonePrefixPicker;

package/dist/components/Input/_internal/countries.d.ts

@@ -0,0 +1,20 @@
+export interface Country {
+    /** ISO 3166-1 alpha-2 code, e.g. "SK" */
+    iso: string;
+    /** Country name in English, e.g. "Slovakia" */
+    name: string;
+    /** Dial code without leading +, e.g. "421" */
+    dialCode: string;
+    /** Country flag emoji, e.g. "🇸🇰" */
+    flag: string;
+}
+export declare const COUNTRIES: Country[];
+/** Lookup map: ISO code -> Country */
+export declare const ISO_MAP: Map<string, Country>;
+/** Lookup map: dial code -> Country[]. Multiple countries can share a code (e.g. +1). */
+export declare const DIAL_CODE_MAP: Map<string, Country[]>;
+/**
+ * Sorted list of unique dial codes (longest first) for prefix detection during paste.
+ * Longest-first ensures we match "+1684" (American Samoa) before "+1" (US).
+ */
+export declare const DIAL_CODES_DESC: string[];

package/dist/components/Input/_internal/countries.js

@@ -0,0 +1,249 @@
+// prettier-ignore
+export const COUNTRIES = [
+    { iso: "AF", name: "Afghanistan", dialCode: "93", flag: "🇦🇫" },
+    { iso: "AL", name: "Albania", dialCode: "355", flag: "🇦🇱" },
+    { iso: "DZ", name: "Algeria", dialCode: "213", flag: "🇩🇿" },
+    { iso: "AS", name: "American Samoa", dialCode: "1684", flag: "🇦🇸" },
+    { iso: "AD", name: "Andorra", dialCode: "376", flag: "🇦🇩" },
+    { iso: "AO", name: "Angola", dialCode: "244", flag: "🇦🇴" },
+    { iso: "AI", name: "Anguilla", dialCode: "1264", flag: "🇦🇮" },
+    { iso: "AG", name: "Antigua and Barbuda", dialCode: "1268", flag: "🇦🇬" },
+    { iso: "AR", name: "Argentina", dialCode: "54", flag: "🇦🇷" },
+    { iso: "AM", name: "Armenia", dialCode: "374", flag: "🇦🇲" },
+    { iso: "AW", name: "Aruba", dialCode: "297", flag: "🇦🇼" },
+    { iso: "AU", name: "Australia", dialCode: "61", flag: "🇦🇺" },
+    { iso: "AT", name: "Austria", dialCode: "43", flag: "🇦🇹" },
+    { iso: "AZ", name: "Azerbaijan", dialCode: "994", flag: "🇦🇿" },
+    { iso: "BS", name: "Bahamas", dialCode: "1242", flag: "🇧🇸" },
+    { iso: "BH", name: "Bahrain", dialCode: "973", flag: "🇧🇭" },
+    { iso: "BD", name: "Bangladesh", dialCode: "880", flag: "🇧🇩" },
+    { iso: "BB", name: "Barbados", dialCode: "1246", flag: "🇧🇧" },
+    { iso: "BY", name: "Belarus", dialCode: "375", flag: "🇧🇾" },
+    { iso: "BE", name: "Belgium", dialCode: "32", flag: "🇧🇪" },
+    { iso: "BZ", name: "Belize", dialCode: "501", flag: "🇧🇿" },
+    { iso: "BJ", name: "Benin", dialCode: "229", flag: "🇧🇯" },
+    { iso: "BM", name: "Bermuda", dialCode: "1441", flag: "🇧🇲" },
+    { iso: "BT", name: "Bhutan", dialCode: "975", flag: "🇧🇹" },
+    { iso: "BO", name: "Bolivia", dialCode: "591", flag: "🇧🇴" },
+    { iso: "BA", name: "Bosnia and Herzegovina", dialCode: "387", flag: "🇧🇦" },
+    { iso: "BW", name: "Botswana", dialCode: "267", flag: "🇧🇼" },
+    { iso: "BR", name: "Brazil", dialCode: "55", flag: "🇧🇷" },
+    { iso: "IO", name: "British Indian Ocean Territory", dialCode: "246", flag: "🇮🇴" },
+    { iso: "VG", name: "British Virgin Islands", dialCode: "1284", flag: "🇻🇬" },
+    { iso: "BN", name: "Brunei", dialCode: "673", flag: "🇧🇳" },
+    { iso: "BG", name: "Bulgaria", dialCode: "359", flag: "🇧🇬" },
+    { iso: "BF", name: "Burkina Faso", dialCode: "226", flag: "🇧🇫" },
+    { iso: "BI", name: "Burundi", dialCode: "257", flag: "🇧🇮" },
+    { iso: "KH", name: "Cambodia", dialCode: "855", flag: "🇰🇭" },
+    { iso: "CM", name: "Cameroon", dialCode: "237", flag: "🇨🇲" },
+    { iso: "CA", name: "Canada", dialCode: "1", flag: "🇨🇦" },
+    { iso: "CV", name: "Cape Verde", dialCode: "238", flag: "🇨🇻" },
+    { iso: "KY", name: "Cayman Islands", dialCode: "1345", flag: "🇰🇾" },
+    { iso: "CF", name: "Central African Republic", dialCode: "236", flag: "🇨🇫" },
+    { iso: "TD", name: "Chad", dialCode: "235", flag: "🇹🇩" },
+    { iso: "CL", name: "Chile", dialCode: "56", flag: "🇨🇱" },
+    { iso: "CN", name: "China", dialCode: "86", flag: "🇨🇳" },
+    { iso: "CO", name: "Colombia", dialCode: "57", flag: "🇨🇴" },
+    { iso: "KM", name: "Comoros", dialCode: "269", flag: "🇰🇲" },
+    { iso: "CK", name: "Cook Islands", dialCode: "682", flag: "🇨🇰" },
+    { iso: "CR", name: "Costa Rica", dialCode: "506", flag: "🇨🇷" },
+    { iso: "HR", name: "Croatia", dialCode: "385", flag: "🇭🇷" },
+    { iso: "CU", name: "Cuba", dialCode: "53", flag: "🇨🇺" },
+    { iso: "CW", name: "Curaçao", dialCode: "599", flag: "🇨🇼" },
+    { iso: "CY", name: "Cyprus", dialCode: "357", flag: "🇨🇾" },
+    { iso: "CZ", name: "Czech Republic", dialCode: "420", flag: "🇨🇿" },
+    { iso: "CD", name: "Democratic Republic of the Congo", dialCode: "243", flag: "🇨🇩" },
+    { iso: "DK", name: "Denmark", dialCode: "45", flag: "🇩🇰" },
+    { iso: "DJ", name: "Djibouti", dialCode: "253", flag: "🇩🇯" },
+    { iso: "DM", name: "Dominica", dialCode: "1767", flag: "🇩🇲" },
+    { iso: "DO", name: "Dominican Republic", dialCode: "1809", flag: "🇩🇴" },
+    { iso: "EC", name: "Ecuador", dialCode: "593", flag: "🇪🇨" },
+    { iso: "EG", name: "Egypt", dialCode: "20", flag: "🇪🇬" },
+    { iso: "SV", name: "El Salvador", dialCode: "503", flag: "🇸🇻" },
+    { iso: "GQ", name: "Equatorial Guinea", dialCode: "240", flag: "🇬🇶" },
+    { iso: "ER", name: "Eritrea", dialCode: "291", flag: "🇪🇷" },
+    { iso: "EE", name: "Estonia", dialCode: "372", flag: "🇪🇪" },
+    { iso: "SZ", name: "Eswatini", dialCode: "268", flag: "🇸🇿" },
+    { iso: "ET", name: "Ethiopia", dialCode: "251", flag: "🇪🇹" },
+    { iso: "FK", name: "Falkland Islands", dialCode: "500", flag: "🇫🇰" },
+    { iso: "FO", name: "Faroe Islands", dialCode: "298", flag: "🇫🇴" },
+    { iso: "FJ", name: "Fiji", dialCode: "679", flag: "🇫🇯" },
+    { iso: "FI", name: "Finland", dialCode: "358", flag: "🇫🇮" },
+    { iso: "FR", name: "France", dialCode: "33", flag: "🇫🇷" },
+    { iso: "GF", name: "French Guiana", dialCode: "594", flag: "🇬🇫" },
+    { iso: "PF", name: "French Polynesia", dialCode: "689", flag: "🇵🇫" },
+    { iso: "GA", name: "Gabon", dialCode: "241", flag: "🇬🇦" },
+    { iso: "GM", name: "Gambia", dialCode: "220", flag: "🇬🇲" },
+    { iso: "GE", name: "Georgia", dialCode: "995", flag: "🇬🇪" },
+    { iso: "DE", name: "Germany", dialCode: "49", flag: "🇩🇪" },
+    { iso: "GH", name: "Ghana", dialCode: "233", flag: "🇬🇭" },
+    { iso: "GI", name: "Gibraltar", dialCode: "350", flag: "🇬🇮" },
+    { iso: "GR", name: "Greece", dialCode: "30", flag: "🇬🇷" },
+    { iso: "GL", name: "Greenland", dialCode: "299", flag: "🇬🇱" },
+    { iso: "GD", name: "Grenada", dialCode: "1473", flag: "🇬🇩" },
+    { iso: "GP", name: "Guadeloupe", dialCode: "590", flag: "🇬🇵" },
+    { iso: "GU", name: "Guam", dialCode: "1671", flag: "🇬🇺" },
+    { iso: "GT", name: "Guatemala", dialCode: "502", flag: "🇬🇹" },
+    { iso: "GN", name: "Guinea", dialCode: "224", flag: "🇬🇳" },
+    { iso: "GW", name: "Guinea-Bissau", dialCode: "245", flag: "🇬🇼" },
+    { iso: "GY", name: "Guyana", dialCode: "592", flag: "🇬🇾" },
+    { iso: "HT", name: "Haiti", dialCode: "509", flag: "🇭🇹" },
+    { iso: "HN", name: "Honduras", dialCode: "504", flag: "🇭🇳" },
+    { iso: "HK", name: "Hong Kong", dialCode: "852", flag: "🇭🇰" },
+    { iso: "HU", name: "Hungary", dialCode: "36", flag: "🇭🇺" },
+    { iso: "IS", name: "Iceland", dialCode: "354", flag: "🇮🇸" },
+    { iso: "IN", name: "India", dialCode: "91", flag: "🇮🇳" },
+    { iso: "ID", name: "Indonesia", dialCode: "62", flag: "🇮🇩" },
+    { iso: "IR", name: "Iran", dialCode: "98", flag: "🇮🇷" },
+    { iso: "IQ", name: "Iraq", dialCode: "964", flag: "🇮🇶" },
+    { iso: "IE", name: "Ireland", dialCode: "353", flag: "🇮🇪" },
+    { iso: "IL", name: "Israel", dialCode: "972", flag: "🇮🇱" },
+    { iso: "IT", name: "Italy", dialCode: "39", flag: "🇮🇹" },
+    { iso: "CI", name: "Ivory Coast", dialCode: "225", flag: "🇨🇮" },
+    { iso: "JM", name: "Jamaica", dialCode: "1876", flag: "🇯🇲" },
+    { iso: "JP", name: "Japan", dialCode: "81", flag: "🇯🇵" },
+    { iso: "JO", name: "Jordan", dialCode: "962", flag: "🇯🇴" },
+    { iso: "KZ", name: "Kazakhstan", dialCode: "7", flag: "🇰🇿" },
+    { iso: "KE", name: "Kenya", dialCode: "254", flag: "🇰🇪" },
+    { iso: "KI", name: "Kiribati", dialCode: "686", flag: "🇰🇮" },
+    { iso: "XK", name: "Kosovo", dialCode: "383", flag: "🇽🇰" },
+    { iso: "KW", name: "Kuwait", dialCode: "965", flag: "🇰🇼" },
+    { iso: "KG", name: "Kyrgyzstan", dialCode: "996", flag: "🇰🇬" },
+    { iso: "LA", name: "Laos", dialCode: "856", flag: "🇱🇦" },
+    { iso: "LV", name: "Latvia", dialCode: "371", flag: "🇱🇻" },
+    { iso: "LB", name: "Lebanon", dialCode: "961", flag: "🇱🇧" },
+    { iso: "LS", name: "Lesotho", dialCode: "266", flag: "🇱🇸" },
+    { iso: "LR", name: "Liberia", dialCode: "231", flag: "🇱🇷" },
+    { iso: "LY", name: "Libya", dialCode: "218", flag: "🇱🇾" },
+    { iso: "LI", name: "Liechtenstein", dialCode: "423", flag: "🇱🇮" },
+    { iso: "LT", name: "Lithuania", dialCode: "370", flag: "🇱🇹" },
+    { iso: "LU", name: "Luxembourg", dialCode: "352", flag: "🇱🇺" },
+    { iso: "MO", name: "Macau", dialCode: "853", flag: "🇲🇴" },
+    { iso: "MG", name: "Madagascar", dialCode: "261", flag: "🇲🇬" },
+    { iso: "MW", name: "Malawi", dialCode: "265", flag: "🇲🇼" },
+    { iso: "MY", name: "Malaysia", dialCode: "60", flag: "🇲🇾" },
+    { iso: "MV", name: "Maldives", dialCode: "960", flag: "🇲🇻" },
+    { iso: "ML", name: "Mali", dialCode: "223", flag: "🇲🇱" },
+    { iso: "MT", name: "Malta", dialCode: "356", flag: "🇲🇹" },
+    { iso: "MH", name: "Marshall Islands", dialCode: "692", flag: "🇲🇭" },
+    { iso: "MQ", name: "Martinique", dialCode: "596", flag: "🇲🇶" },
+    { iso: "MR", name: "Mauritania", dialCode: "222", flag: "🇲🇷" },
+    { iso: "MU", name: "Mauritius", dialCode: "230", flag: "🇲🇺" },
+    { iso: "YT", name: "Mayotte", dialCode: "262", flag: "🇾🇹" },
+    { iso: "MX", name: "Mexico", dialCode: "52", flag: "🇲🇽" },
+    { iso: "FM", name: "Micronesia", dialCode: "691", flag: "🇫🇲" },
+    { iso: "MD", name: "Moldova", dialCode: "373", flag: "🇲🇩" },
+    { iso: "MC", name: "Monaco", dialCode: "377", flag: "🇲🇨" },
+    { iso: "MN", name: "Mongolia", dialCode: "976", flag: "🇲🇳" },
+    { iso: "ME", name: "Montenegro", dialCode: "382", flag: "🇲🇪" },
+    { iso: "MS", name: "Montserrat", dialCode: "1664", flag: "🇲🇸" },
+    { iso: "MA", name: "Morocco", dialCode: "212", flag: "🇲🇦" },
+    { iso: "MZ", name: "Mozambique", dialCode: "258", flag: "🇲🇿" },
+    { iso: "MM", name: "Myanmar", dialCode: "95", flag: "🇲🇲" },
+    { iso: "NA", name: "Namibia", dialCode: "264", flag: "🇳🇦" },
+    { iso: "NR", name: "Nauru", dialCode: "674", flag: "🇳🇷" },
+    { iso: "NP", name: "Nepal", dialCode: "977", flag: "🇳🇵" },
+    { iso: "NL", name: "Netherlands", dialCode: "31", flag: "🇳🇱" },
+    { iso: "NC", name: "New Caledonia", dialCode: "687", flag: "🇳🇨" },
+    { iso: "NZ", name: "New Zealand", dialCode: "64", flag: "🇳🇿" },
+    { iso: "NI", name: "Nicaragua", dialCode: "505", flag: "🇳🇮" },
+    { iso: "NE", name: "Niger", dialCode: "227", flag: "🇳🇪" },
+    { iso: "NG", name: "Nigeria", dialCode: "234", flag: "🇳🇬" },
+    { iso: "NU", name: "Niue", dialCode: "683", flag: "🇳🇺" },
+    { iso: "NF", name: "Norfolk Island", dialCode: "672", flag: "🇳🇫" },
+    { iso: "KP", name: "North Korea", dialCode: "850", flag: "🇰🇵" },
+    { iso: "MK", name: "North Macedonia", dialCode: "389", flag: "🇲🇰" },
+    { iso: "MP", name: "Northern Mariana Islands", dialCode: "1670", flag: "🇲🇵" },
+    { iso: "NO", name: "Norway", dialCode: "47", flag: "🇳🇴" },
+    { iso: "OM", name: "Oman", dialCode: "968", flag: "🇴🇲" },
+    { iso: "PK", name: "Pakistan", dialCode: "92", flag: "🇵🇰" },
+    { iso: "PW", name: "Palau", dialCode: "680", flag: "🇵🇼" },
+    { iso: "PS", name: "Palestine", dialCode: "970", flag: "🇵🇸" },
+    { iso: "PA", name: "Panama", dialCode: "507", flag: "🇵🇦" },
+    { iso: "PG", name: "Papua New Guinea", dialCode: "675", flag: "🇵🇬" },
+    { iso: "PY", name: "Paraguay", dialCode: "595", flag: "🇵🇾" },
+    { iso: "PE", name: "Peru", dialCode: "51", flag: "🇵🇪" },
+    { iso: "PH", name: "Philippines", dialCode: "63", flag: "🇵🇭" },
+    { iso: "PL", name: "Poland", dialCode: "48", flag: "🇵🇱" },
+    { iso: "PT", name: "Portugal", dialCode: "351", flag: "🇵🇹" },
+    { iso: "PR", name: "Puerto Rico", dialCode: "1787", flag: "🇵🇷" },
+    { iso: "QA", name: "Qatar", dialCode: "974", flag: "🇶🇦" },
+    { iso: "CG", name: "Republic of the Congo", dialCode: "242", flag: "🇨🇬" },
+    { iso: "RE", name: "Réunion", dialCode: "262", flag: "🇷🇪" },
+    { iso: "RO", name: "Romania", dialCode: "40", flag: "🇷🇴" },
+    { iso: "RU", name: "Russia", dialCode: "7", flag: "🇷🇺" },
+    { iso: "RW", name: "Rwanda", dialCode: "250", flag: "🇷🇼" },
+    { iso: "KN", name: "Saint Kitts and Nevis", dialCode: "1869", flag: "🇰🇳" },
+    { iso: "LC", name: "Saint Lucia", dialCode: "1758", flag: "🇱🇨" },
+    { iso: "PM", name: "Saint Pierre and Miquelon", dialCode: "508", flag: "🇵🇲" },
+    { iso: "VC", name: "Saint Vincent and the Grenadines", dialCode: "1784", flag: "🇻🇨" },
+    { iso: "WS", name: "Samoa", dialCode: "685", flag: "🇼🇸" },
+    { iso: "SM", name: "San Marino", dialCode: "378", flag: "🇸🇲" },
+    { iso: "ST", name: "São Tomé and Príncipe", dialCode: "239", flag: "🇸🇹" },
+    { iso: "SA", name: "Saudi Arabia", dialCode: "966", flag: "🇸🇦" },
+    { iso: "SN", name: "Senegal", dialCode: "221", flag: "🇸🇳" },
+    { iso: "RS", name: "Serbia", dialCode: "381", flag: "🇷🇸" },
+    { iso: "SC", name: "Seychelles", dialCode: "248", flag: "🇸🇨" },
+    { iso: "SL", name: "Sierra Leone", dialCode: "232", flag: "🇸🇱" },
+    { iso: "SG", name: "Singapore", dialCode: "65", flag: "🇸🇬" },
+    { iso: "SX", name: "Sint Maarten", dialCode: "1721", flag: "🇸🇽" },
+    { iso: "SK", name: "Slovakia", dialCode: "421", flag: "🇸🇰" },
+    { iso: "SI", name: "Slovenia", dialCode: "386", flag: "🇸🇮" },
+    { iso: "SB", name: "Solomon Islands", dialCode: "677", flag: "🇸🇧" },
+    { iso: "SO", name: "Somalia", dialCode: "252", flag: "🇸🇴" },
+    { iso: "ZA", name: "South Africa", dialCode: "27", flag: "🇿🇦" },
+    { iso: "KR", name: "South Korea", dialCode: "82", flag: "🇰🇷" },
+    { iso: "SS", name: "South Sudan", dialCode: "211", flag: "🇸🇸" },
+    { iso: "ES", name: "Spain", dialCode: "34", flag: "🇪🇸" },
+    { iso: "LK", name: "Sri Lanka", dialCode: "94", flag: "🇱🇰" },
+    { iso: "SD", name: "Sudan", dialCode: "249", flag: "🇸🇩" },
+    { iso: "SR", name: "Suriname", dialCode: "597", flag: "🇸🇷" },
+    { iso: "SE", name: "Sweden", dialCode: "46", flag: "🇸🇪" },
+    { iso: "CH", name: "Switzerland", dialCode: "41", flag: "🇨🇭" },
+    { iso: "SY", name: "Syria", dialCode: "963", flag: "🇸🇾" },
+    { iso: "TW", name: "Taiwan", dialCode: "886", flag: "🇹🇼" },
+    { iso: "TJ", name: "Tajikistan", dialCode: "992", flag: "🇹🇯" },
+    { iso: "TZ", name: "Tanzania", dialCode: "255", flag: "🇹🇿" },
+    { iso: "TH", name: "Thailand", dialCode: "66", flag: "🇹🇭" },
+    { iso: "TL", name: "Timor-Leste", dialCode: "670", flag: "🇹🇱" },
+    { iso: "TG", name: "Togo", dialCode: "228", flag: "🇹🇬" },
+    { iso: "TK", name: "Tokelau", dialCode: "690", flag: "🇹🇰" },
+    { iso: "TO", name: "Tonga", dialCode: "676", flag: "🇹🇴" },
+    { iso: "TT", name: "Trinidad and Tobago", dialCode: "1868", flag: "🇹🇹" },
+    { iso: "TN", name: "Tunisia", dialCode: "216", flag: "🇹🇳" },
+    { iso: "TR", name: "Turkey", dialCode: "90", flag: "🇹🇷" },
+    { iso: "TM", name: "Turkmenistan", dialCode: "993", flag: "🇹🇲" },
+    { iso: "TC", name: "Turks and Caicos Islands", dialCode: "1649", flag: "🇹🇨" },
+    { iso: "TV", name: "Tuvalu", dialCode: "688", flag: "🇹🇻" },
+    { iso: "VI", name: "U.S. Virgin Islands", dialCode: "1340", flag: "🇻🇮" },
+    { iso: "UG", name: "Uganda", dialCode: "256", flag: "🇺🇬" },
+    { iso: "UA", name: "Ukraine", dialCode: "380", flag: "🇺🇦" },
+    { iso: "AE", name: "United Arab Emirates", dialCode: "971", flag: "🇦🇪" },
+    { iso: "GB", name: "United Kingdom", dialCode: "44", flag: "🇬🇧" },
+    { iso: "US", name: "United States", dialCode: "1", flag: "🇺🇸" },
+    { iso: "UY", name: "Uruguay", dialCode: "598", flag: "🇺🇾" },
+    { iso: "UZ", name: "Uzbekistan", dialCode: "998", flag: "🇺🇿" },
+    { iso: "VU", name: "Vanuatu", dialCode: "678", flag: "🇻🇺" },
+    { iso: "VA", name: "Vatican City", dialCode: "379", flag: "🇻🇦" },
+    { iso: "VE", name: "Venezuela", dialCode: "58", flag: "🇻🇪" },
+    { iso: "VN", name: "Vietnam", dialCode: "84", flag: "🇻🇳" },
+    { iso: "WF", name: "Wallis and Futuna", dialCode: "681", flag: "🇼🇫" },
+    { iso: "YE", name: "Yemen", dialCode: "967", flag: "🇾🇪" },
+    { iso: "ZM", name: "Zambia", dialCode: "260", flag: "🇿🇲" },
+    { iso: "ZW", name: "Zimbabwe", dialCode: "263", flag: "🇿🇼" },
+];
+/** Lookup map: ISO code -> Country */
+export const ISO_MAP = new Map();
+COUNTRIES.forEach((c) => ISO_MAP.set(c.iso, c));
+/** Lookup map: dial code -> Country[]. Multiple countries can share a code (e.g. +1). */
+export const DIAL_CODE_MAP = new Map();
+COUNTRIES.forEach((c) => {
+    const arr = DIAL_CODE_MAP.get(c.dialCode) || [];
+    arr.push(c);
+    DIAL_CODE_MAP.set(c.dialCode, arr);
+});
+/**
+ * Sorted list of unique dial codes (longest first) for prefix detection during paste.
+ * Longest-first ensures we match "+1684" (American Samoa) before "+1" (US).
+ */
+export const DIAL_CODES_DESC = [...new Set(COUNTRIES.map((c) => c.dialCode))].sort((a, b) => b.length - a.length);

package/dist/components/Input/index.css

@@ -66,6 +66,13 @@
 	--stuic-input-localized-toggle-hover-bg: var(--stuic-color-muted);
 	--stuic-input-localized-label-text: var(--stuic-color-muted-foreground);
 
+	/* FieldPhoneNumber specific */
+	--stuic-field-phone-trigger-text: var(--stuic-color-foreground);
+	--stuic-field-phone-trigger-text-hover: var(--stuic-color-foreground);
+	--stuic-field-phone-trigger-bg: transparent;
+	--stuic-field-phone-trigger-bg-hover: var(--stuic-color-muted);
+	--stuic-field-phone-trigger-border: var(--stuic-color-border);
+
 	/* FieldOptions specific */
 	--stuic-field-options-divider: var(--stuic-color-border);
 	--stuic-field-options-control-text: var(--stuic-color-muted-foreground);
@@ -585,4 +592,39 @@
 		border-right: 1px solid var(--stuic-input-localized-divider);
 		/* border-radius: var(--stuic-input-radius); */
 	}
+
+	/* ============================================================================
+	   FIELD PHONE NUMBER
+	   ============================================================================ */
+
+	.stuic-phone-prefix-trigger {
+		color: var(--stuic-field-phone-trigger-text);
+		background: var(--stuic-field-phone-trigger-bg);
+		border-right: 1px solid var(--stuic-field-phone-trigger-border);
+		border-radius: var(--stuic-input-radius) 0 0 var(--stuic-input-radius);
+		transition:
+			background var(--stuic-input-transition),
+			color var(--stuic-input-transition);
+	}
+
+	.stuic-phone-prefix-trigger:hover:not(:disabled) {
+		color: var(--stuic-field-phone-trigger-text-hover);
+		background: var(--stuic-field-phone-trigger-bg-hover);
+	}
+
+	.stuic-phone-prefix-trigger:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.stuic-phone-prefix-picker {
+		display: flex;
+		align-items: stretch;
+	}
+
+	/* Reset field input styles leaking into the dropdown's search */
+	.stuic-phone-prefix-picker .stuic-dropdown-menu-search {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
 }

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

@@ -13,3 +13,6 @@ export { default as FieldTextarea, type Props as FieldTextareaProps, } from "./F
 export { default as FieldInputLocalized, type Props as FieldInputLocalizedProps, } from "./FieldInputLocalized.svelte";
 export { default as FieldKeyValues, type Props as FieldKeyValuesProps, type KeyValueEntry, } from "./FieldKeyValues.svelte";
 export { default as FieldObject, type Props as FieldObjectProps, } from "./FieldObject.svelte";
+export { default as FieldPhoneNumber, type Props as FieldPhoneNumberProps, } from "./FieldPhoneNumber.svelte";
+export { validatePhoneNumber } from "./phone-validation.js";
+export { type Country } from "./_internal/countries.js";

package/dist/components/Input/index.js

@@ -13,3 +13,6 @@ export { default as FieldTextarea, } from "./FieldTextarea.svelte";
 export { default as FieldInputLocalized, } from "./FieldInputLocalized.svelte";
 export { default as FieldKeyValues, } from "./FieldKeyValues.svelte";
 export { default as FieldObject, } from "./FieldObject.svelte";
+export { default as FieldPhoneNumber, } from "./FieldPhoneNumber.svelte";
+export { validatePhoneNumber } from "./phone-validation.js";
+export {} from "./_internal/countries.js";

package/dist/components/Input/phone-validation.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Built-in phone number validator for FieldPhoneNumber.
+ * Validates E.164 format (e.g. "+421905123456").
+ *
+ * Returns error message if invalid, undefined if valid or empty.
+ * Empty values are not validated — use the `required` attribute for that.
+ *
+ * Compatible with the `customValidator` signature of the validate action.
+ */
+export declare function validatePhoneNumber(value: unknown, _context?: Record<string, unknown>, _el?: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement): string | undefined;

package/dist/components/Input/phone-validation.js

@@ -0,0 +1,22 @@
+import { isValidPhoneNumber } from "libphonenumber-js/min";
+/**
+ * Built-in phone number validator for FieldPhoneNumber.
+ * Validates E.164 format (e.g. "+421905123456").
+ *
+ * Returns error message if invalid, undefined if valid or empty.
+ * Empty values are not validated — use the `required` attribute for that.
+ *
+ * Compatible with the `customValidator` signature of the validate action.
+ */
+export function validatePhoneNumber(value, _context, _el) {
+    if (!value || typeof value !== "string")
+        return undefined;
+    try {
+        if (isValidPhoneNumber(value))
+            return undefined;
+        return "Invalid phone number";
+    }
+    catch {
+        return "Invalid phone number";
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.23.3",
+  "version": "3.24.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -29,7 +29,11 @@
       "types": "./dist/themes/*.d.ts",
       "default": "./dist/themes/*.js"
     },
-    "./themes/css/*": "./dist/themes/css/*"
+    "./themes/css/*": "./dist/themes/css/*",
+    "./phone-validation": {
+      "types": "./dist/components/Input/phone-validation.d.ts",
+      "default": "./dist/components/Input/phone-validation.js"
+    }
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -53,7 +57,7 @@
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.17",
-    "svelte": "^5.51.1",
+    "svelte": "^5.51.2",
     "svelte-check": "^4.4.0",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
@@ -69,8 +73,9 @@
     "@marianmeres/parse-boolean": "^2.0.5",
     "@marianmeres/ticker": "^1.16.5",
     "esm-env": "^1.2.2",
+    "libphonenumber-js": "^1.12.36",
     "runed": "^0.23.4",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.4.1"
   },
   "scripts": {
     "dev": "vite dev",