[{"data":1,"prerenderedAt":1333},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fsidebar":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fsidebar":1328},[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":175,"badge":48,"body":189,"description":1323,"extension":1324,"meta":1325,"navigation":441,"path":176,"seo":1326,"status":13,"stem":177,"__hash__":1327},"docs\u002Fdocs\u002F2.components\u002F35.sidebar.md",{"type":190,"value":191,"toc":1312},"minimark",[192,200,220,244,248,253,278,320,341,345,359,387,391,948,1033,1037,1121,1125,1131,1242,1246,1292,1295,1299,1308],[193,194,197],"playground",{"caption":195,"name":196},"Hover the items, open Documentation, then press Ctrl\u002FCmd+B, the trigger or the replay button to collapse it.","sidebar",[198,199],"demo-sidebar",{},[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. Sidebar is new and experimental: its props may still change. The sidebar on this page is the real ",[208,217,218],{},"GoopSidebar",".",[205,221,222,224,225,228,229,232,233,236,237,236,240,243],{},[208,223,218],{}," is shadcn-vue's Sidebar with the same parts and API: ",[208,226,227],{},"useSidebar()",", the ",[208,230,231],{},"sidebar_state"," cookie, the Ctrl\u002FCmd+B shortcut, ",[208,234,235],{},"side",", ",[208,238,239],{},"variant",[208,241,242],{},"collapsible",", and a sheet below 768px. Swap the imports and you're done.",[245,246,15],"h2",{"id":247},"installation",[249,250,252],"h3",{"id":251},"nuxt","Nuxt",[254,255,260],"pre",{"className":256,"code":257,"language":258,"meta":259,"style":259},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[208,261,262],{"__ignoreMap":259},[263,264,267,271,275],"span",{"class":265,"line":266},"line",1,[263,268,270],{"class":269},"sScJk","pnpm",[263,272,274],{"class":273},"sZZnC"," add",[263,276,277],{"class":273}," @goopui\u002Fnuxt\n",[254,279,284],{"className":280,"code":281,"filename":282,"language":283,"meta":259,"style":259},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[208,285,286,302,314],{"__ignoreMap":259},[263,287,288,292,295,298],{"class":265,"line":266},[263,289,291],{"class":290},"szBVR","export",[263,293,294],{"class":290}," default",[263,296,297],{"class":269}," defineNuxtConfig",[263,299,301],{"class":300},"sVt8B","({\n",[263,303,305,308,311],{"class":265,"line":304},2,[263,306,307],{"class":300},"  modules: [",[263,309,310],{"class":273},"'@goopui\u002Fnuxt'",[263,312,313],{"class":300},"],\n",[263,315,317],{"class":265,"line":316},3,[263,318,319],{"class":300},"})\n",[205,321,322,323,326,327,330,331,236,334,236,337,340],{},"The module auto-imports every ",[208,324,325],{},"GoopSidebar*"," part, adds ",[208,328,329],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and shadcn's sidebar tokens (",[208,332,333],{},"--sidebar",[208,335,336],{},"--sidebar-accent",[208,338,339],{},"--sidebar-border",", ...).",[249,342,344],{"id":343},"vue","Vue",[254,346,348],{"className":256,"code":347,"language":258,"meta":259,"style":259},"pnpm add @goopui\u002Fvue\n",[208,349,350],{"__ignoreMap":259},[263,351,352,354,356],{"class":265,"line":266},[263,353,270],{"class":269},[263,355,274],{"class":273},[263,357,358],{"class":273}," @goopui\u002Fvue\n",[254,360,365],{"className":361,"code":362,"filename":363,"language":364,"meta":259,"style":259},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[208,366,367,378],{"__ignoreMap":259},[263,368,369,372,375],{"class":265,"line":266},[263,370,371],{"class":290},"@import",[263,373,374],{"class":273}," \"tailwindcss\"",[263,376,377],{"class":300},";\n",[263,379,380,382,385],{"class":265,"line":304},[263,381,371],{"class":290},[263,383,384],{"class":273}," \"@goopui\u002Fvue\u002Fgoop.css\"",[263,386,377],{"class":300},[245,388,390],{"id":389},"usage","Usage",[254,392,395],{"className":393,"code":394,"language":343,"meta":259,"style":259},"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'.\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopSidebarProvider>\n    \u003CGoopSidebar collapsible=\"icon\">\n      \u003CGoopSidebarHeader>...\u003C\u002FGoopSidebarHeader>\n      \u003CGoopSidebarContent>\n        \u003CGoopSidebarGroup>\n          \u003CGoopSidebarGroupLabel>Platform\u003C\u002FGoopSidebarGroupLabel>\n          \u003CGoopSidebarMenu>\n            \u003CGoopSidebarMenuItem>\n              \u003CGoopSidebarMenuButton is-active tooltip=\"Dashboard\">\n                \u003CHouse \u002F>\u003Cspan>Dashboard\u003C\u002Fspan>\n              \u003C\u002FGoopSidebarMenuButton>\n            \u003C\u002FGoopSidebarMenuItem>\n            \u003CGoopCollapsible as-child class=\"group\u002Fcollapsible\">\n              \u003CGoopSidebarMenuItem>\n                \u003CGoopCollapsibleTrigger as-child>\n                  \u003CGoopSidebarMenuButton tooltip=\"Documentation\">\n                    \u003CBookOpen \u002F>\u003Cspan>Documentation\u003C\u002Fspan>\n                  \u003C\u002FGoopSidebarMenuButton>\n                \u003C\u002FGoopCollapsibleTrigger>\n                \u003CGoopCollapsibleContent>\n                  \u003CGoopSidebarMenuSub>\n                    \u003CGoopSidebarMenuSubItem>\n                      \u003CGoopSidebarMenuSubButton href=\"#\">Introduction\u003C\u002FGoopSidebarMenuSubButton>\n                    \u003C\u002FGoopSidebarMenuSubItem>\n                  \u003C\u002FGoopSidebarMenuSub>\n                \u003C\u002FGoopCollapsibleContent>\n              \u003C\u002FGoopSidebarMenuItem>\n            \u003C\u002FGoopCollapsible>\n          \u003C\u002FGoopSidebarMenu>\n        \u003C\u002FGoopSidebarGroup>\n      \u003C\u002FGoopSidebarContent>\n      \u003CGoopSidebarFooter>...\u003C\u002FGoopSidebarFooter>\n      \u003CGoopSidebarRail \u002F>\n    \u003C\u002FGoopSidebar>\n    \u003CGoopSidebarInset>\n      \u003Cheader>\u003CGoopSidebarTrigger \u002F>\u003C\u002Fheader>\n      \u003C!-- your page -->\n    \u003C\u002FGoopSidebarInset>\n  \u003C\u002FGoopSidebarProvider>\n\u003C\u002Ftemplate>\n",[208,396,397,421,427,436,443,453,464,482,498,508,519,535,545,556,578,599,609,619,640,649,661,678,698,708,718,728,738,748,772,782,791,800,809,818,828,838,848,862,873,883,893,914,920,929,939],{"__ignoreMap":259},[263,398,399,402,406,409,412,415,418],{"class":265,"line":266},[263,400,401],{"class":300},"\u003C",[263,403,405],{"class":404},"s9eBZ","script",[263,407,408],{"class":269}," setup",[263,410,411],{"class":269}," lang",[263,413,414],{"class":300},"=",[263,416,417],{"class":273},"\"ts\"",[263,419,420],{"class":300},">\n",[263,422,423],{"class":265,"line":304},[263,424,426],{"class":425},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them from '@goopui\u002Fvue'.\n",[263,428,429,432,434],{"class":265,"line":316},[263,430,431],{"class":300},"\u003C\u002F",[263,433,405],{"class":404},[263,435,420],{"class":300},[263,437,439],{"class":265,"line":438},4,[263,440,442],{"emptyLinePlaceholder":441},true,"\n",[263,444,446,448,451],{"class":265,"line":445},5,[263,447,401],{"class":300},[263,449,450],{"class":404},"template",[263,452,420],{"class":300},[263,454,456,459,462],{"class":265,"line":455},6,[263,457,458],{"class":300},"  \u003C",[263,460,461],{"class":404},"GoopSidebarProvider",[263,463,420],{"class":300},[263,465,467,470,472,475,477,480],{"class":265,"line":466},7,[263,468,469],{"class":300},"    \u003C",[263,471,218],{"class":404},[263,473,474],{"class":269}," collapsible",[263,476,414],{"class":300},[263,478,479],{"class":273},"\"icon\"",[263,481,420],{"class":300},[263,483,485,488,491,494,496],{"class":265,"line":484},8,[263,486,487],{"class":300},"      \u003C",[263,489,490],{"class":404},"GoopSidebarHeader",[263,492,493],{"class":300},">...\u003C\u002F",[263,495,490],{"class":404},[263,497,420],{"class":300},[263,499,501,503,506],{"class":265,"line":500},9,[263,502,487],{"class":300},[263,504,505],{"class":404},"GoopSidebarContent",[263,507,420],{"class":300},[263,509,511,514,517],{"class":265,"line":510},10,[263,512,513],{"class":300},"        \u003C",[263,515,516],{"class":404},"GoopSidebarGroup",[263,518,420],{"class":300},[263,520,522,525,528,531,533],{"class":265,"line":521},11,[263,523,524],{"class":300},"          \u003C",[263,526,527],{"class":404},"GoopSidebarGroupLabel",[263,529,530],{"class":300},">Platform\u003C\u002F",[263,532,527],{"class":404},[263,534,420],{"class":300},[263,536,538,540,543],{"class":265,"line":537},12,[263,539,524],{"class":300},[263,541,542],{"class":404},"GoopSidebarMenu",[263,544,420],{"class":300},[263,546,548,551,554],{"class":265,"line":547},13,[263,549,550],{"class":300},"            \u003C",[263,552,553],{"class":404},"GoopSidebarMenuItem",[263,555,420],{"class":300},[263,557,559,562,565,568,571,573,576],{"class":265,"line":558},14,[263,560,561],{"class":300},"              \u003C",[263,563,564],{"class":404},"GoopSidebarMenuButton",[263,566,567],{"class":269}," is-active",[263,569,570],{"class":269}," tooltip",[263,572,414],{"class":300},[263,574,575],{"class":273},"\"Dashboard\"",[263,577,420],{"class":300},[263,579,581,584,587,590,592,595,597],{"class":265,"line":580},15,[263,582,583],{"class":300},"                \u003C",[263,585,586],{"class":404},"House",[263,588,589],{"class":300}," \u002F>\u003C",[263,591,263],{"class":404},[263,593,594],{"class":300},">Dashboard\u003C\u002F",[263,596,263],{"class":404},[263,598,420],{"class":300},[263,600,602,605,607],{"class":265,"line":601},16,[263,603,604],{"class":300},"              \u003C\u002F",[263,606,564],{"class":404},[263,608,420],{"class":300},[263,610,612,615,617],{"class":265,"line":611},17,[263,613,614],{"class":300},"            \u003C\u002F",[263,616,553],{"class":404},[263,618,420],{"class":300},[263,620,622,624,627,630,633,635,638],{"class":265,"line":621},18,[263,623,550],{"class":300},[263,625,626],{"class":404},"GoopCollapsible",[263,628,629],{"class":269}," as-child",[263,631,632],{"class":269}," class",[263,634,414],{"class":300},[263,636,637],{"class":273},"\"group\u002Fcollapsible\"",[263,639,420],{"class":300},[263,641,643,645,647],{"class":265,"line":642},19,[263,644,561],{"class":300},[263,646,553],{"class":404},[263,648,420],{"class":300},[263,650,652,654,657,659],{"class":265,"line":651},20,[263,653,583],{"class":300},[263,655,656],{"class":404},"GoopCollapsibleTrigger",[263,658,629],{"class":269},[263,660,420],{"class":300},[263,662,664,667,669,671,673,676],{"class":265,"line":663},21,[263,665,666],{"class":300},"                  \u003C",[263,668,564],{"class":404},[263,670,570],{"class":269},[263,672,414],{"class":300},[263,674,675],{"class":273},"\"Documentation\"",[263,677,420],{"class":300},[263,679,681,684,687,689,691,694,696],{"class":265,"line":680},22,[263,682,683],{"class":300},"                    \u003C",[263,685,686],{"class":404},"BookOpen",[263,688,589],{"class":300},[263,690,263],{"class":404},[263,692,693],{"class":300},">Documentation\u003C\u002F",[263,695,263],{"class":404},[263,697,420],{"class":300},[263,699,701,704,706],{"class":265,"line":700},23,[263,702,703],{"class":300},"                  \u003C\u002F",[263,705,564],{"class":404},[263,707,420],{"class":300},[263,709,711,714,716],{"class":265,"line":710},24,[263,712,713],{"class":300},"                \u003C\u002F",[263,715,656],{"class":404},[263,717,420],{"class":300},[263,719,721,723,726],{"class":265,"line":720},25,[263,722,583],{"class":300},[263,724,725],{"class":404},"GoopCollapsibleContent",[263,727,420],{"class":300},[263,729,731,733,736],{"class":265,"line":730},26,[263,732,666],{"class":300},[263,734,735],{"class":404},"GoopSidebarMenuSub",[263,737,420],{"class":300},[263,739,741,743,746],{"class":265,"line":740},27,[263,742,683],{"class":300},[263,744,745],{"class":404},"GoopSidebarMenuSubItem",[263,747,420],{"class":300},[263,749,751,754,757,760,762,765,768,770],{"class":265,"line":750},28,[263,752,753],{"class":300},"                      \u003C",[263,755,756],{"class":404},"GoopSidebarMenuSubButton",[263,758,759],{"class":269}," href",[263,761,414],{"class":300},[263,763,764],{"class":273},"\"#\"",[263,766,767],{"class":300},">Introduction\u003C\u002F",[263,769,756],{"class":404},[263,771,420],{"class":300},[263,773,775,778,780],{"class":265,"line":774},29,[263,776,777],{"class":300},"                    \u003C\u002F",[263,779,745],{"class":404},[263,781,420],{"class":300},[263,783,785,787,789],{"class":265,"line":784},30,[263,786,703],{"class":300},[263,788,735],{"class":404},[263,790,420],{"class":300},[263,792,794,796,798],{"class":265,"line":793},31,[263,795,713],{"class":300},[263,797,725],{"class":404},[263,799,420],{"class":300},[263,801,803,805,807],{"class":265,"line":802},32,[263,804,604],{"class":300},[263,806,553],{"class":404},[263,808,420],{"class":300},[263,810,812,814,816],{"class":265,"line":811},33,[263,813,614],{"class":300},[263,815,626],{"class":404},[263,817,420],{"class":300},[263,819,821,824,826],{"class":265,"line":820},34,[263,822,823],{"class":300},"          \u003C\u002F",[263,825,542],{"class":404},[263,827,420],{"class":300},[263,829,831,834,836],{"class":265,"line":830},35,[263,832,833],{"class":300},"        \u003C\u002F",[263,835,516],{"class":404},[263,837,420],{"class":300},[263,839,841,844,846],{"class":265,"line":840},36,[263,842,843],{"class":300},"      \u003C\u002F",[263,845,505],{"class":404},[263,847,420],{"class":300},[263,849,851,853,856,858,860],{"class":265,"line":850},37,[263,852,487],{"class":300},[263,854,855],{"class":404},"GoopSidebarFooter",[263,857,493],{"class":300},[263,859,855],{"class":404},[263,861,420],{"class":300},[263,863,865,867,870],{"class":265,"line":864},38,[263,866,487],{"class":300},[263,868,869],{"class":404},"GoopSidebarRail",[263,871,872],{"class":300}," \u002F>\n",[263,874,876,879,881],{"class":265,"line":875},39,[263,877,878],{"class":300},"    \u003C\u002F",[263,880,218],{"class":404},[263,882,420],{"class":300},[263,884,886,888,891],{"class":265,"line":885},40,[263,887,469],{"class":300},[263,889,890],{"class":404},"GoopSidebarInset",[263,892,420],{"class":300},[263,894,896,898,901,904,907,910,912],{"class":265,"line":895},41,[263,897,487],{"class":300},[263,899,900],{"class":404},"header",[263,902,903],{"class":300},">\u003C",[263,905,906],{"class":404},"GoopSidebarTrigger",[263,908,909],{"class":300}," \u002F>\u003C\u002F",[263,911,900],{"class":404},[263,913,420],{"class":300},[263,915,917],{"class":265,"line":916},42,[263,918,919],{"class":425},"      \u003C!-- your page -->\n",[263,921,923,925,927],{"class":265,"line":922},43,[263,924,878],{"class":300},[263,926,890],{"class":404},[263,928,420],{"class":300},[263,930,932,935,937],{"class":265,"line":931},44,[263,933,934],{"class":300},"  \u003C\u002F",[263,936,461],{"class":404},[263,938,420],{"class":300},[263,940,942,944,946],{"class":265,"line":941},45,[263,943,431],{"class":300},[263,945,450],{"class":404},[263,947,420],{"class":300},[205,949,950,951,236,953,236,955,236,957,236,959,236,961,236,963,236,965,236,967,969,970,236,972,236,975,978,979,969,981,236,984,236,986,236,988,236,990,236,992,236,995,236,998,978,1001,1004,1005,1008,1009,1011,1012,236,1015,236,1018,236,1021,236,1024,236,1027,1004,1030,219],{},"The parts are ",[208,952,461],{},[208,954,218],{},[208,956,906],{},[208,958,869],{},[208,960,890],{},[208,962,490],{},[208,964,855],{},[208,966,505],{},[208,968,516],{}," (with ",[208,971,171],{},[208,973,974],{},"Action",[208,976,977],{},"Content","), ",[208,980,542],{},[208,982,983],{},"Item",[208,985,37],{},[208,987,974],{},[208,989,155],{},[208,991,151],{},[208,993,994],{},"Sub",[208,996,997],{},"SubItem",[208,999,1000],{},"SubButton",[208,1002,1003],{},"GoopSidebarSeparator",", and ",[208,1006,1007],{},"GoopSidebarInput",". ",[208,1010,227],{}," returns ",[208,1013,1014],{},"state",[208,1016,1017],{},"open",[208,1019,1020],{},"setOpen",[208,1022,1023],{},"isMobile",[208,1025,1026],{},"openMobile",[208,1028,1029],{},"setOpenMobile",[208,1031,1032],{},"toggleSidebar",[245,1034,1036],{"id":1035},"behavior","Behavior",[1038,1039,1040,1055,1064,1073,1085,1102,1111],"ul",{},[1041,1042,1043,1047,1048,236,1051,1054],"li",{},[1044,1045,1046],"strong",{},"Highlight."," Hovering or tabbing through the menu moves one goo blob between the items. It travels with momentum, stretches a little, and its soft swell follows the cursor along the item (",[208,1049,1050],{},"highlight",[208,1052,1053],{},"followPointer",").",[1041,1056,1057,1060,1061,1054],{},[1044,1058,1059],{},"Active item."," The active item is a soft filled pill with a hint of the accent and a faint rim (",[208,1062,1063],{},"pill",[1041,1065,1066,1069,1070,1054],{},[1044,1067,1068],{},"Edge slosh."," When the sidebar collapses or expands, its inner edge is goo with inertia. A collapse pushes low, wide mounds out of the edge while it moves and lets them slosh back. An expand lands with a gentle overshoot. The mounds are placed differently every time, and at rest the edge is the sidebar's own (",[208,1071,1072],{},"slosh",[1041,1074,1075,1078,1079,1081,1082,1054],{},[1044,1076,1077],{},"Sub-menus."," A ",[208,1080,626],{}," inside the sidebar floods its row from where you clicked and springs the sub-menu open (",[208,1083,1084],{},"submenus",[1041,1086,1087,1090,1091,1094,1095,1098,1099,1054],{},[1044,1088,1089],{},"Icon mode."," Collapsed to icons, each button's ",[208,1092,1093],{},"tooltip"," is a ",[208,1096,1097],{},"GoopTooltip"," that blooms beside it (",[208,1100,1101],{},"tooltips",[1041,1103,1104,1107,1108,1054],{},[1044,1105,1106],{},"Mobile."," Below 768px the sidebar is a sheet that blooms from the middle of its screen edge (",[208,1109,1110],{},"bloom",[1041,1112,1113,1116,1117,1120],{},[1044,1114,1115],{},"No layout cost."," The goo is drawn on ",[208,1118,1119],{},"aria-hidden"," layers behind the real content. It never changes the page's scroll size.",[245,1122,1124],{"id":1123},"turning-effects-off","Turning effects off",[205,1126,1127,1128,1130],{},"Every effect is a prop on ",[208,1129,218],{},":",[254,1132,1134],{"className":393,"code":1133,"language":343,"meta":259,"style":259},"\u003CGoopSidebar :slosh=\"false\" \u002F>\n\u003CGoopSidebar :slosh=\"1.6\" preset=\"wild\" \u002F>\n\u003CGoopSidebar :highlight=\"false\" :pill=\"false\" \u002F>\n\u003CGoopSidebar :goo=\"false\" \u002F>\n",[208,1135,1136,1160,1189,1221],{"__ignoreMap":259},[263,1137,1138,1140,1142,1145,1147,1149,1152,1156,1158],{"class":265,"line":266},[263,1139,401],{"class":300},[263,1141,218],{"class":404},[263,1143,1144],{"class":300}," :",[263,1146,1072],{"class":269},[263,1148,414],{"class":300},[263,1150,1151],{"class":273},"\"",[263,1153,1155],{"class":1154},"sj4cs","false",[263,1157,1151],{"class":273},[263,1159,872],{"class":300},[263,1161,1162,1164,1166,1168,1170,1172,1174,1177,1179,1182,1184,1187],{"class":265,"line":304},[263,1163,401],{"class":300},[263,1165,218],{"class":404},[263,1167,1144],{"class":300},[263,1169,1072],{"class":269},[263,1171,414],{"class":300},[263,1173,1151],{"class":273},[263,1175,1176],{"class":1154},"1.6",[263,1178,1151],{"class":273},[263,1180,1181],{"class":269}," preset",[263,1183,414],{"class":300},[263,1185,1186],{"class":273},"\"wild\"",[263,1188,872],{"class":300},[263,1190,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1217,1219],{"class":265,"line":316},[263,1192,401],{"class":300},[263,1194,218],{"class":404},[263,1196,1144],{"class":300},[263,1198,1050],{"class":269},[263,1200,414],{"class":300},[263,1202,1151],{"class":273},[263,1204,1155],{"class":1154},[263,1206,1151],{"class":273},[263,1208,1144],{"class":300},[263,1210,1063],{"class":269},[263,1212,414],{"class":300},[263,1214,1151],{"class":273},[263,1216,1155],{"class":1154},[263,1218,1151],{"class":273},[263,1220,872],{"class":300},[263,1222,1223,1225,1227,1229,1232,1234,1236,1238,1240],{"class":265,"line":438},[263,1224,401],{"class":300},[263,1226,218],{"class":404},[263,1228,1144],{"class":300},[263,1230,1231],{"class":269},"goo",[263,1233,414],{"class":300},[263,1235,1151],{"class":273},[263,1237,1155],{"class":1154},[263,1239,1151],{"class":273},[263,1241,872],{"class":300},[245,1243,1245],{"id":1244},"props","Props",[205,1247,1248,1249,1251,1252,1254,1255,978,1258,1254,1261,978,1264,236,1267,236,1269,1004,1272,1008,1275,1251,1277,236,1280,1254,1282,1285,1286,1008,1289,1291],{},"The other parts take shadcn-vue's props. ",[208,1250,564],{}," takes ",[208,1253,239],{}," (",[208,1256,1257],{},"default | outline",[208,1259,1260],{},"size",[208,1262,1263],{},"default | sm | lg",[208,1265,1266],{},"isActive",[208,1268,1093],{},[208,1270,1271],{},"as",[208,1273,1274],{},"asChild",[208,1276,461],{},[208,1278,1279],{},"defaultOpen",[208,1281,1017],{},[208,1283,1284],{},"v-model:open","), and ",[208,1287,1288],{},"class",[208,1290,218],{}," takes these:",[1293,1294],"component-props",{"name":196},[245,1296,1298],{"id":1297},"accessibility","Accessibility",[205,1300,1301,1302,1304,1305,219],{},"Keyboard focus, the Ctrl\u002FCmd+B shortcut, the mobile sheet's focus trap, and the tooltips come from the same reka-ui primitives as shadcn-vue. Every goo layer is ",[208,1303,1119],{}," and can't be clicked, and text is never filtered. Under reduced motion the edge doesn't slosh, the highlight snaps between items, and the sheet, tooltips, and sub-menus open plainly. See ",[1306,1307,23],"a",{"href":24},[1309,1310,1311],"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":259,"searchDepth":316,"depth":316,"links":1313},[1314,1318,1319,1320,1321,1322],{"id":247,"depth":304,"text":15,"children":1315},[1316,1317],{"id":251,"depth":316,"text":252},{"id":343,"depth":316,"text":344},{"id":389,"depth":304,"text":390},{"id":1035,"depth":304,"text":1036},{"id":1123,"depth":304,"text":1124},{"id":1244,"depth":304,"text":1245},{"id":1297,"depth":304,"text":1298},"shadcn's dashboard Sidebar with goo. A goo highlight glides between items, and the edge sloshes as it collapses.","md",{},{"title":175,"description":1323},"FlFs4EpkchxhsMxd17oGA91JqePG_30EZU8Iu5Eegb4",[1329,1331],{"title":171,"path":172,"stem":173,"description":1330,"children":-1},"shadcn's Label, ported as is. No goo, here for a complete catalog.",{"title":184,"path":185,"stem":186,"description":1332,"children":-1},"The framework-agnostic engine under every goopUI component. Attach goo to any element, then tune it, drive it, and tear it down.",1793670387009]