intl-tel-input 25.10.12 → 25.11.1

package/build/js/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.10.12
+ * International Telephone Input v25.11.1
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -1729,7 +1729,13 @@ var factoryOutput = (() => {
       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;
@@ -2001,13 +2007,111 @@ var factoryOutput = (() => {
   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)");
@@ -2021,7 +2125,7 @@ var factoryOutput = (() => {
     //* 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.
@@ -2067,7 +2171,7 @@ var factoryOutput = (() => {
     //* The number type to enforce during validation.
     validationNumberTypes: ["MOBILE"]
   };
-  function applyOptionSideEffects(o) {
+  var applyOptionSideEffects = (o, defaultEnglishStrings) => {
     if (o.useFullscreenPopup) {
       o.fixDropdownWidth = false;
     }
@@ -2083,18 +2187,66 @@ var factoryOutput = (() => {
     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);
@@ -2102,251 +2254,41 @@ var factoryOutput = (() => {
     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);
@@ -2356,19 +2298,14 @@ var factoryOutput = (() => {
     }
     _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,
@@ -2378,20 +2315,16 @@ var factoryOutput = (() => {
       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) {
@@ -2400,10 +2333,10 @@ var factoryOutput = (() => {
             {
               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
           );
@@ -2424,13 +2357,13 @@ var factoryOutput = (() => {
         );
         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
           );
         }
@@ -2458,9 +2391,9 @@ var factoryOutput = (() => {
       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");
@@ -2474,17 +2407,17 @@ var factoryOutput = (() => {
           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,
@@ -2507,15 +2440,11 @@ var factoryOutput = (() => {
         "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",
         {
@@ -2526,11 +2455,11 @@ var factoryOutput = (() => {
           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
       );
@@ -2538,21 +2467,13 @@ var factoryOutput = (() => {
         "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" },
@@ -2561,91 +2482,496 @@ var factoryOutput = (() => {
       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) {
@@ -2654,7 +2980,7 @@ var factoryOutput = (() => {
           this._setCountry(lowerInitialCountry);
         } else {
           if (dialCode && isRegionlessNanpNumber) {
-            this._setCountry("us");
+            this._setCountry(US.ISO2);
           } else {
             this._setCountry("");
           }
@@ -2670,81 +2996,94 @@ var factoryOutput = (() => {
       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 {
@@ -2779,8 +3118,8 @@ var factoryOutput = (() => {
     }
     _openDropdownWithPlus() {
       this._openDropdown();
-      this.searchInput.value = "+";
-      this._filterCountries("");
+      this.ui.searchInput.value = "+";
+      this._filterCountriesByQuery("");
     }
     //* Initialize the tel input listeners.
     _initTelInputListeners() {
@@ -2789,55 +3128,81 @@ var factoryOutput = (() => {
       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();
@@ -2845,14 +3210,17 @@ var factoryOutput = (() => {
               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;
@@ -2862,14 +3230,16 @@ var factoryOutput = (() => {
             }
           }
         };
-        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);
@@ -2878,7 +3248,7 @@ var factoryOutput = (() => {
           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;
@@ -2904,82 +3274,117 @@ var factoryOutput = (() => {
           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();
         }
@@ -2987,24 +3392,37 @@ var factoryOutput = (() => {
       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);
@@ -3013,147 +3431,78 @@ var factoryOutput = (() => {
           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)
@@ -3161,7 +3510,7 @@ var factoryOutput = (() => {
     _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(
@@ -3171,7 +3520,7 @@ var factoryOutput = (() => {
         );
       }
       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.
@@ -3185,11 +3534,11 @@ var factoryOutput = (() => {
     // 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}`;
     }
@@ -3216,13 +3565,15 @@ var factoryOutput = (() => {
         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;
@@ -3236,33 +3587,13 @@ var factoryOutput = (() => {
         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) {
@@ -3272,8 +3603,8 @@ var factoryOutput = (() => {
       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;
@@ -3283,28 +3614,19 @@ var factoryOutput = (() => {
           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;
@@ -3319,7 +3641,11 @@ var factoryOutput = (() => {
             true
           );
           let validNumber = exampleNumber;
-          while (intlTelInput.utils.isPossibleNumber(exampleNumber, iso2, validationNumberTypes)) {
+          while (intlTelInput.utils.isPossibleNumber(
+            exampleNumber,
+            iso2,
+            validationNumberTypes
+          )) {
             validNumber = exampleNumber;
             exampleNumber += "0";
           }
@@ -3333,31 +3659,6 @@ var factoryOutput = (() => {
         }
       }
     }
-    //* 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 {
@@ -3366,7 +3667,7 @@ var factoryOutput = (() => {
         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(
@@ -3378,98 +3679,66 @@ var factoryOutput = (() => {
         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);
@@ -3495,11 +3764,11 @@ var factoryOutput = (() => {
     }
     //* 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 = "";
@@ -3519,16 +3788,16 @@ var factoryOutput = (() => {
     }
     //* 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);
         }
@@ -3538,8 +3807,8 @@ var factoryOutput = (() => {
     //* 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();
@@ -3553,45 +3822,20 @@ var factoryOutput = (() => {
     //********************
     //* 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() {
@@ -3623,7 +3867,7 @@ var factoryOutput = (() => {
           this.selectedCountryData.iso2
         );
       }
-      return -99;
+      return SENTINELS.UNKNOWN_NUMBER_TYPE;
     }
     //* Get the country data for the currently selected country.
     getSelectedCountryData() {
@@ -3635,15 +3879,15 @@ var factoryOutput = (() => {
         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;
         }
       }
@@ -3654,7 +3898,11 @@ var factoryOutput = (() => {
       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) {
@@ -3666,7 +3914,7 @@ var factoryOutput = (() => {
       }
       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);
@@ -3677,7 +3925,11 @@ var factoryOutput = (() => {
       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) {
@@ -3691,7 +3943,7 @@ var factoryOutput = (() => {
         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();
       }
@@ -3703,7 +3955,7 @@ var factoryOutput = (() => {
       if (countryChanged) {
         this._triggerCountryChange();
       }
-      this._trigger("input", { isSetNumber: true });
+      this._trigger(EVENTS.INPUT, { isSetNumber: true });
     }
     //* Set the placeholder number typ
     setPlaceholderNumberType(type) {
@@ -3711,11 +3963,11 @@ var factoryOutput = (() => {
       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");
       }
     }
   };
@@ -3729,13 +3981,19 @@ var factoryOutput = (() => {
           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((module) => {
         const utils = module?.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");
@@ -3747,11 +4005,17 @@ var factoryOutput = (() => {
     }
     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;
@@ -3764,7 +4028,7 @@ var factoryOutput = (() => {
       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.
@@ -3772,7 +4036,7 @@ var factoryOutput = (() => {
       attachUtils,
       startedLoadingUtilsScript: false,
       startedLoadingAutoCountry: false,
-      version: "25.10.12"
+      version: "25.11.1"
     }
   );
   var intl_tel_input_default = intlTelInput;