svelte-tel-input 4.0.0-next.4 → 4.0.1

package/README.md

@@ -17,8 +17,6 @@ Store in [E.164](https://en.wikipedia.org/wiki/E.164). Ship with any CSS framewo
 
 ## Features
 
-- **Headless & unstyled** — zero built-in styles; bring Tailwind, CSS Modules, or plain CSS
-- **Fully customizable UI** — you own the markup; the library owns the logic
 - **E.164 storage** — one canonical format, always searchable and SMS-ready
 - **Auto-detect country** from dial code (`+44` → `GB`)
 - **Smart formatting** — international display with cursor position preservation
@@ -30,7 +28,8 @@ Store in [E.164](https://en.wikipedia.org/wiki/E.164). Ship with any CSS framewo
 - **SSR / SSG** compatible
 - **Svelte 5 runes** — `$bindable` props, `$state`, `$derived`
 - **Accessible** — `aria-invalid` auto-set, ARIA attribute passthrough, `type="tel"`
-- **Unstyled** — bring your own CSS or Tailwind classes
+- **Headless & unstyled** — zero built-in styles; bring Tailwind, CSS Modules, or plain CSS
+- **Fully customizable UI** — you own the markup; the library owns the logic
 
 ## Install
 

package/dist/components/input/TelInput.svelte

@@ -161,8 +161,18 @@
 	const getValidationError = (
 		isEmpty: boolean,
 		parseValid: boolean,
-		resolvedCountry: CountryCode | null | undefined
+		resolvedCountry: CountryCode | null | undefined,
+		currentCountry: CountryCode | null | undefined = country
 	): ValidationError => {
+		if (
+			combinedOptions.lockCountry &&
+			currentCountry != null &&
+			resolvedCountry != null &&
+			resolvedCountry !== currentCountry
+		) {
+			return 'COUNTRY_NOT_ALLOWED';
+		}
+
 		const allowed = combinedOptions.allowedCountries;
 		if (allowed?.length && resolvedCountry != null && !allowed.includes(resolvedCountry)) {
 			return 'COUNTRY_NOT_ALLOWED';
@@ -176,9 +186,10 @@
 	const applyValidity = (
 		isEmpty: boolean,
 		parseValid: boolean,
-		resolvedCountry?: CountryCode | null
+		resolvedCountry?: CountryCode | null,
+		currentCountry: CountryCode | null | undefined = country
 	) => {
-		const error = getValidationError(isEmpty, parseValid, resolvedCountry);
+		const error = getValidationError(isEmpty, parseValid, resolvedCountry, currentCountry);
 		valid = error === null;
 		validationError = error;
 		onValidityChange?.(valid, error);
@@ -193,7 +204,12 @@
 			if (inputValue === '') {
 				applyValidity(true, false, country);
 			} else {
-				applyValidity(false, detailedValue?.isValid ?? false, country);
+				applyValidity(
+					false,
+					detailedValue?.isPhoneValid ?? false,
+					detailedValue?.countryCode ?? country,
+					country
+				);
 			}
 		}
 		const { onblur } = rest;
@@ -319,21 +335,22 @@
 			}
 		}
 
-		// If the resolved country is not in allowedCountries, the phone number is
-		// intrinsically valid (libphonenumber-js says so) but the application rejects
-		// it. Patch detailedValue to reflect this so that detailedValue.isValid is
-		// consistent with the component's `valid` prop and `validationError`.
-		const _allowedCountries = combinedOptions.allowedCountries;
-		if (
-			detailedValue &&
-			_allowedCountries?.length &&
-			detailedValue.countryCode != null &&
-			!_allowedCountries.includes(detailedValue.countryCode)
-		) {
+		const resolvedCountry =
+			detailedValue?.countryCode ?? numberHasCountry?.iso2 ?? country ?? null;
+		const componentValidationError = detailedValue
+			? getValidationError(
+					false,
+					detailedValue.isPhoneValid ?? false,
+					resolvedCountry,
+					currCountry ?? country
+				)
+			: null;
+
+		if (detailedValue && componentValidationError !== detailedValue.validationError) {
 			detailedValue = {
 				...detailedValue,
-				isValid: false,
-				validationError: 'COUNTRY_NOT_ALLOWED'
+				isValid: componentValidationError === null && detailedValue.isPhoneValid,
+				validationError: componentValidationError
 			};
 		}
 
@@ -348,7 +365,12 @@
 		onValueChange?.(value, detailedValue);
 
 		if (shouldValidate) {
-			applyValidity(false, detailedValue?.isValid ?? false, country);
+			applyValidity(
+				false,
+				detailedValue?.isPhoneValid ?? false,
+				resolvedCountry,
+				currCountry ?? country
+			);
 		}
 	};
 

package/dist/types/index.d.ts

@@ -44,7 +44,7 @@ export interface DetailedValue {
 /**
  * The reason the current phone number input is invalid.
  * - `'REQUIRED'` — field is empty and `required` is `true`
- * - `'COUNTRY_NOT_ALLOWED'` — the resolved country is not in `options.allowedCountries`
+ * - `'COUNTRY_NOT_ALLOWED'` — the resolved country is not in `options.allowedCountries`, or `options.lockCountry` rejects an international number that resolves to a different country than the locked one
  * - `'TOO_SHORT'` — number has too few digits
  * - `'TOO_LONG'` — number has too many digits
  * - `'NOT_A_NUMBER'` — input does not look like a phone number at all

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "4.0.0-next.4",
+  "version": "4.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -55,7 +55,7 @@
     "typescript": "^5.9.3",
     "valibot": "^1.3.1",
     "vite": "^7.3.1",
-    "vitest": "^4.1.0",
+    "vitest": "^4.1.1",
     "zod": "^4.3.6"
   },
   "type": "module",