[{"data":1,"prerenderedAt":1148},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Ftoaster":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Ftoaster":1143},[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":114,"badge":13,"body":189,"description":1138,"extension":1139,"meta":1140,"navigation":491,"path":115,"seo":1141,"status":13,"stem":116,"__hash__":1142},"docs\u002Fdocs\u002F2.components\u002F20.toaster.md",{"type":190,"value":191,"toc":1126},"minimark",[192,200,220,224,243,268,273,289,342,356,360,376,413,417,426,533,650,682,686,692,932,943,947,954,993,997,1009,1012,1026,1069,1093,1097,1110,1114,1122],[193,194,197],"playground",{"caption":195,"name":196},"Toasts appear at the bottom right of the window. Try Show five, then hover the stack.","toaster",[198,199],"demo-toaster",{},[201,202,204],"callout",{"type":203},"alpha",[205,206,207,211,212,215,216,219],"p",{},[208,209,210],"code",{},"@goopui\u002Fvue"," and ",[208,213,214],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The toasts on this page are the real ",[208,217,218],{},"GoopToaster",", and the code below is exactly what you write.",[221,222,15],"h2",{"id":223},"installation",[205,225,226,228,229,236,237,242],{},[208,227,218],{}," wraps ",[230,231,235],"a",{"href":232,"rel":233},"https:\u002F\u002Fvue-sonner.vercel.app",[234],"nofollow","vue-sonner",", the same library behind ",[230,238,241],{"href":239,"rel":240},"https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fcomponents\u002Fsonner",[234],"shadcn-vue's Sonner",". vue-sonner is a peer dependency, so install it yourself:",[244,245,250],"pre",{"className":246,"code":247,"language":248,"meta":249,"style":249},"language-bash shiki shiki-themes github-light github-dark","pnpm add vue-sonner\n","bash","",[208,251,252],{"__ignoreMap":249},[253,254,257,261,265],"span",{"class":255,"line":256},"line",1,[253,258,260],{"class":259},"sScJk","pnpm",[253,262,264],{"class":263},"sZZnC"," add",[253,266,267],{"class":263}," vue-sonner\n",[269,270,272],"h3",{"id":271},"nuxt","Nuxt",[244,274,276],{"className":246,"code":275,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fnuxt vue-sonner\n",[208,277,278],{"__ignoreMap":249},[253,279,280,282,284,287],{"class":255,"line":256},[253,281,260],{"class":259},[253,283,264],{"class":263},[253,285,286],{"class":263}," @goopui\u002Fnuxt",[253,288,267],{"class":263},[244,290,295],{"className":291,"code":292,"filename":293,"language":294,"meta":249,"style":249},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n  css: ['vue-sonner\u002Fstyle.css'],\n})\n","nuxt.config.ts","ts",[208,296,297,313,325,336],{"__ignoreMap":249},[253,298,299,303,306,309],{"class":255,"line":256},[253,300,302],{"class":301},"szBVR","export",[253,304,305],{"class":301}," default",[253,307,308],{"class":259}," defineNuxtConfig",[253,310,312],{"class":311},"sVt8B","({\n",[253,314,316,319,322],{"class":255,"line":315},2,[253,317,318],{"class":311},"  modules: [",[253,320,321],{"class":263},"'@goopui\u002Fnuxt'",[253,323,324],{"class":311},"],\n",[253,326,328,331,334],{"class":255,"line":327},3,[253,329,330],{"class":311},"  css: [",[253,332,333],{"class":263},"'vue-sonner\u002Fstyle.css'",[253,335,324],{"class":311},[253,337,339],{"class":255,"line":338},4,[253,340,341],{"class":311},"})\n",[205,343,344,345,347,348,351,352,355],{},"The module auto-imports ",[208,346,218],{},", adds ",[208,349,350],{},"goop.css",", and keeps a single copy of vue-sonner, so the toaster and your ",[208,353,354],{},"toast()"," calls share one queue.",[269,357,359],{"id":358},"vue","Vue",[244,361,363],{"className":246,"code":362,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fvue vue-sonner\n",[208,364,365],{"__ignoreMap":249},[253,366,367,369,371,374],{"class":255,"line":256},[253,368,260],{"class":259},[253,370,264],{"class":263},[253,372,373],{"class":263}," @goopui\u002Fvue",[253,375,267],{"class":263},[244,377,382],{"className":378,"code":379,"filename":380,"language":381,"meta":249,"style":249},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n@import \"vue-sonner\u002Fstyle.css\";\n","main.css","css",[208,383,384,395,404],{"__ignoreMap":249},[253,385,386,389,392],{"class":255,"line":256},[253,387,388],{"class":301},"@import",[253,390,391],{"class":263}," \"tailwindcss\"",[253,393,394],{"class":311},";\n",[253,396,397,399,402],{"class":255,"line":315},[253,398,388],{"class":301},[253,400,401],{"class":263}," \"@goopui\u002Fvue\u002Fgoop.css\"",[253,403,394],{"class":311},[253,405,406,408,411],{"class":255,"line":327},[253,407,388],{"class":301},[253,409,410],{"class":263}," \"vue-sonner\u002Fstyle.css\"",[253,412,394],{"class":311},[221,414,416],{"id":415},"usage","Usage",[205,418,419,420,422,423,425],{},"Mount ",[208,421,218],{}," once, near the root of your app. Then call ",[208,424,354],{}," from vue-sonner anywhere, the same as with shadcn-vue's Sonner:",[244,427,431],{"className":428,"code":429,"filename":430,"language":358,"meta":249,"style":249},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports GoopToaster. In plain Vue, import it:\nimport { GoopToaster } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CNuxtPage \u002F>\n  \u003CGoopToaster \u002F>\n\u003C\u002Ftemplate>\n","app.vue",[208,432,433,457,463,477,486,493,503,515,524],{"__ignoreMap":249},[253,434,435,438,442,445,448,451,454],{"class":255,"line":256},[253,436,437],{"class":311},"\u003C",[253,439,441],{"class":440},"s9eBZ","script",[253,443,444],{"class":259}," setup",[253,446,447],{"class":259}," lang",[253,449,450],{"class":311},"=",[253,452,453],{"class":263},"\"ts\"",[253,455,456],{"class":311},">\n",[253,458,459],{"class":255,"line":315},[253,460,462],{"class":461},"sJ8bj","\u002F\u002F Nuxt auto-imports GoopToaster. In plain Vue, import it:\n",[253,464,465,468,471,474],{"class":255,"line":327},[253,466,467],{"class":301},"import",[253,469,470],{"class":311}," { GoopToaster } ",[253,472,473],{"class":301},"from",[253,475,476],{"class":263}," '@goopui\u002Fvue'\n",[253,478,479,482,484],{"class":255,"line":338},[253,480,481],{"class":311},"\u003C\u002F",[253,483,441],{"class":440},[253,485,456],{"class":311},[253,487,489],{"class":255,"line":488},5,[253,490,492],{"emptyLinePlaceholder":491},true,"\n",[253,494,496,498,501],{"class":255,"line":495},6,[253,497,437],{"class":311},[253,499,500],{"class":440},"template",[253,502,456],{"class":311},[253,504,506,509,512],{"class":255,"line":505},7,[253,507,508],{"class":311},"  \u003C",[253,510,511],{"class":440},"NuxtPage",[253,513,514],{"class":311}," \u002F>\n",[253,516,518,520,522],{"class":255,"line":517},8,[253,519,508],{"class":311},[253,521,218],{"class":440},[253,523,514],{"class":311},[253,525,527,529,531],{"class":255,"line":526},9,[253,528,481],{"class":311},[253,530,500],{"class":440},[253,532,456],{"class":311},[244,534,536],{"className":428,"code":535,"language":358,"meta":249,"style":249},"\u003Cscript setup lang=\"ts\">\nimport { toast } from 'vue-sonner'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopButton variant=\"outline\" @click=\"toast('Event has been created')\">\n    Show toast\n  \u003C\u002FGoopButton>\n\u003C\u002Ftemplate>\n",[208,537,538,554,566,574,578,586,628,633,642],{"__ignoreMap":249},[253,539,540,542,544,546,548,550,552],{"class":255,"line":256},[253,541,437],{"class":311},[253,543,441],{"class":440},[253,545,444],{"class":259},[253,547,447],{"class":259},[253,549,450],{"class":311},[253,551,453],{"class":263},[253,553,456],{"class":311},[253,555,556,558,561,563],{"class":255,"line":315},[253,557,467],{"class":301},[253,559,560],{"class":311}," { toast } ",[253,562,473],{"class":301},[253,564,565],{"class":263}," 'vue-sonner'\n",[253,567,568,570,572],{"class":255,"line":327},[253,569,481],{"class":311},[253,571,441],{"class":440},[253,573,456],{"class":311},[253,575,576],{"class":255,"line":338},[253,577,492],{"emptyLinePlaceholder":491},[253,579,580,582,584],{"class":255,"line":488},[253,581,437],{"class":311},[253,583,500],{"class":440},[253,585,456],{"class":311},[253,587,588,590,593,596,598,601,604,607,609,612,615,618,621,624,626],{"class":255,"line":495},[253,589,508],{"class":311},[253,591,592],{"class":440},"GoopButton",[253,594,595],{"class":259}," variant",[253,597,450],{"class":311},[253,599,600],{"class":263},"\"outline\"",[253,602,603],{"class":311}," @",[253,605,606],{"class":259},"click",[253,608,450],{"class":311},[253,610,611],{"class":263},"\"",[253,613,614],{"class":259},"toast",[253,616,617],{"class":311},"(",[253,619,620],{"class":263},"'Event has been created'",[253,622,623],{"class":311},")",[253,625,611],{"class":263},[253,627,456],{"class":311},[253,629,630],{"class":255,"line":505},[253,631,632],{"class":311},"    Show toast\n",[253,634,635,638,640],{"class":255,"line":517},[253,636,637],{"class":311},"  \u003C\u002F",[253,639,592],{"class":440},[253,641,456],{"class":311},[253,643,644,646,648],{"class":255,"line":526},[253,645,481],{"class":311},[253,647,500],{"class":440},[253,649,456],{"class":311},[205,651,652,654,655,657,658,661,662,661,665,661,668,661,671,661,674,677,678,681],{},[208,653,218],{}," takes every vue-sonner ",[208,656,114],{}," prop (",[208,659,660],{},"position",", ",[208,663,664],{},"expand",[208,666,667],{},"richColors",[208,669,670],{},"closeButton",[208,672,673],{},"duration",[208,675,676],{},"toastOptions",", ...). Its defaults match shadcn's: the popover tokens for color, ",[208,679,680],{},"rounded-2xl"," toasts, and lucide icons.",[221,683,685],{"id":684},"calling-toast","Calling toast()",[205,687,688,689,691],{},"There is no goopUI ",[208,690,614],{},". Use vue-sonner's, with all its options.",[244,693,695],{"className":291,"code":694,"language":294,"meta":249,"style":249},"import { toast } from 'vue-sonner'\n\ntoast('Event has been created')\ntoast('Event has been created', { description: 'Sunday, December 03, 2023 at 9:00 AM' })\ntoast.success('Changes saved')\ntoast.error('Could not reach the server')\ntoast.info('A new version is available')\ntoast.warning('Your trial ends tomorrow')\n\ntoast('Message archived', {\n  action: { label: 'Undo', onClick: () => toast('Restored') },\n})\n\ntoast.promise(save(), {\n  loading: 'Saving...',\n  success: (data) => `${data.name} has been added`,\n  error: 'Something went wrong',\n})\n",[208,696,697,707,711,722,739,754,768,782,796,800,813,844,849,854,870,882,916,927],{"__ignoreMap":249},[253,698,699,701,703,705],{"class":255,"line":256},[253,700,467],{"class":301},[253,702,560],{"class":311},[253,704,473],{"class":301},[253,706,565],{"class":263},[253,708,709],{"class":255,"line":315},[253,710,492],{"emptyLinePlaceholder":491},[253,712,713,715,717,719],{"class":255,"line":327},[253,714,614],{"class":259},[253,716,617],{"class":311},[253,718,620],{"class":263},[253,720,721],{"class":311},")\n",[253,723,724,726,728,730,733,736],{"class":255,"line":338},[253,725,614],{"class":259},[253,727,617],{"class":311},[253,729,620],{"class":263},[253,731,732],{"class":311},", { description: ",[253,734,735],{"class":263},"'Sunday, December 03, 2023 at 9:00 AM'",[253,737,738],{"class":311}," })\n",[253,740,741,744,747,749,752],{"class":255,"line":488},[253,742,743],{"class":311},"toast.",[253,745,746],{"class":259},"success",[253,748,617],{"class":311},[253,750,751],{"class":263},"'Changes saved'",[253,753,721],{"class":311},[253,755,756,758,761,763,766],{"class":255,"line":495},[253,757,743],{"class":311},[253,759,760],{"class":259},"error",[253,762,617],{"class":311},[253,764,765],{"class":263},"'Could not reach the server'",[253,767,721],{"class":311},[253,769,770,772,775,777,780],{"class":255,"line":505},[253,771,743],{"class":311},[253,773,774],{"class":259},"info",[253,776,617],{"class":311},[253,778,779],{"class":263},"'A new version is available'",[253,781,721],{"class":311},[253,783,784,786,789,791,794],{"class":255,"line":517},[253,785,743],{"class":311},[253,787,788],{"class":259},"warning",[253,790,617],{"class":311},[253,792,793],{"class":263},"'Your trial ends tomorrow'",[253,795,721],{"class":311},[253,797,798],{"class":255,"line":526},[253,799,492],{"emptyLinePlaceholder":491},[253,801,803,805,807,810],{"class":255,"line":802},10,[253,804,614],{"class":259},[253,806,617],{"class":311},[253,808,809],{"class":263},"'Message archived'",[253,811,812],{"class":311},", {\n",[253,814,816,819,822,824,827,830,833,836,838,841],{"class":255,"line":815},11,[253,817,818],{"class":311},"  action: { label: ",[253,820,821],{"class":263},"'Undo'",[253,823,661],{"class":311},[253,825,826],{"class":259},"onClick",[253,828,829],{"class":311},": () ",[253,831,832],{"class":301},"=>",[253,834,835],{"class":259}," toast",[253,837,617],{"class":311},[253,839,840],{"class":263},"'Restored'",[253,842,843],{"class":311},") },\n",[253,845,847],{"class":255,"line":846},12,[253,848,341],{"class":311},[253,850,852],{"class":255,"line":851},13,[253,853,492],{"emptyLinePlaceholder":491},[253,855,857,859,862,864,867],{"class":255,"line":856},14,[253,858,743],{"class":311},[253,860,861],{"class":259},"promise",[253,863,617],{"class":311},[253,865,866],{"class":259},"save",[253,868,869],{"class":311},"(), {\n",[253,871,873,876,879],{"class":255,"line":872},15,[253,874,875],{"class":311},"  loading: ",[253,877,878],{"class":263},"'Saving...'",[253,880,881],{"class":311},",\n",[253,883,885,888,891,895,898,900,903,905,908,911,914],{"class":255,"line":884},16,[253,886,887],{"class":259},"  success",[253,889,890],{"class":311},": (",[253,892,894],{"class":893},"s4XuR","data",[253,896,897],{"class":311},") ",[253,899,832],{"class":301},[253,901,902],{"class":263}," `${",[253,904,894],{"class":311},[253,906,907],{"class":263},".",[253,909,910],{"class":311},"name",[253,912,913],{"class":263},"} has been added`",[253,915,881],{"class":311},[253,917,919,922,925],{"class":255,"line":918},17,[253,920,921],{"class":311},"  error: ",[253,923,924],{"class":263},"'Something went wrong'",[253,926,881],{"class":311},[253,928,930],{"class":255,"line":929},18,[253,931,341],{"class":311},[205,933,934,935,939,940,907],{},"The ",[230,936,938],{"href":232,"rel":937},[234],"vue-sonner docs"," cover the rest: custom components, durations, dismissing, multiple toasters with ",[208,941,942],{},"toasterId",[221,944,946],{"id":945},"behavior","Behavior",[205,948,949,950,953],{},"All the goo for a stack is drawn in one ",[208,951,952],{},"aria-hidden"," layer behind the toasts. The toasts stay real, unfiltered DOM, so text, buttons, and focus work as in Sonner. Each toast's own background, border, and shadow are handed to the goo layer.",[955,956,957,969,978,987],"ul",{},[958,959,960,964,965,968],"li",{},[961,962,963],"strong",{},"Drop in"," (",[208,966,967],{},"dropIn","). A new toast arrives as a round blob at the toaster's edge and inflates into the toast. It overshoots, trails goo back toward the edge until the trail snaps, then the far side sloshes.",[958,970,971,964,974,977],{},[961,972,973],{},"Merge",[208,975,976],{},"merge","). Stacked toasts are joined by fat goo necks where they touch. Hover the stack to expand it and the necks stretch, thin, and snap. Collapse it and they form again.",[958,979,980,964,983,986],{},[961,981,982],{},"Drips",[208,984,985],{},"drips","). A toast that leaves sags and pinches while a few drops neck off its bottom edge and fall. Swipe one away and the drops fly the way you swiped.",[958,988,989,992],{},[961,990,991],{},"Layout"," never changes. The goo layer is fixed behind the toaster, and the filter only covers the stack's bounding box.",[221,994,996],{"id":995},"props","Props",[205,998,999,1001,1002,1004,1005,1008],{},[208,1000,218],{}," takes vue-sonner's ",[208,1003,114],{}," props plus ",[208,1006,1007],{},"class",", and adds the goo props.",[1010,1011],"component-props",{"name":196},[205,1013,1014,1015,661,1018,1021,1022,1025],{},"Effect props take ",[208,1016,1017],{},"true",[208,1019,1020],{},"false",", or a number from 0 to 2. Props win over the app-wide config (",[208,1023,1024],{},"GoopPlugin"," or the module options), which wins over the preset.",[244,1027,1029],{"className":428,"code":1028,"language":358,"meta":249,"style":249},"\u003CGoopToaster position=\"top-center\" preset=\"wild\" :drips=\"false\" \u002F>\n",[208,1030,1031],{"__ignoreMap":249},[253,1032,1033,1035,1037,1040,1042,1045,1048,1050,1053,1056,1058,1060,1062,1065,1067],{"class":255,"line":256},[253,1034,437],{"class":311},[253,1036,218],{"class":440},[253,1038,1039],{"class":259}," position",[253,1041,450],{"class":311},[253,1043,1044],{"class":263},"\"top-center\"",[253,1046,1047],{"class":259}," preset",[253,1049,450],{"class":311},[253,1051,1052],{"class":263},"\"wild\"",[253,1054,1055],{"class":311}," :",[253,1057,985],{"class":259},[253,1059,450],{"class":311},[253,1061,611],{"class":263},[253,1063,1020],{"class":1064},"sj4cs",[253,1066,611],{"class":263},[253,1068,514],{"class":311},[205,1070,1071,1073,1074,1077,1078,964,1081,1084,1085,1088,1089,1092],{},[208,1072,218],{}," also exposes ",[208,1075,1076],{},"handle",", the core ",[208,1079,1080],{},"ToasterHandle",[208,1082,1083],{},"null"," before mount or with ",[208,1086,1087],{},"goo"," off). ",[208,1090,1091],{},"handle.refresh()"," re-scans the toasts and redraws.",[221,1094,1096],{"id":1095},"colors","Colors",[205,1098,1099,1100,1103,1104,1106,1107,1109],{},"Toasts use shadcn's popover tokens, and the goo paints whatever background the toast has: ",[208,1101,1102],{},"--popover"," by default, the status colors with ",[208,1105,667],{},", or a class you set through ",[208,1108,676],{},". Change the tokens and the goo follows, in light and dark mode.",[221,1111,1113],{"id":1112},"accessibility","Accessibility",[205,1115,1116,1117,1119,1120,907],{},"Sonner's live region and focus handling are untouched, because the toasts are the real elements. The goo layer is ",[208,1118,952],{}," and ignores the pointer. Under reduced motion the toasts keep their goo bodies and the effects turn off: no drop in, no necks stretching, no drips. See ",[230,1121,23],{"href":24},[1123,1124,1125],"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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":249,"searchDepth":327,"depth":327,"links":1127},[1128,1132,1133,1134,1135,1136,1137],{"id":223,"depth":315,"text":15,"children":1129},[1130,1131],{"id":271,"depth":327,"text":272},{"id":358,"depth":327,"text":359},{"id":415,"depth":315,"text":416},{"id":684,"depth":315,"text":685},{"id":945,"depth":315,"text":946},{"id":995,"depth":315,"text":996},{"id":1095,"depth":315,"text":1096},{"id":1112,"depth":315,"text":1113},"shadcn's Sonner with goo. Toasts drop in as blobs, merge when stacked, and drip away when they leave.","md",{},{"title":114,"description":1138},"ph9neeYUK_Z6tFag9RpH9jNEy-2sk6NBiaqZwg4khFo",[1144,1146],{"title":110,"path":111,"stem":112,"description":1145,"children":-1},"shadcn's Drawer with goo. The edge trails, sloshes, and splashes as you drag and fling it.",{"title":118,"path":119,"stem":120,"description":1147,"children":-1},"A thick band of goo, with see-through bubbles rising through it, sweeps across the page when you navigate. It's the seam between the two pages, the new one behind it and the old one ahead of it.",1793670387073]