@desource/phone-mask-vue 0.3.0 → 1.1.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { computed, ref, nextTick, watch, defineComponent, useSlots, useModel, useTemplateRef, shallowRef, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, withCtx, createBlock, Teleport, withDirectives, withKeys, withModifiers, isRef, vModelText, Fragment, renderList, mergeModels } from "vue";
+import { computed, toValue, ref, watchEffect, onUnmounted, nextTick, shallowRef, watch, onBeforeUnmount, onBeforeMount, defineComponent, useSlots, useModel, useTemplateRef, getCurrentInstance, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, withCtx, createBlock, Teleport, Fragment, renderList, mergeModels, onMounted } from "vue";
 const M = { AC: "+247 #####", AD: ["+376 ### ###", "+376 #### ####"], AE: ["+971 # ### ####", "+971 ## ### ####", "+971 ### ######", "+971 ### # #####"], AF: "+93 ## ### ####", AG: "+1 ###-###-####", AI: "+1 ###-###-####", AL: ["+355 ## ### ###", "+355 ## ### ####", "+355 ### ####", "+355 ### ###", "+355 ### #####"], AM: ["+374 ## ######", "+374 ### ## ###"], AO: "+244 ### ### ###", AR: ["+54 ## ####-####", "+54 # ## ####-####", "+54 ###-###-####"], AS: "+1 ###-###-####", AT: ["+43 # #########", "+43 ### ######"], AU: ["+61 # #### ####", "+61 ### ### ###", "+61 #### ### ###", "+61 ## ### ##"], AW: "+297 ### ####", AX: ["+358 ## #######", "+358 ### ######"], AZ: ["+994 ## ### ## ##", "+994 ### ## ## ##"], BA: ["+387 ## ###-###", "+387 ## ### ###"], BB: "+1 ###-###-####", BD: ["+880 #-#######", "+880 ####-######", "+880 ###-#######"], BE: ["+32 ## ## ## ##", "+32 ### ## ## ##", "+32 ### ## ###"], BF: "+226 ## ## ## ##", BG: ["+359 # ### ###", "+359 ## ### ###", "+359 ### ## ###"], BH: "+973 #### ####", BI: "+257 ## ## ## ##", BJ: ["+229 ## ## ## ## ##", "+229 ## ## ## ##"], BL: "+590 ### ## ## ##", BM: "+1 ###-###-####", BN: "+673 ### ####", BO: ["+591 # #######", "+591 ########", "+591 ### ## ####"], BQ: "+599 ### ####", BR: ["+55 ## ####-####", "+55 ## #####-####", "+55 ### ## ####", "+55 ####-####"], BS: "+1 ###-###-####", BT: ["+975 # ### ###", "+975 ## ## ## ##"], BW: ["+267 ### ####", "+267 ## ### ###", "+267 #### ### ###", "+267 ## #####"], BY: ["+375 ### ##-##-##", "+375 ## ###-##-##", "+375 ### ### ####"], BZ: ["+501 ###-####", "+501 #-###-####-###"], CA: "+1 ###-###-####", CC: ["+61 # #### ####", "+61 ### ### ###", "+61 #### ### ###"], CD: ["+243 ## #####", "+243 ### ### ###"], CF: "+236 ## ## ## ##", CG: ["+242 ## ### ####", "+242 # #### ####"], CH: ["+41 ## ### ## ##", "+41 ### ### ###"], CI: ["+225 ## ## # #####", "+225 ## ## ## ####"], CK: "+682 ## ###", CL: ["+56 ### ### ###", "+56 # #### ####", "+56 ### ### ####", "+56 ## ### ####"], CM: ["+237 # ## ## ## ##", "+237 ## ## ## ##"], CN: ["+86 ## #### ####", "+86 ### #### ####", "+86 ### ### ####", "+86 ########"], CO: ["+57 ### #######", "+57 # ### #######"], CR: ["+506 #### ####", "+506 ###-###-####"], CU: ["+53 # #######", "+53 ### #######"], CV: "+238 ### ## ##", CW: ["+599 # ### ####", "+599 ### ####"], CX: ["+61 # #### ####", "+61 ### ### ###", "+61 #### ### ###"], CY: "+357 ## ######", CZ: "+420 ### ### ###", DE: ["+49 ## ######", "+49 #### #######", "+49 ### ##########", "+49 ### # ######", "+49 ### # ####", "+49 ### #### ####", "+49 ########"], DJ: "+253 ## ## ## ##", DK: "+45 ## ## ## ##", DM: "+1 ###-###-####", DO: "+1 ###-###-####", DZ: ["+213 ## ## ## ##", "+213 ### ## ## ##", "+213 ## ### ## ##"], EC: ["+593 #-###-####", "+593 ## ### ####", "+593 #### ### ####"], EE: ["+372 ### ####", "+372 #### ####", "+372 ## ## ####"], EG: ["+20 # ########", "+20 ## ########", "+20 ### ### ####"], EH: ["+212 # ## ## ## ##", "+212 ##-#######"], ER: "+291 # ### ###", ES: ["+34 ### ## ## ##", "+34 ### ### ###"], ET: "+251 ## ### ####", FI: ["+358 ## #######", "+358 ### ######"], FJ: ["+679 ### ####", "+679 #### ### ####"], FK: "+500 #####", FM: "+691 ### ####", FO: "+298 ######", FR: ["+33 # ## ## ## ##", "+33 ### ## ## ##"], GA: "+241 ## ## ## ##", GB: ["+44 ### ### ####", "+44 #### ######", "+44 ## #### ####"], GD: "+1 ###-###-####", GE: ["+995 ## ### ## ##", "+995 ### ## ## ##", "+995 ### ### ###"], GF: "+594 ### ## ## ##", GG: ["+44 #### ######", "+44 ### ### ####", "+44 ## #### ####"], GH: ["+233 ## ### ####", "+233 ### #####"], GI: ["+350 ### #####", "+350 ########"], GL: "+299 ## ## ##", GM: "+220 ### ####", GN: ["+224 ## ## ## ##", "+224 ### ## ## ##"], GP: "+590 ### ## ## ##", GQ: ["+240 ### ### ###", "+240 ### ######"], GR: ["+30 ## #### ####", "+30 ### ### ####"], GT: ["+502 #### ####", "+502 #### ### ####"], GU: "+1 ###-###-####", GW: ["+245 ### ### ###", "+245 ### ####"], GY: "+592 ### ####", HK: ["+852 #### ####", "+852 ### ### ###", "+852 ### ## ### ###"], HN: ["+504 ####-####", "+504 ###########"], HR: ["+385 # #### ###", "+385 ## ### ####", "+385 ### ### ###", "+385 ## ## ###", "+385 ## ### ###"], HT: "+509 ## ## ####", HU: ["+36 # ### ####", "+36 ## ### ####", "+36 ## ### ###"], ID: ["+62 ## #######", "+62 ###-###-###", "+62 ### #######", "+62 ### # ### ###", "+62 ### ### ####"], IE: ["+353 ## #####", "+353 ## ### ####", "+353 #### ### ###", "+353 ### ### ###"], IL: ["+972 #-###-####", "+972 ##-###-####", "+972 #-###-###-###"], IM: ["+44 #### ######", "+44 ### ### ####", "+44 ## #### ####"], IN: ["+91 ##### #####", "+91 #### ## ####", "+91 #### ### ### ###", "+91 #### ### ####"], IO: "+246 ### ####", IQ: ["+964 # ### ####", "+964 ### ### ####"], IR: ["+98 ## #### ####", "+98 ### ### ####"], IS: "+354 ### ####", IT: ["+39 ## #### ####", "+39 ### ### ####", "+39 ### ### ###"], JE: ["+44 #### ######", "+44 ### ### ####", "+44 ## #### ####"], JM: "+1 ###-###-####", JO: ["+962 # ### ####", "+962 # #### ####", "+962 ### #####", "+962 ## #######"], JP: ["+81 #-####-####", "+81 ##-####-####", "+81 ###-###-###", "+81 ##-###-####"], KE: ["+254 ## #######", "+254 ### ######", "+254 ### ### ###"], KG: ["+996 ### ### ###", "+996 ### ### # ##"], KH: ["+855 ## ### ###", "+855 #### ### ###"], KI: ["+686 #####", "+686 ########"], KM: "+269 ### ## ##", KN: "+1 ###-###-####", KP: ["+850 # ### ####", "+850 ### ### ####"], KR: ["+82 #-###-####", "+82 ##-####-####", "+82 ##-###-####"], KW: ["+965 #### ####", "+965 ### #####", "+965 #### ###"], KY: "+1 ###-###-####", KZ: ["+7 ##### # ## ##", "+7 ### ### ####", "+7 ### ###-##-##"], LA: ["+856 ## ### ###", "+856 ## ## ### ###"], LB: ["+961 # ### ###", "+961 ## ### ###"], LC: "+1 ###-###-####", LI: ["+423 ### ## ##", "+423 ### ### ###"], LK: ["+94 ### ### ###", "+94 ## ### ####"], LR: ["+231 ## ### ###", "+231 ## ### ####"], LS: "+266 #### ####", LT: ["+370 ### #####", "+370 ### ## ###"], LU: ["+352 ## ## ## ##", "+352 ### ### ###", "+352 ### ## ###"], LV: "+371 ## ### ###", LY: "+218 ##-#######", MA: ["+212 # ## ## ## ##", "+212 ##-#######"], MC: ["+377 ## ## ## ##", "+377 # ## ## ## ##"], MD: ["+373 ## ### ###", "+373 ### ## ###", "+373 ### #####"], ME: "+382 ## ### ###", MF: "+590 ### ## ## ##", MG: "+261 ## ## ### ##", MH: "+692 ###-####", MK: ["+389 # ### ####", "+389 ## ### ###", "+389 ### # ## ##"], ML: "+223 ## ## ## ##", MM: ["+95 # ### ###", "+95 # ### ####", "+95 ### ### ####"], MN: "+976 #### ####", MO: ["+853 #### ####", "+853 #### ###"], MP: "+1 ###-###-####", MQ: "+596 ### ## ## ##", MR: "+222 ## ## ## ##", MS: "+1 ###-###-####", MT: "+356 #### ####", MU: ["+230 #### ####", "+230 ### ####"], MV: ["+960 ###-####", "+960 ### ### ####"], MW: ["+265 # ### ###", "+265 ### ## ## ##"], MX: "+52 ### ### ####", MY: ["+60 #-#### ####", "+60 ##-### ####", "+60 #-###-##-####", "+60 ###-### ####"], MZ: ["+258 ## ### ###", "+258 ## ### ####", "+258 ### ### ###"], NA: ["+264 ## ### ###", "+264 ## ### ####", "+264 ### ### ###"], NC: "+687 ##.##.##", NE: ["+227 ## ## ## ##", "+227 ## ### ###"], NF: ["+672 ## ####", "+672 # #####"], NG: ["+234 #### ## ####", "+234 ### ### ####", "+234 ### #### ####"], NI: "+505 #### ####", NL: ["+31 ## ### ####", "+31 # ########", "+31 ### ####", "+31 ## #######"], NO: ["+47 ## ## ## ##", "+47 ### ## ###"], NP: ["+977 #-#######", "+977 ###-#######", "+977 ###########"], NR: "+674 ### ####", NU: ["+683 ####", "+683 ### ####"], NZ: ["+64 # ### ####", "+64 ## ### ####", "+64 ### ### ###"], OM: ["+968 ## ######", "+968 #### ####", "+968 ### #####"], PA: ["+507 ###-####", "+507 ####-####"], PE: ["+51 # #######", "+51 ### ### ###", "+51 ### #####"], PF: ["+689 ## ## ## ##", "+689 ### ## ## ##"], PG: ["+675 ### ####", "+675 #### ####"], PH: ["+63 # #### ####", "+63 ### ### ####", "+63 #### # ### ####"], PK: ["+92 ## ########", "+92 ### #######", "+92 ### ### ##", "+92 #### #####"], PL: ["+48 ## ### ## ##", "+48 ### ### ###"], PM: ["+508 ## ## ##", "+508 ### ## ## ##"], PR: "+1 ###-###-####", PS: ["+970 # ### ####", "+970 ### ### ###", "+970 #### ### ###"], PT: ["+351 ## ### ####", "+351 ### ### ###"], PW: "+680 ### ####", PY: ["+595 ## ### ####", "+595 ### ######", "+595 #### ### ####"], QA: ["+974 #### ####", "+974 ### ####"], RE: "+262 ### ## ## ##", RO: ["+40 ## ### ####", "+40 ### ### ###"], RS: ["+381 ## ######", "+381 ## #######", "+381 ### #####"], RU: "+7 ### ###-##-##", RW: "+250 ### ### ###", SA: ["+966 ## ### ####", "+966 ### ### ####", "+966 #### #####"], SB: ["+677 #####", "+677 ## #####"], SC: ["+248 # ### ###", "+248 #######"], SD: "+249 ## ### ####", SE: ["+46 # ## ## ##", "+46 ## ### ## ##", "+46 ## ## ## ##", "+46 ### ## ## ###"], SG: ["+65 #### ####", "+65 #### ### ####"], SH: "+290 #####", SI: ["+386 # ### ## ##", "+386 ## ### ###", "+386 ## ######", "+386 ### #####"], SJ: ["+47 ## ## ## ##", "+47 ### ## ###"], SK: ["+421 #/### ### ##", "+421 ### ### ###", "+421 #######"], SL: "+232 ## ######", SM: ["+378 #### ######", "+378 ## ## ## ##"], SN: ["+221 ## ### ## ##", "+221 ### ## ## ##"], SO: ["+252 # ######", "+252 # #######"], SR: ["+597 ###-###", "+597 ###-####", "+597 ##-##-##"], SS: "+211 ### ### ###", ST: "+239 ### ####", SV: ["+503 #### ####", "+503 ### ####"], SX: "+1 ###-###-####", SY: ["+963 ## ### ####", "+963 ### ### ###"], SZ: ["+268 #### ####", "+268 ##### ####"], TA: "+290 ####", TC: "+1 ###-###-####", TD: "+235 ## ## ## ##", TG: "+228 ## ## ## ##", TH: ["+66 # ### ####", "+66 ## ### ####", "+66 #### ### ###"], TJ: ["+992 ### ## ####", "+992 ## ### ####"], TK: "+690 ####", TL: ["+670 ### ####", "+670 #### ####"], TM: ["+993 ## ##-##-##", "+993 ## ######"], TN: "+216 ## ### ###", TO: ["+676 ##-###", "+676 ### ####", "+676 #### ###"], TR: ["+90 ### ### ## ##", "+90 ### ### ####"], TT: "+1 ###-###-####", TV: ["+688 ## ###", "+688 ## ####"], TW: ["+886 # #### ####", "+886 ### ### ###", "+886 ## ### ####", "+886 ## #### ####"], TZ: ["+255 ## ### ####", "+255 ### ### ###", "+255 ### ## ####"], UA: ["+380 #### #####", "+380 ## ### ####", "+380 ### ### ###"], UG: ["+256 ## #######", "+256 ### ######"], US: "+1 ###-###-####", UY: ["+598 #### ####", "+598 ## ### ###", "+598 ### ####"], UZ: "+998 ## ### ## ##", VA: ["+39 ## #### ####", "+39 ### ### ####", "+39 ### ### ###"], VC: "+1 ###-###-####", VE: "+58 ###-#######", VG: "+1 ###-###-####", VI: "+1 ###-###-####", VN: ["+84 ### #### ###", "+84 ### ### ###", "+84 #### ######", "+84 ## ### ## ##"], VU: ["+678 #####", "+678 ### ####"], WF: ["+681 ## ## ##", "+681 ### ## ## ##"], WS: ["+685 #####", "+685 ## #####", "+685 ### ###"], XK: ["+383 ## ### ###", "+383 ### #####"], YE: ["+967 # ### ###", "+967 ### ### ###"], YT: "+262 ### ## ## ##", ZA: ["+27 ## ### ####", "+27 ### ### ###"], ZM: ["+260 ### ### ###", "+260 ## #######", "+260 #########"], ZW: ["+263 ## #####", "+263 ## ### ####", "+263 ### ####", "+263 #### ######"] };
 const t$1 = /^[a-z]{2}$/i, countryCodeEmoji = (o2) => {
   if (!t$1.test(o2)) {
@@ -8,67 +8,92 @@ 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 t = Object.entries(M), divideMask = (e2) => e2.split(/ (.*)/s);
+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$1.size >= 10) {
+    for (const e3 of n$1.keys()) if (e3 !== o$1) {
+      n$1.delete(e3);
+      break;
+    }
+  }
+  return n$1.set(t2, r), r;
+}, s$1 = Object.entries(M), divideMask = (e2) => e2.split(/ (.*)/s);
 function getCodeAndMask(e2) {
-  let n = "", t2 = "";
+  let t2 = "", o2 = "";
   if (Array.isArray(e2)) {
-    const o2 = [];
-    for (const t3 of e2) {
-      const [e3, s2] = divideMask(t3);
-      n || (n = e3), o2.push(s2);
+    const n2 = [];
+    for (const o3 of e2) {
+      const [e3, s2] = divideMask(o3);
+      t2 || (t2 = e3), n2.push(s2);
     }
-    t2 = o2;
+    o2 = n2;
   } else {
-    const [o2, s2] = divideMask(e2);
-    n = o2, t2 = s2;
+    const [n2, s2] = divideMask(e2);
+    t2 = n2, o2 = s2;
   }
-  return [n, t2];
+  return [t2, o2];
 }
-t.map(([e2, n]) => ({ id: e2, mask: n }));
-t.reduce((e2, [n, t2]) => {
-  const [o2, s2] = getCodeAndMask(t2);
-  return e2[n] = { code: o2, mask: s2 }, e2;
+s$1.map(([e2, t2]) => ({ id: e2, mask: t2 }));
+s$1.reduce((e2, [t2, o2]) => {
+  const [n2, s2] = getCodeAndMask(o2);
+  return e2[t2] = { code: n2, mask: s2 }, e2;
 }, {});
-t.map(([e2, n]) => {
-  const [t2, o2] = getCodeAndMask(n);
-  return { id: e2, code: t2, mask: o2 };
+s$1.map(([e2, t2]) => {
+  const [o2, n2] = getCodeAndMask(t2);
+  return { id: e2, code: o2, mask: n2 };
 });
-t.reduce((e2, [t2, o2]) => {
-  const [s2, a] = getCodeAndMask(o2);
-  return e2[t2] = { code: s2, mask: a, flag: countryCodeEmoji(t2) }, e2;
+s$1.reduce((e2, [o2, n2]) => {
+  const [s2, r] = getCodeAndMask(n2);
+  return e2[o2] = { code: s2, mask: r, flag: countryCodeEmoji(o2) }, e2;
 }, {});
-t.map(([e2, t2]) => {
-  const [o2, s2] = getCodeAndMask(t2);
-  return { id: e2, code: o2, mask: s2, flag: countryCodeEmoji(e2) };
+s$1.map(([e2, o2]) => {
+  const [n2, s2] = getCodeAndMask(o2);
+  return { id: e2, code: n2, mask: s2, flag: countryCodeEmoji(e2) };
 });
 const MasksFullMap = (e2) => {
-  const o2 = new Intl.DisplayNames([e2], { type: "region" });
-  return t.reduce((e3, [t2, s2]) => {
-    const [a, r] = getCodeAndMask(s2), d = o2.of(t2) ?? "";
-    return e3[t2] = { code: a, mask: r, name: d, flag: countryCodeEmoji(t2) }, e3;
+  const o2 = getDisplayNames(e2);
+  return s$1.reduce((e3, [n2, s2]) => {
+    const [r, a] = getCodeAndMask(s2), d = o2.of(n2) ?? "";
+    return e3[n2] = { code: r, mask: a, name: d, flag: countryCodeEmoji(n2) }, e3;
   }, {});
 }, MasksFull = (e2) => {
-  const o2 = new Intl.DisplayNames([e2], { type: "region" });
-  return t.map(([e3, t2]) => {
-    const [s2, a] = getCodeAndMask(t2);
-    return { id: e3, code: s2, mask: a, name: o2.of(e3) ?? "", flag: countryCodeEmoji(e3) };
+  const o2 = getDisplayNames(e2);
+  return s$1.map(([e3, n2]) => {
+    const [s2, r] = getCodeAndMask(n2);
+    return { id: e3, code: s2, mask: r, name: o2.of(e3) ?? "", flag: countryCodeEmoji(e3) };
   });
-}, m = t.reduce((e2, [t2, o2]) => {
-  const [s2, a] = getCodeAndMask(o2), r = new Intl.DisplayNames(["en"], { type: "region" });
-  return e2[t2] = { code: s2, mask: a, name: r.of(t2) ?? "", flag: countryCodeEmoji(t2) }, e2;
-}, {}), i = t.map(([e2, t2]) => {
-  const [o2, s2] = getCodeAndMask(t2);
-  return { id: e2, code: o2, mask: s2, name: new Intl.DisplayNames(["en"], { type: "region" }).of(e2) ?? "", flag: countryCodeEmoji(e2) };
-}), g = countryCodeEmoji;
+}, f = MasksFullMap(o$1);
+MasksFull(o$1);
+const k = countryCodeEmoji;
 function getNavigatorLang() {
-  return "undefined" != typeof navigator && navigator.language || "en";
+  return globalThis.navigator?.language || "en";
 }
-function getMasksFullMapByLocale(e2) {
-  return e2.toLowerCase().startsWith("en") ? m : MasksFullMap(e2);
+function detectCountryFromLocale() {
+  try {
+    const t2 = getNavigatorLang();
+    try {
+      const r2 = new Intl.Locale(t2);
+      if (r2.region) return r2.region.toUpperCase();
+    } catch {
+    }
+    const r = t2.split(/[-_]/);
+    if (r.length > 1) return r[1]?.toUpperCase() || null;
+  } catch {
+  }
+  return null;
 }
-function getCountry(t2, n) {
-  const e2 = getMasksFullMapByLocale(n), r = t2.toUpperCase();
-  return r in e2 ? { id: r, ...e2[r] } : { id: "US", ...e2.US };
+function hasCountry(t2) {
+  const e2 = f;
+  return t2.toUpperCase() in e2;
+}
+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, r) {
+  return t2 && hasCountry(t2) ? t2.toUpperCase() : r || "";
 }
 function toArray(t2) {
   return Array.isArray(t2) ? t2 : [t2];
@@ -79,480 +104,478 @@ function countPlaceholders(t2) {
 function removeCountryCodePrefix(t2) {
   return t2.replace(/^\+\d+\s?/, "");
 }
-function pickMaskVariant(t2, n) {
+function pickMaskVariant(t2, r) {
+  if (!t2.length) return "";
   if (1 === t2.length) return t2[0];
-  const e2 = t2.map((t3) => ({ mask: t3, count: countPlaceholders(t3) })), r = e2.filter((t3) => t3.count >= n).sort((t3, n2) => t3.count - n2.count);
-  if (r.length > 0) return r[0].mask;
-  const o2 = e2.sort((t3, n2) => n2.count - t3.count)[0];
+  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 = e2.sort((t3, r2) => r2.count - t3.count)[0];
   return o2 ? o2.mask : t2[0];
 }
-function formatDigitsWithMap(t2, n) {
+function formatDigitsWithMap(t2, r) {
   let e2 = "";
-  const r = [];
+  const n2 = [];
   let o2 = 0;
-  const a = n.length, i2 = t2.length;
-  for (let u = 0; u < i2; u++) {
-    const i3 = t2[u];
-    if ("#" === i3) {
+  const a = r.length, s2 = t2.length;
+  for (let c = 0; c < s2; c++) {
+    const s3 = t2[c];
+    if ("#" === s3) {
       if (!(o2 < a)) break;
-      e2 += n[o2], r.push(o2), o2++;
+      e2 += r[o2], n2.push(o2), o2++;
     } else {
-      const n2 = -1 !== t2.indexOf("#", u + 1) && o2 < a;
-      (e2.length > 0 || n2) && (e2 += i3, r.push(-1));
+      const r2 = -1 !== t2.indexOf("#", c + 1) && o2 < a;
+      (e2.length > 0 || r2) && (e2 += s3, n2.push(-1));
+    }
+  }
+  return { display: e2, map: n2 };
+}
+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 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 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 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 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(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(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(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(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 };
     }
   }
-  return { display: e2, map: r };
+  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 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: () => 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 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 && (i2 = Math.min(i2, e3), l2 = Math.max(l2, e3));
+    }
+    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(e$1 = o, r = e) {
-  const c = new AbortController(), n = setTimeout(() => c.abort(), r);
+async function detectCountryFromGeoIP(t2 = o, r = e) {
+  const n2 = new AbortController(), c = setTimeout(() => n2.abort(), r);
   try {
-    const t2 = await fetch(e$1, { signal: c.signal, headers: { Accept: "application/json" } });
-    if (clearTimeout(n), !t2.ok) return null;
-    const o2 = await t2.json();
-    return (o2.country || o2.country_code || o2.countryCode || o2.country_code2 || "").toString().toUpperCase() || null;
+    const o2 = await fetch(t2, { signal: n2.signal, headers: { Accept: "application/json" } });
+    if (clearTimeout(c), !o2.ok) return null;
+    const e2 = await o2.json();
+    return (e2.country || e2.country_code || e2.countryCode || e2.country_code2 || "").toString().toUpperCase() || null;
   } catch {
-    return clearTimeout(n), null;
+    return clearTimeout(c), null;
   }
 }
-async function detectByGeoIp(t2) {
+async function detectByGeoIp() {
   try {
     const o3 = localStorage.getItem(p);
     if (o3) {
-      const c = JSON.parse(o3), n = Date.now() - c.ts > s;
-      if (!n && c.country_code && t2(c.country_code)) return c.country_code.toUpperCase();
-      n && localStorage.removeItem(p);
+      const e3 = JSON.parse(o3), c = Date.now() - e3.ts > s, a = parseCountryCode(e3.country_code);
+      if (a && !c) return a;
+      localStorage.removeItem(p);
     }
   } catch {
   }
-  const o2 = await detectCountryFromGeoIP();
-  if (o2 && t2(o2)) {
+  const o2 = await detectCountryFromGeoIP(), e2 = parseCountryCode(o2);
+  if (e2) {
     try {
-      localStorage.setItem(p, JSON.stringify({ country_code: o2, ts: Date.now() }));
+      const t2 = JSON.stringify({ country_code: e2, ts: Date.now() });
+      localStorage.setItem(p, t2);
     } catch {
     }
-    return o2;
+    return e2;
   }
   return null;
 }
-const emptyCountry = { id: "", code: "", mask: "", flag: "", name: "" };
-function useCountrySelector(usedLocale) {
-  const isEnLocale = computed(() => usedLocale.value.toLowerCase().startsWith("en"));
-  const countries = computed(() => isEnLocale.value ? i : MasksFull(usedLocale.value));
-  const countriesMap = computed(() => isEnLocale.value ? m : MasksFullMap(usedLocale.value));
-  const selectedId = ref(countries.value[0]?.id || "");
-  const dropdownOpened = ref(false);
-  const hasDropdown = ref(true);
-  const search = ref("");
-  const focusedIndex = ref(0);
-  const selected = computed(() => {
-    const id = selectedId.value;
-    const found = countriesMap.value[id];
-    return found ? { id, ...found } : countries.value[0] || emptyCountry;
-  });
-  const hasCountry = (id) => {
-    const _id = id.toUpperCase();
-    return !!countriesMap.value[_id];
+function useCountry({
+  country: countryOption,
+  locale: localeOption,
+  detect,
+  onCountryChange
+} = {}) {
+  const locale = computed(() => toValue(localeOption) || getNavigatorLang());
+  const countryCode = ref(parseCountryCode(toValue(countryOption), "US"));
+  const country = computed(() => getCountry(countryCode.value, locale.value));
+  const setCountry2 = (code) => {
+    const parsed = parseCountryCode(code);
+    if (parsed) {
+      countryCode.value = parsed;
+      return true;
+    }
+    return false;
+  };
+  const detectCountry = async () => {
+    const geoCountry = await detectByGeoIp();
+    if (setCountry2(geoCountry)) return;
+    const localeCountry = detectCountryFromLocale();
+    setCountry2(localeCountry);
   };
-  const filteredCountries = computed(() => {
-    const q = search.value.trim().toUpperCase();
-    if (!q) return countries.value;
-    const qCodeDigits = q.replace(/\D/g, "");
-    const isNumericSearch = qCodeDigits.length > 0;
-    return countries.value.map((c) => {
-      const nameUpper = c.name.toUpperCase();
-      const idUpper = c.id.toUpperCase();
-      const codeDigits = c.code.replace(/\D/g, "");
-      let score = 0;
-      if (nameUpper.startsWith(q)) score = 1e3;
-      else if (nameUpper.includes(q)) score = 500;
-      if (c.code.startsWith(q)) score += 100;
-      else if (c.code.includes(q)) score += 50;
-      if (idUpper === q) score += 200;
-      else if (idUpper.startsWith(q)) score += 150;
-      if (isNumericSearch && codeDigits.startsWith(qCodeDigits)) score += 80;
-      else if (isNumericSearch && codeDigits.includes(qCodeDigits)) score += 40;
-      return { country: c, score };
-    }).filter(({ score }) => score > 0).sort((a, b) => {
-      if (b.score !== a.score) return b.score - a.score;
-      return a.country.name.localeCompare(b.country.name);
-    }).map(({ country }) => country);
+  watchEffect(() => {
+    const newCountry = toValue(countryOption);
+    if (newCountry && newCountry !== countryCode.value) {
+      setCountry2(newCountry);
+    }
   });
-  const selectCountry = (id) => {
-    selectedId.value = id;
-    closeDropdown();
+  watchEffect(() => {
+    if (toValue(detect) && !toValue(countryOption)) {
+      detectCountry();
+    }
+  });
+  watchEffect(() => {
+    onCountryChange?.(country.value);
+  });
+  return { country, setCountry: setCountry2, locale };
+}
+function useFormatter({
+  country,
+  value,
+  onChange,
+  onPhoneChange,
+  onValidationChange
+}) {
+  const formatter = computed(() => createPhoneFormatter(toValue(country)));
+  const maxDigits = computed(() => formatter.value.getMaxDigits());
+  const digits = computed(() => extractDigits(toValue(value), maxDigits.value));
+  const displayPlaceholder = computed(() => formatter.value.getPlaceholder());
+  const displayValue = computed(() => formatter.value.formatDisplay(digits.value));
+  const full = computed(() => digits.value ? `${toValue(country).code}${digits.value}` : "");
+  const fullFormatted = computed(() => displayValue.value ? `${toValue(country).code} ${displayValue.value}` : "");
+  const isComplete = computed(() => formatter.value.isComplete(digits.value));
+  const isEmpty = computed(() => digits.value.length === 0);
+  const shouldShowWarn = computed(() => !isEmpty.value && !isComplete.value);
+  const phoneData = computed(() => ({
+    full: full.value,
+    fullFormatted: fullFormatted.value,
+    digits: digits.value
+  }));
+  watchEffect(() => {
+    if (toValue(value) !== digits.value) {
+      onChange(digits.value);
+    }
+  });
+  watchEffect(() => {
+    onPhoneChange?.(phoneData.value);
+  });
+  watchEffect(() => {
+    onValidationChange?.(isComplete.value);
+  });
+  return {
+    digits,
+    formatter,
+    displayPlaceholder,
+    displayValue,
+    full,
+    fullFormatted,
+    isComplete,
+    isEmpty,
+    shouldShowWarn
   };
-  const toggleDropdown = async (searchRef) => {
-    dropdownOpened.value = !dropdownOpened.value;
-    if (!dropdownOpened.value) return;
-    await nextTick();
-    searchRef.value?.focus({ preventScroll: true });
-    focusedIndex.value = 0;
+}
+function useTimer() {
+  let timerRef = null;
+  const clear = () => {
+    if (timerRef) {
+      clearTimeout(timerRef);
+      timerRef = null;
+    }
   };
-  const closeDropdown = () => {
-    dropdownOpened.value = false;
+  const set = (callback, delay) => {
+    clear();
+    timerRef = setTimeout(callback, delay);
   };
-  const focusNextOption = (scrollFn) => {
-    if (filteredCountries.value.length === 0) return;
-    focusedIndex.value = Math.min(filteredCountries.value.length - 1, focusedIndex.value + 1);
-    scrollFn?.();
+  onUnmounted(clear);
+  return { set, clear };
+}
+function useValidationHint() {
+  const showValidationHint = ref(false);
+  const validationTimer = useTimer();
+  const clearValidationHint = (hideHint = true) => {
+    if (hideHint) showValidationHint.value = false;
+    validationTimer.clear();
   };
-  const focusPrevOption = (scrollFn) => {
-    if (filteredCountries.value.length === 0) return;
-    focusedIndex.value = Math.max(0, focusedIndex.value - 1);
-    scrollFn?.();
+  const scheduleValidationHint = (delay) => {
+    showValidationHint.value = false;
+    validationTimer.set(() => {
+      showValidationHint.value = true;
+    }, delay);
   };
-  const chooseFocusedOption = () => {
-    const item = filteredCountries.value[focusedIndex.value];
-    if (item) selectCountry(item.id);
+  return { showValidationHint, clearValidationHint, scheduleValidationHint };
+}
+const HINT_DELAY_INPUT = 500;
+const HINT_DELAY_ACTION = 300;
+function useInputHandlers(options) {
+  const { formatter, digits, inactive, onChange, scheduleValidationHint } = options;
+  const scheduleCaretUpdate = (el, digitIndex) => {
+    nextTick(() => {
+      if (!el) return;
+      const pos = toValue(formatter).getCaretPosition(digitIndex);
+      setCaret(el, pos);
+    });
   };
-  const detectFromLocale = () => {
-    try {
-      const lang = getNavigatorLang();
-      try {
-        const loc = new Intl.Locale(lang);
-        if (loc.region && hasCountry(loc.region)) return loc.region.toUpperCase();
-      } catch {
-      }
-      const parts = lang.split(/[-_]/);
-      if (parts.length > 1 && hasCountry(parts[1])) return parts[1].toUpperCase();
-    } catch {
-    }
-    return null;
+  const handleBeforeInput = (e2) => {
+    processBeforeInput(e2);
   };
-  const selectInitialCountry = (id, emitFn) => {
-    const previousId = selectedId.value;
-    selectedId.value = id;
-    if (previousId !== selectedId.value && emitFn) nextTick(emitFn);
+  const handleInput = (e2) => {
+    if (toValue(inactive)) return;
+    const result = processInput(e2, { formatter: toValue(formatter) });
+    if (!result) return;
+    onChange?.(result.newDigits);
+    scheduleCaretUpdate(e2.target, result.caretDigitIndex);
+    scheduleValidationHint?.(HINT_DELAY_INPUT);
   };
-  const initCountry = async (predefined, detect, emitFn) => {
-    hasDropdown.value = !predefined && countries.value.length > 1;
-    if (predefined && hasCountry(predefined)) {
-      selectInitialCountry(predefined.toUpperCase(), emitFn);
-      return;
-    }
-    if (!detect) return;
-    const geo = await detectByGeoIp(hasCountry);
-    if (geo) {
-      selectInitialCountry(geo, emitFn);
-      return;
-    }
-    const loc = detectFromLocale();
-    if (loc) {
-      selectInitialCountry(loc, emitFn);
-      return;
-    }
+  const handleKeydown = (e2) => {
+    if (toValue(inactive)) return;
+    const result = processKeydown(e2, { digits: toValue(digits), formatter: toValue(formatter) });
+    if (!result) return;
+    onChange?.(result.newDigits);
+    scheduleCaretUpdate(e2.target, result.caretDigitIndex);
+    scheduleValidationHint?.(HINT_DELAY_ACTION);
+  };
+  const handlePaste = (e2) => {
+    if (toValue(inactive)) return;
+    const result = processPaste(e2, { digits: toValue(digits), formatter: toValue(formatter) });
+    if (!result) return;
+    onChange?.(result.newDigits);
+    scheduleCaretUpdate(e2.target, result.caretDigitIndex);
+    scheduleValidationHint?.(HINT_DELAY_ACTION);
   };
   return {
-    countries,
-    selectedId,
-    selected,
-    hasCountry,
-    // Dropdown
-    hasDropdown,
-    dropdownOpened,
-    search,
-    focusedIndex,
-    filteredCountries,
-    selectCountry,
-    toggleDropdown,
-    closeDropdown,
-    focusNextOption,
-    focusPrevOption,
-    chooseFocusedOption,
-    // Country Detection
-    initCountry
+    handleBeforeInput,
+    handleInput,
+    handleKeydown,
+    handlePaste
   };
 }
-function createPhoneFormatter(country) {
-  const variants = toArray(country.mask);
-  const variantsDigits = variants.map((m2) => countPlaceholders(removeCountryCodePrefix(m2)));
-  const maxDigits = Math.max(...variantsDigits);
-  const getMask = (digitLength) => {
-    const mask = pickMaskVariant(variants, digitLength);
-    return removeCountryCodePrefix(mask);
+function useCountrySelector({
+  rootRef,
+  dropdownRef,
+  searchRef,
+  selectorRef,
+  locale,
+  countryOption,
+  inactive,
+  onSelectCountry,
+  onAfterSelect
+}) {
+  const search = ref("");
+  const dropdownOpen = ref(false);
+  const dropdownStyle = shallowRef({});
+  const focusedIndex = ref(0);
+  const countries = computed(() => MasksFull(toValue(locale)));
+  const filteredCountries = computed(() => filterCountries(countries.value, search.value));
+  const hasDropdown = computed(() => !toValue(countryOption) && countries.value.length > 1);
+  const setFocusedIndex = (index2) => {
+    focusedIndex.value = index2;
   };
-  return {
-    formatDisplay: (digits) => {
-      const template = getMask(digits.length);
-      return formatDigitsWithMap(template, digits).display;
-    },
-    getMaxDigits: () => maxDigits,
-    getPlaceholder: () => {
-      const template = getMask(0);
-      return template;
-    },
-    getCaretPosition: (digitIndex) => {
-      const template = getMask(digitIndex);
-      const { display, map } = formatDigitsWithMap(template, "0".repeat(digitIndex));
-      for (let i2 = 0; i2 < map.length; i2++) {
-        if (map[i2] === digitIndex) return i2;
-      }
-      if (digitIndex >= map.length) return display.length;
-      for (let i2 = 0; i2 < map.length; i2++) {
-        if (map[i2] > digitIndex) return i2;
-      }
-      return display.length;
-    },
-    getDigitRange: (digits, selStart, selEnd) => {
-      const template = getMask(digits.length);
-      const { map } = formatDigitsWithMap(template, digits);
-      let min = Infinity;
-      let max = -Infinity;
-      for (let i2 = selStart; i2 < selEnd && i2 < map.length; i2++) {
-        const digitIdx = map[i2];
-        if (digitIdx !== void 0 && digitIdx >= 0) {
-          min = Math.min(min, digitIdx);
-          max = Math.max(max, digitIdx);
-        }
-      }
-      return min === Infinity ? null : [min, max + 1];
-    },
-    isComplete: (digits) => {
-      return variantsDigits.includes(digits.length);
+  const focusSearch = () => {
+    nextTick(() => searchRef.value?.focus({ preventScroll: true }));
+  };
+  const closeDropdown = () => {
+    dropdownOpen.value = false;
+  };
+  const openDropdown = () => {
+    dropdownOpen.value = true;
+    setFocusedIndex(0);
+    focusSearch();
+  };
+  const toggleDropdown = () => {
+    if (toValue(inactive) || !hasDropdown.value) return;
+    if (dropdownOpen.value) {
+      closeDropdown();
+    } else {
+      openDropdown();
     }
   };
-}
-function setCaret(el, position) {
-  if (!el) return;
-  try {
-    el.setSelectionRange(position, position);
-  } catch {
-  }
-}
-function extractDigits(value, maxLength) {
-  const digits = value.replace(/\D/g, "");
-  return maxLength ? digits.slice(0, maxLength) : digits;
-}
-function getSelection(el) {
-  if (!el) return [0, 0];
-  return [el.selectionStart ?? 0, el.selectionEnd ?? 0];
-}
-const Delimiters = [" ", "-", "(", ")"];
-const NavigationKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Tab"];
-const InvalidPattern = /[^\d\s\-()]/;
-function useMask(selected, telRef) {
-  const digits = ref("");
-  const displayValue = ref("");
-  const validationTimer = ref(null);
-  const showValidationHint = ref(false);
-  const formatter = computed(() => createPhoneFormatter(selected.value));
-  const displayPlaceholder = computed(() => formatter.value.getPlaceholder());
-  const isComplete = computed(() => formatter.value.isComplete(digits.value));
-  const isEmpty = computed(() => digits.value.length === 0);
-  const maxDigits = computed(() => formatter.value.getMaxDigits());
-  const shouldShowWarn = computed(() => showValidationHint.value && !isEmpty.value && !isComplete.value);
-  const fullFormatted = computed(() => {
-    if (!displayValue.value) return "";
-    return `${selected.value.code} ${displayValue.value}`;
-  });
-  const full = computed(() => {
-    if (!digits.value) return "";
-    return `${selected.value.code}${digits.value}`;
-  });
-  const updateDisplay2 = () => {
-    displayValue.value = formatter.value.formatDisplay(digits.value);
+  const selectCountry = (code) => {
+    onSelectCountry(code);
+    closeDropdown();
+    search.value = "";
+    setFocusedIndex(0);
+    onAfterSelect?.();
   };
-  const setCaretToDigitPosition = (digitIndex) => {
-    const pos = formatter.value.getCaretPosition(digitIndex);
-    setCaret(telRef.value, pos);
+  const handleSearchChange = (e2) => {
+    search.value = e2.target.value;
+    setFocusedIndex(0);
   };
-  const removeDigitsRange = (startIdx, endIdx) => {
-    if (startIdx >= endIdx) return;
-    digits.value = digits.value.slice(0, startIdx) + digits.value.slice(endIdx);
+  const onDocClick = (ev) => {
+    const target = ev.target;
+    const dropdownEl = dropdownRef.value;
+    const selectorEl = selectorRef.value;
+    if (!target) return;
+    if (dropdownEl?.contains(target)) return;
+    if (selectorEl?.contains(target)) return;
+    closeDropdown();
   };
-  const handleBeforeInput = (e2) => {
-    const el = e2.target;
-    if (!el) return;
-    const data = e2.data;
-    if (e2.inputType !== "insertText" || !data) return;
-    if (InvalidPattern.test(data) || data === " " && el.value.endsWith(" ")) {
-      e2.preventDefault();
-    }
+  const positionDropdown = (e2) => {
+    if (e2?.type === "scroll" && e2.target && dropdownRef.value?.contains(e2.target)) return;
+    if (!rootRef.value) return;
+    const rect = rootRef.value.getBoundingClientRect();
+    dropdownStyle.value = {
+      top: `${rect.bottom + globalThis.scrollY + 8}px`,
+      left: `${rect.left + globalThis.scrollX}px`,
+      width: `${rect.width}px`
+    };
   };
-  const handleInput = (e2) => {
-    const el = e2.target;
-    if (!el) return;
-    const newDigits = extractDigits(el.value, maxDigits.value);
-    showValidationHint.value = false;
-    if (validationTimer.value) {
-      clearTimeout(validationTimer.value);
-    }
-    digits.value = newDigits;
-    updateDisplay2();
-    if (newDigits.length > 0) {
-      validationTimer.value = setTimeout(() => {
-        showValidationHint.value = true;
-      }, 500);
-    }
+  const scrollFocusedIntoView = () => {
     nextTick(() => {
-      setCaretToDigitPosition(digits.value.length);
+      const list = dropdownRef.value?.lastElementChild;
+      const option = list?.children[focusedIndex.value];
+      if (!list || !option) return;
+      const listRect = list.getBoundingClientRect();
+      const optionRect = option.getBoundingClientRect();
+      let scrollAmount = 0;
+      if (optionRect.top < listRect.top) {
+        scrollAmount = list.scrollTop - (listRect.top - optionRect.top);
+      } else if (optionRect.bottom > listRect.bottom) {
+        scrollAmount = list.scrollTop + (optionRect.bottom - listRect.bottom);
+      } else {
+        return;
+      }
+      list.scrollTo({ top: scrollAmount, behavior: "smooth" });
     });
   };
-  const handleKeydownInternal = (e2) => {
-    const el = telRef.value ?? e2.target;
-    if (!el) return;
-    if (e2.ctrlKey || e2.metaKey || e2.altKey || NavigationKeys.includes(e2.key)) return;
-    const [selStart, selEnd] = getSelection(el);
-    if (e2.key === "Backspace") {
+  const handleSearchKeydown = (e2) => {
+    if (e2.key === "ArrowDown") {
       e2.preventDefault();
-      if (selStart !== selEnd) {
-        const range = formatter.value.getDigitRange(digits.value, selStart, selEnd);
-        if (range) {
-          const [start, end] = range;
-          removeDigitsRange(start, end);
-          updateDisplay2();
-          nextTick(() => setCaretToDigitPosition(start));
-        }
-        return;
-      }
-      if (selStart > 0) {
-        const displayStr = displayValue.value;
-        let prevPos = selStart - 1;
-        while (prevPos >= 0 && Delimiters.includes(displayStr[prevPos])) {
-          prevPos--;
-        }
-        if (prevPos >= 0) {
-          const range = formatter.value.getDigitRange(digits.value, prevPos, prevPos + 1);
-          if (range) {
-            const [start] = range;
-            removeDigitsRange(start, start + 1);
-            updateDisplay2();
-            nextTick(() => setCaretToDigitPosition(start));
-          }
-        }
-      }
-      return;
-    }
-    if (e2.key === "Delete") {
+      setFocusedIndex(Math.min(focusedIndex.value + 1, filteredCountries.value.length - 1));
+      scrollFocusedIntoView();
+    } else if (e2.key === "ArrowUp") {
       e2.preventDefault();
-      if (selStart !== selEnd) {
-        const range = formatter.value.getDigitRange(digits.value, selStart, selEnd);
-        if (range) {
-          const [start, end] = range;
-          removeDigitsRange(start, end);
-          updateDisplay2();
-          nextTick(() => setCaretToDigitPosition(start));
-        }
-        return;
-      }
-      if (selStart < displayValue.value.length) {
-        const range = formatter.value.getDigitRange(digits.value, selStart, selStart + 1);
-        if (range) {
-          const [start] = range;
-          removeDigitsRange(start, start + 1);
-          updateDisplay2();
-          nextTick(() => setCaretToDigitPosition(start));
-        }
-      }
-      return;
-    }
-    if (/^[0-9]$/.test(e2.key)) {
-      if (digits.value.length >= maxDigits.value) {
-        e2.preventDefault();
-      }
-      return;
-    }
-    if (e2.key.length === 1) {
+      setFocusedIndex(Math.max(focusedIndex.value - 1, 0));
+      scrollFocusedIntoView();
+    } else if (e2.key === "Enter" && filteredCountries.value[focusedIndex.value]) {
       e2.preventDefault();
+      selectCountry(filteredCountries.value[focusedIndex.value].id);
+    } else if (e2.key === "Escape") {
+      closeDropdown();
     }
   };
-  const handleKeydown = (e2) => {
-    showValidationHint.value = false;
-    if (validationTimer.value) {
-      clearTimeout(validationTimer.value);
-    }
-    handleKeydownInternal(e2);
-    if (validationTimer.value) clearTimeout(validationTimer.value);
-    validationTimer.value = setTimeout(() => {
-      if (!isComplete.value && !isEmpty.value) showValidationHint.value = true;
-    }, 300);
-  };
-  const handlePaste = (e2) => {
-    e2.preventDefault();
-    const text = e2.clipboardData?.getData("text") || "";
-    const pastedDigits = extractDigits(text, maxDigits.value);
-    if (pastedDigits.length === 0) return;
-    const el = telRef.value;
-    if (!el) return;
-    const [selStart, selEnd] = getSelection(el);
-    if (selStart !== selEnd) {
-      const range2 = formatter.value.getDigitRange(digits.value, selStart, selEnd);
-      if (range2) {
-        const [start, end] = range2;
-        const left2 = digits.value.slice(0, start);
-        const right2 = digits.value.slice(end);
-        digits.value = extractDigits(left2 + pastedDigits + right2, maxDigits.value);
-        updateDisplay2();
-        nextTick(() => setCaretToDigitPosition(start + pastedDigits.length));
-        return;
-      }
-    }
-    const range = formatter.value.getDigitRange(digits.value, selStart, selStart);
-    const insertIndex = range ? range[0] : digits.value.length;
-    const left = digits.value.slice(0, insertIndex);
-    const right = digits.value.slice(insertIndex);
-    digits.value = extractDigits(left + pastedDigits + right, maxDigits.value);
-    updateDisplay2();
-    if (validationTimer.value) clearTimeout(validationTimer.value);
-    validationTimer.value = setTimeout(() => {
-      if (!isComplete.value && !isEmpty.value) showValidationHint.value = true;
-    }, 300);
-    nextTick(() => setCaretToDigitPosition(insertIndex + pastedDigits.length));
+  const removeListeners = () => {
+    globalThis.removeEventListener("resize", positionDropdown);
+    globalThis.removeEventListener("scroll", positionDropdown, true);
+    globalThis.removeEventListener("click", onDocClick, true);
   };
-  const handleFocus = () => {
-    if (validationTimer.value) {
-      clearTimeout(validationTimer.value);
+  watch(hasDropdown, (dropdownExists) => {
+    if (!dropdownExists && dropdownOpen.value) {
+      closeDropdown();
     }
-  };
-  const clear = () => {
-    digits.value = "";
-    displayValue.value = "";
-    showValidationHint.value = false;
-    if (validationTimer.value) {
-      clearTimeout(validationTimer.value);
-      validationTimer.value = null;
-    }
-  };
-  watch(selected, () => {
-    if (digits.value.length > maxDigits.value) {
-      digits.value = digits.value.slice(0, maxDigits.value);
+  });
+  watch(dropdownOpen, (isOpen) => {
+    if (!isOpen) {
+      removeListeners();
+      return;
     }
-    updateDisplay2();
+    positionDropdown();
+    globalThis.addEventListener("resize", positionDropdown);
+    globalThis.addEventListener("scroll", positionDropdown, true);
+    globalThis.addEventListener("click", onDocClick, true);
   });
-  updateDisplay2();
+  onBeforeUnmount(removeListeners);
   return {
     // State
-    digits,
-    displayValue,
-    // Computed
-    displayPlaceholder,
-    isComplete,
-    isEmpty,
-    shouldShowWarn,
-    fullFormatted,
-    full,
-    // Handlers
-    handleBeforeInput,
-    handleInput,
-    handleKeydown,
-    handlePaste,
-    handleFocus,
-    // Methods
-    updateDisplayFromDigits: updateDisplay2,
-    clear
+    dropdownOpen,
+    search,
+    focusedIndex,
+    dropdownStyle,
+    // Derived
+    filteredCountries,
+    hasDropdown,
+    // Actions
+    openDropdown,
+    closeDropdown,
+    toggleDropdown,
+    selectCountry,
+    setFocusedIndex,
+    handleSearchChange,
+    handleSearchKeydown
   };
 }
-function useClipboard() {
+function useClipboard(delay = 1800) {
   const copied = ref(false);
   const isCopying = ref(false);
-  let copyTimer = null;
-  const clearTimer = () => {
-    if (copyTimer) {
-      clearTimeout(copyTimer);
-      copyTimer = null;
-    }
-  };
+  const copyTimer = useTimer();
   const copy = async (text) => {
     if (isCopying.value) return false;
     const trimmedText = text.trim();
@@ -561,11 +584,9 @@ function useClipboard() {
     try {
       await navigator.clipboard.writeText(trimmedText);
       copied.value = true;
-      clearTimer();
-      copyTimer = setTimeout(() => {
+      copyTimer.set(() => {
         copied.value = false;
-        copyTimer = null;
-      }, 1800);
+      }, delay);
       return true;
     } catch (err) {
       console.warn("Copy failed", err);
@@ -574,24 +595,74 @@ function useClipboard() {
       isCopying.value = false;
     }
   };
-  const onUnmount = () => {
-    clearTimer();
+  return { copied, isCopying, copy };
+}
+const DELAY = 1800;
+function useCopyAction({ liveRef, fullFormatted, onCopy }) {
+  const liveTimer = useTimer();
+  const { copied, copy } = useClipboard(DELAY);
+  const copyAriaLabel = computed(() => copied.value ? "Copied" : `Copy ${fullFormatted.value}`);
+  const copyButtonTitle = computed(() => copied.value ? "Copied" : "Copy phone number");
+  const announceToScreenReader = (message) => {
+    if (!liveRef?.value) return;
+    liveRef.value.textContent = message;
+    liveTimer.set(() => {
+      if (liveRef.value) liveRef.value.textContent = "";
+    }, DELAY);
+  };
+  const onCopyClick = async () => {
+    const valueToCopy = fullFormatted.value.trim();
+    const success = await copy(valueToCopy);
+    if (success) {
+      onCopy?.(valueToCopy);
+      announceToScreenReader("Phone number copied to clipboard");
+    }
+  };
+  return {
+    copied,
+    copyAriaLabel,
+    copyButtonTitle,
+    onCopyClick
   };
-  return { copied, isCopying, copy, onUnmount };
 }
-const _hoisted_1 = { class: "pi-selector" };
-const _hoisted_2 = ["disabled", "tabindex", "aria-label", "aria-expanded", "aria-haspopup"];
-const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = { class: "pi-code" };
-const _hoisted_5 = { class: "pi-input-wrap" };
-const _hoisted_6 = ["placeholder", "value", "disabled", "readonly", "aria-invalid"];
-const _hoisted_7 = {
+function useTheme({ theme }) {
+  const systemDark = ref(false);
+  const themeClass = computed(() => {
+    const resolvedTheme = 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;
+  };
+  onBeforeMount(() => {
+    mq = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
+    if (!mq) return;
+    systemDark.value = mq.matches;
+    mq.addEventListener("change", handler);
+  });
+  onBeforeUnmount(() => {
+    mq?.removeEventListener("change", handler);
+  });
+  return {
+    themeClass
+  };
+}
+const _hoisted_1 = ["disabled", "tabindex", "aria-label", "aria-expanded", "aria-haspopup"];
+const _hoisted_2 = ["aria-label"];
+const _hoisted_3 = { class: "pi-code" };
+const _hoisted_4 = { class: "pi-input-wrap" };
+const _hoisted_5 = ["placeholder", "value", "disabled", "readonly", "aria-invalid"];
+const _hoisted_6 = {
   class: "pi-actions",
   role: "toolbar",
   "aria-label": "Phone input actions"
 };
-const _hoisted_8 = ["aria-label", "title"];
-const _hoisted_9 = {
+const _hoisted_7 = ["aria-label", "title"];
+const _hoisted_8 = {
   key: 1,
   width: "16",
   height: "16",
@@ -599,7 +670,7 @@ const _hoisted_9 = {
   fill: "none",
   "aria-hidden": "true"
 };
-const _hoisted_10 = {
+const _hoisted_9 = {
   key: 2,
   width: "16",
   height: "16",
@@ -607,8 +678,8 @@ const _hoisted_10 = {
   fill: "none",
   "aria-hidden": "true"
 };
-const _hoisted_11 = ["aria-label", "title"];
-const _hoisted_12 = {
+const _hoisted_10 = ["aria-label", "title"];
+const _hoisted_11 = {
   key: 0,
   width: "11",
   height: "11",
@@ -616,14 +687,13 @@ const _hoisted_12 = {
   fill: "none",
   "aria-hidden": "true"
 };
-const _hoisted_13 = { class: "pi-search-wrap" };
-const _hoisted_14 = ["placeholder"];
-const _hoisted_15 = ["aria-activedescendant"];
-const _hoisted_16 = ["id", "aria-selected", "title", "onClick", "onMouseenter"];
-const _hoisted_17 = ["aria-label"];
-const _hoisted_18 = { class: "pi-opt-name" };
-const _hoisted_19 = { class: "pi-opt-code" };
-const _hoisted_20 = {
+const _hoisted_12 = { class: "pi-search-wrap" };
+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"
 };
@@ -646,238 +716,139 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dropdownClass: {},
     disableDefaultStyles: { type: Boolean, default: false }
   }, {
-    "modelValue": {},
+    "modelValue": { default: "" },
     "modelModifiers": {}
   }),
   emits: /* @__PURE__ */ mergeModels(["change", "country-change", "validation-change", "focus", "blur", "copy", "clear"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const slots = useSlots();
-    const model = useModel(__props, "modelValue");
     const emit = __emit;
+    const model = useModel(__props, "modelValue");
+    const onChange = (v) => {
+      model.value = v;
+    };
+    const { country, setCountry: setCountry2, locale } = useCountry({
+      country: () => props.country,
+      locale: () => props.locale,
+      detect: () => props.detect,
+      onCountryChange: (c) => emit("country-change", c)
+    });
+    const {
+      digits,
+      formatter,
+      displayPlaceholder,
+      displayValue,
+      full,
+      fullFormatted,
+      isComplete,
+      isEmpty,
+      shouldShowWarn
+    } = useFormatter({
+      country,
+      value: model,
+      onChange,
+      onPhoneChange: (data) => emit("change", data),
+      onValidationChange: (complete) => emit("validation-change", complete)
+    });
+    const { showValidationHint, clearValidationHint, scheduleValidationHint } = useValidationHint();
     const rootRef = useTemplateRef("rootRef");
     const telRef = useTemplateRef("telRef");
-    const searchRef = useTemplateRef("searchRef");
     const liveRef = useTemplateRef("liveRef");
     const dropdownRef = useTemplateRef("dropdownRef");
-    const usedLocale = computed(() => {
-      return props.locale || getNavigatorLang();
+    const searchRef = useTemplateRef("searchRef");
+    const selectorRef = useTemplateRef("selectorRef");
+    const dropdownId = getCurrentInstance()?.uid ?? 0;
+    const listboxId = `pi-options-${dropdownId}`;
+    const getOptionId = (idx) => `pi-option-${dropdownId}-${idx}`;
+    const inactive = computed(() => props.disabled || props.readonly);
+    const incomplete = computed(() => showValidationHint.value && shouldShowWarn.value);
+    const showCopyButton = computed(() => props.showCopy && !isEmpty.value && !props.disabled);
+    const showClearButton = computed(() => props.showClear && !isEmpty.value && !inactive.value);
+    const { copied, copyAriaLabel, copyButtonTitle, onCopyClick } = useCopyAction({
+      liveRef,
+      fullFormatted,
+      onCopy: (v) => emit("copy", v)
     });
-    const dropdownStyle = shallowRef({});
-    const countrySelector = useCountrySelector(usedLocale);
+    const focusInput = () => nextTick(() => telRef.value?.focus());
     const {
+      dropdownOpen,
       search,
-      filteredCountries,
       focusedIndex,
-      selected,
-      dropdownOpened,
+      dropdownStyle,
+      filteredCountries,
       hasDropdown,
-      focusNextOption,
-      focusPrevOption,
-      chooseFocusedOption,
-      closeDropdown
-    } = countrySelector;
-    const mask = useMask(selected, telRef);
-    const { digits, displayValue, displayPlaceholder, isComplete, isEmpty, shouldShowWarn, full, fullFormatted } = mask;
-    const { copied, copy, onUnmount: onClipboardUnmount } = useClipboard();
-    const inactive = computed(() => props.disabled || props.readonly);
-    const showCopyButton = computed(() => props.showCopy && !isEmpty.value && !props.disabled);
-    const showClearButton = computed(() => props.showClear && !isEmpty.value && !inactive.value);
-    const copyAriaLabel = computed(() => copied.value ? "Copied" : `Copy ${selected.value.code} ${displayValue.value}`);
-    const copyButtonTitle = computed(() => copied.value ? "Copied" : "Copy phone number");
-    const copyMessage = computed(() => copied.value ? "Phone number copied to clipboard" : "");
-    const sizeClass = computed(() => `size-${props.size}`);
-    const themeClass = computed(() => {
-      if (props.theme !== "auto") return `theme-${props.theme}`;
-      if (typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
-        return "theme-dark";
-      }
-      return "theme-light";
+      closeDropdown,
+      toggleDropdown,
+      selectCountry,
+      setFocusedIndex,
+      handleSearchChange,
+      handleSearchKeydown
+    } = useCountrySelector({
+      rootRef,
+      dropdownRef,
+      searchRef,
+      selectorRef,
+      locale,
+      countryOption: () => props.country,
+      inactive,
+      onSelectCountry: setCountry2,
+      onAfterSelect: focusInput
     });
-    const rootClasses = computed(() => [
-      "phone-input",
-      sizeClass.value,
-      themeClass.value,
-      {
-        "is-disabled": props.disabled,
-        "is-readonly": props.readonly,
-        "is-unstyled": props.disableDefaultStyles,
-        "is-incomplete": props.withValidity && shouldShowWarn.value,
-        "is-complete": props.withValidity && isComplete.value
-      }
-    ]);
-    const rootStyles = computed(() => ({
-      "--pi-actions-count": +showCopyButton.value + +showClearButton.value + (slots["actions-before"] ? 1 : 0)
-    }));
-    const emitModelUpdate = () => {
-      if (model.value === digits.value) return;
-      model.value = digits.value;
-      emit("change", {
-        full: full.value,
-        fullFormatted: fullFormatted.value,
-        digits: digits.value
-      });
-    };
-    const onInput = async (e2) => {
-      if (inactive.value) return;
-      mask.handleInput(e2);
-      await nextTick();
-      emitModelUpdate();
-    };
-    const onKeydown = async (e2) => {
-      if (inactive.value) return;
-      mask.handleKeydown(e2);
-      await nextTick();
-      emitModelUpdate();
-    };
-    const onPaste = async (e2) => {
-      if (inactive.value) return;
-      mask.handlePaste(e2);
-      await nextTick();
-      emitModelUpdate();
-    };
-    const onFocus = (e2) => {
-      mask.handleFocus();
-      dropdownOpened.value = false;
+    const activeOptionId = computed(
+      () => dropdownOpen.value && filteredCountries.value[focusedIndex.value] ? getOptionId(focusedIndex.value) : void 0
+    );
+    const { handleBeforeInput, handleInput, handleKeydown, handlePaste } = useInputHandlers({
+      formatter,
+      digits,
+      inactive,
+      onChange,
+      scheduleValidationHint
+    });
+    const handleFocus = (e2) => {
+      clearValidationHint(false);
+      closeDropdown();
       emit("focus", e2);
     };
-    const onBlur = (e2) => emit("blur", e2);
-    const onSelectCountry = async (countryId) => {
-      countrySelector.selectCountry(countryId);
-      emit("country-change", selected.value);
-      await nextTick();
-      telRef.value?.focus();
-    };
-    const onCopyClick = async () => {
-      const valueToCopy = fullFormatted.value;
-      const success = await copy(valueToCopy);
-      if (success) {
-        emit("copy", valueToCopy);
-      }
-    };
-    const onClearClick = async () => {
-      mask.clear();
-      model.value = "";
-      emit("change", {
-        full: "",
-        fullFormatted: "",
-        digits: ""
-      });
+    const handleBlur = (e2) => emit("blur", e2);
+    const clear = () => {
+      onChange("");
+      clearValidationHint();
       emit("clear");
-      await nextTick();
-      telRef.value?.focus();
-    };
-    const positionDropdown = (e2) => {
-      if (e2?.type === "scroll" && e2.target && dropdownRef.value?.contains(e2.target)) return;
-      const root = rootRef.value;
-      if (!root) return;
-      const rect = root.getBoundingClientRect();
-      dropdownStyle.value = {
-        top: `${rect.bottom + window.scrollY + 8}px`,
-        left: `${rect.left + window.scrollX}px`,
-        width: `${rect.width}px`
-      };
     };
-    const removeDropdownListeners = () => {
-      window.removeEventListener("scroll", positionDropdown, true);
-      window.removeEventListener("click", onDocClick, true);
-      window.removeEventListener("resize", positionDropdown);
+    const onClearClick = () => {
+      clear();
+      focusInput();
     };
-    const toggleDropdown = async () => {
-      if (inactive.value || !hasDropdown.value) return;
-      await countrySelector.toggleDropdown(searchRef);
-      if (dropdownOpened.value) {
-        positionDropdown();
-        window.addEventListener("scroll", positionDropdown, true);
-        window.addEventListener("click", onDocClick, true);
-        window.addEventListener("resize", positionDropdown);
-      } else {
-        removeDropdownListeners();
-      }
-    };
-    const scrollFocusedIntoView = async () => {
-      await nextTick();
-      const list = dropdownRef.value?.lastElementChild;
-      if (!list) return;
-      const option = list.children[focusedIndex.value];
-      if (!option) return;
-      const listRect = list.getBoundingClientRect();
-      const optionRect = option.getBoundingClientRect();
-      let scrollAmount = 0;
-      if (optionRect.top < listRect.top) {
-        scrollAmount = list.scrollTop - (listRect.top - optionRect.top);
-      } else if (optionRect.bottom > listRect.bottom) {
-        scrollAmount = list.scrollTop + (optionRect.bottom - listRect.bottom);
-      } else {
-        return;
-      }
-      list.scrollTo({ top: scrollAmount, behavior: "smooth" });
-    };
-    const onDocClick = (ev) => {
-      const dropdown = dropdownRef.value;
-      const selector = rootRef.value?.firstChild;
-      if (!(dropdown || selector)) return;
-      const target = ev.target;
-      if (!target || dropdown?.contains(target) || selector?.contains(target)) return;
-      dropdownOpened.value = false;
-    };
-    watch(
-      model,
-      (newValue) => {
-        if (!newValue) {
-          if (!isEmpty.value) mask.clear();
-          return;
-        }
-        const currentDigits = digits.value;
-        if (newValue !== currentDigits) {
-          const incomingDigits = newValue.replace(/\D/g, "");
-          if (incomingDigits !== currentDigits) {
-            digits.value = incomingDigits;
-            mask.updateDisplayFromDigits();
-          }
-        }
-      },
-      { immediate: true }
-    );
-    watch(
-      [() => props.country, () => props.detect],
-      async ([country, detect]) => {
-        await nextTick();
-        await countrySelector.initCountry(country, detect, () => emit("country-change", selected.value));
-      },
-      { immediate: true }
-    );
-    watch(
-      copyMessage,
-      (val) => {
-        if (liveRef.value && val) {
-          liveRef.value.textContent = val;
-        }
-      },
-      { flush: "post" }
-    );
-    watch(
-      isComplete,
-      (valid) => {
-        emit("validation-change", valid);
-      },
-      { flush: "post" }
-    );
-    onBeforeUnmount(() => {
-      removeDropdownListeners();
-      onClipboardUnmount();
-    });
     __expose({
-      focus: () => telRef.value?.focus(),
+      focus: focusInput,
       blur: () => telRef.value?.blur(),
-      clear: mask.clear,
-      selectCountry: countrySelector.selectCountry,
+      clear,
+      selectCountry,
       getFullNumber: () => full.value,
       getFullFormattedNumber: () => fullFormatted.value,
       getDigits: () => digits.value,
       isValid: () => isComplete.value,
       isComplete: () => isComplete.value
     });
+    const { themeClass } = useTheme({
+      theme: () => props.theme
+    });
+    const rootClasses = computed(() => [
+      "phone-input",
+      `size-${props.size}`,
+      themeClass.value,
+      {
+        "is-disabled": props.disabled,
+        "is-readonly": props.readonly,
+        "is-unstyled": props.disableDefaultStyles,
+        "is-incomplete": props.withValidity && incomplete.value,
+        "is-complete": props.withValidity && isComplete.value
+      }
+    ]);
+    const rootStyles = computed(() => ({
+      "--pi-actions-count": +showCopyButton.value + +showClearButton.value + (slots["actions-before"] ? 1 : 0)
+    }));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "rootRef",
@@ -887,36 +858,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(rootClasses.value),
         style: normalizeStyle(rootStyles.value)
       }, [
-        createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", {
+          ref_key: "selectorRef",
+          ref: selectorRef,
+          class: "pi-selector"
+        }, [
           createElementVNode("button", {
             type: "button",
             class: normalizeClass(["pi-selector-btn", { "no-dropdown": !unref(hasDropdown) || __props.readonly }]),
             disabled: __props.disabled,
             tabindex: inactive.value || !unref(hasDropdown) ? -1 : void 0,
-            "aria-label": `Selected country: ${unref(selected).name}`,
-            "aria-expanded": unref(dropdownOpened),
+            "aria-label": `Selected country: ${unref(country).name}`,
+            "aria-expanded": unref(dropdownOpen),
             "aria-haspopup": unref(hasDropdown) ? "listbox" : void 0,
-            onClick: toggleDropdown
+            onClick: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => unref(toggleDropdown) && unref(toggleDropdown)(...args))
           }, [
             createElementVNode("span", {
               class: "pi-flag",
               role: "img",
-              "aria-label": `${unref(selected).name} flag`
+              "aria-label": `${unref(country).name} flag`
             }, [
-              renderSlot(_ctx.$slots, "flag", { country: unref(selected) }, () => [
-                createTextVNode(toDisplayString(unref(selected).flag), 1)
+              renderSlot(_ctx.$slots, "flag", { country: unref(country) }, () => [
+                createTextVNode(toDisplayString(unref(country).flag), 1)
               ], true)
-            ], 8, _hoisted_3),
-            createElementVNode("span", _hoisted_4, toDisplayString(unref(selected).code), 1),
+            ], 8, _hoisted_2),
+            createElementVNode("span", _hoisted_3, toDisplayString(unref(country).code), 1),
             !inactive.value && unref(hasDropdown) ? (openBlock(), createElementBlock("svg", {
               key: 0,
-              class: normalizeClass(["pi-chevron", { "is-open": unref(dropdownOpened) }]),
+              class: normalizeClass(["pi-chevron", { "is-open": unref(dropdownOpen) }]),
               width: "12",
               height: "12",
               viewBox: "0 0 12 12",
               fill: "none",
               "aria-hidden": "true"
-            }, [..._cache[6] || (_cache[6] = [
+            }, [..._cache[8] || (_cache[8] = [
               createElementVNode("path", {
                 d: "M2.5 4.5L6 8L9.5 4.5",
                 stroke: "currentColor",
@@ -925,9 +901,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "stroke-linejoin": "round"
               }, null, -1)
             ])], 2)) : createCommentVNode("", true)
-          ], 10, _hoisted_2)
-        ]),
-        createElementVNode("div", _hoisted_5, [
+          ], 10, _hoisted_1)
+        ], 512),
+        createElementVNode("div", _hoisted_4, [
           createElementVNode("input", {
             ref_key: "telRef",
             ref: telRef,
@@ -942,16 +918,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             value: unref(displayValue),
             disabled: __props.disabled,
             readonly: __props.readonly,
-            "aria-invalid": unref(shouldShowWarn),
-            onBeforeinput: _cache[0] || (_cache[0] = //@ts-ignore
-            (...args) => unref(mask).handleBeforeInput && unref(mask).handleBeforeInput(...args)),
-            onInput,
-            onKeydown,
-            onPaste,
-            onFocus,
-            onBlur
-          }, null, 40, _hoisted_6),
-          createElementVNode("div", _hoisted_7, [
+            "aria-invalid": incomplete.value,
+            onBeforeinput: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => unref(handleBeforeInput) && unref(handleBeforeInput)(...args)),
+            onInput: _cache[2] || (_cache[2] = //@ts-ignore
+            (...args) => unref(handleInput) && unref(handleInput)(...args)),
+            onKeydown: _cache[3] || (_cache[3] = //@ts-ignore
+            (...args) => unref(handleKeydown) && unref(handleKeydown)(...args)),
+            onPaste: _cache[4] || (_cache[4] = //@ts-ignore
+            (...args) => unref(handlePaste) && unref(handlePaste)(...args)),
+            onFocus: handleFocus,
+            onBlur: handleBlur
+          }, null, 40, _hoisted_5),
+          createElementVNode("div", _hoisted_6, [
             createVNode(Transition, { name: "fade-scale" }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "actions-before", {}, void 0, true)
@@ -963,26 +942,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 showCopyButton.value ? (openBlock(), createElementBlock("button", {
                   key: 0,
                   type: "button",
-                  class: normalizeClass(["pi-btn", { "is-copied": unref(copied) }]),
-                  "aria-label": copyAriaLabel.value,
-                  title: copyButtonTitle.value,
-                  onClick: onCopyClick
+                  class: normalizeClass(["pi-btn", "pi-btn-copy", { "is-copied": unref(copied) }]),
+                  "aria-label": unref(copyAriaLabel),
+                  title: unref(copyButtonTitle),
+                  onClick: _cache[5] || (_cache[5] = //@ts-ignore
+                  (...args) => unref(onCopyClick) && unref(onCopyClick)(...args))
                 }, [
                   slots["copy-svg"] ? renderSlot(_ctx.$slots, "copy-svg", {
                     key: 0,
                     copied: unref(copied)
-                  }, void 0, true) : !unref(copied) ? (openBlock(), createElementBlock("svg", _hoisted_9, [..._cache[7] || (_cache[7] = [
+                  }, void 0, true) : !unref(copied) ? (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[9] || (_cache[9] = [
                     createElementVNode("path", {
                       d: "M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z",
                       fill: "currentColor"
                     }, null, -1)
-                  ])])) : (openBlock(), createElementBlock("svg", _hoisted_10, [..._cache[8] || (_cache[8] = [
+                  ])])) : (openBlock(), createElementBlock("svg", _hoisted_9, [..._cache[10] || (_cache[10] = [
                     createElementVNode("path", {
                       d: "M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z",
                       fill: "currentColor"
                     }, null, -1)
                   ])]))
-                ], 10, _hoisted_8)) : createCommentVNode("", true)
+                ], 10, _hoisted_7)) : createCommentVNode("", true)
               ]),
               _: 3
             }),
@@ -991,18 +971,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 showClearButton.value ? (openBlock(), createElementBlock("button", {
                   key: 0,
                   type: "button",
-                  class: "pi-btn",
+                  class: "pi-btn pi-btn-clear",
                   "aria-label": __props.clearButtonLabel,
                   title: __props.clearButtonLabel,
                   onClick: onClearClick
                 }, [
-                  !slots["clear-svg"] ? (openBlock(), createElementBlock("svg", _hoisted_12, [..._cache[9] || (_cache[9] = [
+                  !slots["clear-svg"] ? (openBlock(), createElementBlock("svg", _hoisted_11, [..._cache[11] || (_cache[11] = [
                     createElementVNode("path", {
                       d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",
                       fill: "currentColor"
                     }, null, -1)
                   ])])) : renderSlot(_ctx.$slots, "clear-svg", { key: 1 }, void 0, true)
-                ], 8, _hoisted_11)) : createCommentVNode("", true)
+                ], 8, _hoisted_10)) : createCommentVNode("", true)
               ]),
               _: 3
             })
@@ -1011,65 +991,55 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           createVNode(Transition, { name: "dropdown" }, {
             default: withCtx(() => [
-              unref(dropdownOpened) ? (openBlock(), createElementBlock("div", {
+              unref(dropdownOpen) ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 ref_key: "dropdownRef",
                 ref: dropdownRef,
-                class: normalizeClass(["phone-dropdown", [__props.dropdownClass, themeClass.value]]),
+                class: normalizeClass(["phone-dropdown", [__props.dropdownClass, unref(themeClass)]]),
                 role: "dialog",
                 "aria-modal": "false",
                 "aria-label": "Select country",
-                style: normalizeStyle(dropdownStyle.value)
+                style: normalizeStyle(unref(dropdownStyle))
               }, [
-                createElementVNode("div", _hoisted_13, [
-                  withDirectives(createElementVNode("input", {
+                createElementVNode("div", _hoisted_12, [
+                  createElementVNode("input", {
                     ref_key: "searchRef",
                     ref: searchRef,
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(search) ? search.value = $event : null),
+                    value: unref(search),
                     type: "search",
                     class: "pi-search",
                     "aria-label": "Search countries",
+                    "aria-controls": listboxId,
+                    "aria-activedescendant": activeOptionId.value,
                     placeholder: __props.searchPlaceholder,
-                    onKeydown: [
-                      _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(focusNextOption)(scrollFocusedIntoView), ["prevent"]), ["down"])),
-                      _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => unref(focusPrevOption)(scrollFocusedIntoView), ["prevent"]), ["up"])),
-                      _cache[4] || (_cache[4] = withKeys(withModifiers(
-                        //@ts-ignore
-                        (...args) => unref(chooseFocusedOption) && unref(chooseFocusedOption)(...args),
-                        ["prevent"]
-                      ), ["enter"])),
-                      _cache[5] || (_cache[5] = withKeys(
-                        //@ts-ignore
-                        (...args) => unref(closeDropdown) && unref(closeDropdown)(...args),
-                        ["escape"]
-                      ))
-                    ]
-                  }, null, 40, _hoisted_14), [
-                    [vModelText, unref(search)]
-                  ])
+                    onKeydown: _cache[6] || (_cache[6] = //@ts-ignore
+                    (...args) => unref(handleSearchKeydown) && unref(handleSearchKeydown)(...args)),
+                    onInput: _cache[7] || (_cache[7] = //@ts-ignore
+                    (...args) => unref(handleSearchChange) && unref(handleSearchChange)(...args))
+                  }, null, 40, _hoisted_13)
                 ]),
                 createElementVNode("ul", {
+                  id: listboxId,
                   class: "pi-options",
                   role: "listbox",
-                  "aria-activedescendant": `option-${unref(focusedIndex)}`,
                   tabindex: "-1"
                 }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filteredCountries), (c, idx) => {
                     return openBlock(), createElementBlock("li", {
-                      id: `option-${idx}`,
+                      id: getOptionId(idx),
                       key: c.id,
                       role: "option",
                       class: normalizeClass([
                         "pi-option",
                         {
                           "is-focused": idx === unref(focusedIndex),
-                          "is-selected": c.id === unref(selected).id
+                          "is-selected": c.id === unref(country).id
                         }
                       ]),
-                      "aria-selected": c.id === unref(selected).id,
+                      "aria-selected": c.id === unref(country).id,
                       title: c.name,
-                      onClick: ($event) => onSelectCountry(c.id),
-                      onMouseenter: ($event) => focusedIndex.value = idx
+                      onClick: ($event) => unref(selectCountry)(c.id),
+                      onMouseenter: ($event) => unref(setFocusedIndex)(idx)
                     }, [
                       createElementVNode("span", {
                         class: "pi-flag",
@@ -1079,13 +1049,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         renderSlot(_ctx.$slots, "flag", { country: c }, () => [
                           createTextVNode(toDisplayString(c.flag), 1)
                         ], true)
-                      ], 8, _hoisted_17),
-                      createElementVNode("span", _hoisted_18, toDisplayString(c.name), 1),
-                      createElementVNode("span", _hoisted_19, toDisplayString(c.code), 1)
-                    ], 42, _hoisted_16);
+                      ], 8, _hoisted_15),
+                      createElementVNode("span", _hoisted_16, toDisplayString(c.name), 1),
+                      createElementVNode("span", _hoisted_17, toDisplayString(c.code), 1)
+                    ], 42, _hoisted_14);
                   }), 128)),
-                  unref(filteredCountries).length === 0 ? (openBlock(), createElementBlock("li", _hoisted_20, toDisplayString(__props.noResultsText), 1)) : createCommentVNode("", true)
-                ], 8, _hoisted_15)
+                  unref(filteredCountries).length === 0 ? (openBlock(), createElementBlock("li", _hoisted_18, toDisplayString(__props.noResultsText), 1)) : createCommentVNode("", true)
+                ])
               ], 6)) : createCommentVNode("", true)
             ]),
             _: 3
@@ -1110,61 +1080,18 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-755b15ee"]]);
-function detectCountryFromLocale() {
-  try {
-    const lang = getNavigatorLang();
-    try {
-      const loc = new Intl.Locale(lang);
-      if (loc.region) return loc.region.toUpperCase();
-    } catch {
-    }
-    const parts = lang.split(/[-_]/);
-    if (parts.length > 1) return parts[1]?.toUpperCase() || null;
-  } catch {
-  }
-  return null;
+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 {};
 }
-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
-  };
-}
-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,
@@ -1172,207 +1099,92 @@ function updateDisplay(el, state) {
     });
   }
 }
-function createBeforeInputHandler(el) {
-  return (e2) => {
-    const data = e2.data;
-    if (e2.inputType !== "insertText" || !data) return;
-    if (InvalidPattern.test(data) || data === " " && el.value.endsWith(" ")) {
-      e2.preventDefault();
-    }
-  };
-}
-function createInputHandler(el, state) {
-  return (e2) => {
-    const target = e2.target;
-    if (!target) return;
-    const raw = target.value || "";
-    const maxDigits = state.formatter.getMaxDigits();
-    state.digits = extractDigits(raw, maxDigits);
-    updateDisplay(el, state);
-    nextTick(() => {
-      const pos = state.formatter.getCaretPosition(state.digits.length);
-      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) => {
-    if (e2.ctrlKey || e2.metaKey || e2.altKey || NavigationKeys.includes(e2.key)) return;
-    const [selStart, selEnd] = getSelection(el);
-    if (e2.key === "Backspace") {
-      e2.preventDefault();
-      if (selStart !== selEnd) {
-        const range = state.formatter.getDigitRange(state.digits, selStart, selEnd);
-        if (range) {
-          const [start, end] = range;
-          state.digits = state.digits.slice(0, start) + state.digits.slice(end);
-          updateDisplay(el, state);
-          nextTick(() => {
-            const pos = state.formatter.getCaretPosition(start);
-            setCaret(el, pos);
-          });
-        }
-        return;
-      }
-      if (selStart > 0) {
-        const displayStr = el.value;
-        let prevPos = selStart - 1;
-        while (prevPos >= 0 && Delimiters.includes(displayStr[prevPos])) {
-          prevPos--;
-        }
-        if (prevPos >= 0) {
-          const range = state.formatter.getDigitRange(state.digits, prevPos, prevPos + 1);
-          if (range) {
-            const [start] = range;
-            state.digits = state.digits.slice(0, start) + state.digits.slice(start + 1);
-            updateDisplay(el, state);
-            nextTick(() => {
-              const pos = state.formatter.getCaretPosition(start);
-              setCaret(el, pos);
-            });
-          }
-        }
-      }
-      return;
-    }
-    if (e2.key === "Delete") {
-      e2.preventDefault();
-      if (selStart !== selEnd) {
-        const range = state.formatter.getDigitRange(state.digits, selStart, selEnd);
-        if (range) {
-          const [start, end] = range;
-          state.digits = state.digits.slice(0, start) + state.digits.slice(end);
-          updateDisplay(el, state);
-          nextTick(() => {
-            const pos = state.formatter.getCaretPosition(start);
-            setCaret(el, pos);
-          });
-        }
-        return;
-      }
-      if (selStart < el.value.length) {
-        const range = state.formatter.getDigitRange(state.digits, selStart, selStart + 1);
-        if (range) {
-          const [start] = range;
-          state.digits = state.digits.slice(0, start) + state.digits.slice(start + 1);
-          updateDisplay(el, state);
-          nextTick(() => {
-            const pos = state.formatter.getCaretPosition(start);
-            setCaret(el, pos);
-          });
-        }
-      }
-      return;
-    }
-    if (/^[0-9]$/.test(e2.key)) {
-      if (state.digits.length >= state.formatter.getMaxDigits()) {
-        e2.preventDefault();
-      }
-      return;
-    }
-    if (e2.key.length === 1) {
-      e2.preventDefault();
-    }
-  };
+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) => {
-    e2.preventDefault();
-    const text = e2.clipboardData?.getData("text") || "";
-    const maxDigits = state.formatter.getMaxDigits();
-    const pastedDigits = extractDigits(text, maxDigits);
-    if (pastedDigits.length === 0) return;
-    const [selStart, selEnd] = getSelection(el);
-    if (selStart !== selEnd) {
-      const range2 = state.formatter.getDigitRange(state.digits, selStart, selEnd);
-      if (range2) {
-        const [start, end] = range2;
-        const left2 = state.digits.slice(0, start);
-        const right2 = state.digits.slice(end);
-        state.digits = extractDigits(left2 + pastedDigits + right2, maxDigits);
-        updateDisplay(el, state);
-        nextTick(() => {
-          const pos = state.formatter.getCaretPosition(start + pastedDigits.length);
-          setCaret(el, pos);
-        });
-        return;
-      }
-    }
-    const range = state.formatter.getDigitRange(state.digits, selStart, selStart);
-    const insertIndex = range ? range[0] : state.digits.length;
-    const left = state.digits.slice(0, insertIndex);
-    const right = state.digits.slice(insertIndex);
-    state.digits = extractDigits(left + pastedDigits + right, maxDigits);
-    updateDisplay(el, state);
+    const result = handler(e2, state);
+    if (!result) return;
+    updateDigits(el, state, result.newDigits);
     nextTick(() => {
-      const pos = state.formatter.getCaretPosition(insertIndex + pastedDigits.length);
+      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.beforeInputHandler = createBeforeInputHandler(el);
+    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 newDigits = extractDigits(el.value);
-    if (newDigits !== state.digits) {
-      state.digits = newDigits;
-      updateDisplay(el, state);
-    }
+    state.options = parseParams(binding.value);
+    checkCountryUpdate(el, state);
+    checkDigitsUpdate(el, state);
   },
   unmounted(el) {
     const state = el.__phoneMaskState;
@@ -1384,6 +1196,83 @@ const vPhoneMask = {
     delete el.__phoneMaskState;
   }
 };
+function usePhoneMask(options) {
+  const inputRef = shallowRef(null);
+  const { country, setCountry: setCountry2 } = useCountry({
+    country: options.country,
+    locale: options.locale,
+    detect: options.detect,
+    onCountryChange: options.onCountryChange
+  });
+  const {
+    digits,
+    formatter,
+    displayPlaceholder,
+    displayValue,
+    full,
+    fullFormatted,
+    isComplete,
+    isEmpty,
+    shouldShowWarn
+  } = useFormatter({
+    country,
+    value: options.value,
+    onChange: options.onChange,
+    onPhoneChange: options.onPhoneChange
+  });
+  const { handleBeforeInput, handleInput, handleKeydown, handlePaste } = useInputHandlers({
+    formatter,
+    digits,
+    onChange: options.onChange
+  });
+  onMounted(() => {
+    const el = inputRef.value;
+    if (!el) return;
+    el.setAttribute("type", "tel");
+    el.setAttribute("inputmode", "tel");
+  });
+  watchEffect(
+    () => {
+      const el = inputRef.value;
+      if (!el) return;
+      el.value = displayValue.value;
+      el.setAttribute("placeholder", displayPlaceholder.value);
+    },
+    { flush: "post" }
+  );
+  onMounted(() => {
+    const el = inputRef.value;
+    if (!el) return;
+    el.addEventListener("beforeinput", handleBeforeInput);
+    el.addEventListener("input", handleInput);
+    el.addEventListener("keydown", handleKeydown);
+    el.addEventListener("paste", handlePaste);
+  });
+  onUnmounted(() => {
+    const el = inputRef.value;
+    if (!el) return;
+    el.removeEventListener("beforeinput", handleBeforeInput);
+    el.removeEventListener("input", handleInput);
+    el.removeEventListener("keydown", handleKeydown);
+    el.removeEventListener("paste", handlePaste);
+  });
+  const clear = () => {
+    options.onChange("");
+  };
+  return {
+    inputRef,
+    digits,
+    formatter,
+    full,
+    fullFormatted,
+    isComplete,
+    isEmpty,
+    shouldShowWarn,
+    country,
+    setCountry: setCountry2,
+    clear
+  };
+}
 function install(app) {
   app.component("PhoneInput", PhoneInput);
   app.directive("phone-mask", vPhoneMask);
@@ -1392,7 +1281,7 @@ const index = {
   install
 };
 const PMaskHelpers = {
-  getFlagEmoji: g,
+  getFlagEmoji: k,
   countPlaceholders,
   formatDigitsWithMap,
   pickMaskVariant,
@@ -1404,6 +1293,7 @@ export {
   PhoneInput,
   index as default,
   install,
+  usePhoneMask,
   vPhoneMask,
-  updateCountry as vPhoneMaskSetCountry
+  setCountry as vPhoneMaskSetCountry
 };