[{"data":1,"prerenderedAt":5106},["ShallowReactive",2],{"\u002Fui\u002Ftel-input":3},{"id":4,"title":5,"body":6,"description":5100,"extension":1405,"meta":5101,"navigation":409,"order":219,"package":205,"path":5102,"seo":5103,"stem":5104,"__hash__":5105},"docs\u002Fui\u002Ftel-input.md","ATelInput",{"type":7,"value":8,"toc":5052},"minimark",[9,13,26,59,62,67,197,202,206,238,242,249,253,304,318,337,341,360,367,441,445,460,500,512,516,695,716,720,1283,1287,1385,1389,1392,1423,1427,1430,1440,1665,1670,1770,1774,1777,1812,1822,1825,1836,1864,2218,2228,2234,2237,2258,2283,2582,2689,2693,2774,2778,2787,2856,2867,2926,2930,2956,2968,2972,2976,2986,3035,3038,3087,3091,3094,3109,3242,3245,3292,3296,3302,3363,3386,3389,3394,3398,3401,3425,3432,3436,3458,3496,3500,3503,3512,3683,3713,3717,3738,3742,3745,3830,3837,3841,3844,3851,3966,3981,3985,3988,4015,4019,4022,4036,4040,4043,4186,4190,4196,4252,4256,4259,4262,4266,4556,4570,4574,4694,4698,4728,4732,4735,4738,4741,4744,4747,4751,4754,4757,5048],[10,11,5],"h1",{"id":12},"atelinput",[14,15,16,20,21,25],"p",{},[17,18,19],"strong",{},"An international telephone input that gets out of the way."," The field starts as a single clean input — no picker, no clutter — and reveals the country flag the moment your number's dial code is recognised. Numbers validate in real time against ",[22,23,24],"code",{},"libphonenumber-js",", the picker is a popover on desktop and a bottom-sheet on mobile, and the whole thing plugs straight into VeeValidate + Zod with built-in support for async server-side checks.",[14,27,28,31,32,35,36,31,39,42,43,46,47,50,51,54,55,58],{},[22,29,30],{},"v-model:phone"," is the ",[17,33,34],{},"digits-only national number",". ",[22,37,38],{},"v-model:country",[17,40,41],{},"dial-code number"," (",[22,44,45],{},"20"," for Egypt, ",[22,48,49],{},"44"," for the UK, ",[22,52,53],{},"1"," for the NANP block, ",[22,56,57],{},"null"," for none).",[60,61],"demo-tel-input-basic",{},[63,64,66],"h3",{"id":65},"whats-in-the-box","What's in the box",[68,69,70,89,95,105,127,151,161,167,185,191],"ul",{},[71,72,73,76,77,80,81,84,85,88],"li",{},[17,74,75],{},"Universal country detection"," — debounced parse against the ",[17,78,79],{},"full libphonenumber metadata (~250 countries)",", with a priority chain (env hint → current → recents → popular shortlist → all countries). Works for international format (",[22,82,83],{},"+201066105963",") AND local format (",[22,86,87],{},"01066105963"," resolves to Egypt even when the env hint is Saudi).",[71,90,91,94],{},[17,92,93],{},"libphonenumber-js validation"," — seven failure reasons, format hint, E.164 output, all reactive.",[71,96,97,100,101,104],{},[17,98,99],{},"Responsive picker"," — popover on desktop, vaul-vue bottom-sheet on mobile, sticky-safe scroll lock on ",[17,102,103],{},"both"," (the page underneath never scrolls; the picker's inner list does).",[71,106,107,110,111,114,115,118,119,122,123,126],{},[17,108,109],{},"Form-library ready"," — controlled ",[22,112,113],{},"error"," prop, ",[22,116,117],{},"@blur"," event, ",[22,120,121],{},"useTelField()"," composable for VeeValidate, ",[22,124,125],{},"zPhone()"," factory for Zod, plus an in-field spinner for async server-side validation.",[71,128,129,132,133,136,137,140,141,144,145,147,148,150],{},[17,130,131],{},"Two binding contracts"," — single ",[22,134,135],{},"v-model"," (E.164 string, drops into VeeValidate's ",[22,138,139],{},"\u003CField v-slot=\"{ field }\">"," via ",[22,142,143],{},"v-bind=\"field\"",") or split ",[22,146,30],{}," + ",[22,149,38],{},". Both stay in sync.",[71,152,153,156,157,160],{},[17,154,155],{},"i18n + RTL"," — country names via ",[22,158,159],{},"Intl.DisplayNames",", numerals localised in the format hint, RTL inherited from the page, alternative numerals (Arabic-Indic, Persian, Devanagari, Bengali) folded to ASCII on input.",[71,162,163,166],{},[17,164,165],{},"Headless slots"," for every visual region — trigger, chevron, flag, item, search, hint, error, the lot.",[71,168,169,172,173,176,177,176,180,176,182,184],{},[17,170,171],{},"Efficient by default"," — REST Countries fetch + IP geolocation request deduped to one network call per page across every ",[22,174,175],{},"\u003CATelInput>"," \u002F ",[22,178,179],{},"\u003CACountrySelect>",[22,181,121],{},[22,183,125],{}," instance. LRU-cached matcher.",[71,186,187,190],{},[17,188,189],{},"SSR-safe"," — country detection runs after mount, hydration is clean.",[71,192,193,196],{},[17,194,195],{},"TypeScript-first"," — every prop, slot, and event typed; web-types ship for JetBrains IDEs.",[198,199,201],"h2",{"id":200},"install","Install",[203,204],"doc-install",{"pkg":205},"@alikhalilll\u002Fa-tel-input",[207,208,213],"pre",{"className":209,"code":210,"language":211,"meta":212,"style":212},"language-ts shiki shiki-themes github-light-default github-dark-default","import { ATelInput } from '@alikhalilll\u002Fa-tel-input';\n","ts","",[22,214,215],{"__ignoreMap":212},[216,217,220,224,228,231,235],"span",{"class":218,"line":219},"line",1,[216,221,223],{"class":222},"sjeE4","import",[216,225,227],{"class":226},"s4rv2"," { ATelInput } ",[216,229,230],{"class":222},"from",[216,232,234],{"class":233},"sSVrQ"," '@alikhalilll\u002Fa-tel-input'",[216,236,237],{"class":226},";\n",[198,239,241],{"id":240},"setup","Setup",[14,243,244,245,248],{},"The shipped CSS is self-contained — design tokens + utility classes are pre-compiled. Import the stylesheet once and the field renders themed out of the box (no Tailwind config, no ",[22,246,247],{},"@theme"," block).",[63,250,252],{"id":251},"nuxt-3-4","Nuxt 3 \u002F 4",[207,254,256],{"className":209,"code":255,"language":211,"meta":212,"style":212},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  css: ['@alikhalilll\u002Fa-tel-input\u002Fstyles.css'],\n});\n",[22,257,258,264,281,296],{"__ignoreMap":212},[216,259,260],{"class":218,"line":219},[216,261,263],{"class":262},"sU953","\u002F\u002F nuxt.config.ts\n",[216,265,267,270,273,277],{"class":218,"line":266},2,[216,268,269],{"class":222},"export",[216,271,272],{"class":222}," default",[216,274,276],{"class":275},"sbjLL"," defineNuxtConfig",[216,278,280],{"class":279},"sTDnQ","({\n",[216,282,284,287,290,293],{"class":218,"line":283},3,[216,285,286],{"class":226},"  css: [",[216,288,289],{"class":233},"'@alikhalilll\u002Fa-tel-input\u002Fstyles.css'",[216,291,292],{"class":226},"]",[216,294,295],{"class":279},",\n",[216,297,299,302],{"class":218,"line":298},4,[216,300,301],{"class":279},"})",[216,303,237],{"class":226},[14,305,306,307,176,309,176,311,314,315,317],{},"For auto-imports (use ",[22,308,175],{},[22,310,179],{},[22,312,313],{},"\u003CACountryFlag>"," with no ",[22,316,223],{},"), also register the bundled module:",[207,319,321],{"className":209,"code":320,"language":211,"meta":212,"style":212},"modules: ['@alikhalilll\u002Fa-tel-input\u002Fnuxt'],\n",[22,322,323],{"__ignoreMap":212},[216,324,325,328,331,334],{"class":218,"line":219},[216,326,327],{"class":279},"modules",[216,329,330],{"class":226},": [",[216,332,333],{"class":233},"'@alikhalilll\u002Fa-tel-input\u002Fnuxt'",[216,335,336],{"class":226},"],\n",[63,338,340],{"id":339},"vue-vite","Vue + Vite",[207,342,344],{"className":209,"code":343,"language":211,"meta":212,"style":212},"\u002F\u002F main.ts\nimport '@alikhalilll\u002Fa-tel-input\u002Fstyles.css';\n",[22,345,346,351],{"__ignoreMap":212},[216,347,348],{"class":218,"line":219},[216,349,350],{"class":262},"\u002F\u002F main.ts\n",[216,352,353,355,358],{"class":218,"line":266},[216,354,223],{"class":222},[216,356,357],{"class":233}," '@alikhalilll\u002Fa-tel-input\u002Fstyles.css'",[216,359,237],{"class":226},[14,361,362,363,366],{},"For ",[22,364,365],{},"unplugin-vue-components"," auto-resolve, drop in the shipped resolver:",[207,368,370],{"className":209,"code":369,"language":211,"meta":212,"style":212},"\u002F\u002F vite.config.ts\nimport Components from 'unplugin-vue-components\u002Fvite';\nimport UiResolver from '@alikhalilll\u002Fa-tel-input\u002Fresolver';\n\nexport default { plugins: [Components({ resolvers: [UiResolver()] })] };\n",[22,371,372,377,391,405,411],{"__ignoreMap":212},[216,373,374],{"class":218,"line":219},[216,375,376],{"class":262},"\u002F\u002F vite.config.ts\n",[216,378,379,381,384,386,389],{"class":218,"line":266},[216,380,223],{"class":222},[216,382,383],{"class":226}," Components ",[216,385,230],{"class":222},[216,387,388],{"class":233}," 'unplugin-vue-components\u002Fvite'",[216,390,237],{"class":226},[216,392,393,395,398,400,403],{"class":218,"line":283},[216,394,223],{"class":222},[216,396,397],{"class":226}," UiResolver ",[216,399,230],{"class":222},[216,401,402],{"class":233}," '@alikhalilll\u002Fa-tel-input\u002Fresolver'",[216,404,237],{"class":226},[216,406,407],{"class":218,"line":298},[216,408,410],{"emptyLinePlaceholder":409},true,"\n",[216,412,414,416,418,421,424,427,430,433,436,439],{"class":218,"line":413},5,[216,415,269],{"class":222},[216,417,272],{"class":222},[216,419,420],{"class":279}," { ",[216,422,423],{"class":226},"plugins: [",[216,425,426],{"class":275},"Components",[216,428,429],{"class":226},"({ resolvers: [",[216,431,432],{"class":275},"UiResolver",[216,434,435],{"class":226},"()] })] ",[216,437,438],{"class":279},"}",[216,440,237],{"class":226},[63,442,444],{"id":443},"dark-mode","Dark mode",[14,446,447,448,451,452,455,456,459],{},"Toggle ",[22,449,450],{},"class=\"dark\""," (or ",[22,453,454],{},"\"light\"",") on ",[22,457,458],{},"\u003Chtml>"," — every component inherits via CSS variables.",[207,461,463],{"className":209,"code":462,"language":211,"meta":212,"style":212},"\u002F\u002F nuxt.config.ts — locked dark\napp: { head: { htmlAttrs: { class: 'dark' } } },\n",[22,464,465,470],{"__ignoreMap":212},[216,466,467],{"class":218,"line":219},[216,468,469],{"class":262},"\u002F\u002F nuxt.config.ts — locked dark\n",[216,471,472,475,478,481,483,486,488,491,494,497],{"class":218,"line":266},[216,473,474],{"class":279},"app",[216,476,477],{"class":226},": { ",[216,479,480],{"class":279},"head",[216,482,477],{"class":226},[216,484,485],{"class":279},"htmlAttrs",[216,487,477],{"class":226},[216,489,490],{"class":279},"class",[216,492,493],{"class":226},": ",[216,495,496],{"class":233},"'dark'",[216,498,499],{"class":226}," } } },\n",[501,502,503],"blockquote",{},[14,504,505,506,511],{},"Theming tokens, UnoCSS interplay, monorepo CSS gotcha, full public API — see the ",[507,508,510],"a",{"href":509},"\u002Fui","UI overview",".",[198,513,515],{"id":514},"usage","Usage",[207,517,521],{"className":518,"code":519,"language":520,"meta":212,"style":212},"language-vue shiki shiki-themes github-light-default github-dark-default","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { ATelInput } from '@alikhalilll\u002Fa-tel-input';\n\nconst phone = ref('');\nconst country = ref\u003Cnumber | null>(null);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CATelInput v-model:phone=\"phone\" v-model:country=\"country\" show-validation \u002F>\n\u003C\u002Ftemplate>\n","vue",[22,522,523,548,562,574,578,601,631,641,646,656,686],{"__ignoreMap":212},[216,524,525,528,532,536,539,542,545],{"class":218,"line":219},[216,526,527],{"class":226},"\u003C",[216,529,531],{"class":530},"sjgCt","script",[216,533,535],{"class":534},"sHrmB"," setup",[216,537,538],{"class":534}," lang",[216,540,541],{"class":226},"=",[216,543,544],{"class":233},"\"ts\"",[216,546,547],{"class":226},">\n",[216,549,550,552,555,557,560],{"class":218,"line":266},[216,551,223],{"class":222},[216,553,554],{"class":226}," { ref } ",[216,556,230],{"class":222},[216,558,559],{"class":233}," 'vue'",[216,561,237],{"class":226},[216,563,564,566,568,570,572],{"class":218,"line":283},[216,565,223],{"class":222},[216,567,227],{"class":226},[216,569,230],{"class":222},[216,571,234],{"class":233},[216,573,237],{"class":226},[216,575,576],{"class":218,"line":298},[216,577,410],{"emptyLinePlaceholder":409},[216,579,580,583,586,589,592,595,598],{"class":218,"line":413},[216,581,582],{"class":222},"const",[216,584,585],{"class":534}," phone",[216,587,588],{"class":222}," =",[216,590,591],{"class":275}," ref",[216,593,594],{"class":226},"(",[216,596,597],{"class":233},"''",[216,599,600],{"class":226},");\n",[216,602,604,606,609,611,613,615,618,621,624,627,629],{"class":218,"line":603},6,[216,605,582],{"class":222},[216,607,608],{"class":534}," country",[216,610,588],{"class":222},[216,612,591],{"class":275},[216,614,527],{"class":226},[216,616,617],{"class":534},"number",[216,619,620],{"class":222}," |",[216,622,623],{"class":534}," null",[216,625,626],{"class":226},">(",[216,628,57],{"class":534},[216,630,600],{"class":226},[216,632,634,637,639],{"class":218,"line":633},7,[216,635,636],{"class":226},"\u003C\u002F",[216,638,531],{"class":530},[216,640,547],{"class":226},[216,642,644],{"class":218,"line":643},8,[216,645,410],{"emptyLinePlaceholder":409},[216,647,649,651,654],{"class":218,"line":648},9,[216,650,527],{"class":226},[216,652,653],{"class":530},"template",[216,655,547],{"class":226},[216,657,659,662,664,667,669,672,675,677,680,683],{"class":218,"line":658},10,[216,660,661],{"class":226},"  \u003C",[216,663,5],{"class":530},[216,665,666],{"class":534}," v-model:phone",[216,668,541],{"class":226},[216,670,671],{"class":233},"\"phone\"",[216,673,674],{"class":534}," v-model:country",[216,676,541],{"class":226},[216,678,679],{"class":233},"\"country\"",[216,681,682],{"class":534}," show-validation",[216,684,685],{"class":226}," \u002F>\n",[216,687,689,691,693],{"class":218,"line":688},11,[216,690,636],{"class":226},[216,692,653],{"class":530},[216,694,547],{"class":226},[14,696,697,698,701,702,704,705,708,709,701,712,715],{},"Type ",[22,699,700],{},"+447911123456",", ",[22,703,87],{},", or paste any well-formed international number — the flag trigger reveals at the end of the field with the detected country, the dial code appears as a prefix inside the input, and ",[22,706,707],{},"phone"," normalises to the national significant number (",[22,710,711],{},"7911123456",[22,713,714],{},"1066105963",").",[198,717,719],{"id":718},"props","Props",[721,722,723,742],"table",{},[724,725,726],"thead",{},[727,728,729,733,736,739],"tr",{},[730,731,732],"th",{},"Prop",[730,734,735],{},"Type",[730,737,738],{},"Default",[730,740,741],{},"Description",[743,744,745,768,795,816,832,855,879,898,915,933,954,978,996,1016,1036,1062,1083,1102,1121,1140,1159,1178,1196,1226,1245,1267],"tbody",{},[727,746,747,752,757,761],{},[748,749,750],"td",{},[22,751,30],{},[748,753,754],{},[22,755,756],{},"string",[748,758,759],{},[22,760,597],{},[748,762,763,764,767],{},"Digits-only national number — no leading ",[22,765,766],{},"+",", no dial code.",[727,769,770,774,779,783],{},[748,771,772],{},[22,773,38],{},[748,775,776],{},[22,777,778],{},"number | null",[748,780,781],{},[22,782,57],{},[748,784,785,786,788,789,791,792,794],{},"Dial number, e.g. ",[22,787,45],{}," (Egypt), ",[22,790,49],{}," (UK), ",[22,793,53],{}," (NANP).",[727,796,797,802,806,809],{},[748,798,799],{},[22,800,801],{},"name",[748,803,804],{},[22,805,756],{},[748,807,808],{},"—",[748,810,811,812,815],{},"Forwarded to the inner ",[22,813,814],{},"\u003Cinput name=\"\">"," for native form \u002F form-library integration.",[727,817,818,822,827,829],{},[748,819,820],{},[22,821,113],{},[748,823,824],{},[22,825,826],{},"string | null",[748,828,808],{},[748,830,831],{},"Externally controlled error message. When non-empty, overrides internal validation and forces the error state.",[727,833,834,839,844,849],{},[748,835,836],{},[22,837,838],{},"validating",[748,840,841],{},[22,842,843],{},"boolean",[748,845,846],{},[22,847,848],{},"false",[748,850,851,854],{},[22,852,853],{},"true"," while an async validation is in flight. Renders a spinner inside the field (doesn't disable it).",[727,856,857,862,867,872],{},[748,858,859],{},[22,860,861],{},"validateOn",[748,863,864],{},[22,865,866],{},"'change' | 'blur' | 'eager'",[748,868,869],{},[22,870,871],{},"'change'",[748,873,874,875,878],{},"When to surface validation in the UI. ",[22,876,877],{},"'blur'"," is form-library friendly.",[727,880,881,886,890,895],{},[748,882,883],{},[22,884,885],{},"placeholder",[748,887,888],{},[22,889,756],{},[748,891,892],{},[22,893,894],{},"'Phone number'",[748,896,897],{},"Falls back to the country's example number when empty.",[727,899,900,905,909,913],{},[748,901,902],{},[22,903,904],{},"disabled",[748,906,907],{},[22,908,843],{},[748,910,911],{},[22,912,848],{},[748,914],{},[727,916,917,922,926,930],{},[748,918,919],{},[22,920,921],{},"loading",[748,923,924],{},[22,925,843],{},[748,927,928],{},[22,929,848],{},[748,931,932],{},"Disables interaction.",[727,934,935,940,945,951],{},[748,936,937],{},[22,938,939],{},"size",[748,941,942],{},[22,943,944],{},"'xs' | 'sm' | 'md' | 'lg' | 'xl'",[748,946,947,950],{},[22,948,949],{},"'md'"," (43 px)",[748,952,953],{},"Height, padding, text size.",[727,955,956,961,966,972],{},[748,957,958],{},[22,959,960],{},"allowedDialCodes",[748,962,963],{},[22,964,965],{},"string[]",[748,967,968],{},[969,970,971],"em",{},"all",[748,973,974,975,977],{},"Whitelist of dial digits (no ",[22,976,766],{},"). Disallowed countries render disabled.",[727,979,980,985,989,993],{},[748,981,982],{},[22,983,984],{},"showValidation",[748,986,987],{},[22,988,843],{},[748,990,991],{},[22,992,848],{},[748,994,995],{},"Light up the field's validation styling — coloured border + ring + error message — when invalid. Off by default.",[727,997,998,1003,1007,1011],{},[748,999,1000],{},[22,1001,1002],{},"showValidationIcon",[748,1004,1005],{},[22,1006,843],{},[748,1008,1009],{},[22,1010,848],{},[748,1012,1013,1014,511],{},"Show the green check \u002F red alert icon at the end of the field. Off by default; independent of ",[22,1015,984],{},[727,1017,1018,1023,1028,1033],{},[748,1019,1020],{},[22,1021,1022],{},"detectCountry",[748,1024,1025],{},[22,1026,1027],{},"'auto' | 'locale' | 'none'",[748,1029,1030],{},[22,1031,1032],{},"'auto'",[748,1034,1035],{},"Strategy for the silent environment lookup (parsing hint).",[727,1037,1038,1043,1047,1051],{},[748,1039,1040],{},[22,1041,1042],{},"defaultCountry",[748,1044,1045],{},[22,1046,756],{},[748,1048,1049],{},[22,1050,597],{},[748,1052,1053,1054,1057,1058,1061],{},"Initial country. Accepts a dial number string (",[22,1055,1056],{},"'20'",") or ISO2 (",[22,1059,1060],{},"'EG'","). When set, picker is visible at mount.",[727,1063,1064,1069,1073,1077],{},[748,1065,1066],{},[22,1067,1068],{},"detectFromInput",[748,1070,1071],{},[22,1072,843],{},[748,1074,1075],{},[22,1076,853],{},[748,1078,1079,1080,1082],{},"Default mode. Set ",[22,1081,848],{}," for the legacy always-visible picker.",[727,1084,1085,1090,1094,1099],{},[748,1086,1087],{},[22,1088,1089],{},"detectDebounceMs",[748,1091,1092],{},[22,1093,617],{},[748,1095,1096],{},[22,1097,1098],{},"150",[748,1100,1101],{},"Debounce window for input-driven detection (ms).",[727,1103,1104,1109,1113,1118],{},[748,1105,1106],{},[22,1107,1108],{},"ipEndpoint",[748,1110,1111],{},[22,1112,756],{},[748,1114,1115],{},[22,1116,1117],{},"'https:\u002F\u002Fipapi.co\u002Fjson\u002F'",[748,1119,1120],{},"Override the IP geolocation endpoint.",[727,1122,1123,1128,1132,1137],{},[748,1124,1125],{},[22,1126,1127],{},"searchPlaceholder",[748,1129,1130],{},[22,1131,756],{},[748,1133,1134],{},[22,1135,1136],{},"'Search country or +code…'",[748,1138,1139],{},"Picker search placeholder.",[727,1141,1142,1147,1151,1156],{},[748,1143,1144],{},[22,1145,1146],{},"emptyText",[748,1148,1149],{},[22,1150,756],{},[748,1152,1153],{},[22,1154,1155],{},"'No countries found.'",[748,1157,1158],{},"Shown when search yields no results.",[727,1160,1161,1166,1170,1175],{},[748,1162,1163],{},[22,1164,1165],{},"loadingText",[748,1167,1168],{},[22,1169,756],{},[748,1171,1172],{},[22,1173,1174],{},"'Loading countries…'",[748,1176,1177],{},"Shown while the country list loads.",[727,1179,1180,1185,1190,1193],{},[748,1181,1182],{},[22,1183,1184],{},"errorMessages",[748,1186,1187],{},[22,1188,1189],{},"Partial\u003CRecord\u003CPhoneValidationReason, string>>",[748,1191,1192],{},"English defaults",[748,1194,1195],{},"Override the validation error labels.",[727,1197,1198,1203,1208,1213],{},[748,1199,1200],{},[22,1201,1202],{},"dir",[748,1204,1205],{},[22,1206,1207],{},"'ltr' | 'rtl' | 'auto'",[748,1209,1210,1212],{},[22,1211,1032],{}," (inherits)",[748,1214,1215,1216,1218,1219,176,1222,1225],{},"Text direction. ",[22,1217,1032],{}," \u002F omitted inherits from the page; ",[22,1220,1221],{},"'ltr'",[22,1223,1224],{},"'rtl'"," force it.",[727,1227,1228,1233,1237,1239],{},[748,1229,1230],{},[22,1231,1232],{},"locale",[748,1234,1235],{},[22,1236,756],{},[748,1238,808],{},[748,1240,1241,1242,1244],{},"BCP-47 locale. Localises country names (",[22,1243,159],{},") and the format-hint numerals.",[727,1246,1247,1252,1258,1260],{},[748,1248,1249],{},[22,1250,1251],{},"messages",[748,1253,1254,1257],{},[22,1255,1256],{},"TelInputMessages"," (partial)",[748,1259,1192],{},[748,1261,1262,1263,511],{},"One bag for every UI string — picker, error labels, and a11y labels. See ",[507,1264,1266],{"href":1265},"#internationalization","Internationalization",[727,1268,1269,1273,1278,1280],{},[748,1270,1271],{},[22,1272,490],{},[748,1274,1275],{},[22,1276,1277],{},"HTMLAttributes['class']",[748,1279,808],{},[748,1281,1282],{},"Merged into the outer wrapper.",[198,1284,1286],{"id":1285},"exposed-via-template-ref","Exposed via template ref",[207,1288,1290],{"className":209,"code":1289,"language":211,"meta":212,"style":212},"const tellRef = ref\u003CInstanceType\u003Ctypeof ATelInput>>();\ntellRef.value.validation; \u002F\u002F PhoneValidationResult — reactive\ntellRef.value.required; \u002F\u002F PhoneRequiredInfo | null — example, length range, format hint\ntellRef.value.selectedDialCode; \u002F\u002F '+20' | null\ntellRef.value.validationState; \u002F\u002F 'idle' | 'valid' | 'error'\n\ntellRef.value.focus(); \u002F\u002F imperative focus management\ntellRef.value.blur();\ntellRef.value.select();\n",[22,1291,1292,1316,1324,1332,1340,1348,1352,1366,1376],{"__ignoreMap":212},[216,1293,1294,1296,1299,1301,1303,1305,1308,1310,1313],{"class":218,"line":219},[216,1295,582],{"class":222},[216,1297,1298],{"class":534}," tellRef",[216,1300,588],{"class":222},[216,1302,591],{"class":275},[216,1304,527],{"class":226},[216,1306,1307],{"class":279},"InstanceType",[216,1309,527],{"class":226},[216,1311,1312],{"class":222},"typeof",[216,1314,1315],{"class":226}," ATelInput>>();\n",[216,1317,1318,1321],{"class":218,"line":266},[216,1319,1320],{"class":226},"tellRef.value.validation; ",[216,1322,1323],{"class":262},"\u002F\u002F PhoneValidationResult — reactive\n",[216,1325,1326,1329],{"class":218,"line":283},[216,1327,1328],{"class":226},"tellRef.value.required; ",[216,1330,1331],{"class":262},"\u002F\u002F PhoneRequiredInfo | null — example, length range, format hint\n",[216,1333,1334,1337],{"class":218,"line":298},[216,1335,1336],{"class":226},"tellRef.value.selectedDialCode; ",[216,1338,1339],{"class":262},"\u002F\u002F '+20' | null\n",[216,1341,1342,1345],{"class":218,"line":413},[216,1343,1344],{"class":226},"tellRef.value.validationState; ",[216,1346,1347],{"class":262},"\u002F\u002F 'idle' | 'valid' | 'error'\n",[216,1349,1350],{"class":218,"line":603},[216,1351,410],{"emptyLinePlaceholder":409},[216,1353,1354,1357,1360,1363],{"class":218,"line":633},[216,1355,1356],{"class":226},"tellRef.value.",[216,1358,1359],{"class":275},"focus",[216,1361,1362],{"class":226},"(); ",[216,1364,1365],{"class":262},"\u002F\u002F imperative focus management\n",[216,1367,1368,1370,1373],{"class":218,"line":643},[216,1369,1356],{"class":226},[216,1371,1372],{"class":275},"blur",[216,1374,1375],{"class":226},"();\n",[216,1377,1378,1380,1383],{"class":218,"line":648},[216,1379,1356],{"class":226},[216,1381,1382],{"class":275},"select",[216,1384,1375],{"class":226},[198,1386,1388],{"id":1387},"sizes","Sizes",[1390,1391],"demo-tel-input-sizes",{},[14,1393,1394,1395,1398,1399,1402,1403,1406,1407,176,1410,1413,1414,1417,1418,1422],{},"Five sizes — ",[22,1396,1397],{},"xs"," 28 \u002F ",[22,1400,1401],{},"sm"," 36 \u002F ",[22,1404,1405],{},"md"," ",[17,1408,1409],{},"43 default",[22,1411,1412],{},"lg"," 52 \u002F ",[22,1415,1416],{},"xl"," 60 px. See ",[507,1419,1421],{"href":1420},"\u002Fui#size-scale","Size scale"," for the shared exported maps.",[198,1424,1426],{"id":1425},"validation","Validation",[1428,1429],"demo-tel-input-validation",{},[14,1431,1432,1433,1436,1437,1439],{},"Validation runs on every keystroke via ",[22,1434,1435],{},"usePhoneValidation()"," (a ",[22,1438,24],{}," wrapper) and produces:",[207,1441,1443],{"className":209,"code":1442,"language":211,"meta":212,"style":212},"interface PhoneValidationResult {\n  ok: boolean;\n  reason: PhoneValidationReason | null;\n  country: { iso2: string; dial_code: string } | null;\n  phone: { raw: string | null; digits: string };\n  full_phone: string | null; \u002F\u002F E.164, e.g. '+201066105963'\n  required: PhoneRequiredInfo | null;\n}\n\ntype PhoneValidationReason =\n  | 'missing_country'\n  | 'country_not_supported'\n  | 'phone_has_non_digits'\n  | 'too_short'\n  | 'too_long'\n  | 'invalid_phone'\n  | 'parse_failed';\n",[22,1444,1445,1456,1469,1485,1522,1554,1572,1588,1593,1597,1607,1615,1623,1631,1639,1647,1655],{"__ignoreMap":212},[216,1446,1447,1450,1453],{"class":218,"line":219},[216,1448,1449],{"class":222},"interface",[216,1451,1452],{"class":279}," PhoneValidationResult",[216,1454,1455],{"class":226}," {\n",[216,1457,1458,1461,1464,1467],{"class":218,"line":266},[216,1459,1460],{"class":279},"  ok",[216,1462,1463],{"class":222},":",[216,1465,1466],{"class":534}," boolean",[216,1468,237],{"class":226},[216,1470,1471,1474,1476,1479,1481,1483],{"class":218,"line":283},[216,1472,1473],{"class":279},"  reason",[216,1475,1463],{"class":222},[216,1477,1478],{"class":279}," PhoneValidationReason",[216,1480,620],{"class":222},[216,1482,623],{"class":534},[216,1484,237],{"class":226},[216,1486,1487,1490,1492,1494,1497,1499,1502,1505,1508,1510,1512,1515,1518,1520],{"class":218,"line":298},[216,1488,1489],{"class":279},"  country",[216,1491,1463],{"class":222},[216,1493,420],{"class":226},[216,1495,1496],{"class":279},"iso2",[216,1498,1463],{"class":222},[216,1500,1501],{"class":534}," string",[216,1503,1504],{"class":226},"; ",[216,1506,1507],{"class":279},"dial_code",[216,1509,1463],{"class":222},[216,1511,1501],{"class":534},[216,1513,1514],{"class":226}," } ",[216,1516,1517],{"class":222},"|",[216,1519,623],{"class":534},[216,1521,237],{"class":226},[216,1523,1524,1527,1529,1531,1534,1536,1538,1540,1542,1544,1547,1549,1551],{"class":218,"line":413},[216,1525,1526],{"class":279},"  phone",[216,1528,1463],{"class":222},[216,1530,420],{"class":226},[216,1532,1533],{"class":279},"raw",[216,1535,1463],{"class":222},[216,1537,1501],{"class":534},[216,1539,620],{"class":222},[216,1541,623],{"class":534},[216,1543,1504],{"class":226},[216,1545,1546],{"class":279},"digits",[216,1548,1463],{"class":222},[216,1550,1501],{"class":534},[216,1552,1553],{"class":226}," };\n",[216,1555,1556,1559,1561,1563,1565,1567,1569],{"class":218,"line":603},[216,1557,1558],{"class":279},"  full_phone",[216,1560,1463],{"class":222},[216,1562,1501],{"class":534},[216,1564,620],{"class":222},[216,1566,623],{"class":534},[216,1568,1504],{"class":226},[216,1570,1571],{"class":262},"\u002F\u002F E.164, e.g. '+201066105963'\n",[216,1573,1574,1577,1579,1582,1584,1586],{"class":218,"line":633},[216,1575,1576],{"class":279},"  required",[216,1578,1463],{"class":222},[216,1580,1581],{"class":279}," PhoneRequiredInfo",[216,1583,620],{"class":222},[216,1585,623],{"class":534},[216,1587,237],{"class":226},[216,1589,1590],{"class":218,"line":643},[216,1591,1592],{"class":226},"}\n",[216,1594,1595],{"class":218,"line":648},[216,1596,410],{"emptyLinePlaceholder":409},[216,1598,1599,1602,1604],{"class":218,"line":658},[216,1600,1601],{"class":222},"type",[216,1603,1478],{"class":279},[216,1605,1606],{"class":222}," =\n",[216,1608,1609,1612],{"class":218,"line":688},[216,1610,1611],{"class":222},"  |",[216,1613,1614],{"class":233}," 'missing_country'\n",[216,1616,1618,1620],{"class":218,"line":1617},12,[216,1619,1611],{"class":222},[216,1621,1622],{"class":233}," 'country_not_supported'\n",[216,1624,1626,1628],{"class":218,"line":1625},13,[216,1627,1611],{"class":222},[216,1629,1630],{"class":233}," 'phone_has_non_digits'\n",[216,1632,1634,1636],{"class":218,"line":1633},14,[216,1635,1611],{"class":222},[216,1637,1638],{"class":233}," 'too_short'\n",[216,1640,1642,1644],{"class":218,"line":1641},15,[216,1643,1611],{"class":222},[216,1645,1646],{"class":233}," 'too_long'\n",[216,1648,1650,1652],{"class":218,"line":1649},16,[216,1651,1611],{"class":222},[216,1653,1654],{"class":233}," 'invalid_phone'\n",[216,1656,1658,1660,1663],{"class":218,"line":1657},17,[216,1659,1611],{"class":222},[216,1661,1662],{"class":233}," 'parse_failed'",[216,1664,237],{"class":226},[14,1666,1667,1668,1463],{},"Localise the messages with ",[22,1669,1184],{},[207,1671,1673],{"className":518,"code":1672,"language":520,"meta":212,"style":212},"\u003CATelInput\n  v-model:phone=\"phone\"\n  v-model:country=\"country\"\n  :error-messages=\"{\n    too_short: 'الرقم قصير جدًا',\n    invalid_phone: 'الرقم غير صحيح',\n  }\"\n  show-validation\n\u002F>\n",[22,1674,1675,1682,1701,1718,1733,1743,1753,1760,1765],{"__ignoreMap":212},[216,1676,1677,1679],{"class":218,"line":219},[216,1678,527],{"class":226},[216,1680,1681],{"class":530},"ATelInput\n",[216,1683,1684,1687,1689,1691,1693,1696,1698],{"class":218,"line":266},[216,1685,1686],{"class":534},"  v-model",[216,1688,1463],{"class":226},[216,1690,707],{"class":534},[216,1692,541],{"class":226},[216,1694,1695],{"class":226},"\"",[216,1697,707],{"class":226},[216,1699,1700],{"class":226},"\"\n",[216,1702,1703,1705,1707,1710,1712,1714,1716],{"class":218,"line":283},[216,1704,1686],{"class":534},[216,1706,1463],{"class":226},[216,1708,1709],{"class":534},"country",[216,1711,541],{"class":226},[216,1713,1695],{"class":226},[216,1715,1709],{"class":226},[216,1717,1700],{"class":226},[216,1719,1720,1723,1726,1728,1730],{"class":218,"line":298},[216,1721,1722],{"class":226},"  :",[216,1724,1725],{"class":534},"error-messages",[216,1727,541],{"class":226},[216,1729,1695],{"class":226},[216,1731,1732],{"class":226},"{\n",[216,1734,1735,1738,1741],{"class":218,"line":413},[216,1736,1737],{"class":226},"    too_short: ",[216,1739,1740],{"class":233},"'الرقم قصير جدًا'",[216,1742,295],{"class":226},[216,1744,1745,1748,1751],{"class":218,"line":603},[216,1746,1747],{"class":226},"    invalid_phone: ",[216,1749,1750],{"class":233},"'الرقم غير صحيح'",[216,1752,295],{"class":226},[216,1754,1755,1758],{"class":218,"line":633},[216,1756,1757],{"class":226},"  }",[216,1759,1700],{"class":226},[216,1761,1762],{"class":218,"line":643},[216,1763,1764],{"class":534},"  show-validation\n",[216,1766,1767],{"class":218,"line":648},[216,1768,1769],{"class":226},"\u002F>\n",[198,1771,1773],{"id":1772},"form-integration","Form integration",[14,1775,1776],{},"The component supports two binding contracts:",[68,1778,1779,1802],{},[71,1780,1781,1786,1787,1790,1791,1793,1794,1797,1798,1801],{},[17,1782,1783,1784],{},"Single ",[22,1785,135],{}," carrying the canonical ",[17,1788,1789],{},"E.164"," string — works directly with VeeValidate's ",[22,1792,139],{},", native ",[22,1795,1796],{},"\u003Cform>"," submission, and any ",[22,1799,1800],{},"v-model=\"phoneE164\""," consumer.",[71,1803,1804,1811],{},[17,1805,1806,1807,147,1809],{},"Split ",[22,1808,30],{},[22,1810,38],{}," — when you want the raw digits and the dial code as separate values. Stays in sync with the single-string contract; pick whichever fits.",[14,1813,1814,1815,147,1818,1821],{},"Two subpath entries also ship for first-class ",[17,1816,1817],{},"VeeValidate",[17,1819,1820],{},"Zod"," integration, including async \u002F server-side validation:",[203,1823],{"pkgs":1824},"vee-validate @vee-validate\u002Fzod zod",[63,1826,1828,1829,1832,1833,1835],{"id":1827},"drop-in-field-v-slot-field-errors-v-bindfield-just-works","Drop-in ",[22,1830,1831],{},"\u003CField v-slot=\"{ field, errors }\">"," — ",[22,1834,143],{}," just works",[14,1837,1838,1839,1842,1843,1846,1847,1849,1850,701,1853,701,1856,1859,1860,1863],{},"Use VeeValidate's slot-style ",[22,1840,1841],{},"\u003CField>"," exactly the way you would with a native ",[22,1844,1845],{},"\u003CInput>",". The component's default ",[22,1848,135],{}," is the E.164 string, so Vue auto-spreads ",[22,1851,1852],{},"field.modelValue",[22,1854,1855],{},"field['onUpdate:modelValue']",[22,1857,1858],{},"field.name",", and ",[22,1861,1862],{},"field.onBlur"," straight through:",[207,1865,1867],{"className":518,"code":1866,"language":520,"meta":212,"style":212},"\u003Cscript setup lang=\"ts\">\nimport { useForm, Field as VeeField } from 'vee-validate';\nimport { toTypedSchema } from '@vee-validate\u002Fzod';\nimport { z } from 'zod';\nimport { ATelInput } from '@alikhalilll\u002Fa-tel-input';\nimport { zPhone } from '@alikhalilll\u002Fa-tel-input\u002Fzod';\n\nconst { handleSubmit } = useForm({\n  validationSchema: toTypedSchema(z.object({ phone: zPhone() })),\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit=\"handleSubmit(onSubmit)\">\n    \u003CVeeField v-slot=\"{ field, errors }\" name=\"phone\">\n      \u003Clabel for=\"phone\">Phone\u003C\u002Flabel>\n      \u003CATelInput\n        id=\"phone\"\n        v-bind=\"field\"\n        :error=\"errors[0]\"\n        :aria-invalid=\"!!errors.length\"\n        default-country=\"SA\"\n        show-validation\n      \u002F>\n    \u003C\u002FVeeField>\n    \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[22,1868,1869,1885,1905,1919,1933,1945,1959,1963,1981,2004,2009,2017,2021,2029,2046,2071,2093,2099,2110,2121,2132,2143,2154,2160,2166,2176,2199,2209],{"__ignoreMap":212},[216,1870,1871,1873,1875,1877,1879,1881,1883],{"class":218,"line":219},[216,1872,527],{"class":226},[216,1874,531],{"class":530},[216,1876,535],{"class":534},[216,1878,538],{"class":534},[216,1880,541],{"class":226},[216,1882,544],{"class":233},[216,1884,547],{"class":226},[216,1886,1887,1889,1892,1895,1898,1900,1903],{"class":218,"line":266},[216,1888,223],{"class":222},[216,1890,1891],{"class":226}," { useForm, Field ",[216,1893,1894],{"class":222},"as",[216,1896,1897],{"class":226}," VeeField } ",[216,1899,230],{"class":222},[216,1901,1902],{"class":233}," 'vee-validate'",[216,1904,237],{"class":226},[216,1906,1907,1909,1912,1914,1917],{"class":218,"line":283},[216,1908,223],{"class":222},[216,1910,1911],{"class":226}," { toTypedSchema } ",[216,1913,230],{"class":222},[216,1915,1916],{"class":233}," '@vee-validate\u002Fzod'",[216,1918,237],{"class":226},[216,1920,1921,1923,1926,1928,1931],{"class":218,"line":298},[216,1922,223],{"class":222},[216,1924,1925],{"class":226}," { z } ",[216,1927,230],{"class":222},[216,1929,1930],{"class":233}," 'zod'",[216,1932,237],{"class":226},[216,1934,1935,1937,1939,1941,1943],{"class":218,"line":413},[216,1936,223],{"class":222},[216,1938,227],{"class":226},[216,1940,230],{"class":222},[216,1942,234],{"class":233},[216,1944,237],{"class":226},[216,1946,1947,1949,1952,1954,1957],{"class":218,"line":603},[216,1948,223],{"class":222},[216,1950,1951],{"class":226}," { zPhone } ",[216,1953,230],{"class":222},[216,1955,1956],{"class":233}," '@alikhalilll\u002Fa-tel-input\u002Fzod'",[216,1958,237],{"class":226},[216,1960,1961],{"class":218,"line":633},[216,1962,410],{"emptyLinePlaceholder":409},[216,1964,1965,1967,1969,1972,1974,1976,1979],{"class":218,"line":643},[216,1966,582],{"class":222},[216,1968,420],{"class":226},[216,1970,1971],{"class":534},"handleSubmit",[216,1973,1514],{"class":226},[216,1975,541],{"class":222},[216,1977,1978],{"class":275}," useForm",[216,1980,280],{"class":226},[216,1982,1983,1986,1989,1992,1995,1998,2001],{"class":218,"line":648},[216,1984,1985],{"class":226},"  validationSchema: ",[216,1987,1988],{"class":275},"toTypedSchema",[216,1990,1991],{"class":226},"(z.",[216,1993,1994],{"class":275},"object",[216,1996,1997],{"class":226},"({ phone: ",[216,1999,2000],{"class":275},"zPhone",[216,2002,2003],{"class":226},"() })),\n",[216,2005,2006],{"class":218,"line":658},[216,2007,2008],{"class":226},"});\n",[216,2010,2011,2013,2015],{"class":218,"line":688},[216,2012,636],{"class":226},[216,2014,531],{"class":530},[216,2016,547],{"class":226},[216,2018,2019],{"class":218,"line":1617},[216,2020,410],{"emptyLinePlaceholder":409},[216,2022,2023,2025,2027],{"class":218,"line":1625},[216,2024,527],{"class":226},[216,2026,653],{"class":530},[216,2028,547],{"class":226},[216,2030,2031,2033,2036,2039,2041,2044],{"class":218,"line":1633},[216,2032,661],{"class":226},[216,2034,2035],{"class":530},"form",[216,2037,2038],{"class":534}," @submit",[216,2040,541],{"class":226},[216,2042,2043],{"class":233},"\"handleSubmit(onSubmit)\"",[216,2045,547],{"class":226},[216,2047,2048,2051,2054,2057,2059,2062,2065,2067,2069],{"class":218,"line":1641},[216,2049,2050],{"class":226},"    \u003C",[216,2052,2053],{"class":530},"VeeField",[216,2055,2056],{"class":534}," v-slot",[216,2058,541],{"class":226},[216,2060,2061],{"class":233},"\"{ field, errors }\"",[216,2063,2064],{"class":534}," name",[216,2066,541],{"class":226},[216,2068,671],{"class":233},[216,2070,547],{"class":226},[216,2072,2073,2076,2079,2082,2084,2086,2089,2091],{"class":218,"line":1649},[216,2074,2075],{"class":226},"      \u003C",[216,2077,2078],{"class":530},"label",[216,2080,2081],{"class":534}," for",[216,2083,541],{"class":226},[216,2085,671],{"class":233},[216,2087,2088],{"class":226},">Phone\u003C\u002F",[216,2090,2078],{"class":530},[216,2092,547],{"class":226},[216,2094,2095,2097],{"class":218,"line":1657},[216,2096,2075],{"class":226},[216,2098,1681],{"class":530},[216,2100,2102,2105,2107],{"class":218,"line":2101},18,[216,2103,2104],{"class":534},"        id",[216,2106,541],{"class":226},[216,2108,2109],{"class":233},"\"phone\"\n",[216,2111,2113,2116,2118],{"class":218,"line":2112},19,[216,2114,2115],{"class":534},"        v-bind",[216,2117,541],{"class":226},[216,2119,2120],{"class":233},"\"field\"\n",[216,2122,2124,2127,2129],{"class":218,"line":2123},20,[216,2125,2126],{"class":534},"        :error",[216,2128,541],{"class":226},[216,2130,2131],{"class":233},"\"errors[0]\"\n",[216,2133,2135,2138,2140],{"class":218,"line":2134},21,[216,2136,2137],{"class":534},"        :aria-invalid",[216,2139,541],{"class":226},[216,2141,2142],{"class":233},"\"!!errors.length\"\n",[216,2144,2146,2149,2151],{"class":218,"line":2145},22,[216,2147,2148],{"class":534},"        default-country",[216,2150,541],{"class":226},[216,2152,2153],{"class":233},"\"SA\"\n",[216,2155,2157],{"class":218,"line":2156},23,[216,2158,2159],{"class":534},"        show-validation\n",[216,2161,2163],{"class":218,"line":2162},24,[216,2164,2165],{"class":226},"      \u002F>\n",[216,2167,2169,2172,2174],{"class":218,"line":2168},25,[216,2170,2171],{"class":226},"    \u003C\u002F",[216,2173,2053],{"class":530},[216,2175,547],{"class":226},[216,2177,2179,2181,2184,2187,2189,2192,2195,2197],{"class":218,"line":2178},26,[216,2180,2050],{"class":226},[216,2182,2183],{"class":530},"button",[216,2185,2186],{"class":534}," type",[216,2188,541],{"class":226},[216,2190,2191],{"class":233},"\"submit\"",[216,2193,2194],{"class":226},">Submit\u003C\u002F",[216,2196,2183],{"class":530},[216,2198,547],{"class":226},[216,2200,2202,2205,2207],{"class":218,"line":2201},27,[216,2203,2204],{"class":226},"  \u003C\u002F",[216,2206,2035],{"class":530},[216,2208,547],{"class":226},[216,2210,2212,2214,2216],{"class":218,"line":2211},28,[216,2213,636],{"class":226},[216,2215,653],{"class":530},[216,2217,547],{"class":226},[14,2219,2220,2221,2223,2224,2227],{},"That's the whole integration. No ",[22,2222,121],{},", no manual ",[22,2225,2226],{},"handleBlur",", no extra glue.",[63,2229,2231,2233],{"id":2230},"usetelfield-when-you-need-async-server-side-validation",[22,2232,121],{}," — when you need async \u002F server-side validation",[2235,2236],"demo-tel-input-vee-validate",{},[14,2238,2239,2242,2243,2246,2247,147,2249,2251,2252,2254,2255,2257],{},[22,2240,2241],{},"useTelField(name, options)"," (from ",[22,2244,2245],{},"@alikhalilll\u002Fa-tel-input\u002Fvee-validate",") owns the two v-models (",[22,2248,707],{},[22,2250,1709],{},"), composes them into an E.164 string for VeeValidate's schema, and returns a ready-to-bind prop bag. Pair it with ",[22,2253,125],{}," for a Zod schema that shares the same ",[22,2256,24],{}," engine the component uses — schema and field can never disagree.",[14,2259,2260,2261,2264,2265,2268,2269,2272,2273,2275,2276,2279,2280,2282],{},"Server-side checks ride the schema via ",[22,2262,2263],{},"z.refine(async)"," — vee-validate ignores field-level rules when ",[22,2266,2267],{},"useForm"," has a ",[22,2270,2271],{},"validationSchema",", so the refine is what ",[22,2274,1971],{}," awaits and what drives ",[22,2277,2278],{},"useTelField","'s ",[22,2281,838],{}," ref (→ in-field spinner).",[207,2284,2286],{"className":209,"code":2285,"language":211,"meta":212,"style":212},"import { useTelField } from '@alikhalilll\u002Fa-tel-input\u002Fvee-validate';\nimport { zPhone } from '@alikhalilll\u002Fa-tel-input\u002Fzod';\nimport { useForm } from 'vee-validate';\nimport { toTypedSchema } from '@vee-validate\u002Fzod';\nimport { z } from 'zod';\n\nconst phoneSchema = zPhone().refine(\n  async (value) => {\n    if (!value) return true;\n    const { exists } = await $fetch('\u002Fapi\u002Fphone\u002Fexists', { query: { phone: value } });\n    return !exists;\n  },\n  { message: 'This phone number is already registered.' }\n);\n\nconst { handleSubmit } = useForm({\n  validationSchema: toTypedSchema(z.object({ phone: phoneSchema })),\n});\n\nconst { phone, country, error, handleBlur, fieldProps, validating } = useTelField('phone', {\n  validateOn: 'blur',\n  defaultCountry: 'SA',\n});\n",[22,2287,2288,2302,2314,2327,2339,2351,2355,2376,2394,2415,2443,2454,2459,2470,2474,2478,2494,2507,2511,2515,2559,2568,2578],{"__ignoreMap":212},[216,2289,2290,2292,2295,2297,2300],{"class":218,"line":219},[216,2291,223],{"class":222},[216,2293,2294],{"class":226}," { useTelField } ",[216,2296,230],{"class":222},[216,2298,2299],{"class":233}," '@alikhalilll\u002Fa-tel-input\u002Fvee-validate'",[216,2301,237],{"class":226},[216,2303,2304,2306,2308,2310,2312],{"class":218,"line":266},[216,2305,223],{"class":222},[216,2307,1951],{"class":226},[216,2309,230],{"class":222},[216,2311,1956],{"class":233},[216,2313,237],{"class":226},[216,2315,2316,2318,2321,2323,2325],{"class":218,"line":283},[216,2317,223],{"class":222},[216,2319,2320],{"class":226}," { useForm } ",[216,2322,230],{"class":222},[216,2324,1902],{"class":233},[216,2326,237],{"class":226},[216,2328,2329,2331,2333,2335,2337],{"class":218,"line":298},[216,2330,223],{"class":222},[216,2332,1911],{"class":226},[216,2334,230],{"class":222},[216,2336,1916],{"class":233},[216,2338,237],{"class":226},[216,2340,2341,2343,2345,2347,2349],{"class":218,"line":413},[216,2342,223],{"class":222},[216,2344,1925],{"class":226},[216,2346,230],{"class":222},[216,2348,1930],{"class":233},[216,2350,237],{"class":226},[216,2352,2353],{"class":218,"line":603},[216,2354,410],{"emptyLinePlaceholder":409},[216,2356,2357,2359,2362,2364,2367,2370,2373],{"class":218,"line":633},[216,2358,582],{"class":222},[216,2360,2361],{"class":534}," phoneSchema",[216,2363,588],{"class":222},[216,2365,2366],{"class":275}," zPhone",[216,2368,2369],{"class":226},"().",[216,2371,2372],{"class":275},"refine",[216,2374,2375],{"class":226},"(\n",[216,2377,2378,2381,2383,2386,2389,2392],{"class":218,"line":643},[216,2379,2380],{"class":222},"  async",[216,2382,42],{"class":226},[216,2384,2385],{"class":279},"value",[216,2387,2388],{"class":226},") ",[216,2390,2391],{"class":222},"=>",[216,2393,1455],{"class":226},[216,2395,2396,2399,2401,2404,2407,2410,2413],{"class":218,"line":648},[216,2397,2398],{"class":222},"    if",[216,2400,42],{"class":226},[216,2402,2403],{"class":222},"!",[216,2405,2406],{"class":226},"value) ",[216,2408,2409],{"class":222},"return",[216,2411,2412],{"class":534}," true",[216,2414,237],{"class":226},[216,2416,2417,2420,2422,2425,2427,2429,2432,2435,2437,2440],{"class":218,"line":658},[216,2418,2419],{"class":222},"    const",[216,2421,420],{"class":226},[216,2423,2424],{"class":534},"exists",[216,2426,1514],{"class":226},[216,2428,541],{"class":222},[216,2430,2431],{"class":222}," await",[216,2433,2434],{"class":275}," $fetch",[216,2436,594],{"class":226},[216,2438,2439],{"class":233},"'\u002Fapi\u002Fphone\u002Fexists'",[216,2441,2442],{"class":226},", { query: { phone: value } });\n",[216,2444,2445,2448,2451],{"class":218,"line":688},[216,2446,2447],{"class":222},"    return",[216,2449,2450],{"class":222}," !",[216,2452,2453],{"class":226},"exists;\n",[216,2455,2456],{"class":218,"line":1617},[216,2457,2458],{"class":226},"  },\n",[216,2460,2461,2464,2467],{"class":218,"line":1625},[216,2462,2463],{"class":226},"  { message: ",[216,2465,2466],{"class":233},"'This phone number is already registered.'",[216,2468,2469],{"class":226}," }\n",[216,2471,2472],{"class":218,"line":1633},[216,2473,600],{"class":226},[216,2475,2476],{"class":218,"line":1641},[216,2477,410],{"emptyLinePlaceholder":409},[216,2479,2480,2482,2484,2486,2488,2490,2492],{"class":218,"line":1649},[216,2481,582],{"class":222},[216,2483,420],{"class":226},[216,2485,1971],{"class":534},[216,2487,1514],{"class":226},[216,2489,541],{"class":222},[216,2491,1978],{"class":275},[216,2493,280],{"class":226},[216,2495,2496,2498,2500,2502,2504],{"class":218,"line":1657},[216,2497,1985],{"class":226},[216,2499,1988],{"class":275},[216,2501,1991],{"class":226},[216,2503,1994],{"class":275},[216,2505,2506],{"class":226},"({ phone: phoneSchema })),\n",[216,2508,2509],{"class":218,"line":2101},[216,2510,2008],{"class":226},[216,2512,2513],{"class":218,"line":2112},[216,2514,410],{"emptyLinePlaceholder":409},[216,2516,2517,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2540,2542,2544,2546,2548,2551,2553,2556],{"class":218,"line":2123},[216,2518,582],{"class":222},[216,2520,420],{"class":226},[216,2522,707],{"class":534},[216,2524,701],{"class":226},[216,2526,1709],{"class":534},[216,2528,701],{"class":226},[216,2530,113],{"class":534},[216,2532,701],{"class":226},[216,2534,2226],{"class":534},[216,2536,701],{"class":226},[216,2538,2539],{"class":534},"fieldProps",[216,2541,701],{"class":226},[216,2543,838],{"class":534},[216,2545,1514],{"class":226},[216,2547,541],{"class":222},[216,2549,2550],{"class":275}," useTelField",[216,2552,594],{"class":226},[216,2554,2555],{"class":233},"'phone'",[216,2557,2558],{"class":226},", {\n",[216,2560,2561,2564,2566],{"class":218,"line":2134},[216,2562,2563],{"class":226},"  validateOn: ",[216,2565,877],{"class":233},[216,2567,295],{"class":226},[216,2569,2570,2573,2576],{"class":218,"line":2145},[216,2571,2572],{"class":226},"  defaultCountry: ",[216,2574,2575],{"class":233},"'SA'",[216,2577,295],{"class":226},[216,2579,2580],{"class":218,"line":2156},[216,2581,2008],{"class":226},[207,2583,2585],{"className":518,"code":2584,"language":520,"meta":212,"style":212},"\u003CATelInput\n  v-model:phone=\"phone\"\n  v-model:country=\"country\"\n  v-bind=\"fieldProps\"\n  :error=\"error\"\n  :validating=\"validating\"\n  show-validation\n  @blur=\"handleBlur\"\n\u002F>\n",[22,2586,2587,2593,2609,2625,2638,2652,2666,2670,2685],{"__ignoreMap":212},[216,2588,2589,2591],{"class":218,"line":219},[216,2590,527],{"class":226},[216,2592,1681],{"class":530},[216,2594,2595,2597,2599,2601,2603,2605,2607],{"class":218,"line":266},[216,2596,1686],{"class":534},[216,2598,1463],{"class":226},[216,2600,707],{"class":534},[216,2602,541],{"class":226},[216,2604,1695],{"class":226},[216,2606,707],{"class":226},[216,2608,1700],{"class":226},[216,2610,2611,2613,2615,2617,2619,2621,2623],{"class":218,"line":283},[216,2612,1686],{"class":534},[216,2614,1463],{"class":226},[216,2616,1709],{"class":534},[216,2618,541],{"class":226},[216,2620,1695],{"class":226},[216,2622,1709],{"class":226},[216,2624,1700],{"class":226},[216,2626,2627,2630,2632,2634,2636],{"class":218,"line":298},[216,2628,2629],{"class":534},"  v-bind",[216,2631,541],{"class":226},[216,2633,1695],{"class":226},[216,2635,2539],{"class":226},[216,2637,1700],{"class":226},[216,2639,2640,2642,2644,2646,2648,2650],{"class":218,"line":413},[216,2641,1722],{"class":226},[216,2643,113],{"class":534},[216,2645,541],{"class":226},[216,2647,1695],{"class":226},[216,2649,113],{"class":226},[216,2651,1700],{"class":226},[216,2653,2654,2656,2658,2660,2662,2664],{"class":218,"line":603},[216,2655,1722],{"class":226},[216,2657,838],{"class":534},[216,2659,541],{"class":226},[216,2661,1695],{"class":226},[216,2663,838],{"class":226},[216,2665,1700],{"class":226},[216,2667,2668],{"class":218,"line":633},[216,2669,1764],{"class":534},[216,2671,2672,2675,2677,2679,2681,2683],{"class":218,"line":643},[216,2673,2674],{"class":226},"  @",[216,2676,1372],{"class":534},[216,2678,541],{"class":226},[216,2680,1695],{"class":226},[216,2682,2226],{"class":226},[216,2684,1700],{"class":226},[216,2686,2687],{"class":218,"line":648},[216,2688,1769],{"class":226},[63,2690,2692],{"id":2691},"anatomy","Anatomy",[68,2694,2695,2703,2719,2735,2748,2759],{},[71,2696,2697,2702],{},[17,2698,2699,2701],{},[22,2700,113],{}," prop"," — externally controlled error message. When set, it forces the field into the error state and replaces internal libphonenumber validation. Wire it from any source — VeeValidate, Zod, a server response, a custom validator.",[71,2704,2705,1832,2709,2711,2712,2715,2716,2718],{},[17,2706,2707,2701],{},[22,2708,838],{},[22,2710,853],{}," while an async rule is in flight. Renders a small spinner inside the field and sets ",[22,2713,2714],{},"aria-busy=\"true\"",". Doesn't disable the input (use ",[22,2717,921],{}," for that).",[71,2720,2721,1832,2725,2727,2728,2730,2731,2734],{},[17,2722,2723,2701],{},[22,2724,861],{},[22,2726,871],{}," (default, current behaviour), ",[22,2729,877],{}," (stays idle until first blur — form-library friendly), or ",[22,2732,2733],{},"'eager'"," (no typing pause).",[71,2736,2737,2741,2742,2744,2745,2747],{},[17,2738,2739,2701],{},[22,2740,801],{}," — forwards to the inner ",[22,2743,814],{}," for native ",[22,2746,1796],{}," submission.",[71,2749,2750,2758],{},[17,2751,2752,176,2754,2757],{},[22,2753,117],{},[22,2755,2756],{},"@focus"," emits"," — mirror the inner input's native events.",[71,2760,2761,1832,2764,701,2767,701,2770,2773],{},[17,2762,2763],{},"Exposed methods",[22,2765,2766],{},"tellRef.value?.focus()",[22,2768,2769],{},".blur()",[22,2771,2772],{},".select()"," for imperative focus management after submit-fail.",[63,2775,2777],{"id":2776},"zod-schema-shapes","Zod schema shapes",[14,2779,2780,2782,2783,2786],{},[22,2781,125],{}," returns a ",[22,2784,2785],{},"z.ZodType\u003Cstring>"," that validates an E.164 string:",[207,2788,2790],{"className":209,"code":2789,"language":211,"meta":212,"style":212},"z.object({ phone: zPhone() }); \u002F\u002F input: '+201066105963'\nz.object({ phone: zPhone({ country: 'SA' }) }); \u002F\u002F input: national digits, validated as SA\nz.object({ phone: zPhone({ allowedDialCodes: ['20', '966'] }) }); \u002F\u002F restrict to EG + SA\n",[22,2791,2792,2809,2830],{"__ignoreMap":212},[216,2793,2794,2797,2799,2801,2803,2806],{"class":218,"line":219},[216,2795,2796],{"class":226},"z.",[216,2798,1994],{"class":275},[216,2800,1997],{"class":226},[216,2802,2000],{"class":275},[216,2804,2805],{"class":226},"() }); ",[216,2807,2808],{"class":262},"\u002F\u002F input: '+201066105963'\n",[216,2810,2811,2813,2815,2817,2819,2822,2824,2827],{"class":218,"line":266},[216,2812,2796],{"class":226},[216,2814,1994],{"class":275},[216,2816,1997],{"class":226},[216,2818,2000],{"class":275},[216,2820,2821],{"class":226},"({ country: ",[216,2823,2575],{"class":233},[216,2825,2826],{"class":226}," }) }); ",[216,2828,2829],{"class":262},"\u002F\u002F input: national digits, validated as SA\n",[216,2831,2832,2834,2836,2838,2840,2843,2845,2847,2850,2853],{"class":218,"line":283},[216,2833,2796],{"class":226},[216,2835,1994],{"class":275},[216,2837,1997],{"class":226},[216,2839,2000],{"class":275},[216,2841,2842],{"class":226},"({ allowedDialCodes: [",[216,2844,1056],{"class":233},[216,2846,701],{"class":226},[216,2848,2849],{"class":233},"'966'",[216,2851,2852],{"class":226},"] }) }); ",[216,2854,2855],{"class":262},"\u002F\u002F restrict to EG + SA\n",[14,2857,2858,2859,2862,2863,2866],{},"Or use ",[22,2860,2861],{},"zPhoneObject()"," when you want to validate the ",[22,2864,2865],{},"{ phone, country }"," shape directly:",[207,2868,2870],{"className":209,"code":2869,"language":211,"meta":212,"style":212},"import { zPhoneObject } from '@alikhalilll\u002Fa-tel-input\u002Fzod';\n\nconst schema = z.object({\n  contact: zPhoneObject({ requiredMessage: 'Phone number is required.' }),\n});\n",[22,2871,2872,2885,2889,2905,2922],{"__ignoreMap":212},[216,2873,2874,2876,2879,2881,2883],{"class":218,"line":219},[216,2875,223],{"class":222},[216,2877,2878],{"class":226}," { zPhoneObject } ",[216,2880,230],{"class":222},[216,2882,1956],{"class":233},[216,2884,237],{"class":226},[216,2886,2887],{"class":218,"line":266},[216,2888,410],{"emptyLinePlaceholder":409},[216,2890,2891,2893,2896,2898,2901,2903],{"class":218,"line":283},[216,2892,582],{"class":222},[216,2894,2895],{"class":534}," schema",[216,2897,588],{"class":222},[216,2899,2900],{"class":226}," z.",[216,2902,1994],{"class":275},[216,2904,280],{"class":226},[216,2906,2907,2910,2913,2916,2919],{"class":218,"line":298},[216,2908,2909],{"class":226},"  contact: ",[216,2911,2912],{"class":275},"zPhoneObject",[216,2914,2915],{"class":226},"({ requiredMessage: ",[216,2917,2918],{"class":233},"'Phone number is required.'",[216,2920,2921],{"class":226}," }),\n",[216,2923,2924],{"class":218,"line":413},[216,2925,2008],{"class":226},[63,2927,2929],{"id":2928},"native-html-forms","Native HTML forms",[207,2931,2933],{"className":518,"code":2932,"language":520,"meta":212,"style":212},"\u003Cform>\n  \u003CATelInput v-model:phone=\"phone\" v-model:country=\"country\" name=\"phone\" \u002F>\n\u003C\u002Fform>\n",[22,2934,2935,2943,2948],{"__ignoreMap":212},[216,2936,2937,2939,2941],{"class":218,"line":219},[216,2938,527],{"class":226},[216,2940,2035],{"class":530},[216,2942,547],{"class":226},[216,2944,2945],{"class":218,"line":266},[216,2946,2947],{"class":226},"  \u003CATelInput v-model:phone=\"phone\" v-model:country=\"country\" name=\"phone\" \u002F>\n",[216,2949,2950,2952,2954],{"class":218,"line":283},[216,2951,636],{"class":226},[216,2953,2035],{"class":530},[216,2955,547],{"class":226},[14,2957,2958,2960,2961,2964,2965,2967],{},[22,2959,801],{}," is forwarded to the inner ",[22,2962,2963],{},"\u003Cinput>",", so FormData picks the value up automatically. The submitted value is the digits-only national number; compose the E.164 via ",[22,2966,1435],{}," when needed.",[198,2969,2971],{"id":2970},"country-detection","Country detection",[63,2973,2975],{"id":2974},"from-the-environment-silent","From the environment (silent)",[14,2977,2978,2979,2981,2982,2985],{},"On mount, the component runs an IP → timezone → locale chain (default strategy ",[22,2980,1032],{},") and stores the result as a ",[17,2983,2984],{},"hint"," for the input parser. It does not auto-fill the picker.",[721,2987,2988,3000],{},[724,2989,2990],{},[727,2991,2992,2997],{},[730,2993,2994,2996],{},[22,2995,1022],{}," value",[730,2998,2999],{},"Behaviour",[743,3001,3002,3012,3022],{},[727,3003,3004,3009],{},[748,3005,3006,3008],{},[22,3007,1032],{}," (default)",[748,3010,3011],{},"IP → timezone → locale → default",[727,3013,3014,3019],{},[748,3015,3016],{},[22,3017,3018],{},"'locale'",[748,3020,3021],{},"Skip IP. Timezone → locale → default",[727,3023,3024,3029],{},[748,3025,3026],{},[22,3027,3028],{},"'none'",[748,3030,3031,3032,3034],{},"Use ",[22,3033,1042],{}," immediately",[14,3036,3037],{},"Run detection imperatively from anywhere:",[207,3039,3041],{"className":209,"code":3040,"language":211,"meta":212,"style":212},"import { detectCountry } from '@alikhalilll\u002Fa-tel-input';\n\nconst iso2 = await detectCountry({ strategy: 'auto', defaultCountry: 'EG' });\n",[22,3042,3043,3056,3060],{"__ignoreMap":212},[216,3044,3045,3047,3050,3052,3054],{"class":218,"line":219},[216,3046,223],{"class":222},[216,3048,3049],{"class":226}," { detectCountry } ",[216,3051,230],{"class":222},[216,3053,234],{"class":233},[216,3055,237],{"class":226},[216,3057,3058],{"class":218,"line":266},[216,3059,410],{"emptyLinePlaceholder":409},[216,3061,3062,3064,3067,3069,3071,3074,3077,3079,3082,3084],{"class":218,"line":283},[216,3063,582],{"class":222},[216,3065,3066],{"class":534}," iso2",[216,3068,588],{"class":222},[216,3070,2431],{"class":222},[216,3072,3073],{"class":275}," detectCountry",[216,3075,3076],{"class":226},"({ strategy: ",[216,3078,1032],{"class":233},[216,3080,3081],{"class":226},", defaultCountry: ",[216,3083,1060],{"class":233},[216,3085,3086],{"class":226}," });\n",[63,3088,3090],{"id":3089},"from-user-input-default","From user input (default)",[3092,3093],"demo-tel-input-detect-from-input",{},[14,3095,3096,3099,3100,3102,3103,3105,3106,3108],{},[22,3097,3098],{},"detect-from-input"," is ",[22,3101,853],{}," by default. The picker is hidden until typing or pasting matches a known dial code — debounced by ",[22,3104,1089],{}," (default 150 ms). On match, the picker reveals and ",[22,3107,707],{}," is normalised to the national significant number (dial code + national prefix stripped).",[207,3110,3112],{"className":518,"code":3111,"language":520,"meta":212,"style":212},"\u003C!-- Default — picker hidden until detected -->\n\u003CATelInput v-model:phone=\"phone\" v-model:country=\"country\" show-validation \u002F>\n\n\u003C!-- Variants -->\n\u003CATelInput default-country=\"20\" \u002F>\n\u003C!-- Pre-filled picker -->\n\u003CATelInput v-model:country=\"myInitial\" \u002F>\n\u003C!-- Pre-filled via v-model -->\n\u003CATelInput :detect-from-input=\"false\" \u002F>\n\u003C!-- Legacy always-visible picker -->\n",[22,3113,3114,3119,3158,3162,3167,3183,3188,3211,3216,3237],{"__ignoreMap":212},[216,3115,3116],{"class":218,"line":219},[216,3117,3118],{"class":262},"\u003C!-- Default — picker hidden until detected -->\n",[216,3120,3121,3123,3125,3128,3130,3132,3134,3136,3138,3140,3142,3144,3146,3148,3150,3152,3154,3156],{"class":218,"line":266},[216,3122,527],{"class":226},[216,3124,5],{"class":530},[216,3126,3127],{"class":534}," v-model",[216,3129,1463],{"class":226},[216,3131,707],{"class":534},[216,3133,541],{"class":226},[216,3135,1695],{"class":226},[216,3137,707],{"class":226},[216,3139,1695],{"class":226},[216,3141,3127],{"class":534},[216,3143,1463],{"class":226},[216,3145,1709],{"class":534},[216,3147,541],{"class":226},[216,3149,1695],{"class":226},[216,3151,1709],{"class":226},[216,3153,1695],{"class":226},[216,3155,682],{"class":534},[216,3157,685],{"class":226},[216,3159,3160],{"class":218,"line":283},[216,3161,410],{"emptyLinePlaceholder":409},[216,3163,3164],{"class":218,"line":298},[216,3165,3166],{"class":262},"\u003C!-- Variants -->\n",[216,3168,3169,3171,3173,3176,3178,3181],{"class":218,"line":413},[216,3170,527],{"class":226},[216,3172,5],{"class":530},[216,3174,3175],{"class":534}," default-country",[216,3177,541],{"class":226},[216,3179,3180],{"class":233},"\"20\"",[216,3182,685],{"class":226},[216,3184,3185],{"class":218,"line":603},[216,3186,3187],{"class":262},"\u003C!-- Pre-filled picker -->\n",[216,3189,3190,3192,3194,3196,3198,3200,3202,3204,3207,3209],{"class":218,"line":633},[216,3191,527],{"class":226},[216,3193,5],{"class":530},[216,3195,3127],{"class":534},[216,3197,1463],{"class":226},[216,3199,1709],{"class":534},[216,3201,541],{"class":226},[216,3203,1695],{"class":226},[216,3205,3206],{"class":226},"myInitial",[216,3208,1695],{"class":226},[216,3210,685],{"class":226},[216,3212,3213],{"class":218,"line":643},[216,3214,3215],{"class":262},"\u003C!-- Pre-filled via v-model -->\n",[216,3217,3218,3220,3222,3225,3227,3229,3231,3233,3235],{"class":218,"line":648},[216,3219,527],{"class":226},[216,3221,5],{"class":530},[216,3223,3224],{"class":226}," :",[216,3226,3098],{"class":534},[216,3228,541],{"class":226},[216,3230,1695],{"class":226},[216,3232,848],{"class":534},[216,3234,1695],{"class":226},[216,3236,685],{"class":226},[216,3238,3239],{"class":218,"line":658},[216,3240,3241],{"class":262},"\u003C!-- Legacy always-visible picker -->\n",[14,3243,3244],{},"Behaviour:",[68,3246,3247,3260,3271,3274],{},[71,3248,3249,3250,3252,3253,3256,3257,3259],{},"Local formats like Egyptian ",[22,3251,87],{}," or UK ",[22,3254,3255],{},"07911123456"," work — once the typed number is fully valid for the hinted country (from the environment chain or ",[22,3258,1042],{},"), the picker reveals.",[71,3261,3262,3263,3266,3267,3270],{},"Multi-country dial codes (",[22,3264,3265],{},"+1"," NANP, ",[22,3268,3269],{},"+7"," RU\u002FKZ) tiebreak by recents → alphabetical.",[71,3272,3273],{},"A manual pick freezes detection. Clearing the input resets and re-arms it.",[71,3275,3276,3279,3280,3283,3284,3287,3288,3291],{},[17,3277,3278],{},"Known limitation:"," raw-digit input is fundamentally ambiguous. Typing ",[22,3281,3282],{},"415"," resolves to Switzerland (",[22,3285,3286],{},"+41 5…","), not the US area code. For region-locked apps, pass ",[22,3289,3290],{},"default-country"," instead.",[63,3293,3295],{"id":3294},"typing-pause-ux","Typing-pause UX",[14,3297,3298,3299,3301],{},"While the user is mid-burst, the component holds back validation styling and shows a small spinner in the picker slot — both unblock once ",[22,3300,1089],{}," settles. After a failed detection (no dial code recognised), the picker becomes visible with no country selected so the user can pick manually instead of being stranded.",[68,3303,3304,3318,3341,3351],{},[71,3305,3306,3309,3310,3313,3314,3317],{},[17,3307,3308],{},"Spinner during the debounce window"," — replaceable via the ",[22,3311,3312],{},"#detecting"," slot. It only appears during the ",[969,3315,3316],{},"first"," detection attempt; once the picker has rendered (success or revealed-after-miss) the spinner stops re-flashing on every keystroke.",[71,3319,3320,3326,3327,3329,3330,3332,3333,3336,3337,3340],{},[17,3321,3322,3323],{},"Validation gated by ",[22,3324,3325],{},"hasFinishedTyping"," — field tinting (",[22,3328,984],{},"), the validation icon (",[22,3331,1002],{},"), the ",[22,3334,3335],{},"aria-invalid"," attribute, and the error message all stay neutral until the debounce settles. The raw ",[22,3338,3339],{},"validationState"," is still exposed via the template ref for consumers that want eager state.",[71,3342,3343,3346,3347,3350],{},[17,3344,3345],{},"Picker reveals after a no-match attempt"," — driven by an internal ",[22,3348,3349],{},"detectionAttempted"," flag. The picker won't disappear again until the input is cleared.",[71,3352,3353,3359,3360,3362],{},[17,3354,3355,3356,3358],{},"Programmatic ",[22,3357,30],{}," changes bypass the gate"," — a parent setting ",[22,3361,707],{}," is a committed value, not active typing, so validation surfaces immediately.",[14,3364,3365,3366,176,3368,176,3370,176,3373,493,3376,701,3379,701,3382,701,3384,511],{},"Exposed via template ref alongside the existing ",[22,3367,1425],{},[22,3369,3339],{},[22,3371,3372],{},"required",[22,3374,3375],{},"selectedDialCode",[22,3377,3378],{},"visibleValidationState",[22,3380,3381],{},"isDetecting",[22,3383,3325],{},[22,3385,3349],{},[198,3387,1266],{"id":3388},"internationalization",[14,3390,3391,3393],{},[22,3392,5],{}," is built for non-English, RTL, and non-ASCII-numeral users.",[63,3395,3397],{"id":3396},"rtl","RTL",[3399,3400],"demo-tel-input-rtl",{},[14,3402,3403,3404,3406,3407,3409,3410,3413,3414,3417,3418,176,3421,3424],{},"The component is direction-aware. Omit ",[22,3405,1202],{}," (or pass ",[22,3408,1032],{},") and direction inherits from\nthe page — wrap the component in ",[22,3411,3412],{},"\u003Cdiv dir=\"rtl\">"," or set ",[22,3415,3416],{},"\u003Chtml dir=\"rtl\">",". Pass\n",[22,3419,3420],{},"dir=\"ltr\"",[22,3422,3423],{},"dir=\"rtl\""," to force a direction regardless of the page.",[14,3426,3427,3428,3431],{},"The ",[17,3429,3430],{},"field row itself always stays left-to-right"," — the dial-code prefix, the digits, and\nthe flag trigger keep the same order in every direction, because a phone number is\ninherently LTR content. What follows the page direction is the surrounding chrome: the\nhelper\u002Ferror line aligns to the page direction, and the country-picker popover (its search\nbar and list rows) mirrors. So an RTL page gets correctly-aligned Arabic helper text and a\nmirrored picker, without scrambling the phone field.",[63,3433,3435],{"id":3434},"alternative-numerals","Alternative numerals",[14,3437,3438,3439,3442,3443,3446,3447,3449,3450,3453,3454,3457],{},"Digits entered in another script are accepted and normalised to ASCII — typing the\nArabic-Indic ",[22,3440,3441],{},"٠١٠٦٦١٠٥٩٦٣"," or the Persian ",[22,3444,3445],{},"۰۹۱۲۳۴۵۶۷۸"," is the same as typing the ASCII\nequivalent. Detection, validation, and ",[22,3448,30],{}," always work with ASCII digits.\nSupported systems: Arabic-Indic (",[22,3451,3452],{},"٠-٩","), Extended\u002FEastern Arabic — Persian & Urdu (",[22,3455,3456],{},"۰-۹","),\nDevanagari, and Bengali.",[207,3459,3461],{"className":209,"code":3460,"language":211,"meta":212,"style":212},"import { normalizeDigits } from '@alikhalilll\u002Fa-tel-input';\n\nnormalizeDigits('٠١٠٦٦'); \u002F\u002F → '01066'\n",[22,3462,3463,3476,3480],{"__ignoreMap":212},[216,3464,3465,3467,3470,3472,3474],{"class":218,"line":219},[216,3466,223],{"class":222},[216,3468,3469],{"class":226}," { normalizeDigits } ",[216,3471,230],{"class":222},[216,3473,234],{"class":233},[216,3475,237],{"class":226},[216,3477,3478],{"class":218,"line":266},[216,3479,410],{"emptyLinePlaceholder":409},[216,3481,3482,3485,3487,3490,3493],{"class":218,"line":283},[216,3483,3484],{"class":275},"normalizeDigits",[216,3486,594],{"class":226},[216,3488,3489],{"class":233},"'٠١٠٦٦'",[216,3491,3492],{"class":226},"); ",[216,3494,3495],{"class":262},"\u002F\u002F → '01066'\n",[63,3497,3499],{"id":3498},"locale-messages","Locale & messages",[3501,3502],"demo-tel-input-i18n",{},[14,3504,3505,3506,3508,3509,3511],{},"Pass a ",[22,3507,1232],{}," and a ",[22,3510,1251],{}," bag to fully localise the component:",[207,3513,3515],{"className":518,"code":3514,"language":520,"meta":212,"style":212},"\u003Ctemplate>\n  \u003Cdiv dir=\"rtl\">\n    \u003CATelInput\n      v-model:phone=\"phone\"\n      v-model:country=\"country\"\n      locale=\"ar\"\n      default-country=\"20\"\n      show-validation\n      :messages=\"{\n        searchPlaceholder: 'ابحث عن دولة أو +رمز…',\n        emptyText: 'لا توجد دول.',\n        loadingText: 'جارٍ تحميل الدول…',\n        suggestedLabel: 'مقترحة',\n        allCountriesLabel: 'كل الدول',\n        phoneInputLabel: 'رقم الهاتف',\n        selectCountryLabel: 'اختر دولة',\n        errorMessages: {\n          too_short: 'الرقم قصير جدًا',\n          invalid_phone: 'الرقم غير صحيح',\n        },\n      }\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[22,3516,3517,3525,3542,3548,3557,3567,3577,3587,3592,3602,3607,3612,3617,3622,3627,3632,3637,3642,3647,3652,3657,3662,3667,3675],{"__ignoreMap":212},[216,3518,3519,3521,3523],{"class":218,"line":219},[216,3520,527],{"class":226},[216,3522,653],{"class":530},[216,3524,547],{"class":226},[216,3526,3527,3529,3532,3535,3537,3540],{"class":218,"line":266},[216,3528,661],{"class":226},[216,3530,3531],{"class":530},"div",[216,3533,3534],{"class":534}," dir",[216,3536,541],{"class":226},[216,3538,3539],{"class":233},"\"rtl\"",[216,3541,547],{"class":226},[216,3543,3544,3546],{"class":218,"line":283},[216,3545,2050],{"class":226},[216,3547,1681],{"class":530},[216,3549,3550,3553,3555],{"class":218,"line":298},[216,3551,3552],{"class":534},"      v-model:phone",[216,3554,541],{"class":226},[216,3556,2109],{"class":233},[216,3558,3559,3562,3564],{"class":218,"line":413},[216,3560,3561],{"class":534},"      v-model:country",[216,3563,541],{"class":226},[216,3565,3566],{"class":233},"\"country\"\n",[216,3568,3569,3572,3574],{"class":218,"line":603},[216,3570,3571],{"class":534},"      locale",[216,3573,541],{"class":226},[216,3575,3576],{"class":233},"\"ar\"\n",[216,3578,3579,3582,3584],{"class":218,"line":633},[216,3580,3581],{"class":534},"      default-country",[216,3583,541],{"class":226},[216,3585,3586],{"class":233},"\"20\"\n",[216,3588,3589],{"class":218,"line":643},[216,3590,3591],{"class":534},"      show-validation\n",[216,3593,3594,3597,3599],{"class":218,"line":648},[216,3595,3596],{"class":534},"      :messages",[216,3598,541],{"class":226},[216,3600,3601],{"class":233},"\"{\n",[216,3603,3604],{"class":218,"line":658},[216,3605,3606],{"class":233},"        searchPlaceholder: 'ابحث عن دولة أو +رمز…',\n",[216,3608,3609],{"class":218,"line":688},[216,3610,3611],{"class":233},"        emptyText: 'لا توجد دول.',\n",[216,3613,3614],{"class":218,"line":1617},[216,3615,3616],{"class":233},"        loadingText: 'جارٍ تحميل الدول…',\n",[216,3618,3619],{"class":218,"line":1625},[216,3620,3621],{"class":233},"        suggestedLabel: 'مقترحة',\n",[216,3623,3624],{"class":218,"line":1633},[216,3625,3626],{"class":233},"        allCountriesLabel: 'كل الدول',\n",[216,3628,3629],{"class":218,"line":1641},[216,3630,3631],{"class":233},"        phoneInputLabel: 'رقم الهاتف',\n",[216,3633,3634],{"class":218,"line":1649},[216,3635,3636],{"class":233},"        selectCountryLabel: 'اختر دولة',\n",[216,3638,3639],{"class":218,"line":1657},[216,3640,3641],{"class":233},"        errorMessages: {\n",[216,3643,3644],{"class":218,"line":2101},[216,3645,3646],{"class":233},"          too_short: 'الرقم قصير جدًا',\n",[216,3648,3649],{"class":218,"line":2112},[216,3650,3651],{"class":233},"          invalid_phone: 'الرقم غير صحيح',\n",[216,3653,3654],{"class":218,"line":2123},[216,3655,3656],{"class":233},"        },\n",[216,3658,3659],{"class":218,"line":2134},[216,3660,3661],{"class":233},"      }\"\n",[216,3663,3664],{"class":218,"line":2145},[216,3665,3666],{"class":226},"    \u002F>\n",[216,3668,3669,3671,3673],{"class":218,"line":2156},[216,3670,2204],{"class":226},[216,3672,3531],{"class":530},[216,3674,547],{"class":226},[216,3676,3677,3679,3681],{"class":218,"line":2162},[216,3678,636],{"class":226},[216,3680,653],{"class":530},[216,3682,547],{"class":226},[68,3684,3685,3693,3698],{},[71,3686,3687,3689,3690,3692],{},[22,3688,1232],{}," localises country names via ",[22,3691,159],{}," (search matches both the\nlocalised and English spelling) and renders the format-hint numerals in that locale.",[71,3694,3695,3697],{},[22,3696,1251],{}," bundles every UI string — picker labels, validation errors, and screen-reader\nlabels — into one prop. Every key is optional and falls back to its English default.",[71,3699,3700,3701,701,3703,701,3705,701,3707,3709,3710,3712],{},"The individual props (",[22,3702,1127],{},[22,3704,1146],{},[22,3706,1165],{},[22,3708,1184],{},")\nstill work and take precedence over the matching ",[22,3711,1251],{}," key.",[63,3714,3716],{"id":3715},"accessibility","Accessibility",[14,3718,3719,3720,42,3723,3726,3727,3729,3730,3733,3734,3737],{},"The phone input carries an ",[22,3721,3722],{},"aria-label",[22,3724,3725],{},"messages.phoneInputLabel","), ",[22,3728,3335],{}," when\nthe number fails validation, and an ",[22,3731,3732],{},"aria-describedby"," pointing at the live helper line.\nThe hint and error share an ",[22,3735,3736],{},"aria-live=\"polite\""," region, so screen readers announce\nvalidation changes. The country trigger and every list option are keyboard-reachable and\nlabelled.",[198,3739,3741],{"id":3740},"restricting-countries","Restricting countries",[3743,3744],"demo-tel-input-allowed",{},[207,3746,3748],{"className":518,"code":3747,"language":520,"meta":212,"style":212},"\u003CATelInput\n  v-model:phone=\"phone\"\n  v-model:country=\"country\"\n  :allowed-dial-codes=\"['20', '971', '966']\"\n  default-country=\"20\"\n\u002F>\n",[22,3749,3750,3756,3772,3788,3817,3826],{"__ignoreMap":212},[216,3751,3752,3754],{"class":218,"line":219},[216,3753,527],{"class":226},[216,3755,1681],{"class":530},[216,3757,3758,3760,3762,3764,3766,3768,3770],{"class":218,"line":266},[216,3759,1686],{"class":534},[216,3761,1463],{"class":226},[216,3763,707],{"class":534},[216,3765,541],{"class":226},[216,3767,1695],{"class":226},[216,3769,707],{"class":226},[216,3771,1700],{"class":226},[216,3773,3774,3776,3778,3780,3782,3784,3786],{"class":218,"line":283},[216,3775,1686],{"class":534},[216,3777,1463],{"class":226},[216,3779,1709],{"class":534},[216,3781,541],{"class":226},[216,3783,1695],{"class":226},[216,3785,1709],{"class":226},[216,3787,1700],{"class":226},[216,3789,3790,3792,3795,3797,3799,3802,3804,3806,3809,3811,3813,3815],{"class":218,"line":298},[216,3791,1722],{"class":226},[216,3793,3794],{"class":534},"allowed-dial-codes",[216,3796,541],{"class":226},[216,3798,1695],{"class":226},[216,3800,3801],{"class":226},"[",[216,3803,1056],{"class":233},[216,3805,701],{"class":226},[216,3807,3808],{"class":233},"'971'",[216,3810,701],{"class":226},[216,3812,2849],{"class":233},[216,3814,292],{"class":226},[216,3816,1700],{"class":226},[216,3818,3819,3822,3824],{"class":218,"line":413},[216,3820,3821],{"class":534},"  default-country",[216,3823,541],{"class":226},[216,3825,3586],{"class":233},[216,3827,3828],{"class":218,"line":603},[216,3829,1769],{"class":226},[14,3831,3832,3833,3836],{},"Disallowed countries still render in the picker but as disabled rows. The whitelist surfaces in the ",[17,3834,3835],{},"Suggested"," group at the top so the user doesn't scroll.",[198,3838,3840],{"id":3839},"theming","Theming",[3842,3843],"demo-tel-input-themes",{},[14,3845,3846,3847,3850],{},"The component is themed entirely with the shared ",[22,3848,3849],{},"--ak-ui-*"," CSS variables — no component props, no rebuild. Three placement patterns:",[207,3852,3856],{"className":3853,"code":3854,"language":3855,"meta":212,"style":212},"language-css shiki shiki-themes github-light-default github-dark-default","\u002F* 1. Global override — every instance *\u002F\n:root {\n  --ak-ui-ring: 215 100% 70%;\n  --ak-ui-accent: 215 50% 25%;\n}\n\n\u002F* 2. Scoped class — per section \u002F tenant *\u002F\n.tenant-acme {\n  --ak-ui-ring: 155 70% 50%;\n}\n\n\u002F* 3. Inline — rapid prototyping (write straight on a wrapper :style) *\u002F\n","css",[22,3857,3858,3863,3870,3893,3914,3918,3922,3927,3934,3953,3957,3961],{"__ignoreMap":212},[216,3859,3860],{"class":218,"line":219},[216,3861,3862],{"class":262},"\u002F* 1. Global override — every instance *\u002F\n",[216,3864,3865,3868],{"class":218,"line":266},[216,3866,3867],{"class":534},":root",[216,3869,1455],{"class":226},[216,3871,3872,3875,3877,3880,3883,3886,3889,3891],{"class":218,"line":283},[216,3873,3874],{"class":279},"  --ak-ui-ring",[216,3876,493],{"class":226},[216,3878,3879],{"class":534},"215",[216,3881,3882],{"class":534}," 100",[216,3884,3885],{"class":222},"%",[216,3887,3888],{"class":534}," 70",[216,3890,3885],{"class":222},[216,3892,237],{"class":226},[216,3894,3895,3898,3900,3902,3905,3907,3910,3912],{"class":218,"line":298},[216,3896,3897],{"class":279},"  --ak-ui-accent",[216,3899,493],{"class":226},[216,3901,3879],{"class":534},[216,3903,3904],{"class":534}," 50",[216,3906,3885],{"class":222},[216,3908,3909],{"class":534}," 25",[216,3911,3885],{"class":222},[216,3913,237],{"class":226},[216,3915,3916],{"class":218,"line":413},[216,3917,1592],{"class":226},[216,3919,3920],{"class":218,"line":603},[216,3921,410],{"emptyLinePlaceholder":409},[216,3923,3924],{"class":218,"line":633},[216,3925,3926],{"class":262},"\u002F* 2. Scoped class — per section \u002F tenant *\u002F\n",[216,3928,3929,3932],{"class":218,"line":643},[216,3930,3931],{"class":534},".tenant-acme",[216,3933,1455],{"class":226},[216,3935,3936,3938,3940,3943,3945,3947,3949,3951],{"class":218,"line":648},[216,3937,3874],{"class":279},[216,3939,493],{"class":226},[216,3941,3942],{"class":534},"155",[216,3944,3888],{"class":534},[216,3946,3885],{"class":222},[216,3948,3904],{"class":534},[216,3950,3885],{"class":222},[216,3952,237],{"class":226},[216,3954,3955],{"class":218,"line":658},[216,3956,1592],{"class":226},[216,3958,3959],{"class":218,"line":688},[216,3960,410],{"emptyLinePlaceholder":409},[216,3962,3963],{"class":218,"line":1617},[216,3964,3965],{"class":262},"\u002F* 3. Inline — rapid prototyping (write straight on a wrapper :style) *\u002F\n",[14,3967,3968,3969,3972,3973,3976,3977,511],{},"Values are HSL ",[17,3970,3971],{},"triplets"," (no ",[22,3974,3975],{},"hsl(…)"," wrapper). Full token list and recipes live in ",[507,3978,3980],{"href":3979},"\u002Fui#theming","the library theming guide",[63,3982,3984],{"id":3983},"brand-color-via-a-single-hue","Brand-color via a single hue",[3986,3987],"demo-tel-input-brand-picker",{},[14,3989,3990,3991,3994,3995,3998,3999,4002,4003,4006,4007,4010,4011,4014],{},"Vary lightness on one hue: ",[22,3992,3993],{},"7%"," (background) → ",[22,3996,3997],{},"9%"," (popover) → ",[22,4000,4001],{},"14%"," (muted) → ",[22,4004,4005],{},"18%"," (border) → ",[22,4008,4009],{},"22%"," (accent) → ",[22,4012,4013],{},"60%+"," (ring). The component handles the rest.",[63,4016,4018],{"id":4017},"day-night","Day \u002F night",[4020,4021],"demo-tel-input-day-night",{},[14,4023,4024,4025,4028,4029,4032,4033,4035],{},"The lib ships both ",[22,4026,4027],{},".light"," and ",[22,4030,4031],{},".dark"," blocks — toggle the class on ",[22,4034,458],{}," (or any wrapper). Portaled popovers\u002Fdrawers inherit via the cascade.",[63,4037,4039],{"id":4038},"multi-tenant","Multi-tenant",[4041,4042],"demo-tel-input-multi-tenant",{},[207,4044,4046],{"className":3853,"code":4045,"language":3855,"meta":212,"style":212},".tenant-acme {\n  --ak-ui-popover: 155 50% 8%;\n  --ak-ui-accent: 152 60% 30%;\n  --ak-ui-ring: 152 70% 50%;\n}\n.tenant-nova {\n  --ak-ui-popover: 270 40% 8%;\n  --ak-ui-accent: 270 50% 30%;\n  --ak-ui-ring: 270 90% 65%;\n}\n",[22,4047,4048,4054,4074,4095,4113,4117,4124,4144,4162,4182],{"__ignoreMap":212},[216,4049,4050,4052],{"class":218,"line":219},[216,4051,3931],{"class":534},[216,4053,1455],{"class":226},[216,4055,4056,4059,4061,4063,4065,4067,4070,4072],{"class":218,"line":266},[216,4057,4058],{"class":279},"  --ak-ui-popover",[216,4060,493],{"class":226},[216,4062,3942],{"class":534},[216,4064,3904],{"class":534},[216,4066,3885],{"class":222},[216,4068,4069],{"class":534}," 8",[216,4071,3885],{"class":222},[216,4073,237],{"class":226},[216,4075,4076,4078,4080,4083,4086,4088,4091,4093],{"class":218,"line":283},[216,4077,3897],{"class":279},[216,4079,493],{"class":226},[216,4081,4082],{"class":534},"152",[216,4084,4085],{"class":534}," 60",[216,4087,3885],{"class":222},[216,4089,4090],{"class":534}," 30",[216,4092,3885],{"class":222},[216,4094,237],{"class":226},[216,4096,4097,4099,4101,4103,4105,4107,4109,4111],{"class":218,"line":298},[216,4098,3874],{"class":279},[216,4100,493],{"class":226},[216,4102,4082],{"class":534},[216,4104,3888],{"class":534},[216,4106,3885],{"class":222},[216,4108,3904],{"class":534},[216,4110,3885],{"class":222},[216,4112,237],{"class":226},[216,4114,4115],{"class":218,"line":413},[216,4116,1592],{"class":226},[216,4118,4119,4122],{"class":218,"line":603},[216,4120,4121],{"class":534},".tenant-nova",[216,4123,1455],{"class":226},[216,4125,4126,4128,4130,4133,4136,4138,4140,4142],{"class":218,"line":633},[216,4127,4058],{"class":279},[216,4129,493],{"class":226},[216,4131,4132],{"class":534},"270",[216,4134,4135],{"class":534}," 40",[216,4137,3885],{"class":222},[216,4139,4069],{"class":534},[216,4141,3885],{"class":222},[216,4143,237],{"class":226},[216,4145,4146,4148,4150,4152,4154,4156,4158,4160],{"class":218,"line":643},[216,4147,3897],{"class":279},[216,4149,493],{"class":226},[216,4151,4132],{"class":534},[216,4153,3904],{"class":534},[216,4155,3885],{"class":222},[216,4157,4090],{"class":534},[216,4159,3885],{"class":222},[216,4161,237],{"class":226},[216,4163,4164,4166,4168,4170,4173,4175,4178,4180],{"class":218,"line":648},[216,4165,3874],{"class":279},[216,4167,493],{"class":226},[216,4169,4132],{"class":534},[216,4171,4172],{"class":534}," 90",[216,4174,3885],{"class":222},[216,4176,4177],{"class":534}," 65",[216,4179,3885],{"class":222},[216,4181,237],{"class":226},[216,4183,4184],{"class":218,"line":658},[216,4185,1592],{"class":226},[63,4187,4189],{"id":4188},"radius-variants","Radius variants",[14,4191,4192,4195],{},[22,4193,4194],{},"--ak-ui-radius"," is consumed directly (no Tailwind token):",[207,4197,4199],{"className":3853,"code":4198,"language":3855,"meta":212,"style":212},".compact {\n  --ak-ui-radius: 0.25rem;\n}\n.pill {\n  --ak-ui-radius: 999px;\n}\n",[22,4200,4201,4208,4223,4227,4234,4248],{"__ignoreMap":212},[216,4202,4203,4206],{"class":218,"line":219},[216,4204,4205],{"class":534},".compact",[216,4207,1455],{"class":226},[216,4209,4210,4213,4215,4218,4221],{"class":218,"line":266},[216,4211,4212],{"class":279},"  --ak-ui-radius",[216,4214,493],{"class":226},[216,4216,4217],{"class":534},"0.25",[216,4219,4220],{"class":222},"rem",[216,4222,237],{"class":226},[216,4224,4225],{"class":218,"line":283},[216,4226,1592],{"class":226},[216,4228,4229,4232],{"class":218,"line":298},[216,4230,4231],{"class":534},".pill",[216,4233,1455],{"class":226},[216,4235,4236,4238,4240,4243,4246],{"class":218,"line":413},[216,4237,4212],{"class":279},[216,4239,493],{"class":226},[216,4241,4242],{"class":534},"999",[216,4244,4245],{"class":222},"px",[216,4247,237],{"class":226},[216,4249,4250],{"class":218,"line":603},[216,4251,1592],{"class":226},[198,4253,4255],{"id":4254},"full-customisation","Full customisation",[4257,4258],"demo-tel-input-custom-pill-cream",{},[14,4260,4261],{},"Three customisation vectors — stack any combination:",[63,4263,4265],{"id":4264},"slots","Slots",[721,4267,4268,4281],{},[724,4269,4270],{},[727,4271,4272,4275,4278],{},[730,4273,4274],{},"Slot",[730,4276,4277],{},"Scope",[730,4279,4280],{},"Replaces",[743,4282,4283,4295,4310,4325,4340,4358,4377,4392,4407,4419,4430,4445,4457,4472,4487,4501,4513,4528,4542],{},[727,4284,4285,4290,4292],{},[748,4286,4287],{},[22,4288,4289],{},"prefix",[748,4291,808],{},[748,4293,4294],{},"Content at the start of the field.",[727,4296,4297,4302,4307],{},[748,4298,4299],{},[22,4300,4301],{},"suffix",[748,4303,4304],{},[22,4305,4306],{},"{ validationState, validation }",[748,4308,4309],{},"Content at the end, after the flag trigger.",[727,4311,4312,4317,4322],{},[748,4313,4314],{},[22,4315,4316],{},"trigger",[748,4318,4319],{},[22,4320,4321],{},"{ selectedCountry, open, sizeClasses }",[748,4323,4324],{},"Entire country picker trigger.",[727,4326,4327,4332,4337],{},[748,4328,4329],{},[22,4330,4331],{},"chevron",[748,4333,4334],{},[22,4335,4336],{},"{ open }",[748,4338,4339],{},"Just the chevron icon.",[727,4341,4342,4347,4352],{},[748,4343,4344],{},[22,4345,4346],{},"selected-flag",[748,4348,4349],{},[22,4350,4351],{},"{ country, open }",[748,4353,4354,4355,511],{},"Selected-state label rendered inside the ",[17,4356,4357],{},"trigger only",[727,4359,4360,4365,4370],{},[748,4361,4362],{},[22,4363,4364],{},"item-flag",[748,4366,4367],{},[22,4368,4369],{},"{ country }",[748,4371,4372,4373,4376],{},"Flag rendered for each ",[17,4374,4375],{},"popover option row"," only.",[727,4378,4379,4384,4389],{},[748,4380,4381],{},[22,4382,4383],{},"flag",[748,4385,4386],{},[22,4387,4388],{},"{ country, context: 'trigger' | 'item' }",[748,4390,4391],{},"Legacy unified flag slot — fires for both locations¹.",[727,4393,4394,4399,4404],{},[748,4395,4396],{},[22,4397,4398],{},"search",[748,4400,4401],{},[22,4402,4403],{},"{ value, setValue, isSearching }",[748,4405,4406],{},"Entire search bar.",[727,4408,4409,4414,4416],{},[748,4410,4411],{},[22,4412,4413],{},"search-icon",[748,4415,808],{},[748,4417,4418],{},"Just the leading search icon.",[727,4420,4421,4425,4427],{},[748,4422,4423],{},[22,4424,921],{},[748,4426,808],{},[748,4428,4429],{},"Picker loading state.",[727,4431,4432,4437,4442],{},[748,4433,4434],{},[22,4435,4436],{},"empty",[748,4438,4439],{},[22,4440,4441],{},"{ query }",[748,4443,4444],{},"Empty \u002F no-results state.",[727,4446,4447,4452,4454],{},[748,4448,4449],{},[22,4450,4451],{},"detecting",[748,4453,808],{},[748,4455,4456],{},"Spinner shown in the picker slot during the typing-pause debounce window.",[727,4458,4459,4464,4469],{},[748,4460,4461],{},[22,4462,4463],{},"group-header",[748,4465,4466],{},[22,4467,4468],{},"{ label, group: 'suggested' | 'all' }",[748,4470,4471],{},"Section headers in the picker.",[727,4473,4474,4479,4484],{},[748,4475,4476],{},[22,4477,4478],{},"item",[748,4480,4481],{},[22,4482,4483],{},"{ country, selected, disabled, select }",[748,4485,4486],{},"Entire row in the country list.",[727,4488,4489,4494,4498],{},[748,4490,4491],{},[22,4492,4493],{},"item-check",[748,4495,4496],{},[22,4497,4369],{},[748,4499,4500],{},"Right-side check icon for selected row.",[727,4502,4503,4508,4510],{},[748,4504,4505],{},[22,4506,4507],{},"valid-icon",[748,4509,808],{},[748,4511,4512],{},"Green check shown when valid.",[727,4514,4515,4520,4525],{},[748,4516,4517],{},[22,4518,4519],{},"error-icon",[748,4521,4522],{},[22,4523,4524],{},"{ reason }",[748,4526,4527],{},"Warning icon shown when invalid.",[727,4529,4530,4534,4539],{},[748,4531,4532],{},[22,4533,2984],{},[748,4535,4536],{},[22,4537,4538],{},"{ country, formatHint, example }",[748,4540,4541],{},"Helper line shown below when empty.",[727,4543,4544,4548,4553],{},[748,4545,4546],{},[22,4547,113],{},[748,4549,4550],{},[22,4551,4552],{},"{ message, reason, validation }",[748,4554,4555],{},"Error message shown below when invalid.",[14,4557,4558,4559,176,4561,4563,4564,4566,4567,4569],{},"¹ Prefer ",[22,4560,4346],{},[22,4562,4364],{}," over the legacy unified ",[22,4565,4383],{}," slot — they\ntarget one location at a time so a trigger restyling doesn't bleed into the popover\nlist. ",[22,4568,4383],{}," is kept as a back-compat fallback (and is what fires when neither\nof the dedicated slots is provided).",[63,4571,4573],{"id":4572},"data-props","Data props",[721,4575,4576,4586],{},[724,4577,4578],{},[727,4579,4580,4582,4584],{},[730,4581,732],{},[730,4583,735],{},[730,4585,4280],{},[743,4587,4588,4607,4622,4637,4655,4668],{},[727,4589,4590,4595,4600],{},[748,4591,4592],{},[22,4593,4594],{},"flagUrl",[748,4596,4597],{},[22,4598,4599],{},"(iso2, width) => string",[748,4601,4602,4603,4606],{},"Default ",[22,4604,4605],{},"flagcdn.com"," URL builder.",[727,4608,4609,4614,4619],{},[748,4610,4611],{},[22,4612,4613],{},"countries",[748,4615,4616],{},[22,4617,4618],{},"CountryOption[]",[748,4620,4621],{},"Internal REST Countries fetch (curated or offline lists).",[727,4623,4624,4629,4634],{},[748,4625,4626],{},[22,4627,4628],{},"searcher",[748,4630,4631],{},[22,4632,4633],{},"(query, country) => boolean",[748,4635,4636],{},"Default substring match. Implement fuzzy \u002F starts-with \u002F etc.",[727,4638,4639,4644,4649],{},[748,4640,4641],{},[22,4642,4643],{},"detector",[748,4645,4646],{},[22,4647,4648],{},"(opts) => Promise\u003Cstring | null>",[748,4650,4651,4652,4654],{},"The environment chain. Return ",[22,4653,57],{}," to fall through.",[727,4656,4657,4661,4665],{},[748,4658,4659],{},[22,4660,1184],{},[748,4662,4663],{},[22,4664,1189],{},[748,4666,4667],{},"Error labels (for i18n).",[727,4669,4670,4678,4682],{},[748,4671,4672,176,4675],{},[22,4673,4674],{},"kbdOpen",[22,4676,4677],{},"kbdClose",[748,4679,4680],{},[22,4681,826],{},[748,4683,3427,4684,176,4687,4690,4691,4693],{},[22,4685,4686],{},"⌘K",[22,4688,4689],{},"Esc"," keyboard hints. ",[22,4692,57],{}," to hide.",[63,4695,4697],{"id":4696},"class-props","Class props",[14,4699,4700,701,4702,701,4705,701,4708,701,4711,701,4714,701,4717,701,4720,4723,4724,4727],{},[22,4701,490],{},[22,4703,4704],{},"fieldClass",[22,4706,4707],{},"inputClass",[22,4709,4710],{},"contentClass",[22,4712,4713],{},"popoverClass",[22,4715,4716],{},"drawerClass",[22,4718,4719],{},"hintClass",[22,4721,4722],{},"errorClass",". Each is merged via ",[22,4725,4726],{},"tailwind-merge"," so you only override the bits you want.",[63,4729,4731],{"id":4730},"live-gallery","Live gallery",[4733,4734],"demo-tel-input-custom-bank",{},[4736,4737],"demo-tel-input-custom-playful",{},[4739,4740],"demo-tel-input-custom-minimal",{},[14,4742,4743],{},"Stacking every vector — curated countries, hi-res flags, custom searcher, custom detector, slot overrides:",[4745,4746],"demo-tel-input-customization",{},[198,4748,4750],{"id":4749},"composing-your-own-variant","Composing your own variant",[4752,4753],"demo-tel-input-compose",{},[14,4755,4756],{},"Every primitive, composable, and helper is re-exported — fork-free composition:",[207,4758,4760],{"className":518,"code":4759,"language":520,"meta":212,"style":212},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { ACountrySelect, usePhoneValidation } from '@alikhalilll\u002Fa-tel-input';\n\nconst country = ref('EG');\nconst phone = ref('');\n\nconst { validate } = usePhoneValidation();\nconst result = computed(() =>\n  validate({ country: country.value ? { iso2: country.value } : null, phone: phone.value || '' })\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"space-y-2\">\n    \u003CACountrySelect v-model:selected=\"country\" size=\"md\" \u002F>\n    \u003Cinput v-model=\"phone\" type=\"tel\" inputmode=\"numeric\" placeholder=\"National number\" \u002F>\n    \u003Cp class=\"font-mono text-xs\">{{ result.full_phone || '+?' }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[22,4761,4762,4778,4791,4804,4808,4824,4840,4844,4862,4880,4910,4914,4922,4926,4934,4950,4974,5012,5032,5040],{"__ignoreMap":212},[216,4763,4764,4766,4768,4770,4772,4774,4776],{"class":218,"line":219},[216,4765,527],{"class":226},[216,4767,531],{"class":530},[216,4769,535],{"class":534},[216,4771,538],{"class":534},[216,4773,541],{"class":226},[216,4775,544],{"class":233},[216,4777,547],{"class":226},[216,4779,4780,4782,4785,4787,4789],{"class":218,"line":266},[216,4781,223],{"class":222},[216,4783,4784],{"class":226}," { computed, ref } ",[216,4786,230],{"class":222},[216,4788,559],{"class":233},[216,4790,237],{"class":226},[216,4792,4793,4795,4798,4800,4802],{"class":218,"line":283},[216,4794,223],{"class":222},[216,4796,4797],{"class":226}," { ACountrySelect, usePhoneValidation } ",[216,4799,230],{"class":222},[216,4801,234],{"class":233},[216,4803,237],{"class":226},[216,4805,4806],{"class":218,"line":298},[216,4807,410],{"emptyLinePlaceholder":409},[216,4809,4810,4812,4814,4816,4818,4820,4822],{"class":218,"line":413},[216,4811,582],{"class":222},[216,4813,608],{"class":534},[216,4815,588],{"class":222},[216,4817,591],{"class":275},[216,4819,594],{"class":226},[216,4821,1060],{"class":233},[216,4823,600],{"class":226},[216,4825,4826,4828,4830,4832,4834,4836,4838],{"class":218,"line":603},[216,4827,582],{"class":222},[216,4829,585],{"class":534},[216,4831,588],{"class":222},[216,4833,591],{"class":275},[216,4835,594],{"class":226},[216,4837,597],{"class":233},[216,4839,600],{"class":226},[216,4841,4842],{"class":218,"line":633},[216,4843,410],{"emptyLinePlaceholder":409},[216,4845,4846,4848,4850,4853,4855,4857,4860],{"class":218,"line":643},[216,4847,582],{"class":222},[216,4849,420],{"class":226},[216,4851,4852],{"class":534},"validate",[216,4854,1514],{"class":226},[216,4856,541],{"class":222},[216,4858,4859],{"class":275}," usePhoneValidation",[216,4861,1375],{"class":226},[216,4863,4864,4866,4869,4871,4874,4877],{"class":218,"line":648},[216,4865,582],{"class":222},[216,4867,4868],{"class":534}," result",[216,4870,588],{"class":222},[216,4872,4873],{"class":275}," computed",[216,4875,4876],{"class":226},"(() ",[216,4878,4879],{"class":222},"=>\n",[216,4881,4882,4885,4888,4891,4894,4896,4898,4901,4904,4907],{"class":218,"line":658},[216,4883,4884],{"class":275},"  validate",[216,4886,4887],{"class":226},"({ country: country.value ",[216,4889,4890],{"class":222},"?",[216,4892,4893],{"class":226}," { iso2: country.value } ",[216,4895,1463],{"class":222},[216,4897,623],{"class":534},[216,4899,4900],{"class":226},", phone: phone.value ",[216,4902,4903],{"class":222},"||",[216,4905,4906],{"class":233}," ''",[216,4908,4909],{"class":226}," })\n",[216,4911,4912],{"class":218,"line":688},[216,4913,600],{"class":226},[216,4915,4916,4918,4920],{"class":218,"line":1617},[216,4917,636],{"class":226},[216,4919,531],{"class":530},[216,4921,547],{"class":226},[216,4923,4924],{"class":218,"line":1625},[216,4925,410],{"emptyLinePlaceholder":409},[216,4927,4928,4930,4932],{"class":218,"line":1633},[216,4929,527],{"class":226},[216,4931,653],{"class":530},[216,4933,547],{"class":226},[216,4935,4936,4938,4940,4943,4945,4948],{"class":218,"line":1641},[216,4937,661],{"class":226},[216,4939,3531],{"class":530},[216,4941,4942],{"class":534}," class",[216,4944,541],{"class":226},[216,4946,4947],{"class":233},"\"space-y-2\"",[216,4949,547],{"class":226},[216,4951,4952,4954,4957,4960,4962,4964,4967,4969,4972],{"class":218,"line":1649},[216,4953,2050],{"class":226},[216,4955,4956],{"class":530},"ACountrySelect",[216,4958,4959],{"class":534}," v-model:selected",[216,4961,541],{"class":226},[216,4963,679],{"class":233},[216,4965,4966],{"class":534}," size",[216,4968,541],{"class":226},[216,4970,4971],{"class":233},"\"md\"",[216,4973,685],{"class":226},[216,4975,4976,4978,4981,4983,4985,4987,4989,4991,4994,4997,4999,5002,5005,5007,5010],{"class":218,"line":1657},[216,4977,2050],{"class":226},[216,4979,4980],{"class":530},"input",[216,4982,3127],{"class":534},[216,4984,541],{"class":226},[216,4986,671],{"class":233},[216,4988,2186],{"class":534},[216,4990,541],{"class":226},[216,4992,4993],{"class":233},"\"tel\"",[216,4995,4996],{"class":534}," inputmode",[216,4998,541],{"class":226},[216,5000,5001],{"class":233},"\"numeric\"",[216,5003,5004],{"class":534}," placeholder",[216,5006,541],{"class":226},[216,5008,5009],{"class":233},"\"National number\"",[216,5011,685],{"class":226},[216,5013,5014,5016,5018,5020,5022,5025,5028,5030],{"class":218,"line":2101},[216,5015,2050],{"class":226},[216,5017,14],{"class":530},[216,5019,4942],{"class":534},[216,5021,541],{"class":226},[216,5023,5024],{"class":233},"\"font-mono text-xs\"",[216,5026,5027],{"class":226},">{{ result.full_phone || '+?' }}\u003C\u002F",[216,5029,14],{"class":530},[216,5031,547],{"class":226},[216,5033,5034,5036,5038],{"class":218,"line":2112},[216,5035,2204],{"class":226},[216,5037,3531],{"class":530},[216,5039,547],{"class":226},[216,5041,5042,5044,5046],{"class":218,"line":2123},[216,5043,636],{"class":226},[216,5045,653],{"class":530},[216,5047,547],{"class":226},[5049,5050,5051],"style",{},"html pre.shiki code .sjeE4, html code.shiki .sjeE4{--shiki-default:#CF222E;--shiki-dark:#FF7B72}html pre.shiki code .s4rv2, html code.shiki .s4rv2{--shiki-default:#1F2328;--shiki-dark:#E6EDF3}html pre.shiki code .sSVrQ, html code.shiki .sSVrQ{--shiki-default:#0A3069;--shiki-dark:#A5D6FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sU953, html code.shiki .sU953{--shiki-default:#6E7781;--shiki-dark:#8B949E}html pre.shiki code .sbjLL, html code.shiki .sbjLL{--shiki-default:#8250DF;--shiki-dark:#D2A8FF}html pre.shiki code .sTDnQ, html code.shiki .sTDnQ{--shiki-default:#953800;--shiki-dark:#FFA657}html pre.shiki code .sjgCt, html code.shiki .sjgCt{--shiki-default:#116329;--shiki-dark:#7EE787}html pre.shiki code .sHrmB, html code.shiki .sHrmB{--shiki-default:#0550AE;--shiki-dark:#79C0FF}",{"title":212,"searchDepth":266,"depth":266,"links":5053},[5054,5055,5056,5061,5062,5063,5064,5065,5066,5075,5080,5086,5087,5093,5099],{"id":65,"depth":283,"text":66},{"id":200,"depth":266,"text":201},{"id":240,"depth":266,"text":241,"children":5057},[5058,5059,5060],{"id":251,"depth":283,"text":252},{"id":339,"depth":283,"text":340},{"id":443,"depth":283,"text":444},{"id":514,"depth":266,"text":515},{"id":718,"depth":266,"text":719},{"id":1285,"depth":266,"text":1286},{"id":1387,"depth":266,"text":1388},{"id":1425,"depth":266,"text":1426},{"id":1772,"depth":266,"text":1773,"children":5067},[5068,5070,5072,5073,5074],{"id":1827,"depth":283,"text":5069},"Drop-in \u003CField v-slot=\"{ field, errors }\"> — v-bind=\"field\" just works",{"id":2230,"depth":283,"text":5071},"useTelField() — when you need async \u002F server-side validation",{"id":2691,"depth":283,"text":2692},{"id":2776,"depth":283,"text":2777},{"id":2928,"depth":283,"text":2929},{"id":2970,"depth":266,"text":2971,"children":5076},[5077,5078,5079],{"id":2974,"depth":283,"text":2975},{"id":3089,"depth":283,"text":3090},{"id":3294,"depth":283,"text":3295},{"id":3388,"depth":266,"text":1266,"children":5081},[5082,5083,5084,5085],{"id":3396,"depth":283,"text":3397},{"id":3434,"depth":283,"text":3435},{"id":3498,"depth":283,"text":3499},{"id":3715,"depth":283,"text":3716},{"id":3740,"depth":266,"text":3741},{"id":3839,"depth":266,"text":3840,"children":5088},[5089,5090,5091,5092],{"id":3983,"depth":283,"text":3984},{"id":4017,"depth":283,"text":4018},{"id":4038,"depth":283,"text":4039},{"id":4188,"depth":283,"text":4189},{"id":4254,"depth":266,"text":4255,"children":5094},[5095,5096,5097,5098],{"id":4264,"depth":283,"text":4265},{"id":4572,"depth":283,"text":4573},{"id":4696,"depth":283,"text":4697},{"id":4730,"depth":283,"text":4731},{"id":4749,"depth":266,"text":4750},"A headless international telephone input for Vue 3 \u002F Nuxt 3+ — country auto-detect, libphonenumber-js validation, responsive popover\u002Fdrawer picker, and first-class VeeValidate + Zod integration with server-side validation hooks.",{},"\u002Fui\u002Ftel-input",{"title":5,"description":5100},"ui\u002Ftel-input","aikeiU7a-mj1ifkrzWH0u7ZTptkm6jHz1FWrh8c-Ogw",1780415476241]