intl-tel-input 27.2.0 → 27.3.0

package/svelte/src/IntlTelInput.svelte

@@ -6,6 +6,7 @@
 <script lang="ts">
   // Resolves to IntlTelInput.svelte.d.ts (the type declaration file for this component).
   import type { Props } from "./IntlTelInput.svelte";
+  import type { SomeOptions } from "intl-tel-input";
   import { onMount, onDestroy } from "svelte";
 
   // Props
@@ -35,6 +36,8 @@
   // State
   let inputElement: HTMLInputElement | undefined = $state();
   let instance: Iti | undefined = $state();
+  // Classes the plugin adds directly to the input (e.g. iti__tel-input)
+  let pluginInputClasses = $state("");
   let lastEmittedNumber: string | undefined = $state();
   let lastEmittedCountry: string | undefined = $state();
   let lastEmittedValidity: boolean | undefined = $state();
@@ -116,6 +119,7 @@
   onMount(() => {
     if (inputElement) {
       instance = intlTelInput(inputElement, initOptions as SomeOptions);
+      pluginInputClasses = inputElement.className;
       if (disabled) instance.setDisabled(disabled);
       if (readonly) instance.setReadonly(readonly);
 
@@ -170,9 +174,11 @@
     }
   });
 
-  // Watch value prop changes (only after initialization)
+  // Watch value prop changes (only after initialization).
+  // If value is undefined, the component is uncontrolled — do not touch the input
+  // (otherwise we would clobber any initialValue with an empty string on mount).
   $effect(() => {
-    if (!hasInitialized || !instance) {
+    if (!hasInitialized || !instance || value === undefined) {
       return;
     }
     const next = value ?? "";
@@ -208,6 +214,8 @@
     for (const [key, val] of Object.entries(props)) {
       if (ignoredInputProps.has(key)) {
         warnInputProp(key);
+      } else if (key === "class") {
+        rest[key] = `${pluginInputClasses} ${val}`;
       } else {
         rest[key] = val;
       }