@desource/phone-mask-vue 1.0.0 → 1.1.1

package/dist/index.cjs

@@ -10,17 +10,17 @@ const t$1 = /^[a-z]{2}$/i, countryCodeEmoji = (o2) => {
   const e2 = [...o2.toUpperCase()].map((t2) => (t2.codePointAt(0) ?? 0) + 127397);
   return String.fromCodePoint(...e2);
 };
-const o$1 = "en", n = /* @__PURE__ */ new Map(), getDisplayNames = (e2) => {
-  const t2 = e2.toLowerCase(), s2 = n.get(t2);
+const o$1 = "en", n$1 = /* @__PURE__ */ new Map(), getDisplayNames = (e2) => {
+  const t2 = e2.toLowerCase(), s2 = n$1.get(t2);
   if (s2) return s2;
   const r = new Intl.DisplayNames([e2], { type: "region" });
-  if (n.size >= 10) {
-    for (const e3 of n.keys()) if (e3 !== o$1) {
-      n.delete(e3);
+  if (n$1.size >= 10) {
+    for (const e3 of n$1.keys()) if (e3 !== o$1) {
+      n$1.delete(e3);
       break;
     }
   }
-  return n.set(t2, r), r;
+  return n$1.set(t2, r), r;
 }, s$1 = Object.entries(M), divideMask = (e2) => e2.split(/ (.*)/s);
 function getCodeAndMask(e2) {
   let t2 = "", o2 = "";
@@ -70,32 +70,32 @@ const MasksFullMap = (e2) => {
 MasksFull(o$1);
 const k = countryCodeEmoji;
 function getNavigatorLang() {
-  return "undefined" != typeof navigator && navigator.language || "en";
+  return globalThis.navigator?.language || "en";
 }
 function detectCountryFromLocale() {
   try {
     const t2 = getNavigatorLang();
     try {
-      const e3 = new Intl.Locale(t2);
-      if (e3.region) return e3.region.toUpperCase();
+      const r2 = new Intl.Locale(t2);
+      if (r2.region) return r2.region.toUpperCase();
     } catch {
     }
-    const e2 = t2.split(/[-_]/);
-    if (e2.length > 1) return e2[1]?.toUpperCase() || null;
+    const r = t2.split(/[-_]/);
+    if (r.length > 1) return r[1]?.toUpperCase() || null;
   } catch {
   }
   return null;
 }
 function hasCountry(t2) {
-  const r = f;
-  return t2.toUpperCase() in r;
+  const e2 = f;
+  return t2.toUpperCase() in e2;
 }
-function getCountry(e2, r) {
-  const n2 = MasksFullMap(r), o2 = e2.toUpperCase();
+function getCountry(r, e2) {
+  const n2 = MasksFullMap(e2), o2 = r.toUpperCase();
   return o2 in n2 ? { id: o2, ...n2[o2] } : { id: "US", ...n2.US };
 }
-function parseCountryCode(t2, e2) {
-  return t2 && hasCountry(t2) ? t2.toUpperCase() : e2 || "";
+function parseCountryCode(t2, r) {
+  return t2 && hasCountry(t2) ? t2.toUpperCase() : r || "";
 }
 function toArray(t2) {
   return Array.isArray(t2) ? t2 : [t2];
@@ -106,147 +106,137 @@ function countPlaceholders(t2) {
 function removeCountryCodePrefix(t2) {
   return t2.replace(/^\+\d+\s?/, "");
 }
-function pickMaskVariant(t2, e2) {
+function pickMaskVariant(t2, r) {
+  if (!t2.length) return "";
   if (1 === t2.length) return t2[0];
-  const r = t2.map((t3) => ({ mask: t3, count: countPlaceholders(t3) })), n2 = r.filter((t3) => t3.count >= e2).sort((t3, e3) => t3.count - e3.count);
+  const e2 = t2.map((t3) => ({ mask: t3, count: countPlaceholders(t3) })), n2 = e2.filter((t3) => t3.count >= r).sort((t3, r2) => t3.count - r2.count);
   if (n2.length > 0) return n2[0].mask;
-  const o2 = r.sort((t3, e3) => e3.count - t3.count)[0];
+  const o2 = e2.sort((t3, r2) => r2.count - t3.count)[0];
   return o2 ? o2.mask : t2[0];
 }
-function formatDigitsWithMap(t2, e2) {
-  let r = "";
+function formatDigitsWithMap(t2, r) {
+  let e2 = "";
   const n2 = [];
   let o2 = 0;
-  const a = e2.length, s2 = t2.length;
+  const a = r.length, s2 = t2.length;
   for (let c = 0; c < s2; c++) {
     const s3 = t2[c];
     if ("#" === s3) {
       if (!(o2 < a)) break;
-      r += e2[o2], n2.push(o2), o2++;
+      e2 += r[o2], n2.push(o2), o2++;
     } else {
-      const e3 = -1 !== t2.indexOf("#", c + 1) && o2 < a;
-      (r.length > 0 || e3) && (r += s3, n2.push(-1));
+      const r2 = -1 !== t2.indexOf("#", c + 1) && o2 < a;
+      (e2.length > 0 || r2) && (e2 += s3, n2.push(-1));
     }
   }
-  return { display: r, map: n2 };
+  return { display: e2, map: n2 };
 }
-function filterCountries(t2, e2) {
-  const r = e2.trim().toUpperCase();
-  if (!r) return t2;
-  const n2 = r.replace(/\D/g, ""), o2 = n2.length > 0;
+function filterCountries(t2, r) {
+  const e2 = r.trim().toUpperCase();
+  if (!e2) return t2;
+  const n2 = e2.replace(/\D/g, ""), o2 = n2.length > 0;
   return t2.map((t3) => {
-    const e3 = t3.name.toUpperCase(), a = t3.id.toUpperCase(), s2 = t3.code.toUpperCase(), c = t3.code.replace(/\D/g, "");
-    let i2 = 0;
-    return e3.startsWith(r) ? i2 = 1e3 : e3.includes(r) && (i2 = 500), s2.startsWith(r) ? i2 += 100 : s2.includes(r) && (i2 += 50), a === r ? i2 += 200 : a.startsWith(r) && (i2 += 150), o2 && c.startsWith(n2) ? i2 += 80 : o2 && c.includes(n2) && (i2 += 40), { country: t3, score: i2 };
-  }).filter((t3) => t3.score > 0).sort((t3, e3) => e3.score !== t3.score ? e3.score - t3.score : t3.country.name.localeCompare(e3.country.name)).map((t3) => t3.country);
+    const r2 = t3.name.toUpperCase(), a = t3.id.toUpperCase(), s2 = t3.code.toUpperCase(), c = t3.code.replace(/\D/g, "");
+    let i = 0;
+    return r2.startsWith(e2) ? i = 1e3 : r2.includes(e2) && (i = 500), s2.startsWith(e2) ? i += 100 : s2.includes(e2) && (i += 50), a === e2 ? i += 200 : a.startsWith(e2) && (i += 150), o2 && c.startsWith(n2) ? i += 80 : o2 && c.includes(n2) && (i += 40), { country: t3, score: i };
+  }).filter((t3) => t3.score > 0).sort((t3, r2) => r2.score === t3.score ? t3.country.name.localeCompare(r2.country.name) : r2.score - t3.score).map((t3) => t3.country);
 }
-const t = [" ", "-", "(", ")"], e$1 = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Tab"], i = /[^\d\s\-()]/;
-function extractDigits(t2, e2) {
-  const i2 = t2.replace(/\D/g, "");
-  return e2 ? i2.slice(0, e2) : i2;
+const e$1 = [" ", "-", "(", ")"], t = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Tab"], n = /[^\d\s\-()]/;
+function removeDigitsRange(e2, t2, n2) {
+  return { newDigits: e2.slice(0, t2) + e2.slice(n2), caretDigitIndex: t2 };
 }
-function getSelection(t2) {
-  return t2 ? [t2.selectionStart ?? 0, t2.selectionEnd ?? 0] : [0, 0];
+function removeSelectedDigits(e2, t2, n2, i) {
+  if (n2 === i) return;
+  const r = t2.getDigitRange(e2, n2, i);
+  if (!r) return;
+  const [s2, g] = r;
+  return removeDigitsRange(e2, s2, g);
 }
-function setCaret(t2, e2) {
-  if (t2) try {
-    t2.setSelectionRange(e2, e2);
+function extractDigits(e2, t2) {
+  const n2 = e2.replace(/\D/g, "");
+  return t2 ? n2.slice(0, t2) : n2;
+}
+function getSelection(e2) {
+  return e2 ? [e2.selectionStart ?? 0, e2.selectionEnd ?? 0] : [0, 0];
+}
+function setCaret(e2, t2) {
+  if (e2) try {
+    e2.setSelectionRange(t2, t2);
   } catch {
   }
 }
-function processBeforeInput(t2) {
-  if (!t2.target) return;
-  const e2 = t2.target, n2 = t2.data;
-  "insertText" === t2.inputType && n2 && (i.test(n2) || " " === n2 && e2.value.endsWith(" ")) && t2.preventDefault();
+function processBeforeInput(e2) {
+  if (!e2.target) return;
+  const t2 = e2.target, i = e2.data;
+  "insertText" === e2.inputType && i && (n.test(i) || " " === i && t2.value.endsWith(" ")) && e2.preventDefault();
 }
-function processInput(t2, e2) {
-  if (!t2.target) return;
-  const i2 = t2.target, { formatter: n2 } = e2, r = n2.getMaxDigits(), s2 = extractDigits(i2.value, r);
+function processInput(e2, t2) {
+  if (!e2.target) return;
+  const n2 = e2.target, { formatter: i } = t2, r = i.getMaxDigits(), s2 = extractDigits(n2.value, r);
   return { newDigits: s2, caretDigitIndex: s2.length };
 }
-function processKeydown(i2, n2) {
-  if (!i2.target) return;
-  const r = i2.target, { digits: s2, formatter: c } = n2;
-  if (i2.ctrlKey || i2.metaKey || i2.altKey || e$1.includes(i2.key)) return;
-  const [g, a] = getSelection(r);
-  if ("Backspace" !== i2.key) if ("Delete" !== i2.key) /^[0-9]$/.test(i2.key) ? s2.length >= c.getMaxDigits() && i2.preventDefault() : 1 === i2.key.length && i2.preventDefault();
-  else {
-    if (i2.preventDefault(), g !== a) {
-      const t2 = c.getDigitRange(s2, g, a);
-      if (t2) {
-        const [e2, i3] = t2;
-        return { newDigits: s2.slice(0, e2) + s2.slice(i3), caretDigitIndex: e2 };
-      }
-    }
-    if (g < r.value.length) {
-      const t2 = c.getDigitRange(s2, g, r.value.length);
-      if (t2) {
-        const [e2] = t2;
-        return { newDigits: s2.slice(0, e2) + s2.slice(e2 + 1), caretDigitIndex: e2 };
-      }
-    }
-  }
-  else {
-    if (i2.preventDefault(), g !== a) {
-      const t2 = c.getDigitRange(s2, g, a);
-      if (t2) {
-        const [e2, i3] = t2;
-        return { newDigits: s2.slice(0, e2) + s2.slice(i3), caretDigitIndex: e2 };
-      }
-    }
-    if (g > 0) {
-      const e2 = r.value;
-      let i3 = g - 1;
-      for (; i3 >= 0 && t.includes(e2[i3]); ) i3--;
-      if (i3 >= 0) {
-        const t2 = c.getDigitRange(s2, i3, i3 + 1);
-        if (t2) {
-          const [e3] = t2;
-          return { newDigits: s2.slice(0, e3) + s2.slice(e3 + 1), caretDigitIndex: e3 };
-        }
-      }
-    }
-  }
+function processKeydown(n2, i) {
+  if (!n2.target) return;
+  const r = n2.target, { digits: s2, formatter: g } = i;
+  if ((function shouldIgnoreKeydown(e2) {
+    return e2.ctrlKey || e2.metaKey || e2.altKey || t.includes(e2.key);
+  })(n2)) return;
+  const [o2, c] = getSelection(r), a = r.value;
+  return "Backspace" === n2.key ? (n2.preventDefault(), removeSelectedDigits(s2, g, o2, c) ?? (function removePreviousDigit(t2, n3, i2, r2) {
+    if (r2 <= 0) return;
+    let s3 = r2 - 1;
+    for (; s3 >= 0 && e$1.includes(i2[s3]); ) s3--;
+    if (s3 < 0) return;
+    const g2 = n3.getDigitRange(t2, s3, s3 + 1);
+    if (!g2) return;
+    const [o3] = g2;
+    return removeDigitsRange(t2, o3, o3 + 1);
+  })(s2, g, a, o2)) : "Delete" === n2.key ? (n2.preventDefault(), removeSelectedDigits(s2, g, o2, c) ?? (function removeNextDigit(e2, t2, n3, i2) {
+    if (i2 >= n3.length) return;
+    const r2 = t2.getDigitRange(e2, i2, n3.length);
+    if (!r2) return;
+    const [s3] = r2;
+    return removeDigitsRange(e2, s3, s3 + 1);
+  })(s2, g, a, o2)) : void (/^\d$/.test(n2.key) ? s2.length >= g.getMaxDigits() && n2.preventDefault() : 1 === n2.key.length && n2.preventDefault());
 }
-function processPaste(t2, e2) {
-  if (!t2.target) return;
-  t2.preventDefault();
-  const i2 = t2.target, { digits: n2, formatter: r } = e2, s2 = t2.clipboardData?.getData("text") || "", c = r.getMaxDigits(), g = extractDigits(s2, c);
-  if (0 === g.length) return;
-  const [a, o2] = getSelection(i2);
-  if (a !== o2) {
-    const t3 = r.getDigitRange(n2, a, o2);
-    if (t3) {
-      const [e3, i3] = t3;
-      return { newDigits: extractDigits(n2.slice(0, e3) + g + n2.slice(i3), c), caretDigitIndex: e3 + g.length };
+function processPaste(e2, t2) {
+  if (!e2.target) return;
+  e2.preventDefault();
+  const n2 = e2.target, { digits: i, formatter: r } = t2, s2 = e2.clipboardData?.getData("text") || "", g = r.getMaxDigits(), o2 = extractDigits(s2, g);
+  if (0 === o2.length) return;
+  const [c, a] = getSelection(n2);
+  if (c !== a) {
+    const e3 = r.getDigitRange(i, c, a);
+    if (e3) {
+      const [t3, n3] = e3;
+      return { newDigits: extractDigits(i.slice(0, t3) + o2 + i.slice(n3), g), caretDigitIndex: t3 + o2.length };
     }
   }
-  const l = r.getDigitRange(n2, 0, a), f2 = l ? l[1] : 0;
-  return { newDigits: extractDigits(n2.slice(0, f2) + g + n2.slice(f2), c), caretDigitIndex: f2 + g.length };
+  const u = r.getDigitRange(i, 0, c), l = u ? u[1] : 0;
+  return { newDigits: extractDigits(i.slice(0, l) + o2 + i.slice(l), g), caretDigitIndex: l + o2.length };
 }
 function createPhoneFormatter(o2) {
-  const a = toArray(o2.mask), i2 = a.map((n2) => countPlaceholders(removeCountryCodePrefix(n2))), g = Math.max(...i2), getMask = (t2) => {
-    const n2 = pickMaskVariant(a, t2);
+  const i = toArray(o2.mask), l = i.map((n2) => countPlaceholders(removeCountryCodePrefix(n2))), s2 = Math.max(...l), getMask = (t2) => {
+    const n2 = pickMaskVariant(i, t2);
     return removeCountryCodePrefix(n2);
   };
   return { formatDisplay: (t2) => {
     const e2 = getMask(t2.length);
     return formatDigitsWithMap(e2, t2).display;
-  }, getMaxDigits: () => g, getPlaceholder: () => getMask(0), getCaretPosition: (t2) => {
-    const e2 = getMask(t2), { display: r, map: l } = formatDigitsWithMap(e2, "0".repeat(t2));
-    for (let e3 = 0; e3 < l.length; e3++) if (l[e3] === t2) return e3;
-    if (t2 >= l.length) return r.length;
-    for (let e3 = 0; e3 < l.length; e3++) if (l[e3] > t2) return e3;
-    return r.length;
+  }, getMaxDigits: () => s2, getPlaceholder: () => getMask(0), getCaretPosition: (t2) => {
+    const e2 = Math.max(0, t2);
+    if (0 === e2) return 0;
+    const r = getMask(e2), { display: a } = formatDigitsWithMap(r, "0".repeat(e2));
+    return a.length;
   }, getDigitRange: (t2, e2, r) => {
-    const l = getMask(t2.length), { map: o3 } = formatDigitsWithMap(l, t2);
-    let a2 = 1 / 0, i3 = -1 / 0;
+    const a = getMask(t2.length), { map: o3 } = formatDigitsWithMap(a, t2);
+    let i2 = 1 / 0, l2 = -1 / 0;
     for (let t3 = e2; t3 < r && t3 < o3.length; t3++) {
       const e3 = o3[t3];
-      void 0 !== e3 && e3 >= 0 && (a2 = Math.min(a2, e3), i3 = Math.max(i3, e3));
+      void 0 !== e3 && e3 >= 0 && (i2 = Math.min(i2, e3), l2 = Math.max(l2, e3));
     }
-    return a2 === 1 / 0 ? null : [a2, i3 + 1];
-  }, isComplete: (t2) => i2.includes(t2.length) };
+    return i2 === 1 / 0 ? null : [i2, l2 + 1];
+  }, isComplete: (t2) => l.includes(t2.length) };
 }
 const o = "https://ipapi.co/json/", e = 1500, p = "@desource/phone-mask:geo", s = 864e5;
 async function detectCountryFromGeoIP(t2 = o, r = e) {
@@ -290,7 +280,7 @@ function useCountry({
   const locale = vue.computed(() => vue.toValue(localeOption) || getNavigatorLang());
   const countryCode = vue.ref(parseCountryCode(vue.toValue(countryOption), "US"));
   const country = vue.computed(() => getCountry(countryCode.value, locale.value));
-  const setCountry = (code) => {
+  const setCountry2 = (code) => {
     const parsed = parseCountryCode(code);
     if (parsed) {
       countryCode.value = parsed;
@@ -300,14 +290,14 @@ function useCountry({
   };
   const detectCountry = async () => {
     const geoCountry = await detectByGeoIp();
-    if (setCountry(geoCountry)) return;
+    if (setCountry2(geoCountry)) return;
     const localeCountry = detectCountryFromLocale();
-    setCountry(localeCountry);
+    setCountry2(localeCountry);
   };
   vue.watchEffect(() => {
     const newCountry = vue.toValue(countryOption);
     if (newCountry && newCountry !== countryCode.value) {
-      setCountry(newCountry);
+      setCountry2(newCountry);
     }
   });
   vue.watchEffect(() => {
@@ -318,7 +308,7 @@ function useCountry({
   vue.watchEffect(() => {
     onCountryChange?.(country.value);
   });
-  return { country, setCountry, locale };
+  return { country, setCountry: setCountry2, locale };
 }
 function useFormatter({
   country,
@@ -505,8 +495,8 @@ function useCountrySelector({
     if (!rootRef.value) return;
     const rect = rootRef.value.getBoundingClientRect();
     dropdownStyle.value = {
-      top: `${rect.bottom + window.scrollY + 8}px`,
-      left: `${rect.left + window.scrollX}px`,
+      top: `${rect.bottom + globalThis.scrollY + 8}px`,
+      left: `${rect.left + globalThis.scrollX}px`,
       width: `${rect.width}px`
     };
   };
@@ -545,9 +535,9 @@ function useCountrySelector({
     }
   };
   const removeListeners = () => {
-    window.removeEventListener("resize", positionDropdown);
-    window.removeEventListener("scroll", positionDropdown, true);
-    window.removeEventListener("click", onDocClick, true);
+    globalThis.removeEventListener("resize", positionDropdown);
+    globalThis.removeEventListener("scroll", positionDropdown, true);
+    globalThis.removeEventListener("click", onDocClick, true);
   };
   vue.watch(hasDropdown, (dropdownExists) => {
     if (!dropdownExists && dropdownOpen.value) {
@@ -560,9 +550,9 @@ function useCountrySelector({
       return;
     }
     positionDropdown();
-    window.addEventListener("resize", positionDropdown);
-    window.addEventListener("scroll", positionDropdown, true);
-    window.addEventListener("click", onDocClick, true);
+    globalThis.addEventListener("resize", positionDropdown);
+    globalThis.addEventListener("scroll", positionDropdown, true);
+    globalThis.addEventListener("click", onDocClick, true);
   });
   vue.onBeforeUnmount(removeListeners);
   return {
@@ -640,15 +630,18 @@ function useCopyAction({ liveRef, fullFormatted, onCopy }) {
 function useTheme({ theme }) {
   const systemDark = vue.ref(false);
   const themeClass = vue.computed(() => {
-    return vue.toValue(theme) !== "auto" ? `theme-${vue.toValue(theme)}` : systemDark.value ? "theme-dark" : "theme-light";
+    const resolvedTheme = vue.toValue(theme);
+    if (resolvedTheme === "auto") {
+      return systemDark.value ? "theme-dark" : "theme-light";
+    }
+    return `theme-${resolvedTheme}`;
   });
   let mq = null;
   const handler = (e2) => {
     systemDark.value = e2.matches;
   };
   vue.onBeforeMount(() => {
-    if (typeof window === "undefined") return;
-    mq = window.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
+    mq = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
     if (!mq) return;
     systemDark.value = mq.matches;
     mq.addEventListener("change", handler);
@@ -697,13 +690,12 @@ const _hoisted_11 = {
   "aria-hidden": "true"
 };
 const _hoisted_12 = { class: "pi-search-wrap" };
-const _hoisted_13 = ["value", "placeholder"];
-const _hoisted_14 = ["aria-activedescendant"];
-const _hoisted_15 = ["id", "aria-selected", "title", "onClick", "onMouseenter"];
-const _hoisted_16 = ["aria-label"];
-const _hoisted_17 = { class: "pi-opt-name" };
-const _hoisted_18 = { class: "pi-opt-code" };
-const _hoisted_19 = {
+const _hoisted_13 = ["value", "aria-activedescendant", "placeholder"];
+const _hoisted_14 = ["id", "aria-selected", "title", "onClick", "onMouseenter"];
+const _hoisted_15 = ["aria-label"];
+const _hoisted_16 = { class: "pi-opt-name" };
+const _hoisted_17 = { class: "pi-opt-code" };
+const _hoisted_18 = {
   key: 0,
   class: "pi-empty"
 };
@@ -738,7 +730,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const onChange = (v) => {
       model.value = v;
     };
-    const { country, setCountry, locale } = useCountry({
+    const { country, setCountry: setCountry2, locale } = useCountry({
       country: () => props.country,
       locale: () => props.locale,
       detect: () => props.detect,
@@ -768,6 +760,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const dropdownRef = vue.useTemplateRef("dropdownRef");
     const searchRef = vue.useTemplateRef("searchRef");
     const selectorRef = vue.useTemplateRef("selectorRef");
+    const dropdownId = vue.getCurrentInstance()?.uid ?? 0;
+    const listboxId = `pi-options-${dropdownId}`;
+    const getOptionId = (idx) => `pi-option-${dropdownId}-${idx}`;
     const inactive = vue.computed(() => props.disabled || props.readonly);
     const incomplete = vue.computed(() => showValidationHint.value && shouldShowWarn.value);
     const showCopyButton = vue.computed(() => props.showCopy && !isEmpty.value && !props.disabled);
@@ -799,9 +794,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       locale,
       countryOption: () => props.country,
       inactive,
-      onSelectCountry: setCountry,
+      onSelectCountry: setCountry2,
       onAfterSelect: focusInput
     });
+    const activeOptionId = vue.computed(
+      () => dropdownOpen.value && filteredCountries.value[focusedIndex.value] ? getOptionId(focusedIndex.value) : void 0
+    );
     const { handleBeforeInput, handleInput, handleKeydown, handlePaste } = useInputHandlers({
       formatter,
       digits,
@@ -1013,6 +1011,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     type: "search",
                     class: "pi-search",
                     "aria-label": "Search countries",
+                    "aria-controls": listboxId,
+                    "aria-activedescendant": activeOptionId.value,
                     placeholder: __props.searchPlaceholder,
                     onKeydown: _cache[6] || (_cache[6] = //@ts-ignore
                     (...args) => vue.unref(handleSearchKeydown) && vue.unref(handleSearchKeydown)(...args)),
@@ -1021,14 +1021,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   }, null, 40, _hoisted_13)
                 ]),
                 vue.createElementVNode("ul", {
+                  id: listboxId,
                   class: "pi-options",
                   role: "listbox",
-                  "aria-activedescendant": `option-${vue.unref(focusedIndex)}`,
                   tabindex: "-1"
                 }, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(filteredCountries), (c, idx) => {
                     return vue.openBlock(), vue.createElementBlock("li", {
-                      id: `option-${idx}`,
+                      id: getOptionId(idx),
                       key: c.id,
                       role: "option",
                       class: vue.normalizeClass([
@@ -1051,13 +1051,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         vue.renderSlot(_ctx.$slots, "flag", { country: c }, () => [
                           vue.createTextVNode(vue.toDisplayString(c.flag), 1)
                         ], true)
-                      ], 8, _hoisted_16),
-                      vue.createElementVNode("span", _hoisted_17, vue.toDisplayString(c.name), 1),
-                      vue.createElementVNode("span", _hoisted_18, vue.toDisplayString(c.code), 1)
-                    ], 42, _hoisted_15);
+                      ], 8, _hoisted_15),
+                      vue.createElementVNode("span", _hoisted_16, vue.toDisplayString(c.name), 1),
+                      vue.createElementVNode("span", _hoisted_17, vue.toDisplayString(c.code), 1)
+                    ], 42, _hoisted_14);
                   }), 128)),
-                  vue.unref(filteredCountries).length === 0 ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_19, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true)
-                ], 8, _hoisted_14)
+                  vue.unref(filteredCountries).length === 0 ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_18, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true)
+                ])
               ], 6)) : vue.createCommentVNode("", true)
             ]),
             _: 3
@@ -1082,47 +1082,18 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-33134720"]]);
-async function initState(binding) {
-  const value = binding.value;
-  let options = {};
-  if (typeof value === "string") {
-    options = { country: value };
-  } else if (typeof value === "object" && value !== null) {
-    options = value;
-  }
-  const locale = options.locale || getNavigatorLang();
-  let country;
-  if (options.country) {
-    country = getCountry(options.country, locale);
-  } else if (options.detect) {
-    const geoCountry = await detectCountryFromGeoIP();
-    if (geoCountry) {
-      country = getCountry(geoCountry, locale);
-    } else {
-      const localeCountry = detectCountryFromLocale();
-      if (localeCountry) {
-        country = getCountry(localeCountry, locale);
-      } else {
-        country = getCountry("US", locale);
-      }
-    }
-  } else {
-    country = getCountry("US", locale);
-  }
-  return {
-    country,
-    formatter: createPhoneFormatter(country),
-    digits: "",
-    locale,
-    options
-  };
+const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d730aa54"]]);
+function parseParams(params) {
+  if (typeof params === "string") return { country: params };
+  if (params && typeof params === "object") return params;
+  return {};
 }
-function updateDisplay(el, state) {
+function updateDigits(el, state, digits) {
+  state.digits = digits;
   el.value = state.formatter.formatDisplay(state.digits);
   if (state.options.onChange) {
-    const fullNumberFormatted = `${state.country.code} ${el.value}`;
-    const fullNumber = `${state.country.code}${state.digits}`;
+    const fullNumberFormatted = el.value ? `${state.country.code} ${el.value}` : "";
+    const fullNumber = state.digits ? `${state.country.code}${state.digits}` : "";
     state.options.onChange({
       full: fullNumber,
       fullFormatted: fullNumberFormatted,
@@ -1130,113 +1101,92 @@ function updateDisplay(el, state) {
     });
   }
 }
-function createInputHandler(el, state) {
-  return (e2) => {
-    const result = processInput(e2, { formatter: state.formatter });
-    if (!result) return;
-    state.digits = result.newDigits;
-    updateDisplay(el, state);
-    vue.nextTick(() => {
-      const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
-      setCaret(el, pos);
-    });
-  };
+function checkDigitsUpdate(el, state) {
+  const maxDigits = state.formatter.getMaxDigits();
+  const digits = extractDigits(el.value, maxDigits);
+  const displayValue = state.formatter.formatDisplay(digits);
+  if (digits !== state.digits || el.value !== displayValue) {
+    updateDigits(el, state, digits);
+  }
 }
-function createKeydownHandler(el, state) {
-  return (e2) => {
-    const result = processKeydown(e2, {
-      digits: state.digits,
-      formatter: state.formatter
-    });
-    if (!result) return;
-    state.digits = result.newDigits;
-    updateDisplay(el, state);
-    vue.nextTick(() => {
-      const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
-      setCaret(el, pos);
-    });
-  };
+function checkCountryUpdate(el, state) {
+  const oldCountry = state.country.id;
+  const newCountry = parseCountryCode(state.options.country);
+  if (newCountry && newCountry !== oldCountry) {
+    setCountry(el, state, newCountry);
+  }
 }
-function createPasteHandler(el, state) {
+function createHandler(el, state, handler) {
   return (e2) => {
-    const result = processPaste(e2, {
-      digits: state.digits,
-      formatter: state.formatter
-    });
+    const result = handler(e2, state);
     if (!result) return;
-    state.digits = result.newDigits;
-    updateDisplay(el, state);
+    updateDigits(el, state, result.newDigits);
     vue.nextTick(() => {
       const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
       setCaret(el, pos);
     });
   };
 }
-async function updateCountry(el, state, newCountryCode) {
-  const newCountry = getCountry(newCountryCode, state.locale);
+async function detectInitialCountry(options) {
+  const countryOption = parseCountryCode(options.country);
+  if (countryOption) return countryOption;
+  if (options.detect) {
+    const geoCountry = parseCountryCode(await detectByGeoIp());
+    if (geoCountry) return geoCountry;
+    const localeCountry = parseCountryCode(detectCountryFromLocale());
+    if (localeCountry) return localeCountry;
+  }
+  return "US";
+}
+function setCountry(el, state, newCountryCode) {
+  const parsed = parseCountryCode(newCountryCode);
+  if (!parsed) return;
+  const newCountry = getCountry(parsed, state.locale);
   state.country = newCountry;
+  state.options.onCountryChange?.(newCountry);
   state.formatter = createPhoneFormatter(newCountry);
   el.placeholder = state.formatter.getPlaceholder();
-  const maxDigits = state.formatter.getMaxDigits();
-  if (state.digits.length > maxDigits) {
-    state.digits = state.digits.slice(0, maxDigits);
-  }
-  updateDisplay(el, state);
-  if (state.options.onCountryChange) {
-    state.options.onCountryChange(newCountry);
-  }
+  checkDigitsUpdate(el, state);
 }
 const vPhoneMask = {
-  async mounted(el, binding) {
+  mounted(el, binding) {
     if (el.tagName !== "INPUT") {
       console.warn("[v-phone-mask] Directive can only be used on input elements");
       return;
     }
     el.setAttribute("type", "tel");
     el.setAttribute("inputmode", "tel");
-    const state = await initState(binding);
+    el.setAttribute("placeholder", "");
+    const options = parseParams(binding.value);
+    const locale = options.locale || getNavigatorLang();
+    const country = getCountry(parseCountryCode(options.country, "US"), locale);
+    const state = {
+      country,
+      formatter: createPhoneFormatter(country),
+      digits: "",
+      locale,
+      options
+    };
     el.__phoneMaskState = state;
-    state.inputHandler = createInputHandler(el, state);
-    state.keydownHandler = createKeydownHandler(el, state);
-    state.pasteHandler = createPasteHandler(el, state);
+    state.inputHandler = createHandler(el, state, processInput);
+    state.keydownHandler = createHandler(el, state, processKeydown);
+    state.pasteHandler = createHandler(el, state, processPaste);
     state.beforeInputHandler = processBeforeInput;
     el.addEventListener("beforeinput", state.beforeInputHandler);
     el.addEventListener("input", state.inputHandler);
     el.addEventListener("keydown", state.keydownHandler);
     el.addEventListener("paste", state.pasteHandler);
-    el.setAttribute("placeholder", state.formatter.getPlaceholder());
-    if (state.options.onCountryChange) {
-      state.options.onCountryChange(state.country);
-    }
-    if (el.value) {
-      const maxDigits = state.formatter.getMaxDigits();
-      state.digits = extractDigits(el.value, maxDigits);
-      updateDisplay(el, state);
-    }
+    detectInitialCountry(options).then((countryCode) => {
+      if (el.__phoneMaskState !== state) return;
+      setCountry(el, state, countryCode);
+    });
   },
-  async updated(el, binding) {
+  updated(el, binding) {
     const state = el.__phoneMaskState;
     if (!state) return;
-    const value = binding.value;
-    let newOptions = {};
-    if (typeof value === "string") {
-      newOptions = { country: value };
-    } else if (typeof value === "object" && value !== null) {
-      newOptions = value;
-    }
-    const oldCountry = state.options.country;
-    state.options = newOptions;
-    const newCountry = newOptions.country;
-    if (newCountry && newCountry !== oldCountry) {
-      await updateCountry(el, state, newCountry);
-    }
-    const maxDigits = state.formatter.getMaxDigits();
-    const newDigits = extractDigits(el.value, maxDigits);
-    const normalizedDisplay = state.formatter.formatDisplay(newDigits);
-    if (newDigits !== state.digits || el.value !== normalizedDisplay) {
-      state.digits = newDigits;
-      updateDisplay(el, state);
-    }
+    state.options = parseParams(binding.value);
+    checkCountryUpdate(el, state);
+    checkDigitsUpdate(el, state);
   },
   unmounted(el) {
     const state = el.__phoneMaskState;
@@ -1250,7 +1200,7 @@ const vPhoneMask = {
 };
 function usePhoneMask(options) {
   const inputRef = vue.shallowRef(null);
-  const { country, setCountry } = useCountry({
+  const { country, setCountry: setCountry2 } = useCountry({
     country: options.country,
     locale: options.locale,
     detect: options.detect,
@@ -1314,13 +1264,14 @@ function usePhoneMask(options) {
   return {
     inputRef,
     digits,
+    formatter,
     full,
     fullFormatted,
     isComplete,
     isEmpty,
     shouldShowWarn,
     country,
-    setCountry,
+    setCountry: setCountry2,
     clear
   };
 }
@@ -1345,4 +1296,4 @@ exports.default = index;
 exports.install = install;
 exports.usePhoneMask = usePhoneMask;
 exports.vPhoneMask = vPhoneMask;
-exports.vPhoneMaskSetCountry = updateCountry;
+exports.vPhoneMaskSetCountry = setCountry;