intl-tel-input 25.10.12 → 25.11.1

package/react/build/IntlTelInput.cjs

@@ -1724,7 +1724,13 @@ for (const c of rawCountryData) {
     areaCodes: c[3] || null,
     nodeById: {},
     // populated by the plugin
-    nationalPrefix: c[4] || null
+    nationalPrefix: c[4] || null,
+    normalisedName: "",
+    // populated in the plugin
+    initials: "",
+    // populated in the plugin
+    dialCodePlus: ""
+    // populated in the plugin
   });
 }
 var data_default = allCountries;
@@ -1996,13 +2002,111 @@ var interface_default = interfaceTranslations;
 var allTranslations = { ...countries_default, ...interface_default };
 var en_default = allTranslations;
 
-// src/js/modules/core/options.ts
-var mq = (q) => {
-  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
+// src/js/modules/constants.ts
+var EVENTS = {
+  OPEN_COUNTRY_DROPDOWN: "open:countrydropdown",
+  CLOSE_COUNTRY_DROPDOWN: "close:countrydropdown",
+  COUNTRY_CHANGE: "countrychange",
+  INPUT: "input"
+  // used for synthetic input trigger
+};
+var CLASSES = {
+  HIDE: "iti__hide",
+  V_HIDE: "iti__v-hide",
+  ARROW_UP: "iti__arrow--up",
+  GLOBE: "iti__globe",
+  FLAG: "iti__flag",
+  COUNTRY_ITEM: "iti__country",
+  HIGHLIGHT: "iti__highlight"
+};
+var KEYS = {
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  SPACE: " ",
+  ENTER: "Enter",
+  ESC: "Escape",
+  TAB: "Tab"
+};
+var INPUT_TYPES = {
+  PASTE: "insertFromPaste",
+  DELETE_FWD: "deleteContentForward"
+};
+var REGEX = {
+  ALPHA_UNICODE: /\p{L}/u,
+  // any kind of letter from any language
+  NON_PLUS_NUMERIC: /[^+0-9]/,
+  // chars that are NOT + or digit
+  NON_PLUS_NUMERIC_GLOBAL: /[^+0-9]/g,
+  // chars that are NOT + or digit (global)
+  HIDDEN_SEARCH_CHAR: /^[a-zA-ZÀ-ÿа-яА-Я ]$/
+  // single acceptable hidden-search char
+};
+var TIMINGS = {
+  SEARCH_DEBOUNCE_MS: 100,
+  HIDDEN_SEARCH_RESET_MS: 1e3,
+  NEXT_TICK: 0
+};
+var SENTINELS = {
+  UNKNOWN_NUMBER_TYPE: -99,
+  UNKNOWN_VALIDATION_ERROR: -99
+};
+var LAYOUT = {
+  SANE_SELECTED_WITH_DIAL_WIDTH: 78,
+  // px width fallback when separateDialCode enabled
+  SANE_SELECTED_NO_DIAL_WIDTH: 42,
+  // px width fallback when no separate dial code
+  INPUT_PADDING_EXTRA_LEFT: 6
+  // px gap between selected country container and input text
+};
+var DIAL = {
+  PLUS: "+",
+  NANP: "1"
+  // North American Numbering Plan
+};
+var UK = {
+  ISO2: "gb",
+  DIAL_CODE: "44",
+  // +44 United Kingdom
+  MOBILE_PREFIX: "7",
+  // UK mobile numbers start with 7 after national trunk (0) or core section
+  MOBILE_CORE_LENGTH: 10
+  // core number length (excluding dial code / national prefix) for mobiles
+};
+var US = {
+  ISO2: "us",
+  DIAL_CODE: "1"
+  // +1 United States
+};
+var PLACEHOLDER_MODES = {
+  AGGRESSIVE: "aggressive",
+  POLITE: "polite"
+};
+var INITIAL_COUNTRY = {
+  AUTO: "auto"
 };
+var DATA_KEYS = {
+  COUNTRY_CODE: "countryCode",
+  DIAL_CODE: "dialCode"
+};
+var ARIA = {
+  EXPANDED: "aria-expanded",
+  LABEL: "aria-label",
+  SELECTED: "aria-selected",
+  ACTIVE_DESCENDANT: "aria-activedescendant",
+  HASPOPUP: "aria-haspopup",
+  CONTROLS: "aria-controls",
+  HIDDEN: "aria-hidden",
+  AUTOCOMPLETE: "aria-autocomplete",
+  MODAL: "aria-modal"
+};
+
+// src/js/modules/core/options.ts
+var mq = (q) => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
 var computeDefaultUseFullscreenPopup = () => {
   if (typeof navigator !== "undefined" && typeof window !== "undefined") {
-    const isMobileUserAgent = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    const isMobileUserAgent = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
     const isNarrowViewport = mq("(max-width: 500px)");
     const isShortViewport = mq("(max-height: 600px)");
     const isCoarsePointer = mq("(pointer: coarse)");
@@ -2016,7 +2120,7 @@ var defaults = {
   //* Whether or not to allow the dropdown.
   allowDropdown: true,
   //* Add a placeholder in the input with an example number for the selected country.
-  autoPlaceholder: "polite",
+  autoPlaceholder: PLACEHOLDER_MODES.POLITE,
   //* Modify the parentClass.
   containerClass: "",
   //* The order of the countries in the dropdown. Defaults to alphabetical.
@@ -2062,7 +2166,7 @@ var defaults = {
   //* The number type to enforce during validation.
   validationNumberTypes: ["MOBILE"]
 };
-function applyOptionSideEffects(o) {
+var applyOptionSideEffects = (o, defaultEnglishStrings) => {
   if (o.useFullscreenPopup) {
     o.fixDropdownWidth = false;
   }
@@ -2078,18 +2182,66 @@ function applyOptionSideEffects(o) {
   if (o.useFullscreenPopup && !o.dropdownContainer) {
     o.dropdownContainer = document.body;
   }
-  o.i18n = { ...en_default, ...o.i18n };
-}
+  o.i18n = { ...defaultEnglishStrings, ...o.i18n };
+};
 
 // src/js/modules/utils/string.ts
 var getNumeric = (s) => s.replace(/\D/g, "");
 var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
 
+// src/js/modules/core/countrySearch.ts
+var getMatchedCountries = (countries, query) => {
+  const normalisedQuery = normaliseString(query);
+  const iso2Matches = [];
+  const nameStartWith = [];
+  const nameContains = [];
+  const dialCodeMatches = [];
+  const dialCodeContains = [];
+  const initialsMatches = [];
+  for (const c of countries) {
+    if (c.iso2 === normalisedQuery) {
+      iso2Matches.push(c);
+    } else if (c.normalisedName.startsWith(normalisedQuery)) {
+      nameStartWith.push(c);
+    } else if (c.normalisedName.includes(normalisedQuery)) {
+      nameContains.push(c);
+    } else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
+      dialCodeMatches.push(c);
+    } else if (c.dialCodePlus.includes(normalisedQuery)) {
+      dialCodeContains.push(c);
+    } else if (c.initials.includes(normalisedQuery)) {
+      initialsMatches.push(c);
+    }
+  }
+  const sortByPriority = (a, b) => a.priority - b.priority;
+  return [
+    ...iso2Matches.sort(sortByPriority),
+    ...nameStartWith.sort(sortByPriority),
+    ...nameContains.sort(sortByPriority),
+    ...dialCodeMatches.sort(sortByPriority),
+    ...dialCodeContains.sort(sortByPriority),
+    ...initialsMatches.sort(sortByPriority)
+  ];
+};
+var findFirstCountryStartingWith = (countries, query) => {
+  const lowerQuery = query.toLowerCase();
+  for (const c of countries) {
+    const lowerName = c.name.toLowerCase();
+    if (lowerName.startsWith(lowerQuery)) {
+      return c;
+    }
+  }
+  return null;
+};
+
 // src/js/modules/utils/dom.ts
+var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
 var createEl = (tagName, attrs, container) => {
   const el = document.createElement(tagName);
   if (attrs) {
-    Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
+    Object.entries(attrs).forEach(
+      ([key, value]) => el.setAttribute(key, value)
+    );
   }
   if (container) {
     container.appendChild(el);
@@ -2097,251 +2249,41 @@ var createEl = (tagName, attrs, container) => {
   return el;
 };
 
-// src/js/modules/data/country-data.ts
-function processAllCountries(options) {
-  const { onlyCountries, excludeCountries } = options;
-  if (onlyCountries.length) {
-    const lowerCaseOnlyCountries = onlyCountries.map((country) => country.toLowerCase());
-    return data_default.filter((country) => lowerCaseOnlyCountries.includes(country.iso2));
-  } else if (excludeCountries.length) {
-    const lowerCaseExcludeCountries = excludeCountries.map((country) => country.toLowerCase());
-    return data_default.filter((country) => !lowerCaseExcludeCountries.includes(country.iso2));
-  }
-  return data_default;
-}
-function translateCountryNames(countries, options) {
-  for (const c of countries) {
-    const iso2 = c.iso2.toLowerCase();
-    if (options.i18n[iso2]) {
-      c.name = options.i18n[iso2];
-    }
-  }
-}
-function processDialCodes(countries, options) {
-  const dialCodes = /* @__PURE__ */ new Set();
-  let dialCodeMaxLen = 0;
-  const dialCodeToIso2Map = {};
-  const _addToDialCodeMap = (iso2, dialCode, priority) => {
-    if (!iso2 || !dialCode) {
-      return;
-    }
-    if (dialCode.length > dialCodeMaxLen) {
-      dialCodeMaxLen = dialCode.length;
-    }
-    if (!dialCodeToIso2Map.hasOwnProperty(dialCode)) {
-      dialCodeToIso2Map[dialCode] = [];
-    }
-    const iso2List = dialCodeToIso2Map[dialCode];
-    if (iso2List.includes(iso2)) {
-      return;
-    }
-    const index = priority !== void 0 ? priority : iso2List.length;
-    iso2List[index] = iso2;
-  };
-  for (const c of countries) {
-    if (!dialCodes.has(c.dialCode)) {
-      dialCodes.add(c.dialCode);
-    }
-    for (let k = 1; k < c.dialCode.length; k++) {
-      const partialDialCode = c.dialCode.substring(0, k);
-      _addToDialCodeMap(c.iso2, partialDialCode);
-    }
-    _addToDialCodeMap(c.iso2, c.dialCode, c.priority);
-  }
-  if (options.onlyCountries.length || options.excludeCountries.length) {
-    dialCodes.forEach((dialCode) => {
-      dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
-    });
-  }
-  for (const c of countries) {
-    if (c.areaCodes) {
-      const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
-      for (const areaCode of c.areaCodes) {
-        for (let k = 1; k < areaCode.length; k++) {
-          const partialAreaCode = areaCode.substring(0, k);
-          const partialDialCode = c.dialCode + partialAreaCode;
-          _addToDialCodeMap(rootIso2Code, partialDialCode);
-          _addToDialCodeMap(c.iso2, partialDialCode);
-        }
-        _addToDialCodeMap(c.iso2, c.dialCode + areaCode);
-      }
-    }
-  }
-  return { dialCodes, dialCodeMaxLen, dialCodeToIso2Map };
-}
-function sortCountries(countries, options) {
-  if (options.countryOrder) {
-    options.countryOrder = options.countryOrder.map((iso2) => iso2.toLowerCase());
-  }
-  countries.sort((a, b) => {
-    const { countryOrder } = options;
-    if (countryOrder) {
-      const aIndex = countryOrder.indexOf(a.iso2);
-      const bIndex = countryOrder.indexOf(b.iso2);
-      const aIndexExists = aIndex > -1;
-      const bIndexExists = bIndex > -1;
-      if (aIndexExists || bIndexExists) {
-        if (aIndexExists && bIndexExists) {
-          return aIndex - bIndex;
-        }
-        return aIndexExists ? -1 : 1;
-      }
-    }
-    return a.name.localeCompare(b.name);
-  });
-}
-function cacheSearchTokens(countries) {
-  for (const c of countries) {
-    c.normalisedName = normaliseString(c.name);
-    c.initials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-    c.dialCodePlus = `+${c.dialCode}`;
-  }
-}
-
-// src/js/modules/format/formatting.ts
-function beforeSetNumber(fullNumber, dialCode, separateDialCode, selectedCountryData) {
-  let number = fullNumber;
-  if (separateDialCode) {
-    if (dialCode) {
-      dialCode = `+${selectedCountryData.dialCode}`;
-      const start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
-      number = number.substring(start);
-    }
-  }
-  return number;
-}
-function formatNumberAsYouType(fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) {
-  const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData.iso2) : fullNumber;
-  const { dialCode } = selectedCountryData;
-  if (separateDialCode && telInputValue.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
-    const afterDialCode = result.split(`+${dialCode}`)[1] || "";
-    return afterDialCode.trim();
-  }
-  return result;
-}
-
-// src/js/modules/format/caret.ts
-function translateCursorPosition(relevantChars, formattedValue, prevCaretPos, isDeleteForwards) {
-  if (prevCaretPos === 0 && !isDeleteForwards) {
-    return 0;
-  }
-  let relevantCharCount = 0;
-  for (let i = 0; i < formattedValue.length; i++) {
-    if (/[+0-9]/.test(formattedValue[i])) {
-      relevantCharCount++;
-    }
-    if (relevantCharCount === relevantChars && !isDeleteForwards) {
-      return i + 1;
-    }
-    if (isDeleteForwards && relevantCharCount === relevantChars + 1) {
-      return i;
-    }
-  }
-  return formattedValue.length;
-}
-
-// src/js/modules/data/nanp-regionless.ts
-var regionlessNanpNumbers = [
-  "800",
-  "822",
-  "833",
-  "844",
-  "855",
-  "866",
-  "877",
-  "880",
-  "881",
-  "882",
-  "883",
-  "884",
-  "885",
-  "886",
-  "887",
-  "888",
-  "889"
-];
-var isRegionlessNanp = (number) => {
-  const numeric = getNumeric(number);
-  if (numeric.charAt(0) === "1") {
-    const areaCode = numeric.substring(1, 4);
-    return regionlessNanpNumbers.includes(areaCode);
-  }
-  return false;
+// src/js/modules/core/icons.ts
+var buildSearchIcon = () => `
+  <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>`;
+var buildClearIcon = (id2) => {
+  const maskId = `iti-${id2}-clear-mask`;
+  return `
+    <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" ${ARIA.HIDDEN}="true" focusable="false">
+      <mask id="${maskId}" maskUnits="userSpaceOnUse">
+        <rect width="16" height="16" fill="white" />
+        <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(#${maskId})" />
+    </svg>`;
 };
 
-// src/js/intl-tel-input.ts
-for (const c of data_default) {
-  c.name = en_default[c.iso2];
-}
-var id = 0;
-var iso2Set = new Set(data_default.map((c) => c.iso2));
-var isIso2 = (val) => iso2Set.has(val);
-var forEachInstance = (method, ...args) => {
-  const { instances } = intlTelInput;
-  Object.values(instances).forEach((instance) => instance[method](...args));
-};
-var Iti = class _Iti {
-  /**
-   * Build a space-delimited class string from an object map of className -> truthy/falsey.
-   * Only keys with truthy values are included.
-   */
-  static _buildClassNames(flags) {
-    return Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
-  }
-  constructor(input, customOptions = {}) {
-    this.id = id++;
-    this.telInput = input;
+// src/js/modules/core/ui.ts
+var UI = class {
+  constructor(input, options, id2) {
     this.highlightedItem = null;
-    this.options = Object.assign({}, defaults, customOptions);
+    input.dataset.intlTelInputId = id2.toString();
+    this.telInput = input;
+    this.options = options;
+    this.id = id2;
     this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
-  }
-  _detectEnvironmentAndLayout() {
-    this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
     if (this.options.separateDialCode) {
       this.originalPaddingLeft = this.telInput.style.paddingLeft;
     }
   }
-  _createInitPromises() {
-    const autoCountryPromise = new Promise((resolve, reject) => {
-      this.resolveAutoCountryPromise = resolve;
-      this.rejectAutoCountryPromise = reject;
-    });
-    const utilsScriptPromise = new Promise((resolve, reject) => {
-      this.resolveUtilsScriptPromise = resolve;
-      this.rejectUtilsScriptPromise = reject;
-    });
-    this.promise = Promise.all([autoCountryPromise, utilsScriptPromise]);
-  }
-  //* Can't be private as it's called from intlTelInput convenience wrapper.
-  _init() {
-    applyOptionSideEffects(this.options);
-    this._detectEnvironmentAndLayout();
-    this._createInitPromises();
-    this.selectedCountryData = {};
-    this._processCountryData();
-    this._generateMarkup();
-    this._setInitialState();
-    this._initListeners();
-    this._initRequests();
-  }
-  //********************
-  //*  PRIVATE METHODS
-  //********************
-  //* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
-  _processCountryData() {
-    this.countries = processAllCountries(this.options);
-    const dialRes = processDialCodes(this.countries, this.options);
-    this.dialCodes = dialRes.dialCodes;
-    this.dialCodeMaxLen = dialRes.dialCodeMaxLen;
-    this.dialCodeToIso2Map = dialRes.dialCodeToIso2Map;
-    translateCountryNames(this.countries, this.options);
-    sortCountries(this.countries, this.options);
-    this.countryByIso2 = new Map(this.countries.map((c) => [c.iso2, c]));
-    cacheSearchTokens(this.countries);
-  }
   //* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
-  _generateMarkup() {
+  generateMarkup(countries) {
+    this.countries = countries;
     this._prepareTelInput();
     const wrapper = this._createWrapperAndInsert();
     this._maybeBuildCountryContainer(wrapper);
@@ -2351,19 +2293,14 @@ var Iti = class _Iti {
   }
   _prepareTelInput() {
     this.telInput.classList.add("iti__tel-input");
-    if (!this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete"))) {
+    if (!this.telInput.hasAttribute("autocomplete") && !this.telInput.form?.hasAttribute("autocomplete")) {
       this.telInput.setAttribute("autocomplete", "off");
     }
   }
   _createWrapperAndInsert() {
-    const {
-      allowDropdown,
-      showFlags,
-      containerClass,
-      useFullscreenPopup
-    } = this.options;
-    const parentClasses = _Iti._buildClassNames({
-      "iti": true,
+    const { allowDropdown, showFlags, containerClass, useFullscreenPopup } = this.options;
+    const parentClasses = buildClassNames({
+      iti: true,
       "iti--allow-dropdown": allowDropdown,
       "iti--show-flags": showFlags,
       "iti--inline-dropdown": !useFullscreenPopup,
@@ -2373,20 +2310,16 @@ var Iti = class _Iti {
     if (this.isRTL) {
       wrapper.setAttribute("dir", "ltr");
     }
-    this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
+    this.telInput.before(wrapper);
     return wrapper;
   }
   _maybeBuildCountryContainer(wrapper) {
-    const {
-      allowDropdown,
-      separateDialCode,
-      showFlags
-    } = this.options;
+    const { allowDropdown, separateDialCode, showFlags } = this.options;
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
         // visibly hidden until we measure it's width to set the input padding correctly
-        { class: "iti__country-container iti__v-hide" },
+        { class: `iti__country-container ${CLASSES.V_HIDE}` },
         wrapper
       );
       if (allowDropdown) {
@@ -2395,10 +2328,10 @@ var Iti = class _Iti {
           {
             type: "button",
             class: "iti__selected-country",
-            "aria-expanded": "false",
-            "aria-label": this.options.i18n.noCountrySelected,
-            "aria-haspopup": "dialog",
-            "aria-controls": `iti-${this.id}__dropdown-content`
+            [ARIA.EXPANDED]: "false",
+            [ARIA.LABEL]: this.options.i18n.noCountrySelected,
+            [ARIA.HASPOPUP]: "dialog",
+            [ARIA.CONTROLS]: `iti-${this.id}__dropdown-content`
           },
           this.countryContainer
         );
@@ -2419,13 +2352,13 @@ var Iti = class _Iti {
       );
       this.selectedCountryInner = createEl(
         "div",
-        { class: "iti__flag" },
+        { class: CLASSES.FLAG },
         selectedCountryPrimary
       );
       if (allowDropdown) {
         this.dropdownArrow = createEl(
           "div",
-          { class: "iti__arrow", "aria-hidden": "true" },
+          { class: "iti__arrow", [ARIA.HIDDEN]: "true" },
           selectedCountryPrimary
         );
       }
@@ -2453,9 +2386,9 @@ var Iti = class _Iti {
     const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
     this.dropdownContent = createEl("div", {
       id: `iti-${this.id}__dropdown-content`,
-      class: `iti__dropdown-content iti__hide ${extraClasses}`,
+      class: `iti__dropdown-content ${CLASSES.HIDE} ${extraClasses}`,
       role: "dialog",
-      "aria-modal": "true"
+      [ARIA.MODAL]: "true"
     });
     if (this.isRTL) {
       this.dropdownContent.setAttribute("dir", "rtl");
@@ -2469,17 +2402,17 @@ var Iti = class _Iti {
         class: "iti__country-list",
         id: `iti-${this.id}__country-listbox`,
         role: "listbox",
-        "aria-label": i18n.countryListAriaLabel
+        [ARIA.LABEL]: i18n.countryListAriaLabel
       },
       this.dropdownContent
     );
     this._appendListItems();
     if (countrySearch) {
-      this._updateSearchResultsA11yText();
+      this.updateSearchResultsA11yText();
     }
     if (dropdownContainer) {
-      const dropdownClasses = _Iti._buildClassNames({
-        "iti": true,
+      const dropdownClasses = buildClassNames({
+        iti: true,
         "iti--container": true,
         "iti--fullscreen-popup": useFullscreenPopup,
         "iti--inline-dropdown": !useFullscreenPopup,
@@ -2502,15 +2435,11 @@ var Iti = class _Iti {
       "span",
       {
         class: "iti__search-icon",
-        "aria-hidden": "true"
+        [ARIA.HIDDEN]: "true"
       },
       searchWrapper
     );
-    this.searchIcon.innerHTML = `
-      <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.searchIcon.innerHTML = buildSearchIcon();
     this.searchInput = createEl(
       "input",
       {
@@ -2521,11 +2450,11 @@ var Iti = class _Iti {
         placeholder: i18n.searchPlaceholder,
         // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
         role: "combobox",
-        "aria-expanded": "true",
-        "aria-label": i18n.searchPlaceholder,
-        "aria-controls": `iti-${this.id}__country-listbox`,
-        "aria-autocomplete": "list",
-        "autocomplete": "off"
+        [ARIA.EXPANDED]: "true",
+        [ARIA.LABEL]: i18n.searchPlaceholder,
+        [ARIA.CONTROLS]: `iti-${this.id}__country-listbox`,
+        [ARIA.AUTOCOMPLETE]: "list",
+        autocomplete: "off"
       },
       searchWrapper
     );
@@ -2533,21 +2462,13 @@ var Iti = class _Iti {
       "button",
       {
         type: "button",
-        class: "iti__search-clear iti__hide",
-        "aria-label": i18n.clearSearchAriaLabel,
+        class: `iti__search-clear ${CLASSES.HIDE}`,
+        [ARIA.LABEL]: i18n.clearSearchAriaLabel,
         tabindex: "-1"
       },
       searchWrapper
     );
-    const maskId = `iti-${this.id}-clear-mask`;
-    this.searchClearButton.innerHTML = `
-      <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-        <mask id="${maskId}" maskUnits="userSpaceOnUse">
-          <rect width="16" height="16" fill="white" />
-          <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(#${maskId})" />
-      </svg>`;
+    this.searchClearButton.innerHTML = buildClearIcon(this.id);
     this.searchResultsA11yText = createEl(
       "span",
       { class: "iti__a11y-text" },
@@ -2556,91 +2477,496 @@ var Iti = class _Iti {
     this.searchNoResults = createEl(
       "div",
       {
-        class: "iti__no-results iti__hide",
-        "aria-hidden": "true"
+        class: `iti__no-results ${CLASSES.HIDE}`,
+        [ARIA.HIDDEN]: "true"
         // all a11y messaging happens in this.searchResultsA11yText
       },
       this.dropdownContent
     );
-    this.searchNoResults.textContent = i18n.zeroSearchResults;
+    this.searchNoResults.textContent = i18n.zeroSearchResults;
+  }
+  _maybeUpdateInputPaddingAndReveal() {
+    if (this.countryContainer) {
+      this.updateInputPadding();
+      this.countryContainer.classList.remove(CLASSES.V_HIDE);
+    }
+  }
+  _maybeBuildHiddenInputs(wrapper) {
+    const { hiddenInput } = this.options;
+    if (hiddenInput) {
+      const telInputName = this.telInput.getAttribute("name") || "";
+      const names = hiddenInput(telInputName);
+      if (names.phone) {
+        const existingInput = this.telInput.form?.querySelector(
+          `input[name="${names.phone}"]`
+        );
+        if (existingInput) {
+          this.hiddenInput = existingInput;
+        } else {
+          this.hiddenInput = createEl("input", {
+            type: "hidden",
+            name: names.phone
+          });
+          wrapper.appendChild(this.hiddenInput);
+        }
+      }
+      if (names.country) {
+        const existingInput = this.telInput.form?.querySelector(
+          `input[name="${names.country}"]`
+        );
+        if (existingInput) {
+          this.hiddenInputCountry = existingInput;
+        } else {
+          this.hiddenInputCountry = createEl("input", {
+            type: "hidden",
+            name: names.country
+          });
+          wrapper.appendChild(this.hiddenInputCountry);
+        }
+      }
+    }
+  }
+  //* For each country: add a country list item <li> to the countryList <ul> container.
+  _appendListItems() {
+    const frag = document.createDocumentFragment();
+    for (let i = 0; i < this.countries.length; i++) {
+      const c = this.countries[i];
+      const liClass = buildClassNames({
+        [CLASSES.COUNTRY_ITEM]: true,
+        [CLASSES.HIGHLIGHT]: i === 0
+      });
+      const listItem = createEl("li", {
+        id: `iti-${this.id}__item-${c.iso2}`,
+        class: liClass,
+        tabindex: "-1",
+        role: "option",
+        [ARIA.SELECTED]: "false"
+      });
+      listItem.dataset.dialCode = c.dialCode;
+      listItem.dataset.countryCode = c.iso2;
+      c.nodeById[this.id] = listItem;
+      if (this.options.showFlags) {
+        createEl("div", { class: `${CLASSES.FLAG} iti__${c.iso2}` }, listItem);
+      }
+      const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
+      nameEl.textContent = c.name;
+      const dialEl = createEl("span", { class: "iti__dial-code" }, listItem);
+      if (this.isRTL) {
+        dialEl.setAttribute("dir", "ltr");
+      }
+      dialEl.textContent = `+${c.dialCode}`;
+      frag.appendChild(listItem);
+    }
+    this.countryList.appendChild(frag);
+  }
+  //* Update the input padding to make space for the selected country/dial code.
+  updateInputPadding() {
+    if (this.selectedCountry) {
+      const fallbackWidth = this.options.separateDialCode ? LAYOUT.SANE_SELECTED_WITH_DIAL_WIDTH : LAYOUT.SANE_SELECTED_NO_DIAL_WIDTH;
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || fallbackWidth;
+      const inputPadding = selectedCountryWidth + LAYOUT.INPUT_PADDING_EXTRA_LEFT;
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
+    }
+  }
+  //* 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";
+      body.appendChild(containerClone);
+      const countryContainerClone = this.countryContainer.cloneNode();
+      containerClone.appendChild(countryContainerClone);
+      const selectedCountryClone = this.selectedCountry.cloneNode(
+        true
+      );
+      countryContainerClone.appendChild(selectedCountryClone);
+      const width = selectedCountryClone.offsetWidth;
+      body.removeChild(containerClone);
+      return width;
+    }
+    return 0;
+  }
+  //* Update search results text (for a11y).
+  updateSearchResultsA11yText() {
+    const { i18n } = this.options;
+    const count = this.countryList.childElementCount;
+    let searchText;
+    if (count === 0) {
+      searchText = i18n.zeroSearchResults;
+    } else {
+      if (i18n.searchResultsText) {
+        searchText = i18n.searchResultsText(count);
+      } else if (count === 1) {
+        searchText = i18n.oneSearchResult;
+      } else {
+        searchText = i18n.multipleSearchResults.replace(
+          "${count}",
+          count.toString()
+        );
+      }
+    }
+    this.searchResultsA11yText.textContent = searchText;
+  }
+  //* Check if an element is visible within it's container, else scroll until it is.
+  scrollTo(element) {
+    const container = this.countryList;
+    const scrollTop = document.documentElement.scrollTop;
+    const containerHeight = container.offsetHeight;
+    const containerTop = container.getBoundingClientRect().top + scrollTop;
+    const containerBottom = containerTop + containerHeight;
+    const elementHeight = element.offsetHeight;
+    const elementTop = element.getBoundingClientRect().top + scrollTop;
+    const elementBottom = elementTop + elementHeight;
+    const newScrollTop = elementTop - containerTop + container.scrollTop;
+    if (elementTop < containerTop) {
+      container.scrollTop = newScrollTop;
+    } else if (elementBottom > containerBottom) {
+      const heightDifference = containerHeight - elementHeight;
+      container.scrollTop = newScrollTop - heightDifference;
+    }
+  }
+  //* Remove highlighting from other list items and highlight the given item.
+  highlightListItem(listItem, shouldFocus) {
+    const prevItem = this.highlightedItem;
+    if (prevItem) {
+      prevItem.classList.remove(CLASSES.HIGHLIGHT);
+      prevItem.setAttribute(ARIA.SELECTED, "false");
+    }
+    this.highlightedItem = listItem;
+    if (this.highlightedItem) {
+      this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
+      this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
+      if (this.options.countrySearch) {
+        const activeDescendant = this.highlightedItem.getAttribute("id") || "";
+        this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
+      }
+    }
+    if (shouldFocus) {
+      this.highlightedItem.focus();
+    }
+  }
+  //* Country search: Filter the country list to the given array of countries.
+  filterCountries(matchedCountries) {
+    this.countryList.innerHTML = "";
+    let noCountriesAddedYet = true;
+    for (const c of matchedCountries) {
+      const listItem = c.nodeById[this.id];
+      if (listItem) {
+        this.countryList.appendChild(listItem);
+        if (noCountriesAddedYet) {
+          this.highlightListItem(listItem, false);
+          noCountriesAddedYet = false;
+        }
+      }
+    }
+    if (noCountriesAddedYet) {
+      this.highlightListItem(null, false);
+      if (this.searchNoResults) {
+        this.searchNoResults.classList.remove(CLASSES.HIDE);
+      }
+    } else if (this.searchNoResults) {
+      this.searchNoResults.classList.add(CLASSES.HIDE);
+    }
+    this.countryList.scrollTop = 0;
+    this.updateSearchResultsA11yText();
+  }
+  destroy() {
+    this.telInput.iti = void 0;
+    delete this.telInput.dataset.intlTelInputId;
+    if (this.options.separateDialCode) {
+      this.telInput.style.paddingLeft = this.originalPaddingLeft;
+    }
+    const wrapper = this.telInput.parentNode;
+    wrapper.before(this.telInput);
+    wrapper.remove();
+    this.telInput = null;
+    this.countryContainer = null;
+    this.selectedCountry = null;
+    this.selectedCountryInner = null;
+    this.selectedDialCode = null;
+    this.dropdownArrow = null;
+    this.dropdownContent = null;
+    this.searchInput = null;
+    this.searchIcon = null;
+    this.searchClearButton = null;
+    this.searchNoResults = null;
+    this.searchResultsA11yText = null;
+    this.countryList = null;
+    this.dropdown = null;
+    this.hiddenInput = null;
+    this.hiddenInputCountry = null;
+    this.highlightedItem = null;
+    for (const c of this.countries) {
+      delete c.nodeById[this.id];
+    }
+    this.countries = null;
+  }
+};
+
+// src/js/modules/data/country-data.ts
+var processAllCountries = (options) => {
+  const { onlyCountries, excludeCountries } = options;
+  if (onlyCountries.length) {
+    const lowerCaseOnlyCountries = onlyCountries.map(
+      (country) => country.toLowerCase()
+    );
+    return data_default.filter(
+      (country) => lowerCaseOnlyCountries.includes(country.iso2)
+    );
+  } else if (excludeCountries.length) {
+    const lowerCaseExcludeCountries = excludeCountries.map(
+      (country) => country.toLowerCase()
+    );
+    return data_default.filter(
+      (country) => !lowerCaseExcludeCountries.includes(country.iso2)
+    );
+  }
+  return data_default;
+};
+var translateCountryNames = (countries, options) => {
+  for (const c of countries) {
+    const iso2 = c.iso2.toLowerCase();
+    if (options.i18n[iso2]) {
+      c.name = options.i18n[iso2];
+    }
+  }
+};
+var processDialCodes = (countries, options) => {
+  const dialCodes = /* @__PURE__ */ new Set();
+  let dialCodeMaxLen = 0;
+  const dialCodeToIso2Map = {};
+  const _addToDialCodeMap = (iso2, dialCode, priority) => {
+    if (!iso2 || !dialCode) {
+      return;
+    }
+    if (dialCode.length > dialCodeMaxLen) {
+      dialCodeMaxLen = dialCode.length;
+    }
+    if (!dialCodeToIso2Map.hasOwnProperty(dialCode)) {
+      dialCodeToIso2Map[dialCode] = [];
+    }
+    const iso2List = dialCodeToIso2Map[dialCode];
+    if (iso2List.includes(iso2)) {
+      return;
+    }
+    const index = priority !== void 0 ? priority : iso2List.length;
+    iso2List[index] = iso2;
+  };
+  for (const c of countries) {
+    if (!dialCodes.has(c.dialCode)) {
+      dialCodes.add(c.dialCode);
+    }
+    for (let k = 1; k < c.dialCode.length; k++) {
+      const partialDialCode = c.dialCode.substring(0, k);
+      _addToDialCodeMap(c.iso2, partialDialCode);
+    }
+    _addToDialCodeMap(c.iso2, c.dialCode, c.priority);
+  }
+  if (options.onlyCountries.length || options.excludeCountries.length) {
+    dialCodes.forEach((dialCode) => {
+      dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
+    });
+  }
+  for (const c of countries) {
+    if (c.areaCodes) {
+      const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
+      for (const areaCode of c.areaCodes) {
+        for (let k = 1; k < areaCode.length; k++) {
+          const partialAreaCode = areaCode.substring(0, k);
+          const partialDialCode = c.dialCode + partialAreaCode;
+          _addToDialCodeMap(rootIso2Code, partialDialCode);
+          _addToDialCodeMap(c.iso2, partialDialCode);
+        }
+        _addToDialCodeMap(c.iso2, c.dialCode + areaCode);
+      }
+    }
+  }
+  return { dialCodes, dialCodeMaxLen, dialCodeToIso2Map };
+};
+var sortCountries = (countries, options) => {
+  if (options.countryOrder) {
+    options.countryOrder = options.countryOrder.map(
+      (iso2) => iso2.toLowerCase()
+    );
+  }
+  countries.sort((a, b) => {
+    const { countryOrder } = options;
+    if (countryOrder) {
+      const aIndex = countryOrder.indexOf(a.iso2);
+      const bIndex = countryOrder.indexOf(b.iso2);
+      const aIndexExists = aIndex > -1;
+      const bIndexExists = bIndex > -1;
+      if (aIndexExists || bIndexExists) {
+        if (aIndexExists && bIndexExists) {
+          return aIndex - bIndex;
+        }
+        return aIndexExists ? -1 : 1;
+      }
+    }
+    return a.name.localeCompare(b.name);
+  });
+};
+var cacheSearchTokens = (countries) => {
+  for (const c of countries) {
+    c.normalisedName = normaliseString(c.name);
+    c.initials = c.normalisedName.split(/[^a-z]/).map((word) => word[0]).join("");
+    c.dialCodePlus = `+${c.dialCode}`;
+  }
+};
+
+// src/js/modules/format/formatting.ts
+var beforeSetNumber = (fullNumber, dialCode, separateDialCode, selectedCountryData) => {
+  let number = fullNumber;
+  if (separateDialCode) {
+    if (dialCode) {
+      dialCode = `+${selectedCountryData.dialCode}`;
+      const start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
+      number = number.substring(start);
+    }
+  }
+  return number;
+};
+var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) => {
+  const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData.iso2) : fullNumber;
+  const { dialCode } = selectedCountryData;
+  if (separateDialCode && telInputValue.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
+    const afterDialCode = result.split(`+${dialCode}`)[1] || "";
+    return afterDialCode.trim();
+  }
+  return result;
+};
+
+// src/js/modules/format/caret.ts
+var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
+  if (prevCaretPos === 0 && !isDeleteForwards) {
+    return 0;
+  }
+  let relevantCharCount = 0;
+  for (let i = 0; i < formattedValue.length; i++) {
+    if (/[+0-9]/.test(formattedValue[i])) {
+      relevantCharCount++;
+    }
+    if (relevantCharCount === relevantChars && !isDeleteForwards) {
+      return i + 1;
+    }
+    if (isDeleteForwards && relevantCharCount === relevantChars + 1) {
+      return i;
+    }
+  }
+  return formattedValue.length;
+};
+
+// src/js/modules/data/nanp-regionless.ts
+var regionlessNanpNumbers = [
+  "800",
+  "822",
+  "833",
+  "844",
+  "855",
+  "866",
+  "877",
+  "880",
+  "881",
+  "882",
+  "883",
+  "884",
+  "885",
+  "886",
+  "887",
+  "888",
+  "889"
+];
+var isRegionlessNanp = (number) => {
+  const numeric = getNumeric(number);
+  if (numeric.startsWith(DIAL.NANP) && numeric.length >= 4) {
+    const areaCode = numeric.substring(1, 4);
+    return regionlessNanpNumbers.includes(areaCode);
+  }
+  return false;
+};
+
+// src/js/intl-tel-input.ts
+for (const c of data_default) {
+  c.name = en_default[c.iso2];
+}
+var id = 0;
+var iso2Set = new Set(data_default.map((c) => c.iso2));
+var isIso2 = (val) => iso2Set.has(val);
+var Iti = class _Iti {
+  constructor(input, customOptions = {}) {
+    this.id = id++;
+    this.options = { ...defaults, ...customOptions };
+    applyOptionSideEffects(this.options, en_default);
+    this.ui = new UI(input, this.options, this.id);
+    this.isAndroid = _Iti._getIsAndroid();
+    this.promise = this._createInitPromises();
+    this.countries = processAllCountries(this.options);
+    const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(
+      this.countries,
+      this.options
+    );
+    this.dialCodes = dialCodes;
+    this.dialCodeMaxLen = dialCodeMaxLen;
+    this.dialCodeToIso2Map = dialCodeToIso2Map;
+    this.countryByIso2 = new Map(this.countries.map((c) => [c.iso2, c]));
+    this._init();
   }
-  _maybeUpdateInputPaddingAndReveal() {
-    if (this.countryContainer) {
-      this._updateInputPadding();
-      this.countryContainer.classList.remove("iti__v-hide");
-    }
+  static _getIsAndroid() {
+    return typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
   }
-  _maybeBuildHiddenInputs(wrapper) {
-    const { hiddenInput } = this.options;
-    if (hiddenInput) {
-      const telInputName = this.telInput.getAttribute("name") || "";
-      const names = hiddenInput(telInputName);
-      if (names.phone) {
-        const existingInput = this.telInput.form?.querySelector(`input[name="${names.phone}"]`);
-        if (existingInput) {
-          this.hiddenInput = existingInput;
-        } else {
-          this.hiddenInput = createEl("input", {
-            type: "hidden",
-            name: names.phone
-          });
-          wrapper.appendChild(this.hiddenInput);
-        }
-      }
-      if (names.country) {
-        const existingInput = this.telInput.form?.querySelector(`input[name="${names.country}"]`);
-        if (existingInput) {
-          this.hiddenInputCountry = existingInput;
-        } else {
-          this.hiddenInputCountry = createEl("input", {
-            type: "hidden",
-            name: names.country
-          });
-          wrapper.appendChild(this.hiddenInputCountry);
-        }
-      }
-    }
+  _createInitPromises() {
+    const autoCountryPromise = new Promise((resolve, reject) => {
+      this.resolveAutoCountryPromise = resolve;
+      this.rejectAutoCountryPromise = reject;
+    });
+    const utilsScriptPromise = new Promise((resolve, reject) => {
+      this.resolveUtilsScriptPromise = resolve;
+      this.rejectUtilsScriptPromise = reject;
+    });
+    return Promise.all([autoCountryPromise, utilsScriptPromise]);
   }
-  //* For each country: add a country list item <li> to the countryList <ul> container.
-  _appendListItems() {
-    for (let i = 0; i < this.countries.length; i++) {
-      const c = this.countries[i];
-      const extraClass = i === 0 ? "iti__highlight" : "";
-      const listItem = createEl(
-        "li",
-        {
-          id: `iti-${this.id}__item-${c.iso2}`,
-          class: `iti__country ${extraClass}`,
-          tabindex: "-1",
-          role: "option",
-          "data-dial-code": c.dialCode,
-          "data-country-code": c.iso2,
-          "aria-selected": "false"
-        },
-        this.countryList
-      );
-      c.nodeById[this.id] = listItem;
-      let content = "";
-      if (this.options.showFlags) {
-        content += `<div class='iti__flag iti__${c.iso2}'></div>`;
-      }
-      content += `<span class='iti__country-name'>${c.name}</span>`;
-      content += `<span class='iti__dial-code' dir='ltr'>+${c.dialCode}</span>`;
-      listItem.insertAdjacentHTML("beforeend", content);
-    }
+  //* Can't be private as it's called from intlTelInput convenience wrapper.
+  _init() {
+    this.selectedCountryData = {};
+    this.abortController = new AbortController();
+    this._processCountryData();
+    this.ui.generateMarkup(this.countries);
+    this._setInitialState();
+    this._initListeners();
+    this._initRequests();
+  }
+  //********************
+  //*  PRIVATE METHODS
+  //********************
+  //* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
+  _processCountryData() {
+    translateCountryNames(this.countries, this.options);
+    sortCountries(this.countries, this.options);
+    cacheSearchTokens(this.countries);
   }
   //* Set the initial state of the input value and the selected country by:
   //* 1. Extracting a dial code from the given number
   //* 2. Using explicit initialCountry
   _setInitialState(overrideAutoCountry = false) {
-    const attributeValue = this.telInput.getAttribute("value");
-    const inputValue = this.telInput.value;
-    const useAttribute = attributeValue && attributeValue.charAt(0) === "+" && (!inputValue || inputValue.charAt(0) !== "+");
+    const attributeValue = this.ui.telInput.getAttribute("value");
+    const inputValue = this.ui.telInput.value;
+    const useAttribute = attributeValue && attributeValue.startsWith("+") && (!inputValue || !inputValue.startsWith("+"));
     const val = useAttribute ? attributeValue : inputValue;
     const dialCode = this._getDialCode(val);
     const isRegionlessNanpNumber = isRegionlessNanp(val);
     const { initialCountry, geoIpLookup } = this.options;
-    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
+    const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
     if (dialCode && !isRegionlessNanpNumber) {
       this._updateCountryFromNumber(val);
     } else if (!isAutoCountry || overrideAutoCountry) {
@@ -2649,7 +2975,7 @@ var Iti = class _Iti {
         this._setCountry(lowerInitialCountry);
       } else {
         if (dialCode && isRegionlessNanpNumber) {
-          this._setCountry("us");
+          this._setCountry(US.ISO2);
         } else {
           this._setCountry("");
         }
@@ -2665,81 +2991,94 @@ var Iti = class _Iti {
     if (this.options.allowDropdown) {
       this._initDropdownListeners();
     }
-    if ((this.hiddenInput || this.hiddenInputCountry) && this.telInput.form) {
+    if ((this.ui.hiddenInput || this.ui.hiddenInputCountry) && this.ui.telInput.form) {
       this._initHiddenInputListener();
     }
   }
   //* Update hidden input on form submit.
   _initHiddenInputListener() {
-    this._handleHiddenInputSubmit = () => {
-      if (this.hiddenInput) {
-        this.hiddenInput.value = this.getNumber();
+    const handleHiddenInputSubmit = () => {
+      if (this.ui.hiddenInput) {
+        this.ui.hiddenInput.value = this.getNumber();
       }
-      if (this.hiddenInputCountry) {
-        this.hiddenInputCountry.value = this.getSelectedCountryData().iso2 || "";
+      if (this.ui.hiddenInputCountry) {
+        this.ui.hiddenInputCountry.value = this.selectedCountryData.iso2 || "";
       }
     };
-    this.telInput.form?.addEventListener(
-      "submit",
-      this._handleHiddenInputSubmit
-    );
+    this.ui.telInput.form?.addEventListener("submit", handleHiddenInputSubmit, {
+      signal: this.abortController.signal
+    });
   }
   //* initialise the dropdown listeners.
   _initDropdownListeners() {
-    this._handleLabelClick = (e) => {
-      if (this.dropdownContent.classList.contains("iti__hide")) {
-        this.telInput.focus();
+    const signal = this.abortController.signal;
+    const handleLabelClick = (e) => {
+      if (this.ui.dropdownContent.classList.contains(CLASSES.HIDE)) {
+        this.ui.telInput.focus();
       } else {
         e.preventDefault();
       }
     };
-    const label = this.telInput.closest("label");
+    const label = this.ui.telInput.closest("label");
     if (label) {
-      label.addEventListener("click", this._handleLabelClick);
+      label.addEventListener("click", handleLabelClick, { signal });
     }
-    this._handleClickSelectedCountry = () => {
-      const dropdownClosed = this.dropdownContent.classList.contains("iti__hide");
-      if (dropdownClosed && !this.telInput.disabled && !this.telInput.readOnly) {
+    const handleClickSelectedCountry = () => {
+      const dropdownClosed = this.ui.dropdownContent.classList.contains(
+        CLASSES.HIDE
+      );
+      if (dropdownClosed && !this.ui.telInput.disabled && !this.ui.telInput.readOnly) {
         this._openDropdown();
       }
     };
-    this.selectedCountry.addEventListener("click", this._handleClickSelectedCountry);
-    this._handleCountryContainerKeydown = (e) => {
-      const isDropdownHidden = this.dropdownContent.classList.contains("iti__hide");
-      if (isDropdownHidden && ["ArrowUp", "ArrowDown", " ", "Enter"].includes(e.key)) {
+    this.ui.selectedCountry.addEventListener(
+      "click",
+      handleClickSelectedCountry,
+      {
+        signal
+      }
+    );
+    const handleCountryContainerKeydown = (e) => {
+      const isDropdownHidden = this.ui.dropdownContent.classList.contains(
+        CLASSES.HIDE
+      );
+      if (isDropdownHidden && [KEYS.ARROW_UP, KEYS.ARROW_DOWN, KEYS.SPACE, KEYS.ENTER].includes(e.key)) {
         e.preventDefault();
         e.stopPropagation();
         this._openDropdown();
       }
-      if (e.key === "Tab") {
+      if (e.key === KEYS.TAB) {
         this._closeDropdown();
       }
     };
-    this.countryContainer.addEventListener(
+    this.ui.countryContainer.addEventListener(
       "keydown",
-      this._handleCountryContainerKeydown
+      handleCountryContainerKeydown,
+      { signal }
     );
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    let { loadUtils, initialCountry, geoIpLookup } = this.options;
+    const { loadUtils, initialCountry, geoIpLookup } = this.options;
     if (loadUtils && !intlTelInput.utils) {
-      this._doAttachUtils = () => {
+      const doAttachUtils = () => {
         intlTelInput.attachUtils(loadUtils)?.catch(() => {
         });
       };
       if (intlTelInput.documentReady()) {
-        this._doAttachUtils();
+        doAttachUtils();
       } else {
-        this._handlePageLoad = () => {
-          this._doAttachUtils();
+        const handlePageLoad = () => {
+          doAttachUtils();
         };
-        window.addEventListener("load", this._handlePageLoad);
+        window.addEventListener("load", handlePageLoad, {
+          signal: this.abortController.signal
+        });
       }
     } else {
       this.resolveUtilsScriptPromise();
     }
-    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
+    const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
     if (isAutoCountry && !this.selectedCountryData.iso2) {
       this._loadAutoCountry();
     } else {
@@ -2774,8 +3113,8 @@ var Iti = class _Iti {
   }
   _openDropdownWithPlus() {
     this._openDropdown();
-    this.searchInput.value = "+";
-    this._filterCountries("");
+    this.ui.searchInput.value = "+";
+    this._filterCountriesByQuery("");
   }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
@@ -2784,55 +3123,81 @@ var Iti = class _Iti {
     this._maybeBindPasteListener();
   }
   _bindInputListener() {
-    const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
+    const {
+      strictMode,
+      formatAsYouType,
+      separateDialCode,
+      allowDropdown,
+      countrySearch
+    } = this.options;
     let userOverrideFormatting = false;
-    if (/\p{L}/u.test(this.telInput.value)) {
+    if (REGEX.ALPHA_UNICODE.test(this.ui.telInput.value)) {
       userOverrideFormatting = true;
     }
-    this._handleInputEvent = (e) => {
+    const handleInputEvent = (e) => {
       if (this.isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
-        const currentCaretPos = this.telInput.selectionStart || 0;
-        const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos - 1);
-        const valueAfterCaret = this.telInput.value.substring(currentCaretPos);
-        this.telInput.value = valueBeforeCaret + valueAfterCaret;
+        const currentCaretPos = this.ui.telInput.selectionStart || 0;
+        const valueBeforeCaret = this.ui.telInput.value.substring(
+          0,
+          currentCaretPos - 1
+        );
+        const valueAfterCaret = this.ui.telInput.value.substring(currentCaretPos);
+        this.ui.telInput.value = valueBeforeCaret + valueAfterCaret;
         this._openDropdownWithPlus();
         return;
       }
-      if (this._updateCountryFromNumber(this.telInput.value)) {
+      if (this._updateCountryFromNumber(this.ui.telInput.value)) {
         this._triggerCountryChange();
       }
-      const isFormattingChar = e?.data && /[^+0-9]/.test(e.data);
-      const isPaste = e?.inputType === "insertFromPaste" && this.telInput.value;
+      const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
+      const isPaste = e?.inputType === INPUT_TYPES.PASTE && this.ui.telInput.value;
       if (isFormattingChar || isPaste && !strictMode) {
         userOverrideFormatting = true;
-      } else if (!/[^+0-9]/.test(this.telInput.value)) {
+      } else if (!REGEX.NON_PLUS_NUMERIC.test(this.ui.telInput.value)) {
         userOverrideFormatting = false;
       }
       const isSetNumber = e?.detail && e.detail["isSetNumber"];
       if (formatAsYouType && !userOverrideFormatting && !isSetNumber) {
-        const currentCaretPos = this.telInput.selectionStart || 0;
-        const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
-        const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
-        const isDeleteForwards = e?.inputType === "deleteContentForward";
+        const currentCaretPos = this.ui.telInput.selectionStart || 0;
+        const valueBeforeCaret = this.ui.telInput.value.substring(
+          0,
+          currentCaretPos
+        );
+        const relevantCharsBeforeCaret = valueBeforeCaret.replace(
+          REGEX.NON_PLUS_NUMERIC_GLOBAL,
+          ""
+        ).length;
+        const isDeleteForwards = e?.inputType === INPUT_TYPES.DELETE_FWD;
         const fullNumber = this._getFullNumber();
         const formattedValue = formatNumberAsYouType(
           fullNumber,
-          this.telInput.value,
+          this.ui.telInput.value,
           intlTelInput.utils,
           this.selectedCountryData,
           this.options.separateDialCode
         );
-        const newCaretPos = translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
-        this.telInput.value = formattedValue;
-        this.telInput.setSelectionRange(newCaretPos, newCaretPos);
+        const newCaretPos = translateCursorPosition(
+          relevantCharsBeforeCaret,
+          formattedValue,
+          currentCaretPos,
+          isDeleteForwards
+        );
+        this.ui.telInput.value = formattedValue;
+        this.ui.telInput.setSelectionRange(newCaretPos, newCaretPos);
       }
     };
-    this.telInput.addEventListener("input", this._handleInputEvent);
+    this.ui.telInput.addEventListener(
+      "input",
+      handleInputEvent,
+      {
+        signal: this.abortController.signal
+      }
+    );
   }
   _maybeBindKeydownListener() {
     const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.options;
     if (strictMode || separateDialCode) {
-      this._handleKeydownEvent = (e) => {
+      const handleKeydownEvent = (e) => {
         if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
           if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
             e.preventDefault();
@@ -2840,14 +3205,17 @@ var Iti = class _Iti {
             return;
           }
           if (strictMode) {
-            const value = this.telInput.value;
-            const alreadyHasPlus = value.charAt(0) === "+";
-            const isInitialPlus = !alreadyHasPlus && this.telInput.selectionStart === 0 && e.key === "+";
+            const value = this.ui.telInput.value;
+            const alreadyHasPlus = value.startsWith("+");
+            const isInitialPlus = !alreadyHasPlus && this.ui.telInput.selectionStart === 0 && e.key === "+";
             const isNumeric = /^[0-9]$/.test(e.key);
             const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-            const newValue = value.slice(0, this.telInput.selectionStart) + e.key + value.slice(this.telInput.selectionEnd);
+            const newValue = value.slice(0, this.ui.telInput.selectionStart) + e.key + value.slice(this.ui.telInput.selectionEnd);
             const newFullNumber = this._getFullNumber(newValue);
-            const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
+            const coreNumber = intlTelInput.utils.getCoreNumber(
+              newFullNumber,
+              this.selectedCountryData.iso2
+            );
             const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
             const newCountry = this._getNewCountryFromNumber(newFullNumber);
             const isChangingDialCode = newCountry !== null;
@@ -2857,14 +3225,16 @@ var Iti = class _Iti {
           }
         }
       };
-      this.telInput.addEventListener("keydown", this._handleKeydownEvent);
+      this.ui.telInput.addEventListener("keydown", handleKeydownEvent, {
+        signal: this.abortController.signal
+      });
     }
   }
   _maybeBindPasteListener() {
     if (this.options.strictMode) {
-      this._handlePasteEvent = (e) => {
+      const handlePasteEvent = (e) => {
         e.preventDefault();
-        const input = this.telInput;
+        const input = this.ui.telInput;
         const selStart = input.selectionStart;
         const selEnd = input.selectionEnd;
         const before = input.value.slice(0, selStart);
@@ -2873,7 +3243,7 @@ var Iti = class _Iti {
         const pasted = e.clipboardData.getData("text");
         const initialCharSelected = selStart === 0 && selEnd > 0;
         const allowLeadingPlus = !input.value.startsWith("+") || initialCharSelected;
-        const allowedChars = pasted.replace(/[^0-9+]/g, "");
+        const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
         const hasLeadingPlus = allowedChars.startsWith("+");
         const numerics = allowedChars.replace(/\+/g, "");
         const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
@@ -2899,82 +3269,117 @@ var Iti = class _Iti {
         input.setSelectionRange(caretPos, caretPos);
         input.dispatchEvent(new InputEvent("input", { bubbles: true }));
       };
-      this.telInput.addEventListener("paste", this._handlePasteEvent);
+      this.ui.telInput.addEventListener("paste", handlePasteEvent, {
+        signal: this.abortController.signal
+      });
     }
   }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
-    const max = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
+    const max = Number(this.ui.telInput.getAttribute("maxlength"));
     return max && number.length > max ? number.substring(0, max) : number;
   }
-  //* Trigger a custom event on the input.
+  //* Trigger a custom event on the input (typed via ItiEventMap).
   _trigger(name, detailProps = {}) {
     const e = new CustomEvent(name, {
       bubbles: true,
       cancelable: true,
       detail: detailProps
     });
-    this.telInput.dispatchEvent(e);
+    this.ui.telInput.dispatchEvent(e);
   }
   //* Open the dropdown.
   _openDropdown() {
     const { fixDropdownWidth, countrySearch } = this.options;
+    this.dropdownAbortController = new AbortController();
     if (fixDropdownWidth) {
-      this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
+      this.ui.dropdownContent.style.width = `${this.ui.telInput.offsetWidth}px`;
     }
-    this.dropdownContent.classList.remove("iti__hide");
-    this.selectedCountry.setAttribute("aria-expanded", "true");
+    this.ui.dropdownContent.classList.remove(CLASSES.HIDE);
+    this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "true");
     this._setDropdownPosition();
     if (countrySearch) {
-      const firstCountryItem = this.countryList.firstElementChild;
+      const firstCountryItem = this.ui.countryList.firstElementChild;
       if (firstCountryItem) {
-        this._highlightListItem(firstCountryItem, false);
-        this.countryList.scrollTop = 0;
+        this.ui.highlightListItem(firstCountryItem, false);
+        this.ui.countryList.scrollTop = 0;
       }
-      this.searchInput.focus();
+      this.ui.searchInput.focus();
     }
     this._bindDropdownListeners();
-    this.dropdownArrow.classList.add("iti__arrow--up");
-    this._trigger("open:countrydropdown");
+    this.ui.dropdownArrow.classList.add(CLASSES.ARROW_UP);
+    this._trigger(EVENTS.OPEN_COUNTRY_DROPDOWN);
   }
   //* Set the dropdown position
   _setDropdownPosition() {
     if (this.options.dropdownContainer) {
-      this.options.dropdownContainer.appendChild(this.dropdown);
+      this.options.dropdownContainer.appendChild(this.ui.dropdown);
     }
     if (!this.options.useFullscreenPopup) {
-      const inputPosRelativeToVP = this.telInput.getBoundingClientRect();
-      const inputHeight = this.telInput.offsetHeight;
+      const inputPosRelativeToVP = this.ui.telInput.getBoundingClientRect();
+      const inputHeight = this.ui.telInput.offsetHeight;
       if (this.options.dropdownContainer) {
-        this.dropdown.style.top = `${inputPosRelativeToVP.top + inputHeight}px`;
-        this.dropdown.style.left = `${inputPosRelativeToVP.left}px`;
-        this._handleWindowScroll = () => this._closeDropdown();
-        window.addEventListener("scroll", this._handleWindowScroll);
+        this.ui.dropdown.style.top = `${inputPosRelativeToVP.top + inputHeight}px`;
+        this.ui.dropdown.style.left = `${inputPosRelativeToVP.left}px`;
+        const handleWindowScroll = () => this._closeDropdown();
+        window.addEventListener("scroll", handleWindowScroll, {
+          signal: this.dropdownAbortController.signal
+        });
       }
     }
   }
   //* We only bind dropdown listeners when the dropdown is open.
   _bindDropdownListeners() {
-    this._handleMouseoverCountryList = (e) => {
-      const listItem = e.target?.closest(".iti__country");
+    const signal = this.dropdownAbortController.signal;
+    this._bindDropdownMouseoverListener(signal);
+    this._bindDropdownCountryClickListener(signal);
+    this._bindDropdownClickOffListener(signal);
+    this._bindDropdownKeydownListener(signal);
+    if (this.options.countrySearch) {
+      this._bindDropdownSearchListeners(signal);
+    }
+  }
+  //* When mouse over a list item, just highlight that one
+  //* we add the class "highlight", so if they hit "enter" we know which one to select.
+  _bindDropdownMouseoverListener(signal) {
+    const handleMouseoverCountryList = (e) => {
+      const listItem = e.target?.closest(
+        `.${CLASSES.COUNTRY_ITEM}`
+      );
       if (listItem) {
-        this._highlightListItem(listItem, false);
+        this.ui.highlightListItem(listItem, false);
       }
     };
-    this.countryList.addEventListener(
+    this.ui.countryList.addEventListener(
       "mouseover",
-      this._handleMouseoverCountryList
+      handleMouseoverCountryList,
+      {
+        signal
+      }
     );
-    this._handleClickCountryList = (e) => {
-      const listItem = e.target?.closest(".iti__country");
+  }
+  //* Listen for country selection.
+  _bindDropdownCountryClickListener(signal) {
+    const handleClickCountryList = (e) => {
+      const listItem = e.target?.closest(
+        `.${CLASSES.COUNTRY_ITEM}`
+      );
       if (listItem) {
         this._selectListItem(listItem);
       }
     };
-    this.countryList.addEventListener("click", this._handleClickCountryList);
-    this._handleClickOffToClose = (e) => {
+    this.ui.countryList.addEventListener("click", handleClickCountryList, {
+      signal
+    });
+  }
+  //* Click off to close (except when this initial opening click is bubbling up).
+  //* We cannot just stopPropagation as it may be needed to close another instance.
+  _bindDropdownClickOffListener(signal) {
+    const handleClickOffToClose = (e) => {
       const target = e.target;
-      const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
+      const clickedInsideDropdown = !!target.closest(
+        `#iti-${this.id}__dropdown-content`
+      );
       if (!clickedInsideDropdown) {
         this._closeDropdown();
       }
@@ -2982,24 +3387,37 @@ var Iti = class _Iti {
     setTimeout(() => {
       document.documentElement.addEventListener(
         "click",
-        this._handleClickOffToClose
+        handleClickOffToClose,
+        { signal }
       );
     }, 0);
+  }
+  //* Listen for up/down scrolling, enter to select, or escape to close.
+  //* Use keydown as keypress doesn't fire for non-char keys and we want to catch if they
+  //* just hit down and hold it to scroll down (no keyup event).
+  //* Listen on the document because that's where key events are triggered if no input has focus.
+  _bindDropdownKeydownListener(signal) {
     let query = "";
     let queryTimer = null;
-    this._handleKeydownOnDropdown = (e) => {
-      if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
+    const handleKeydownOnDropdown = (e) => {
+      const allowedKeys = [
+        KEYS.ARROW_UP,
+        KEYS.ARROW_DOWN,
+        KEYS.ENTER,
+        KEYS.ESC
+      ];
+      if (allowedKeys.includes(e.key)) {
         e.preventDefault();
         e.stopPropagation();
-        if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        if (e.key === KEYS.ARROW_UP || e.key === KEYS.ARROW_DOWN) {
           this._handleUpDownKey(e.key);
-        } else if (e.key === "Enter") {
+        } else if (e.key === KEYS.ENTER) {
           this._handleEnterKey();
-        } else if (e.key === "Escape") {
+        } else if (e.key === KEYS.ESC) {
           this._closeDropdown();
         }
       }
-      if (!this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
+      if (!this.options.countrySearch && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
         e.stopPropagation();
         if (queryTimer) {
           clearTimeout(queryTimer);
@@ -3008,147 +3426,78 @@ var Iti = class _Iti {
         this._searchForCountry(query);
         queryTimer = setTimeout(() => {
           query = "";
-        }, 1e3);
+        }, TIMINGS.HIDDEN_SEARCH_RESET_MS);
       }
     };
-    document.addEventListener("keydown", this._handleKeydownOnDropdown);
-    if (this.options.countrySearch) {
-      const doFilter = () => {
-        const inputQuery = this.searchInput.value.trim();
-        this._filterCountries(inputQuery);
-        if (this.searchInput.value) {
-          this.searchClearButton.classList.remove("iti__hide");
-        } else {
-          this.searchClearButton.classList.add("iti__hide");
-        }
-      };
-      let keyupTimer = null;
-      this._handleSearchChange = () => {
-        if (keyupTimer) {
-          clearTimeout(keyupTimer);
-        }
-        keyupTimer = setTimeout(() => {
-          doFilter();
-          keyupTimer = null;
-        }, 100);
-      };
-      this.searchInput.addEventListener("input", this._handleSearchChange);
-      this._handleSearchClear = () => {
-        this.searchInput.value = "";
-        this.searchInput.focus();
+    document.addEventListener("keydown", handleKeydownOnDropdown, { signal });
+  }
+  //* Search input listeners when countrySearch enabled.
+  _bindDropdownSearchListeners(signal) {
+    const doFilter = () => {
+      const inputQuery = this.ui.searchInput.value.trim();
+      this._filterCountriesByQuery(inputQuery);
+      if (this.ui.searchInput.value) {
+        this.ui.searchClearButton.classList.remove(CLASSES.HIDE);
+      } else {
+        this.ui.searchClearButton.classList.add(CLASSES.HIDE);
+      }
+    };
+    let keyupTimer = null;
+    const handleSearchChange = () => {
+      if (keyupTimer) {
+        clearTimeout(keyupTimer);
+      }
+      keyupTimer = setTimeout(() => {
         doFilter();
-      };
-      this.searchClearButton.addEventListener("click", this._handleSearchClear);
-    }
+        keyupTimer = null;
+      }, 100);
+    };
+    this.ui.searchInput.addEventListener("input", handleSearchChange, {
+      signal
+    });
+    const handleSearchClear = () => {
+      this.ui.searchInput.value = "";
+      this.ui.searchInput.focus();
+      doFilter();
+    };
+    this.ui.searchClearButton.addEventListener("click", handleSearchClear, {
+      signal
+    });
   }
   //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
   _searchForCountry(query) {
-    for (const c of this.countries) {
-      const startsWith = c.name.substring(0, query.length).toLowerCase() === query;
-      if (startsWith) {
-        const listItem = c.nodeById[this.id];
-        this._highlightListItem(listItem, false);
-        this._scrollTo(listItem);
-        break;
-      }
+    const match = findFirstCountryStartingWith(this.countries, query);
+    if (match) {
+      const listItem = match.nodeById[this.id];
+      this.ui.highlightListItem(listItem, false);
+      this.ui.scrollTo(listItem);
     }
   }
-  //* Country search enabled: Filter the countries according to the search query.
-  _filterCountries(query) {
-    this.countryList.innerHTML = "";
+  //* Country search: Filter the countries according to the search query.
+  _filterCountriesByQuery(query) {
     let matchedCountries;
     if (query === "") {
       matchedCountries = this.countries;
     } else {
-      matchedCountries = this._getMatchedCountries(query);
-    }
-    let noCountriesAddedYet = true;
-    for (const c of matchedCountries) {
-      const listItem = c.nodeById[this.id];
-      if (listItem) {
-        this.countryList.appendChild(listItem);
-        if (noCountriesAddedYet) {
-          this._highlightListItem(listItem, false);
-          noCountriesAddedYet = false;
-        }
-      }
-    }
-    if (noCountriesAddedYet) {
-      this._highlightListItem(null, false);
-      if (this.searchNoResults) {
-        this.searchNoResults.classList.remove("iti__hide");
-      }
-    } else if (this.searchNoResults) {
-      this.searchNoResults.classList.add("iti__hide");
-    }
-    this.countryList.scrollTop = 0;
-    this._updateSearchResultsA11yText();
-  }
-  _getMatchedCountries(query) {
-    const normalisedQuery = normaliseString(query);
-    const iso2Matches = [];
-    const nameStartWith = [];
-    const nameContains = [];
-    const dialCodeMatches = [];
-    const dialCodeContains = [];
-    const initialsMatches = [];
-    for (const c of this.countries) {
-      if (c.iso2 === normalisedQuery) {
-        iso2Matches.push(c);
-      } else if (c.normalisedName.startsWith(normalisedQuery)) {
-        nameStartWith.push(c);
-      } else if (c.normalisedName.includes(normalisedQuery)) {
-        nameContains.push(c);
-      } else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
-        dialCodeMatches.push(c);
-      } else if (c.dialCodePlus.includes(normalisedQuery)) {
-        dialCodeContains.push(c);
-      } else if (c.initials.includes(normalisedQuery)) {
-        initialsMatches.push(c);
-      }
-    }
-    return [
-      ...iso2Matches.sort((a, b) => a.priority - b.priority),
-      ...nameStartWith.sort((a, b) => a.priority - b.priority),
-      ...nameContains.sort((a, b) => a.priority - b.priority),
-      ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
-      ...dialCodeContains.sort((a, b) => a.priority - b.priority),
-      ...initialsMatches.sort((a, b) => a.priority - b.priority)
-    ];
-  }
-  //* Update search results text (for a11y).
-  _updateSearchResultsA11yText() {
-    const { i18n } = this.options;
-    const count = this.countryList.childElementCount;
-    let searchText;
-    if (count === 0) {
-      searchText = i18n.zeroSearchResults;
-    } else {
-      if (i18n.searchResultsText) {
-        searchText = i18n.searchResultsText(count);
-      } else if (count === 1) {
-        searchText = i18n.oneSearchResult;
-      } else {
-        searchText = i18n.multipleSearchResults.replace("${count}", count.toString());
-      }
+      matchedCountries = getMatchedCountries(this.countries, query);
     }
-    this.searchResultsA11yText.textContent = searchText;
+    this.ui.filterCountries(matchedCountries);
   }
   //* Highlight the next/prev item in the list (and ensure it is visible).
   _handleUpDownKey(key) {
-    let next = key === "ArrowUp" ? this.highlightedItem?.previousElementSibling : this.highlightedItem?.nextElementSibling;
-    if (!next && this.countryList.childElementCount > 1) {
-      next = key === "ArrowUp" ? this.countryList.lastElementChild : this.countryList.firstElementChild;
+    let next = key === KEYS.ARROW_UP ? this.ui.highlightedItem?.previousElementSibling : this.ui.highlightedItem?.nextElementSibling;
+    if (!next && this.ui.countryList.childElementCount > 1) {
+      next = key === KEYS.ARROW_UP ? this.ui.countryList.lastElementChild : this.ui.countryList.firstElementChild;
     }
     if (next) {
-      this._scrollTo(next);
-      this._highlightListItem(next, false);
+      this.ui.scrollTo(next);
+      this.ui.highlightListItem(next, false);
     }
   }
   //* Select the currently highlighted item.
   _handleEnterKey() {
-    if (this.highlightedItem) {
-      this._selectListItem(this.highlightedItem);
+    if (this.ui.highlightedItem) {
+      this._selectListItem(this.ui.highlightedItem);
     }
   }
   //* Update the input's value to the given val (format first if possible)
@@ -3156,7 +3505,7 @@ var Iti = class _Iti {
   _updateValFromNumber(fullNumber) {
     let number = fullNumber;
     if (this.options.formatOnDisplay && intlTelInput.utils && this.selectedCountryData) {
-      const useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.separateDialCode;
+      const useNational = this.options.nationalMode || !number.startsWith("+") && !this.options.separateDialCode;
       const { NATIONAL, INTERNATIONAL } = intlTelInput.utils.numberFormat;
       const format = useNational ? NATIONAL : INTERNATIONAL;
       number = intlTelInput.utils.formatNumber(
@@ -3166,7 +3515,7 @@ var Iti = class _Iti {
       );
     }
     number = this._beforeSetNumber(number);
-    this.telInput.value = number;
+    this.ui.telInput.value = number;
   }
   //* Check if need to select a new country based on the given number
   //* Note: called from _setInitialState, keyup handler, setNumber.
@@ -3180,11 +3529,11 @@ var Iti = class _Iti {
   // if there is a selected country, and the number doesn't start with a dial code, then add it
   _ensureHasDialCode(number) {
     const { dialCode, nationalPrefix } = this.selectedCountryData;
-    const alreadyHasPlus = number.charAt(0) === "+";
+    const alreadyHasPlus = number.startsWith("+");
     if (alreadyHasPlus || !dialCode) {
       return number;
     }
-    const hasPrefix = nationalPrefix && number.charAt(0) === nationalPrefix && !this.options.separateDialCode;
+    const hasPrefix = nationalPrefix && number.startsWith(nationalPrefix) && !this.options.separateDialCode;
     const cleanNumber = hasPrefix ? number.substring(1) : number;
     return `+${dialCode}${cleanNumber}`;
   }
@@ -3211,13 +3560,15 @@ var Iti = class _Iti {
       if (!selectedIso2 && this.defaultCountry && iso2Codes.includes(this.defaultCountry)) {
         return this.defaultCountry;
       }
-      const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
+      const isRegionlessNanpNumber = selectedDialCode === DIAL.NANP && isRegionlessNanp(numeric);
       if (isRegionlessNanpNumber) {
         return null;
       }
       const { areaCodes, priority } = this.selectedCountryData;
       if (areaCodes) {
-        const dialCodeAreaCodes = areaCodes.map((areaCode) => `${selectedDialCode}${areaCode}`);
+        const dialCodeAreaCodes = areaCodes.map(
+          (areaCode) => `${selectedDialCode}${areaCode}`
+        );
         for (const dialCodeAreaCode of dialCodeAreaCodes) {
           if (numeric.startsWith(dialCodeAreaCode)) {
             return null;
@@ -3231,33 +3582,13 @@ var Iti = class _Iti {
       if (!isValidSelection && !alreadySelected) {
         return iso2Codes[0];
       }
-    } else if (number.charAt(0) === "+" && numeric.length) {
+    } else if (number.startsWith("+") && numeric.length) {
       return "";
     } else if ((!number || number === "+") && !selectedIso2) {
       return this.defaultCountry;
     }
     return null;
   }
-  //* Remove highlighting from other list items and highlight the given item.
-  _highlightListItem(listItem, shouldFocus) {
-    const prevItem = this.highlightedItem;
-    if (prevItem) {
-      prevItem.classList.remove("iti__highlight");
-      prevItem.setAttribute("aria-selected", "false");
-    }
-    this.highlightedItem = listItem;
-    if (this.highlightedItem) {
-      this.highlightedItem.classList.add("iti__highlight");
-      this.highlightedItem.setAttribute("aria-selected", "true");
-      if (this.options.countrySearch) {
-        const activeDescendant = this.highlightedItem.getAttribute("id") || "";
-        this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
-      }
-    }
-    if (shouldFocus) {
-      this.highlightedItem.focus();
-    }
-  }
   //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
@@ -3267,8 +3598,8 @@ var Iti = class _Iti {
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
-    if (this.selectedCountry) {
-      const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
+    if (this.ui.selectedCountry) {
+      const flagClass = iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`;
       let ariaLabel, title;
       if (iso2) {
         const { name, dialCode } = this.selectedCountryData;
@@ -3278,28 +3609,19 @@ var Iti = class _Iti {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
       }
-      this.selectedCountryInner.className = flagClass;
-      this.selectedCountry.setAttribute("title", title);
-      this.selectedCountry.setAttribute("aria-label", ariaLabel);
+      this.ui.selectedCountryInner.className = flagClass;
+      this.ui.selectedCountry.setAttribute("title", title);
+      this.ui.selectedCountry.setAttribute(ARIA.LABEL, ariaLabel);
     }
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
-      this.selectedDialCode.innerHTML = dialCode;
-      this._updateInputPadding();
+      this.ui.selectedDialCode.textContent = dialCode;
+      this.ui.updateInputPadding();
     }
     this._updatePlaceholder();
     this._updateMaxLength();
     return prevIso2 !== iso2;
   }
-  //* Update the input padding to make space for the selected country/dial code.
-  _updateInputPadding() {
-    if (this.selectedCountry) {
-      const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
-      const inputPadding = selectedCountryWidth + 6;
-      this.telInput.style.paddingLeft = `${inputPadding}px`;
-    }
-  }
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberTypes } = this.options;
@@ -3314,7 +3636,11 @@ var Iti = class _Iti {
           true
         );
         let validNumber = exampleNumber;
-        while (intlTelInput.utils.isPossibleNumber(exampleNumber, iso2, validationNumberTypes)) {
+        while (intlTelInput.utils.isPossibleNumber(
+          exampleNumber,
+          iso2,
+          validationNumberTypes
+        )) {
           validNumber = exampleNumber;
           exampleNumber += "0";
         }
@@ -3328,31 +3654,6 @@ var Iti = class _Iti {
       }
     }
   }
-  //* 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";
-      body.appendChild(containerClone);
-      const countryContainerClone = this.countryContainer.cloneNode();
-      containerClone.appendChild(countryContainerClone);
-      const selectedCountryClone = this.selectedCountry.cloneNode(true);
-      countryContainerClone.appendChild(selectedCountryClone);
-      const width = selectedCountryClone.offsetWidth;
-      body.removeChild(containerClone);
-      return width;
-    }
-    return 0;
-  }
   //* Update the input placeholder to an example number from the currently selected country.
   _updatePlaceholder() {
     const {
@@ -3361,7 +3662,7 @@ var Iti = class _Iti {
       nationalMode,
       customPlaceholder
     } = this.options;
-    const shouldSetPlaceholder = autoPlaceholder === "aggressive" || !this.hadInitialPlaceholder && autoPlaceholder === "polite";
+    const shouldSetPlaceholder = autoPlaceholder === "aggressive" || !this.ui.hadInitialPlaceholder && autoPlaceholder === "polite";
     if (intlTelInput.utils && shouldSetPlaceholder) {
       const numberType = intlTelInput.utils.numberType[placeholderNumberType];
       let placeholder = this.selectedCountryData.iso2 ? intlTelInput.utils.getExampleNumber(
@@ -3373,98 +3674,66 @@ var Iti = class _Iti {
       if (typeof customPlaceholder === "function") {
         placeholder = customPlaceholder(placeholder, this.selectedCountryData);
       }
-      this.telInput.setAttribute("placeholder", placeholder);
+      this.ui.telInput.setAttribute("placeholder", placeholder);
     }
   }
   //* Called when the user selects a list item from the dropdown.
   _selectListItem(listItem) {
-    const iso2 = listItem.getAttribute("data-country-code");
+    const iso2 = listItem.dataset[DATA_KEYS.COUNTRY_CODE];
     const countryChanged = this._setCountry(iso2);
     this._closeDropdown();
-    const dialCode = listItem.getAttribute("data-dial-code");
+    const dialCode = listItem.dataset[DATA_KEYS.DIAL_CODE];
     this._updateDialCode(dialCode);
     if (this.options.formatOnDisplay) {
-      this._updateValFromNumber(this.telInput.value);
+      this._updateValFromNumber(this.ui.telInput.value);
     }
-    this.telInput.focus();
+    this.ui.telInput.focus();
     if (countryChanged) {
       this._triggerCountryChange();
     }
   }
   //* Close the dropdown and unbind any listeners.
   _closeDropdown() {
-    this.dropdownContent.classList.add("iti__hide");
-    this.selectedCountry.setAttribute("aria-expanded", "false");
-    if (this.highlightedItem) {
-      this.highlightedItem.setAttribute("aria-selected", "false");
+    if (this.ui.dropdownContent.classList.contains(CLASSES.HIDE)) {
+      return;
     }
-    if (this.options.countrySearch) {
-      this.searchInput.removeAttribute("aria-activedescendant");
+    this.ui.dropdownContent.classList.add(CLASSES.HIDE);
+    this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
+    if (this.ui.highlightedItem) {
+      this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
     }
-    this.dropdownArrow.classList.remove("iti__arrow--up");
     if (this.options.countrySearch) {
-      this.searchInput.removeEventListener("input", this._handleSearchChange);
-      this.searchClearButton.removeEventListener("click", this._handleSearchClear);
+      this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
     }
-    document.removeEventListener("keydown", this._handleKeydownOnDropdown);
-    document.documentElement.removeEventListener(
-      "click",
-      this._handleClickOffToClose
-    );
-    this.countryList.removeEventListener(
-      "mouseover",
-      this._handleMouseoverCountryList
-    );
-    this.countryList.removeEventListener("click", this._handleClickCountryList);
+    this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
+    this.dropdownAbortController.abort();
+    this.dropdownAbortController = null;
     if (this.options.dropdownContainer) {
-      if (!this.options.useFullscreenPopup) {
-        window.removeEventListener("scroll", this._handleWindowScroll);
-      }
-      if (this.dropdown.parentNode) {
-        this.dropdown.parentNode.removeChild(this.dropdown);
-      }
-    }
-    this._trigger("close:countrydropdown");
-  }
-  //* Check if an element is visible within it's container, else scroll until it is.
-  _scrollTo(element) {
-    const container = this.countryList;
-    const scrollTop = document.documentElement.scrollTop;
-    const containerHeight = container.offsetHeight;
-    const containerTop = container.getBoundingClientRect().top + scrollTop;
-    const containerBottom = containerTop + containerHeight;
-    const elementHeight = element.offsetHeight;
-    const elementTop = element.getBoundingClientRect().top + scrollTop;
-    const elementBottom = elementTop + elementHeight;
-    const newScrollTop = elementTop - containerTop + container.scrollTop;
-    if (elementTop < containerTop) {
-      container.scrollTop = newScrollTop;
-    } else if (elementBottom > containerBottom) {
-      const heightDifference = containerHeight - elementHeight;
-      container.scrollTop = newScrollTop - heightDifference;
+      this.ui.dropdown.remove();
     }
+    this._trigger(EVENTS.CLOSE_COUNTRY_DROPDOWN);
   }
   //* Replace any existing dial code with the new one
   //* Note: called from _selectListItem and setCountry
   _updateDialCode(newDialCodeBare) {
-    const inputVal = this.telInput.value;
+    const inputVal = this.ui.telInput.value;
     const newDialCode = `+${newDialCodeBare}`;
     let newNumber;
-    if (inputVal.charAt(0) === "+") {
+    if (inputVal.startsWith("+")) {
       const prevDialCode = this._getDialCode(inputVal);
       if (prevDialCode) {
         newNumber = inputVal.replace(prevDialCode, newDialCode);
       } else {
         newNumber = newDialCode;
       }
-      this.telInput.value = newNumber;
+      this.ui.telInput.value = newNumber;
     }
   }
   //* Try and extract a valid international dial code from a full telephone number.
   //* Note: returns the raw string inc plus character and any whitespace/dots etc.
   _getDialCode(number, includeAreaCode) {
     let dialCode = "";
-    if (number.charAt(0) === "+") {
+    if (number.startsWith("+")) {
       let numericChars = "";
       for (let i = 0; i < number.length; i++) {
         const c = number.charAt(i);
@@ -3490,11 +3759,11 @@ var Iti = class _Iti {
   }
   //* Get the input val, adding the dial code if separateDialCode is enabled.
   _getFullNumber(overrideVal) {
-    const val = overrideVal || this.telInput.value.trim();
+    const val = overrideVal || this.ui.telInput.value.trim();
     const { dialCode } = this.selectedCountryData;
     let prefix;
     const numericVal = getNumeric(val);
-    if (this.options.separateDialCode && val.charAt(0) !== "+" && dialCode && numericVal) {
+    if (this.options.separateDialCode && !val.startsWith("+") && dialCode && numericVal) {
       prefix = `+${dialCode}`;
     } else {
       prefix = "";
@@ -3514,16 +3783,16 @@ var Iti = class _Iti {
   }
   //* Trigger the 'countrychange' event.
   _triggerCountryChange() {
-    this._trigger("countrychange");
+    this._trigger(EVENTS.COUNTRY_CHANGE);
   }
   //**************************
   //*  SECRET PUBLIC METHODS
   //**************************
   //* This is called when the geoip call returns.
   handleAutoCountry() {
-    if (this.options.initialCountry === "auto" && intlTelInput.autoCountry) {
+    if (this.options.initialCountry === INITIAL_COUNTRY.AUTO && intlTelInput.autoCountry) {
       this.defaultCountry = intlTelInput.autoCountry;
-      const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe");
+      const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.ui.selectedCountryInner.classList.contains(CLASSES.GLOBE);
       if (!hasSelectedCountryOrGlobe) {
         this.setCountry(this.defaultCountry);
       }
@@ -3533,8 +3802,8 @@ var Iti = class _Iti {
   //* This is called when the utils request completes.
   handleUtils() {
     if (intlTelInput.utils) {
-      if (this.telInput.value) {
-        this._updateValFromNumber(this.telInput.value);
+      if (this.ui.telInput.value) {
+        this._updateValFromNumber(this.ui.telInput.value);
       }
       if (this.selectedCountryData.iso2) {
         this._updatePlaceholder();
@@ -3548,45 +3817,20 @@ var Iti = class _Iti {
   //********************
   //* Remove plugin.
   destroy() {
-    this.telInput.iti = void 0;
-    const { allowDropdown, separateDialCode } = this.options;
-    if (allowDropdown) {
-      this._closeDropdown();
-      this.selectedCountry.removeEventListener(
-        "click",
-        this._handleClickSelectedCountry
-      );
-      this.countryContainer.removeEventListener(
-        "keydown",
-        this._handleCountryContainerKeydown
-      );
-      const label = this.telInput.closest("label");
-      if (label) {
-        label.removeEventListener("click", this._handleLabelClick);
-      }
-    }
-    const { form } = this.telInput;
-    if (this._handleHiddenInputSubmit && form) {
-      form.removeEventListener("submit", this._handleHiddenInputSubmit);
-    }
-    this.telInput.removeEventListener("input", this._handleInputEvent);
-    if (this._handleKeydownEvent) {
-      this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
-    }
-    if (this._handlePasteEvent) {
-      this.telInput.removeEventListener("paste", this._handlePasteEvent);
+    if (!this.ui.telInput) {
+      return;
     }
-    if (this._handlePageLoad) {
-      window.removeEventListener("load", this._handlePageLoad);
+    if (this.options.allowDropdown) {
+      this._closeDropdown();
     }
-    this.telInput.removeAttribute("data-intl-tel-input-id");
-    if (separateDialCode) {
-      this.telInput.style.paddingLeft = this.originalPaddingLeft;
+    this.abortController.abort();
+    this.abortController = null;
+    this.ui.destroy();
+    if (intlTelInput.instances instanceof Map) {
+      intlTelInput.instances.delete(this.id);
+    } else {
+      delete intlTelInput.instances[this.id];
     }
-    const wrapper = this.telInput.parentNode;
-    wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
-    wrapper?.parentNode?.removeChild(wrapper);
-    delete intlTelInput.instances[this.id];
   }
   //* Get the extension from the current number.
   getExtension() {
@@ -3618,7 +3862,7 @@ var Iti = class _Iti {
         this.selectedCountryData.iso2
       );
     }
-    return -99;
+    return SENTINELS.UNKNOWN_NUMBER_TYPE;
   }
   //* Get the country data for the currently selected country.
   getSelectedCountryData() {
@@ -3630,15 +3874,15 @@ var Iti = class _Iti {
       const { iso2 } = this.selectedCountryData;
       return intlTelInput.utils.getValidationError(this._getFullNumber(), iso2);
     }
-    return -99;
+    return SENTINELS.UNKNOWN_VALIDATION_ERROR;
   }
   //* Validate the input val using number length only
   isValidNumber() {
     const { dialCode, iso2 } = this.selectedCountryData;
-    if (dialCode === "44" && intlTelInput.utils) {
+    if (dialCode === UK.DIAL_CODE && intlTelInput.utils) {
       const number = this._getFullNumber();
       const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
-      if (coreNumber[0] === "7" && coreNumber.length !== 10) {
+      if (coreNumber[0] === UK.MOBILE_PREFIX && coreNumber.length !== UK.MOBILE_CORE_LENGTH) {
         return false;
       }
     }
@@ -3649,7 +3893,11 @@ var Iti = class _Iti {
     return this._validateNumber(true);
   }
   _utilsIsPossibleNumber(val) {
-    return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(val, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
+    return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(
+      val,
+      this.selectedCountryData.iso2,
+      this.options.validationNumberTypes
+    ) : null;
   }
   //* Shared internal validation logic to handle alpha character extension rules.
   _validateNumber(precise) {
@@ -3661,7 +3909,7 @@ var Iti = class _Iti {
     }
     const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
     const val = this._getFullNumber();
-    const alphaCharPosition = val.search(/\p{L}/u);
+    const alphaCharPosition = val.search(REGEX.ALPHA_UNICODE);
     const hasAlphaChar = alphaCharPosition > -1;
     if (hasAlphaChar && !this.options.allowPhonewords) {
       const beforeAlphaChar = val.substring(0, alphaCharPosition);
@@ -3672,7 +3920,11 @@ var Iti = class _Iti {
     return testValidity(val);
   }
   _utilsIsValidNumber(val) {
-    return intlTelInput.utils ? intlTelInput.utils.isValidNumber(val, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
+    return intlTelInput.utils ? intlTelInput.utils.isValidNumber(
+      val,
+      this.selectedCountryData.iso2,
+      this.options.validationNumberTypes
+    ) : null;
   }
   //* Update the selected country, and update the input val accordingly.
   setCountry(iso2) {
@@ -3686,7 +3938,7 @@ var Iti = class _Iti {
       this._setCountry(iso2Lower);
       this._updateDialCode(this.selectedCountryData.dialCode);
       if (this.options.formatOnDisplay) {
-        this._updateValFromNumber(this.telInput.value);
+        this._updateValFromNumber(this.ui.telInput.value);
       }
       this._triggerCountryChange();
     }
@@ -3698,7 +3950,7 @@ var Iti = class _Iti {
     if (countryChanged) {
       this._triggerCountryChange();
     }
-    this._trigger("input", { isSetNumber: true });
+    this._trigger(EVENTS.INPUT, { isSetNumber: true });
   }
   //* Set the placeholder number typ
   setPlaceholderNumberType(type) {
@@ -3706,11 +3958,11 @@ var Iti = class _Iti {
     this._updatePlaceholder();
   }
   setDisabled(disabled) {
-    this.telInput.disabled = disabled;
+    this.ui.telInput.disabled = disabled;
     if (disabled) {
-      this.selectedCountry.setAttribute("disabled", "true");
+      this.ui.selectedCountry.setAttribute("disabled", "true");
     } else {
-      this.selectedCountry.removeAttribute("disabled");
+      this.ui.selectedCountry.removeAttribute("disabled");
     }
   }
 };
@@ -3724,13 +3976,19 @@ var attachUtils = (source) => {
         return Promise.reject(error);
       }
     } else {
-      return Promise.reject(new TypeError(`The argument passed to attachUtils must be a function that returns a promise for the utilities module, not ${typeof source}`));
+      return Promise.reject(
+        new TypeError(
+          `The argument passed to attachUtils must be a function that returns a promise for the utilities module, not ${typeof source}`
+        )
+      );
     }
     intlTelInput.startedLoadingUtilsScript = true;
     return loadCall.then((module2) => {
       const utils = module2?.default;
       if (!utils || typeof utils !== "object") {
-        throw new TypeError("The loader function passed to attachUtils did not resolve to a module object with utils as its default export.");
+        throw new TypeError(
+          "The loader function passed to attachUtils did not resolve to a module object with utils as its default export."
+        );
       }
       intlTelInput.utils = utils;
       forEachInstance("handleUtils");
@@ -3742,11 +4000,17 @@ var attachUtils = (source) => {
   }
   return null;
 };
+var forEachInstance = (method, ...args) => {
+  Object.values(intlTelInput.instances).forEach((instance) => {
+    const fn = instance[method];
+    if (typeof fn === "function") {
+      fn.apply(instance, args);
+    }
+  });
+};
 var intlTelInput = Object.assign(
   (input, options) => {
     const iti = new Iti(input, options);
-    iti._init();
-    input.setAttribute("data-intl-tel-input-id", iti.id.toString());
     intlTelInput.instances[iti.id] = iti;
     input.iti = iti;
     return iti;
@@ -3759,7 +4023,7 @@ var intlTelInput = Object.assign(
     getCountryData: () => data_default,
     //* A getter for the plugin instance.
     getInstance: (input) => {
-      const id2 = input.getAttribute("data-intl-tel-input-id");
+      const id2 = input.dataset.intlTelInputId;
       return id2 ? intlTelInput.instances[id2] : null;
     },
     //* A map from instance ID to instance object.
@@ -3767,7 +4031,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.12"
+    version: "25.11.1"
   }
 );
 var intl_tel_input_default = intlTelInput;