[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation_docs":3,"-docs-global-styling":142,"-docs-global-styling-surround":2293},[4,20,45,69,85,96,126],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":19},"Global","i-tabler-box","\u002Fdocs\u002Fglobal","docs\u002F1.global",[10,14],{"title":11,"path":12,"stem":13,"icon":6},"Overview","\u002Fdocs\u002Fglobal\u002Foverview","docs\u002F1.global\u002F1.overview",{"title":15,"path":16,"stem":17,"icon":18},"Styling","\u002Fdocs\u002Fglobal\u002Fstyling","docs\u002F1.global\u002F2.styling","i-tabler-palette",false,{"title":21,"icon":22,"path":23,"stem":24,"children":25,"page":19},"Vue","i-simple-icons-vuedotjs","\u002Fdocs\u002Fvue","docs\u002F2.vue",[26,30,35,40],{"title":27,"path":28,"stem":29,"icon":22},"Quick Start","\u002Fdocs\u002Fvue\u002Fquick-start","docs\u002F2.vue\u002F1.quick-start",{"title":31,"path":32,"stem":33,"icon":34},"Toasts","\u002Fdocs\u002Fvue\u002Ftoasts","docs\u002F2.vue\u002F2.toasts","i-tabler-bell",{"title":36,"path":37,"stem":38,"icon":39},"Timers & Progress","\u002Fdocs\u002Fvue\u002Ftimers-and-progress","docs\u002F2.vue\u002F3.timers-and-progress","i-tabler-stopwatch",{"title":41,"path":42,"stem":43,"icon":44},"Buttons & Actions","\u002Fdocs\u002Fvue\u002Fbuttons-and-actions","docs\u002F2.vue\u002F4.buttons-and-actions","i-tabler-hand-click",{"title":46,"icon":47,"path":48,"stem":49,"children":50,"page":19},"Nuxt","i-simple-icons-nuxtdotjs","\u002Fdocs\u002Fnuxt","docs\u002F3.nuxt",[51,54,59,64],{"title":27,"path":52,"stem":53,"icon":47},"\u002Fdocs\u002Fnuxt\u002Fquick-start","docs\u002F3.nuxt\u002F1.quick-start",{"title":55,"path":56,"stem":57,"icon":58},"toast vs useToast","\u002Fdocs\u002Fnuxt\u002Ftoast-and-use-toast","docs\u002F3.nuxt\u002F2.toast-and-use-toast","i-tabler-braces",{"title":60,"path":61,"stem":62,"icon":63},"Module Options","\u002Fdocs\u002Fnuxt\u002Fmodule-options","docs\u002F3.nuxt\u002F3.module-options","i-tabler-adjustments-horizontal",{"title":65,"path":66,"stem":67,"icon":68},"Nuxt Notes","\u002Fdocs\u002Fnuxt\u002Fnuxt-notes","docs\u002F3.nuxt\u002F5.nuxt-notes","i-tabler-note",{"title":70,"icon":71,"path":72,"stem":73,"children":74,"page":19},"Headless","i-tabler-layout-board-split","\u002Fdocs\u002Fheadless","docs\u002F4.headless",[75,80],{"title":76,"path":77,"stem":78,"icon":79},"Core Store","\u002Fdocs\u002Fheadless\u002Fcore-store","docs\u002F4.headless\u002F1.core-store","i-tabler-automation",{"title":81,"path":82,"stem":83,"icon":84},"Headless Slot","\u002Fdocs\u002Fheadless\u002Fheadless-slot","docs\u002F4.headless\u002F2.headless-slot","i-tabler-template",{"title":86,"icon":87,"path":88,"stem":89,"children":90,"page":19},"Examples","i-tabler-layout-cards","\u002Fdocs\u002Fexamples","docs\u002F5.examples",[91],{"title":92,"path":93,"stem":94,"icon":95},"Live Examples","\u002Fdocs\u002Fexamples\u002Flive-examples","docs\u002F5.examples\u002F1.live-examples","i-tabler-player-play",{"title":97,"icon":98,"path":99,"stem":100,"children":101,"page":19},"API","i-tabler-file-code-2","\u002Fdocs\u002Fapi","docs\u002F6.api",[102,106,111,116,121],{"title":103,"path":104,"stem":105,"icon":63},"Configuration","\u002Fdocs\u002Fapi\u002Fconfiguration","docs\u002F6.api\u002F1.configuration",{"title":107,"path":108,"stem":109,"icon":110},"Actions","\u002Fdocs\u002Fapi\u002Factions","docs\u002F6.api\u002F2.actions","i-tabler-terminal",{"title":112,"path":113,"stem":114,"icon":115},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F6.api\u002F3.events","i-tabler-radio",{"title":117,"path":118,"stem":119,"icon":120},"State","\u002Fdocs\u002Fapi\u002Fstate","docs\u002F6.api\u002F4.state","i-tabler-database",{"title":122,"path":123,"stem":124,"icon":125},"Runtime Exports","\u002Fdocs\u002Fapi\u002Fruntime-exports","docs\u002F6.api\u002F5.runtime-exports","i-tabler-package",{"title":127,"icon":128,"path":129,"stem":130,"children":131,"page":19},"More","i-lucide-ellipsis","\u002Fdocs\u002Fmore","docs\u002F7.more",[132,137],{"title":133,"path":134,"stem":135,"icon":136},"Troubleshooting","\u002Fdocs\u002Fmore\u002Ftroubleshooting","docs\u002F7.more\u002F1.troubleshooting","i-tabler-tool",{"title":138,"path":139,"stem":140,"icon":141},"Comparisons","\u002Fdocs\u002Fmore\u002Fcomparisons","docs\u002F7.more\u002F2.comparisons","i-tabler-scale",{"id":143,"title":15,"body":144,"description":2286,"extension":2287,"links":2288,"meta":2289,"navigation":2290,"path":16,"seo":2291,"stem":17,"__hash__":2292},"docs\u002Fdocs\u002F1.global\u002F2.styling.md",{"type":145,"value":146,"toc":2272},"minimark",[147,156,162,167,926,936,2268],[148,149,150,151,155],"p",{},"Toastflow is CSS-first. Start with variables, use theme classes for reusable variants, and keep inline ",[152,153,154],"code",{},"css"," for one-off toasts.",[157,158,161],"callout",{"color":159,"icon":160},"primary","i-tabler-sparkles","Most apps only need CSS variables. You do not need a design-system wrapper just to make Toastflow match your brand.",[163,164,166],"h2",{"id":165},"the-three-levels","The Three Levels",[168,169,170,493,723],"tabs",{},[171,172,174,177,261],"tabs-item",{"label":173},"Global variables",[148,175,176],{},"Use this for the default app-wide look.",[178,179,185],"pre",{"className":180,"code":181,"filename":182,"language":183,"meta":184,"style":184},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","toast.info({\n  title: \"Global variables\",\n  description: \"Font, radius, and color tokens from :root.\",\n});\n","toast.ts","ts","",[152,186,187,210,232,249],{"__ignoreMap":184},[188,189,192,196,200,204,207],"span",{"class":190,"line":191},"line",1,[188,193,195],{"class":194},"sTEyZ","toast",[188,197,199],{"class":198},"sMK4o",".",[188,201,203],{"class":202},"s2Zo4","info",[188,205,206],{"class":194},"(",[188,208,209],{"class":198},"{\n",[188,211,213,217,220,223,226,229],{"class":190,"line":212},2,[188,214,216],{"class":215},"swJcz","  title",[188,218,219],{"class":198},":",[188,221,222],{"class":198}," \"",[188,224,173],{"class":225},"sfazB",[188,227,228],{"class":198},"\"",[188,230,231],{"class":198},",\n",[188,233,235,238,240,242,245,247],{"class":190,"line":234},3,[188,236,237],{"class":215},"  description",[188,239,219],{"class":198},[188,241,222],{"class":198},[188,243,244],{"class":225},"Font, radius, and color tokens from :root.",[188,246,228],{"class":198},[188,248,231],{"class":198},[188,250,252,255,258],{"class":190,"line":251},4,[188,253,254],{"class":198},"}",[188,256,257],{"class":194},")",[188,259,260],{"class":198},";\n",[178,262,266],{"className":263,"code":264,"filename":265,"language":154,"meta":184,"style":184},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  --tf-toast-font-family:\n    \"IBM Plex Mono\", \"SFMono-Regular\", Consolas, monospace;\n  --tf-toast-border-radius: 4px;\n  --tf-toast-padding: 18px;\n  --tf-toast-bg: #fff7ed;\n  --tf-toast-color: #431407;\n  --tf-toast-title-color: #431407;\n  --tf-toast-description-color: #7c2d12;\n  --tf-toast-border-color: #fb923c;\n  --tf-toast-icon-color: #ea580c;\n  --tf-toast-progress-bg: color-mix(in srgb, #ea580c 18%, transparent);\n  --tf-toast-progress-bar-bg: #ea580c;\n}\n","app.css",[152,267,268,279,287,319,332,345,361,376,390,405,420,435,473,487],{"__ignoreMap":184},[188,269,270,272,276],{"class":190,"line":191},[188,271,219],{"class":198},[188,273,275],{"class":274},"spNyl","root",[188,277,278],{"class":198}," {\n",[188,280,281,284],{"class":190,"line":212},[188,282,283],{"class":194},"  --tf-toast-font-family",[188,285,286],{"class":198},":\n",[188,288,289,292,295,297,300,302,305,307,309,312,314,317],{"class":190,"line":234},[188,290,291],{"class":198},"    \"",[188,293,294],{"class":225},"IBM Plex Mono",[188,296,228],{"class":198},[188,298,299],{"class":198},",",[188,301,222],{"class":198},[188,303,304],{"class":225},"SFMono-Regular",[188,306,228],{"class":198},[188,308,299],{"class":198},[188,310,311],{"class":194}," Consolas",[188,313,299],{"class":198},[188,315,316],{"class":194}," monospace",[188,318,260],{"class":198},[188,320,321,324,326,330],{"class":190,"line":251},[188,322,323],{"class":194},"  --tf-toast-border-radius",[188,325,219],{"class":198},[188,327,329],{"class":328},"sbssI"," 4px",[188,331,260],{"class":198},[188,333,335,338,340,343],{"class":190,"line":334},5,[188,336,337],{"class":194},"  --tf-toast-padding",[188,339,219],{"class":198},[188,341,342],{"class":328}," 18px",[188,344,260],{"class":198},[188,346,348,351,353,356,359],{"class":190,"line":347},6,[188,349,350],{"class":194},"  --tf-toast-bg",[188,352,219],{"class":198},[188,354,355],{"class":198}," #",[188,357,358],{"class":194},"fff7ed",[188,360,260],{"class":198},[188,362,364,367,369,371,374],{"class":190,"line":363},7,[188,365,366],{"class":194},"  --tf-toast-color",[188,368,219],{"class":198},[188,370,355],{"class":198},[188,372,373],{"class":194},"431407",[188,375,260],{"class":198},[188,377,379,382,384,386,388],{"class":190,"line":378},8,[188,380,381],{"class":194},"  --tf-toast-title-color",[188,383,219],{"class":198},[188,385,355],{"class":198},[188,387,373],{"class":194},[188,389,260],{"class":198},[188,391,393,396,398,400,403],{"class":190,"line":392},9,[188,394,395],{"class":194},"  --tf-toast-description-color",[188,397,219],{"class":198},[188,399,355],{"class":198},[188,401,402],{"class":194},"7c2d12",[188,404,260],{"class":198},[188,406,408,411,413,415,418],{"class":190,"line":407},10,[188,409,410],{"class":194},"  --tf-toast-border-color",[188,412,219],{"class":198},[188,414,355],{"class":198},[188,416,417],{"class":194},"fb923c",[188,419,260],{"class":198},[188,421,423,426,428,430,433],{"class":190,"line":422},11,[188,424,425],{"class":194},"  --tf-toast-icon-color",[188,427,219],{"class":198},[188,429,355],{"class":198},[188,431,432],{"class":194},"ea580c",[188,434,260],{"class":198},[188,436,438,441,443,446,448,452,455,457,459,462,465,467,470],{"class":190,"line":437},12,[188,439,440],{"class":194},"  --tf-toast-progress-bg",[188,442,219],{"class":198},[188,444,445],{"class":202}," color-mix",[188,447,206],{"class":198},[188,449,451],{"class":450},"sHdIc","in",[188,453,454],{"class":194}," srgb",[188,456,299],{"class":198},[188,458,355],{"class":198},[188,460,461],{"class":194},"ea580c ",[188,463,464],{"class":328},"18%",[188,466,299],{"class":198},[188,468,469],{"class":194}," transparent",[188,471,472],{"class":198},");\n",[188,474,476,479,481,483,485],{"class":190,"line":475},13,[188,477,478],{"class":194},"  --tf-toast-progress-bar-bg",[188,480,219],{"class":198},[188,482,355],{"class":198},[188,484,432],{"class":194},[188,486,260],{"class":198},[188,488,490],{"class":190,"line":489},14,[188,491,492],{"class":198},"}\n",[171,494,496,499,513,584],{"label":495},"Theme class",[148,497,498],{},"Use this when a toast should opt into a named visual style.",[148,500,501,504,505,508,509,512],{},[152,502,503],{},"theme: \"brand\""," maps to ",[152,506,507],{},".tf-toast-accent--brand",". If you pass a full class name that already starts with ",[152,510,511],{},"tf-toast-accent--",", Toastflow uses it as-is.",[178,514,516],{"className":180,"code":515,"filename":182,"language":183,"meta":184,"style":184},"toast.info({\n  title: \"Release\",\n  description: \"v1.0.0 is out.\",\n  theme: \"brand\",\n});\n",[152,517,518,530,545,560,576],{"__ignoreMap":184},[188,519,520,522,524,526,528],{"class":190,"line":191},[188,521,195],{"class":194},[188,523,199],{"class":198},[188,525,203],{"class":202},[188,527,206],{"class":194},[188,529,209],{"class":198},[188,531,532,534,536,538,541,543],{"class":190,"line":212},[188,533,216],{"class":215},[188,535,219],{"class":198},[188,537,222],{"class":198},[188,539,540],{"class":225},"Release",[188,542,228],{"class":198},[188,544,231],{"class":198},[188,546,547,549,551,553,556,558],{"class":190,"line":234},[188,548,237],{"class":215},[188,550,219],{"class":198},[188,552,222],{"class":198},[188,554,555],{"class":225},"v1.0.0 is out.",[188,557,228],{"class":198},[188,559,231],{"class":198},[188,561,562,565,567,569,572,574],{"class":190,"line":251},[188,563,564],{"class":215},"  theme",[188,566,219],{"class":198},[188,568,222],{"class":198},[188,570,571],{"class":225},"brand",[188,573,228],{"class":198},[188,575,231],{"class":198},[188,577,578,580,582],{"class":190,"line":334},[188,579,254],{"class":198},[188,581,257],{"class":194},[188,583,260],{"class":198},[178,585,587],{"className":263,"code":586,"filename":265,"language":154,"meta":184,"style":184},".tf-toast-accent--brand {\n  --tf-toast-bg: #ecfeff;\n  --tf-toast-color: #164e63;\n  --tf-toast-border-color: #67e8f9;\n  --tf-toast-title-color: #0e7490;\n  --tf-toast-description-color: #155e75;\n  --tf-toast-progress-bg: color-mix(in srgb, #0891b2 20%, transparent);\n  --tf-toast-progress-bar-bg: #0891b2;\n  --tf-toast-icon-color: #0891b2;\n}\n",[152,588,589,599,612,625,638,651,664,694,707,719],{"__ignoreMap":184},[188,590,591,593,597],{"class":190,"line":191},[188,592,199],{"class":198},[188,594,596],{"class":595},"sBMFI","tf-toast-accent--brand",[188,598,278],{"class":198},[188,600,601,603,605,607,610],{"class":190,"line":212},[188,602,350],{"class":194},[188,604,219],{"class":198},[188,606,355],{"class":198},[188,608,609],{"class":194},"ecfeff",[188,611,260],{"class":198},[188,613,614,616,618,620,623],{"class":190,"line":234},[188,615,366],{"class":194},[188,617,219],{"class":198},[188,619,355],{"class":198},[188,621,622],{"class":194},"164e63",[188,624,260],{"class":198},[188,626,627,629,631,633,636],{"class":190,"line":251},[188,628,410],{"class":194},[188,630,219],{"class":198},[188,632,355],{"class":198},[188,634,635],{"class":194},"67e8f9",[188,637,260],{"class":198},[188,639,640,642,644,646,649],{"class":190,"line":334},[188,641,381],{"class":194},[188,643,219],{"class":198},[188,645,355],{"class":198},[188,647,648],{"class":194},"0e7490",[188,650,260],{"class":198},[188,652,653,655,657,659,662],{"class":190,"line":347},[188,654,395],{"class":194},[188,656,219],{"class":198},[188,658,355],{"class":198},[188,660,661],{"class":194},"155e75",[188,663,260],{"class":198},[188,665,666,668,670,672,674,676,678,680,682,685,688,690,692],{"class":190,"line":363},[188,667,440],{"class":194},[188,669,219],{"class":198},[188,671,445],{"class":202},[188,673,206],{"class":198},[188,675,451],{"class":450},[188,677,454],{"class":194},[188,679,299],{"class":198},[188,681,355],{"class":198},[188,683,684],{"class":194},"0891b2 ",[188,686,687],{"class":328},"20%",[188,689,299],{"class":198},[188,691,469],{"class":194},[188,693,472],{"class":198},[188,695,696,698,700,702,705],{"class":190,"line":378},[188,697,478],{"class":194},[188,699,219],{"class":198},[188,701,355],{"class":198},[188,703,704],{"class":194},"0891b2",[188,706,260],{"class":198},[188,708,709,711,713,715,717],{"class":190,"line":392},[188,710,425],{"class":194},[188,712,219],{"class":198},[188,714,355],{"class":198},[188,716,704],{"class":194},[188,718,260],{"class":198},[188,720,721],{"class":190,"line":407},[188,722,492],{"class":198},[171,724,726,729],{"label":725},"Inline override",[148,727,728],{},"Use this only for one-off cases generated from runtime data.",[178,730,732],{"className":180,"code":731,"filename":182,"language":183,"meta":184,"style":184},"toast.custom({\n  title: \"Runtime accent\",\n  description: \"One-off color override, inherited global structure.\",\n  css: {\n    bg: \"#450a0a\",\n    color: \"#fff1f2\",\n    titleColor: \"#ffe4e6\",\n    descriptionColor: \"#fecdd3\",\n    borderColor: \"#fb7185\",\n    iconColor: \"#fbbf24\",\n    progressBg: \"color-mix(in srgb, #fbbf24 20%, transparent)\",\n    progressBarBg: \"#fbbf24\",\n  },\n});\n",[152,733,734,747,762,777,786,802,818,834,850,866,882,898,913,918],{"__ignoreMap":184},[188,735,736,738,740,743,745],{"class":190,"line":191},[188,737,195],{"class":194},[188,739,199],{"class":198},[188,741,742],{"class":202},"custom",[188,744,206],{"class":194},[188,746,209],{"class":198},[188,748,749,751,753,755,758,760],{"class":190,"line":212},[188,750,216],{"class":215},[188,752,219],{"class":198},[188,754,222],{"class":198},[188,756,757],{"class":225},"Runtime accent",[188,759,228],{"class":198},[188,761,231],{"class":198},[188,763,764,766,768,770,773,775],{"class":190,"line":234},[188,765,237],{"class":215},[188,767,219],{"class":198},[188,769,222],{"class":198},[188,771,772],{"class":225},"One-off color override, inherited global structure.",[188,774,228],{"class":198},[188,776,231],{"class":198},[188,778,779,782,784],{"class":190,"line":251},[188,780,781],{"class":215},"  css",[188,783,219],{"class":198},[188,785,278],{"class":198},[188,787,788,791,793,795,798,800],{"class":190,"line":334},[188,789,790],{"class":215},"    bg",[188,792,219],{"class":198},[188,794,222],{"class":198},[188,796,797],{"class":225},"#450a0a",[188,799,228],{"class":198},[188,801,231],{"class":198},[188,803,804,807,809,811,814,816],{"class":190,"line":347},[188,805,806],{"class":215},"    color",[188,808,219],{"class":198},[188,810,222],{"class":198},[188,812,813],{"class":225},"#fff1f2",[188,815,228],{"class":198},[188,817,231],{"class":198},[188,819,820,823,825,827,830,832],{"class":190,"line":363},[188,821,822],{"class":215},"    titleColor",[188,824,219],{"class":198},[188,826,222],{"class":198},[188,828,829],{"class":225},"#ffe4e6",[188,831,228],{"class":198},[188,833,231],{"class":198},[188,835,836,839,841,843,846,848],{"class":190,"line":378},[188,837,838],{"class":215},"    descriptionColor",[188,840,219],{"class":198},[188,842,222],{"class":198},[188,844,845],{"class":225},"#fecdd3",[188,847,228],{"class":198},[188,849,231],{"class":198},[188,851,852,855,857,859,862,864],{"class":190,"line":392},[188,853,854],{"class":215},"    borderColor",[188,856,219],{"class":198},[188,858,222],{"class":198},[188,860,861],{"class":225},"#fb7185",[188,863,228],{"class":198},[188,865,231],{"class":198},[188,867,868,871,873,875,878,880],{"class":190,"line":407},[188,869,870],{"class":215},"    iconColor",[188,872,219],{"class":198},[188,874,222],{"class":198},[188,876,877],{"class":225},"#fbbf24",[188,879,228],{"class":198},[188,881,231],{"class":198},[188,883,884,887,889,891,894,896],{"class":190,"line":422},[188,885,886],{"class":215},"    progressBg",[188,888,219],{"class":198},[188,890,222],{"class":198},[188,892,893],{"class":225},"color-mix(in srgb, #fbbf24 20%, transparent)",[188,895,228],{"class":198},[188,897,231],{"class":198},[188,899,900,903,905,907,909,911],{"class":190,"line":437},[188,901,902],{"class":215},"    progressBarBg",[188,904,219],{"class":198},[188,906,222],{"class":198},[188,908,877],{"class":225},[188,910,228],{"class":198},[188,912,231],{"class":198},[188,914,915],{"class":190,"line":475},[188,916,917],{"class":198},"  },\n",[188,919,920,922,924],{"class":190,"line":489},[188,921,254],{"class":198},[188,923,257],{"class":194},[188,925,260],{"class":198},[148,927,928,929,932,933,935],{},"The live preview below mirrors all three tabs. It scopes the global variables around a local preview container, so ",[930,931,495],"strong",{}," and ",[930,934,725],{}," inherit the global font, radius, and spacing while overriding only their own color tokens.",[937,938,940,944,1084,1088,1091,1560,1564,1567,1617,1629,1633,1640,1754,1769,1773,1903,1923,1931,1940,2008,2012,2024,2093,2115,2120,2132,2236,2239,2252,2256],"docs-toast-preview",{"variant":939},"styling",[163,941,943],{"id":942},"common-variables","Common Variables",[945,946,947,960],"table",{},[948,949,950],"thead",{},[951,952,953,957],"tr",{},[954,955,956],"th",{},"Variable",[954,958,959],{},"Controls",[961,962,963,974,984,994,1004,1014,1024,1034,1044,1054,1064,1074],"tbody",{},[951,964,965,971],{},[966,967,968],"td",{},[152,969,970],{},"--tf-toast-bg",[966,972,973],{},"Toast background",[951,975,976,981],{},[966,977,978],{},[152,979,980],{},"--tf-toast-color",[966,982,983],{},"Title and main text",[951,985,986,991],{},[966,987,988],{},[152,989,990],{},"--tf-toast-description-color",[966,992,993],{},"Description text",[951,995,996,1001],{},[966,997,998],{},[152,999,1000],{},"--tf-toast-border-color",[966,1002,1003],{},"Card border",[951,1005,1006,1011],{},[966,1007,1008],{},[152,1009,1010],{},"--tf-toast-border-radius",[966,1012,1013],{},"Card radius",[951,1015,1016,1021],{},[966,1017,1018],{},[152,1019,1020],{},"--tf-toast-font-family",[966,1022,1023],{},"Card typography",[951,1025,1026,1031],{},[966,1027,1028],{},[152,1029,1030],{},"--tf-toast-padding",[966,1032,1033],{},"Card padding",[951,1035,1036,1041],{},[966,1037,1038],{},[152,1039,1040],{},"--tf-toast-progress-bar-bg",[966,1042,1043],{},"Progress bar fill",[951,1045,1046,1051],{},[966,1047,1048],{},[152,1049,1050],{},"--tf-toast-progress-bg",[966,1052,1053],{},"Progress track",[951,1055,1056,1061],{},[966,1057,1058],{},[152,1059,1060],{},"--tf-toast-icon-color",[966,1062,1063],{},"Current toast icon",[951,1065,1066,1071],{},[966,1067,1068],{},[152,1069,1070],{},"--tf-toast-icon-success",[966,1072,1073],{},"Success icon color",[951,1075,1076,1081],{},[966,1077,1078],{},[152,1079,1080],{},"--tf-toast-icon-error",[966,1082,1083],{},"Error icon color",[163,1085,1087],{"id":1086},"disable-shipped-css","Disable Shipped CSS",[148,1089,1090],{},"Disable the packaged stylesheet when you want to own every Toastflow CSS variable yourself. The setup is different for Nuxt and plain Vue.",[1092,1093,1096,1192,1310,1443],"code-tree",{":expand-all":1094,"default-value":1095},"true","nuxt\u002Fnuxt.config.ts",[178,1097,1099],{"className":180,"code":1098,"filename":1095,"language":183,"meta":184,"style":184},"export default defineNuxtConfig({\n  modules: [\"nuxt-toastflow\"],\n  css: [\"~\u002Fassets\u002Ftoastflow.css\"],\n  toastflow: {\n    css: false,\n  },\n});\n",[152,1100,1101,1117,1139,1158,1167,1180,1184],{"__ignoreMap":184},[188,1102,1103,1107,1110,1113,1115],{"class":190,"line":191},[188,1104,1106],{"class":1105},"s7zQu","export",[188,1108,1109],{"class":1105}," default",[188,1111,1112],{"class":202}," defineNuxtConfig",[188,1114,206],{"class":194},[188,1116,209],{"class":198},[188,1118,1119,1122,1124,1127,1129,1132,1134,1137],{"class":190,"line":212},[188,1120,1121],{"class":215},"  modules",[188,1123,219],{"class":198},[188,1125,1126],{"class":194}," [",[188,1128,228],{"class":198},[188,1130,1131],{"class":225},"nuxt-toastflow",[188,1133,228],{"class":198},[188,1135,1136],{"class":194},"]",[188,1138,231],{"class":198},[188,1140,1141,1143,1145,1147,1149,1152,1154,1156],{"class":190,"line":234},[188,1142,781],{"class":215},[188,1144,219],{"class":198},[188,1146,1126],{"class":194},[188,1148,228],{"class":198},[188,1150,1151],{"class":225},"~\u002Fassets\u002Ftoastflow.css",[188,1153,228],{"class":198},[188,1155,1136],{"class":194},[188,1157,231],{"class":198},[188,1159,1160,1163,1165],{"class":190,"line":251},[188,1161,1162],{"class":215},"  toastflow",[188,1164,219],{"class":198},[188,1166,278],{"class":198},[188,1168,1169,1172,1174,1178],{"class":190,"line":334},[188,1170,1171],{"class":215},"    css",[188,1173,219],{"class":198},[188,1175,1177],{"class":1176},"sfNiH"," false",[188,1179,231],{"class":198},[188,1181,1182],{"class":190,"line":347},[188,1183,917],{"class":198},[188,1185,1186,1188,1190],{"class":190,"line":363},[188,1187,254],{"class":198},[188,1189,257],{"class":194},[188,1191,260],{"class":198},[178,1193,1196],{"className":263,"code":1194,"filename":1195,"language":154,"meta":184,"style":184},":root {\n  --tf-toast-font-family:\n    \"IBM Plex Mono\", \"SFMono-Regular\", Consolas, monospace;\n  --tf-toast-border-radius: 4px;\n  --tf-toast-padding: 18px;\n  --tf-toast-bg: #fff7ed;\n  --tf-toast-color: #431407;\n  --tf-toast-border-color: #fb923c;\n  --tf-toast-icon-color: #ea580c;\n}\n","nuxt\u002Fassets\u002Ftoastflow.css",[152,1197,1198,1206,1212,1238,1248,1258,1270,1282,1294,1306],{"__ignoreMap":184},[188,1199,1200,1202,1204],{"class":190,"line":191},[188,1201,219],{"class":198},[188,1203,275],{"class":274},[188,1205,278],{"class":198},[188,1207,1208,1210],{"class":190,"line":212},[188,1209,283],{"class":194},[188,1211,286],{"class":198},[188,1213,1214,1216,1218,1220,1222,1224,1226,1228,1230,1232,1234,1236],{"class":190,"line":234},[188,1215,291],{"class":198},[188,1217,294],{"class":225},[188,1219,228],{"class":198},[188,1221,299],{"class":198},[188,1223,222],{"class":198},[188,1225,304],{"class":225},[188,1227,228],{"class":198},[188,1229,299],{"class":198},[188,1231,311],{"class":194},[188,1233,299],{"class":198},[188,1235,316],{"class":194},[188,1237,260],{"class":198},[188,1239,1240,1242,1244,1246],{"class":190,"line":251},[188,1241,323],{"class":194},[188,1243,219],{"class":198},[188,1245,329],{"class":328},[188,1247,260],{"class":198},[188,1249,1250,1252,1254,1256],{"class":190,"line":334},[188,1251,337],{"class":194},[188,1253,219],{"class":198},[188,1255,342],{"class":328},[188,1257,260],{"class":198},[188,1259,1260,1262,1264,1266,1268],{"class":190,"line":347},[188,1261,350],{"class":194},[188,1263,219],{"class":198},[188,1265,355],{"class":198},[188,1267,358],{"class":194},[188,1269,260],{"class":198},[188,1271,1272,1274,1276,1278,1280],{"class":190,"line":363},[188,1273,366],{"class":194},[188,1275,219],{"class":198},[188,1277,355],{"class":198},[188,1279,373],{"class":194},[188,1281,260],{"class":198},[188,1283,1284,1286,1288,1290,1292],{"class":190,"line":378},[188,1285,410],{"class":194},[188,1287,219],{"class":198},[188,1289,355],{"class":198},[188,1291,417],{"class":194},[188,1293,260],{"class":198},[188,1295,1296,1298,1300,1302,1304],{"class":190,"line":392},[188,1297,425],{"class":194},[188,1299,219],{"class":198},[188,1301,355],{"class":198},[188,1303,432],{"class":194},[188,1305,260],{"class":198},[188,1307,1308],{"class":190,"line":407},[188,1309,492],{"class":198},[178,1311,1314],{"className":180,"code":1312,"filename":1313,"language":183,"meta":184,"style":184},"import { createApp } from \"vue\";\nimport { createToastflow } from \"vue-toastflow\";\nimport \".\u002Ftoastflow.css\";\n\ncreateApp(App)\n  .use(createToastflow({}, { css: false }))\n  .mount(\"#app\");\n","vue\u002Fsrc\u002Fmain.ts",[152,1315,1316,1342,1364,1377,1383,1391,1423],{"__ignoreMap":184},[188,1317,1318,1321,1324,1327,1330,1333,1335,1338,1340],{"class":190,"line":191},[188,1319,1320],{"class":1105},"import",[188,1322,1323],{"class":198}," {",[188,1325,1326],{"class":194}," createApp",[188,1328,1329],{"class":198}," }",[188,1331,1332],{"class":1105}," from",[188,1334,222],{"class":198},[188,1336,1337],{"class":225},"vue",[188,1339,228],{"class":198},[188,1341,260],{"class":198},[188,1343,1344,1346,1348,1351,1353,1355,1357,1360,1362],{"class":190,"line":212},[188,1345,1320],{"class":1105},[188,1347,1323],{"class":198},[188,1349,1350],{"class":194}," createToastflow",[188,1352,1329],{"class":198},[188,1354,1332],{"class":1105},[188,1356,222],{"class":198},[188,1358,1359],{"class":225},"vue-toastflow",[188,1361,228],{"class":198},[188,1363,260],{"class":198},[188,1365,1366,1368,1370,1373,1375],{"class":190,"line":234},[188,1367,1320],{"class":1105},[188,1369,222],{"class":198},[188,1371,1372],{"class":225},".\u002Ftoastflow.css",[188,1374,228],{"class":198},[188,1376,260],{"class":198},[188,1378,1379],{"class":190,"line":251},[188,1380,1382],{"emptyLinePlaceholder":1381},true,"\n",[188,1384,1385,1388],{"class":190,"line":334},[188,1386,1387],{"class":202},"createApp",[188,1389,1390],{"class":194},"(App)\n",[188,1392,1393,1396,1399,1401,1404,1406,1409,1411,1414,1416,1418,1420],{"class":190,"line":347},[188,1394,1395],{"class":198},"  .",[188,1397,1398],{"class":202},"use",[188,1400,206],{"class":194},[188,1402,1403],{"class":202},"createToastflow",[188,1405,206],{"class":194},[188,1407,1408],{"class":198},"{},",[188,1410,1323],{"class":198},[188,1412,1413],{"class":215}," css",[188,1415,219],{"class":198},[188,1417,1177],{"class":1176},[188,1419,1329],{"class":198},[188,1421,1422],{"class":194},"))\n",[188,1424,1425,1427,1430,1432,1434,1437,1439,1441],{"class":190,"line":363},[188,1426,1395],{"class":198},[188,1428,1429],{"class":202},"mount",[188,1431,206],{"class":194},[188,1433,228],{"class":198},[188,1435,1436],{"class":225},"#app",[188,1438,228],{"class":198},[188,1440,257],{"class":194},[188,1442,260],{"class":198},[178,1444,1446],{"className":263,"code":1194,"filename":1445,"language":154,"meta":184,"style":184},"vue\u002Fsrc\u002Ftoastflow.css",[152,1447,1448,1456,1462,1488,1498,1508,1520,1532,1544,1556],{"__ignoreMap":184},[188,1449,1450,1452,1454],{"class":190,"line":191},[188,1451,219],{"class":198},[188,1453,275],{"class":274},[188,1455,278],{"class":198},[188,1457,1458,1460],{"class":190,"line":212},[188,1459,283],{"class":194},[188,1461,286],{"class":198},[188,1463,1464,1466,1468,1470,1472,1474,1476,1478,1480,1482,1484,1486],{"class":190,"line":234},[188,1465,291],{"class":198},[188,1467,294],{"class":225},[188,1469,228],{"class":198},[188,1471,299],{"class":198},[188,1473,222],{"class":198},[188,1475,304],{"class":225},[188,1477,228],{"class":198},[188,1479,299],{"class":198},[188,1481,311],{"class":194},[188,1483,299],{"class":198},[188,1485,316],{"class":194},[188,1487,260],{"class":198},[188,1489,1490,1492,1494,1496],{"class":190,"line":251},[188,1491,323],{"class":194},[188,1493,219],{"class":198},[188,1495,329],{"class":328},[188,1497,260],{"class":198},[188,1499,1500,1502,1504,1506],{"class":190,"line":334},[188,1501,337],{"class":194},[188,1503,219],{"class":198},[188,1505,342],{"class":328},[188,1507,260],{"class":198},[188,1509,1510,1512,1514,1516,1518],{"class":190,"line":347},[188,1511,350],{"class":194},[188,1513,219],{"class":198},[188,1515,355],{"class":198},[188,1517,358],{"class":194},[188,1519,260],{"class":198},[188,1521,1522,1524,1526,1528,1530],{"class":190,"line":363},[188,1523,366],{"class":194},[188,1525,219],{"class":198},[188,1527,355],{"class":198},[188,1529,373],{"class":194},[188,1531,260],{"class":198},[188,1533,1534,1536,1538,1540,1542],{"class":190,"line":378},[188,1535,410],{"class":194},[188,1537,219],{"class":198},[188,1539,355],{"class":198},[188,1541,417],{"class":194},[188,1543,260],{"class":198},[188,1545,1546,1548,1550,1552,1554],{"class":190,"line":392},[188,1547,425],{"class":194},[188,1549,219],{"class":198},[188,1551,355],{"class":198},[188,1553,432],{"class":194},[188,1555,260],{"class":198},[188,1557,1558],{"class":190,"line":407},[188,1559,492],{"class":198},[163,1561,1563],{"id":1562},"color-override-priority","Color Override Priority",[148,1565,1566],{},"When multiple layers set the same color, Toastflow resolves in this order:",[1568,1569,1570,1580,1591,1602],"ol",{},[1571,1572,1573,1579],"li",{},[930,1574,1575,1576,1578],{},"Per-toast ",[152,1577,154],{}," prop"," (inline style)",[1571,1581,1582,1588,1589,257],{},[930,1583,1575,1584,1587],{},[152,1585,1586],{},"theme"," class"," (",[152,1590,507],{},[1571,1592,1593,1588,1596,1598,1599,257],{},[930,1594,1595],{},"Global override",[152,1597,970],{}," on ",[152,1600,1601],{},":root",[1571,1603,1604,1588,1607,1610,1611,1610,1614,1616],{},[930,1605,1606],{},"Built-in type\u002Fdefault preset",[152,1608,1609],{},"success",", ",[152,1612,1613],{},"error",[152,1615,742],{},", ...)",[148,1618,1619,1621,1622,1625,1626,1628],{},[152,1620,980],{}," cascades to title and description colors unless ",[152,1623,1624],{},"--tf-toast-title-color"," or ",[152,1627,990],{}," is explicitly set.",[163,1630,1632],{"id":1631},"tailwind-css-v4","Tailwind CSS v4",[148,1634,1635,1636,1639],{},"Use ",[152,1637,1638],{},"@layer base"," to override Toastflow tokens in Tailwind v4:",[178,1641,1643],{"className":263,"code":1642,"language":154,"meta":184,"style":184},"@layer base {\n  :root {\n    --tf-toast-bg: var(--color-background-subtle);\n    --tf-toast-color: var(--color-foreground);\n    --tf-toast-border-color: var(--color-border);\n    --tf-toast-border-radius: var(--radius-lg);\n    --tf-toast-font-family: var(--font-sans);\n  }\n}\n",[152,1644,1645,1655,1664,1681,1697,1713,1729,1745,1750],{"__ignoreMap":184},[188,1646,1647,1650,1653],{"class":190,"line":191},[188,1648,1649],{"class":1105},"@layer",[188,1651,1652],{"class":194}," base ",[188,1654,209],{"class":198},[188,1656,1657,1660,1662],{"class":190,"line":212},[188,1658,1659],{"class":198},"  :",[188,1661,275],{"class":274},[188,1663,278],{"class":198},[188,1665,1666,1669,1671,1674,1676,1679],{"class":190,"line":234},[188,1667,1668],{"class":194},"    --tf-toast-bg",[188,1670,219],{"class":198},[188,1672,1673],{"class":202}," var",[188,1675,206],{"class":198},[188,1677,1678],{"class":194},"--color-background-subtle",[188,1680,472],{"class":198},[188,1682,1683,1686,1688,1690,1692,1695],{"class":190,"line":251},[188,1684,1685],{"class":194},"    --tf-toast-color",[188,1687,219],{"class":198},[188,1689,1673],{"class":202},[188,1691,206],{"class":198},[188,1693,1694],{"class":194},"--color-foreground",[188,1696,472],{"class":198},[188,1698,1699,1702,1704,1706,1708,1711],{"class":190,"line":334},[188,1700,1701],{"class":194},"    --tf-toast-border-color",[188,1703,219],{"class":198},[188,1705,1673],{"class":202},[188,1707,206],{"class":198},[188,1709,1710],{"class":194},"--color-border",[188,1712,472],{"class":198},[188,1714,1715,1718,1720,1722,1724,1727],{"class":190,"line":347},[188,1716,1717],{"class":194},"    --tf-toast-border-radius",[188,1719,219],{"class":198},[188,1721,1673],{"class":202},[188,1723,206],{"class":198},[188,1725,1726],{"class":194},"--radius-lg",[188,1728,472],{"class":198},[188,1730,1731,1734,1736,1738,1740,1743],{"class":190,"line":363},[188,1732,1733],{"class":194},"    --tf-toast-font-family",[188,1735,219],{"class":198},[188,1737,1673],{"class":202},[188,1739,206],{"class":198},[188,1741,1742],{"class":194},"--font-sans",[188,1744,472],{"class":198},[188,1746,1747],{"class":190,"line":378},[188,1748,1749],{"class":198},"  }\n",[188,1751,1752],{"class":190,"line":392},[188,1753,492],{"class":198},[157,1755,1758,1761,1762,1764,1765,1768],{"color":1756,"icon":1757},"warning","i-tabler-alert-circle",[152,1759,1760],{},"@theme"," will not work — Tailwind wraps ",[152,1763,1760],{}," in ",[152,1766,1767],{},"@layer theme",", which has lower priority than Toastflow's unlayered styles.",[163,1770,1772],{"id":1771},"more-variable-groups","More Variable Groups",[945,1774,1775,1784],{},[948,1776,1777],{},[951,1778,1779,1782],{},[954,1780,1781],{},"Group",[954,1783,86],{},[961,1785,1786,1802,1817,1832,1847,1859,1874,1889],{},[951,1787,1788,1793],{},[966,1789,1790],{},[930,1791,1792],{},"Layout",[966,1794,1795,1610,1797,1610,1800],{},[152,1796,1030],{},[152,1798,1799],{},"--tf-toast-gap",[152,1801,1010],{},[951,1803,1804,1809],{},[966,1805,1806],{},[930,1807,1808],{},"Stack",[966,1810,1811,1610,1814],{},[152,1812,1813],{},"--tf-toast-stack-padding-top",[152,1815,1816],{},"--tf-toast-stack-padding-right",[951,1818,1819,1824],{},[966,1820,1821],{},[930,1822,1823],{},"Typography",[966,1825,1826,1610,1829],{},[152,1827,1828],{},"--tf-toast-title-font-size",[152,1830,1831],{},"--tf-toast-description-line-height",[951,1833,1834,1839],{},[966,1835,1836],{},[930,1837,1838],{},"Close button",[966,1840,1841,1610,1844],{},[152,1842,1843],{},"--tf-toast-close-size",[152,1845,1846],{},"--tf-toast-close-icon-size",[951,1848,1849,1854],{},[966,1850,1851],{},[930,1852,1853],{},"Action buttons",[966,1855,1856],{},[152,1857,1858],{},"--tf-toast-button-*",[951,1860,1861,1866],{},[966,1862,1863],{},[930,1864,1865],{},"Progress",[966,1867,1868,1610,1871],{},[152,1869,1870],{},"--tf-toast-progress-height",[152,1872,1873],{},"--tf-toast-progress-duration",[951,1875,1876,1881],{},[966,1877,1878],{},[930,1879,1880],{},"Motion",[966,1882,1883,1610,1886],{},[152,1884,1885],{},"--tf-toast-animation-in-duration",[152,1887,1888],{},"--tf-toast-animation-out-duration",[951,1890,1891,1896],{},[966,1892,1893],{},[930,1894,1895],{},"Shorthands",[966,1897,1898,1610,1901],{},[152,1899,1900],{},"--tf-toast-accent-color",[152,1902,1060],{},[157,1904,1905,1908,1909,1919,1920,1922],{"color":159,"icon":98},[930,1906,1907],{},"Full variable reference:"," every variable and its default lives in ",[1910,1911,1916],"a",{"href":1912,"rel":1913,"target":1915},"https:\u002F\u002Fgithub.com\u002Fadrianjanocko\u002Ftoastflow\u002Fblob\u002Fmain\u002Fpackages\u002Fvue\u002Fsrc\u002Fstyles.css",[1914],"nofollow","\\_blank",[152,1917,1918],{},"packages\u002Fvue\u002Fsrc\u002Fstyles.css"," — the ",[152,1921,1601],{}," block is the source of truth.",[163,1924,1926,1927,1930],{"id":1925},"the-accentcolor-shorthand","The ",[152,1928,1929],{},"accentColor"," Shorthand",[148,1932,1933,1934,1936,1937,1939],{},"In the per-toast ",[152,1935,154],{}," prop, ",[152,1938,1929],{}," sets the text, title, description, and progress bar colors at once:",[178,1941,1943],{"className":180,"code":1942,"language":183,"meta":184,"style":184},"toast.custom({\n  title: \"One color, four tokens\",\n  css: {\n    accentColor: \"#0891b2\",\n  },\n});\n",[152,1944,1945,1957,1972,1980,1996,2000],{"__ignoreMap":184},[188,1946,1947,1949,1951,1953,1955],{"class":190,"line":191},[188,1948,195],{"class":194},[188,1950,199],{"class":198},[188,1952,742],{"class":202},[188,1954,206],{"class":194},[188,1956,209],{"class":198},[188,1958,1959,1961,1963,1965,1968,1970],{"class":190,"line":212},[188,1960,216],{"class":215},[188,1962,219],{"class":198},[188,1964,222],{"class":198},[188,1966,1967],{"class":225},"One color, four tokens",[188,1969,228],{"class":198},[188,1971,231],{"class":198},[188,1973,1974,1976,1978],{"class":190,"line":234},[188,1975,781],{"class":215},[188,1977,219],{"class":198},[188,1979,278],{"class":198},[188,1981,1982,1985,1987,1989,1992,1994],{"class":190,"line":251},[188,1983,1984],{"class":215},"    accentColor",[188,1986,219],{"class":198},[188,1988,222],{"class":198},[188,1990,1991],{"class":225},"#0891b2",[188,1993,228],{"class":198},[188,1995,231],{"class":198},[188,1997,1998],{"class":190,"line":334},[188,1999,917],{"class":198},[188,2001,2002,2004,2006],{"class":190,"line":347},[188,2003,254],{"class":198},[188,2005,257],{"class":194},[188,2007,260],{"class":198},[163,2009,2011],{"id":2010},"html-support","HTML Support",[148,2013,2014,2017,2018,932,2021,219],{},[152,2015,2016],{},"supportHtml: true"," enables HTML in ",[152,2019,2020],{},"title",[152,2022,2023],{},"description",[178,2025,2027],{"className":180,"code":2026,"language":183,"meta":184,"style":184},"toast.info({\n  title: \"\u003Cstrong>Release\u003C\u002Fstrong>\",\n  description: 'Read \u003Ca href=\"\u002Fchangelog\">changelog\u003C\u002Fa>',\n  supportHtml: true,\n});\n",[152,2028,2029,2041,2056,2073,2085],{"__ignoreMap":184},[188,2030,2031,2033,2035,2037,2039],{"class":190,"line":191},[188,2032,195],{"class":194},[188,2034,199],{"class":198},[188,2036,203],{"class":202},[188,2038,206],{"class":194},[188,2040,209],{"class":198},[188,2042,2043,2045,2047,2049,2052,2054],{"class":190,"line":212},[188,2044,216],{"class":215},[188,2046,219],{"class":198},[188,2048,222],{"class":198},[188,2050,2051],{"class":225},"\u003Cstrong>Release\u003C\u002Fstrong>",[188,2053,228],{"class":198},[188,2055,231],{"class":198},[188,2057,2058,2060,2062,2065,2068,2071],{"class":190,"line":234},[188,2059,237],{"class":215},[188,2061,219],{"class":198},[188,2063,2064],{"class":198}," '",[188,2066,2067],{"class":225},"Read \u003Ca href=\"\u002Fchangelog\">changelog\u003C\u002Fa>",[188,2069,2070],{"class":198},"'",[188,2072,231],{"class":198},[188,2074,2075,2078,2080,2083],{"class":190,"line":251},[188,2076,2077],{"class":215},"  supportHtml",[188,2079,219],{"class":198},[188,2081,2082],{"class":1176}," true",[188,2084,231],{"class":198},[188,2086,2087,2089,2091],{"class":190,"line":334},[188,2088,254],{"class":198},[188,2090,257],{"class":194},[188,2092,260],{"class":198},[157,2094,2095,2096,2099,2100,2103,2104,2107,2108,2111,2112,2114],{"color":1756,"icon":1757},"Toastflow does not sanitize HTML by default — this applies to ",[152,2097,2098],{},"supportHtml"," content ",[930,2101,2102],{},"and"," ",[152,2105,2106],{},"html"," buttons. Rendering untrusted input (user submissions, API error messages, URL params) this way is an XSS vector. Configure the ",[152,2109,2110],{},"sanitizer"," hook below, sanitize the content yourself before passing it in, or keep ",[152,2113,2098],{}," off.",[2116,2117,2119],"h3",{"id":2118},"sanitizer-hook","Sanitizer Hook",[148,2121,2122,2123,2125,2126,2128,2129,2131],{},"Set ",[152,2124,2110],{}," once in the global config and every HTML render (",[152,2127,2098],{}," titles\u002Fdescriptions and ",[152,2130,2106],{}," buttons) goes through it:",[178,2133,2135],{"className":180,"code":2134,"language":183,"meta":184,"style":184},"import DOMPurify from \"dompurify\";\n\napp.use(\n  createToastflow({\n    supportHtml: true,\n    sanitizer: (html) => DOMPurify.sanitize(html),\n  }),\n);\n",[152,2136,2137,2156,2160,2172,2181,2192,2221,2230],{"__ignoreMap":184},[188,2138,2139,2141,2144,2147,2149,2152,2154],{"class":190,"line":191},[188,2140,1320],{"class":1105},[188,2142,2143],{"class":194}," DOMPurify ",[188,2145,2146],{"class":1105},"from",[188,2148,222],{"class":198},[188,2150,2151],{"class":225},"dompurify",[188,2153,228],{"class":198},[188,2155,260],{"class":198},[188,2157,2158],{"class":190,"line":212},[188,2159,1382],{"emptyLinePlaceholder":1381},[188,2161,2162,2165,2167,2169],{"class":190,"line":234},[188,2163,2164],{"class":194},"app",[188,2166,199],{"class":198},[188,2168,1398],{"class":202},[188,2170,2171],{"class":194},"(\n",[188,2173,2174,2177,2179],{"class":190,"line":251},[188,2175,2176],{"class":202},"  createToastflow",[188,2178,206],{"class":194},[188,2180,209],{"class":198},[188,2182,2183,2186,2188,2190],{"class":190,"line":334},[188,2184,2185],{"class":215},"    supportHtml",[188,2187,219],{"class":198},[188,2189,2082],{"class":1176},[188,2191,231],{"class":198},[188,2193,2194,2197,2199,2201,2203,2205,2208,2211,2213,2216,2219],{"class":190,"line":347},[188,2195,2196],{"class":202},"    sanitizer",[188,2198,219],{"class":198},[188,2200,1588],{"class":198},[188,2202,2106],{"class":450},[188,2204,257],{"class":198},[188,2206,2207],{"class":274}," =>",[188,2209,2210],{"class":194}," DOMPurify",[188,2212,199],{"class":198},[188,2214,2215],{"class":202},"sanitize",[188,2217,2218],{"class":194},"(html)",[188,2220,231],{"class":198},[188,2222,2223,2226,2228],{"class":190,"line":363},[188,2224,2225],{"class":198},"  }",[188,2227,257],{"class":194},[188,2229,231],{"class":198},[188,2231,2232,2234],{"class":190,"line":378},[188,2233,257],{"class":194},[188,2235,260],{"class":198},[148,2237,2238],{},"The hook receives the raw HTML string and returns the sanitized string. If it throws, the content is dropped instead of rendered raw. Like any other option, it can be overridden per toast.",[157,2240,2242,2243,2245,2246,2249,2250,199],{"color":203,"icon":2241},"i-tabler-info-circle","In Nuxt, ",[152,2244,2110],{}," is a function and cannot live in ",[152,2247,2248],{},"nuxt.config"," (config is JSON-serialized). Configure it in a client plugin instead — see ",[1910,2251,65],{"href":66},[163,2253,2255],{"id":2254},"when-css-is-not-enough","When CSS Is Not Enough",[2257,2258,2259,2264],"card-group",{},[2260,2261,2263],"card",{"icon":84,"title":2262,"to":82},"Headless slot","Keep the Vue store and accessibility helpers, but render your own toast card.",[2260,2265,2267],{"icon":79,"title":2266,"to":77},"Core store","Use the framework-agnostic store and build your renderer from scratch.",[2269,2270,2271],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":184,"searchDepth":212,"depth":212,"links":2273},[2274,2275,2276,2277,2278,2279,2280,2282,2285],{"id":165,"depth":212,"text":166},{"id":942,"depth":212,"text":943},{"id":1086,"depth":212,"text":1087},{"id":1562,"depth":212,"text":1563},{"id":1631,"depth":212,"text":1632},{"id":1771,"depth":212,"text":1772},{"id":1925,"depth":212,"text":2281},"The accentColor Shorthand",{"id":2010,"depth":212,"text":2011,"children":2283},[2284],{"id":2118,"depth":234,"text":2119},{"id":2254,"depth":212,"text":2255},"Customize Toastflow with CSS variables, theme classes, and headless rendering.","md",null,{},{"icon":18},{"title":15,"description":2286},"LXWzexATnwJm3rYrdD8KfFOdneQ4yzEBbSlKPId-HZo",[2294,2296],{"title":11,"path":12,"stem":13,"description":2295,"icon":6,"children":-1},"Pick the right Toastflow package and learn the shared runtime model.",{"title":27,"path":28,"stem":29,"description":2297,"icon":22,"children":-1},"Install Toastflow in Vue and show your first toast."]