[{"data":1,"prerenderedAt":1019},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Finput-otp":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Finput-otp":1014},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":139,"badge":48,"body":189,"description":1009,"extension":1010,"meta":1011,"navigation":347,"path":140,"seo":1012,"status":13,"stem":141,"__hash__":1013},"docs\u002Fdocs\u002F2.components\u002F26.input-otp.md",{"type":190,"value":191,"toc":999},"minimark",[192,201,221,257,261,276,280,624,628,631,664,668,679,685,763,767,772,852,856,909,913,947,950,969,973,990,995],[193,194,197],"playground",{"caption":195,"name":196},"Click the first cell and type a code. Backspace sends the goo back.","input-otp",[198,199],"demo-input-otp",{"set":200},"basic",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,220],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The cells on this page are the real ",[209,218,219],{},"GoopInputOTP",", and the code below is exactly what you write.",[206,222,223,225,226,229,230,233,234,229,237,240,241,244,245,248,249,252,253,256],{},[209,224,219],{}," has shadcn-vue's InputOTP parts and classes (",[209,227,228],{},"GoopInputOTPGroup",", ",[209,231,232],{},"GoopInputOTPSlot"," with its ",[209,235,236],{},"index",[209,238,239],{},"GoopInputOTPSeparator","), built on reka-ui's ",[209,242,243],{},"PinInput",", as shadcn-vue's PinInput is. Each cell is a real ",[209,246,247],{},"\u003Cinput>",", and ",[209,250,251],{},"v-model"," is an array with one entry per cell. The goo is one ",[209,254,255],{},"aria-hidden"," layer behind the cells.",[258,259,15],"h2",{"id":260},"installation",[206,262,263,264,266,267,269,270,275],{},"Install ",[209,265,215],{}," or ",[209,268,211],{}," as shown on the ",[271,272,274],"a",{"href":273},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports every part.",[258,277,279],{"id":278},"usage","Usage",[281,282,287],"pre",{"className":283,"code":284,"language":285,"meta":286,"style":286},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\nimport { GoopInputOTP, GoopInputOTPGroup, GoopInputOTPSeparator, GoopInputOTPSlot } from '@goopui\u002Fvue'\n\nconst code = ref\u003Cstring[]>([])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopInputOTP v-model=\"code\" aria-label=\"Verification code\" @complete=\"verify\">\n    \u003CGoopInputOTPGroup>\n      \u003CGoopInputOTPSlot v-for=\"i in 3\" :key=\"i\" :index=\"i - 1\" \u002F>\n    \u003C\u002FGoopInputOTPGroup>\n    \u003CGoopInputOTPSeparator \u002F>\n    \u003CGoopInputOTPGroup>\n      \u003CGoopInputOTPSlot v-for=\"i in 3\" :key=\"i\" :index=\"i + 2\" \u002F>\n    \u003C\u002FGoopInputOTPGroup>\n  \u003C\u002FGoopInputOTP>\n\u003C\u002Ftemplate>\n","vue","",[209,288,289,319,326,342,349,373,383,388,398,443,453,515,525,534,543,596,605,615],{"__ignoreMap":286},[290,291,294,298,302,306,309,312,316],"span",{"class":292,"line":293},"line",1,[290,295,297],{"class":296},"sVt8B","\u003C",[290,299,301],{"class":300},"s9eBZ","script",[290,303,305],{"class":304},"sScJk"," setup",[290,307,308],{"class":304}," lang",[290,310,311],{"class":296},"=",[290,313,315],{"class":314},"sZZnC","\"ts\"",[290,317,318],{"class":296},">\n",[290,320,322],{"class":292,"line":321},2,[290,323,325],{"class":324},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[290,327,329,333,336,339],{"class":292,"line":328},3,[290,330,332],{"class":331},"szBVR","import",[290,334,335],{"class":296}," { GoopInputOTP, GoopInputOTPGroup, GoopInputOTPSeparator, GoopInputOTPSlot } ",[290,337,338],{"class":331},"from",[290,340,341],{"class":314}," '@goopui\u002Fvue'\n",[290,343,345],{"class":292,"line":344},4,[290,346,348],{"emptyLinePlaceholder":347},true,"\n",[290,350,352,355,359,362,365,367,370],{"class":292,"line":351},5,[290,353,354],{"class":331},"const",[290,356,358],{"class":357},"sj4cs"," code",[290,360,361],{"class":331}," =",[290,363,364],{"class":304}," ref",[290,366,297],{"class":296},[290,368,369],{"class":357},"string",[290,371,372],{"class":296},"[]>([])\n",[290,374,376,379,381],{"class":292,"line":375},6,[290,377,378],{"class":296},"\u003C\u002F",[290,380,301],{"class":300},[290,382,318],{"class":296},[290,384,386],{"class":292,"line":385},7,[290,387,348],{"emptyLinePlaceholder":347},[290,389,391,393,396],{"class":292,"line":390},8,[290,392,297],{"class":296},[290,394,395],{"class":300},"template",[290,397,318],{"class":296},[290,399,401,404,406,409,411,414,416,418,421,423,426,429,432,434,436,439,441],{"class":292,"line":400},9,[290,402,403],{"class":296},"  \u003C",[290,405,219],{"class":300},[290,407,408],{"class":304}," v-model",[290,410,311],{"class":296},[290,412,413],{"class":314},"\"",[290,415,209],{"class":296},[290,417,413],{"class":314},[290,419,420],{"class":304}," aria-label",[290,422,311],{"class":296},[290,424,425],{"class":314},"\"Verification code\"",[290,427,428],{"class":296}," @",[290,430,431],{"class":304},"complete",[290,433,311],{"class":296},[290,435,413],{"class":314},[290,437,438],{"class":296},"verify",[290,440,413],{"class":314},[290,442,318],{"class":296},[290,444,446,449,451],{"class":292,"line":445},10,[290,447,448],{"class":296},"    \u003C",[290,450,228],{"class":300},[290,452,318],{"class":296},[290,454,456,459,461,464,466,468,471,474,477,479,482,485,487,489,492,494,496,498,500,502,504,507,510,512],{"class":292,"line":455},11,[290,457,458],{"class":296},"      \u003C",[290,460,232],{"class":300},[290,462,463],{"class":331}," v-for",[290,465,311],{"class":296},[290,467,413],{"class":314},[290,469,470],{"class":296},"i ",[290,472,473],{"class":331},"in",[290,475,476],{"class":357}," 3",[290,478,413],{"class":314},[290,480,481],{"class":296}," :",[290,483,484],{"class":304},"key",[290,486,311],{"class":296},[290,488,413],{"class":314},[290,490,491],{"class":296},"i",[290,493,413],{"class":314},[290,495,481],{"class":296},[290,497,236],{"class":304},[290,499,311],{"class":296},[290,501,413],{"class":314},[290,503,470],{"class":296},[290,505,506],{"class":331},"-",[290,508,509],{"class":357}," 1",[290,511,413],{"class":314},[290,513,514],{"class":296}," \u002F>\n",[290,516,518,521,523],{"class":292,"line":517},12,[290,519,520],{"class":296},"    \u003C\u002F",[290,522,228],{"class":300},[290,524,318],{"class":296},[290,526,528,530,532],{"class":292,"line":527},13,[290,529,448],{"class":296},[290,531,239],{"class":300},[290,533,514],{"class":296},[290,535,537,539,541],{"class":292,"line":536},14,[290,538,448],{"class":296},[290,540,228],{"class":300},[290,542,318],{"class":296},[290,544,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582,584,586,589,592,594],{"class":292,"line":545},15,[290,547,458],{"class":296},[290,549,232],{"class":300},[290,551,463],{"class":331},[290,553,311],{"class":296},[290,555,413],{"class":314},[290,557,470],{"class":296},[290,559,473],{"class":331},[290,561,476],{"class":357},[290,563,413],{"class":314},[290,565,481],{"class":296},[290,567,484],{"class":304},[290,569,311],{"class":296},[290,571,413],{"class":314},[290,573,491],{"class":296},[290,575,413],{"class":314},[290,577,481],{"class":296},[290,579,236],{"class":304},[290,581,311],{"class":296},[290,583,413],{"class":314},[290,585,470],{"class":296},[290,587,588],{"class":331},"+",[290,590,591],{"class":357}," 2",[290,593,413],{"class":314},[290,595,514],{"class":296},[290,597,599,601,603],{"class":292,"line":598},16,[290,600,520],{"class":296},[290,602,228],{"class":300},[290,604,318],{"class":296},[290,606,608,611,613],{"class":292,"line":607},17,[290,609,610],{"class":296},"  \u003C\u002F",[290,612,219],{"class":300},[290,614,318],{"class":296},[290,616,618,620,622],{"class":292,"line":617},18,[290,619,378],{"class":296},[290,621,395],{"class":300},[290,623,318],{"class":296},[258,625,627],{"id":626},"what-it-does","What it does",[206,629,630],{},"The focused cell holds a pool of goo, and that pool is the focus indicator. Each part is an effect you can turn off:",[632,633,634,646,652,658],"ul",{},[635,636,637,641,642,645],"li",{},[638,639,640],"strong",{},"flow."," When focus moves to another cell (typing moves it forward, Backspace moves it back), the goo gathers, necks out of the old cell, pinches off, and floods the new one from the side it arrived on, like ",[271,643,644],{"href":46},"ToggleGroup","'s fill moving between items.",[635,647,648,651],{},[638,649,650],{},"pulse."," A digit landing in a cell plops a small, low dollop of goo into it as the pool flows on.",[635,653,654,657],{},[638,655,656],{},"flood."," Focusing a cell from outside floods it from where you clicked; focus leaving the code drains it.",[635,659,660,663],{},[638,661,662],{},"wobble."," The flood front's crest and a small jelly wobble once the cell is full.",[258,665,667],{"id":666},"effects-and-presets","Effects and presets",[206,669,670,671,674,675,678],{},"Every effect is a prop. ",[209,672,673],{},"false"," turns it off, ",[209,676,677],{},"true"," uses the preset's strength, and a number scales it.",[680,681,682],"preview",{":controls":673},[198,683],{"set":684},"effects",[281,686,688],{"className":283,"code":687,"language":285,"meta":286,"style":286},"\u003CGoopInputOTP preset=\"wild\" type=\"number\">...\u003C\u002FGoopInputOTP>\n\u003CGoopInputOTP :flow=\"false\" :pulse=\"false\" type=\"number\">...\u003C\u002FGoopInputOTP>\n",[209,689,690,719],{"__ignoreMap":286},[290,691,692,694,696,699,701,704,707,709,712,715,717],{"class":292,"line":293},[290,693,297],{"class":296},[290,695,219],{"class":300},[290,697,698],{"class":304}," preset",[290,700,311],{"class":296},[290,702,703],{"class":314},"\"wild\"",[290,705,706],{"class":304}," type",[290,708,311],{"class":296},[290,710,711],{"class":314},"\"number\"",[290,713,714],{"class":296},">...\u003C\u002F",[290,716,219],{"class":300},[290,718,318],{"class":296},[290,720,721,723,725,727,730,732,734,736,738,740,743,745,747,749,751,753,755,757,759,761],{"class":292,"line":321},[290,722,297],{"class":296},[290,724,219],{"class":300},[290,726,481],{"class":296},[290,728,729],{"class":304},"flow",[290,731,311],{"class":296},[290,733,413],{"class":314},[290,735,673],{"class":357},[290,737,413],{"class":314},[290,739,481],{"class":296},[290,741,742],{"class":304},"pulse",[290,744,311],{"class":296},[290,746,413],{"class":314},[290,748,673],{"class":357},[290,750,413],{"class":314},[290,752,706],{"class":304},[290,754,311],{"class":296},[290,756,711],{"class":314},[290,758,714],{"class":296},[290,760,219],{"class":300},[290,762,318],{"class":296},[258,764,766],{"id":765},"disabled-and-goo-off","Disabled and goo off",[680,768,769],{":controls":673},[198,770],{"set":771},"states",[281,773,775],{"className":283,"code":774,"language":285,"meta":286,"style":286},"\u003CGoopInputOTP disabled :default-value=\"['1', '2', '3', '4']\">...\u003C\u002FGoopInputOTP>\n\u003CGoopInputOTP :goo=\"false\">...\u003C\u002FGoopInputOTP>\n",[209,776,777,827],{"__ignoreMap":286},[290,778,779,781,783,786,788,791,793,795,798,801,803,806,808,811,813,816,819,821,823,825],{"class":292,"line":293},[290,780,297],{"class":296},[290,782,219],{"class":300},[290,784,785],{"class":304}," disabled",[290,787,481],{"class":296},[290,789,790],{"class":304},"default-value",[290,792,311],{"class":296},[290,794,413],{"class":314},[290,796,797],{"class":296},"[",[290,799,800],{"class":314},"'1'",[290,802,229],{"class":296},[290,804,805],{"class":314},"'2'",[290,807,229],{"class":296},[290,809,810],{"class":314},"'3'",[290,812,229],{"class":296},[290,814,815],{"class":314},"'4'",[290,817,818],{"class":296},"]",[290,820,413],{"class":314},[290,822,714],{"class":296},[290,824,219],{"class":300},[290,826,318],{"class":296},[290,828,829,831,833,835,838,840,842,844,846,848,850],{"class":292,"line":321},[290,830,297],{"class":296},[290,832,219],{"class":300},[290,834,481],{"class":296},[290,836,837],{"class":304},"goo",[290,839,311],{"class":296},[290,841,413],{"class":314},[290,843,673],{"class":357},[290,845,413],{"class":314},[290,847,714],{"class":296},[290,849,219],{"class":300},[290,851,318],{"class":296},[258,853,855],{"id":854},"colors","Colors",[857,858,859,875],"table",{},[860,861,862],"thead",{},[863,864,865,869,872],"tr",{},[866,867,868],"th",{},"Variable",[866,870,871],{},"Default",[866,873,874],{},"What it colors",[876,877,878,894],"tbody",{},[863,879,880,886,891],{},[881,882,883],"td",{},[209,884,885],{},"--goop-otp-color",[881,887,888],{},[209,889,890],{},"var(--ring)",[881,892,893],{},"The focus goo and pulses.",[863,895,896,901,906],{},[881,897,898],{},[209,899,900],{},"--goop-otp-opacity",[881,902,903],{},[209,904,905],{},"0.3",[881,907,908],{},"Their opacity.",[258,910,912],{"id":911},"props","Props",[206,914,915,229,918,229,921,229,924,229,927,229,930,229,933,229,936,248,939,942,943,946],{},[209,916,917],{},"otp",[209,919,920],{},"type",[209,922,923],{},"mask",[209,925,926],{},"placeholder",[209,928,929],{},"disabled",[209,931,932],{},"name",[209,934,935],{},"required",[209,937,938],{},"dir",[209,940,941],{},"@complete"," go straight to reka's ",[209,944,945],{},"PinInputRoot",".",[948,949],"component-props",{"name":196},[206,951,952,954,955,958,959,962,963,965,966,946],{},[209,953,219],{}," exposes ",[209,956,957],{},"handle"," (the live goo handle, ",[209,960,961],{},"null"," before mount or with ",[209,964,837],{}," off) and ",[209,967,968],{},"el",[258,970,972],{"id":971},"accessibility","Accessibility",[206,974,975,976,978,979,982,983,985,986,989],{},"Each cell is a real ",[209,977,247],{}," with its own ",[209,980,981],{},"aria-label"," from reka, and ",[209,984,917],{}," sets ",[209,987,988],{},"autocomplete=\"one-time-code\""," so phones can fill the code from a text message. Pasting a whole code fills every cell. With the goo attached, the focused cell keeps shadcn's ring-colored border, and the goo replaces the box-shadow ring, so the focus is always visible, keyboard included.",[206,991,992,993,946],{},"Under reduced motion the focused cell shows a still fill: no flow, flood, wobble, or pulse. See ",[271,994,23],{"href":24},[996,997,998],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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":286,"searchDepth":328,"depth":328,"links":1000},[1001,1002,1003,1004,1005,1006,1007,1008],{"id":260,"depth":321,"text":15},{"id":278,"depth":321,"text":279},{"id":626,"depth":321,"text":627},{"id":666,"depth":321,"text":667},{"id":765,"depth":321,"text":766},{"id":854,"depth":321,"text":855},{"id":911,"depth":321,"text":912},{"id":971,"depth":321,"text":972},"shadcn's one-time-code input where the focus is a pool of goo. It flows from cell to cell as you type, back on Backspace, with a small pulse as each digit lands.","md",{},{"title":139,"description":1009},"oF2t4ZyTxYwwWzFDV37qx54uIqKEt-rzmS8jLiDfQqQ",[1015,1017],{"title":135,"path":136,"stem":137,"description":1016,"children":-1},"shadcn's NumberField with the Input's goo focus ring. Pressing + or - squishes a goo dollop under the button, and every step nudges toward the side you pressed.",{"title":143,"path":144,"stem":145,"description":1018,"children":-1},"shadcn's Hover Card with goo. The card blooms out of the edge facing its link, splashes, and shrinks back into it.",1793670386528]