intl-tel-input 27.2.1 → 27.3.0

package/svelte/src/IntlTelInput.svelte

@@ -36,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();
@@ -117,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);
 
@@ -171,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 ?? "";
@@ -209,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;
       }