[{"data":1,"prerenderedAt":1784},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fpin-input":313,"\u002Fcomponents\u002Fpin-input-surround":1779},[4,24,41,48,293,298,303,308],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":23},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles","i-lucide-rocket",{"title":25,"package":11,"icon":26,"path":27,"stem":28,"children":29,"page":40},"Packages","i-lucide-package","\u002Fpackages","2.packages",[30,35],{"title":31,"path":32,"stem":33,"package":11,"icon":34},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":36,"path":37,"stem":38,"package":11,"icon":39},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":42,"path":43,"stem":44,"children":45,"package":11,"icon":47},"CLI","\u002Fcli","3.cli\u002F1.index",[46],{"title":42,"path":43,"stem":44,"package":11,"icon":47},"i-lucide-terminal",{"title":49,"package":11,"icon":50,"path":51,"stem":52,"children":53},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[54,56,62,67,72,77,82,87,92,97,102,107,112,117,122,127,132,136,141,145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,220,225,230,234,238,243,248,253,258,263,268,272,276,280,284,288],{"title":49,"path":51,"stem":55,"package":11,"icon":50},"3.components\u002Findex",{"title":57,"path":58,"stem":59,"package":60,"icon":61},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":63,"path":64,"stem":65,"package":60,"icon":66},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":68,"path":69,"stem":70,"package":60,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":78,"path":79,"stem":80,"package":60,"icon":81},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":83,"path":84,"stem":85,"package":60,"icon":86},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":88,"path":89,"stem":90,"package":60,"icon":91},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":93,"path":94,"stem":95,"package":60,"icon":96},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":98,"path":99,"stem":100,"package":60,"icon":101},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":103,"path":104,"stem":105,"package":60,"icon":106},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":108,"path":109,"stem":110,"package":60,"icon":111},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":113,"path":114,"stem":115,"package":76,"icon":116},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":118,"path":119,"stem":120,"package":76,"icon":121},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":123,"path":124,"stem":125,"package":76,"icon":126},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":128,"path":129,"stem":130,"package":60,"icon":131},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":133,"path":134,"stem":135,"package":76,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":137,"path":138,"stem":139,"package":60,"icon":140},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":142,"path":143,"stem":144,"package":60,"icon":66},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":146,"path":147,"stem":148,"package":60,"icon":149},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":151,"path":152,"stem":153,"package":60,"icon":154},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":156,"path":157,"stem":158,"package":60,"icon":159},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":161,"path":162,"stem":163,"package":60,"icon":164},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":166,"path":167,"stem":168,"package":60,"icon":169},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":171,"path":172,"stem":173,"package":76,"icon":174},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":176,"path":177,"stem":178,"package":60,"icon":179},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":181,"path":182,"stem":183,"package":76,"icon":184},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":186,"path":187,"stem":188,"package":60,"icon":189},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":191,"path":192,"stem":193,"package":60,"icon":194},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":196,"path":197,"stem":198,"package":60,"icon":199},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":201,"path":202,"stem":203,"package":60,"icon":204},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":206,"path":207,"stem":208,"package":60,"icon":209},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":211,"path":212,"stem":213,"package":60,"icon":214},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":216,"path":217,"stem":218,"package":76,"icon":219},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":221,"path":222,"stem":223,"package":60,"icon":224},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":226,"path":227,"stem":228,"package":60,"icon":229},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":231,"path":232,"stem":233,"package":76,"icon":66},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":235,"path":236,"stem":237,"package":60,"icon":154},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":239,"path":240,"stem":241,"package":60,"icon":242},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":244,"path":245,"stem":246,"package":60,"icon":247},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":249,"path":250,"stem":251,"package":60,"icon":252},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":254,"path":255,"stem":256,"package":60,"icon":257},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":259,"path":260,"stem":261,"package":60,"icon":262},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":264,"path":265,"stem":266,"package":60,"icon":267},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":269,"path":270,"stem":271,"package":60,"icon":154},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":273,"path":274,"stem":275,"package":60,"icon":140},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":277,"path":278,"stem":279,"package":60,"icon":199},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":281,"path":282,"stem":283,"package":60,"icon":267},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":285,"path":286,"stem":287,"package":60,"icon":154},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":289,"path":290,"stem":291,"package":60,"icon":292},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":294,"path":295,"stem":296,"package":11,"icon":297},"Theming","\u002Ftheming","4.theming","i-lucide-palette",{"title":299,"path":300,"stem":301,"package":11,"icon":302},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":304,"path":305,"stem":306,"package":11,"icon":307},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":309,"path":310,"stem":311,"package":11,"icon":312},"Roadmap","\u002Froadmap","7.roadmap","i-lucide-map",{"id":314,"title":186,"body":315,"description":1764,"extension":1765,"links":1766,"meta":1775,"navigation":1776,"package":60,"path":187,"seo":1777,"stem":188,"__hash__":1778},"docs\u002F3.components\u002Fpin-input.md",{"type":316,"value":317,"toc":1748},"minimark",[318,323,334,339,343,559,570,575,582,753,757,764,844,850,854,1034,1038,1082,1088,1092,1406,1432,1457,1461,1506,1509,1513,1522,1526,1535,1569,1572,1585,1619,1628,1631,1634,1640,1646,1649,1653,1714,1718,1744],[319,320,322],"h2",{"id":321},"overview","Overview",[324,325,326,330,331,333],"p",{},[327,328,329],"code",{},"VyPinInput"," renders a fixed number of single-character fields for PINs and verification codes. It wraps the ",[327,332,31],{}," pin-input primitives with a flat string model, semantic colors, surface variants, sizes, masking, and completion events.",[335,336],"component-code",{"height":337,"name":338},"160px","pin-input-example",[319,340,342],{"id":341},"usage","Usage",[344,345,350],"pre",{"className":346,"code":347,"language":348,"meta":349,"style":349},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { VyPinInput } from '@vyui\u002Fkit'\nimport { ref } from 'vue'\n\nconst code = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyPinInput\n    v-model=\"code\"\n    :length=\"6\"\n    @complete=\"value => console.log('Complete:', value)\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue","",[327,351,352,387,415,435,442,465,475,480,490,499,514,529,544,550],{"__ignoreMap":349},[353,354,357,361,365,369,372,375,378,382,384],"span",{"class":355,"line":356},"line",1,[353,358,360],{"class":359},"sMK4o","\u003C",[353,362,364],{"class":363},"swJcz","script",[353,366,368],{"class":367},"spNyl"," setup",[353,370,371],{"class":367}," lang",[353,373,374],{"class":359},"=",[353,376,377],{"class":359},"\"",[353,379,381],{"class":380},"sfazB","ts",[353,383,377],{"class":359},[353,385,386],{"class":359},">\n",[353,388,390,394,397,401,404,407,410,412],{"class":355,"line":389},2,[353,391,393],{"class":392},"s7zQu","import",[353,395,396],{"class":359}," {",[353,398,400],{"class":399},"sTEyZ"," VyPinInput",[353,402,403],{"class":359}," }",[353,405,406],{"class":392}," from",[353,408,409],{"class":359}," '",[353,411,36],{"class":380},[353,413,414],{"class":359},"'\n",[353,416,418,420,422,425,427,429,431,433],{"class":355,"line":417},3,[353,419,393],{"class":392},[353,421,396],{"class":359},[353,423,424],{"class":399}," ref",[353,426,403],{"class":359},[353,428,406],{"class":392},[353,430,409],{"class":359},[353,432,348],{"class":380},[353,434,414],{"class":359},[353,436,438],{"class":355,"line":437},4,[353,439,441],{"emptyLinePlaceholder":440},true,"\n",[353,443,445,448,451,453,456,459,462],{"class":355,"line":444},5,[353,446,447],{"class":367},"const",[353,449,450],{"class":399}," code ",[353,452,374],{"class":359},[353,454,424],{"class":455},"s2Zo4",[353,457,458],{"class":399},"(",[353,460,461],{"class":359},"''",[353,463,464],{"class":399},")\n",[353,466,468,471,473],{"class":355,"line":467},6,[353,469,470],{"class":359},"\u003C\u002F",[353,472,364],{"class":363},[353,474,386],{"class":359},[353,476,478],{"class":355,"line":477},7,[353,479,441],{"emptyLinePlaceholder":440},[353,481,483,485,488],{"class":355,"line":482},8,[353,484,360],{"class":359},[353,486,487],{"class":363},"template",[353,489,386],{"class":359},[353,491,493,496],{"class":355,"line":492},9,[353,494,495],{"class":359},"  \u003C",[353,497,498],{"class":363},"VyPinInput\n",[353,500,502,505,507,509,511],{"class":355,"line":501},10,[353,503,504],{"class":367},"    v-model",[353,506,374],{"class":359},[353,508,377],{"class":359},[353,510,327],{"class":380},[353,512,513],{"class":359},"\"\n",[353,515,517,520,522,524,527],{"class":355,"line":516},11,[353,518,519],{"class":367},"    :length",[353,521,374],{"class":359},[353,523,377],{"class":359},[353,525,526],{"class":380},"6",[353,528,513],{"class":359},[353,530,532,535,537,539,542],{"class":355,"line":531},12,[353,533,534],{"class":367},"    @complete",[353,536,374],{"class":359},[353,538,377],{"class":359},[353,540,541],{"class":380},"value => console.log('Complete:', value)",[353,543,513],{"class":359},[353,545,547],{"class":355,"line":546},13,[353,548,549],{"class":359},"  \u002F>\n",[353,551,553,555,557],{"class":355,"line":552},14,[353,554,470],{"class":359},[353,556,487],{"class":363},[353,558,386],{"class":359},[324,560,561,562,565,566,569],{},"The kit model is a flat string such as ",[327,563,564],{},"\"123456\"",". Internally, the core control stores one character per field as a ",[327,567,568],{},"string[]",".",[571,572,574],"h3",{"id":573},"alphanumeric-codes","Alphanumeric codes",[324,576,577,578,581],{},"Numeric mode is the default and removes non-digit input. Use ",[327,579,580],{},"type=\"alphanumeric\""," for letters, digits, or other text characters.",[344,583,585],{"className":346,"code":584,"language":348,"meta":349,"style":349},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst recoveryCode = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyPinInput\n    v-model=\"recoveryCode\"\n    type=\"alphanumeric\"\n    :length=\"8\"\n    placeholder=\"·\"\n    color=\"info\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[327,586,587,607,625,629,646,654,658,666,672,685,699,712,726,740,744],{"__ignoreMap":349},[353,588,589,591,593,595,597,599,601,603,605],{"class":355,"line":356},[353,590,360],{"class":359},[353,592,364],{"class":363},[353,594,368],{"class":367},[353,596,371],{"class":367},[353,598,374],{"class":359},[353,600,377],{"class":359},[353,602,381],{"class":380},[353,604,377],{"class":359},[353,606,386],{"class":359},[353,608,609,611,613,615,617,619,621,623],{"class":355,"line":389},[353,610,393],{"class":392},[353,612,396],{"class":359},[353,614,424],{"class":399},[353,616,403],{"class":359},[353,618,406],{"class":392},[353,620,409],{"class":359},[353,622,348],{"class":380},[353,624,414],{"class":359},[353,626,627],{"class":355,"line":417},[353,628,441],{"emptyLinePlaceholder":440},[353,630,631,633,636,638,640,642,644],{"class":355,"line":437},[353,632,447],{"class":367},[353,634,635],{"class":399}," recoveryCode ",[353,637,374],{"class":359},[353,639,424],{"class":455},[353,641,458],{"class":399},[353,643,461],{"class":359},[353,645,464],{"class":399},[353,647,648,650,652],{"class":355,"line":444},[353,649,470],{"class":359},[353,651,364],{"class":363},[353,653,386],{"class":359},[353,655,656],{"class":355,"line":467},[353,657,441],{"emptyLinePlaceholder":440},[353,659,660,662,664],{"class":355,"line":477},[353,661,360],{"class":359},[353,663,487],{"class":363},[353,665,386],{"class":359},[353,667,668,670],{"class":355,"line":482},[353,669,495],{"class":359},[353,671,498],{"class":363},[353,673,674,676,678,680,683],{"class":355,"line":492},[353,675,504],{"class":367},[353,677,374],{"class":359},[353,679,377],{"class":359},[353,681,682],{"class":380},"recoveryCode",[353,684,513],{"class":359},[353,686,687,690,692,694,697],{"class":355,"line":501},[353,688,689],{"class":367},"    type",[353,691,374],{"class":359},[353,693,377],{"class":359},[353,695,696],{"class":380},"alphanumeric",[353,698,513],{"class":359},[353,700,701,703,705,707,710],{"class":355,"line":516},[353,702,519],{"class":367},[353,704,374],{"class":359},[353,706,377],{"class":359},[353,708,709],{"class":380},"8",[353,711,513],{"class":359},[353,713,714,717,719,721,724],{"class":355,"line":531},[353,715,716],{"class":367},"    placeholder",[353,718,374],{"class":359},[353,720,377],{"class":359},[353,722,723],{"class":380},"·",[353,725,513],{"class":359},[353,727,728,731,733,735,738],{"class":355,"line":546},[353,729,730],{"class":367},"    color",[353,732,374],{"class":359},[353,734,377],{"class":359},[353,736,737],{"class":380},"info",[353,739,513],{"class":359},[353,741,742],{"class":355,"line":552},[353,743,549],{"class":359},[353,745,747,749,751],{"class":355,"line":746},15,[353,748,470],{"class":359},[353,750,487],{"class":363},[353,752,386],{"class":359},[571,754,756],{"id":755},"masked-value","Masked value",[324,758,759,760,763],{},"Set ",[327,761,762],{},"mask"," when the entered characters should not remain visible.",[344,765,767],{"className":346,"code":766,"language":348,"meta":349,"style":349},"\u003Ctemplate>\n  \u003CVyPinInput\n    v-model=\"pin\"\n    :length=\"4\"\n    mask\n    color=\"error\"\n    highlight\n  \u002F>\n\u003C\u002Ftemplate>\n",[327,768,769,777,783,796,809,814,827,832,836],{"__ignoreMap":349},[353,770,771,773,775],{"class":355,"line":356},[353,772,360],{"class":359},[353,774,487],{"class":363},[353,776,386],{"class":359},[353,778,779,781],{"class":355,"line":389},[353,780,495],{"class":359},[353,782,498],{"class":363},[353,784,785,787,789,791,794],{"class":355,"line":417},[353,786,504],{"class":367},[353,788,374],{"class":359},[353,790,377],{"class":359},[353,792,793],{"class":380},"pin",[353,795,513],{"class":359},[353,797,798,800,802,804,807],{"class":355,"line":437},[353,799,519],{"class":367},[353,801,374],{"class":359},[353,803,377],{"class":359},[353,805,806],{"class":380},"4",[353,808,513],{"class":359},[353,810,811],{"class":355,"line":444},[353,812,813],{"class":367},"    mask\n",[353,815,816,818,820,822,825],{"class":355,"line":467},[353,817,730],{"class":367},[353,819,374],{"class":359},[353,821,377],{"class":359},[353,823,824],{"class":380},"error",[353,826,513],{"class":359},[353,828,829],{"class":355,"line":477},[353,830,831],{"class":367},"    highlight\n",[353,833,834],{"class":355,"line":482},[353,835,549],{"class":359},[353,837,838,840,842],{"class":355,"line":492},[353,839,470],{"class":359},[353,841,487],{"class":363},[353,843,386],{"class":359},[324,845,846,849],{},[327,847,848],{},"highlight"," only paints a static semantic border. It does not mark the field invalid or provide validation text.",[571,851,853],{"id":852},"variants-and-sizes","Variants and sizes",[344,855,857],{"className":346,"code":856,"language":348,"meta":349,"style":349},"\u003Ctemplate>\n  \u003Cview class=\"flex flex-col gap-4\">\n    \u003CVyPinInput v-model=\"smallCode\" size=\"sm\" variant=\"soft\" \u002F>\n    \u003CVyPinInput v-model=\"largeCode\" size=\"xl\" variant=\"subtle\" color=\"success\" \u002F>\n    \u003CVyPinInput v-model=\"plainCode\" variant=\"none\" \u002F>\n  \u003C\u002Fview>\n\u003C\u002Ftemplate>\n",[327,858,859,867,888,934,987,1017,1026],{"__ignoreMap":349},[353,860,861,863,865],{"class":355,"line":356},[353,862,360],{"class":359},[353,864,487],{"class":363},[353,866,386],{"class":359},[353,868,869,871,874,877,879,881,884,886],{"class":355,"line":389},[353,870,495],{"class":359},[353,872,873],{"class":363},"view",[353,875,876],{"class":367}," class",[353,878,374],{"class":359},[353,880,377],{"class":359},[353,882,883],{"class":380},"flex flex-col gap-4",[353,885,377],{"class":359},[353,887,386],{"class":359},[353,889,890,893,895,898,900,902,905,907,910,912,914,917,919,922,924,926,929,931],{"class":355,"line":417},[353,891,892],{"class":359},"    \u003C",[353,894,329],{"class":363},[353,896,897],{"class":367}," v-model",[353,899,374],{"class":359},[353,901,377],{"class":359},[353,903,904],{"class":380},"smallCode",[353,906,377],{"class":359},[353,908,909],{"class":367}," size",[353,911,374],{"class":359},[353,913,377],{"class":359},[353,915,916],{"class":380},"sm",[353,918,377],{"class":359},[353,920,921],{"class":367}," variant",[353,923,374],{"class":359},[353,925,377],{"class":359},[353,927,928],{"class":380},"soft",[353,930,377],{"class":359},[353,932,933],{"class":359}," \u002F>\n",[353,935,936,938,940,942,944,946,949,951,953,955,957,960,962,964,966,968,971,973,976,978,980,983,985],{"class":355,"line":437},[353,937,892],{"class":359},[353,939,329],{"class":363},[353,941,897],{"class":367},[353,943,374],{"class":359},[353,945,377],{"class":359},[353,947,948],{"class":380},"largeCode",[353,950,377],{"class":359},[353,952,909],{"class":367},[353,954,374],{"class":359},[353,956,377],{"class":359},[353,958,959],{"class":380},"xl",[353,961,377],{"class":359},[353,963,921],{"class":367},[353,965,374],{"class":359},[353,967,377],{"class":359},[353,969,970],{"class":380},"subtle",[353,972,377],{"class":359},[353,974,975],{"class":367}," color",[353,977,374],{"class":359},[353,979,377],{"class":359},[353,981,982],{"class":380},"success",[353,984,377],{"class":359},[353,986,933],{"class":359},[353,988,989,991,993,995,997,999,1002,1004,1006,1008,1010,1013,1015],{"class":355,"line":444},[353,990,892],{"class":359},[353,992,329],{"class":363},[353,994,897],{"class":367},[353,996,374],{"class":359},[353,998,377],{"class":359},[353,1000,1001],{"class":380},"plainCode",[353,1003,377],{"class":359},[353,1005,921],{"class":367},[353,1007,374],{"class":359},[353,1009,377],{"class":359},[353,1011,1012],{"class":380},"none",[353,1014,377],{"class":359},[353,1016,933],{"class":359},[353,1018,1019,1022,1024],{"class":355,"line":467},[353,1020,1021],{"class":359},"  \u003C\u002F",[353,1023,873],{"class":363},[353,1025,386],{"class":359},[353,1027,1028,1030,1032],{"class":355,"line":477},[353,1029,470],{"class":359},[353,1031,487],{"class":363},[353,1033,386],{"class":359},[319,1035,1037],{"id":1036},"features-and-behavior","Features and behavior",[1039,1040,1041,1048,1051,1054,1057,1060,1063,1069,1075],"ul",{},[1042,1043,1044,1047],"li",{},[327,1045,1046],{},"length"," creates one native input for each character.",[1042,1049,1050],{},"Typing a character updates the current field and moves focus to the next field.",[1042,1052,1053],{},"Clearing a field moves focus to the previous field.",[1042,1055,1056],{},"Focusing a field selects its current content so the next character replaces it.",[1042,1058,1059],{},"Pasted or multi-character input is distributed across the remaining fields; overflow is discarded.",[1042,1061,1062],{},"Numeric mode removes non-digits before distributing input.",[1042,1064,1065,1068],{},[327,1066,1067],{},"complete"," is emitted when every rendered field contains a value.",[1042,1070,1071,1074],{},[327,1072,1073],{},"disabled"," disables every field and applies the themed disabled opacity.",[1042,1076,1077,1078,1081],{},"Programmatic ",[327,1079,1080],{},"modelValue"," changes are split into per-field characters.",[324,1083,1084,1085,1087],{},"Keep the model length at or below ",[327,1086,1046],{},". Extra model characters are not rendered and can prevent the core completion check from matching the number of mounted fields.",[319,1089,1091],{"id":1090},"props","Props",[1093,1094,1095,1114],"table",{},[1096,1097,1098],"thead",{},[1099,1100,1101,1105,1108,1111],"tr",{},[1102,1103,1104],"th",{},"Prop",[1102,1106,1107],{},"Type",[1102,1109,1110],{},"Default",[1102,1112,1113],{},"Description",[1115,1116,1117,1140,1159,1178,1195,1213,1233,1251,1273,1293,1313,1332,1350,1368,1387],"tbody",{},[1099,1118,1119,1124,1129,1134],{},[1120,1121,1122],"td",{},[327,1123,1080],{},[1120,1125,1126],{},[327,1127,1128],{},"string",[1120,1130,1131],{},[327,1132,1133],{},"undefined",[1120,1135,1136,1137,569],{},"Controlled flat string used by ",[327,1138,1139],{},"v-model",[1099,1141,1142,1146,1151,1156],{},[1120,1143,1144],{},[327,1145,1046],{},[1120,1147,1148],{},[327,1149,1150],{},"number",[1120,1152,1153],{},[327,1154,1155],{},"5",[1120,1157,1158],{},"Number of single-character input fields.",[1099,1160,1161,1165,1170,1175],{},[1120,1162,1163],{},[327,1164,1073],{},[1120,1166,1167],{},[327,1168,1169],{},"boolean",[1120,1171,1172],{},[327,1173,1174],{},"false",[1120,1176,1177],{},"Prevents interaction with every field.",[1099,1179,1180,1184,1188,1192],{},[1120,1181,1182],{},[327,1183,762],{},[1120,1185,1186],{},[327,1187,1169],{},[1120,1189,1190],{},[327,1191,1174],{},[1120,1193,1194],{},"Renders the native fields as password inputs.",[1099,1196,1197,1202,1206,1210],{},[1120,1198,1199],{},[327,1200,1201],{},"otp",[1120,1203,1204],{},[327,1205,1169],{},[1120,1207,1208],{},[327,1209,1174],{},[1120,1211,1212],{},"Declared one-time-code autofill hint; currently retained by core context but not applied to the native fields.",[1099,1214,1215,1220,1225,1230],{},[1120,1216,1217],{},[327,1218,1219],{},"type",[1120,1221,1222],{},[327,1223,1224],{},"'numeric' | 'alphanumeric'",[1120,1226,1227],{},[327,1228,1229],{},"'numeric'",[1120,1231,1232],{},"Restricts input to digits or permits free-form text characters.",[1099,1234,1235,1240,1244,1248],{},[1120,1236,1237],{},[327,1238,1239],{},"placeholder",[1120,1241,1242],{},[327,1243,1128],{},[1120,1245,1246],{},[327,1247,1133],{},[1120,1249,1250],{},"Placeholder glyph repeated in every empty field.",[1099,1252,1253,1258,1263,1268],{},[1120,1254,1255],{},[327,1256,1257],{},"color",[1120,1259,1260],{},[327,1261,1262],{},"Color",[1120,1264,1265],{},[327,1266,1267],{},"'primary'",[1120,1269,1270,1271,569],{},"Semantic border color used by bordered variants and ",[327,1272,848],{},[1099,1274,1275,1280,1285,1290],{},[1120,1276,1277],{},[327,1278,1279],{},"variant",[1120,1281,1282],{},[327,1283,1284],{},"'outline' | 'soft' | 'subtle' | 'ghost' | 'none'",[1120,1286,1287],{},[327,1288,1289],{},"'outline'",[1120,1291,1292],{},"Field surface and border treatment.",[1099,1294,1295,1300,1305,1310],{},[1120,1296,1297],{},[327,1298,1299],{},"size",[1120,1301,1302],{},[327,1303,1304],{},"'sm' | 'md' | 'lg' | 'xl'",[1120,1306,1307],{},[327,1308,1309],{},"'md'",[1120,1311,1312],{},"Field dimensions and text size.",[1099,1314,1315,1319,1323,1327],{},[1120,1316,1317],{},[327,1318,848],{},[1120,1320,1321],{},[327,1322,1169],{},[1120,1324,1325],{},[327,1326,1174],{},[1120,1328,1329,1330,569],{},"Paints a static border matching ",[327,1331,1257],{},[1099,1333,1334,1339,1343,1347],{},[1120,1335,1336],{},[327,1337,1338],{},"id",[1120,1340,1341],{},[327,1342,1128],{},[1120,1344,1345],{},[327,1346,1133],{},[1120,1348,1349],{},"Declared identifier; passed to the core root prop but not currently rendered on its container.",[1099,1351,1352,1357,1361,1365],{},[1120,1353,1354],{},[327,1355,1356],{},"name",[1120,1358,1359],{},[327,1360,1128],{},[1120,1362,1363],{},[327,1364,1133],{},[1120,1366,1367],{},"Declared form name; not currently forwarded by the kit implementation.",[1099,1369,1370,1375,1380,1384],{},[1120,1371,1372],{},[327,1373,1374],{},"class",[1120,1376,1377],{},[327,1378,1379],{},"any",[1120,1381,1382],{},[327,1383,1133],{},[1120,1385,1386],{},"Classes merged onto the root container.",[1099,1388,1389,1394,1399,1403],{},[1120,1390,1391],{},[327,1392,1393],{},"ui",[1120,1395,1396],{},[327,1397,1398],{},"Partial\u003CRecord\u003C'root' | 'base', any>>",[1120,1400,1401],{},[327,1402,1133],{},[1120,1404,1405],{},"Per-instance root and field theme overrides.",[324,1407,1408,1410,1411,1414,1415,1414,1418,1414,1420,1414,1422,1414,1425,1427,1428,1431],{},[327,1409,1262],{}," defaults to ",[327,1412,1413],{},"primary",", ",[327,1416,1417],{},"secondary",[327,1419,982],{},[327,1421,737],{},[327,1423,1424],{},"warning",[327,1426,824],{},", or ",[327,1429,1430],{},"neutral",", and supports consumer registry extensions.",[324,1433,1434,1435,1438,1439,1427,1442,1445,1446,1449,1450,1453,1454,1456],{},"The kit wrapper does not expose the core root's uncontrolled ",[327,1436,1437],{},"defaultValue",", primitive ",[327,1440,1441],{},"as",[327,1443,1444],{},"asChild"," props. Compose ",[327,1447,1448],{},"PinInputRoot"," and ",[327,1451,1452],{},"PinInputInput"," from ",[327,1455,31],{}," when those controls or custom field markup are required.",[319,1458,1460],{"id":1459},"emits","Emits",[1093,1462,1463,1475],{},[1096,1464,1465],{},[1099,1466,1467,1470,1473],{},[1102,1468,1469],{},"Event",[1102,1471,1472],{},"Payload",[1102,1474,1113],{},[1115,1476,1477,1493],{},[1099,1478,1479,1484,1488],{},[1120,1480,1481],{},[327,1482,1483],{},"update:modelValue",[1120,1485,1486],{},[327,1487,1128],{},[1120,1489,1490,1491,569],{},"Emitted after the per-field core value changes; powers ",[327,1492,1139],{},[1099,1494,1495,1499,1503],{},[1120,1496,1497],{},[327,1498,1067],{},[1120,1500,1501],{},[327,1502,1128],{},[1120,1504,1505],{},"Emitted when all rendered fields are filled.",[324,1507,1508],{},"The completion event can fire again after a completed value changes while every field remains filled.",[319,1510,1512],{"id":1511},"slots","Slots",[324,1514,1515,1516,1518,1519,1521],{},"This kit component does not expose slots. Use ",[327,1517,1393],{}," to style the generated fields, or compose the headless primitives from ",[327,1520,31],{}," for custom markup.",[319,1523,1525],{"id":1524},"styling-and-theming","Styling and theming",[324,1527,1528,1529,1532,1533,569],{},"Override globally through ",[327,1530,1531],{},"appConfig.ui.pinInput"," or locally with ",[327,1534,1393],{},[1093,1536,1537,1547],{},[1096,1538,1539],{},[1099,1540,1541,1544],{},[1102,1542,1543],{},"UI slot",[1102,1545,1546],{},"Purpose",[1115,1548,1549,1559],{},[1099,1550,1551,1556],{},[1120,1552,1553],{},[327,1554,1555],{},"root",[1120,1557,1558],{},"Wrapping flex row, gap, width constraints, and overflow behavior.",[1099,1560,1561,1566],{},[1120,1562,1563],{},[327,1564,1565],{},"base",[1120,1567,1568],{},"Each native input's dimensions, typography, radius, surface, border, placeholder, and disabled state.",[324,1570,1571],{},"The default root wraps fields onto additional rows when the available width is too small.",[324,1573,1574,1575,1414,1577,1414,1579,1581,1582,1584],{},"The theme combines ",[327,1576,1299],{},[327,1578,1279],{},[327,1580,1257],{},", and ",[327,1583,848],{},":",[1039,1586,1587,1593,1598,1603,1614],{},[1042,1588,1589,1592],{},[327,1590,1591],{},"outline"," uses a white surface and semantic border.",[1042,1594,1595,1597],{},[327,1596,928],{}," uses a muted surface without a default border.",[1042,1599,1600,1602],{},[327,1601,970],{}," combines a muted surface with a semantic border.",[1042,1604,1605,1449,1608,1610,1611,1613],{},[327,1606,1607],{},"ghost",[327,1609,1012],{}," use transparent surfaces; ",[327,1612,1607],{}," adds an active background.",[1042,1615,1616,1618],{},[327,1617,848],{}," adds a semantic border regardless of the selected variant.",[324,1620,1621,1622,1624,1625,1627],{},"Sizes range from 32px square fields at ",[327,1623,916],{}," to 44px at ",[327,1626,959],{},". All fields use centered text and a neutral placeholder color.",[319,1629,299],{"id":1630},"accessibility",[324,1632,1633],{},"Each core field exposes a textbox role and a generated label such as “Digit 1 of 6.” Disabled state is forwarded to the native inputs.",[324,1635,1636,1637,1639],{},"Place a visible group label and instructions next to the component so users know which code to enter. Do not rely on placeholder glyphs, color, or ",[327,1638,848],{}," to communicate purpose or validation. Show errors as text and move focus deliberately when retrying a failed code.",[324,1641,1642,1643,1645],{},"The generated labels always use the word “Digit,” including in ",[327,1644,696],{}," mode. The kit wrapper does not currently expose per-field accessibility labels, a group label prop, or slots for replacing the inputs. Use the core primitives when a code requires custom accessible naming.",[324,1647,1648],{},"Masking conceals the visible characters but does not explain the field's sensitivity to assistive technology. Provide that context in the surrounding label or description.",[319,1650,1652],{"id":1651},"platform-notes","Platform notes",[1039,1654,1655,1665,1675,1683,1686,1692,1704],{},[1042,1656,1657,1658,1661,1662,569],{},"The fields are Lynx native ",[327,1659,1660],{},"input"," elements with ",[327,1663,1664],{},"maxlength=\"1\"",[1042,1666,1667,1668,1671,1672,569],{},"Numeric mode maps to Lynx input type ",[327,1669,1670],{},"digit","; alphanumeric mode maps to ",[327,1673,1674],{},"text",[1042,1676,1677,1679,1680,569],{},[327,1678,762],{}," maps every field to native input type ",[327,1681,1682],{},"password",[1042,1684,1685],{},"Focus movement waits for Vue's next render flush so a keystroke is committed before the next field receives focus.",[1042,1687,1688,1689,569],{},"Paste handling reads clipboard text when available and also accepts Lynx-style values from ",[327,1690,1691],{},"event.detail.value",[1042,1693,1694,1695,1697,1698,1700,1701,1703],{},"The current ",[327,1696,1201],{}," prop does not set a native autofill\u002Fcontent-type attribute, ",[327,1699,1356],{}," is not forwarded, and ",[327,1702,1338],{}," is not rendered by the core root.",[1042,1705,1706,1707,1449,1710,1713],{},"The root receives ",[327,1708,1709],{},"data-complete",[327,1711,1712],{},"data-disabled","; every field also receives the corresponding state attributes.",[319,1715,1717],{"id":1716},"related-components","Related components",[1039,1719,1720,1725,1733],{},[1042,1721,1722,1724],{},[327,1723,137],{}," for unrestricted single-field text.",[1042,1726,1727,1449,1730,1732],{},[327,1728,1729],{},"FormField",[327,1731,161],{}," for visible labels, instructions, and validation messages.",[1042,1734,1735,1736,1738,1739,1449,1741,1743],{},"The ",[327,1737,31],{}," ",[327,1740,1448],{},[327,1742,1452],{}," primitives for custom composition.",[1745,1746,1747],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":349,"searchDepth":356,"depth":389,"links":1749},[1750,1751,1756,1757,1758,1759,1760,1761,1762,1763],{"id":321,"depth":389,"text":322},{"id":341,"depth":389,"text":342,"children":1752},[1753,1754,1755],{"id":573,"depth":417,"text":574},{"id":755,"depth":417,"text":756},{"id":852,"depth":417,"text":853},{"id":1036,"depth":389,"text":1037},{"id":1090,"depth":389,"text":1091},{"id":1459,"depth":389,"text":1460},{"id":1511,"depth":389,"text":1512},{"id":1524,"depth":389,"text":1525},{"id":1630,"depth":389,"text":299},{"id":1651,"depth":389,"text":1652},{"id":1716,"depth":389,"text":1717},"Collect a fixed-length numeric or alphanumeric verification code.","md",[1767,1772],{"label":1768,"icon":1769,"to":1770,"target":1771},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FPinInput.vue","_blank",{"label":1773,"icon":1769,"to":1774,"target":1771},"Core source","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Ftree\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fcomponents\u002FPinInput",{},{"icon":189},{"title":186,"description":1764},"YIgL8cKNpEt1vRvE_Qt4wxucpdPnZtV8wMW36vpVfuI",[1780,1782],{"title":181,"path":182,"stem":183,"description":1781,"icon":-1,"children":-1,"navigation":-1},"Headless pagination primitive — page list, edges, and prev\u002Fnext controls computed from total and page size.",{"title":191,"path":192,"stem":193,"description":1783,"icon":-1,"children":-1,"navigation":-1},"Mark out an unfinished or example layout region with a hatched panel.",1783464069175]