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