[{"data":1,"prerenderedAt":1286},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Ftoggle":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Ftoggle":1281},[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":45,"badge":48,"body":189,"description":1276,"extension":1277,"meta":1278,"navigation":355,"path":46,"seo":1279,"status":13,"stem":47,"__hash__":1280},"docs\u002Fdocs\u002F2.components\u002F03.toggle.md",{"type":190,"value":191,"toc":1261},"minimark",[192,201,224,253,257,284,288,481,485,508,516,520,523,529,614,618,632,637,745,749,767,785,791,1004,1011,1017,1083,1094,1098,1109,1134,1138,1142,1145,1148,1169,1172,1181,1185,1197,1200,1232,1238,1242,1252,1257],[193,194,197],"playground",{"caption":195,"name":196},"Press it, then press it again.","toggle",[198,199],"demo-toggle",{"set":200},"basic",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,212,220,223],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The toggles on this page are the real ",[209,218,219],{},"GoopToggle",[209,221,222],{},"GoopToggleGroup",", and the code below is exactly what you write.",[206,225,226,228,229,237,238,241,242,241,245,248,249,252],{},[209,227,219],{}," wraps reka-ui's ",[230,231,235],"a",{"href":232,"rel":233},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Ftoggle",[234],"nofollow",[209,236,45],{},", the same primitive as shadcn-vue's Toggle, with the same API, variants, sizes, and classes. ",[209,239,240],{},"v-model",", ",[209,243,244],{},"disabled",[209,246,247],{},"asChild",", keyboard handling, and ",[209,250,251],{},"aria-pressed"," all come from reka-ui. The pressed background is goo, drawn on a layer inside the button.",[254,255,15],"h2",{"id":256},"installation",[206,258,259,260,262,263,265,266,270,271,241,273,275,276,279,280,283],{},"Install ",[209,261,215],{}," or ",[209,264,211],{}," as shown on the ",[230,267,269],{"href":268},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports ",[209,272,219],{},[209,274,222],{},", and ",[209,277,278],{},"GoopToggleGroupItem",". The goo fill uses shadcn's pressed-toggle token, ",[209,281,282],{},"--accent",".",[254,285,287],{"id":286},"usage","Usage",[289,290,295],"pre",{"className":291,"code":292,"language":293,"meta":294,"style":294},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\nimport { GoopToggle } from '@goopui\u002Fvue'\n\nconst bold = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopToggle v-model=\"bold\" aria-label=\"Toggle bold\">\n    \u003Cspan class=\"font-bold\">B\u003C\u002Fspan> Bold\n  \u003C\u002FGoopToggle>\n\u003C\u002Ftemplate>\n","vue","",[209,296,297,327,334,350,357,382,392,397,407,438,462,472],{"__ignoreMap":294},[298,299,302,306,310,314,317,320,324],"span",{"class":300,"line":301},"line",1,[298,303,305],{"class":304},"sVt8B","\u003C",[298,307,309],{"class":308},"s9eBZ","script",[298,311,313],{"class":312},"sScJk"," setup",[298,315,316],{"class":312}," lang",[298,318,319],{"class":304},"=",[298,321,323],{"class":322},"sZZnC","\"ts\"",[298,325,326],{"class":304},">\n",[298,328,330],{"class":300,"line":329},2,[298,331,333],{"class":332},"sJ8bj","\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[298,335,337,341,344,347],{"class":300,"line":336},3,[298,338,340],{"class":339},"szBVR","import",[298,342,343],{"class":304}," { GoopToggle } ",[298,345,346],{"class":339},"from",[298,348,349],{"class":322}," '@goopui\u002Fvue'\n",[298,351,353],{"class":300,"line":352},4,[298,354,356],{"emptyLinePlaceholder":355},true,"\n",[298,358,360,363,367,370,373,376,379],{"class":300,"line":359},5,[298,361,362],{"class":339},"const",[298,364,366],{"class":365},"sj4cs"," bold",[298,368,369],{"class":339}," =",[298,371,372],{"class":312}," ref",[298,374,375],{"class":304},"(",[298,377,378],{"class":365},"false",[298,380,381],{"class":304},")\n",[298,383,385,388,390],{"class":300,"line":384},6,[298,386,387],{"class":304},"\u003C\u002F",[298,389,309],{"class":308},[298,391,326],{"class":304},[298,393,395],{"class":300,"line":394},7,[298,396,356],{"emptyLinePlaceholder":355},[298,398,400,402,405],{"class":300,"line":399},8,[298,401,305],{"class":304},[298,403,404],{"class":308},"template",[298,406,326],{"class":304},[298,408,410,413,415,418,420,423,426,428,431,433,436],{"class":300,"line":409},9,[298,411,412],{"class":304},"  \u003C",[298,414,219],{"class":308},[298,416,417],{"class":312}," v-model",[298,419,319],{"class":304},[298,421,422],{"class":322},"\"",[298,424,425],{"class":304},"bold",[298,427,422],{"class":322},[298,429,430],{"class":312}," aria-label",[298,432,319],{"class":304},[298,434,435],{"class":322},"\"Toggle bold\"",[298,437,326],{"class":304},[298,439,441,444,446,449,451,454,457,459],{"class":300,"line":440},10,[298,442,443],{"class":304},"    \u003C",[298,445,298],{"class":308},[298,447,448],{"class":312}," class",[298,450,319],{"class":304},[298,452,453],{"class":322},"\"font-bold\"",[298,455,456],{"class":304},">B\u003C\u002F",[298,458,298],{"class":308},[298,460,461],{"class":304},"> Bold\n",[298,463,465,468,470],{"class":300,"line":464},11,[298,466,467],{"class":304},"  \u003C\u002F",[298,469,219],{"class":308},[298,471,326],{"class":304},[298,473,475,477,479],{"class":300,"line":474},12,[298,476,387],{"class":304},[298,478,404],{"class":308},[298,480,326],{"class":304},[254,482,484],{"id":483},"what-it-does","What it does",[486,487,488,496,502],"ul",{},[489,490,491,495],"li",{},[492,493,494],"strong",{},"flood."," Pressing floods the button with goo from the press point (its center for keyboard presses). Un-pressing drains it back into that point.",[489,497,498,501],{},[492,499,500],{},"wobble."," The flood front has a crest that sloshes against the walls, and the full fill does a small jelly wobble.",[489,503,504,507],{},[492,505,506],{},"droplets."," A few droplets splash off the top edge as the front reaches it.",[206,509,510,212,512,515],{},[209,511,251],{},[209,513,514],{},"data-state"," flip on click, as in any reka-ui toggle. Only the fill animates.",[254,517,519],{"id":518},"variants-and-sizes","Variants and sizes",[206,521,522],{},"The same variants and sizes as shadcn:",[524,525,526],"preview",{":controls":378},[198,527],{"set":528},"variants",[289,530,532],{"className":291,"code":531,"language":293,"meta":294,"style":294},"\u003CGoopToggle default-value>Default\u003C\u002FGoopToggle>\n\u003CGoopToggle variant=\"outline\" default-value>Outline\u003C\u002FGoopToggle>\n\u003CGoopToggle size=\"sm\">sm\u003C\u002FGoopToggle>\n\u003CGoopToggle size=\"lg\">lg\u003C\u002FGoopToggle>\n",[209,533,534,550,573,594],{"__ignoreMap":294},[298,535,536,538,540,543,546,548],{"class":300,"line":301},[298,537,305],{"class":304},[298,539,219],{"class":308},[298,541,542],{"class":312}," default-value",[298,544,545],{"class":304},">Default\u003C\u002F",[298,547,219],{"class":308},[298,549,326],{"class":304},[298,551,552,554,556,559,561,564,566,569,571],{"class":300,"line":329},[298,553,305],{"class":304},[298,555,219],{"class":308},[298,557,558],{"class":312}," variant",[298,560,319],{"class":304},[298,562,563],{"class":322},"\"outline\"",[298,565,542],{"class":312},[298,567,568],{"class":304},">Outline\u003C\u002F",[298,570,219],{"class":308},[298,572,326],{"class":304},[298,574,575,577,579,582,584,587,590,592],{"class":300,"line":336},[298,576,305],{"class":304},[298,578,219],{"class":308},[298,580,581],{"class":312}," size",[298,583,319],{"class":304},[298,585,586],{"class":322},"\"sm\"",[298,588,589],{"class":304},">sm\u003C\u002F",[298,591,219],{"class":308},[298,593,326],{"class":304},[298,595,596,598,600,602,604,607,610,612],{"class":300,"line":352},[298,597,305],{"class":304},[298,599,219],{"class":308},[298,601,581],{"class":312},[298,603,319],{"class":304},[298,605,606],{"class":322},"\"lg\"",[298,608,609],{"class":304},">lg\u003C\u002F",[298,611,219],{"class":308},[298,613,326],{"class":304},[254,615,617],{"id":616},"effects-disabled-and-goo-off","Effects, disabled, and goo off",[206,619,620,621,623,624,627,628,631],{},"Every effect is a prop. ",[209,622,378],{}," turns it off, ",[209,625,626],{},"true"," uses the preset's strength, and a number scales it. A disabled toggle is shadcn's. ",[209,629,630],{},":goo=\"false\""," renders a plain shadcn Toggle.",[524,633,634],{":controls":378},[198,635],{"set":636},"states",[289,638,640],{"className":291,"code":639,"language":293,"meta":294,"style":294},"\u003CGoopToggle disabled>Disabled\u003C\u002FGoopToggle>\n\u003CGoopToggle :droplets=\"false\" :wobble=\"false\">Flood only\u003C\u002FGoopToggle>\n\u003CGoopToggle preset=\"wild\">Wild\u003C\u002FGoopToggle>\n\u003CGoopToggle :goo=\"false\">Plain\u003C\u002FGoopToggle>\n",[209,641,642,658,698,719],{"__ignoreMap":294},[298,643,644,646,648,651,654,656],{"class":300,"line":301},[298,645,305],{"class":304},[298,647,219],{"class":308},[298,649,650],{"class":312}," disabled",[298,652,653],{"class":304},">Disabled\u003C\u002F",[298,655,219],{"class":308},[298,657,326],{"class":304},[298,659,660,662,664,667,670,672,674,676,678,680,683,685,687,689,691,694,696],{"class":300,"line":329},[298,661,305],{"class":304},[298,663,219],{"class":308},[298,665,666],{"class":304}," :",[298,668,669],{"class":312},"droplets",[298,671,319],{"class":304},[298,673,422],{"class":322},[298,675,378],{"class":365},[298,677,422],{"class":322},[298,679,666],{"class":304},[298,681,682],{"class":312},"wobble",[298,684,319],{"class":304},[298,686,422],{"class":322},[298,688,378],{"class":365},[298,690,422],{"class":322},[298,692,693],{"class":304},">Flood only\u003C\u002F",[298,695,219],{"class":308},[298,697,326],{"class":304},[298,699,700,702,704,707,709,712,715,717],{"class":300,"line":336},[298,701,305],{"class":304},[298,703,219],{"class":308},[298,705,706],{"class":312}," preset",[298,708,319],{"class":304},[298,710,711],{"class":322},"\"wild\"",[298,713,714],{"class":304},">Wild\u003C\u002F",[298,716,219],{"class":308},[298,718,326],{"class":304},[298,720,721,723,725,727,730,732,734,736,738,741,743],{"class":300,"line":352},[298,722,305],{"class":304},[298,724,219],{"class":308},[298,726,666],{"class":304},[298,728,729],{"class":312},"goo",[298,731,319],{"class":304},[298,733,422],{"class":322},[298,735,378],{"class":365},[298,737,422],{"class":322},[298,739,740],{"class":304},">Plain\u003C\u002F",[298,742,219],{"class":308},[298,744,326],{"class":304},[254,746,748],{"id":747},"toggle-group","Toggle group",[206,750,751,212,753,755,756,212,763,766],{},[209,752,222],{},[209,754,278],{}," wrap reka-ui's ",[230,757,760],{"href":758,"rel":759},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Ftoggle-group",[234],[209,761,762],{},"ToggleGroupRoot",[209,764,765],{},"ToggleGroupItem",", like shadcn-vue's ToggleGroup. All the pressed fills are one goo layer on the group, which adds two effects:",[486,768,769,779],{},[489,770,771,774,775,778],{},[492,772,773],{},"flow."," In a ",[209,776,777],{},"type=\"single\""," group, the goo leaves the old item: it gathers into a blob, stretches out on a neck, pinches off, travels over the items in between, and floods the new item from the side it arrived on.",[489,780,781,784],{},[492,782,783],{},"merge."," Neighbouring pressed items join through goo bridges across their seam, so a run of pressed items reads as one body. Un-press one and it drains while the bridges neck and tear.",[524,786,788],{":controls":378,"caption":787},"Pick an alignment. The goo travels between items.",[198,789],{"set":790},"single",[289,792,794],{"className":291,"code":793,"language":293,"meta":294,"style":294},"\u003Cscript setup lang=\"ts\">\nimport { GoopToggleGroup, GoopToggleGroupItem } from '@goopui\u002Fvue'\n\nconst align = ref('left')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopToggleGroup v-model=\"align\" type=\"single\" variant=\"outline\" aria-label=\"Text alignment\">\n    \u003CGoopToggleGroupItem value=\"left\">Left\u003C\u002FGoopToggleGroupItem>\n    \u003CGoopToggleGroupItem value=\"center\">Center\u003C\u002FGoopToggleGroupItem>\n    \u003CGoopToggleGroupItem value=\"right\">Right\u003C\u002FGoopToggleGroupItem>\n    \u003CGoopToggleGroupItem value=\"justify\">Justify\u003C\u002FGoopToggleGroupItem>\n  \u003C\u002FGoopToggleGroup>\n\u003C\u002Ftemplate>\n",[209,795,796,812,823,827,845,853,857,865,905,926,946,966,986,995],{"__ignoreMap":294},[298,797,798,800,802,804,806,808,810],{"class":300,"line":301},[298,799,305],{"class":304},[298,801,309],{"class":308},[298,803,313],{"class":312},[298,805,316],{"class":312},[298,807,319],{"class":304},[298,809,323],{"class":322},[298,811,326],{"class":304},[298,813,814,816,819,821],{"class":300,"line":329},[298,815,340],{"class":339},[298,817,818],{"class":304}," { GoopToggleGroup, GoopToggleGroupItem } ",[298,820,346],{"class":339},[298,822,349],{"class":322},[298,824,825],{"class":300,"line":336},[298,826,356],{"emptyLinePlaceholder":355},[298,828,829,831,834,836,838,840,843],{"class":300,"line":352},[298,830,362],{"class":339},[298,832,833],{"class":365}," align",[298,835,369],{"class":339},[298,837,372],{"class":312},[298,839,375],{"class":304},[298,841,842],{"class":322},"'left'",[298,844,381],{"class":304},[298,846,847,849,851],{"class":300,"line":359},[298,848,387],{"class":304},[298,850,309],{"class":308},[298,852,326],{"class":304},[298,854,855],{"class":300,"line":384},[298,856,356],{"emptyLinePlaceholder":355},[298,858,859,861,863],{"class":300,"line":394},[298,860,305],{"class":304},[298,862,404],{"class":308},[298,864,326],{"class":304},[298,866,867,869,871,873,875,877,880,882,885,887,890,892,894,896,898,900,903],{"class":300,"line":399},[298,868,412],{"class":304},[298,870,222],{"class":308},[298,872,417],{"class":312},[298,874,319],{"class":304},[298,876,422],{"class":322},[298,878,879],{"class":304},"align",[298,881,422],{"class":322},[298,883,884],{"class":312}," type",[298,886,319],{"class":304},[298,888,889],{"class":322},"\"single\"",[298,891,558],{"class":312},[298,893,319],{"class":304},[298,895,563],{"class":322},[298,897,430],{"class":312},[298,899,319],{"class":304},[298,901,902],{"class":322},"\"Text alignment\"",[298,904,326],{"class":304},[298,906,907,909,911,914,916,919,922,924],{"class":300,"line":409},[298,908,443],{"class":304},[298,910,278],{"class":308},[298,912,913],{"class":312}," value",[298,915,319],{"class":304},[298,917,918],{"class":322},"\"left\"",[298,920,921],{"class":304},">Left\u003C\u002F",[298,923,278],{"class":308},[298,925,326],{"class":304},[298,927,928,930,932,934,936,939,942,944],{"class":300,"line":440},[298,929,443],{"class":304},[298,931,278],{"class":308},[298,933,913],{"class":312},[298,935,319],{"class":304},[298,937,938],{"class":322},"\"center\"",[298,940,941],{"class":304},">Center\u003C\u002F",[298,943,278],{"class":308},[298,945,326],{"class":304},[298,947,948,950,952,954,956,959,962,964],{"class":300,"line":464},[298,949,443],{"class":304},[298,951,278],{"class":308},[298,953,913],{"class":312},[298,955,319],{"class":304},[298,957,958],{"class":322},"\"right\"",[298,960,961],{"class":304},">Right\u003C\u002F",[298,963,278],{"class":308},[298,965,326],{"class":304},[298,967,968,970,972,974,976,979,982,984],{"class":300,"line":474},[298,969,443],{"class":304},[298,971,278],{"class":308},[298,973,913],{"class":312},[298,975,319],{"class":304},[298,977,978],{"class":322},"\"justify\"",[298,980,981],{"class":304},">Justify\u003C\u002F",[298,983,278],{"class":308},[298,985,326],{"class":304},[298,987,989,991,993],{"class":300,"line":988},13,[298,990,467],{"class":304},[298,992,222],{"class":308},[298,994,326],{"class":304},[298,996,998,1000,1002],{"class":300,"line":997},14,[298,999,387],{"class":304},[298,1001,404],{"class":308},[298,1003,326],{"class":304},[206,1005,1006,1007,1010],{},"With ",[209,1008,1009],{},"type=\"multiple\"",", pressed neighbours merge:",[524,1012,1014],{":controls":378,"caption":1013},"Press neighbours to merge them, then pull one out.",[198,1015],{"set":1016},"multiple",[289,1018,1020],{"className":291,"code":1019,"language":293,"meta":294,"style":294},"\u003CGoopToggleGroup v-model=\"marks\" type=\"multiple\" aria-label=\"Text style\">\n  \u003CGoopToggleGroupItem value=\"bold\" aria-label=\"Bold\">B\u003C\u002FGoopToggleGroupItem>\n  \u003CGoopToggleGroupItem value=\"italic\" aria-label=\"Italic\">I\u003C\u002FGoopToggleGroupItem>\n  \u003CGoopToggleGroupItem value=\"underline\" aria-label=\"Underline\">U\u003C\u002FGoopToggleGroupItem>\n  \u003CGoopToggleGroupItem value=\"strike\" aria-label=\"Strikethrough\">S\u003C\u002FGoopToggleGroupItem>\n\u003C\u002FGoopToggleGroup>\n",[209,1021,1022,1055,1060,1065,1070,1075],{"__ignoreMap":294},[298,1023,1024,1026,1028,1030,1032,1034,1037,1039,1041,1043,1046,1048,1050,1053],{"class":300,"line":301},[298,1025,305],{"class":304},[298,1027,222],{"class":308},[298,1029,417],{"class":312},[298,1031,319],{"class":304},[298,1033,422],{"class":322},[298,1035,1036],{"class":304},"marks",[298,1038,422],{"class":322},[298,1040,884],{"class":312},[298,1042,319],{"class":304},[298,1044,1045],{"class":322},"\"multiple\"",[298,1047,430],{"class":312},[298,1049,319],{"class":304},[298,1051,1052],{"class":322},"\"Text style\"",[298,1054,326],{"class":304},[298,1056,1057],{"class":300,"line":329},[298,1058,1059],{"class":304},"  \u003CGoopToggleGroupItem value=\"bold\" aria-label=\"Bold\">B\u003C\u002FGoopToggleGroupItem>\n",[298,1061,1062],{"class":300,"line":336},[298,1063,1064],{"class":304},"  \u003CGoopToggleGroupItem value=\"italic\" aria-label=\"Italic\">I\u003C\u002FGoopToggleGroupItem>\n",[298,1066,1067],{"class":300,"line":352},[298,1068,1069],{"class":304},"  \u003CGoopToggleGroupItem value=\"underline\" aria-label=\"Underline\">U\u003C\u002FGoopToggleGroupItem>\n",[298,1071,1072],{"class":300,"line":359},[298,1073,1074],{"class":304},"  \u003CGoopToggleGroupItem value=\"strike\" aria-label=\"Strikethrough\">S\u003C\u002FGoopToggleGroupItem>\n",[298,1076,1077,1079,1081],{"class":300,"line":384},[298,1078,387],{"class":304},[298,1080,222],{"class":308},[298,1082,326],{"class":304},[206,1084,1085,1086,1089,1090,1093],{},"Set ",[209,1087,1088],{},"spacing"," to put a gap between items (",[209,1091,1092],{},"0",", the default, joins them like shadcn).",[254,1095,1097],{"id":1096},"colors","Colors",[206,1099,1100,1101,1104,1105,1108],{},"The goo reads ",[209,1102,1103],{},"--goop-toggle-fill",", which defaults to ",[209,1106,1107],{},"var(--accent)",", the color shadcn fills a pressed toggle with. Override it on the toggle, the group, or an ancestor:",[289,1110,1112],{"className":291,"code":1111,"language":293,"meta":294,"style":294},"\u003CGoopToggle class=\"[--goop-toggle-fill:var(--color-emerald-500)]\">Bold\u003C\u002FGoopToggle>\n",[209,1113,1114],{"__ignoreMap":294},[298,1115,1116,1118,1120,1122,1124,1127,1130,1132],{"class":300,"line":301},[298,1117,305],{"class":304},[298,1119,219],{"class":308},[298,1121,448],{"class":312},[298,1123,319],{"class":304},[298,1125,1126],{"class":322},"\"[--goop-toggle-fill:var(--color-emerald-500)]\"",[298,1128,1129],{"class":304},">Bold\u003C\u002F",[298,1131,219],{"class":308},[298,1133,326],{"class":304},[254,1135,1137],{"id":1136},"props","Props",[1139,1140,219],"h3",{"id":1141},"gooptoggle",[206,1143,1144],{},"Keeps the shadcn-vue Toggle API and adds the goo props.",[1146,1147],"component-props",{"name":196},[206,1149,1150,1151,1153,1154,1157,1158,1161,1162,1164,1165,1168],{},"The default slot receives reka-ui's slot props. ",[209,1152,219],{}," also exposes ",[209,1155,1156],{},"handle"," (the live toggle handle, ",[209,1159,1160],{},"null"," before mount or with ",[209,1163,729],{}," off) and ",[209,1166,1167],{},"el"," (the button).",[1139,1170,222],{"id":1171},"gooptogglegroup",[206,1173,1174,1175,212,1178,283],{},"Keeps the shadcn-vue ToggleGroup API and adds the goo props, including ",[209,1176,1177],{},"flow",[209,1179,1180],{},"merge",[1146,1182],{"name":196,"part":1183},[1184],"group",[206,1186,1187,1188,212,1190,1192,1193,1196],{},"It exposes ",[209,1189,1156],{},[209,1191,1167],{}," (the root, ",[209,1194,1195],{},"role=\"group\"",").",[1139,1198,278],{"id":1199},"gooptogglegroupitem",[206,1201,1202,1203,1206,1207,241,1209,241,1212,241,1215,241,1217,275,1220,1223,1224,212,1226,1228,1229,1231],{},"Keeps the shadcn-vue ToggleGroupItem API: ",[209,1204,1205],{},"value"," (required), ",[209,1208,244],{},[209,1210,1211],{},"variant",[209,1213,1214],{},"size",[209,1216,247],{},[209,1218,1219],{},"as",[209,1221,1222],{},"class",". It has no goo props of its own. ",[209,1225,1211],{},[209,1227,1214],{}," come from the group when the group sets them. Inside an active ",[209,1230,222],{},", a pressed item drops its own background, because the group's goo is the fill.",[206,1233,1234,1235,1237],{},"Before they mount, during SSR, and with ",[209,1236,630],{},", they are plain shadcn toggles, so first paint and hydration match.",[254,1239,1241],{"id":1240},"accessibility","Accessibility",[206,1243,1244,1245,1247,1248,1251],{},"They're real reka-ui toggles: buttons with ",[209,1246,251],{},", a focus ring, and Space or Enter to press. A group uses roving focus with arrow keys. The goo layers are ",[209,1249,1250],{},"aria-hidden"," and can't be clicked, and labels and icons are never filtered.",[206,1253,1254,1255,283],{},"Under reduced motion the goo keeps its shape and the animation stops: pressed items are full and unpressed ones empty, merged neighbours stay merged, and nothing floods, drains, splashes, or travels. See ",[230,1256,23],{"href":24},[1258,1259,1260],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":294,"searchDepth":336,"depth":336,"links":1262},[1263,1264,1265,1266,1267,1268,1269,1270,1275],{"id":256,"depth":329,"text":15},{"id":286,"depth":329,"text":287},{"id":483,"depth":329,"text":484},{"id":518,"depth":329,"text":519},{"id":616,"depth":329,"text":617},{"id":747,"depth":329,"text":748},{"id":1096,"depth":329,"text":1097},{"id":1136,"depth":329,"text":1137,"children":1271},[1272,1273,1274],{"id":1141,"depth":336,"text":219},{"id":1171,"depth":336,"text":222},{"id":1199,"depth":336,"text":278},{"id":1240,"depth":329,"text":1241},"shadcn's Toggle and ToggleGroup with a goo fill. Pressing floods the button from where you pressed, and in a group the goo flows from one item to the next.","md",{},{"title":45,"description":1276},"Mv3aLffHpq9mTjpWH_jlTNM3OFMjej0GYfJMlOFGaRY",[1282,1284],{"title":41,"path":42,"stem":43,"description":1283,"children":-1},"shadcn's Spinner, drawn in goo. Blobs chase, merge, and split. Poke it and it sloshes.",{"title":50,"path":51,"stem":52,"description":1285,"children":-1},"shadcn's Switch with a goo thumb. It stretches across the track, splats against the wall, and floods the track with color.",1793670386527]