intl-tel-input 25.10.0 → 25.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.10.0",
+  "version": "25.10.1",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",

package/react/README.md

@@ -28,7 +28,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.0/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.1/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput React component.

package/react/build/IntlTelInput.cjs

@@ -1977,7 +1977,8 @@ var Iti = class _Iti {
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
         wrapper
       );
       if (this.showSelectedCountryOnLeft) {
@@ -2142,7 +2143,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2802,7 +2806,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
       if (this.showSelectedCountryOnLeft) {
         this.telInput.style.paddingLeft = `${inputPadding}px`;
@@ -2839,21 +2844,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3271,7 +3282,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.0"
+    version: "25.10.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.js

@@ -1941,7 +1941,8 @@ var Iti = class _Iti {
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
         wrapper
       );
       if (this.showSelectedCountryOnLeft) {
@@ -2106,7 +2107,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2766,7 +2770,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
       if (this.showSelectedCountryOnLeft) {
         this.telInput.style.paddingLeft = `${inputPadding}px`;
@@ -2803,21 +2808,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3235,7 +3246,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.0"
+    version: "25.10.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -1977,7 +1977,8 @@ var Iti = class _Iti {
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
         wrapper
       );
       if (this.showSelectedCountryOnLeft) {
@@ -2142,7 +2143,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2802,7 +2806,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
       if (this.showSelectedCountryOnLeft) {
         this.telInput.style.paddingLeft = `${inputPadding}px`;
@@ -2839,21 +2844,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3271,7 +3282,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.0"
+    version: "25.10.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1941,7 +1941,8 @@ var Iti = class _Iti {
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
         wrapper
       );
       if (this.showSelectedCountryOnLeft) {
@@ -2106,7 +2107,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2766,7 +2770,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
       if (this.showSelectedCountryOnLeft) {
         this.telInput.style.paddingLeft = `${inputPadding}px`;
@@ -2803,21 +2808,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3235,7 +3246,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.0"
+    version: "25.10.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/vue/README.md

@@ -34,7 +34,7 @@ See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master
 "vue:demo": "vite --config vue/demo/[demo variant]/vite.config.js"
 ```
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.0/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.1/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.

package/vue/build/IntlTelInput.mjs

@@ -1,4 +1,4 @@
-import { mergeModels as A, useModel as M, ref as N, onMounted as E, watch as B, onUnmounted as R, withDirectives as F, createElementBlock as V, openBlock as z, mergeProps as O, vModelText as $ } from "vue";
+import { mergeModels as A, useModel as M, ref as D, onMounted as E, watch as B, onUnmounted as R, withDirectives as F, createElementBlock as V, openBlock as z, mergeProps as O, vModelText as $ } from "vue";
 const j = [
   [
     "af",
@@ -1594,9 +1594,9 @@ const U = {
 for (const u of w)
   u.name = T[u.iso2];
 let K = 0;
-const D = (u) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(u).matches, W = () => {
+const N = (u) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(u).matches, W = () => {
   if (typeof navigator < "u" && typeof window < "u") {
-    const u = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), t = D("(max-width: 500px)"), e = D("(max-height: 600px)"), i = D("(pointer: coarse)");
+    const u = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), t = N("(max-width: 500px)"), e = N("(max-height: 600px)"), i = N("(pointer: coarse)");
     return u || t || i && e;
   }
   return !1;
@@ -1687,7 +1687,7 @@ const D = (u) => typeof window < "u" && typeof window.matchMedia == "function" &
       return n;
   }
   return t.length;
-}, m = (u, t, e) => {
+}, y = (u, t, e) => {
   const i = document.createElement(u);
   return t && Object.entries(t).forEach(([s, n]) => i.setAttribute(s, n)), e && e.appendChild(i), i;
 }, I = (u, ...t) => {
@@ -1815,13 +1815,14 @@ class L {
       "iti--show-flags": i,
       "iti--inline-dropdown": !d,
       [s]: !!s
-    }), y = m("div", { class: p });
-    if ((a = this.telInput.parentNode) == null || a.insertBefore(y, this.telInput), t || i || e) {
-      this.countryContainer = m(
+    }), m = y("div", { class: p });
+    if ((a = this.telInput.parentNode) == null || a.insertBefore(m, this.telInput), t || i || e) {
+      this.countryContainer = y(
         "div",
-        { class: "iti__country-container" },
-        y
-      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = m(
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
+        m
+      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = y(
         "button",
         {
           type: "button",
@@ -1832,42 +1833,42 @@ class L {
           "aria-controls": `iti-${this.id}__dropdown-content`
         },
         this.countryContainer
-      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = m(
+      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = y(
         "div",
         { class: "iti__selected-country" },
         this.countryContainer
       );
-      const _ = m(
+      const _ = y(
         "div",
         { class: "iti__selected-country-primary" },
         this.selectedCountry
       );
-      if (this.selectedCountryInner = m(
+      if (this.selectedCountryInner = y(
         "div",
         { class: "iti__flag" },
         _
-      ), t && (this.dropdownArrow = m(
+      ), t && (this.dropdownArrow = y(
         "div",
         { class: "iti__arrow", "aria-hidden": "true" },
         _
-      )), e && (this.selectedDialCode = m(
+      )), e && (this.selectedDialCode = y(
         "div",
         { class: "iti__selected-dial-code", dir: "ltr" },
         this.selectedCountry
       )), t) {
         const b = o ? "" : "iti--flexible-dropdown-width";
-        if (this.dropdownContent = m("div", {
+        if (this.dropdownContent = y("div", {
           id: `iti-${this.id}__dropdown-content`,
           class: `iti__dropdown-content iti__hide ${b}`,
           role: "dialog",
           "aria-modal": "true"
         }), C) {
-          const f = m(
+          const f = y(
             "div",
             { class: "iti__search-input-wrapper" },
             this.dropdownContent
           );
-          this.searchIcon = m(
+          this.searchIcon = y(
             "span",
             {
               class: "iti__search-icon",
@@ -1878,7 +1879,7 @@ class L {
             <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
               <circle cx="11" cy="11" r="7" />
               <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>`, this.searchInput = m(
+            </svg>`, this.searchInput = y(
             "input",
             {
               id: `iti-${this.id}__search-input`,
@@ -1895,7 +1896,7 @@ class L {
               autocomplete: "off"
             },
             f
-          ), this.searchClearButton = m(
+          ), this.searchClearButton = y(
             "button",
             {
               type: "button",
@@ -1913,11 +1914,11 @@ class L {
                 <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
               </mask>
               <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${S})" />
-            </svg>`, this.searchResultsA11yText = m(
+            </svg>`, this.searchResultsA11yText = y(
             "span",
             { class: "iti__a11y-text" },
             this.dropdownContent
-          ), this.searchNoResults = m(
+          ), this.searchNoResults = y(
             "div",
             {
               class: "iti__no-results iti__hide",
@@ -1927,7 +1928,7 @@ class L {
             this.dropdownContent
           ), this.searchNoResults.textContent = c.zeroSearchResults;
         }
-        if (this.countryList = m(
+        if (this.countryList = y(
           "ul",
           {
             class: "iti__country-list",
@@ -1944,33 +1945,33 @@ class L {
             "iti--inline-dropdown": !d,
             [s]: !!s
           });
-          this.dropdown = m("div", { class: f }), this.dropdown.appendChild(this.dropdownContent);
+          this.dropdown = y("div", { class: f }), this.dropdown.appendChild(this.dropdownContent);
         } else
           this.countryContainer.appendChild(this.dropdownContent);
       }
     }
-    if (y.appendChild(this.telInput), this._updateInputPadding(), n) {
+    if (m.appendChild(this.telInput), this.countryContainer && (this._updateInputPadding(), this.countryContainer.classList.remove("iti__v-hide")), n) {
       const _ = this.telInput.getAttribute("name") || "", b = n(_);
       if (b.phone) {
         const f = (h = this.telInput.form) == null ? void 0 : h.querySelector(`input[name="${b.phone}"]`);
-        f ? this.hiddenInput = f : (this.hiddenInput = m("input", {
+        f ? this.hiddenInput = f : (this.hiddenInput = y("input", {
           type: "hidden",
           name: b.phone
-        }), y.appendChild(this.hiddenInput));
+        }), m.appendChild(this.hiddenInput));
       }
       if (b.country) {
         const f = (g = this.telInput.form) == null ? void 0 : g.querySelector(`input[name="${b.country}"]`);
-        f ? this.hiddenInputCountry = f : (this.hiddenInputCountry = m("input", {
+        f ? this.hiddenInputCountry = f : (this.hiddenInputCountry = y("input", {
           type: "hidden",
           name: b.country
-        }), y.appendChild(this.hiddenInputCountry));
+        }), m.appendChild(this.hiddenInputCountry));
       }
     }
   }
   //* For each country: add a country list item <li> to the countryList <ul> container.
   _appendListItems() {
     for (let t = 0; t < this.countries.length; t++) {
-      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = m(
+      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = y(
         "li",
         {
           id: `iti-${this.id}__item-${e.iso2}`,
@@ -2060,8 +2061,8 @@ class L {
     let r = !1;
     new RegExp("\\p{L}", "u").test(this.telInput.value) && (r = !0), this._handleInputEvent = (o) => {
       if (this.isAndroid && (o == null ? void 0 : o.data) === "+" && i && s && n) {
-        const p = this.telInput.selectionStart || 0, y = this.telInput.value.substring(0, p - 1), a = this.telInput.value.substring(p);
-        this.telInput.value = y + a, this._openDropdownWithPlus();
+        const p = this.telInput.selectionStart || 0, m = this.telInput.value.substring(0, p - 1), a = this.telInput.value.substring(p);
+        this.telInput.value = m + a, this._openDropdownWithPlus();
         return;
       }
       this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange();
@@ -2079,8 +2080,8 @@ class L {
           return;
         }
         if (t) {
-          const d = this.telInput.value, c = !(d.charAt(0) === "+") && this.telInput.selectionStart === 0 && o.key === "+", p = /^[0-9]$/.test(o.key), y = i ? p : c || p, a = d.slice(0, this.telInput.selectionStart) + o.key + d.slice(this.telInput.selectionEnd), h = this._getFullNumber(a), g = l.utils.getCoreNumber(h, this.selectedCountryData.iso2), _ = this.maxCoreNumberLength && g.length > this.maxCoreNumberLength, f = this._getNewCountryFromNumber(h) !== null;
-          (!y || _ && !f && !c) && o.preventDefault();
+          const d = this.telInput.value, c = !(d.charAt(0) === "+") && this.telInput.selectionStart === 0 && o.key === "+", p = /^[0-9]$/.test(o.key), m = i ? p : c || p, a = d.slice(0, this.telInput.selectionStart) + o.key + d.slice(this.telInput.selectionEnd), h = this._getFullNumber(a), g = l.utils.getCoreNumber(h, this.selectedCountryData.iso2), _ = this.maxCoreNumberLength && g.length > this.maxCoreNumberLength, f = this._getNewCountryFromNumber(h) !== null;
+          (!m || _ && !f && !c) && o.preventDefault();
         }
       }
     }, this.telInput.addEventListener("keydown", this._handleKeydownEvent));
@@ -2172,7 +2173,7 @@ class L {
     const s = k(t), n = s.length, r = [], o = [], d = [], C = [], c = [], p = [];
     for (const a of this.countries)
       e || n === 0 ? d.push(a) : a.iso2 === s ? r.push(a) : a.normalisedName.startsWith(s) ? o.push(a) : a.normalisedName.includes(s) ? d.push(a) : s === a.dialCode || s === a.dialCodePlus ? C.push(a) : a.dialCodePlus.includes(s) ? c.push(a) : a.initials.includes(s) && p.push(a);
-    const y = [
+    const m = [
       ...r.sort((a, h) => a.priority - h.priority),
       ...o.sort((a, h) => a.priority - h.priority),
       ...d.sort((a, h) => a.priority - h.priority),
@@ -2180,7 +2181,7 @@ class L {
       ...c.sort((a, h) => a.priority - h.priority),
       ...p.sort((a, h) => a.priority - h.priority)
     ];
-    for (const a of y) {
+    for (const a of m) {
       const h = a.nodeById[this.id];
       h && (this.countryList.appendChild(h), i && (this._highlightListItem(h, !1), i = !1));
     }
@@ -2298,8 +2299,8 @@ class L {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const e = (this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth()) + 6;
-      this.showSelectedCountryOnLeft ? this.telInput.style.paddingLeft = `${e}px` : this.telInput.style.paddingRight = `${e}px`;
+      const t = this.options.separateDialCode ? 78 : 42, i = (this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || t) + 6;
+      this.showSelectedCountryOnLeft ? this.telInput.style.paddingLeft = `${i}px` : this.telInput.style.paddingRight = `${i}px`;
     }
   }
   //* Update the maximum valid number length for the currently selected country.
@@ -2321,20 +2322,26 @@ class L {
       } else
         this.maxCoreNumberLength = null;
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
-      const t = this.telInput.parentNode.cloneNode(!1);
-      t.style.visibility = "hidden", document.body.appendChild(t);
-      const e = this.countryContainer.cloneNode();
-      t.appendChild(e);
-      const i = this.selectedCountry.cloneNode(!0);
+      let t;
+      try {
+        t = window.top.document.body;
+      } catch {
+        t = document.body;
+      }
+      const e = this.telInput.parentNode.cloneNode(!1);
+      e.style.visibility = "hidden", t.appendChild(e);
+      const i = this.countryContainer.cloneNode();
       e.appendChild(i);
-      const s = i.offsetWidth;
-      return document.body.removeChild(t), s;
+      const s = this.selectedCountry.cloneNode(!0);
+      i.appendChild(s);
+      const n = s.offsetWidth;
+      return t.removeChild(e), n;
     }
     return 0;
   }
@@ -2602,7 +2609,7 @@ const Y = (u) => {
     attachUtils: Y,
     startedLoadingUtilsScript: !1,
     startedLoadingAutoCountry: !1,
-    version: "25.10.0"
+    version: "25.10.1"
   }
 ), Z = {
   __name: "IntlTelInput",
@@ -2637,7 +2644,7 @@ const Y = (u) => {
     "changeErrorCode"
   ], ["update:modelValue"]),
   setup(u, { expose: t, emit: e }) {
-    const i = M(u, "modelValue"), s = u, n = e, r = N(), o = N(), d = N(!1), C = () => o.value ? s.options.strictMode ? o.value.isValidNumberPrecise() : o.value.isValidNumber() : null, c = () => {
+    const i = M(u, "modelValue"), s = u, n = e, r = D(), o = D(), d = D(!1), C = () => o.value ? s.options.strictMode ? o.value.isValidNumberPrecise() : o.value.isValidNumber() : null, c = () => {
       let a = C();
       d.value !== a && (d.value = a, n("changeValidity", !!a), n(
         "changeErrorCode",
@@ -2646,7 +2653,7 @@ const Y = (u) => {
     }, p = () => {
       var a;
       n("changeNumber", ((a = o.value) == null ? void 0 : a.getNumber()) ?? ""), c();
-    }, y = () => {
+    }, m = () => {
       var a;
       n("changeCountry", ((a = o.value) == null ? void 0 : a.getSelectedCountryData().iso2) ?? ""), p(), c();
     };
@@ -2666,7 +2673,7 @@ const Y = (u) => {
       ref: r,
       "onUpdate:modelValue": h[0] || (h[0] = (g) => i.value = g),
       type: "tel",
-      onCountrychange: y,
+      onCountrychange: m,
       onInput: p
     }, u.inputProps), null, 16)), [
       [