[{"data":1,"prerenderedAt":1088},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fnumber-field":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fnumber-field":1083},[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":135,"badge":48,"body":189,"description":1078,"extension":1079,"meta":1080,"navigation":423,"path":136,"seo":1081,"status":13,"stem":137,"__hash__":1082},"docs\u002Fdocs\u002F2.components\u002F25.number-field.md",{"type":190,"value":191,"toc":1067},"minimark",[192,201,221,284,288,316,320,631,635,638,686,690,697,704,800,804,817,822,886,890,897,902,906,1002,1006,1009,1033,1037,1057,1063],[193,194,197],"playground",{"caption":195,"name":196},"Press + or - (hold to repeat), or focus the field and use the arrow keys.","number-field",[198,199],"demo-number-field",{"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 fields on this page are the real ",[209,218,219],{},"GoopNumberField",", and the code below is exactly what you write.",[206,222,223,225,226,229,230,233,234,233,237,233,240,243,244,247,248,251,252,233,255,233,258,233,261,233,264,233,267,233,270,233,273,276,277,280,281,283],{},[209,224,219],{}," is shadcn-vue's NumberField on reka-ui's ",[209,227,228],{},"NumberFieldRoot",": the same parts (",[209,231,232],{},"GoopNumberFieldContent",", ",[209,235,236],{},"GoopNumberFieldInput",[209,238,239],{},"GoopNumberFieldIncrement",[209,241,242],{},"GoopNumberFieldDecrement","), the same classes, ",[209,245,246],{},"v-model",", and ",[209,249,250],{},"class"," merge. ",[209,253,254],{},"min",[209,256,257],{},"max",[209,259,260],{},"step",[209,262,263],{},"formatOptions",[209,265,266],{},"locale",[209,268,269],{},"disabled",[209,271,272],{},"id",[209,274,275],{},"name",", and the other reka props go straight to reka. The goo is drawn on ",[209,278,279],{},"aria-hidden"," layers inside ",[209,282,232],{},", behind the real input and buttons.",[285,286,15],"h2",{"id":287},"installation",[206,289,290,291,293,294,296,297,302,303,233,306,233,309,233,312,315],{},"Install ",[209,292,215],{}," or ",[209,295,211],{}," as shown on the ",[298,299,301],"a",{"href":300},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports every part. They use the same shadcn tokens as the plain NumberField (",[209,304,305],{},"--input",[209,307,308],{},"--ring",[209,310,311],{},"--accent",[209,313,314],{},"--destructive",").",[285,317,319],{"id":318},"usage","Usage",[321,322,327],"pre",{"className":323,"code":324,"language":325,"meta":326,"style":326},"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 {\n  GoopNumberField,\n  GoopNumberFieldContent,\n  GoopNumberFieldDecrement,\n  GoopNumberFieldIncrement,\n  GoopNumberFieldInput,\n} from '@goopui\u002Fvue'\n\nconst qty = ref(3)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel for=\"qty\" class=\"text-sm font-medium\">Quantity\u003C\u002Flabel>\n  \u003CGoopNumberField id=\"qty\" v-model=\"qty\" :min=\"0\" :max=\"20\">\n    \u003CGoopNumberFieldContent>\n      \u003CGoopNumberFieldDecrement \u002F>\n      \u003CGoopNumberFieldInput \u002F>\n      \u003CGoopNumberFieldIncrement \u002F>\n    \u003C\u002FGoopNumberFieldContent>\n  \u003C\u002FGoopNumberField>\n\u003C\u002Ftemplate>\n","vue","",[209,328,329,359,366,376,382,388,394,400,406,418,425,450,460,465,475,507,563,573,584,593,602,612,622],{"__ignoreMap":326},[330,331,334,338,342,346,349,352,356],"span",{"class":332,"line":333},"line",1,[330,335,337],{"class":336},"sVt8B","\u003C",[330,339,341],{"class":340},"s9eBZ","script",[330,343,345],{"class":344},"sScJk"," setup",[330,347,348],{"class":344}," lang",[330,350,351],{"class":336},"=",[330,353,355],{"class":354},"sZZnC","\"ts\"",[330,357,358],{"class":336},">\n",[330,360,362],{"class":332,"line":361},2,[330,363,365],{"class":364},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[330,367,369,373],{"class":332,"line":368},3,[330,370,372],{"class":371},"szBVR","import",[330,374,375],{"class":336}," {\n",[330,377,379],{"class":332,"line":378},4,[330,380,381],{"class":336},"  GoopNumberField,\n",[330,383,385],{"class":332,"line":384},5,[330,386,387],{"class":336},"  GoopNumberFieldContent,\n",[330,389,391],{"class":332,"line":390},6,[330,392,393],{"class":336},"  GoopNumberFieldDecrement,\n",[330,395,397],{"class":332,"line":396},7,[330,398,399],{"class":336},"  GoopNumberFieldIncrement,\n",[330,401,403],{"class":332,"line":402},8,[330,404,405],{"class":336},"  GoopNumberFieldInput,\n",[330,407,409,412,415],{"class":332,"line":408},9,[330,410,411],{"class":336},"} ",[330,413,414],{"class":371},"from",[330,416,417],{"class":354}," '@goopui\u002Fvue'\n",[330,419,421],{"class":332,"line":420},10,[330,422,424],{"emptyLinePlaceholder":423},true,"\n",[330,426,428,431,435,438,441,444,447],{"class":332,"line":427},11,[330,429,430],{"class":371},"const",[330,432,434],{"class":433},"sj4cs"," qty",[330,436,437],{"class":371}," =",[330,439,440],{"class":344}," ref",[330,442,443],{"class":336},"(",[330,445,446],{"class":433},"3",[330,448,449],{"class":336},")\n",[330,451,453,456,458],{"class":332,"line":452},12,[330,454,455],{"class":336},"\u003C\u002F",[330,457,341],{"class":340},[330,459,358],{"class":336},[330,461,463],{"class":332,"line":462},13,[330,464,424],{"emptyLinePlaceholder":423},[330,466,468,470,473],{"class":332,"line":467},14,[330,469,337],{"class":336},[330,471,472],{"class":340},"template",[330,474,358],{"class":336},[330,476,478,481,484,487,489,492,495,497,500,503,505],{"class":332,"line":477},15,[330,479,480],{"class":336},"  \u003C",[330,482,483],{"class":340},"label",[330,485,486],{"class":344}," for",[330,488,351],{"class":336},[330,490,491],{"class":354},"\"qty\"",[330,493,494],{"class":344}," class",[330,496,351],{"class":336},[330,498,499],{"class":354},"\"text-sm font-medium\"",[330,501,502],{"class":336},">Quantity\u003C\u002F",[330,504,483],{"class":340},[330,506,358],{"class":336},[330,508,510,512,514,517,519,521,524,526,529,532,534,537,539,541,543,546,548,550,552,554,556,559,561],{"class":332,"line":509},16,[330,511,480],{"class":336},[330,513,219],{"class":340},[330,515,516],{"class":344}," id",[330,518,351],{"class":336},[330,520,491],{"class":354},[330,522,523],{"class":344}," v-model",[330,525,351],{"class":336},[330,527,528],{"class":354},"\"",[330,530,531],{"class":336},"qty",[330,533,528],{"class":354},[330,535,536],{"class":336}," :",[330,538,254],{"class":344},[330,540,351],{"class":336},[330,542,528],{"class":354},[330,544,545],{"class":433},"0",[330,547,528],{"class":354},[330,549,536],{"class":336},[330,551,257],{"class":344},[330,553,351],{"class":336},[330,555,528],{"class":354},[330,557,558],{"class":433},"20",[330,560,528],{"class":354},[330,562,358],{"class":336},[330,564,566,569,571],{"class":332,"line":565},17,[330,567,568],{"class":336},"    \u003C",[330,570,232],{"class":340},[330,572,358],{"class":336},[330,574,576,579,581],{"class":332,"line":575},18,[330,577,578],{"class":336},"      \u003C",[330,580,242],{"class":340},[330,582,583],{"class":336}," \u002F>\n",[330,585,587,589,591],{"class":332,"line":586},19,[330,588,578],{"class":336},[330,590,236],{"class":340},[330,592,583],{"class":336},[330,594,596,598,600],{"class":332,"line":595},20,[330,597,578],{"class":336},[330,599,239],{"class":340},[330,601,583],{"class":336},[330,603,605,608,610],{"class":332,"line":604},21,[330,606,607],{"class":336},"    \u003C\u002F",[330,609,232],{"class":340},[330,611,358],{"class":336},[330,613,615,618,620],{"class":332,"line":614},22,[330,616,617],{"class":336},"  \u003C\u002F",[330,619,219],{"class":340},[330,621,358],{"class":336},[330,623,625,627,629],{"class":332,"line":624},23,[330,626,455],{"class":336},[330,628,472],{"class":340},[330,630,358],{"class":336},[285,632,634],{"id":633},"what-it-does","What it does",[206,636,637],{},"Each part is an effect you can turn off:",[639,640,641,649,655],"ul",{},[642,643,644,648],"li",{},[645,646,647],"strong",{},"squish."," Pressing + or - swells a soft goo dollop out of the button, squished low and wide. Letting go springs it back with a small wobble as it shrinks away.",[642,650,651,654],{},[645,652,653],{},"nudge."," Every step (a press, a held repeat, or an arrow key) shoves the dollop toward the side you pressed and sends a ripple along the ring from that side. A typed value that commits on blur doesn't nudge.",[642,656,657,660,661,663,664,233,667,233,670,233,673,233,676,233,679,247,682,685],{},[645,658,659],{},"The focus ring."," The same ring as ",[298,662,62],{"href":63},", with the same ",[209,665,666],{},"flow",[209,668,669],{},"close",[209,671,672],{},"ripple",[209,674,675],{},"wobble",[209,677,678],{},"drain",[209,680,681],{},"drip",[209,683,684],{},"drips"," effects. A press on a button focuses the field, so the ring flows in from that button's side.",[285,687,689],{"id":688},"formatting","Formatting",[206,691,692,212,694,696],{},[209,693,263],{},[209,695,266],{}," work as in reka, so currency, percent, and unit fields need no extra code.",[698,699,701],"preview",{":controls":700},"false",[198,702],{"set":703},"currency",[321,705,707],{"className":323,"code":706,"language":325,"meta":326,"style":326},"\u003CGoopNumberField v-model=\"price\" :step=\"0.5\" :format-options=\"{ style: 'currency', currency: 'USD' }\">\n  \u003CGoopNumberFieldContent>\n    \u003CGoopNumberFieldDecrement \u002F>\n    \u003CGoopNumberFieldInput \u002F>\n    \u003CGoopNumberFieldIncrement \u002F>\n  \u003C\u002FGoopNumberFieldContent>\n\u003C\u002FGoopNumberField>\n",[209,708,709,767,772,777,782,787,792],{"__ignoreMap":326},[330,710,711,713,715,717,719,721,724,726,728,730,732,734,737,739,741,744,746,748,751,754,757,760,763,765],{"class":332,"line":333},[330,712,337],{"class":336},[330,714,219],{"class":340},[330,716,523],{"class":344},[330,718,351],{"class":336},[330,720,528],{"class":354},[330,722,723],{"class":336},"price",[330,725,528],{"class":354},[330,727,536],{"class":336},[330,729,260],{"class":344},[330,731,351],{"class":336},[330,733,528],{"class":354},[330,735,736],{"class":433},"0.5",[330,738,528],{"class":354},[330,740,536],{"class":336},[330,742,743],{"class":344},"format-options",[330,745,351],{"class":336},[330,747,528],{"class":354},[330,749,750],{"class":336},"{ style: ",[330,752,753],{"class":354},"'currency'",[330,755,756],{"class":336},", currency: ",[330,758,759],{"class":354},"'USD'",[330,761,762],{"class":336}," }",[330,764,528],{"class":354},[330,766,358],{"class":336},[330,768,769],{"class":332,"line":361},[330,770,771],{"class":336},"  \u003CGoopNumberFieldContent>\n",[330,773,774],{"class":332,"line":368},[330,775,776],{"class":336},"    \u003CGoopNumberFieldDecrement \u002F>\n",[330,778,779],{"class":332,"line":378},[330,780,781],{"class":336},"    \u003CGoopNumberFieldInput \u002F>\n",[330,783,784],{"class":332,"line":384},[330,785,786],{"class":336},"    \u003CGoopNumberFieldIncrement \u002F>\n",[330,788,789],{"class":332,"line":390},[330,790,791],{"class":336},"  \u003C\u002FGoopNumberFieldContent>\n",[330,793,794,796,798],{"class":332,"line":396},[330,795,455],{"class":336},[330,797,219],{"class":340},[330,799,358],{"class":336},[285,801,803],{"id":802},"effects-and-presets","Effects and presets",[206,805,806,807,809,810,812,813,816],{},"Every effect is a prop on ",[209,808,219],{},". ",[209,811,700],{}," turns it off, ",[209,814,815],{},"true"," uses the preset's strength, and a number scales it.",[698,818,819],{":controls":700},[198,820],{"set":821},"effects",[321,823,825],{"className":323,"code":824,"language":325,"meta":326,"style":326},"\u003CGoopNumberField preset=\"wild\">...\u003C\u002FGoopNumberField>\n\u003CGoopNumberField :squish=\"false\" :nudge=\"false\">...\u003C\u002FGoopNumberField>\n",[209,826,827,848],{"__ignoreMap":326},[330,828,829,831,833,836,838,841,844,846],{"class":332,"line":333},[330,830,337],{"class":336},[330,832,219],{"class":340},[330,834,835],{"class":344}," preset",[330,837,351],{"class":336},[330,839,840],{"class":354},"\"wild\"",[330,842,843],{"class":336},">...\u003C\u002F",[330,845,219],{"class":340},[330,847,358],{"class":336},[330,849,850,852,854,856,859,861,863,865,867,869,872,874,876,878,880,882,884],{"class":332,"line":361},[330,851,337],{"class":336},[330,853,219],{"class":340},[330,855,536],{"class":336},[330,857,858],{"class":344},"squish",[330,860,351],{"class":336},[330,862,528],{"class":354},[330,864,700],{"class":433},[330,866,528],{"class":354},[330,868,536],{"class":336},[330,870,871],{"class":344},"nudge",[330,873,351],{"class":336},[330,875,528],{"class":354},[330,877,700],{"class":433},[330,879,528],{"class":354},[330,881,843],{"class":336},[330,883,219],{"class":340},[330,885,358],{"class":336},[285,887,889],{"id":888},"disabled-and-goo-off","Disabled and goo off",[206,891,892,893,896],{},"A disabled field is shadcn's: dimmed, and its buttons don't press, so nothing squishes. ",[209,894,895],{},":goo=\"false\""," renders a plain shadcn NumberField.",[698,898,899],{":controls":700},[198,900],{"set":901},"states",[285,903,905],{"id":904},"colors","Colors",[907,908,909,925],"table",{},[910,911,912],"thead",{},[913,914,915,919,922],"tr",{},[916,917,918],"th",{},"Variable",[916,920,921],{},"Default",[916,923,924],{},"What it colors",[926,927,928,944,959,973,987],"tbody",{},[913,929,930,936,941],{},[931,932,933],"td",{},[209,934,935],{},"--goop-number-field-press",[931,937,938],{},[209,939,940],{},"var(--accent)",[931,942,943],{},"The dollop under a pressed button.",[913,945,946,951,956],{},[931,947,948],{},[209,949,950],{},"--goop-number-field-press-opacity",[931,952,953],{},[209,954,955],{},"1",[931,957,958],{},"Its opacity.",[913,960,961,966,971],{},[931,962,963],{},[209,964,965],{},"--goop-input-color",[931,967,968],{},[209,969,970],{},"var(--ring)",[931,972,659],{},[913,974,975,980,984],{},[931,976,977],{},[209,978,979],{},"--goop-input-opacity",[931,981,982],{},[209,983,736],{},[931,985,986],{},"The focus ring's opacity.",[913,988,989,994,999],{},[931,990,991],{},[209,992,993],{},"--goop-input-invalid-color",[931,995,996],{},[209,997,998],{},"var(--destructive)",[931,1000,1001],{},"The ring and drip of an invalid field.",[285,1003,1005],{"id":1004},"props","Props",[1007,1008],"component-props",{"name":196},[206,1010,1011,1013,1014,1017,1018,1021,1022,1025,1026,1029,1030,1032],{},[209,1012,232],{}," exposes ",[209,1015,1016],{},"handle"," (the live goo handle, ",[209,1019,1020],{},"null"," before mount or with ",[209,1023,1024],{},"goo"," off) and ",[209,1027,1028],{},"el",". Before it mounts, during SSR, and with ",[209,1031,895],{},", the field looks exactly like shadcn's, so first paint and hydration match.",[285,1034,1036],{"id":1035},"accessibility","Accessibility",[206,1038,1039,1040,1043,1044,233,1047,247,1050,1053,1054,1056],{},"It's reka's NumberField: the input is a ",[209,1041,1042],{},"role=\"spinbutton\""," with ",[209,1045,1046],{},"aria-valuenow",[209,1048,1049],{},"aria-valuemin",[209,1051,1052],{},"aria-valuemax",", the buttons are labelled \"Increase\" and \"Decrease\", and the arrow, Page Up\u002FDown, Home, and End keys step the value. The goo layers are ",[209,1055,279],{}," and can't be clicked. With the goo attached, shadcn's focus ring steps aside for the goo ring, which shows on every focus, keyboard included.",[206,1058,1059,1060,1062],{},"Under reduced motion the ring is a static closed band, a pressed button shows a still, round dollop, and steps don't nudge. See ",[298,1061,23],{"href":24},".",[1064,1065,1066],"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":326,"searchDepth":368,"depth":368,"links":1068},[1069,1070,1071,1072,1073,1074,1075,1076,1077],{"id":287,"depth":361,"text":15},{"id":318,"depth":361,"text":319},{"id":633,"depth":361,"text":634},{"id":688,"depth":361,"text":689},{"id":802,"depth":361,"text":803},{"id":888,"depth":361,"text":889},{"id":904,"depth":361,"text":905},{"id":1004,"depth":361,"text":1005},{"id":1035,"depth":361,"text":1036},"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.","md",{},{"title":135,"description":1078},"fLrpyTfqUgOEGUs-uJKblIJJoeV-PFwkHdpWDC1GwMs",[1084,1086],{"title":131,"path":132,"stem":133,"description":1085,"children":-1},"shadcn's Combobox with goo. The list blooms open below the input, the highlight is a blob, the check mark plops in, and the input gets a goo focus ring.",{"title":139,"path":140,"stem":141,"description":1087,"children":-1},"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.",1793670386528]