@alikhalilll/ui 1.2.0 → 1.2.1

package/dist/chunks/{ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs → ATellInput.vue_vue_type_script_setup_true_lang-D7hPj1g1.mjs}

@@ -1,12 +1,12 @@
-import { ref as B, onMounted as ye, defineComponent as be, computed as C, watch as le, openBlock as M, createElementBlock as K, normalizeClass as G, unref as w, toDisplayString as D, renderSlot as h, createElementVNode as _, useModel as me, createBlock as Te, withCtx as U, createVNode as R, createCommentVNode as Z, withDirectives as He, vModelText as Ze, Fragment as pe, renderList as Se, mergeModels as De, useId as je, Transition as ke, createSlots as Je, normalizeProps as X, guardReactiveProps as ee } from "vue";
+import { ref as N, onMounted as be, defineComponent as _e, computed as C, watch as re, openBlock as B, createElementBlock as K, normalizeClass as V, unref as w, toDisplayString as M, renderSlot as h, createElementVNode as _, useModel as me, createBlock as he, withCtx as U, createVNode as F, createCommentVNode as H, withDirectives as He, vModelText as Ze, Fragment as pe, renderList as ke, mergeModels as De, useId as je, Transition as $e, createSlots as Je, normalizeProps as X, guardReactiveProps as ee } from "vue";
 import { useDebounceFn as Ye } from "@vueuse/core";
-import { ChevronDown as qe, Search as We, Check as $e, CheckCircle2 as Qe, AlertCircle as Xe } from "lucide-vue-next";
+import { ChevronDown as qe, Search as We, Check as xe, CheckCircle2 as Qe, AlertCircle as Xe } from "lucide-vue-next";
 import { isValidPhoneNumber as et, parsePhoneNumberFromString as de, getExampleNumber as tt } from "libphonenumber-js";
-import { c as z } from "./cn-B6yFEsav.mjs";
+import { c as R } from "./cn-B6yFEsav.mjs";
 import { c as ae, d as W, b as Me, D as Pe } from "./sizes-B_9MfLkz.mjs";
 import at from "libphonenumber-js/examples.mobile.json";
-import { cva as rt } from "class-variance-authority";
-import { _ as lt, b as nt, a as ot } from "./AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs";
+import { cva as lt } from "class-variance-authority";
+import { _ as rt, b as nt, a as ot } from "./AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-5YbO6FdM.mjs";
 const st = [
   { name: "arabic-indic", base: 1632 },
   // ٠١٢٣٤٥٦٧٨٩
@@ -18,35 +18,35 @@ const st = [
   // ০১২৩৪৫৬৭৮৯
 ], it = (() => {
   const t = /* @__PURE__ */ new Map();
-  for (const { base: l } of st)
-    for (let e = 0; e <= 9; e++) t.set(l + e, String(e));
+  for (const { base: r } of st)
+    for (let e = 0; e <= 9; e++) t.set(r + e, String(e));
   return t;
 })();
 function ce(t) {
-  const l = String(t ?? "");
+  const r = String(t ?? "");
   let e = "";
-  for (const o of l) {
+  for (const o of r) {
     const p = o.codePointAt(0);
     e += p != null && it.get(p) || o;
   }
   return e;
 }
-const xe = "ali_ui_phone_countries_v1", ut = "https://restcountries.com/v3.1/all?fields=name,cca2,idd,flags", ct = at, Ee = () => typeof window < "u";
+const Ee = "ali_ui_phone_countries_v1", ut = "https://restcountries.com/v3.1/all?fields=name,cca2,idd,flags", ct = at, Ie = () => typeof window < "u";
 function Q(t) {
   return ce(String(t ?? "")).replace(/\D/g, "");
 }
-function dt(t, l) {
-  if (!l) return t;
+function dt(t, r) {
+  if (!r) return t;
   try {
-    const e = new Intl.NumberFormat(l, { useGrouping: !1 });
+    const e = new Intl.NumberFormat(r, { useGrouping: !1 });
     return t.replace(/[0-9]/g, (o) => e.format(Number(o)));
   } catch {
     return t;
   }
 }
-function he(t) {
-  const l = Q(t);
-  return l ? `+${l}` : "";
+function ye(t) {
+  const r = Q(t);
+  return r ? `+${r}` : "";
 }
 function ue(t) {
   return String(t ?? "").trim().toUpperCase();
@@ -54,30 +54,30 @@ function ue(t) {
 function Ue(t) {
   return String(t ?? "").replace(/^0+/, "");
 }
-function re(t, l) {
-  const e = he(t), o = Ue(Q(l));
+function le(t, r) {
+  const e = ye(t), o = Ue(Q(r));
   return e && o ? `${e}${o}` : null;
 }
 function ft(t) {
-  const l = Q(t);
-  if (!l) return { min: null, max: null };
-  const e = l.length;
+  const r = Q(t);
+  if (!r) return { min: null, max: null };
+  const e = r.length;
   return { min: Math.max(4, e - 2), max: e + 2 };
 }
 function gt(t) {
-  const l = t?.root?.trim();
-  if (!l || !l.startsWith("+")) return null;
-  const e = t?.suffixes?.[0]?.trim() ?? "", o = `${l}${e}`;
+  const r = t?.root?.trim();
+  if (!r || !r.startsWith("+")) return null;
+  const e = t?.suffixes?.[0]?.trim() ?? "", o = `${r}${e}`;
   return o.startsWith("+") ? o : null;
 }
 function fe(t) {
   return String(t ?? "").toLowerCase().replace(/\s+/g, " ").trim().replace(/[^\p{L}\p{N}+ ]/gu, "");
 }
-function pt(t, l) {
-  if (!l) return t;
+function pt(t, r) {
+  if (!r) return t;
   let e;
   try {
-    e = new Intl.DisplayNames([l], { type: "region" });
+    e = new Intl.DisplayNames([r], { type: "region" });
   } catch {
     return t;
   }
@@ -99,17 +99,17 @@ function pt(t, l) {
     };
   });
 }
-function A(t, l, e) {
+function A(t, r, e) {
   const o = Q(e);
   return {
-    label: `${l} (+${o})`,
+    label: `${r} (+${o})`,
     value: t,
-    search_key: fe(`${l} +${o} ${t}`),
+    search_key: fe(`${r} +${o} ${t}`),
     raw_data: {
       iso2: t,
       dial_code: `+${o}`,
       dial_digits: o,
-      name: l,
+      name: r,
       flag: `https://flagcdn.com/w40/${t.toLowerCase()}.png`,
       source: "fallback",
       original: {}
@@ -141,7 +141,7 @@ const Le = [
   A("ID", "Indonesia", "+62")
 ];
 function Re() {
-  const t = B([]), l = B(!1), e = B(/* @__PURE__ */ new Map()), o = B(/* @__PURE__ */ new Map());
+  const t = N([]), r = N(!1), e = N(/* @__PURE__ */ new Map()), o = N(/* @__PURE__ */ new Map());
   function p(v) {
     const y = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map();
     for (const a of v) {
@@ -157,10 +157,10 @@ function Re() {
   function u(v) {
     t.value = v, p(v);
   }
-  function O(v) {
+  function z(v) {
     const y = [];
     for (const a of v) {
-      const c = a?.name?.common?.trim(), f = ue(a?.cca2), $ = gt(a?.idd), I = a?.flags?.png?.trim() || a?.flags?.svg?.trim() || null;
+      const c = a?.name?.common?.trim(), f = ue(a?.cca2), $ = gt(a?.idd), L = a?.flags?.png?.trim() || a?.flags?.svg?.trim() || null;
       if (!c || !f || !$) continue;
       const E = Q($), P = fe(`${c} ${$} ${f} ${E}`);
       y.push({
@@ -172,7 +172,7 @@ function Re() {
           dial_code: $,
           dial_digits: E,
           name: c,
-          flag: I,
+          flag: L,
           source: "restcountries",
           original: a
         }
@@ -193,9 +193,9 @@ function Re() {
   async function j(v) {
     const y = !!v?.force;
     if (!y && t.value.length) return t.value;
-    if (!y && Ee())
+    if (!y && Ie())
       try {
-        const g = localStorage.getItem(xe);
+        const g = localStorage.getItem(Ee);
         if (g) {
           const a = JSON.parse(g);
           if (Array.isArray(a) && a.length)
@@ -203,24 +203,24 @@ function Re() {
         }
       } catch {
       }
-    l.value = !0;
+    r.value = !0;
     try {
       const g = await fetch(ut);
       if (!g.ok) throw new Error(`Failed to fetch countries: ${g.status}`);
-      const a = await g.json(), c = O(a);
-      if (u(c.length ? c : Le), Ee())
+      const a = await g.json(), c = z(a);
+      if (u(c.length ? c : Le), Ie())
         try {
-          localStorage.setItem(xe, JSON.stringify(t.value));
+          localStorage.setItem(Ee, JSON.stringify(t.value));
         } catch {
         }
       return t.value;
     } catch {
       return u(Le), t.value;
     } finally {
-      l.value = !1;
+      r.value = !1;
     }
   }
-  function F(v, y = 50) {
+  function O(v, y = 50) {
     const g = fe(v);
     if (!g) return t.value.slice(0, y);
     const a = [];
@@ -232,17 +232,17 @@ function Re() {
   function Y(v) {
     return e.value.get(ue(v)) ?? null;
   }
-  function L(v) {
+  function I(v) {
     return o.value.get(Q(v)) ?? [];
   }
   function k(v, y) {
     const g = ue(v.iso2);
     if (!g) return null;
     try {
-      const a = tt(g, ct), c = a?.formatNational?.() ?? "", f = a?.format?.("E.164") ?? "", $ = ft(c), I = v.dial_code ? he(v.dial_code) : f ? `+${a?.countryCallingCode}` : "", E = Q(c);
+      const a = tt(g, ct), c = a?.formatNational?.() ?? "", f = a?.format?.("E.164") ?? "", $ = ft(c), L = v.dial_code ? ye(v.dial_code) : f ? `+${a?.countryCallingCode}` : "", E = Q(c);
       return {
         iso2: g,
-        dial_code: I,
+        dial_code: L,
         placeholder: "",
         example_national: c,
         example_e164: f,
@@ -269,7 +269,7 @@ function Re() {
       return {
         ok: !1,
         reason: "country_not_supported",
-        country: { iso2: g, dial_code: he(y.dial_code) },
+        country: { iso2: g, dial_code: ye(y.dial_code) },
         phone: { raw: ("phone" in v ? v.phone : null) ?? null, digits: "" },
         full_phone: null,
         required: null
@@ -299,19 +299,19 @@ function Re() {
         reason: "phone_has_non_digits",
         country: { iso2: a.iso2, dial_code: a.dial_code },
         phone: { raw: c, digits: f },
-        full_phone: re(a.dial_code, f),
+        full_phone: le(a.dial_code, f),
         required: a
       };
-    const $ = Ue(f), { min: I, max: E } = a.national_number_length;
-    if (I !== null && $.length < I)
+    const $ = Ue(f), { min: L, max: E } = a.national_number_length;
+    if (L !== null && $.length < L)
       return {
         ok: !1,
         reason: "too_short",
         country: { iso2: a.iso2, dial_code: a.dial_code },
         phone: { raw: c, digits: f },
-        full_phone: re(a.dial_code, f),
+        full_phone: le(a.dial_code, f),
         required: a,
-        details: { min: I, actual: $.length }
+        details: { min: L, actual: $.length }
       };
     if (E !== null && $.length > E)
       return {
@@ -319,11 +319,11 @@ function Re() {
         reason: "too_long",
         country: { iso2: a.iso2, dial_code: a.dial_code },
         phone: { raw: c, digits: f },
-        full_phone: re(a.dial_code, f),
+        full_phone: le(a.dial_code, f),
         required: a,
         details: { max: E, actual: $.length }
       };
-    const P = re(a.dial_code, f) ?? String(c);
+    const P = le(a.dial_code, f) ?? String(c);
     try {
       if (!et(P, g)) {
         const S = de(P, g);
@@ -341,34 +341,34 @@ function Re() {
           }
         };
       }
-      const V = de(P, g);
+      const G = de(P, g);
       return {
         ok: !0,
         reason: null,
         country: { iso2: a.iso2, dial_code: a.dial_code },
         phone: { raw: c, digits: f },
-        full_phone: V?.number ?? P,
+        full_phone: G?.number ?? P,
         required: a
       };
-    } catch (N) {
+    } catch (T) {
       return {
         ok: !1,
         reason: "parse_failed",
         country: { iso2: a.iso2, dial_code: a.dial_code },
         phone: { raw: c, digits: f },
-        full_phone: re(a.dial_code, f),
+        full_phone: le(a.dial_code, f),
         required: a,
-        details: { error: N?.message ?? String(N) }
+        details: { error: T?.message ?? String(T) }
       };
     }
   }
   return {
     countries: t,
-    isCountriesLoading: l,
+    isCountriesLoading: r,
     getCountries: j,
-    searchCountries: F,
+    searchCountries: O,
     getCountryByValue: Y,
-    getCountriesByDial: L,
+    getCountriesByDial: I,
     getRequiredInfo: k,
     validate: x
   };
@@ -471,20 +471,20 @@ function mt() {
 function ht() {
   if (!ne()) return null;
   try {
-    const l = (navigator.language ?? "").match(/^[a-z]{2,3}-([A-Z]{2})/);
-    return l ? l[1] : null;
+    const r = (navigator.language ?? "").match(/^[a-z]{2,3}-([A-Z]{2})/);
+    return r ? r[1] : null;
   } catch {
     return null;
   }
 }
-async function yt(t, l) {
+async function yt(t, r) {
   if (!ne() || typeof fetch != "function") return null;
-  const e = new AbortController(), o = setTimeout(() => e.abort(), l);
+  const e = new AbortController(), o = setTimeout(() => e.abort(), r);
   try {
     const p = await fetch(t, { signal: e.signal, credentials: "omit" });
     if (!p.ok) return null;
-    const u = await p.json(), O = (u.country_code ?? u.country ?? "").toString().toUpperCase();
-    return /^[A-Z]{2}$/.test(O) ? O : null;
+    const u = await p.json(), z = (u.country_code ?? u.country ?? "").toString().toUpperCase();
+    return /^[A-Z]{2}$/.test(z) ? z : null;
   } catch {
     return null;
   } finally {
@@ -500,7 +500,7 @@ function bt() {
     return null;
   }
 }
-function Ie(t) {
+function Be(t) {
   if (ne())
     try {
       sessionStorage.setItem(ze, t);
@@ -509,42 +509,42 @@ function Ie(t) {
 }
 async function Oe(t = {}) {
   const {
-    strategy: l = "auto",
+    strategy: r = "auto",
     ipEndpoint: e = "https://ipapi.co/json/",
     defaultCountry: o = "US",
     timeoutMs: p = 2e3,
     cache: u = !0
   } = t;
   if (u) {
-    const F = bt();
-    if (F) return F;
+    const O = bt();
+    if (O) return O;
   }
-  if (l === "none")
+  if (r === "none")
     return o.toUpperCase();
-  if (l === "auto") {
-    const F = await yt(e, p);
-    if (F)
-      return u && Ie(F), F;
+  if (r === "auto") {
+    const O = await yt(e, p);
+    if (O)
+      return u && Be(O), O;
   }
   const j = (mt() ?? ht() ?? o).toUpperCase();
-  return u && Ie(j), j;
+  return u && Be(j), j;
 }
 function da(t = {}) {
-  const l = B(null), e = B(!1);
+  const r = N(null), e = N(!1);
   async function o() {
     e.value = !0;
     try {
-      l.value = await Oe(t);
+      r.value = await Oe(t);
     } finally {
       e.value = !1;
     }
-    return l.value;
+    return r.value;
   }
-  return ye(() => {
+  return be(() => {
     o();
-  }), { country: l, isLoading: e, refresh: o };
+  }), { country: r, isLoading: e, refresh: o };
 }
-const _t = rt(
+const _t = lt(
   // items-center (not items-stretch) so #prefix/#suffix icons centre vertically without distortion.
   // The country trigger button and the input element both carry `h-full`, so they still fill the
   // field height regardless of this setting.
@@ -569,7 +569,7 @@ const _t = rt(
   too_long: "Phone number is too long.",
   invalid_phone: "Phone number is invalid.",
   parse_failed: "Could not parse phone number."
-}, Be = {
+}, Ne = {
   searchPlaceholder: "Search country or +code…",
   emptyText: "No countries found.",
   loadingText: "Loading countries…",
@@ -582,15 +582,15 @@ const _t = rt(
 };
 function wt(t) {
   return t ? {
-    ...Be,
+    ...Ne,
     ...t,
     errorMessages: { ...Fe, ...t.errorMessages }
-  } : Be;
+  } : Ne;
 }
-function Ct(t, l = 40) {
-  return `https://flagcdn.com/w${l}/${t.toLowerCase()}.png`;
+function Ct(t, r = 40) {
+  return `https://flagcdn.com/w${r}/${t.toLowerCase()}.png`;
 }
-const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
+const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ _e({
   __name: "ACountryFlag",
   props: {
     iso2: {},
@@ -601,40 +601,40 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
     class: { type: [Boolean, null, String, Object, Array] }
   },
   setup(t) {
-    const l = t, e = C(() => l.src ? l.src : l.iso2 ? (l.flagUrl ?? Ct)(l.iso2, l.width) : null), o = B(!1);
-    le(e, () => {
+    const r = t, e = C(() => r.src ? r.src : r.iso2 ? (r.flagUrl ?? Ct)(r.iso2, r.width) : null), o = N(!1);
+    re(e, () => {
       o.value = !1;
     });
-    const p = C(() => (l.iso2 ?? "").slice(0, 2).toUpperCase());
-    return (u, O) => e.value && !o.value ? (M(), K("img", {
+    const p = C(() => (r.iso2 ?? "").slice(0, 2).toUpperCase());
+    return (u, z) => e.value && !o.value ? (B(), K("img", {
       key: 0,
       src: e.value,
-      alt: l.alt ?? `${l.iso2} flag`,
+      alt: r.alt ?? `${r.iso2} flag`,
       loading: "lazy",
       "data-slot": "country-flag",
-      class: G(w(z)("ring-border/40 inline-block h-4 w-6 rounded-sm object-cover ring-1", l.class)),
-      onError: O[0] || (O[0] = (j) => o.value = !0)
-    }, null, 42, At)) : p.value ? (M(), K("span", {
+      class: V(w(R)("ring-border/40 inline-block h-4 w-6 rounded-sm object-cover ring-1", r.class)),
+      onError: z[0] || (z[0] = (j) => o.value = !0)
+    }, null, 42, At)) : p.value ? (B(), K("span", {
       key: 1,
       "data-slot": "country-flag-fallback",
-      "aria-label": l.alt ?? `${l.iso2} flag`,
-      class: G(
-        w(z)(
+      "aria-label": r.alt ?? `${r.iso2} flag`,
+      class: V(
+        w(R)(
           "ring-border/40 bg-muted text-muted-foreground inline-flex h-4 w-6 items-center justify-center rounded-sm text-[8px] font-semibold leading-none tracking-tight ring-1",
-          l.class
+          r.class
         )
       )
-    }, D(p.value), 11, St)) : h(u.$slots, "empty", { key: 2 }, () => [
+    }, M(p.value), 11, St)) : h(u.$slots, "empty", { key: 2 }, () => [
       _("span", {
         "data-slot": "country-flag-empty",
-        class: G(w(z)("bg-muted inline-block h-4 w-6 rounded-sm", l.class))
+        class: V(w(R)("bg-muted inline-block h-4 w-6 rounded-sm", r.class))
       }, null, 2)
     ]);
   }
-}), kt = ["disabled", "data-state", "aria-label"], $t = { class: "border-b p-1.5" }, xt = { class: "bg-muted/40 ring-border focus-within:ring-ring relative flex items-center rounded-md ring-1 transition-shadow focus-within:ring-2" }, Et = ["placeholder"], Lt = {
+}), kt = ["disabled", "data-state", "aria-label"], $t = { class: "border-border/70 border-b p-1.5" }, xt = { class: "bg-muted/40 ring-border/70 focus-within:ring-ring/50 relative flex items-center rounded-md ring-1 transition-shadow" }, Et = ["placeholder"], It = {
   key: 0,
   class: "bg-background text-muted-foreground border-border absolute top-1/2 end-2 hidden -translate-y-1/2 items-center gap-0.5 rounded border px-1.5 py-0.5 font-mono text-[10px] tracking-tight md:inline-flex"
-}, It = {
+}, Lt = {
   key: 1,
   class: "bg-background text-muted-foreground border-border absolute top-1/2 end-2 hidden -translate-y-1/2 rounded border px-1.5 py-0.5 font-mono text-[10px] tracking-tight md:inline-block"
 }, Bt = { class: "flex-1 overflow-y-auto" }, Nt = { class: "text-muted-foreground p-4 text-center text-sm" }, Tt = { class: "text-muted-foreground p-4 text-center text-sm" }, Dt = {
@@ -644,7 +644,7 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
 }, Mt = { class: "text-muted-foreground bg-popover sticky top-0 z-10 px-3 py-1.5 text-[10px] font-medium tracking-wider uppercase" }, Pt = ["aria-label"], Ut = ["aria-selected", "aria-disabled"], Rt = ["disabled", "data-selected", "onClick"], zt = { class: "flex-1 truncate" }, Ot = { class: "text-muted-foreground tabular-nums" }, Ft = {
   "data-slot": "country-select-group",
   "data-group": "all"
-}, Kt = { class: "text-muted-foreground bg-popover sticky top-0 z-10 px-3 py-1.5 text-[10px] font-medium tracking-wider uppercase" }, Gt = ["aria-label"], Vt = ["aria-selected", "aria-disabled"], Ht = ["disabled", "data-selected", "onClick"], Zt = { class: "flex-1 truncate" }, jt = { class: "text-muted-foreground tabular-nums" }, Ne = "ali_ui_country_recents_v1", Jt = /* @__PURE__ */ be({
+}, Kt = { class: "text-muted-foreground bg-popover sticky top-0 z-10 px-3 py-1.5 text-[10px] font-medium tracking-wider uppercase" }, Vt = ["aria-label"], Gt = ["aria-selected", "aria-disabled"], Ht = ["disabled", "data-selected", "onClick"], Zt = { class: "flex-1 truncate" }, jt = { class: "text-muted-foreground tabular-nums" }, Te = "ali_ui_country_recents_v1", Jt = /* @__PURE__ */ _e({
   __name: "ACountrySelect",
   props: /* @__PURE__ */ De({
     class: { type: [Boolean, null, String, Object, Array] },
@@ -675,16 +675,16 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
     selectedModifiers: {}
   }),
   emits: ["update:selected"],
-  setup(t, { expose: l }) {
+  setup(t, { expose: r }) {
     const e = t, o = C(
       () => `${Me[e.size]} ${W[e.size]}`
     ), p = me(t, "selected"), {
       countries: u,
-      isCountriesLoading: O,
+      isCountriesLoading: z,
       getCountries: j,
-      searchCountries: F,
+      searchCountries: O,
       getCountryByValue: Y
-    } = Re(), L = B(!1), k = B("");
+    } = Re(), I = N(!1), k = N("");
     j();
     const x = C(
       () => e.countries && e.countries.length ? e.countries : pt(u.value, e.locale)
@@ -694,11 +694,11 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
     function y(s) {
       return s ? v.value.get(s) ?? Y(s) : null;
     }
-    const g = B([]);
+    const g = N([]);
     function a() {
       if (!(typeof window > "u"))
         try {
-          const s = localStorage.getItem(Ne);
+          const s = localStorage.getItem(Te);
           if (!s) return;
           const m = JSON.parse(s);
           if (!Array.isArray(m)) return;
@@ -711,100 +711,100 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
       const m = [s, ...g.value.filter((n) => n !== s)].slice(0, 8);
       g.value = m;
       try {
-        localStorage.setItem(Ne, JSON.stringify(m));
+        localStorage.setItem(Te, JSON.stringify(m));
       } catch {
       }
     }
-    ye(a);
+    be(a);
     const f = C(() => k.value.trim().length > 0);
     function $(s, m) {
       return m.search_key.includes(s.toLowerCase());
     }
-    const I = C(() => {
+    const L = C(() => {
       if (!f.value) return [];
       if (!e.countries && !e.searcher && !e.locale)
-        return F(k.value, e.maxResults);
+        return O(k.value, e.maxResults);
       const s = k.value.trim(), m = e.searcher ?? $, n = [];
-      for (const H of x.value)
-        if (m(s, H) && (n.push(H), n.length >= e.maxResults))
+      for (const Z of x.value)
+        if (m(s, Z) && (n.push(Z), n.length >= e.maxResults))
           break;
       return n;
     }), E = C(() => {
       if (f.value) return [];
-      const s = /* @__PURE__ */ new Set(), m = [], n = (T) => {
-        if (!T || s.has(T)) return;
-        const se = y(T);
-        se && (s.add(T), m.push(se));
+      const s = /* @__PURE__ */ new Set(), m = [], n = (D) => {
+        if (!D || s.has(D)) return;
+        const se = y(D);
+        se && (s.add(D), m.push(se));
       };
       n(p.value);
-      const H = e.allowedDialCodes;
-      if (Array.isArray(H) && H.length > 0) {
-        for (const T of x.value)
-          H.includes(T.raw_data.dial_digits) && n(T.value);
+      const Z = e.allowedDialCodes;
+      if (Array.isArray(Z) && Z.length > 0) {
+        for (const D of x.value)
+          Z.includes(D.raw_data.dial_digits) && n(D.value);
         return m;
       }
-      for (const T of g.value)
-        if (n(T), m.length >= e.suggestedLimit) break;
+      for (const D of g.value)
+        if (n(D), m.length >= e.suggestedLimit) break;
       return m.slice(0, e.suggestedLimit);
-    }), P = C(() => f.value ? [] : x.value), N = C(() => y(p.value));
-    function V(s) {
+    }), P = C(() => f.value ? [] : x.value), T = C(() => y(p.value));
+    function G(s) {
       const m = e.allowedDialCodes;
       return !m || m.length === 0 ? !0 : m.includes(s.raw_data.dial_digits);
     }
     function S(s) {
-      V(s) && (p.value = s.value, c(s.value), L.value = !1);
+      G(s) && (p.value = s.value, c(s.value), I.value = !1);
     }
-    return le(L, (s) => {
+    return re(I, (s) => {
       s || (k.value = "");
-    }), l({
-      open: L,
-      setOpen: (s) => L.value = s,
+    }), r({
+      open: I,
+      setOpen: (s) => I.value = s,
       search: k,
       setSearch: (s) => k.value = s,
-      selectedCountry: N,
+      selectedCountry: T,
       selectCountry: S,
       countries: x,
       recents: g
-    }), (s, m) => (M(), Te(w(lt), {
-      open: L.value,
-      "onUpdate:open": m[1] || (m[1] = (n) => L.value = n)
+    }), (s, m) => (B(), he(w(rt), {
+      open: I.value,
+      "onUpdate:open": m[1] || (m[1] = (n) => I.value = n)
     }, {
       default: U(() => [
-        R(w(nt), { "as-child": "" }, {
+        F(w(nt), { "as-child": "" }, {
           default: U(() => [
             h(s.$slots, "trigger", {
-              selectedCountry: N.value,
-              open: L.value,
+              selectedCountry: T.value,
+              open: I.value,
               sizeClasses: o.value
             }, () => [
               _("button", {
                 type: "button",
                 disabled: e.disabled,
                 "data-slot": "country-select-trigger",
-                "data-state": L.value ? "open" : "closed",
-                class: G(
-                  w(z)(
+                "data-state": I.value ? "open" : "closed",
+                class: V(
+                  w(R)(
                     "bg-transparent hover:bg-muted focus-visible:bg-muted data-[state=open]:bg-muted focus-visible:ring-ring inline-flex h-full shrink-0 items-center gap-1.5 transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
                     o.value,
                     e.triggerClass
                   )
                 ),
-                "aria-label": N.value ? `${e.countryLabel}: ${N.value.raw_data.name}` : e.selectCountryLabel
+                "aria-label": T.value ? `${e.countryLabel}: ${T.value.raw_data.name}` : e.selectCountryLabel
               }, [
-                N.value ? h(s.$slots, "flag", {
+                T.value ? h(s.$slots, "flag", {
                   key: 0,
-                  country: N.value,
+                  country: T.value,
                   context: "trigger"
                 }, () => [
-                  R(ve, {
-                    iso2: N.value.raw_data.iso2,
-                    src: N.value.raw_data.flag,
+                  F(ve, {
+                    iso2: T.value.raw_data.iso2,
+                    src: T.value.raw_data.flag,
                     "flag-url": e.flagUrl
                   }, null, 8, ["iso2", "src", "flag-url"])
-                ]) : Z("", !0),
-                h(s.$slots, "chevron", { open: L.value }, () => [
-                  R(w(qe), {
-                    class: G(["text-muted-foreground size-3.5 shrink-0 transition-transform duration-200", L.value && "rotate-180"])
+                ]) : H("", !0),
+                h(s.$slots, "chevron", { open: I.value }, () => [
+                  F(w(qe), {
+                    class: V(["text-muted-foreground size-3.5 shrink-0 transition-transform duration-200", I.value && "rotate-180"])
                   }, null, 8, ["class"])
                 ])
               ], 10, kt)
@@ -812,15 +812,15 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
           ]),
           _: 3
         }),
-        R(w(ot), {
+        F(w(ot), {
           align: "end",
           "side-offset": 6,
-          class: G(w(z)("flex flex-col overflow-hidden p-0", e.contentClass)),
-          "popover-class": w(z)(
+          class: V(w(R)("flex flex-col overflow-hidden p-0", e.contentClass)),
+          "popover-class": w(R)(
             "w-[min(20rem,calc(100vw-2rem))] max-h-[min(22rem,var(--reka-popover-content-available-height))]",
             e.popoverClass
           ),
-          "drawer-class": w(z)("max-h-[80vh] pb-4", e.drawerClass)
+          "drawer-class": w(R)("max-h-[80vh] pb-4", e.drawerClass)
         }, {
           default: U(() => [
             h(s.$slots, "search", {
@@ -831,140 +831,140 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
               _("div", $t, [
                 _("div", xt, [
                   h(s.$slots, "search-icon", {}, () => [
-                    R(w(We), { class: "text-muted-foreground absolute top-1/2 start-2.5 size-3.5 -translate-y-1/2" })
+                    F(w(We), { class: "text-muted-foreground absolute top-1/2 start-2.5 size-3.5 -translate-y-1/2" })
                   ]),
                   He(_("input", {
                     "onUpdate:modelValue": m[0] || (m[0] = (n) => k.value = n),
                     type: "text",
                     "data-slot": "country-select-search",
                     placeholder: e.searchPlaceholder,
-                    class: "placeholder:text-muted-foreground h-8 w-full bg-transparent pe-14 ps-8 text-sm outline-none"
+                    class: "placeholder:text-muted-foreground h-10 w-full bg-transparent pe-14 ps-8 text-sm outline-none"
                   }, null, 8, Et), [
                     [Ze, k.value]
                   ]),
-                  !f.value && e.kbdOpen ? (M(), K("kbd", Lt, D(e.kbdOpen), 1)) : f.value && e.kbdClose ? (M(), K("kbd", It, D(e.kbdClose), 1)) : Z("", !0)
+                  !f.value && e.kbdOpen ? (B(), K("kbd", It, M(e.kbdOpen), 1)) : f.value && e.kbdClose ? (B(), K("kbd", Lt, M(e.kbdClose), 1)) : H("", !0)
                 ])
               ])
             ]),
             _("div", Bt, [
-              w(O) && x.value.length === 0 ? h(s.$slots, "loading", { key: 0 }, () => [
-                _("div", Nt, D(e.loadingText), 1)
-              ]) : f.value && I.value.length === 0 ? h(s.$slots, "empty", {
+              w(z) && x.value.length === 0 ? h(s.$slots, "loading", { key: 0 }, () => [
+                _("div", Nt, M(e.loadingText), 1)
+              ]) : f.value && L.value.length === 0 ? h(s.$slots, "empty", {
                 key: 1,
                 query: k.value
               }, () => [
-                _("div", Tt, D(e.emptyText), 1)
-              ]) : (M(), K(pe, { key: 2 }, [
-                E.value.length > 0 ? (M(), K("section", Dt, [
+                _("div", Tt, M(e.emptyText), 1)
+              ]) : (B(), K(pe, { key: 2 }, [
+                E.value.length > 0 ? (B(), K("section", Dt, [
                   h(s.$slots, "group-header", {
                     label: e.suggestedLabel,
                     group: "suggested"
                   }, () => [
-                    _("header", Mt, D(e.suggestedLabel), 1)
+                    _("header", Mt, M(e.suggestedLabel), 1)
                   ]),
                   _("ul", {
                     role: "listbox",
                     "aria-label": e.suggestedLabel,
                     class: "pb-1"
                   }, [
-                    (M(!0), K(pe, null, Se(E.value, (n) => (M(), K("li", {
+                    (B(!0), K(pe, null, ke(E.value, (n) => (B(), K("li", {
                       key: `s-${n.value}`,
                       role: "option",
                       "aria-selected": n.value === p.value,
-                      "aria-disabled": !V(n)
+                      "aria-disabled": !G(n)
                     }, [
                       h(s.$slots, "item", {
                         country: n,
                         selected: n.value === p.value,
-                        disabled: !V(n),
+                        disabled: !G(n),
                         select: () => S(n)
                       }, () => [
                         _("button", {
                           type: "button",
-                          disabled: !V(n),
+                          disabled: !G(n),
                           "data-slot": "country-select-item",
                           "data-selected": n.value === p.value ? "" : void 0,
                           class: "hover:bg-muted/60 focus-visible:bg-muted/60 data-[selected]:bg-muted flex w-full items-center gap-3 px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
-                          onClick: (H) => S(n)
+                          onClick: (Z) => S(n)
                         }, [
                           h(s.$slots, "flag", {
                             country: n,
                             context: "item"
                           }, () => [
-                            R(ve, {
+                            F(ve, {
                               iso2: n.raw_data.iso2,
                               src: n.raw_data.flag,
                               "flag-url": e.flagUrl
                             }, null, 8, ["iso2", "src", "flag-url"])
                           ]),
-                          _("span", zt, D(n.raw_data.name), 1),
-                          _("span", Ot, D(n.raw_data.dial_code), 1),
+                          _("span", zt, M(n.raw_data.name), 1),
+                          _("span", Ot, M(n.raw_data.dial_code), 1),
                           n.value === p.value ? h(s.$slots, "item-check", {
                             key: 0,
                             country: n
                           }, () => [
-                            R(w($e), { class: "text-foreground size-3.5 shrink-0" })
-                          ]) : Z("", !0)
+                            F(w(xe), { class: "text-foreground size-3.5 shrink-0" })
+                          ]) : H("", !0)
                         ], 8, Rt)
                       ])
                     ], 8, Ut))), 128))
                   ], 8, Pt)
-                ])) : Z("", !0),
+                ])) : H("", !0),
                 _("section", Ft, [
                   !f.value && P.value.length > 0 ? h(s.$slots, "group-header", {
                     key: 0,
                     label: e.allCountriesLabel,
                     group: "all"
                   }, () => [
-                    _("header", Kt, D(e.allCountriesLabel), 1)
-                  ]) : Z("", !0),
+                    _("header", Kt, M(e.allCountriesLabel), 1)
+                  ]) : H("", !0),
                   _("ul", {
                     role: "listbox",
                     "aria-label": f.value ? e.searchPlaceholder : e.allCountriesLabel,
                     class: "pb-1"
                   }, [
-                    (M(!0), K(pe, null, Se(f.value ? I.value : P.value, (n) => (M(), K("li", {
+                    (B(!0), K(pe, null, ke(f.value ? L.value : P.value, (n) => (B(), K("li", {
                       key: n.value,
                       role: "option",
                       "aria-selected": n.value === p.value,
-                      "aria-disabled": !V(n)
+                      "aria-disabled": !G(n)
                     }, [
                       h(s.$slots, "item", {
                         country: n,
                         selected: n.value === p.value,
-                        disabled: !V(n),
+                        disabled: !G(n),
                         select: () => S(n)
                       }, () => [
                         _("button", {
                           type: "button",
-                          disabled: !V(n),
+                          disabled: !G(n),
                           "data-slot": "country-select-item",
                           "data-selected": n.value === p.value ? "" : void 0,
                           class: "hover:bg-muted/60 focus-visible:bg-muted/60 data-[selected]:bg-muted flex w-full items-center gap-3 px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
-                          onClick: (H) => S(n)
+                          onClick: (Z) => S(n)
                         }, [
                           h(s.$slots, "flag", {
                             country: n,
                             context: "item"
                           }, () => [
-                            R(ve, {
+                            F(ve, {
                               iso2: n.raw_data.iso2,
                               src: n.raw_data.flag,
                               "flag-url": e.flagUrl
                             }, null, 8, ["iso2", "src", "flag-url"])
                           ]),
-                          _("span", Zt, D(n.raw_data.name), 1),
-                          _("span", jt, D(n.raw_data.dial_code), 1),
+                          _("span", Zt, M(n.raw_data.name), 1),
+                          _("span", jt, M(n.raw_data.dial_code), 1),
                           n.value === p.value ? h(s.$slots, "item-check", {
                             key: 0,
                             country: n
                           }, () => [
-                            R(w($e), { class: "text-foreground size-3.5 shrink-0" })
-                          ]) : Z("", !0)
+                            F(w(xe), { class: "text-foreground size-3.5 shrink-0" })
+                          ]) : H("", !0)
                         ], 8, Ht)
                       ])
-                    ], 8, Vt))), 128))
-                  ], 8, Gt)
+                    ], 8, Gt))), 128))
+                  ], 8, Vt)
                 ])
               ], 64))
             ])
@@ -978,7 +978,7 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
 }), Yt = ["dir"], qt = {
   class: "flex items-center gap-2",
   dir: "ltr"
-}, Wt = ["data-state"], Qt = ["value", "disabled", "placeholder", "aria-label", "aria-invalid", "aria-describedby"], Xt = ["id"], ea = "ali_ui_country_recents_v1", fa = /* @__PURE__ */ be({
+}, Wt = ["data-state"], Qt = ["value", "disabled", "placeholder", "aria-label", "aria-invalid", "aria-describedby"], Xt = ["id"], ea = "ali_ui_country_recents_v1", fa = /* @__PURE__ */ _e({
   __name: "ATellInput",
   props: /* @__PURE__ */ De({
     flagUrl: {},
@@ -1002,6 +1002,7 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
     messages: {},
     allowedDialCodes: {},
     showValidation: { type: Boolean },
+    showValidationIcon: { type: Boolean, default: !1 },
     detectCountry: { default: "auto" },
     defaultCountry: { default: "" },
     ipEndpoint: { default: "https://ipapi.co/json/" },
@@ -1018,10 +1019,10 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
     countryModifiers: {}
   }),
   emits: ["update:phone", "update:country"],
-  setup(t, { expose: l }) {
-    const e = t, o = me(t, "phone"), p = me(t, "country"), u = B(""), { getCountries: O, validate: j, getRequiredInfo: F, getCountryByValue: Y, getCountriesByDial: L } = Re();
-    O();
-    const k = B(!1), x = B(!1), v = {
+  setup(t, { expose: r }) {
+    const e = t, o = me(t, "phone"), p = me(t, "country"), u = N(""), { getCountries: z, validate: j, getRequiredInfo: O, getCountryByValue: Y, getCountriesByDial: I } = Re();
+    z();
+    const k = N(!1), x = N(!1), v = {
       1: "US",
       7: "RU",
       20: "EG",
@@ -1082,31 +1083,31 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
       973: "BH",
       974: "QA"
     };
-    function y(r) {
-      const d = String(r ?? "").trim();
+    function y(l) {
+      const d = String(l ?? "").trim();
       if (!d) return "";
       if (/^[A-Za-z]{2}$/.test(d)) return d.toUpperCase();
       const i = d.replace(/^\+/, "");
       if (!/^\d+$/.test(i)) return "";
-      const b = L(i)[0];
+      const b = I(i)[0];
       return b ? b.value : v[i] ?? "";
     }
-    const g = B(y(e.defaultCountry));
+    const g = N(y(e.defaultCountry));
     function a() {
       if (typeof window > "u") return [];
       try {
-        const r = localStorage.getItem(ea);
-        if (!r) return [];
-        const d = JSON.parse(r);
+        const l = localStorage.getItem(ea);
+        if (!l) return [];
+        const d = JSON.parse(l);
         return Array.isArray(d) ? d.filter((i) => typeof i == "string") : [];
       } catch {
         return [];
       }
     }
-    function c(r) {
-      if (!r) return null;
+    function c(l) {
+      if (!l) return null;
       try {
-        const i = de(`+${r}`);
+        const i = de(`+${l}`);
         if (i?.country && i.countryCallingCode) {
           const b = Y(i.country);
           if (b)
@@ -1115,9 +1116,9 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
       } catch {
       }
       const d = g.value;
-      if (d && r.length >= 4)
+      if (d && l.length >= 4)
         try {
-          const i = de(r, d);
+          const i = de(l, d);
           if (i?.isValid()) {
             const b = Y(i.country || d);
             if (b)
@@ -1125,19 +1126,19 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
           }
         } catch {
         }
-      for (let i = Math.min(3, r.length); i >= 1; i--) {
-        const b = r.slice(0, i), q = L(b);
+      for (let i = Math.min(3, l.length); i >= 1; i--) {
+        const b = l.slice(0, i), q = I(b);
         if (!q.length) continue;
-        const ie = r.slice(b.length);
+        const ie = l.slice(b.length);
         if (q.length === 1) return { country: q[0], nationalNumber: ie };
-        const Ce = u.value ? q.find((te) => te.value === u.value.toUpperCase()) : null;
-        if (Ce) return { country: Ce, nationalNumber: ie };
-        const Ae = a().map((te) => q.find((Ve) => Ve.value === te)).find((te) => !!te);
-        return Ae ? { country: Ae, nationalNumber: ie } : { country: q[0], nationalNumber: ie };
+        const Ae = u.value ? q.find((te) => te.value === u.value.toUpperCase()) : null;
+        if (Ae) return { country: Ae, nationalNumber: ie };
+        const Se = a().map((te) => q.find((Ge) => Ge.value === te)).find((te) => !!te);
+        return Se ? { country: Se, nationalNumber: ie } : { country: q[0], nationalNumber: ie };
       }
       return null;
     }
-    ye(async () => {
+    be(async () => {
       if (u.value) return;
       if (e.defaultCountry) {
         const b = y(e.defaultCountry);
@@ -1146,7 +1147,7 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
           return;
         }
       }
-      const r = {
+      const l = {
         strategy: e.detectCountry,
         ipEndpoint: e.ipEndpoint,
         defaultCountry: ""
@@ -1154,11 +1155,11 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
       let d;
       if (e.detector)
         try {
-          d = await e.detector(r);
+          d = await e.detector(l);
         } catch {
           d = null;
         }
-      d || (d = await Oe(r));
+      d || (d = await Oe(l));
       const i = d ? d.toUpperCase() : "";
       if (e.detectFromInput) {
         if (g.value = i, o.value && !k.value && !u.value) {
@@ -1169,52 +1170,52 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
       }
       !u.value && i && (x.value = !0, u.value = i);
     });
-    function f(r) {
-      if (!r) return null;
-      const i = Y(r)?.raw_data?.dial_digits ?? Object.entries(v).find(([, q]) => q === r)?.[0];
+    function f(l) {
+      if (!l) return null;
+      const i = Y(l)?.raw_data?.dial_digits ?? Object.entries(v).find(([, q]) => q === l)?.[0];
       if (!i) return null;
       const b = Number(i);
       return Number.isFinite(b) ? b : null;
     }
-    le(
+    re(
       p,
-      (r) => {
-        if (r == null) {
+      (l) => {
+        if (l == null) {
           u.value && (u.value = "");
           return;
         }
-        if (f(u.value) === r) return;
-        const d = y(String(r));
+        if (f(u.value) === l) return;
+        const d = y(String(l));
         d && (u.value = d);
       },
       { immediate: !0 }
-    ), le(
+    ), re(
       u,
-      (r, d) => {
+      (l, d) => {
         const i = x.value;
         x.value = !1;
-        const b = f(r);
-        p.value !== b && (p.value = b), !i && e.detectFromInput && r && d !== r && (k.value = !0);
+        const b = f(l);
+        p.value !== b && (p.value = b), !i && e.detectFromInput && l && d !== l && (k.value = !0);
       },
       { flush: "sync" }
     );
     const $ = Ye(
       () => {
         if (!e.detectFromInput || k.value || u.value) return;
-        const r = o.value;
-        if (!r) return;
-        const d = c(r);
+        const l = o.value;
+        if (!l) return;
+        const d = c(l);
         d && (x.value = !0, u.value = d.country.value, o.value = d.nationalNumber);
       },
       C(() => Math.max(0, e.detectDebounceMs))
-    ), I = B(String(o.value ?? ""));
+    ), L = N(String(o.value ?? ""));
     let E = !1;
-    function P(r) {
-      E = !0, o.value = r;
+    function P(l) {
+      E = !0, o.value = l;
     }
-    function N(r) {
-      const d = r.target;
-      I.value = d.value;
+    function T(l) {
+      const d = l.target;
+      L.value = d.value;
       const i = ce(d.value).replace(/\D/g, "");
       if (e.detectFromInput) {
         if (!i) {
@@ -1226,15 +1227,15 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
       }
       P(i);
     }
-    function V(r) {
-      const d = r.target;
-      I.value = ce(d.value).replace(/\D/g, "");
+    function G(l) {
+      const d = l.target;
+      L.value = ce(d.value).replace(/\D/g, "");
     }
-    le(
+    re(
       () => o.value,
-      (r) => {
-        const d = ce(String(r ?? "")).replace(/\D/g, "");
-        if (d !== r) {
+      (l) => {
+        const d = ce(String(l ?? "")).replace(/\D/g, "");
+        if (d !== l) {
           o.value = d;
           return;
         }
@@ -1242,80 +1243,82 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
           E = !1;
           return;
         }
-        I.value = d;
+        L.value = d;
       },
       { flush: "post" }
     );
     const S = C(() => wt(e.messages)), s = C(
       () => e.dir === "ltr" || e.dir === "rtl" ? e.dir : void 0
     ), m = C(
-      () => u.value ? F({ iso2: u.value }, e.locale) : null
+      () => u.value ? O({ iso2: u.value }, e.locale) : null
     ), n = C(
       () => j({
         country: u.value ? { iso2: u.value } : null,
         phone: o.value ?? "",
         locale: e.locale
       })
-    ), H = C(
+    ), Z = C(
       () => e.placeholder || m.value?.format_hint || S.value.phoneInputLabel
     ), oe = C(() => {
-      const r = n.value;
-      return r.ok || !r.reason || !o.value ? null : e.errorMessages?.[r.reason] ?? S.value.errorMessages[r.reason];
-    }), T = C(() => u.value ? Y(u.value)?.raw_data.dial_code ?? null : null), se = C(
+      const l = n.value;
+      return l.ok || !l.reason || !o.value ? null : e.errorMessages?.[l.reason] ?? S.value.errorMessages[l.reason];
+    }), D = C(() => u.value ? Y(u.value)?.raw_data.dial_code ?? null : null), se = C(
       () => `${Me[e.size]} ${W[e.size]}`
-    ), Ke = C(() => `px-2 ${W[e.size]}`), J = C(() => o.value ? n.value.ok ? "valid" : "error" : "idle"), _e = je(), ge = C(() => !!(e.showValidation && oe.value)), we = C(() => !ge.value && !o.value && !!m.value?.format_hint), Ge = C(() => ge.value || we.value ? _e : void 0);
-    return l({ validation: n, required: m, selectedDialCode: T, validationState: J }), (r, d) => (M(), K("div", {
-      class: G(w(z)("flex w-full flex-col gap-1.5", r.$attrs.class)),
+    ), Ke = C(() => `px-2 ${W[e.size]}`), J = C(() => o.value ? n.value.ok ? "valid" : "error" : "idle"), we = je(), ge = C(() => !!(e.showValidation && oe.value)), Ce = C(() => !ge.value && !o.value && !!m.value?.format_hint), Ve = C(() => ge.value || Ce.value ? we : void 0);
+    return r({ validation: n, required: m, selectedDialCode: D, validationState: J }), (l, d) => (B(), K("div", {
+      class: V(w(R)("flex w-full flex-col gap-1.5", l.$attrs.class)),
       "data-slot": "tell-input",
       dir: s.value
     }, [
       _("div", qt, [
         _("div", {
-          class: G(
-            w(z)(
+          class: V(
+            w(R)(
               w(_t)({ size: e.size }),
               "focus-within:ring-2 focus-within:ring-offset-0",
-              J.value === "idle" && "focus-within:ring-ring/40",
-              J.value === "valid" && "border-emerald-500/60 ring-1 ring-emerald-500/20 focus-within:ring-emerald-500/40",
-              J.value === "error" && "border-destructive/80 ring-1 ring-destructive/20 focus-within:ring-destructive/40",
+              // Validation field colors are an opt-in via `showValidation` — by default the
+              // field stays neutral and the consumer drives error rendering from `validation`.
+              (!e.showValidation || J.value === "idle") && "focus-within:ring-ring/40",
+              e.showValidation && J.value === "valid" && "border-emerald-500/60 ring-1 ring-emerald-500/20 focus-within:ring-emerald-500/40",
+              e.showValidation && J.value === "error" && "border-destructive/80 ring-1 ring-destructive/20 focus-within:ring-destructive/40",
               e.class,
               e.fieldClass
             )
           ),
           "data-state": J.value
         }, [
-          h(r.$slots, "prefix"),
-          T.value ? (M(), K("span", {
+          h(l.$slots, "prefix"),
+          D.value ? (B(), K("span", {
             key: 0,
             "data-slot": "tell-input-dial",
             dir: "ltr",
             "aria-hidden": "true",
-            class: G(w(z)("text-muted-foreground shrink-0 tabular-nums select-none", Ke.value))
-          }, D(T.value), 3)) : Z("", !0),
+            class: V(w(R)("text-muted-foreground shrink-0 tabular-nums select-none", Ke.value))
+          }, M(D.value), 3)) : H("", !0),
           _("input", {
-            value: I.value,
+            value: L.value,
             type: "tel",
             inputmode: "numeric",
             autocomplete: "tel",
             dir: "ltr",
             "data-slot": "tell-input-field",
             disabled: e.disabled || e.loading,
-            placeholder: H.value,
+            placeholder: Z.value,
             "aria-label": S.value.phoneInputLabel,
             "aria-invalid": J.value === "error" || void 0,
-            "aria-describedby": Ge.value,
-            class: G(
-              w(z)(
+            "aria-describedby": Ve.value,
+            class: V(
+              w(R)(
                 "placeholder:text-muted-foreground h-full w-full min-w-0 flex-1 bg-transparent tabular-nums outline-none disabled:cursor-not-allowed",
                 se.value,
-                T.value && "ps-1",
+                D.value && "ps-1",
                 e.inputClass
               )
             ),
-            onInput: N,
-            onChange: V
+            onInput: T,
+            onChange: G
           }, null, 42, Qt),
-          R(ke, {
+          F($e, {
             "enter-active-class": "transition-all duration-200 ease-out overflow-hidden",
             "leave-active-class": "transition-all duration-150 ease-in overflow-hidden",
             "enter-from-class": "opacity-0 max-w-0",
@@ -1324,7 +1327,7 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
             "leave-from-class": "max-w-[12rem]"
           }, {
             default: U(() => [
-              !e.detectFromInput || u.value ? (M(), Te(Jt, {
+              !e.detectFromInput || u.value ? (B(), he(Jt, {
                 key: 0,
                 selected: u.value,
                 "onUpdate:selected": d[0] || (d[0] = (i) => u.value = i),
@@ -1346,101 +1349,102 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
                 "popover-class": e.popoverClass,
                 "drawer-class": e.drawerClass
               }, Je({ _: 2 }, [
-                r.$slots.trigger ? {
+                l.$slots.trigger ? {
                   name: "trigger",
                   fn: U((i) => [
-                    h(r.$slots, "trigger", X(ee(i)))
+                    h(l.$slots, "trigger", X(ee(i)))
                   ]),
                   key: "0"
                 } : void 0,
-                r.$slots.chevron ? {
+                l.$slots.chevron ? {
                   name: "chevron",
                   fn: U((i) => [
-                    h(r.$slots, "chevron", X(ee(i)))
+                    h(l.$slots, "chevron", X(ee(i)))
                   ]),
                   key: "1"
                 } : void 0,
-                r.$slots.flag ? {
+                l.$slots.flag ? {
                   name: "flag",
                   fn: U((i) => [
-                    h(r.$slots, "flag", X(ee(i)))
+                    h(l.$slots, "flag", X(ee(i)))
                   ]),
                   key: "2"
                 } : void 0,
-                r.$slots.item ? {
+                l.$slots.item ? {
                   name: "item",
                   fn: U((i) => [
-                    h(r.$slots, "item", X(ee(i)))
+                    h(l.$slots, "item", X(ee(i)))
                   ]),
                   key: "3"
                 } : void 0,
-                r.$slots["group-header"] ? {
+                l.$slots["group-header"] ? {
                   name: "group-header",
                   fn: U((i) => [
-                    h(r.$slots, "group-header", X(ee(i)))
+                    h(l.$slots, "group-header", X(ee(i)))
                   ]),
                   key: "4"
                 } : void 0,
-                r.$slots.search ? {
+                l.$slots.search ? {
                   name: "search",
                   fn: U((i) => [
-                    h(r.$slots, "search", X(ee(i)))
+                    h(l.$slots, "search", X(ee(i)))
                   ]),
                   key: "5"
                 } : void 0,
-                r.$slots.loading ? {
+                l.$slots.loading ? {
                   name: "loading",
                   fn: U(() => [
-                    h(r.$slots, "loading")
+                    h(l.$slots, "loading")
                   ]),
                   key: "6"
                 } : void 0,
-                r.$slots.empty ? {
+                l.$slots.empty ? {
                   name: "empty",
                   fn: U((i) => [
-                    h(r.$slots, "empty", X(ee(i)))
+                    h(l.$slots, "empty", X(ee(i)))
                   ]),
                   key: "7"
                 } : void 0
-              ]), 1032, ["selected", "allowed-dial-codes", "disabled", "size", "locale", "search-placeholder", "empty-text", "loading-text", "suggested-label", "all-countries-label", "country-label", "select-country-label", "flag-url", "searcher", "countries", "content-class", "popover-class", "drawer-class"])) : Z("", !0)
+              ]), 1032, ["selected", "allowed-dial-codes", "disabled", "size", "locale", "search-placeholder", "empty-text", "loading-text", "suggested-label", "all-countries-label", "country-label", "select-country-label", "flag-url", "searcher", "countries", "content-class", "popover-class", "drawer-class"])) : H("", !0)
             ]),
             _: 3
           }),
-          h(r.$slots, "suffix", {
+          h(l.$slots, "suffix", {
             validationState: J.value,
             validation: n.value
           })
         ], 10, Wt),
-        R(ke, {
+        e.showValidationIcon ? (B(), he($e, {
+          key: 0,
           "enter-active-class": "transition duration-150 ease-out",
           "leave-active-class": "transition duration-100 ease-in",
           "enter-from-class": "opacity-0 scale-90",
           "leave-to-class": "opacity-0 scale-90"
         }, {
           default: U(() => [
-            J.value === "valid" ? h(r.$slots, "valid-icon", { key: 0 }, () => [
-              R(w(Qe), {
+            J.value === "valid" ? h(l.$slots, "valid-icon", { key: 0 }, () => [
+              F(w(Qe), {
                 class: "size-5 shrink-0 text-emerald-500",
                 "aria-hidden": "true"
               })
-            ]) : J.value === "error" ? h(r.$slots, "error-icon", {
+            ]) : J.value === "error" ? h(l.$slots, "error-icon", {
               key: 1,
               reason: n.value.reason ?? ""
             }, () => [
-              R(w(Xe), {
+              F(w(Xe), {
                 class: "text-destructive size-5 shrink-0",
                 "aria-hidden": "true"
               })
-            ]) : Z("", !0)
+            ]) : H("", !0)
           ]),
           _: 3
-        })
+        })) : H("", !0)
       ]),
       _("div", {
-        id: w(_e),
+        id: w(we),
         "aria-live": "polite"
       }, [
-        ge.value ? h(r.$slots, "error", {
+        ge.value ? h(l.$slots, "error", {
           key: 0,
           message: oe.value,
           reason: n.value.reason ?? "",
@@ -1448,10 +1452,10 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
         }, () => [
           _("p", {
             "data-slot": "tell-input-error",
-            class: G(w(z)("text-destructive text-xs", e.errorClass)),
+            class: V(w(R)("text-destructive text-xs", e.errorClass)),
             role: "alert"
-          }, D(oe.value), 3)
-        ]) : we.value ? h(r.$slots, "hint", {
+          }, M(oe.value), 3)
+        ]) : Ce.value ? h(l.$slots, "hint", {
           key: 1,
           country: u.value,
           formatHint: m.value.format_hint,
@@ -1459,9 +1463,9 @@ const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
         }, () => [
           _("p", {
             "data-slot": "tell-input-hint",
-            class: G(w(z)("text-muted-foreground text-xs tabular-nums", e.hintClass))
-          }, D(m.value.format_hint), 3)
-        ]) : Z("", !0)
+            class: V(w(R)("text-muted-foreground text-xs tabular-nums", e.hintClass))
+          }, M(m.value.format_hint), 3)
+        ]) : H("", !0)
       ], 8, Xt)
     ], 10, Yt));
   }
@@ -1472,7 +1476,7 @@ export {
   ve as _,
   Jt as a,
   fa as b,
-  Be as c,
+  Ne as c,
   _t as d,
   Ct as e,
   Oe as f,
@@ -1482,4 +1486,4 @@ export {
   wt as r,
   da as u
 };
-//# sourceMappingURL=ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs.map
+//# sourceMappingURL=ATellInput.vue_vue_type_script_setup_true_lang-D7hPj1g1.mjs.map