[{"data":1,"prerenderedAt":1393},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Faccordion":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Faccordion":1388},[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":94,"badge":48,"body":189,"description":1383,"extension":1384,"meta":1385,"navigation":501,"path":95,"seo":1386,"status":13,"stem":96,"__hash__":1387},"docs\u002Fdocs\u002F2.components\u002F15.accordion.md",{"type":190,"value":191,"toc":1369},"minimark",[192,201,221,253,257,262,287,329,356,360,374,402,406,681,697,701,760,764,774,780,871,887,890,898,903,1188,1197,1201,1207,1267,1271,1289,1293,1343,1346,1350,1365],[193,194,197],"playground",{"caption":195,"name":196},"Open another row. The old one drains while the new one floods.","accordion",[198,199],"demo-accordion",{"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. Accordion and Collapsible are new and experimental: their props may still change. The accordions on this page are the real ",[209,218,219],{},"GoopAccordion",".",[206,222,223,225,226,233,234,237,238,241,242,245,246,252],{},[209,224,219],{}," wraps the same ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Faccordion",[231],"nofollow","reka-ui Accordion"," primitive as shadcn-vue's Accordion, with the same API. Keyboard navigation, ",[209,235,236],{},"type=\"single\""," \u002F ",[209,239,240],{},"\"multiple\"",", ",[209,243,244],{},"collapsible",", and ARIA work the same. Swap the imports and you're done. ",[227,247,249],{"href":248},"#collapsible",[209,250,251],{},"GoopCollapsible"," is on this page too: it's the same goo on a single trigger.",[254,255,15],"h2",{"id":256},"installation",[258,259,261],"h3",{"id":260},"nuxt","Nuxt",[263,264,269],"pre",{"className":265,"code":266,"language":267,"meta":268,"style":268},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,270,271],{"__ignoreMap":268},[272,273,276,280,284],"span",{"class":274,"line":275},"line",1,[272,277,279],{"class":278},"sScJk","pnpm",[272,281,283],{"class":282},"sZZnC"," add",[272,285,286],{"class":282}," @goopui\u002Fnuxt\n",[263,288,293],{"className":289,"code":290,"filename":291,"language":292,"meta":268,"style":268},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,294,295,311,323],{"__ignoreMap":268},[272,296,297,301,304,307],{"class":274,"line":275},[272,298,300],{"class":299},"szBVR","export",[272,302,303],{"class":299}," default",[272,305,306],{"class":278}," defineNuxtConfig",[272,308,310],{"class":309},"sVt8B","({\n",[272,312,314,317,320],{"class":274,"line":313},2,[272,315,316],{"class":309},"  modules: [",[272,318,319],{"class":282},"'@goopui\u002Fnuxt'",[272,321,322],{"class":309},"],\n",[272,324,326],{"class":274,"line":325},3,[272,327,328],{"class":309},"})\n",[206,330,331,332,212,335,338,339,342,343,241,346,241,349,241,352,355],{},"The module auto-imports every ",[209,333,334],{},"GoopAccordion*",[209,336,337],{},"GoopCollapsible*"," part, adds ",[209,340,341],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[209,344,345],{},"--primary",[209,347,348],{},"--primary-foreground",[209,350,351],{},"--muted-foreground",[209,353,354],{},"--ring",").",[258,357,359],{"id":358},"vue","Vue",[263,361,363],{"className":265,"code":362,"language":267,"meta":268,"style":268},"pnpm add @goopui\u002Fvue\n",[209,364,365],{"__ignoreMap":268},[272,366,367,369,371],{"class":274,"line":275},[272,368,279],{"class":278},[272,370,283],{"class":282},[272,372,373],{"class":282}," @goopui\u002Fvue\n",[263,375,380],{"className":376,"code":377,"filename":378,"language":379,"meta":268,"style":268},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[209,381,382,393],{"__ignoreMap":268},[272,383,384,387,390],{"class":274,"line":275},[272,385,386],{"class":299},"@import",[272,388,389],{"class":282}," \"tailwindcss\"",[272,391,392],{"class":309},";\n",[272,394,395,397,400],{"class":274,"line":313},[272,396,386],{"class":299},[272,398,399],{"class":282}," \"@goopui\u002Fvue\u002Fgoop.css\"",[272,401,392],{"class":309},[254,403,405],{"id":404},"usage","Usage",[263,407,410],{"className":408,"code":409,"language":358,"meta":268,"style":268},"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  GoopAccordion,\n  GoopAccordionContent,\n  GoopAccordionItem,\n  GoopAccordionTrigger,\n} from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopAccordion type=\"single\" collapsible default-value=\"what\" class=\"w-full\">\n    \u003CGoopAccordionItem value=\"what\">\n      \u003CGoopAccordionTrigger>What is goopUI?\u003C\u002FGoopAccordionTrigger>\n      \u003CGoopAccordionContent>shadcn-vue components with gooey, dripping motion.\u003C\u002FGoopAccordionContent>\n    \u003C\u002FGoopAccordionItem>\n    \u003CGoopAccordionItem value=\"motion\">\n      \u003CGoopAccordionTrigger>Does it respect reduced motion?\u003C\u002FGoopAccordionTrigger>\n      \u003CGoopAccordionContent>Yes.\u003C\u002FGoopAccordionContent>\n    \u003C\u002FGoopAccordionItem>\n  \u003C\u002FGoopAccordion>\n\u003C\u002Ftemplate>\n",[209,411,412,436,442,450,456,462,468,474,486,496,503,513,550,568,584,599,609,625,639,653,662,672],{"__ignoreMap":268},[272,413,414,417,421,424,427,430,433],{"class":274,"line":275},[272,415,416],{"class":309},"\u003C",[272,418,420],{"class":419},"s9eBZ","script",[272,422,423],{"class":278}," setup",[272,425,426],{"class":278}," lang",[272,428,429],{"class":309},"=",[272,431,432],{"class":282},"\"ts\"",[272,434,435],{"class":309},">\n",[272,437,438],{"class":274,"line":313},[272,439,441],{"class":440},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[272,443,444,447],{"class":274,"line":325},[272,445,446],{"class":299},"import",[272,448,449],{"class":309}," {\n",[272,451,453],{"class":274,"line":452},4,[272,454,455],{"class":309},"  GoopAccordion,\n",[272,457,459],{"class":274,"line":458},5,[272,460,461],{"class":309},"  GoopAccordionContent,\n",[272,463,465],{"class":274,"line":464},6,[272,466,467],{"class":309},"  GoopAccordionItem,\n",[272,469,471],{"class":274,"line":470},7,[272,472,473],{"class":309},"  GoopAccordionTrigger,\n",[272,475,477,480,483],{"class":274,"line":476},8,[272,478,479],{"class":309},"} ",[272,481,482],{"class":299},"from",[272,484,485],{"class":282}," '@goopui\u002Fvue'\n",[272,487,489,492,494],{"class":274,"line":488},9,[272,490,491],{"class":309},"\u003C\u002F",[272,493,420],{"class":419},[272,495,435],{"class":309},[272,497,499],{"class":274,"line":498},10,[272,500,502],{"emptyLinePlaceholder":501},true,"\n",[272,504,506,508,511],{"class":274,"line":505},11,[272,507,416],{"class":309},[272,509,510],{"class":419},"template",[272,512,435],{"class":309},[272,514,516,519,521,524,526,529,532,535,537,540,543,545,548],{"class":274,"line":515},12,[272,517,518],{"class":309},"  \u003C",[272,520,219],{"class":419},[272,522,523],{"class":278}," type",[272,525,429],{"class":309},[272,527,528],{"class":282},"\"single\"",[272,530,531],{"class":278}," collapsible",[272,533,534],{"class":278}," default-value",[272,536,429],{"class":309},[272,538,539],{"class":282},"\"what\"",[272,541,542],{"class":278}," class",[272,544,429],{"class":309},[272,546,547],{"class":282},"\"w-full\"",[272,549,435],{"class":309},[272,551,553,556,559,562,564,566],{"class":274,"line":552},13,[272,554,555],{"class":309},"    \u003C",[272,557,558],{"class":419},"GoopAccordionItem",[272,560,561],{"class":278}," value",[272,563,429],{"class":309},[272,565,539],{"class":282},[272,567,435],{"class":309},[272,569,571,574,577,580,582],{"class":274,"line":570},14,[272,572,573],{"class":309},"      \u003C",[272,575,576],{"class":419},"GoopAccordionTrigger",[272,578,579],{"class":309},">What is goopUI?\u003C\u002F",[272,581,576],{"class":419},[272,583,435],{"class":309},[272,585,587,589,592,595,597],{"class":274,"line":586},15,[272,588,573],{"class":309},[272,590,591],{"class":419},"GoopAccordionContent",[272,593,594],{"class":309},">shadcn-vue components with gooey, dripping motion.\u003C\u002F",[272,596,591],{"class":419},[272,598,435],{"class":309},[272,600,602,605,607],{"class":274,"line":601},16,[272,603,604],{"class":309},"    \u003C\u002F",[272,606,558],{"class":419},[272,608,435],{"class":309},[272,610,612,614,616,618,620,623],{"class":274,"line":611},17,[272,613,555],{"class":309},[272,615,558],{"class":419},[272,617,561],{"class":278},[272,619,429],{"class":309},[272,621,622],{"class":282},"\"motion\"",[272,624,435],{"class":309},[272,626,628,630,632,635,637],{"class":274,"line":627},18,[272,629,573],{"class":309},[272,631,576],{"class":419},[272,633,634],{"class":309},">Does it respect reduced motion?\u003C\u002F",[272,636,576],{"class":419},[272,638,435],{"class":309},[272,640,642,644,646,649,651],{"class":274,"line":641},19,[272,643,573],{"class":309},[272,645,591],{"class":419},[272,647,648],{"class":309},">Yes.\u003C\u002F",[272,650,591],{"class":419},[272,652,435],{"class":309},[272,654,656,658,660],{"class":274,"line":655},20,[272,657,604],{"class":309},[272,659,558],{"class":419},[272,661,435],{"class":309},[272,663,665,668,670],{"class":274,"line":664},21,[272,666,667],{"class":309},"  \u003C\u002F",[272,669,219],{"class":419},[272,671,435],{"class":309},[272,673,675,677,679],{"class":274,"line":674},22,[272,676,491],{"class":309},[272,678,510],{"class":419},[272,680,435],{"class":309},[206,682,683,684,241,686,241,688,690,691,693,694,696],{},"The parts are ",[209,685,219],{},[209,687,558],{},[209,689,576],{},", and ",[209,692,591],{},". The goo props go on ",[209,695,219],{},", and every item follows them.",[254,698,700],{"id":699},"behavior","Behavior",[702,703,704,722,732,738,744,754],"ul",{},[705,706,707,711,712,241,715,241,718,721],"li",{},[708,709,710],"strong",{},"Flood."," Opening a row floods its trigger with goo from the click point (its center when you open it from the keyboard). The front crests against the walls, the row wobbles once it's full, and a few droplets splash off its top edge (",[209,713,714],{},"flood",[209,716,717],{},"wobble",[209,719,720],{},"droplets","). It's the same fill as the Toggle's.",[705,723,724,727,728,731],{},[708,725,726],{},"Jelly content."," The content opens on a spring at the same time: it overshoots, then settles (",[209,729,730],{},"jelly","). It closes on a short spring with no overshoot.",[705,733,734,737],{},[708,735,736],{},"Drain."," Closing a row drains the goo back into the click point. In a single accordion, the old row drains while the new one floods.",[705,739,740,743],{},[708,741,742],{},"At rest"," nothing animates. The open row just stays filled.",[705,745,746,749,750,753],{},[708,747,748],{},"Content stays sharp."," The goo is one ",[209,751,752],{},"aria-hidden"," layer inside the trigger. Once the row is half full, the trigger's text and chevron switch to the goo's foreground color.",[705,755,756,759],{},[708,757,758],{},"Layout"," is shadcn's exactly. Closed rows look exactly like shadcn's.",[254,761,763],{"id":762},"tuning","Tuning",[206,765,766,767,241,770,773],{},"Every effect takes ",[209,768,769],{},"true",[209,771,772],{},"false",", or a strength from 0 to 2:",[775,776,777],"preview",{":controls":772},[198,778],{"set":779},"multiple",[263,781,783],{"className":408,"code":782,"language":358,"meta":268,"style":268},"\u003CGoopAccordion type=\"multiple\" preset=\"wild\" :droplets=\"2\">...\u003C\u002FGoopAccordion>\n\u003CGoopAccordion type=\"single\" :flood=\"false\" :jelly=\"0.5\">...\u003C\u002FGoopAccordion>\n",[209,784,785,828],{"__ignoreMap":268},[272,786,787,789,791,793,795,797,800,802,805,808,810,812,815,819,821,824,826],{"class":274,"line":275},[272,788,416],{"class":309},[272,790,219],{"class":419},[272,792,523],{"class":278},[272,794,429],{"class":309},[272,796,240],{"class":282},[272,798,799],{"class":278}," preset",[272,801,429],{"class":309},[272,803,804],{"class":282},"\"wild\"",[272,806,807],{"class":309}," :",[272,809,720],{"class":278},[272,811,429],{"class":309},[272,813,814],{"class":282},"\"",[272,816,818],{"class":817},"sj4cs","2",[272,820,814],{"class":282},[272,822,823],{"class":309},">...\u003C\u002F",[272,825,219],{"class":419},[272,827,435],{"class":309},[272,829,830,832,834,836,838,840,842,844,846,848,850,852,854,856,858,860,863,865,867,869],{"class":274,"line":313},[272,831,416],{"class":309},[272,833,219],{"class":419},[272,835,523],{"class":278},[272,837,429],{"class":309},[272,839,528],{"class":282},[272,841,807],{"class":309},[272,843,714],{"class":278},[272,845,429],{"class":309},[272,847,814],{"class":282},[272,849,772],{"class":817},[272,851,814],{"class":282},[272,853,807],{"class":309},[272,855,730],{"class":278},[272,857,429],{"class":309},[272,859,814],{"class":282},[272,861,862],{"class":817},"0.5",[272,864,814],{"class":282},[272,866,823],{"class":309},[272,868,219],{"class":419},[272,870,435],{"class":309},[206,872,873,874,877,878,880,881,877,884,886],{},"The goo paints with ",[209,875,876],{},"--goop-accordion-fill"," (default ",[209,879,345],{},"), and the flooded trigger's text uses ",[209,882,883],{},"--goop-accordion-text",[209,885,348],{},"). Set them on the accordion, or any parent, to recolor it.",[254,888,889],{"id":244},"Collapsible",[206,891,892,894,895,897],{},[209,893,251],{}," wraps reka-ui's Collapsible, like shadcn-vue's. It takes the same goo props as ",[209,896,219],{},": its trigger floods while it's open, and the content springs open.",[775,899,901],{":controls":772,"caption":900},"The trigger floods while it's open.",[198,902],{"set":244},[263,904,906],{"className":408,"code":905,"language":358,"meta":268,"style":268},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { GoopButton, GoopCollapsible, GoopCollapsibleContent, GoopCollapsibleTrigger } from '@goopui\u002Fvue'\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopCollapsible v-model:open=\"open\" class=\"flex flex-col gap-2\">\n    \u003Cdiv class=\"flex items-center justify-between\">\n      \u003Cspan>3 starred repositories\u003C\u002Fspan>\n      \u003CGoopCollapsibleTrigger as-child>\n        \u003CGoopButton variant=\"outline\" size=\"sm\">{{ open ? 'Hide' : 'Show' }}\u003C\u002FGoopButton>\n      \u003C\u002FGoopCollapsibleTrigger>\n    \u003C\u002Fdiv>\n    \u003Cdiv>goopui\u002Fcore\u003C\u002Fdiv>\n    \u003CGoopCollapsibleContent class=\"flex flex-col gap-2\">\n      \u003Cdiv>goopui\u002Fvue\u003C\u002Fdiv>\n      \u003Cdiv>goopui\u002Fnuxt\u003C\u002Fdiv>\n    \u003C\u002FGoopCollapsibleContent>\n  \u003C\u002FGoopCollapsible>\n\u003C\u002Ftemplate>\n",[209,907,908,924,936,947,969,977,981,989,1021,1037,1050,1062,1093,1102,1110,1123,1138,1151,1164,1172,1180],{"__ignoreMap":268},[272,909,910,912,914,916,918,920,922],{"class":274,"line":275},[272,911,416],{"class":309},[272,913,420],{"class":419},[272,915,423],{"class":278},[272,917,426],{"class":278},[272,919,429],{"class":309},[272,921,432],{"class":282},[272,923,435],{"class":309},[272,925,926,928,931,933],{"class":274,"line":313},[272,927,446],{"class":299},[272,929,930],{"class":309}," { ref } ",[272,932,482],{"class":299},[272,934,935],{"class":282}," 'vue'\n",[272,937,938,940,943,945],{"class":274,"line":325},[272,939,446],{"class":299},[272,941,942],{"class":309}," { GoopButton, GoopCollapsible, GoopCollapsibleContent, GoopCollapsibleTrigger } ",[272,944,482],{"class":299},[272,946,485],{"class":282},[272,948,949,952,955,958,961,964,966],{"class":274,"line":452},[272,950,951],{"class":299},"const",[272,953,954],{"class":817}," open",[272,956,957],{"class":299}," =",[272,959,960],{"class":278}," ref",[272,962,963],{"class":309},"(",[272,965,772],{"class":817},[272,967,968],{"class":309},")\n",[272,970,971,973,975],{"class":274,"line":458},[272,972,491],{"class":309},[272,974,420],{"class":419},[272,976,435],{"class":309},[272,978,979],{"class":274,"line":464},[272,980,502],{"emptyLinePlaceholder":501},[272,982,983,985,987],{"class":274,"line":470},[272,984,416],{"class":309},[272,986,510],{"class":419},[272,988,435],{"class":309},[272,990,991,993,995,998,1001,1004,1006,1008,1010,1012,1014,1016,1019],{"class":274,"line":476},[272,992,518],{"class":309},[272,994,251],{"class":419},[272,996,997],{"class":278}," v-model",[272,999,1000],{"class":309},":",[272,1002,1003],{"class":278},"open",[272,1005,429],{"class":309},[272,1007,814],{"class":282},[272,1009,1003],{"class":309},[272,1011,814],{"class":282},[272,1013,542],{"class":278},[272,1015,429],{"class":309},[272,1017,1018],{"class":282},"\"flex flex-col gap-2\"",[272,1020,435],{"class":309},[272,1022,1023,1025,1028,1030,1032,1035],{"class":274,"line":488},[272,1024,555],{"class":309},[272,1026,1027],{"class":419},"div",[272,1029,542],{"class":278},[272,1031,429],{"class":309},[272,1033,1034],{"class":282},"\"flex items-center justify-between\"",[272,1036,435],{"class":309},[272,1038,1039,1041,1043,1046,1048],{"class":274,"line":498},[272,1040,573],{"class":309},[272,1042,272],{"class":419},[272,1044,1045],{"class":309},">3 starred repositories\u003C\u002F",[272,1047,272],{"class":419},[272,1049,435],{"class":309},[272,1051,1052,1054,1057,1060],{"class":274,"line":505},[272,1053,573],{"class":309},[272,1055,1056],{"class":419},"GoopCollapsibleTrigger",[272,1058,1059],{"class":278}," as-child",[272,1061,435],{"class":309},[272,1063,1064,1067,1070,1073,1075,1078,1081,1083,1086,1089,1091],{"class":274,"line":515},[272,1065,1066],{"class":309},"        \u003C",[272,1068,1069],{"class":419},"GoopButton",[272,1071,1072],{"class":278}," variant",[272,1074,429],{"class":309},[272,1076,1077],{"class":282},"\"outline\"",[272,1079,1080],{"class":278}," size",[272,1082,429],{"class":309},[272,1084,1085],{"class":282},"\"sm\"",[272,1087,1088],{"class":309},">{{ open ? 'Hide' : 'Show' }}\u003C\u002F",[272,1090,1069],{"class":419},[272,1092,435],{"class":309},[272,1094,1095,1098,1100],{"class":274,"line":552},[272,1096,1097],{"class":309},"      \u003C\u002F",[272,1099,1056],{"class":419},[272,1101,435],{"class":309},[272,1103,1104,1106,1108],{"class":274,"line":570},[272,1105,604],{"class":309},[272,1107,1027],{"class":419},[272,1109,435],{"class":309},[272,1111,1112,1114,1116,1119,1121],{"class":274,"line":586},[272,1113,555],{"class":309},[272,1115,1027],{"class":419},[272,1117,1118],{"class":309},">goopui\u002Fcore\u003C\u002F",[272,1120,1027],{"class":419},[272,1122,435],{"class":309},[272,1124,1125,1127,1130,1132,1134,1136],{"class":274,"line":601},[272,1126,555],{"class":309},[272,1128,1129],{"class":419},"GoopCollapsibleContent",[272,1131,542],{"class":278},[272,1133,429],{"class":309},[272,1135,1018],{"class":282},[272,1137,435],{"class":309},[272,1139,1140,1142,1144,1147,1149],{"class":274,"line":611},[272,1141,573],{"class":309},[272,1143,1027],{"class":419},[272,1145,1146],{"class":309},">goopui\u002Fvue\u003C\u002F",[272,1148,1027],{"class":419},[272,1150,435],{"class":309},[272,1152,1153,1155,1157,1160,1162],{"class":274,"line":627},[272,1154,573],{"class":309},[272,1156,1027],{"class":419},[272,1158,1159],{"class":309},">goopui\u002Fnuxt\u003C\u002F",[272,1161,1027],{"class":419},[272,1163,435],{"class":309},[272,1165,1166,1168,1170],{"class":274,"line":641},[272,1167,604],{"class":309},[272,1169,1129],{"class":419},[272,1171,435],{"class":309},[272,1173,1174,1176,1178],{"class":274,"line":655},[272,1175,667],{"class":309},[272,1177,251],{"class":419},[272,1179,435],{"class":309},[272,1181,1182,1184,1186],{"class":274,"line":664},[272,1183,491],{"class":309},[272,1185,510],{"class":419},[272,1187,435],{"class":309},[206,1189,683,1190,241,1192,690,1194,1196],{},[209,1191,251],{},[209,1193,1056],{},[209,1195,1129],{},". Like shadcn, the trigger and content are unstyled.",[254,1198,1200],{"id":1199},"plain-shadcn","Plain shadcn",[206,1202,1203,1206],{},[209,1204,1205],{},":goo=\"false\""," renders exactly shadcn's Accordion (or Collapsible), with its own height animation:",[263,1208,1210],{"className":408,"code":1209,"language":358,"meta":268,"style":268},"\u003CGoopAccordion type=\"single\" :goo=\"false\">...\u003C\u002FGoopAccordion>\n\u003CGoopCollapsible :goo=\"false\">...\u003C\u002FGoopCollapsible>\n",[209,1211,1212,1243],{"__ignoreMap":268},[272,1213,1214,1216,1218,1220,1222,1224,1226,1229,1231,1233,1235,1237,1239,1241],{"class":274,"line":275},[272,1215,416],{"class":309},[272,1217,219],{"class":419},[272,1219,523],{"class":278},[272,1221,429],{"class":309},[272,1223,528],{"class":282},[272,1225,807],{"class":309},[272,1227,1228],{"class":278},"goo",[272,1230,429],{"class":309},[272,1232,814],{"class":282},[272,1234,772],{"class":817},[272,1236,814],{"class":282},[272,1238,823],{"class":309},[272,1240,219],{"class":419},[272,1242,435],{"class":309},[272,1244,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265],{"class":274,"line":313},[272,1246,416],{"class":309},[272,1248,251],{"class":419},[272,1250,807],{"class":309},[272,1252,1228],{"class":278},[272,1254,429],{"class":309},[272,1256,814],{"class":282},[272,1258,772],{"class":817},[272,1260,814],{"class":282},[272,1262,823],{"class":309},[272,1264,251],{"class":419},[272,1266,435],{"class":309},[254,1268,1270],{"id":1269},"driving-it-from-code","Driving it from code",[206,1272,1273,212,1275,1277,1278,1281,1282,1285,1286,1288],{},[209,1274,558],{},[209,1276,251],{}," expose their engine handle as ",[209,1279,1280],{},"handle"," (",[209,1283,1284],{},"null"," before they mount, or when ",[209,1287,1228],{}," is off).",[254,1290,1292],{"id":1291},"props","Props",[206,1294,1295,1297,1298,1301,1302,241,1305,241,1307,241,1310,241,1313,241,1316,1319,1320,1297,1322,1301,1325,241,1327,241,1330,241,1332,1335,1336,1339,1340,1342],{},[209,1296,219],{}," takes reka-ui's ",[209,1299,1300],{},"AccordionRoot"," props (",[209,1303,1304],{},"type",[209,1306,244],{},[209,1308,1309],{},"defaultValue",[209,1311,1312],{},"modelValue",[209,1314,1315],{},"disabled",[209,1317,1318],{},"orientation",", and the rest). ",[209,1321,251],{},[209,1323,1324],{},"CollapsibleRoot",[209,1326,1003],{},[209,1328,1329],{},"defaultOpen",[209,1331,1315],{},[209,1333,1334],{},"unmountOnHide",") and ",[209,1337,1338],{},"class",". The item, trigger, and content parts take shadcn-vue's props and ",[209,1341,1338],{},". Both roots take these goo props:",[1344,1345],"component-props",{"name":196},[254,1347,1349],{"id":1348},"accessibility","Accessibility",[206,1351,1352,1353,241,1356,1359,1360,1362,1363,220],{},"Keyboard navigation, focus handling, and ARIA attributes (",[209,1354,1355],{},"aria-expanded",[209,1357,1358],{},"aria-controls",", the region roles) come from reka-ui. The goo layer is ",[209,1361,752],{}," and can't be clicked, and the text is never filtered. Under reduced motion, the open row is a still fill with no flood, wobble, or droplets, and the content opens with a plain height animation. See ",[227,1364,23],{"href":24},[1366,1367,1368],"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":268,"searchDepth":325,"depth":325,"links":1370},[1371,1375,1376,1377,1378,1379,1380,1381,1382],{"id":256,"depth":313,"text":15,"children":1372},[1373,1374],{"id":260,"depth":325,"text":261},{"id":358,"depth":325,"text":359},{"id":404,"depth":313,"text":405},{"id":699,"depth":313,"text":700},{"id":762,"depth":313,"text":763},{"id":244,"depth":313,"text":889},{"id":1199,"depth":313,"text":1200},{"id":1269,"depth":313,"text":1270},{"id":1291,"depth":313,"text":1292},{"id":1348,"depth":313,"text":1349},"shadcn's Accordion and Collapsible with goo. The open row floods with goo from where you clicked, and the content springs open.","md",{},{"title":94,"description":1383},"WLUPu1ZOCNIabxaMlQz7V6kyErNprSQxv1Q8gvotuRg",[1389,1391],{"title":90,"path":91,"stem":92,"description":1390,"children":-1},"shadcn's Tabs with goo. The active tab is a blob that slides between triggers and lands with a jelly overshoot.",{"title":98,"path":99,"stem":100,"description":1392,"children":-1},"shadcn's Dialog with goo. The panel blooms out of its own center, overshoots every side, and splashes.",1793670387241]