[{"data":1,"prerenderedAt":1447},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fcommand":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fcommand":1442},[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":127,"badge":48,"body":189,"description":1437,"extension":1438,"meta":1439,"navigation":511,"path":128,"seo":1440,"status":13,"stem":129,"__hash__":1441},"docs\u002Fdocs\u002F2.components\u002F23.command.md",{"type":190,"value":191,"toc":1423},"minimark",[192,201,221,238,242,247,272,314,342,346,360,388,392,771,809,813,873,876,884,890,1141,1179,1182,1188,1192,1195,1316,1334,1338,1344,1373,1377,1399,1402,1406,1419],[193,194,197],"playground",{"caption":195,"name":196},"Use the arrow keys or the pointer, then type to filter.","command",[198,199],"demo-command",{"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. Command is new and experimental: its props may still change. The commands on this page are the real ",[209,218,219],{},"GoopCommand",".",[206,222,223,225,226,233,234,237],{},[209,224,219],{}," wraps the same ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Flistbox",[231],"nofollow","reka-ui Listbox"," primitive as shadcn-vue's Command, with the same API and the same filter: every item registers its text, typing hides items and groups that don't match, and ",[209,235,236],{},"GoopCommandEmpty"," shows when nothing does. Swap the imports and you're done.",[239,240,15],"h2",{"id":241},"installation",[243,244,246],"h3",{"id":245},"nuxt","Nuxt",[248,249,254],"pre",{"className":250,"code":251,"language":252,"meta":253,"style":253},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,255,256],{"__ignoreMap":253},[257,258,261,265,269],"span",{"class":259,"line":260},"line",1,[257,262,264],{"class":263},"sScJk","pnpm",[257,266,268],{"class":267},"sZZnC"," add",[257,270,271],{"class":267}," @goopui\u002Fnuxt\n",[248,273,278],{"className":274,"code":275,"filename":276,"language":277,"meta":253,"style":253},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,279,280,296,308],{"__ignoreMap":253},[257,281,282,286,289,292],{"class":259,"line":260},[257,283,285],{"class":284},"szBVR","export",[257,287,288],{"class":284}," default",[257,290,291],{"class":263}," defineNuxtConfig",[257,293,295],{"class":294},"sVt8B","({\n",[257,297,299,302,305],{"class":259,"line":298},2,[257,300,301],{"class":294},"  modules: [",[257,303,304],{"class":267},"'@goopui\u002Fnuxt'",[257,306,307],{"class":294},"],\n",[257,309,311],{"class":259,"line":310},3,[257,312,313],{"class":294},"})\n",[206,315,316,317,320,321,324,325,328,329,328,332,328,335,328,338,341],{},"The module auto-imports every ",[209,318,319],{},"GoopCommand*"," part, adds ",[209,322,323],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[209,326,327],{},"--popover",", ",[209,330,331],{},"--accent",[209,333,334],{},"--input",[209,336,337],{},"--ring",[209,339,340],{},"--radius",").",[243,343,345],{"id":344},"vue","Vue",[248,347,349],{"className":250,"code":348,"language":252,"meta":253,"style":253},"pnpm add @goopui\u002Fvue\n",[209,350,351],{"__ignoreMap":253},[257,352,353,355,357],{"class":259,"line":260},[257,354,264],{"class":263},[257,356,268],{"class":267},[257,358,359],{"class":267}," @goopui\u002Fvue\n",[248,361,366],{"className":362,"code":363,"filename":364,"language":365,"meta":253,"style":253},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[209,367,368,379],{"__ignoreMap":253},[257,369,370,373,376],{"class":259,"line":260},[257,371,372],{"class":284},"@import",[257,374,375],{"class":267}," \"tailwindcss\"",[257,377,378],{"class":294},";\n",[257,380,381,383,386],{"class":259,"line":298},[257,382,372],{"class":284},[257,384,385],{"class":267}," \"@goopui\u002Fvue\u002Fgoop.css\"",[257,387,378],{"class":294},[239,389,391],{"id":390},"usage","Usage",[248,393,396],{"className":394,"code":395,"language":344,"meta":253,"style":253},"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 from '@goopui\u002Fvue'.\nimport {\n  GoopCommand,\n  GoopCommandEmpty,\n  GoopCommandGroup,\n  GoopCommandInput,\n  GoopCommandItem,\n  GoopCommandList,\n  GoopCommandSeparator,\n  GoopCommandShortcut,\n} from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopCommand class=\"max-w-sm rounded-lg border shadow-md\">\n    \u003CGoopCommandInput placeholder=\"Type a command or search...\" \u002F>\n    \u003CGoopCommandList>\n      \u003CGoopCommandEmpty>No results found.\u003C\u002FGoopCommandEmpty>\n      \u003CGoopCommandGroup heading=\"Suggestions\">\n        \u003CGoopCommandItem value=\"calendar\">Calendar\u003C\u002FGoopCommandItem>\n        \u003CGoopCommandItem value=\"emoji\">Search Emoji\u003C\u002FGoopCommandItem>\n      \u003C\u002FGoopCommandGroup>\n      \u003CGoopCommandSeparator \u002F>\n      \u003CGoopCommandGroup heading=\"Settings\">\n        \u003CGoopCommandItem value=\"profile\">\n          Profile\n          \u003CGoopCommandShortcut>⌘P\u003C\u002FGoopCommandShortcut>\n        \u003C\u002FGoopCommandItem>\n      \u003C\u002FGoopCommandGroup>\n    \u003C\u002FGoopCommandList>\n  \u003C\u002FGoopCommand>\n\u003C\u002Ftemplate>\n",[209,397,398,422,428,436,442,448,454,460,466,472,478,484,496,506,513,523,541,561,571,586,604,628,649,659,669,685,701,707,723,733,742,752,762],{"__ignoreMap":253},[257,399,400,403,407,410,413,416,419],{"class":259,"line":260},[257,401,402],{"class":294},"\u003C",[257,404,406],{"class":405},"s9eBZ","script",[257,408,409],{"class":263}," setup",[257,411,412],{"class":263}," lang",[257,414,415],{"class":294},"=",[257,417,418],{"class":267},"\"ts\"",[257,420,421],{"class":294},">\n",[257,423,424],{"class":259,"line":298},[257,425,427],{"class":426},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them from '@goopui\u002Fvue'.\n",[257,429,430,433],{"class":259,"line":310},[257,431,432],{"class":284},"import",[257,434,435],{"class":294}," {\n",[257,437,439],{"class":259,"line":438},4,[257,440,441],{"class":294},"  GoopCommand,\n",[257,443,445],{"class":259,"line":444},5,[257,446,447],{"class":294},"  GoopCommandEmpty,\n",[257,449,451],{"class":259,"line":450},6,[257,452,453],{"class":294},"  GoopCommandGroup,\n",[257,455,457],{"class":259,"line":456},7,[257,458,459],{"class":294},"  GoopCommandInput,\n",[257,461,463],{"class":259,"line":462},8,[257,464,465],{"class":294},"  GoopCommandItem,\n",[257,467,469],{"class":259,"line":468},9,[257,470,471],{"class":294},"  GoopCommandList,\n",[257,473,475],{"class":259,"line":474},10,[257,476,477],{"class":294},"  GoopCommandSeparator,\n",[257,479,481],{"class":259,"line":480},11,[257,482,483],{"class":294},"  GoopCommandShortcut,\n",[257,485,487,490,493],{"class":259,"line":486},12,[257,488,489],{"class":294},"} ",[257,491,492],{"class":284},"from",[257,494,495],{"class":267}," '@goopui\u002Fvue'\n",[257,497,499,502,504],{"class":259,"line":498},13,[257,500,501],{"class":294},"\u003C\u002F",[257,503,406],{"class":405},[257,505,421],{"class":294},[257,507,509],{"class":259,"line":508},14,[257,510,512],{"emptyLinePlaceholder":511},true,"\n",[257,514,516,518,521],{"class":259,"line":515},15,[257,517,402],{"class":294},[257,519,520],{"class":405},"template",[257,522,421],{"class":294},[257,524,526,529,531,534,536,539],{"class":259,"line":525},16,[257,527,528],{"class":294},"  \u003C",[257,530,219],{"class":405},[257,532,533],{"class":263}," class",[257,535,415],{"class":294},[257,537,538],{"class":267},"\"max-w-sm rounded-lg border shadow-md\"",[257,540,421],{"class":294},[257,542,544,547,550,553,555,558],{"class":259,"line":543},17,[257,545,546],{"class":294},"    \u003C",[257,548,549],{"class":405},"GoopCommandInput",[257,551,552],{"class":263}," placeholder",[257,554,415],{"class":294},[257,556,557],{"class":267},"\"Type a command or search...\"",[257,559,560],{"class":294}," \u002F>\n",[257,562,564,566,569],{"class":259,"line":563},18,[257,565,546],{"class":294},[257,567,568],{"class":405},"GoopCommandList",[257,570,421],{"class":294},[257,572,574,577,579,582,584],{"class":259,"line":573},19,[257,575,576],{"class":294},"      \u003C",[257,578,236],{"class":405},[257,580,581],{"class":294},">No results found.\u003C\u002F",[257,583,236],{"class":405},[257,585,421],{"class":294},[257,587,589,591,594,597,599,602],{"class":259,"line":588},20,[257,590,576],{"class":294},[257,592,593],{"class":405},"GoopCommandGroup",[257,595,596],{"class":263}," heading",[257,598,415],{"class":294},[257,600,601],{"class":267},"\"Suggestions\"",[257,603,421],{"class":294},[257,605,607,610,613,616,618,621,624,626],{"class":259,"line":606},21,[257,608,609],{"class":294},"        \u003C",[257,611,612],{"class":405},"GoopCommandItem",[257,614,615],{"class":263}," value",[257,617,415],{"class":294},[257,619,620],{"class":267},"\"calendar\"",[257,622,623],{"class":294},">Calendar\u003C\u002F",[257,625,612],{"class":405},[257,627,421],{"class":294},[257,629,631,633,635,637,639,642,645,647],{"class":259,"line":630},22,[257,632,609],{"class":294},[257,634,612],{"class":405},[257,636,615],{"class":263},[257,638,415],{"class":294},[257,640,641],{"class":267},"\"emoji\"",[257,643,644],{"class":294},">Search Emoji\u003C\u002F",[257,646,612],{"class":405},[257,648,421],{"class":294},[257,650,652,655,657],{"class":259,"line":651},23,[257,653,654],{"class":294},"      \u003C\u002F",[257,656,593],{"class":405},[257,658,421],{"class":294},[257,660,662,664,667],{"class":259,"line":661},24,[257,663,576],{"class":294},[257,665,666],{"class":405},"GoopCommandSeparator",[257,668,560],{"class":294},[257,670,672,674,676,678,680,683],{"class":259,"line":671},25,[257,673,576],{"class":294},[257,675,593],{"class":405},[257,677,596],{"class":263},[257,679,415],{"class":294},[257,681,682],{"class":267},"\"Settings\"",[257,684,421],{"class":294},[257,686,688,690,692,694,696,699],{"class":259,"line":687},26,[257,689,609],{"class":294},[257,691,612],{"class":405},[257,693,615],{"class":263},[257,695,415],{"class":294},[257,697,698],{"class":267},"\"profile\"",[257,700,421],{"class":294},[257,702,704],{"class":259,"line":703},27,[257,705,706],{"class":294},"          Profile\n",[257,708,710,713,716,719,721],{"class":259,"line":709},28,[257,711,712],{"class":294},"          \u003C",[257,714,715],{"class":405},"GoopCommandShortcut",[257,717,718],{"class":294},">⌘P\u003C\u002F",[257,720,715],{"class":405},[257,722,421],{"class":294},[257,724,726,729,731],{"class":259,"line":725},29,[257,727,728],{"class":294},"        \u003C\u002F",[257,730,612],{"class":405},[257,732,421],{"class":294},[257,734,736,738,740],{"class":259,"line":735},30,[257,737,654],{"class":294},[257,739,593],{"class":405},[257,741,421],{"class":294},[257,743,745,748,750],{"class":259,"line":744},31,[257,746,747],{"class":294},"    \u003C\u002F",[257,749,568],{"class":405},[257,751,421],{"class":294},[257,753,755,758,760],{"class":259,"line":754},32,[257,756,757],{"class":294},"  \u003C\u002F",[257,759,219],{"class":405},[257,761,421],{"class":294},[257,763,765,767,769],{"class":259,"line":764},33,[257,766,501],{"class":294},[257,768,520],{"class":405},[257,770,421],{"class":294},[206,772,773,774,328,776,328,778,328,781,328,784,328,787,328,790,328,792,795,796,798,799,801,802,804,805,808],{},"The parts are ",[209,775,219],{},[209,777,62],{},[209,779,780],{},"List",[209,782,783],{},"Empty",[209,785,786],{},"Group",[209,788,789],{},"Item",[209,791,167],{},[209,793,794],{},"Shortcut",", and ",[209,797,98],{},", each prefixed with ",[209,800,219],{},". The goo settings live on ",[209,803,219],{}," (or ",[209,806,807],{},"GoopCommandDialog","), and its parts read them.",[239,810,812],{"id":811},"behavior","Behavior",[814,815,816,838,848,854,864],"ul",{},[817,818,819,823,824,328,827,328,830,833,834,837],"li",{},[820,821,822],"strong",{},"Highlight."," The active item's background is a goo blob. It glides between items as the arrow keys or the pointer move the highlight, stretches with a neck while it travels, and overshoots a little when it lands (",[209,825,826],{},"highlight",[209,828,829],{},"momentum",[209,831,832],{},"wobble","). The pointer moves the highlight too (",[209,835,836],{},"highlightOnHover",", on by default, like cmdk).",[817,839,840,843,844,847],{},[820,841,842],{},"Follow the pointer."," As the pointer moves along an item, the blob's swell leans toward it with a little lag (",[209,845,846],{},"followPointer","). From the keyboard it stays centred.",[817,849,850,853],{},[820,851,852],{},"Filter."," When typing hides the highlighted item, the blob shrinks out and grows in again on the first match.",[817,855,856,859,860,863],{},[820,857,858],{},"Choose."," Choosing an item squishes the blob (",[209,861,862],{},"pop",") and clears the search, like shadcn.",[817,865,866,869,870,341],{},[820,867,868],{},"Search ring."," The search box gets GoopInput's goo focus ring: it flows around the box from where you clicked, ripples as you type, and drains on blur (",[209,871,872],{},"ring",[239,874,98],{"id":875},"dialog",[206,877,878,880,881,883],{},[209,879,807],{}," is shadcn's CommandDialog: a dialog with a screen-reader title and description around a command. It blooms open like ",[227,882,98],{"href":99},": it pools from its center, overshoots every side, and splashes all around, then shrinks back on close.",[885,886,888],"preview",{":controls":887},"false",[198,889],{"set":875},[248,891,893],{"className":394,"code":892,"language":344,"meta":253,"style":253},"\u003Cscript setup lang=\"ts\">\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopButton variant=\"outline\" @click=\"open = true\">Open the palette\u003C\u002FGoopButton>\n  \u003CGoopCommandDialog v-model:open=\"open\">\n    \u003CGoopCommandInput placeholder=\"Type a command or search...\" auto-focus \u002F>\n    \u003CGoopCommandList>\n      \u003CGoopCommandEmpty>No results found.\u003C\u002FGoopCommandEmpty>\n      \u003CGoopCommandGroup heading=\"Suggestions\">\n        \u003CGoopCommandItem value=\"calendar\" @select=\"open = false\">Calendar\u003C\u002FGoopCommandItem>\n      \u003C\u002FGoopCommandGroup>\n    \u003C\u002FGoopCommandList>\n  \u003C\u002FGoopCommandDialog>\n\u003C\u002Ftemplate>\n",[209,894,895,911,934,942,946,954,997,1022,1039,1047,1059,1073,1109,1117,1125,1133],{"__ignoreMap":253},[257,896,897,899,901,903,905,907,909],{"class":259,"line":260},[257,898,402],{"class":294},[257,900,406],{"class":405},[257,902,409],{"class":263},[257,904,412],{"class":263},[257,906,415],{"class":294},[257,908,418],{"class":267},[257,910,421],{"class":294},[257,912,913,916,920,923,926,929,931],{"class":259,"line":298},[257,914,915],{"class":284},"const",[257,917,919],{"class":918},"sj4cs"," open",[257,921,922],{"class":284}," =",[257,924,925],{"class":263}," ref",[257,927,928],{"class":294},"(",[257,930,887],{"class":918},[257,932,933],{"class":294},")\n",[257,935,936,938,940],{"class":259,"line":310},[257,937,501],{"class":294},[257,939,406],{"class":405},[257,941,421],{"class":294},[257,943,944],{"class":259,"line":438},[257,945,512],{"emptyLinePlaceholder":511},[257,947,948,950,952],{"class":259,"line":444},[257,949,402],{"class":294},[257,951,520],{"class":405},[257,953,421],{"class":294},[257,955,956,958,961,964,966,969,972,975,977,980,983,985,988,990,993,995],{"class":259,"line":450},[257,957,528],{"class":294},[257,959,960],{"class":405},"GoopButton",[257,962,963],{"class":263}," variant",[257,965,415],{"class":294},[257,967,968],{"class":267},"\"outline\"",[257,970,971],{"class":294}," @",[257,973,974],{"class":263},"click",[257,976,415],{"class":294},[257,978,979],{"class":267},"\"",[257,981,982],{"class":294},"open ",[257,984,415],{"class":284},[257,986,987],{"class":918}," true",[257,989,979],{"class":267},[257,991,992],{"class":294},">Open the palette\u003C\u002F",[257,994,960],{"class":405},[257,996,421],{"class":294},[257,998,999,1001,1003,1006,1009,1012,1014,1016,1018,1020],{"class":259,"line":456},[257,1000,528],{"class":294},[257,1002,807],{"class":405},[257,1004,1005],{"class":263}," v-model",[257,1007,1008],{"class":294},":",[257,1010,1011],{"class":263},"open",[257,1013,415],{"class":294},[257,1015,979],{"class":267},[257,1017,1011],{"class":294},[257,1019,979],{"class":267},[257,1021,421],{"class":294},[257,1023,1024,1026,1028,1030,1032,1034,1037],{"class":259,"line":462},[257,1025,546],{"class":294},[257,1027,549],{"class":405},[257,1029,552],{"class":263},[257,1031,415],{"class":294},[257,1033,557],{"class":267},[257,1035,1036],{"class":263}," auto-focus",[257,1038,560],{"class":294},[257,1040,1041,1043,1045],{"class":259,"line":468},[257,1042,546],{"class":294},[257,1044,568],{"class":405},[257,1046,421],{"class":294},[257,1048,1049,1051,1053,1055,1057],{"class":259,"line":474},[257,1050,576],{"class":294},[257,1052,236],{"class":405},[257,1054,581],{"class":294},[257,1056,236],{"class":405},[257,1058,421],{"class":294},[257,1060,1061,1063,1065,1067,1069,1071],{"class":259,"line":480},[257,1062,576],{"class":294},[257,1064,593],{"class":405},[257,1066,596],{"class":263},[257,1068,415],{"class":294},[257,1070,601],{"class":267},[257,1072,421],{"class":294},[257,1074,1075,1077,1079,1081,1083,1085,1087,1090,1092,1094,1096,1098,1101,1103,1105,1107],{"class":259,"line":486},[257,1076,609],{"class":294},[257,1078,612],{"class":405},[257,1080,615],{"class":263},[257,1082,415],{"class":294},[257,1084,620],{"class":267},[257,1086,971],{"class":294},[257,1088,1089],{"class":263},"select",[257,1091,415],{"class":294},[257,1093,979],{"class":267},[257,1095,982],{"class":294},[257,1097,415],{"class":284},[257,1099,1100],{"class":918}," false",[257,1102,979],{"class":267},[257,1104,623],{"class":294},[257,1106,612],{"class":405},[257,1108,421],{"class":294},[257,1110,1111,1113,1115],{"class":259,"line":498},[257,1112,654],{"class":294},[257,1114,593],{"class":405},[257,1116,421],{"class":294},[257,1118,1119,1121,1123],{"class":259,"line":508},[257,1120,747],{"class":294},[257,1122,568],{"class":405},[257,1124,421],{"class":294},[257,1126,1127,1129,1131],{"class":259,"line":515},[257,1128,757],{"class":294},[257,1130,807],{"class":405},[257,1132,421],{"class":294},[257,1134,1135,1137,1139],{"class":259,"line":525},[257,1136,501],{"class":294},[257,1138,520],{"class":405},[257,1140,421],{"class":294},[206,1142,1143,1144,328,1147,328,1150,328,1153,1156,1157,328,1160,328,1162,328,1165,795,1168,1171,1172,212,1175,1178],{},"It takes the dialog's bloom props (",[209,1145,1146],{},"openSlosh",[209,1148,1149],{},"openDrips",[209,1151,1152],{},"closeSlosh",[209,1154,1155],{},"overlay",", ...) and the command's toggles below. ",[209,1158,1159],{},"goo",[209,1161,832],{},[209,1163,1164],{},"speed",[209,1166,1167],{},"preset",[209,1169,1170],{},"renderer"," drive both. ",[209,1173,1174],{},"title",[209,1176,1177],{},"description"," default to shadcn's.",[239,1180,131],{"id":1181},"combobox",[206,1183,1184,1185,1187],{},"For a searchable select, see ",[227,1186,131],{"href":132},": the same highlight and ring, in a list that blooms open below the input.",[239,1189,1191],{"id":1190},"turning-parts-off","Turning parts off",[206,1193,1194],{},"Every effect is its own boolean, and they all default to on:",[248,1196,1198],{"className":394,"code":1197,"language":344,"meta":253,"style":253},"\u003CGoopCommand :highlight=\"false\">...\u003C\u002FGoopCommand>        \u003C!-- shadcn's flat highlight -->\n\u003CGoopCommand :ring=\"false\">...\u003C\u002FGoopCommand>             \u003C!-- no goo ring on the search -->\n\u003CGoopCommand :follow-pointer=\"false\">...\u003C\u002FGoopCommand>   \u003C!-- the blob stays centred -->\n\u003CGoopCommandDialog :open-drips=\"false\">...\u003C\u002FGoopCommandDialog>  \u003C!-- no splash -->\n",[209,1199,1200,1230,1258,1287],{"__ignoreMap":253},[257,1201,1202,1204,1206,1209,1211,1213,1215,1217,1219,1222,1224,1227],{"class":259,"line":260},[257,1203,402],{"class":294},[257,1205,219],{"class":405},[257,1207,1208],{"class":294}," :",[257,1210,826],{"class":263},[257,1212,415],{"class":294},[257,1214,979],{"class":267},[257,1216,887],{"class":918},[257,1218,979],{"class":267},[257,1220,1221],{"class":294},">...\u003C\u002F",[257,1223,219],{"class":405},[257,1225,1226],{"class":294},">        ",[257,1228,1229],{"class":426},"\u003C!-- shadcn's flat highlight -->\n",[257,1231,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1255],{"class":259,"line":298},[257,1233,402],{"class":294},[257,1235,219],{"class":405},[257,1237,1208],{"class":294},[257,1239,872],{"class":263},[257,1241,415],{"class":294},[257,1243,979],{"class":267},[257,1245,887],{"class":918},[257,1247,979],{"class":267},[257,1249,1221],{"class":294},[257,1251,219],{"class":405},[257,1253,1254],{"class":294},">             ",[257,1256,1257],{"class":426},"\u003C!-- no goo ring on the search -->\n",[257,1259,1260,1262,1264,1266,1269,1271,1273,1275,1277,1279,1281,1284],{"class":259,"line":310},[257,1261,402],{"class":294},[257,1263,219],{"class":405},[257,1265,1208],{"class":294},[257,1267,1268],{"class":263},"follow-pointer",[257,1270,415],{"class":294},[257,1272,979],{"class":267},[257,1274,887],{"class":918},[257,1276,979],{"class":267},[257,1278,1221],{"class":294},[257,1280,219],{"class":405},[257,1282,1283],{"class":294},">   ",[257,1285,1286],{"class":426},"\u003C!-- the blob stays centred -->\n",[257,1288,1289,1291,1293,1295,1298,1300,1302,1304,1306,1308,1310,1313],{"class":259,"line":438},[257,1290,402],{"class":294},[257,1292,807],{"class":405},[257,1294,1208],{"class":294},[257,1296,1297],{"class":263},"open-drips",[257,1299,415],{"class":294},[257,1301,979],{"class":267},[257,1303,887],{"class":918},[257,1305,979],{"class":267},[257,1307,1221],{"class":294},[257,1309,807],{"class":405},[257,1311,1312],{"class":294},">  ",[257,1314,1315],{"class":426},"\u003C!-- no splash -->\n",[206,1317,1318,1320,1321,328,1324,328,1327,1330,1331,1333],{},[209,1319,549],{}," also takes GoopInput's ring props (",[209,1322,1323],{},"flow",[209,1325,1326],{},"ripple",[209,1328,1329],{},"drain",", ...) and its own ",[209,1332,1159],{}," switch.",[239,1335,1337],{"id":1336},"plain-shadcn","Plain shadcn",[206,1339,1340,1343],{},[209,1341,1342],{},":goo=\"false\""," renders exactly shadcn's Command:",[248,1345,1347],{"className":394,"code":1346,"language":344,"meta":253,"style":253},"\u003CGoopCommand :goo=\"false\">...\u003C\u002FGoopCommand>\n",[209,1348,1349],{"__ignoreMap":253},[257,1350,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371],{"class":259,"line":260},[257,1352,402],{"class":294},[257,1354,219],{"class":405},[257,1356,1208],{"class":294},[257,1358,1159],{"class":263},[257,1360,415],{"class":294},[257,1362,979],{"class":267},[257,1364,887],{"class":918},[257,1366,979],{"class":267},[257,1368,1221],{"class":294},[257,1370,219],{"class":405},[257,1372,421],{"class":294},[239,1374,1376],{"id":1375},"props","Props",[206,1378,1379,1381,1382,1385,1386,328,1389,328,1392,1394,1395,1398],{},[209,1380,219],{}," takes reka-ui's ",[209,1383,1384],{},"ListboxRoot"," props (",[209,1387,1388],{},"modelValue",[209,1390,1391],{},"multiple",[209,1393,836],{},", ...), ",[209,1396,1397],{},"class",", and these goo props. The other parts take shadcn-vue's props.",[1400,1401],"component-props",{"name":196},[239,1403,1405],{"id":1404},"accessibility","Accessibility",[206,1407,1408,1409,1412,1413,1416,1417,220],{},"Keyboard navigation, ",[209,1410,1411],{},"aria-activedescendant"," on the search box, and the listbox roles come from reka-ui. The highlight blob and the ring are ",[209,1414,1415],{},"aria-hidden"," and can't be clicked, and the items are never filtered. Under reduced motion the highlight snaps between items with no pop, the ring is static, and the dialog opens plainly. See ",[227,1418,23],{"href":24},[1420,1421,1422],"style",{},"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 .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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":253,"searchDepth":310,"depth":310,"links":1424},[1425,1429,1430,1431,1432,1433,1434,1435,1436],{"id":241,"depth":298,"text":15,"children":1426},[1427,1428],{"id":245,"depth":310,"text":246},{"id":344,"depth":310,"text":345},{"id":390,"depth":298,"text":391},{"id":811,"depth":298,"text":812},{"id":875,"depth":298,"text":98},{"id":1181,"depth":298,"text":131},{"id":1190,"depth":298,"text":1191},{"id":1336,"depth":298,"text":1337},{"id":1375,"depth":298,"text":1376},{"id":1404,"depth":298,"text":1405},"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.","md",{},{"title":127,"description":1437},"u5qKmAgSYheKGewKwJQfBdAEkTCC63i72c6t9cNyvas",[1443,1445],{"title":122,"path":123,"stem":124,"description":1444,"children":-1},"Ambient goo for backgrounds and decoration. It's also goopUI's performance stress test.",{"title":131,"path":132,"stem":133,"description":1446,"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.",1793670387002]