[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation_docs":3,"-docs-headless-headless-slot":142,"-docs-headless-headless-slot-surround":901},[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":81,"body":144,"description":894,"extension":895,"links":896,"meta":897,"navigation":898,"path":82,"seo":899,"stem":83,"__hash__":900},"docs\u002Fdocs\u002F4.headless\u002F2.headless-slot.md",{"type":145,"value":146,"toc":882},"minimark",[147,156,161,366,370,543,551,590,594,601,878],[148,149,150,151,155],"p",{},"Use the ",[152,153,154],"code",{},"ToastContainer"," slot in Vue or Nuxt when you like Toastflow's runtime behavior but need your own card markup.",[157,158,160],"h2",{"id":159},"basic-slot","Basic Slot",[162,163,169],"pre",{"className":164,"code":165,"filename":166,"language":167,"meta":168,"style":168},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CToastContainer v-slot=\"{ toast, ui }\">\n  \u003Cdiv v-bind=\"ui.wrapperProps\">\n    \u003Carticle v-bind=\"ui.getRootProps({ class: 'my-toast' })\">\n      \u003Cstrong>{{ toast.title }}\u003C\u002Fstrong>\n      \u003Cp v-if=\"toast.description\">{{ toast.description }}\u003C\u002Fp>\n\n      \u003Cbutton v-bind=\"ui.getCloseProps()\">Close\u003C\u002Fbutton>\n    \u003C\u002Farticle>\n  \u003C\u002Fdiv>\n\u003C\u002FToastContainer>\n","App.vue","html","",[152,170,171,202,225,247,270,300,307,337,347,357],{"__ignoreMap":168},[172,173,176,180,183,187,190,193,197,199],"span",{"class":174,"line":175},"line",1,[172,177,179],{"class":178},"sMK4o","\u003C",[172,181,154],{"class":182},"swJcz",[172,184,186],{"class":185},"spNyl"," v-slot",[172,188,189],{"class":178},"=",[172,191,192],{"class":178},"\"",[172,194,196],{"class":195},"sfazB","{ toast, ui }",[172,198,192],{"class":178},[172,200,201],{"class":178},">\n",[172,203,205,208,211,214,216,218,221,223],{"class":174,"line":204},2,[172,206,207],{"class":178},"  \u003C",[172,209,210],{"class":182},"div",[172,212,213],{"class":185}," v-bind",[172,215,189],{"class":178},[172,217,192],{"class":178},[172,219,220],{"class":195},"ui.wrapperProps",[172,222,192],{"class":178},[172,224,201],{"class":178},[172,226,228,231,234,236,238,240,243,245],{"class":174,"line":227},3,[172,229,230],{"class":178},"    \u003C",[172,232,233],{"class":182},"article",[172,235,213],{"class":185},[172,237,189],{"class":178},[172,239,192],{"class":178},[172,241,242],{"class":195},"ui.getRootProps({ class: 'my-toast' })",[172,244,192],{"class":178},[172,246,201],{"class":178},[172,248,250,253,256,259,263,266,268],{"class":174,"line":249},4,[172,251,252],{"class":178},"      \u003C",[172,254,255],{"class":182},"strong",[172,257,258],{"class":178},">",[172,260,262],{"class":261},"sTEyZ","{{ toast.title }}",[172,264,265],{"class":178},"\u003C\u002F",[172,267,255],{"class":182},[172,269,201],{"class":178},[172,271,273,275,277,280,282,284,287,289,291,294,296,298],{"class":174,"line":272},5,[172,274,252],{"class":178},[172,276,148],{"class":182},[172,278,279],{"class":185}," v-if",[172,281,189],{"class":178},[172,283,192],{"class":178},[172,285,286],{"class":195},"toast.description",[172,288,192],{"class":178},[172,290,258],{"class":178},[172,292,293],{"class":261},"{{ toast.description }}",[172,295,265],{"class":178},[172,297,148],{"class":182},[172,299,201],{"class":178},[172,301,303],{"class":174,"line":302},6,[172,304,306],{"emptyLinePlaceholder":305},true,"\n",[172,308,310,312,315,317,319,321,324,326,328,331,333,335],{"class":174,"line":309},7,[172,311,252],{"class":178},[172,313,314],{"class":182},"button",[172,316,213],{"class":185},[172,318,189],{"class":178},[172,320,192],{"class":178},[172,322,323],{"class":195},"ui.getCloseProps()",[172,325,192],{"class":178},[172,327,258],{"class":178},[172,329,330],{"class":261},"Close",[172,332,265],{"class":178},[172,334,314],{"class":182},[172,336,201],{"class":178},[172,338,340,343,345],{"class":174,"line":339},8,[172,341,342],{"class":178},"    \u003C\u002F",[172,344,233],{"class":182},[172,346,201],{"class":178},[172,348,350,353,355],{"class":174,"line":349},9,[172,351,352],{"class":178},"  \u003C\u002F",[172,354,210],{"class":182},[172,356,201],{"class":178},[172,358,360,362,364],{"class":174,"line":359},10,[172,361,265],{"class":178},[172,363,154],{"class":182},[172,365,201],{"class":178},[157,367,369],{"id":368},"actions-and-progress","Actions And Progress",[371,372,373,446,510],"code-group",{},[162,374,377],{"className":164,"code":375,"filename":376,"language":167,"meta":168,"style":168},"\u003Cbutton\n  v-for=\"button in ui.buttons.items\"\n  :key=\"button.id\"\n  v-bind=\"ui.getButtonProps(button)\"\n>\n  {{ button.label }}\n\u003C\u002Fbutton>\n","actions.vue",[152,378,379,386,401,415,429,433,438],{"__ignoreMap":168},[172,380,381,383],{"class":174,"line":175},[172,382,179],{"class":178},[172,384,385],{"class":182},"button\n",[172,387,388,391,393,395,398],{"class":174,"line":204},[172,389,390],{"class":185},"  v-for",[172,392,189],{"class":178},[172,394,192],{"class":178},[172,396,397],{"class":195},"button in ui.buttons.items",[172,399,400],{"class":178},"\"\n",[172,402,403,406,408,410,413],{"class":174,"line":227},[172,404,405],{"class":185},"  :key",[172,407,189],{"class":178},[172,409,192],{"class":178},[172,411,412],{"class":195},"button.id",[172,414,400],{"class":178},[172,416,417,420,422,424,427],{"class":174,"line":249},[172,418,419],{"class":185},"  v-bind",[172,421,189],{"class":178},[172,423,192],{"class":178},[172,425,426],{"class":195},"ui.getButtonProps(button)",[172,428,400],{"class":178},[172,430,431],{"class":174,"line":272},[172,432,201],{"class":178},[172,434,435],{"class":174,"line":302},[172,436,437],{"class":261},"  {{ button.label }}\n",[172,439,440,442,444],{"class":174,"line":309},[172,441,265],{"class":178},[172,443,314],{"class":182},[172,445,201],{"class":178},[162,447,450],{"className":164,"code":448,"filename":449,"language":167,"meta":168,"style":168},"\u003Cdiv v-if=\"ui.progress.show\" v-bind=\"ui.progress.getTrackProps()\">\n  \u003Cdiv v-bind=\"ui.progress.getBarProps()\" \u002F>\n\u003C\u002Fdiv>\n","progress.vue",[152,451,452,482,502],{"__ignoreMap":168},[172,453,454,456,458,460,462,464,467,469,471,473,475,478,480],{"class":174,"line":175},[172,455,179],{"class":178},[172,457,210],{"class":182},[172,459,279],{"class":185},[172,461,189],{"class":178},[172,463,192],{"class":178},[172,465,466],{"class":195},"ui.progress.show",[172,468,192],{"class":178},[172,470,213],{"class":185},[172,472,189],{"class":178},[172,474,192],{"class":178},[172,476,477],{"class":195},"ui.progress.getTrackProps()",[172,479,192],{"class":178},[172,481,201],{"class":178},[172,483,484,486,488,490,492,494,497,499],{"class":174,"line":204},[172,485,207],{"class":178},[172,487,210],{"class":182},[172,489,213],{"class":185},[172,491,189],{"class":178},[172,493,192],{"class":178},[172,495,496],{"class":195},"ui.progress.getBarProps()",[172,498,192],{"class":178},[172,500,501],{"class":178}," \u002F>\n",[172,503,504,506,508],{"class":174,"line":227},[172,505,265],{"class":178},[172,507,210],{"class":182},[172,509,201],{"class":178},[162,511,514],{"className":164,"code":512,"filename":513,"language":167,"meta":168,"style":168},"\u003Cbutton v-bind=\"ui.getCloseProps({ class: 'close-button' })\">Close\u003C\u002Fbutton>\n","close.vue",[152,515,516],{"__ignoreMap":168},[172,517,518,520,522,524,526,528,531,533,535,537,539,541],{"class":174,"line":175},[172,519,179],{"class":178},[172,521,314],{"class":182},[172,523,213],{"class":185},[172,525,189],{"class":178},[172,527,192],{"class":178},[172,529,530],{"class":195},"ui.getCloseProps({ class: 'close-button' })",[172,532,192],{"class":178},[172,534,258],{"class":178},[172,536,330],{"class":261},[172,538,265],{"class":178},[172,540,314],{"class":182},[172,542,201],{"class":178},[157,544,546,547,550],{"id":545},"what-ui-gives-you","What ",[152,548,549],{},"ui"," Gives You",[552,553,554,567,575,582],"card-group",{},[555,556,559,562,563,566],"card",{"icon":557,"title":558},"i-tabler-shield-check","Accessibility props",[152,560,561],{},"wrapperProps"," and ",[152,564,565],{},"getRootProps()"," keep structure, roles, labels, and live-region behavior intact.",[555,568,571,574],{"icon":569,"title":570},"i-tabler-x","Dismiss behavior",[152,572,573],{},"getCloseProps()"," wires the button to the correct toast id.",[555,576,578,581],{"icon":44,"title":577},"Action buttons",[152,579,580],{},"getButtonProps(button)"," preserves click handling, dismiss-on-click, and ARIA labels.",[555,583,586,589],{"icon":584,"title":585},"i-tabler-gauge","Progress helpers",[152,587,588],{},"progress.*"," helpers let you keep Toastflow's timer state while drawing your own bar.",[157,591,593],{"id":592},"full-examples","Full Examples",[148,595,596,597,600],{},"The full headless playground below runs in the Vue REPL. It uses the same ",[152,598,599],{},"headlessFiles"," source as the Live Examples page, so the code and preview stay in one place.",[602,603,604,608,614,767,774,844,862,866],"docs-headless-full-examples",{},[157,605,607],{"id":606},"slot-props-reference","Slot Props Reference",[148,609,610,611,613],{},"The ",[152,612,154],{}," default slot provides these props:",[615,616,617,633],"table",{},[618,619,620],"thead",{},[621,622,623,627,630],"tr",{},[624,625,626],"th",{},"Prop",[624,628,629],{},"Type",[624,631,632],{},"Use",[634,635,636,652,666,681,695,709,724,738,752],"tbody",{},[621,637,638,644,649],{},[639,640,641],"td",{},[152,642,643],{},"toast",[639,645,646],{},[152,647,648],{},"ToastInstance",[639,650,651],{},"Current toast data",[621,653,654,658,663],{},[639,655,656],{},[152,657,549],{},[639,659,660],{},[152,661,662],{},"ToastUI",[639,664,665],{},"Structured helpers (preferred API)",[621,667,668,673,678],{},[639,669,670],{},[152,671,672],{},"progressResetKey",[639,674,675],{},[152,676,677],{},"number",[639,679,680],{},"Changes when timer\u002Fprogress should restart",[621,682,683,688,692],{},[639,684,685],{},[152,686,687],{},"duplicateKey",[639,689,690],{},[152,691,677],{},[639,693,694],{},"Changes on duplicate event",[621,696,697,702,706],{},[639,698,699],{},[152,700,701],{},"updateKey",[639,703,704],{},[152,705,677],{},[639,707,708],{},"Changes on update event",[621,710,711,716,721],{},[639,712,713],{},[152,714,715],{},"bumpAnimationClass",[639,717,718],{},[152,719,720],{},"string",[639,722,723],{},"Duplicate bump animation class",[621,725,726,731,735],{},[639,727,728],{},[152,729,730],{},"clearAllAnimationClass",[639,732,733],{},[152,734,720],{},[639,736,737],{},"Clear-all animation class",[621,739,740,745,749],{},[639,741,742],{},[152,743,744],{},"updateAnimationClass",[639,746,747],{},[152,748,720],{},[639,750,751],{},"Update animation class",[621,753,754,759,764],{},[639,755,756],{},[152,757,758],{},"dismiss",[639,760,761],{},[152,762,763],{},"(id) => void",[639,765,766],{},"Dismiss helper",[768,769,771,773],"h3",{"id":770},"ui-highlights",[152,772,549],{}," Highlights",[775,776,777,790,797,804,823,831],"ul",{},[778,779,780,784,785,789],"li",{},[255,781,782],{},[152,783,561],{}," \u002F ",[255,786,787],{},[152,788,565],{}," — Structure, roles, labels, live-region",[778,791,792,796],{},[255,793,794],{},[152,795,573],{}," — Close button wiring",[778,798,799,803],{},[255,800,801],{},[152,802,580],{}," — Action button click + ARIA",[778,805,806,811,812,811,817,822],{},[255,807,808],{},[152,809,810],{},"progress.show",", ",[255,813,814],{},[152,815,816],{},"progress.trackProps",[255,818,819],{},[152,820,821],{},"progress.barProps"," — Timer-aware progress helpers",[778,824,825,830],{},[255,826,827],{},[152,828,829],{},"buttons.items"," — Resolved button array",[778,832,833,811,838,843],{},[255,834,835],{},[152,836,837],{},"icon",[255,839,840],{},[152,841,842],{},"createdAt"," — Derived rendering state",[845,846,848,851,852],"callout",{"color":847,"icon":98},"primary",[255,849,850],{},"Full slot payload types:"," ",[853,854,859],"a",{"href":855,"rel":856,"target":858},"https:\u002F\u002Fgithub.com\u002Fadrianjanocko\u002Ftoastflow\u002Fblob\u002Fmain\u002Fpackages\u002Fvue\u002Fsrc\u002Ftoast-ui.ts",[857],"nofollow","\\_blank",[152,860,861],{},"packages\u002Fvue\u002Fsrc\u002Ftoast-ui.ts",[157,863,865],{"id":864},"slot-vs-core","Slot vs Core",[867,868,869,874],"accordion",{},[870,871,873],"accordion-item",{"label":872},"Use the slot","Use it when you are in Vue or Nuxt and only want to replace markup\u002Fstyles.",[870,875,877],{"label":876},"Use toastflow-core","Use it when you are outside Vue or building an entirely custom renderer.",[879,880,881],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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);}",{"title":168,"searchDepth":204,"depth":204,"links":883},[884,885,886,888,889,893],{"id":159,"depth":204,"text":160},{"id":368,"depth":204,"text":369},{"id":545,"depth":204,"text":887},"What ui Gives You",{"id":592,"depth":204,"text":593},{"id":606,"depth":204,"text":607,"children":890},[891],{"id":770,"depth":227,"text":892},"ui Highlights",{"id":864,"depth":204,"text":865},"Keep the Toastflow store and replace the toast card markup with your own Vue or Nuxt template.","md",null,{},{"icon":84},{"title":81,"description":894},"6bQmN3bpsEMCFvLEr2HaMDvXai1ZYDVGMPDjjkQCw9I",[902,904],{"title":76,"path":77,"stem":78,"description":903,"icon":79,"children":-1},"Use toastflow-core directly when you want full rendering control.",{"title":92,"path":93,"stem":94,"description":905,"icon":95,"children":-1},"Trigger real Toastflow notifications from the docs."]