[{"data":1,"prerenderedAt":1057},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fcombobox":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fcombobox":1052},[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":131,"badge":48,"body":189,"description":1047,"extension":1048,"meta":1049,"navigation":389,"path":132,"seo":1050,"status":13,"stem":133,"__hash__":1051},"docs\u002Fdocs\u002F2.components\u002F24.combobox.md",{"type":190,"value":191,"toc":1040},"minimark",[192,200,220,243,248,706,749,753,819,823,969,973,1014,1019,1023,1036],[193,194,197],"playground",{"caption":195,"name":196},"Type to filter, move between items, then pick one.","combobox",[198,199],"demo-command",{"set":196},[201,202,204],"callout",{"type":203},"alpha",[205,206,207,211,212,215,216,219],"p",{},[208,209,210],"code",{},"@goopui\u002Fvue"," and ",[208,213,214],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. Combobox is new and experimental: its props may still change. The combobox on this page is the real ",[208,217,218],{},"GoopCombobox",".",[205,221,222,224,225,232,233,236,237,240,241,219],{},[208,223,218],{}," wraps the same ",[226,227,231],"a",{"href":228,"rel":229},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fcombobox",[230],"nofollow","reka-ui Combobox"," primitive as shadcn-vue's Combobox, with the same API: filtering, keyboard navigation, ",[208,234,235],{},"by",", ",[208,238,239],{},"multiple",", and form submission work the same. Swap the imports and you're done. Install it like ",[226,242,127],{"href":128},[244,245,247],"h2",{"id":246},"usage","Usage",[249,250,255],"pre",{"className":251,"code":252,"language":253,"meta":254,"style":254},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nconst frameworks = [\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'astro', label: 'Astro' },\n]\nconst framework = ref()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopCombobox v-model=\"framework\" by=\"value\">\n    \u003CGoopComboboxAnchor class=\"relative w-56\">\n      \u003CGoopComboboxInput placeholder=\"Select framework...\" :display-value=\"(v) => v?.label ?? ''\" \u002F>\n      \u003CGoopComboboxTrigger class=\"absolute inset-y-0 right-0 px-2\" aria-label=\"Show frameworks\">▾\u003C\u002FGoopComboboxTrigger>\n    \u003C\u002FGoopComboboxAnchor>\n    \u003CGoopComboboxList class=\"w-(--reka-combobox-trigger-width)\">\n      \u003CGoopComboboxEmpty>No framework found.\u003C\u002FGoopComboboxEmpty>\n      \u003CGoopComboboxGroup>\n        \u003CGoopComboboxItem v-for=\"f in frameworks\" :key=\"f.value\" :value=\"f\">\n          {{ f.label }}\n          \u003CGoopComboboxItemIndicator \u002F>\n        \u003C\u002FGoopComboboxItem>\n      \u003C\u002FGoopComboboxGroup>\n    \u003C\u002FGoopComboboxList>\n  \u003C\u002FGoopCombobox>\n\u003C\u002Ftemplate>\n","vue","",[208,256,257,287,304,322,337,352,358,374,384,391,401,432,451,503,533,543,560,575,585,641,647,658,668,678,687,697],{"__ignoreMap":254},[258,259,262,266,270,274,277,280,284],"span",{"class":260,"line":261},"line",1,[258,263,265],{"class":264},"sVt8B","\u003C",[258,267,269],{"class":268},"s9eBZ","script",[258,271,273],{"class":272},"sScJk"," setup",[258,275,276],{"class":272}," lang",[258,278,279],{"class":264},"=",[258,281,283],{"class":282},"sZZnC","\"ts\"",[258,285,286],{"class":264},">\n",[258,288,290,294,298,301],{"class":260,"line":289},2,[258,291,293],{"class":292},"szBVR","const",[258,295,297],{"class":296},"sj4cs"," frameworks",[258,299,300],{"class":292}," =",[258,302,303],{"class":264}," [\n",[258,305,307,310,313,316,319],{"class":260,"line":306},3,[258,308,309],{"class":264},"  { value: ",[258,311,312],{"class":282},"'nuxt'",[258,314,315],{"class":264},", label: ",[258,317,318],{"class":282},"'Nuxt'",[258,320,321],{"class":264}," },\n",[258,323,325,327,330,332,335],{"class":260,"line":324},4,[258,326,309],{"class":264},[258,328,329],{"class":282},"'sveltekit'",[258,331,315],{"class":264},[258,333,334],{"class":282},"'SvelteKit'",[258,336,321],{"class":264},[258,338,340,342,345,347,350],{"class":260,"line":339},5,[258,341,309],{"class":264},[258,343,344],{"class":282},"'astro'",[258,346,315],{"class":264},[258,348,349],{"class":282},"'Astro'",[258,351,321],{"class":264},[258,353,355],{"class":260,"line":354},6,[258,356,357],{"class":264},"]\n",[258,359,361,363,366,368,371],{"class":260,"line":360},7,[258,362,293],{"class":292},[258,364,365],{"class":296}," framework",[258,367,300],{"class":292},[258,369,370],{"class":272}," ref",[258,372,373],{"class":264},"()\n",[258,375,377,380,382],{"class":260,"line":376},8,[258,378,379],{"class":264},"\u003C\u002F",[258,381,269],{"class":268},[258,383,286],{"class":264},[258,385,387],{"class":260,"line":386},9,[258,388,390],{"emptyLinePlaceholder":389},true,"\n",[258,392,394,396,399],{"class":260,"line":393},10,[258,395,265],{"class":264},[258,397,398],{"class":268},"template",[258,400,286],{"class":264},[258,402,404,407,409,412,414,417,420,422,425,427,430],{"class":260,"line":403},11,[258,405,406],{"class":264},"  \u003C",[258,408,218],{"class":268},[258,410,411],{"class":272}," v-model",[258,413,279],{"class":264},[258,415,416],{"class":282},"\"",[258,418,419],{"class":264},"framework",[258,421,416],{"class":282},[258,423,424],{"class":272}," by",[258,426,279],{"class":264},[258,428,429],{"class":282},"\"value\"",[258,431,286],{"class":264},[258,433,435,438,441,444,446,449],{"class":260,"line":434},12,[258,436,437],{"class":264},"    \u003C",[258,439,440],{"class":268},"GoopComboboxAnchor",[258,442,443],{"class":272}," class",[258,445,279],{"class":264},[258,447,448],{"class":282},"\"relative w-56\"",[258,450,286],{"class":264},[258,452,454,457,460,463,465,468,471,474,476,478,481,485,488,491,494,497,500],{"class":260,"line":453},13,[258,455,456],{"class":264},"      \u003C",[258,458,459],{"class":268},"GoopComboboxInput",[258,461,462],{"class":272}," placeholder",[258,464,279],{"class":264},[258,466,467],{"class":282},"\"Select framework...\"",[258,469,470],{"class":264}," :",[258,472,473],{"class":272},"display-value",[258,475,279],{"class":264},[258,477,416],{"class":282},[258,479,480],{"class":264},"(",[258,482,484],{"class":483},"s4XuR","v",[258,486,487],{"class":264},") ",[258,489,490],{"class":292},"=>",[258,492,493],{"class":264}," v?.label ",[258,495,496],{"class":292},"??",[258,498,499],{"class":282}," ''\"",[258,501,502],{"class":264}," \u002F>\n",[258,504,506,508,511,513,515,518,521,523,526,529,531],{"class":260,"line":505},14,[258,507,456],{"class":264},[258,509,510],{"class":268},"GoopComboboxTrigger",[258,512,443],{"class":272},[258,514,279],{"class":264},[258,516,517],{"class":282},"\"absolute inset-y-0 right-0 px-2\"",[258,519,520],{"class":272}," aria-label",[258,522,279],{"class":264},[258,524,525],{"class":282},"\"Show frameworks\"",[258,527,528],{"class":264},">▾\u003C\u002F",[258,530,510],{"class":268},[258,532,286],{"class":264},[258,534,536,539,541],{"class":260,"line":535},15,[258,537,538],{"class":264},"    \u003C\u002F",[258,540,440],{"class":268},[258,542,286],{"class":264},[258,544,546,548,551,553,555,558],{"class":260,"line":545},16,[258,547,437],{"class":264},[258,549,550],{"class":268},"GoopComboboxList",[258,552,443],{"class":272},[258,554,279],{"class":264},[258,556,557],{"class":282},"\"w-(--reka-combobox-trigger-width)\"",[258,559,286],{"class":264},[258,561,563,565,568,571,573],{"class":260,"line":562},17,[258,564,456],{"class":264},[258,566,567],{"class":268},"GoopComboboxEmpty",[258,569,570],{"class":264},">No framework found.\u003C\u002F",[258,572,567],{"class":268},[258,574,286],{"class":264},[258,576,578,580,583],{"class":260,"line":577},18,[258,579,456],{"class":264},[258,581,582],{"class":268},"GoopComboboxGroup",[258,584,286],{"class":264},[258,586,588,591,594,597,599,601,604,607,609,611,613,616,618,620,623,625,627,630,632,634,637,639],{"class":260,"line":587},19,[258,589,590],{"class":264},"        \u003C",[258,592,593],{"class":268},"GoopComboboxItem",[258,595,596],{"class":292}," v-for",[258,598,279],{"class":264},[258,600,416],{"class":282},[258,602,603],{"class":264},"f ",[258,605,606],{"class":292},"in",[258,608,297],{"class":264},[258,610,416],{"class":282},[258,612,470],{"class":264},[258,614,615],{"class":272},"key",[258,617,279],{"class":264},[258,619,416],{"class":282},[258,621,622],{"class":264},"f.value",[258,624,416],{"class":282},[258,626,470],{"class":264},[258,628,629],{"class":272},"value",[258,631,279],{"class":264},[258,633,416],{"class":282},[258,635,636],{"class":264},"f",[258,638,416],{"class":282},[258,640,286],{"class":264},[258,642,644],{"class":260,"line":643},20,[258,645,646],{"class":264},"          {{ f.label }}\n",[258,648,650,653,656],{"class":260,"line":649},21,[258,651,652],{"class":264},"          \u003C",[258,654,655],{"class":268},"GoopComboboxItemIndicator",[258,657,502],{"class":264},[258,659,661,664,666],{"class":260,"line":660},22,[258,662,663],{"class":264},"        \u003C\u002F",[258,665,593],{"class":268},[258,667,286],{"class":264},[258,669,671,674,676],{"class":260,"line":670},23,[258,672,673],{"class":264},"      \u003C\u002F",[258,675,582],{"class":268},[258,677,286],{"class":264},[258,679,681,683,685],{"class":260,"line":680},24,[258,682,538],{"class":264},[258,684,550],{"class":268},[258,686,286],{"class":264},[258,688,690,693,695],{"class":260,"line":689},25,[258,691,692],{"class":264},"  \u003C\u002F",[258,694,218],{"class":268},[258,696,286],{"class":264},[258,698,700,702,704],{"class":260,"line":699},26,[258,701,379],{"class":264},[258,703,398],{"class":268},[258,705,286],{"class":264},[205,707,708,709,236,711,236,714,236,716,236,719,236,722,236,725,236,728,236,731,236,734,737,738,740,741,743,744,746,747,219],{},"The parts are ",[208,710,218],{},[208,712,713],{},"Anchor",[208,715,62],{},[208,717,718],{},"Trigger",[208,720,721],{},"Cancel",[208,723,724],{},"List",[208,726,727],{},"Empty",[208,729,730],{},"Group",[208,732,733],{},"Item",[208,735,736],{},"ItemIndicator",", and ",[208,739,167],{},", each prefixed with ",[208,742,218],{},". The list's goo lives on ",[208,745,550],{},"; the input's ring on ",[208,748,459],{},[244,750,752],{"id":751},"behavior","Behavior",[754,755,756,774,793,806],"ul",{},[757,758,759,763,764,236,767,236,770,773],"li",{},[760,761,762],"strong",{},"Bloom."," The list pools from its own center, spreads with a lobed edge, overshoots, and splashes all around, kept off the input. Close pulls it in and shrinks it back (",[208,765,766],{},"openSlosh",[208,768,769],{},"openDrips",[208,771,772],{},"closeSlosh",").",[757,775,776,779,780,236,783,236,786,236,789,792],{},[760,777,778],{},"Highlight."," The active item's background is a goo blob that glides between items with the keys and the pointer (",[208,781,782],{},"highlight",[208,784,785],{},"momentum",[208,787,788],{},"wobble",[208,790,791],{},"followPointer","). When typing hides the highlighted item, the blob shrinks out.",[757,794,795,798,799,802,803,773],{},[760,796,797],{},"Choose."," Picking an item squishes the blob (",[208,800,801],{},"pop","), sets the value at once, and closes the list once the pop has played. Its check mark plops in (",[208,804,805],{},"plop",[757,807,808,811,812,814,815,818],{},[760,809,810],{},"Input ring."," ",[208,813,459],{}," gets GoopInput's goo focus ring (",[208,816,817],{},":goo=\"false\""," on it turns the ring off).",[244,820,822],{"id":821},"turning-parts-off","Turning parts off",[249,824,826],{"className":251,"code":825,"language":253,"meta":254,"style":254},"\u003CGoopComboboxList :plop=\"false\">...\u003C\u002FGoopComboboxList>        \u003C!-- the check mark just appears -->\n\u003CGoopComboboxList :highlight=\"false\">...\u003C\u002FGoopComboboxList>   \u003C!-- shadcn's flat highlight -->\n\u003CGoopComboboxList :open-drips=\"false\">...\u003C\u002FGoopComboboxList>  \u003C!-- no splash -->\n\u003CGoopComboboxInput :goo=\"false\" \u002F>                            \u003C!-- no ring -->\n\u003CGoopComboboxList :goo=\"false\">...\u003C\u002FGoopComboboxList>         \u003C!-- plain shadcn list -->\n",[208,827,828,859,887,916,941],{"__ignoreMap":254},[258,829,830,832,834,836,838,840,842,845,847,850,852,855],{"class":260,"line":261},[258,831,265],{"class":264},[258,833,550],{"class":268},[258,835,470],{"class":264},[258,837,805],{"class":272},[258,839,279],{"class":264},[258,841,416],{"class":282},[258,843,844],{"class":296},"false",[258,846,416],{"class":282},[258,848,849],{"class":264},">...\u003C\u002F",[258,851,550],{"class":268},[258,853,854],{"class":264},">        ",[258,856,858],{"class":857},"sJ8bj","\u003C!-- the check mark just appears -->\n",[258,860,861,863,865,867,869,871,873,875,877,879,881,884],{"class":260,"line":289},[258,862,265],{"class":264},[258,864,550],{"class":268},[258,866,470],{"class":264},[258,868,782],{"class":272},[258,870,279],{"class":264},[258,872,416],{"class":282},[258,874,844],{"class":296},[258,876,416],{"class":282},[258,878,849],{"class":264},[258,880,550],{"class":268},[258,882,883],{"class":264},">   ",[258,885,886],{"class":857},"\u003C!-- shadcn's flat highlight -->\n",[258,888,889,891,893,895,898,900,902,904,906,908,910,913],{"class":260,"line":306},[258,890,265],{"class":264},[258,892,550],{"class":268},[258,894,470],{"class":264},[258,896,897],{"class":272},"open-drips",[258,899,279],{"class":264},[258,901,416],{"class":282},[258,903,844],{"class":296},[258,905,416],{"class":282},[258,907,849],{"class":264},[258,909,550],{"class":268},[258,911,912],{"class":264},">  ",[258,914,915],{"class":857},"\u003C!-- no splash -->\n",[258,917,918,920,922,924,927,929,931,933,935,938],{"class":260,"line":324},[258,919,265],{"class":264},[258,921,459],{"class":268},[258,923,470],{"class":264},[258,925,926],{"class":272},"goo",[258,928,279],{"class":264},[258,930,416],{"class":282},[258,932,844],{"class":296},[258,934,416],{"class":282},[258,936,937],{"class":264}," \u002F>                            ",[258,939,940],{"class":857},"\u003C!-- no ring -->\n",[258,942,943,945,947,949,951,953,955,957,959,961,963,966],{"class":260,"line":339},[258,944,265],{"class":264},[258,946,550],{"class":268},[258,948,470],{"class":264},[258,950,926],{"class":272},[258,952,279],{"class":264},[258,954,416],{"class":282},[258,956,844],{"class":296},[258,958,416],{"class":282},[258,960,849],{"class":264},[258,962,550],{"class":268},[258,964,965],{"class":264},">         ",[258,967,968],{"class":857},"\u003C!-- plain shadcn list -->\n",[244,970,972],{"id":971},"props","Props",[205,974,975,977,978,981,982,236,985,236,988,991,992,995,996,1000,1001,1004,1005,977,1007,1010,1011,1013],{},[208,976,550],{}," takes reka-ui's ",[208,979,980],{},"ComboboxContent"," props (defaults ",[208,983,984],{},"position=\"popper\"",[208,986,987],{},"align=\"start\"",[208,989,990],{},"sideOffset"," 4), ",[208,993,994],{},"class",", and the same goo props as ",[226,997,999],{"href":998},"\u002Fdocs\u002Fcomponents\u002Fselect#props","GoopSelectContent"," except ",[208,1002,1003],{},"bloomFrom",": a combobox list always blooms from its own center. ",[208,1006,459],{},[208,1008,1009],{},"ComboboxInput"," props, GoopInput's ring props, and ",[208,1012,926],{},". The other parts take shadcn-vue's props.",[1015,1016],"component-props",{"name":196,"part":1017},[1018],"list",[244,1020,1022],{"id":1021},"accessibility","Accessibility",[205,1024,1025,1026,1029,1030,1033,1034,219],{},"The combobox and listbox roles, ",[208,1027,1028],{},"aria-activedescendant",", keyboard navigation, and focus handling come from reka-ui. The goo surface, highlight blob, and ring are ",[208,1031,1032],{},"aria-hidden"," and can't be clicked. Under reduced motion the list opens and closes plainly, the highlight snaps, there's no pop or plop, and the ring is static. See ",[226,1035,23],{"href":24},[1037,1038,1039],"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 .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 pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":254,"searchDepth":306,"depth":306,"links":1041},[1042,1043,1044,1045,1046],{"id":246,"depth":289,"text":247},{"id":751,"depth":289,"text":752},{"id":821,"depth":289,"text":822},{"id":971,"depth":289,"text":972},{"id":1021,"depth":289,"text":1022},"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.","md",{},{"title":131,"description":1047},"4B42FyzNJ-Qm4y_ILq62aBoQ5xXog1SI0KLWNOhh88g",[1053,1055],{"title":127,"path":128,"stem":129,"description":1054,"children":-1},"shadcn's Command with goo. The active item is a blob that glides between items with the keys and the pointer, the search box gets a goo focus ring, and the dialog blooms open.",{"title":135,"path":136,"stem":137,"description":1056,"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.",1793670386528]