[{"data":1,"prerenderedAt":4990},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-toast":694,"-docs-theme-components-toast-surround":4985},{"gettingStarted":4,"api":81,"theme":170},[5,36,51,71],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",{"title":72,"icon":7,"path":73,"stem":74,"children":75,"page":7},"Migrations","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002Fgetting-started\u002Fmigration",[76],{"title":77,"path":78,"stem":79,"icon":80},"From TailwindCSS","\u002Fdocs\u002Fgetting-started\u002Fmigration\u002Ftailwind","docs\u002Fgetting-started\u002Fmigration\u002F01.tailwind","i-simple-icons-tailwindcss",[82],{"title":83,"path":84,"stem":85,"children":86,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[87,90,95,100,105,110,115,120,125,130,135,140,155,160,165],{"title":88,"path":84,"stem":85,"icon":89},"Overview","i-lucide-book-text",{"title":91,"path":92,"stem":93,"icon":94},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":96,"path":97,"stem":98,"icon":99},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":101,"path":102,"stem":103,"icon":104},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":106,"path":107,"stem":108,"icon":109},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":111,"path":112,"stem":113,"icon":114},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":116,"path":117,"stem":118,"icon":119},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":121,"path":122,"stem":123,"icon":124},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":126,"path":127,"stem":128,"icon":129},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":131,"path":132,"stem":133,"icon":134},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":136,"path":137,"stem":138,"icon":139},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":141,"path":142,"stem":143,"children":144,"icon":154},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[145,146,150],{"title":88,"path":142,"stem":143},{"title":147,"path":148,"stem":149},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":151,"path":152,"stem":153},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":156,"path":157,"stem":158,"icon":159},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":161,"path":162,"stem":163,"icon":164},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":166,"path":167,"stem":168,"icon":169},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F14.imports","i-lucide-file-input",[171,251,365,570,647],{"title":172,"path":173,"stem":174,"children":175,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[176,177,182,187,192,197,202,207,212,217,232,236,241,246],{"title":88,"path":173,"stem":174,"icon":89},{"title":178,"path":179,"stem":180,"icon":181},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":183,"path":184,"stem":185,"icon":186},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":188,"path":189,"stem":190,"icon":191},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":193,"path":194,"stem":195,"icon":196},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":198,"path":199,"stem":200,"icon":201},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":203,"path":204,"stem":205,"icon":206},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":208,"path":209,"stem":210,"icon":211},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":213,"path":214,"stem":215,"icon":216},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":218,"path":219,"stem":220,"children":221,"icon":114,"defaultOpen":231},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[222,223,227],{"title":88,"path":219,"stem":220},{"title":224,"path":225,"stem":226},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":228,"path":229,"stem":230},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":233,"path":234,"stem":235,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":237,"path":238,"stem":239,"icon":240},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":242,"path":243,"stem":244,"icon":245},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":247,"path":248,"stem":249,"icon":250},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":252,"path":253,"stem":254,"children":255,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[256,257,260,267,289,309,321,337,349],{"title":88,"path":253,"stem":254,"icon":89},{"title":178,"path":258,"stem":259,"icon":181},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":261,"icon":250,"defaultOpen":231,"page":7,"children":262},"Base",[263],{"title":264,"path":265,"stem":266,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":242,"icon":245,"defaultOpen":231,"page":7,"children":268},[269,273,277,281,285],{"title":270,"path":271,"stem":272,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":274,"path":275,"stem":276,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":278,"path":279,"stem":280,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":282,"path":283,"stem":284,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":286,"path":287,"stem":288,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":290,"icon":291,"defaultOpen":231,"page":7,"children":292},"Inline Text","i-lucide-whole-word",[293,297,301,305],{"title":294,"path":295,"stem":296,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":298,"path":299,"stem":300,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":302,"path":303,"stem":304,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":306,"path":307,"stem":308,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":310,"icon":311,"defaultOpen":231,"page":7,"children":312},"Media & Embeds","i-lucide-image",[313,317],{"title":314,"path":315,"stem":316,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":318,"path":319,"stem":320,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":322,"icon":323,"defaultOpen":231,"page":7,"children":324},"Forms & Tables","i-lucide-table",[325,329,333],{"title":326,"path":327,"stem":328,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":330,"path":331,"stem":332,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":334,"path":335,"stem":336,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":338,"icon":339,"defaultOpen":231,"page":7,"children":340},"Structure","i-lucide-separator-horizontal",[341,345],{"title":342,"path":343,"stem":344,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":346,"path":347,"stem":348,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":350,"icon":351,"defaultOpen":231,"page":7,"children":352},"States","i-lucide-mouse-pointer-click",[353,357,361],{"title":354,"path":355,"stem":356,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":358,"path":359,"stem":360,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":362,"path":363,"stem":364,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":366,"path":367,"stem":368,"children":369,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[370,371,383,407,439,503,530,562],{"title":88,"path":367,"stem":368,"icon":89},{"title":372,"icon":373,"defaultOpen":231,"page":7,"children":374},"Actions","i-lucide-square-mouse-pointer",[375,379],{"title":376,"path":377,"stem":378,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":380,"path":381,"stem":382,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":384,"icon":385,"defaultOpen":231,"page":7,"children":386},"Navigation","i-lucide-navigation",[387,391,395,399,403],{"title":388,"path":389,"stem":390,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":392,"path":393,"stem":394,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":396,"path":397,"stem":398,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":400,"path":401,"stem":402,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":404,"path":405,"stem":406,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":408,"icon":409,"defaultOpen":231,"page":7,"children":410},"Feedback","i-lucide-megaphone",[411,415,419,423,427,431,435],{"title":412,"path":413,"stem":414,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":416,"path":417,"stem":418,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":420,"path":421,"stem":422,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":424,"path":425,"stem":426,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":428,"path":429,"stem":430,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":432,"path":433,"stem":434,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":436,"path":437,"stem":438,"icon":7},"Toast","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoast","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F06.toast",{"title":440,"icon":441,"defaultOpen":231,"page":7,"children":442},"Forms","i-lucide-text-cursor-input",[443,447,451,455,459,463,467,471,475,479,483,487,491,495,499],{"title":444,"path":445,"stem":446,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":448,"path":449,"stem":450,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":452,"path":453,"stem":454,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":456,"path":457,"stem":458,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":460,"path":461,"stem":462,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":464,"path":465,"stem":466,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":468,"path":469,"stem":470,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":472,"path":473,"stem":474,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":476,"path":477,"stem":478,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":480,"path":481,"stem":482,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":484,"path":485,"stem":486,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":488,"path":489,"stem":490,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":492,"path":493,"stem":494,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":496,"path":497,"stem":498,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":500,"path":501,"stem":502,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":504,"icon":250,"defaultOpen":231,"page":7,"children":505},"Overlays",[506,510,514,518,522,526],{"title":507,"path":508,"stem":509,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":511,"path":512,"stem":513,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":515,"path":516,"stem":517,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":519,"path":520,"stem":521,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":523,"path":524,"stem":525,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":527,"path":528,"stem":529,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":531,"icon":532,"defaultOpen":231,"page":7,"children":533},"Layout","i-lucide-layout",[534,538,542,546,550,554,558],{"title":535,"path":536,"stem":537,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":539,"path":540,"stem":541,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":543,"path":544,"stem":545,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":547,"path":548,"stem":549,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":551,"path":552,"stem":553,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":555,"path":556,"stem":557,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":559,"path":560,"stem":561,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":563,"icon":564,"defaultOpen":231,"page":7,"children":565},"AI Chat","i-lucide-message-circle",[566],{"title":567,"path":568,"stem":569,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":126,"path":571,"stem":572,"children":573,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[574,575,579,584,589,593,596,600,605,610,614,617,622,625,630,634,639,644],{"title":88,"path":571,"stem":572,"icon":89},{"title":576,"path":577,"stem":578,"icon":181},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":580,"path":581,"stem":582,"icon":583},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":585,"path":586,"stem":587,"icon":588},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":590,"path":591,"stem":592,"icon":311},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":188,"path":594,"stem":595,"icon":191},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":597,"path":598,"stem":599,"icon":129},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":601,"path":602,"stem":603,"icon":604},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":606,"path":607,"stem":608,"icon":609},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":611,"path":612,"stem":613,"icon":351},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":531,"path":615,"stem":616,"icon":532},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":618,"path":619,"stem":620,"icon":621},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":237,"path":623,"stem":624,"icon":240},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":626,"path":627,"stem":628,"icon":629},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":631,"path":632,"stem":633,"icon":323},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":635,"path":636,"stem":637,"icon":638},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":640,"path":641,"stem":642,"icon":643},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":242,"path":645,"stem":646,"icon":245},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":648,"path":649,"stem":650,"children":651,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[652,653,656,660,665,669,674,679,684,689],{"title":88,"path":649,"stem":650,"icon":89},{"title":576,"path":654,"stem":655,"icon":181},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":657,"path":658,"stem":659,"icon":583},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":661,"path":662,"stem":663,"icon":664},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":666,"path":667,"stem":668,"icon":441},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":670,"path":671,"stem":672,"icon":673},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":675,"path":676,"stem":677,"icon":678},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":680,"path":681,"stem":682,"icon":683},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":685,"path":686,"stem":687,"icon":688},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":690,"path":691,"stem":692,"icon":693},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":695,"title":436,"body":696,"description":4979,"extension":1432,"links":4980,"meta":4981,"navigation":4982,"path":437,"seo":4983,"stem":438,"__hash__":4984},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F06.toast.md",{"type":697,"value":698,"toc":4945},"minimark",[699,703,725,764,771,775,778,826,830,2861,2864,2916,2928,2931,2936,2939,2946,3098,3105,3108,3118,3121,3128,3131,3134,3137,3140,3143,3149,3152,3156,3167,3170,3174,3177,3282,3311,3315,3326,3329,3332,3335,3338,3341,3344,3348,3351,3394,3397,3413,3416,3419,3433,3453,3569,3583,3586,3597,3600,3624,3719,3732,3849,3885,3903,3907,3911,3916,4109,4133,4137,4144,4294,4302,4314,4317,4323,4329,4334,4454,4459,4528,4533,4577,4581,4591,4706,4711,4715,4794,4798,4941],[700,701,88],"h2",{"id":702},"overview",[704,705,706,707,710,711,715,716,720,721,724],"p",{},"The ",[708,709,436],"strong",{}," is a transient, floating feedback element used for notifications, status updates, and confirmations that appear above the interface and dismiss themselves. The ",[712,713,714],"code",{},"useToastRecipe()"," composable creates a fully configured ",[717,718,719],"a",{"href":142},"recipe"," with variant, size, and orientation options for the body, while the semantic ",[712,722,723],{},"color"," accent lands on the two parts that carry it — the leading icon and the progress bar.",[704,726,727,728,730,731,734,735,738,739,738,742,745,746,749,750,756,757,760,761,763],{},"The Toast recipe descends from the ",[717,729,416],{"href":417}," recipe and shares its color, size, and orientation vocabulary — the same nine colors, three sizes, and two orientations. It differs in three ways. A toast ",[708,732,733],{},"floats",": an elevation shadow lifts it off the page and it sizes to its content, where a callout is an inline, full-width surface. It trims the variant axis to the three filled styles — ",[712,736,737],{},"solid",", ",[712,740,741],{},"soft",[712,743,744],{},"subtle"," — dropping callout's ",[712,747,748],{},"outline",", since a transparent surface floating over arbitrary page content would be illegible. And, following ",[717,751,755],{"href":752,"rel":753},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Ftoast",[754],"nofollow","Nuxt UI",", the toast ",[708,758,759],{},"body stays neutral for every color",": the ",[712,762,723],{}," axis tints only the icon and progress bar, not the surface, so a success toast is a clean white card with a green icon and green countdown — not a green card.",[704,765,766,767,770],{},"The Toast recipe integrates directly with the default ",[717,768,769],{"href":179},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[700,772,774],{"id":773},"why-use-the-toast-recipe","Why use the Toast recipe?",[704,776,777],{},"The Toast recipe helps you:",[779,780,781,788,794,808,814,820],"ul",{},[782,783,784,787],"li",{},[708,785,786],{},"Ship faster with sensible defaults",": Get 9 accent colors, 3 visual styles, 3 sizes, and 2 orientations out of the box with a single composable call.",[782,789,790,793],{},[708,791,792],{},"Keep the surface calm",": The body stays neutral for every color, so stacked toasts read as one coherent set; only the icon and countdown carry the semantic accent.",[782,795,796,799,800,803,804,807],{},[708,797,798],{},"Read as a floating surface",": A soft, diffuse ",[712,801,802],{},"@box-shadow.lg"," elevation and well-rounded ",[712,805,806],{},"@border-radius.lg"," corners lift the toast off the page so it reads as a transient notification, not an inline notice.",[782,809,810,813],{},[708,811,812],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[782,815,816,819],{},[708,817,818],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, size, or orientation values at compile time.",[782,821,822,825],{},[708,823,824],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[700,827,829],{"id":828},"usage","Usage",[831,832,834,839,846,1255,1259,1266,2853,2857],"steps",{"level":833},"4",[835,836,838],"h4",{"id":837},"register-the-recipe","Register the recipe",[704,840,841,842,845],{},"Add the Toast recipe to a local Styleframe instance. The global ",[712,843,844],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[847,848,850,1148],"code-tree",{"default-value":849},"src\u002Fcomponents\u002Ftoast.styleframe.ts",[851,852,857],"pre",{"className":853,"code":854,"filename":849,"language":855,"meta":856,"style":856},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useToastContentRecipe,\n    useToastDescriptionRecipe,\n    useToastDismissRecipe,\n    useToastIconRecipe,\n    useToastProgressRecipe,\n    useToastRecipe,\n    useToastTitleRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst toast = useToastRecipe(s);\nconst toastIcon = useToastIconRecipe(s);\nconst toastContent = useToastContentRecipe(s);\nconst toastTitle = useToastTitleRecipe(s);\nconst toastDescription = useToastDescriptionRecipe(s);\nconst toastProgress = useToastProgressRecipe(s);\nconst toastDismiss = useToastDismissRecipe(s);\n\nexport default s;\n","ts","",[712,858,859,895,903,912,920,928,936,944,952,960,977,983,1004,1009,1027,1044,1061,1078,1095,1112,1129,1134],{"__ignoreMap":856},[860,861,864,868,872,876,879,882,885,889,892],"span",{"class":862,"line":863},"line",1,[860,865,867],{"class":866},"s7zQu","import",[860,869,871],{"class":870},"sMK4o"," {",[860,873,875],{"class":874},"sTEyZ"," styleframe",[860,877,878],{"class":870}," }",[860,880,881],{"class":866}," from",[860,883,884],{"class":870}," '",[860,886,888],{"class":887},"sfazB","virtual:styleframe",[860,890,891],{"class":870},"'",[860,893,894],{"class":870},";\n",[860,896,898,900],{"class":862,"line":897},2,[860,899,867],{"class":866},[860,901,902],{"class":870}," {\n",[860,904,906,909],{"class":862,"line":905},3,[860,907,908],{"class":874},"    useToastContentRecipe",[860,910,911],{"class":870},",\n",[860,913,915,918],{"class":862,"line":914},4,[860,916,917],{"class":874},"    useToastDescriptionRecipe",[860,919,911],{"class":870},[860,921,923,926],{"class":862,"line":922},5,[860,924,925],{"class":874},"    useToastDismissRecipe",[860,927,911],{"class":870},[860,929,931,934],{"class":862,"line":930},6,[860,932,933],{"class":874},"    useToastIconRecipe",[860,935,911],{"class":870},[860,937,939,942],{"class":862,"line":938},7,[860,940,941],{"class":874},"    useToastProgressRecipe",[860,943,911],{"class":870},[860,945,947,950],{"class":862,"line":946},8,[860,948,949],{"class":874},"    useToastRecipe",[860,951,911],{"class":870},[860,953,955,958],{"class":862,"line":954},9,[860,956,957],{"class":874},"    useToastTitleRecipe",[860,959,911],{"class":870},[860,961,963,966,968,970,973,975],{"class":862,"line":962},10,[860,964,965],{"class":870},"}",[860,967,881],{"class":866},[860,969,884],{"class":870},[860,971,972],{"class":887},"@styleframe\u002Ftheme",[860,974,891],{"class":870},[860,976,894],{"class":870},[860,978,980],{"class":862,"line":979},11,[860,981,982],{"emptyLinePlaceholder":231},"\n",[860,984,986,990,993,996,999,1002],{"class":862,"line":985},12,[860,987,989],{"class":988},"spNyl","const",[860,991,992],{"class":874}," s ",[860,994,995],{"class":870},"=",[860,997,875],{"class":998},"s2Zo4",[860,1000,1001],{"class":874},"()",[860,1003,894],{"class":870},[860,1005,1007],{"class":862,"line":1006},13,[860,1008,982],{"emptyLinePlaceholder":231},[860,1010,1012,1014,1017,1019,1022,1025],{"class":862,"line":1011},14,[860,1013,989],{"class":988},[860,1015,1016],{"class":874}," toast ",[860,1018,995],{"class":870},[860,1020,1021],{"class":998}," useToastRecipe",[860,1023,1024],{"class":874},"(s)",[860,1026,894],{"class":870},[860,1028,1030,1032,1035,1037,1040,1042],{"class":862,"line":1029},15,[860,1031,989],{"class":988},[860,1033,1034],{"class":874}," toastIcon ",[860,1036,995],{"class":870},[860,1038,1039],{"class":998}," useToastIconRecipe",[860,1041,1024],{"class":874},[860,1043,894],{"class":870},[860,1045,1047,1049,1052,1054,1057,1059],{"class":862,"line":1046},16,[860,1048,989],{"class":988},[860,1050,1051],{"class":874}," toastContent ",[860,1053,995],{"class":870},[860,1055,1056],{"class":998}," useToastContentRecipe",[860,1058,1024],{"class":874},[860,1060,894],{"class":870},[860,1062,1064,1066,1069,1071,1074,1076],{"class":862,"line":1063},17,[860,1065,989],{"class":988},[860,1067,1068],{"class":874}," toastTitle ",[860,1070,995],{"class":870},[860,1072,1073],{"class":998}," useToastTitleRecipe",[860,1075,1024],{"class":874},[860,1077,894],{"class":870},[860,1079,1081,1083,1086,1088,1091,1093],{"class":862,"line":1080},18,[860,1082,989],{"class":988},[860,1084,1085],{"class":874}," toastDescription ",[860,1087,995],{"class":870},[860,1089,1090],{"class":998}," useToastDescriptionRecipe",[860,1092,1024],{"class":874},[860,1094,894],{"class":870},[860,1096,1098,1100,1103,1105,1108,1110],{"class":862,"line":1097},19,[860,1099,989],{"class":988},[860,1101,1102],{"class":874}," toastProgress ",[860,1104,995],{"class":870},[860,1106,1107],{"class":998}," useToastProgressRecipe",[860,1109,1024],{"class":874},[860,1111,894],{"class":870},[860,1113,1115,1117,1120,1122,1125,1127],{"class":862,"line":1114},20,[860,1116,989],{"class":988},[860,1118,1119],{"class":874}," toastDismiss ",[860,1121,995],{"class":870},[860,1123,1124],{"class":998}," useToastDismissRecipe",[860,1126,1024],{"class":874},[860,1128,894],{"class":870},[860,1130,1132],{"class":862,"line":1131},21,[860,1133,982],{"emptyLinePlaceholder":231},[860,1135,1137,1140,1143,1146],{"class":862,"line":1136},22,[860,1138,1139],{"class":866},"export",[860,1141,1142],{"class":866}," default",[860,1144,1145],{"class":874}," s",[860,1147,894],{"class":870},[851,1149,1151],{"className":853,"code":1150,"filename":844,"language":855,"meta":856,"style":856},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[712,1152,1153,1174,1201,1205,1219,1223,1232,1241,1245],{"__ignoreMap":856},[860,1154,1155,1157,1159,1161,1163,1165,1167,1170,1172],{"class":862,"line":863},[860,1156,867],{"class":866},[860,1158,871],{"class":870},[860,1160,875],{"class":874},[860,1162,878],{"class":870},[860,1164,881],{"class":866},[860,1166,884],{"class":870},[860,1168,1169],{"class":887},"styleframe",[860,1171,891],{"class":870},[860,1173,894],{"class":870},[860,1175,1176,1178,1180,1183,1186,1189,1191,1193,1195,1197,1199],{"class":862,"line":897},[860,1177,867],{"class":866},[860,1179,871],{"class":870},[860,1181,1182],{"class":874}," useDesignTokensPreset",[860,1184,1185],{"class":870},",",[860,1187,1188],{"class":874}," useUtilitiesPreset",[860,1190,878],{"class":870},[860,1192,881],{"class":866},[860,1194,884],{"class":870},[860,1196,972],{"class":887},[860,1198,891],{"class":870},[860,1200,894],{"class":870},[860,1202,1203],{"class":862,"line":905},[860,1204,982],{"emptyLinePlaceholder":231},[860,1206,1207,1209,1211,1213,1215,1217],{"class":862,"line":914},[860,1208,989],{"class":988},[860,1210,992],{"class":874},[860,1212,995],{"class":870},[860,1214,875],{"class":998},[860,1216,1001],{"class":874},[860,1218,894],{"class":870},[860,1220,1221],{"class":862,"line":922},[860,1222,982],{"emptyLinePlaceholder":231},[860,1224,1225,1228,1230],{"class":862,"line":930},[860,1226,1227],{"class":998},"useDesignTokensPreset",[860,1229,1024],{"class":874},[860,1231,894],{"class":870},[860,1233,1234,1237,1239],{"class":862,"line":938},[860,1235,1236],{"class":998},"useUtilitiesPreset",[860,1238,1024],{"class":874},[860,1240,894],{"class":870},[860,1242,1243],{"class":862,"line":946},[860,1244,982],{"emptyLinePlaceholder":231},[860,1246,1247,1249,1251,1253],{"class":862,"line":954},[860,1248,1139],{"class":866},[860,1250,1142],{"class":866},[860,1252,1145],{"class":874},[860,1254,894],{"class":870},[835,1256,1258],{"id":1257},"build-the-component","Build the component",[704,1260,1261,1262,1265],{},"Import the ",[712,1263,1264],{},"toast"," runtime function from the virtual module and pass variant props to compute class names:",[1267,1268,1269,1947,2627],"framework-switcher",{},[1270,1271,1272],"template",{"v-slot:vue":856},[851,1273,1278],{"className":1274,"code":1275,"filename":1276,"language":1277,"meta":856,"style":856},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { toast, toastContent, toastDescription, toastDismiss, toastIcon, toastTitle, type ToastProps, type ToastIconProps } from \"virtual:styleframe\";\n\n\u002F\u002F `color` is not a body prop — it lives on the icon\u002Fprogress recipes — so it is\n\u002F\u002F declared here from `ToastIconProps`, not pulled from `ToastProps`.\nconst {\n    color = \"neutral\",\n    variant = \"solid\",\n    size = \"md\",\n    orientation = \"horizontal\",\n    title,\n    description,\n    dismissible = false,\n} = defineProps\u003CToastProps & { color?: ToastIconProps[\"color\"]; title?: string; description?: string; dismissible?: boolean }>();\n\nconst emit = defineEmits\u003C{\n    dismiss: [];\n}>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003C!-- color is scoped to the icon and progress bar; the body keys off variant only -->\n    \u003Cdiv :class=\"toast({ variant, size, orientation })\" role=\"status\">\n        \u003Cspan :class=\"toastIcon({ color })\" aria-hidden=\"true\">\n            \u003Cslot name=\"icon\" \u002F>\n        \u003C\u002Fspan>\n        \u003Cdiv :class=\"toastContent()\">\n            \u003Cstrong v-if=\"title\" :class=\"toastTitle({ size })\">{{ title }}\u003C\u002Fstrong>\n            \u003Cp v-if=\"description\" :class=\"toastDescription({ size })\">{{ description }}\u003C\u002Fp>\n            \u003Cslot \u002F>\n        \u003C\u002Fdiv>\n        \u003Cbutton v-if=\"dismissible\" type=\"button\" :class=\"toastDismiss()\" aria-label=\"Dismiss\" @click=\"emit('dismiss')\">\n            ×\n        \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FToast.vue","vue",[712,1279,1280,1307,1369,1373,1379,1384,1390,1406,1421,1437,1453,1460,1467,1480,1558,1562,1577,1590,1599,1608,1612,1620,1625,1660,1693,1717,1727,1747,1789,1829,1838,1847,1913,1919,1928,1938],{"__ignoreMap":856},[860,1281,1282,1285,1289,1292,1295,1297,1300,1302,1304],{"class":862,"line":863},[860,1283,1284],{"class":870},"\u003C",[860,1286,1288],{"class":1287},"swJcz","script",[860,1290,1291],{"class":988}," setup",[860,1293,1294],{"class":988}," lang",[860,1296,995],{"class":870},[860,1298,1299],{"class":870},"\"",[860,1301,855],{"class":887},[860,1303,1299],{"class":870},[860,1305,1306],{"class":870},">\n",[860,1308,1309,1311,1313,1316,1318,1321,1323,1326,1328,1331,1333,1336,1338,1341,1343,1346,1349,1351,1353,1356,1358,1360,1363,1365,1367],{"class":862,"line":897},[860,1310,867],{"class":866},[860,1312,871],{"class":870},[860,1314,1315],{"class":874}," toast",[860,1317,1185],{"class":870},[860,1319,1320],{"class":874}," toastContent",[860,1322,1185],{"class":870},[860,1324,1325],{"class":874}," toastDescription",[860,1327,1185],{"class":870},[860,1329,1330],{"class":874}," toastDismiss",[860,1332,1185],{"class":870},[860,1334,1335],{"class":874}," toastIcon",[860,1337,1185],{"class":870},[860,1339,1340],{"class":874}," toastTitle",[860,1342,1185],{"class":870},[860,1344,1345],{"class":866}," type",[860,1347,1348],{"class":874}," ToastProps",[860,1350,1185],{"class":870},[860,1352,1345],{"class":866},[860,1354,1355],{"class":874}," ToastIconProps",[860,1357,878],{"class":870},[860,1359,881],{"class":866},[860,1361,1362],{"class":870}," \"",[860,1364,888],{"class":887},[860,1366,1299],{"class":870},[860,1368,894],{"class":870},[860,1370,1371],{"class":862,"line":905},[860,1372,982],{"emptyLinePlaceholder":231},[860,1374,1375],{"class":862,"line":914},[860,1376,1378],{"class":1377},"sHwdD","\u002F\u002F `color` is not a body prop — it lives on the icon\u002Fprogress recipes — so it is\n",[860,1380,1381],{"class":862,"line":922},[860,1382,1383],{"class":1377},"\u002F\u002F declared here from `ToastIconProps`, not pulled from `ToastProps`.\n",[860,1385,1386,1388],{"class":862,"line":930},[860,1387,989],{"class":988},[860,1389,902],{"class":870},[860,1391,1392,1395,1397,1399,1402,1404],{"class":862,"line":938},[860,1393,1394],{"class":874},"    color ",[860,1396,995],{"class":870},[860,1398,1362],{"class":870},[860,1400,1401],{"class":887},"neutral",[860,1403,1299],{"class":870},[860,1405,911],{"class":870},[860,1407,1408,1411,1413,1415,1417,1419],{"class":862,"line":946},[860,1409,1410],{"class":874},"    variant ",[860,1412,995],{"class":870},[860,1414,1362],{"class":870},[860,1416,737],{"class":887},[860,1418,1299],{"class":870},[860,1420,911],{"class":870},[860,1422,1423,1426,1428,1430,1433,1435],{"class":862,"line":954},[860,1424,1425],{"class":874},"    size ",[860,1427,995],{"class":870},[860,1429,1362],{"class":870},[860,1431,1432],{"class":887},"md",[860,1434,1299],{"class":870},[860,1436,911],{"class":870},[860,1438,1439,1442,1444,1446,1449,1451],{"class":862,"line":962},[860,1440,1441],{"class":874},"    orientation ",[860,1443,995],{"class":870},[860,1445,1362],{"class":870},[860,1447,1448],{"class":887},"horizontal",[860,1450,1299],{"class":870},[860,1452,911],{"class":870},[860,1454,1455,1458],{"class":862,"line":979},[860,1456,1457],{"class":874},"    title",[860,1459,911],{"class":870},[860,1461,1462,1465],{"class":862,"line":985},[860,1463,1464],{"class":874},"    description",[860,1466,911],{"class":870},[860,1468,1469,1472,1474,1478],{"class":862,"line":1006},[860,1470,1471],{"class":874},"    dismissible ",[860,1473,995],{"class":870},[860,1475,1477],{"class":1476},"sfNiH"," false",[860,1479,911],{"class":870},[860,1481,1482,1484,1487,1490,1492,1496,1499,1501,1504,1507,1509,1512,1514,1516,1518,1521,1524,1527,1529,1532,1534,1537,1539,1541,1543,1546,1548,1551,1554,1556],{"class":862,"line":1011},[860,1483,965],{"class":870},[860,1485,1486],{"class":870}," =",[860,1488,1489],{"class":998}," defineProps",[860,1491,1284],{"class":870},[860,1493,1495],{"class":1494},"sBMFI","ToastProps",[860,1497,1498],{"class":870}," &",[860,1500,871],{"class":870},[860,1502,1503],{"class":1287}," color",[860,1505,1506],{"class":870},"?:",[860,1508,1355],{"class":1494},[860,1510,1511],{"class":874},"[",[860,1513,1299],{"class":870},[860,1515,723],{"class":887},[860,1517,1299],{"class":870},[860,1519,1520],{"class":874},"]",[860,1522,1523],{"class":870},";",[860,1525,1526],{"class":1287}," title",[860,1528,1506],{"class":870},[860,1530,1531],{"class":1494}," string",[860,1533,1523],{"class":870},[860,1535,1536],{"class":1287}," description",[860,1538,1506],{"class":870},[860,1540,1531],{"class":1494},[860,1542,1523],{"class":870},[860,1544,1545],{"class":1287}," dismissible",[860,1547,1506],{"class":870},[860,1549,1550],{"class":1494}," boolean",[860,1552,1553],{"class":870}," }>",[860,1555,1001],{"class":874},[860,1557,894],{"class":870},[860,1559,1560],{"class":862,"line":1029},[860,1561,982],{"emptyLinePlaceholder":231},[860,1563,1564,1566,1569,1571,1574],{"class":862,"line":1046},[860,1565,989],{"class":988},[860,1567,1568],{"class":874}," emit ",[860,1570,995],{"class":870},[860,1572,1573],{"class":998}," defineEmits",[860,1575,1576],{"class":870},"\u003C{\n",[860,1578,1579,1582,1585,1588],{"class":862,"line":1063},[860,1580,1581],{"class":1287},"    dismiss",[860,1583,1584],{"class":870},":",[860,1586,1587],{"class":874}," []",[860,1589,894],{"class":870},[860,1591,1592,1595,1597],{"class":862,"line":1080},[860,1593,1594],{"class":870},"}>",[860,1596,1001],{"class":874},[860,1598,894],{"class":870},[860,1600,1601,1604,1606],{"class":862,"line":1097},[860,1602,1603],{"class":870},"\u003C\u002F",[860,1605,1288],{"class":1287},[860,1607,1306],{"class":870},[860,1609,1610],{"class":862,"line":1114},[860,1611,982],{"emptyLinePlaceholder":231},[860,1613,1614,1616,1618],{"class":862,"line":1131},[860,1615,1284],{"class":870},[860,1617,1270],{"class":1287},[860,1619,1306],{"class":870},[860,1621,1622],{"class":862,"line":1136},[860,1623,1624],{"class":1377},"    \u003C!-- color is scoped to the icon and progress bar; the body keys off variant only -->\n",[860,1626,1628,1631,1634,1637,1639,1641,1644,1646,1649,1651,1653,1656,1658],{"class":862,"line":1627},23,[860,1629,1630],{"class":870},"    \u003C",[860,1632,1633],{"class":1287},"div",[860,1635,1636],{"class":988}," :class",[860,1638,995],{"class":870},[860,1640,1299],{"class":870},[860,1642,1643],{"class":887},"toast({ variant, size, orientation })",[860,1645,1299],{"class":870},[860,1647,1648],{"class":988}," role",[860,1650,995],{"class":870},[860,1652,1299],{"class":870},[860,1654,1655],{"class":887},"status",[860,1657,1299],{"class":870},[860,1659,1306],{"class":870},[860,1661,1663,1666,1668,1670,1672,1674,1677,1679,1682,1684,1686,1689,1691],{"class":862,"line":1662},24,[860,1664,1665],{"class":870},"        \u003C",[860,1667,860],{"class":1287},[860,1669,1636],{"class":988},[860,1671,995],{"class":870},[860,1673,1299],{"class":870},[860,1675,1676],{"class":887},"toastIcon({ color })",[860,1678,1299],{"class":870},[860,1680,1681],{"class":988}," aria-hidden",[860,1683,995],{"class":870},[860,1685,1299],{"class":870},[860,1687,1688],{"class":887},"true",[860,1690,1299],{"class":870},[860,1692,1306],{"class":870},[860,1694,1696,1699,1702,1705,1707,1709,1712,1714],{"class":862,"line":1695},25,[860,1697,1698],{"class":870},"            \u003C",[860,1700,1701],{"class":1287},"slot",[860,1703,1704],{"class":988}," name",[860,1706,995],{"class":870},[860,1708,1299],{"class":870},[860,1710,1711],{"class":887},"icon",[860,1713,1299],{"class":870},[860,1715,1716],{"class":870}," \u002F>\n",[860,1718,1720,1723,1725],{"class":862,"line":1719},26,[860,1721,1722],{"class":870},"        \u003C\u002F",[860,1724,860],{"class":1287},[860,1726,1306],{"class":870},[860,1728,1730,1732,1734,1736,1738,1740,1743,1745],{"class":862,"line":1729},27,[860,1731,1665],{"class":870},[860,1733,1633],{"class":1287},[860,1735,1636],{"class":988},[860,1737,995],{"class":870},[860,1739,1299],{"class":870},[860,1741,1742],{"class":887},"toastContent()",[860,1744,1299],{"class":870},[860,1746,1306],{"class":870},[860,1748,1750,1752,1754,1757,1759,1761,1764,1766,1768,1770,1772,1775,1777,1780,1783,1785,1787],{"class":862,"line":1749},28,[860,1751,1698],{"class":870},[860,1753,708],{"class":1287},[860,1755,1756],{"class":988}," v-if",[860,1758,995],{"class":870},[860,1760,1299],{"class":870},[860,1762,1763],{"class":887},"title",[860,1765,1299],{"class":870},[860,1767,1636],{"class":988},[860,1769,995],{"class":870},[860,1771,1299],{"class":870},[860,1773,1774],{"class":887},"toastTitle({ size })",[860,1776,1299],{"class":870},[860,1778,1779],{"class":870},">",[860,1781,1782],{"class":874},"{{ title }}",[860,1784,1603],{"class":870},[860,1786,708],{"class":1287},[860,1788,1306],{"class":870},[860,1790,1792,1794,1796,1798,1800,1802,1805,1807,1809,1811,1813,1816,1818,1820,1823,1825,1827],{"class":862,"line":1791},29,[860,1793,1698],{"class":870},[860,1795,704],{"class":1287},[860,1797,1756],{"class":988},[860,1799,995],{"class":870},[860,1801,1299],{"class":870},[860,1803,1804],{"class":887},"description",[860,1806,1299],{"class":870},[860,1808,1636],{"class":988},[860,1810,995],{"class":870},[860,1812,1299],{"class":870},[860,1814,1815],{"class":887},"toastDescription({ size })",[860,1817,1299],{"class":870},[860,1819,1779],{"class":870},[860,1821,1822],{"class":874},"{{ description }}",[860,1824,1603],{"class":870},[860,1826,704],{"class":1287},[860,1828,1306],{"class":870},[860,1830,1832,1834,1836],{"class":862,"line":1831},30,[860,1833,1698],{"class":870},[860,1835,1701],{"class":1287},[860,1837,1716],{"class":870},[860,1839,1841,1843,1845],{"class":862,"line":1840},31,[860,1842,1722],{"class":870},[860,1844,1633],{"class":1287},[860,1846,1306],{"class":870},[860,1848,1850,1852,1855,1857,1859,1861,1864,1866,1868,1870,1872,1874,1876,1878,1880,1882,1885,1887,1890,1892,1894,1897,1899,1902,1904,1906,1909,1911],{"class":862,"line":1849},32,[860,1851,1665],{"class":870},[860,1853,1854],{"class":1287},"button",[860,1856,1756],{"class":988},[860,1858,995],{"class":870},[860,1860,1299],{"class":870},[860,1862,1863],{"class":887},"dismissible",[860,1865,1299],{"class":870},[860,1867,1345],{"class":988},[860,1869,995],{"class":870},[860,1871,1299],{"class":870},[860,1873,1854],{"class":887},[860,1875,1299],{"class":870},[860,1877,1636],{"class":988},[860,1879,995],{"class":870},[860,1881,1299],{"class":870},[860,1883,1884],{"class":887},"toastDismiss()",[860,1886,1299],{"class":870},[860,1888,1889],{"class":988}," aria-label",[860,1891,995],{"class":870},[860,1893,1299],{"class":870},[860,1895,1896],{"class":887},"Dismiss",[860,1898,1299],{"class":870},[860,1900,1901],{"class":988}," @click",[860,1903,995],{"class":870},[860,1905,1299],{"class":870},[860,1907,1908],{"class":887},"emit('dismiss')",[860,1910,1299],{"class":870},[860,1912,1306],{"class":870},[860,1914,1916],{"class":862,"line":1915},33,[860,1917,1918],{"class":874},"            ×\n",[860,1920,1922,1924,1926],{"class":862,"line":1921},34,[860,1923,1722],{"class":870},[860,1925,1854],{"class":1287},[860,1927,1306],{"class":870},[860,1929,1931,1934,1936],{"class":862,"line":1930},35,[860,1932,1933],{"class":870},"    \u003C\u002F",[860,1935,1633],{"class":1287},[860,1937,1306],{"class":870},[860,1939,1941,1943,1945],{"class":862,"line":1940},36,[860,1942,1603],{"class":870},[860,1944,1270],{"class":1287},[860,1946,1306],{"class":870},[1270,1948,1949],{"v-slot:react":856},[851,1950,1953],{"className":853,"code":1951,"filename":1952,"language":855,"meta":856,"style":856},"import { toast, toastContent, toastDescription, toastDismiss, toastIcon, toastTitle, type ToastProps, type ToastIconProps } from \"virtual:styleframe\";\n\n\u002F\u002F `color` is not a body prop — it lives on the icon\u002Fprogress recipes — so it is\n\u002F\u002F declared here from `ToastIconProps`, not inherited from `ToastProps`.\ninterface ToastComponentProps extends ToastProps {\n    color?: ToastIconProps[\"color\"];\n    title?: string;\n    description?: string;\n    icon?: React.ReactNode;\n    dismissible?: boolean;\n    onDismiss?: () => void;\n    children?: React.ReactNode;\n}\n\nexport function Toast({\n    color = \"neutral\",\n    variant = \"solid\",\n    size = \"md\",\n    orientation = \"horizontal\",\n    title,\n    description,\n    icon,\n    dismissible = false,\n    onDismiss,\n    children,\n}: ToastComponentProps) {\n    \u002F\u002F color is scoped to the icon and progress bar; the body keys off variant only\n    const classes = toast({ variant, size, orientation });\n\n    return (\n        \u003Cdiv className={classes} role=\"status\">\n            {icon && \u003Cspan className={toastIcon({ color })} aria-hidden=\"true\">{icon}\u003C\u002Fspan>}\n            \u003Cdiv className={toastContent()}>\n                {title && \u003Cstrong className={toastTitle({ size })}>{title}\u003C\u002Fstrong>}\n                {description && \u003Cp className={toastDescription({ size })}>{description}\u003C\u002Fp>}\n                {children}\n            \u003C\u002Fdiv>\n            {dismissible && (\n                \u003Cbutton type=\"button\" className={toastDismiss()} onClick={onDismiss} aria-label=\"Dismiss\">\n                    ×\n                \u003C\u002Fbutton>\n            )}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FToast.tsx",[712,1954,1955,2007,2011,2015,2020,2035,2056,2066,2076,2094,2105,2123,2138,2143,2147,2160,2175,2190,2205,2220,2226,2232,2238,2248,2254,2260,2272,2277,2314,2318,2326,2355,2412,2428,2461,2492,2501,2511,2521,2576,2587,2597,2605,2614,2622],{"__ignoreMap":856},[860,1956,1957,1959,1961,1963,1965,1967,1969,1971,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003,2005],{"class":862,"line":863},[860,1958,867],{"class":866},[860,1960,871],{"class":870},[860,1962,1315],{"class":874},[860,1964,1185],{"class":870},[860,1966,1320],{"class":874},[860,1968,1185],{"class":870},[860,1970,1325],{"class":874},[860,1972,1185],{"class":870},[860,1974,1330],{"class":874},[860,1976,1185],{"class":870},[860,1978,1335],{"class":874},[860,1980,1185],{"class":870},[860,1982,1340],{"class":874},[860,1984,1185],{"class":870},[860,1986,1345],{"class":866},[860,1988,1348],{"class":874},[860,1990,1185],{"class":870},[860,1992,1345],{"class":866},[860,1994,1355],{"class":874},[860,1996,878],{"class":870},[860,1998,881],{"class":866},[860,2000,1362],{"class":870},[860,2002,888],{"class":887},[860,2004,1299],{"class":870},[860,2006,894],{"class":870},[860,2008,2009],{"class":862,"line":897},[860,2010,982],{"emptyLinePlaceholder":231},[860,2012,2013],{"class":862,"line":905},[860,2014,1378],{"class":1377},[860,2016,2017],{"class":862,"line":914},[860,2018,2019],{"class":1377},"\u002F\u002F declared here from `ToastIconProps`, not inherited from `ToastProps`.\n",[860,2021,2022,2025,2028,2031,2033],{"class":862,"line":922},[860,2023,2024],{"class":988},"interface",[860,2026,2027],{"class":1494}," ToastComponentProps",[860,2029,2030],{"class":988}," extends",[860,2032,1348],{"class":1494},[860,2034,902],{"class":870},[860,2036,2037,2040,2042,2044,2046,2048,2050,2052,2054],{"class":862,"line":930},[860,2038,2039],{"class":1287},"    color",[860,2041,1506],{"class":870},[860,2043,1355],{"class":1494},[860,2045,1511],{"class":874},[860,2047,1299],{"class":870},[860,2049,723],{"class":887},[860,2051,1299],{"class":870},[860,2053,1520],{"class":874},[860,2055,894],{"class":870},[860,2057,2058,2060,2062,2064],{"class":862,"line":938},[860,2059,1457],{"class":1287},[860,2061,1506],{"class":870},[860,2063,1531],{"class":1494},[860,2065,894],{"class":870},[860,2067,2068,2070,2072,2074],{"class":862,"line":946},[860,2069,1464],{"class":1287},[860,2071,1506],{"class":870},[860,2073,1531],{"class":1494},[860,2075,894],{"class":870},[860,2077,2078,2081,2083,2086,2089,2092],{"class":862,"line":954},[860,2079,2080],{"class":1287},"    icon",[860,2082,1506],{"class":870},[860,2084,2085],{"class":1494}," React",[860,2087,2088],{"class":870},".",[860,2090,2091],{"class":1494},"ReactNode",[860,2093,894],{"class":870},[860,2095,2096,2099,2101,2103],{"class":862,"line":962},[860,2097,2098],{"class":1287},"    dismissible",[860,2100,1506],{"class":870},[860,2102,1550],{"class":1494},[860,2104,894],{"class":870},[860,2106,2107,2110,2112,2115,2118,2121],{"class":862,"line":979},[860,2108,2109],{"class":1287},"    onDismiss",[860,2111,1506],{"class":870},[860,2113,2114],{"class":870}," ()",[860,2116,2117],{"class":988}," =>",[860,2119,2120],{"class":1494}," void",[860,2122,894],{"class":870},[860,2124,2125,2128,2130,2132,2134,2136],{"class":862,"line":985},[860,2126,2127],{"class":1287},"    children",[860,2129,1506],{"class":870},[860,2131,2085],{"class":1494},[860,2133,2088],{"class":870},[860,2135,2091],{"class":1494},[860,2137,894],{"class":870},[860,2139,2140],{"class":862,"line":1006},[860,2141,2142],{"class":870},"}\n",[860,2144,2145],{"class":862,"line":1011},[860,2146,982],{"emptyLinePlaceholder":231},[860,2148,2149,2151,2154,2157],{"class":862,"line":1029},[860,2150,1139],{"class":866},[860,2152,2153],{"class":988}," function",[860,2155,2156],{"class":998}," Toast",[860,2158,2159],{"class":870},"({\n",[860,2161,2162,2165,2167,2169,2171,2173],{"class":862,"line":1046},[860,2163,2039],{"class":2164},"sHdIc",[860,2166,1486],{"class":870},[860,2168,1362],{"class":870},[860,2170,1401],{"class":887},[860,2172,1299],{"class":870},[860,2174,911],{"class":870},[860,2176,2177,2180,2182,2184,2186,2188],{"class":862,"line":1063},[860,2178,2179],{"class":2164},"    variant",[860,2181,1486],{"class":870},[860,2183,1362],{"class":870},[860,2185,737],{"class":887},[860,2187,1299],{"class":870},[860,2189,911],{"class":870},[860,2191,2192,2195,2197,2199,2201,2203],{"class":862,"line":1080},[860,2193,2194],{"class":2164},"    size",[860,2196,1486],{"class":870},[860,2198,1362],{"class":870},[860,2200,1432],{"class":887},[860,2202,1299],{"class":870},[860,2204,911],{"class":870},[860,2206,2207,2210,2212,2214,2216,2218],{"class":862,"line":1097},[860,2208,2209],{"class":2164},"    orientation",[860,2211,1486],{"class":870},[860,2213,1362],{"class":870},[860,2215,1448],{"class":887},[860,2217,1299],{"class":870},[860,2219,911],{"class":870},[860,2221,2222,2224],{"class":862,"line":1114},[860,2223,1457],{"class":2164},[860,2225,911],{"class":870},[860,2227,2228,2230],{"class":862,"line":1131},[860,2229,1464],{"class":2164},[860,2231,911],{"class":870},[860,2233,2234,2236],{"class":862,"line":1136},[860,2235,2080],{"class":2164},[860,2237,911],{"class":870},[860,2239,2240,2242,2244,2246],{"class":862,"line":1627},[860,2241,2098],{"class":2164},[860,2243,1486],{"class":870},[860,2245,1477],{"class":1476},[860,2247,911],{"class":870},[860,2249,2250,2252],{"class":862,"line":1662},[860,2251,2109],{"class":2164},[860,2253,911],{"class":870},[860,2255,2256,2258],{"class":862,"line":1695},[860,2257,2127],{"class":2164},[860,2259,911],{"class":870},[860,2261,2262,2265,2267,2270],{"class":862,"line":1719},[860,2263,2264],{"class":870},"}:",[860,2266,2027],{"class":1494},[860,2268,2269],{"class":870},")",[860,2271,902],{"class":870},[860,2273,2274],{"class":862,"line":1729},[860,2275,2276],{"class":1377},"    \u002F\u002F color is scoped to the icon and progress bar; the body keys off variant only\n",[860,2278,2279,2282,2285,2287,2289,2292,2295,2298,2300,2303,2305,2308,2310,2312],{"class":862,"line":1749},[860,2280,2281],{"class":988},"    const",[860,2283,2284],{"class":874}," classes",[860,2286,1486],{"class":870},[860,2288,1315],{"class":998},[860,2290,2291],{"class":1287},"(",[860,2293,2294],{"class":870},"{",[860,2296,2297],{"class":874}," variant",[860,2299,1185],{"class":870},[860,2301,2302],{"class":874}," size",[860,2304,1185],{"class":870},[860,2306,2307],{"class":874}," orientation",[860,2309,878],{"class":870},[860,2311,2269],{"class":1287},[860,2313,894],{"class":870},[860,2315,2316],{"class":862,"line":1791},[860,2317,982],{"emptyLinePlaceholder":231},[860,2319,2320,2323],{"class":862,"line":1831},[860,2321,2322],{"class":866},"    return",[860,2324,2325],{"class":1287}," (\n",[860,2327,2328,2330,2332,2335,2338,2341,2343,2345,2347,2349,2351,2353],{"class":862,"line":1840},[860,2329,1665],{"class":870},[860,2331,1633],{"class":874},[860,2333,2334],{"class":874}," className",[860,2336,2337],{"class":870},"={",[860,2339,2340],{"class":874},"classes",[860,2342,965],{"class":870},[860,2344,1648],{"class":874},[860,2346,995],{"class":870},[860,2348,1299],{"class":870},[860,2350,1655],{"class":887},[860,2352,1299],{"class":870},[860,2354,1306],{"class":870},[860,2356,2357,2360,2362,2365,2367,2369,2371,2374,2377,2379,2382,2385,2388,2391,2393,2395,2397,2399,2402,2404,2407,2409],{"class":862,"line":1849},[860,2358,2359],{"class":870},"            {",[860,2361,1711],{"class":2164},[860,2363,2364],{"class":1287}," && \u003C",[860,2366,860],{"class":2164},[860,2368,2334],{"class":2164},[860,2370,2337],{"class":870},[860,2372,2373],{"class":1287},"toastIcon",[860,2375,2376],{"class":870},"({",[860,2378,1503],{"class":2164},[860,2380,2381],{"class":870}," })}",[860,2383,2384],{"class":874}," aria",[860,2386,2387],{"class":870},"-",[860,2389,2390],{"class":874},"hidden",[860,2392,995],{"class":870},[860,2394,1299],{"class":870},[860,2396,1688],{"class":887},[860,2398,1299],{"class":870},[860,2400,2401],{"class":870},">{",[860,2403,1711],{"class":874},[860,2405,2406],{"class":870},"}\u003C\u002F",[860,2408,860],{"class":874},[860,2410,2411],{"class":870},">}\n",[860,2413,2414,2416,2418,2420,2422,2425],{"class":862,"line":1915},[860,2415,1698],{"class":870},[860,2417,1633],{"class":874},[860,2419,2334],{"class":874},[860,2421,2337],{"class":870},[860,2423,2424],{"class":1287},"toastContent",[860,2426,2427],{"class":870},"()}>\n",[860,2429,2430,2433,2435,2437,2439,2441,2443,2446,2448,2450,2453,2455,2457,2459],{"class":862,"line":1921},[860,2431,2432],{"class":870},"                {",[860,2434,1763],{"class":2164},[860,2436,2364],{"class":1287},[860,2438,708],{"class":2164},[860,2440,2334],{"class":2164},[860,2442,2337],{"class":870},[860,2444,2445],{"class":1287},"toastTitle",[860,2447,2376],{"class":870},[860,2449,2302],{"class":2164},[860,2451,2452],{"class":870}," })}>{",[860,2454,1763],{"class":874},[860,2456,2406],{"class":870},[860,2458,708],{"class":874},[860,2460,2411],{"class":870},[860,2462,2463,2465,2467,2469,2471,2473,2475,2478,2480,2482,2484,2486,2488,2490],{"class":862,"line":1930},[860,2464,2432],{"class":870},[860,2466,1804],{"class":2164},[860,2468,2364],{"class":1287},[860,2470,704],{"class":2164},[860,2472,2334],{"class":2164},[860,2474,2337],{"class":870},[860,2476,2477],{"class":1287},"toastDescription",[860,2479,2376],{"class":870},[860,2481,2302],{"class":2164},[860,2483,2452],{"class":870},[860,2485,1804],{"class":874},[860,2487,2406],{"class":870},[860,2489,704],{"class":874},[860,2491,2411],{"class":870},[860,2493,2494,2496,2499],{"class":862,"line":1940},[860,2495,2432],{"class":870},[860,2497,2498],{"class":2164},"children",[860,2500,2142],{"class":870},[860,2502,2504,2507,2509],{"class":862,"line":2503},37,[860,2505,2506],{"class":870},"            \u003C\u002F",[860,2508,1633],{"class":874},[860,2510,1306],{"class":870},[860,2512,2514,2516,2518],{"class":862,"line":2513},38,[860,2515,2359],{"class":870},[860,2517,1863],{"class":2164},[860,2519,2520],{"class":1287}," && (\n",[860,2522,2524,2527,2529,2531,2533,2535,2537,2539,2541,2543,2546,2549,2552,2554,2557,2559,2561,2563,2566,2568,2570,2572,2574],{"class":862,"line":2523},39,[860,2525,2526],{"class":1287},"                \u003C",[860,2528,1854],{"class":2164},[860,2530,1345],{"class":2164},[860,2532,995],{"class":870},[860,2534,1299],{"class":870},[860,2536,1854],{"class":887},[860,2538,1299],{"class":870},[860,2540,2334],{"class":874},[860,2542,2337],{"class":870},[860,2544,2545],{"class":1287},"toastDismiss",[860,2547,2548],{"class":870},"()}",[860,2550,2551],{"class":874}," onClick",[860,2553,2337],{"class":870},[860,2555,2556],{"class":874},"onDismiss",[860,2558,965],{"class":870},[860,2560,2384],{"class":874},[860,2562,2387],{"class":870},[860,2564,2565],{"class":874},"label",[860,2567,995],{"class":870},[860,2569,1299],{"class":870},[860,2571,1896],{"class":887},[860,2573,1299],{"class":870},[860,2575,1306],{"class":870},[860,2577,2579,2582,2585],{"class":862,"line":2578},40,[860,2580,2581],{"class":1287},"                    &",[860,2583,2584],{"class":2164},"times",[860,2586,894],{"class":1287},[860,2588,2590,2593,2595],{"class":862,"line":2589},41,[860,2591,2592],{"class":1287},"                \u003C\u002F",[860,2594,1854],{"class":2164},[860,2596,1306],{"class":1287},[860,2598,2600,2603],{"class":862,"line":2599},42,[860,2601,2602],{"class":1287},"            )",[860,2604,2142],{"class":870},[860,2606,2608,2610,2612],{"class":862,"line":2607},43,[860,2609,1722],{"class":870},[860,2611,1633],{"class":874},[860,2613,1306],{"class":870},[860,2615,2617,2620],{"class":862,"line":2616},44,[860,2618,2619],{"class":1287},"    )",[860,2621,894],{"class":870},[860,2623,2625],{"class":862,"line":2624},45,[860,2626,2142],{"class":870},[1270,2628,2629,2635,2787],{"v-slot:other":856},[704,2630,706,2631,2634],{},[712,2632,2633],{},"toast()"," runtime returns a class string. Apply it however your framework binds classes:",[851,2636,2639],{"className":853,"code":2637,"filename":2638,"language":855,"meta":856,"style":856},"import { toast, toastIcon } from \"virtual:styleframe\";\n\n\u002F\u002F The body keys off variant\u002Fsize\u002Forientation; the color accent lives on the\n\u002F\u002F icon (and progress bar) via their own color axis.\nconst classes = toast({\n    variant: \"solid\",\n    size: \"md\",\n    orientation: \"horizontal\",\n});\n\u002F\u002F → \"toast _display:flex _box-shadow:lg _padding:lg ...\"\nconst iconClasses = toastIcon({ color: \"success\" });\n\u002F\u002F → \"toast-icon _color:success ...\"\n","src\u002Fcomponents\u002Ftoast.ts",[712,2640,2641,2665,2669,2674,2679,2695,2709,2723,2737,2745,2750,2782],{"__ignoreMap":856},[860,2642,2643,2645,2647,2649,2651,2653,2655,2657,2659,2661,2663],{"class":862,"line":863},[860,2644,867],{"class":866},[860,2646,871],{"class":870},[860,2648,1315],{"class":874},[860,2650,1185],{"class":870},[860,2652,1335],{"class":874},[860,2654,878],{"class":870},[860,2656,881],{"class":866},[860,2658,1362],{"class":870},[860,2660,888],{"class":887},[860,2662,1299],{"class":870},[860,2664,894],{"class":870},[860,2666,2667],{"class":862,"line":897},[860,2668,982],{"emptyLinePlaceholder":231},[860,2670,2671],{"class":862,"line":905},[860,2672,2673],{"class":1377},"\u002F\u002F The body keys off variant\u002Fsize\u002Forientation; the color accent lives on the\n",[860,2675,2676],{"class":862,"line":914},[860,2677,2678],{"class":1377},"\u002F\u002F icon (and progress bar) via their own color axis.\n",[860,2680,2681,2683,2686,2688,2690,2692],{"class":862,"line":922},[860,2682,989],{"class":988},[860,2684,2685],{"class":874}," classes ",[860,2687,995],{"class":870},[860,2689,1315],{"class":998},[860,2691,2291],{"class":874},[860,2693,2694],{"class":870},"{\n",[860,2696,2697,2699,2701,2703,2705,2707],{"class":862,"line":930},[860,2698,2179],{"class":1287},[860,2700,1584],{"class":870},[860,2702,1362],{"class":870},[860,2704,737],{"class":887},[860,2706,1299],{"class":870},[860,2708,911],{"class":870},[860,2710,2711,2713,2715,2717,2719,2721],{"class":862,"line":938},[860,2712,2194],{"class":1287},[860,2714,1584],{"class":870},[860,2716,1362],{"class":870},[860,2718,1432],{"class":887},[860,2720,1299],{"class":870},[860,2722,911],{"class":870},[860,2724,2725,2727,2729,2731,2733,2735],{"class":862,"line":946},[860,2726,2209],{"class":1287},[860,2728,1584],{"class":870},[860,2730,1362],{"class":870},[860,2732,1448],{"class":887},[860,2734,1299],{"class":870},[860,2736,911],{"class":870},[860,2738,2739,2741,2743],{"class":862,"line":954},[860,2740,965],{"class":870},[860,2742,2269],{"class":874},[860,2744,894],{"class":870},[860,2746,2747],{"class":862,"line":962},[860,2748,2749],{"class":1377},"\u002F\u002F → \"toast _display:flex _box-shadow:lg _padding:lg ...\"\n",[860,2751,2752,2754,2757,2759,2761,2763,2765,2767,2769,2771,2774,2776,2778,2780],{"class":862,"line":979},[860,2753,989],{"class":988},[860,2755,2756],{"class":874}," iconClasses ",[860,2758,995],{"class":870},[860,2760,1335],{"class":998},[860,2762,2291],{"class":874},[860,2764,2294],{"class":870},[860,2766,1503],{"class":1287},[860,2768,1584],{"class":870},[860,2770,1362],{"class":870},[860,2772,2773],{"class":887},"success",[860,2775,1299],{"class":870},[860,2777,878],{"class":870},[860,2779,2269],{"class":874},[860,2781,894],{"class":870},[860,2783,2784],{"class":862,"line":985},[860,2785,2786],{"class":1377},"\u002F\u002F → \"toast-icon _color:success ...\"\n",[851,2788,2793],{"className":2789,"code":2790,"filename":2791,"language":2792,"meta":856,"style":856},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"toast _display:flex _box-shadow:lg _padding:lg ...\" role=\"status\">\n    \u003Cstrong>Saved:\u003C\u002Fstrong> Your changes were saved.\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Ftoast.html","html",[712,2794,2795,2825,2845],{"__ignoreMap":856},[860,2796,2797,2799,2801,2804,2806,2808,2811,2813,2815,2817,2819,2821,2823],{"class":862,"line":863},[860,2798,1284],{"class":870},[860,2800,1633],{"class":1287},[860,2802,2803],{"class":988}," class",[860,2805,995],{"class":870},[860,2807,1299],{"class":870},[860,2809,2810],{"class":887},"toast _display:flex _box-shadow:lg _padding:lg ...",[860,2812,1299],{"class":870},[860,2814,1648],{"class":988},[860,2816,995],{"class":870},[860,2818,1299],{"class":870},[860,2820,1655],{"class":887},[860,2822,1299],{"class":870},[860,2824,1306],{"class":870},[860,2826,2827,2829,2831,2833,2836,2838,2840,2842],{"class":862,"line":897},[860,2828,1630],{"class":870},[860,2830,708],{"class":1287},[860,2832,1779],{"class":870},[860,2834,2835],{"class":874},"Saved:",[860,2837,1603],{"class":870},[860,2839,708],{"class":1287},[860,2841,1779],{"class":870},[860,2843,2844],{"class":874}," Your changes were saved.\n",[860,2846,2847,2849,2851],{"class":862,"line":905},[860,2848,1603],{"class":870},[860,2850,1633],{"class":1287},[860,2852,1306],{"class":870},[835,2854,2856],{"id":2855},"see-it-in-action","See it in action",[2858,2859],"story-preview",{"story":2860,":panel":1688},"theme-recipes-feedback-toast--default",[700,2862,203],{"id":2863},"colors",[704,2865,2866,2867,738,2870,738,2873,738,2875,738,2878,738,2881,2884,2885,738,2888,738,2891,2893,2894,2897,2898,2901,2902,2904,2905,2907,2908,2911,2912,2915],{},"The Toast recipe offers 9 accent colors: the 6 semantic colors (",[712,2868,2869],{},"primary",[712,2871,2872],{},"secondary",[712,2874,2773],{},[712,2876,2877],{},"info",[712,2879,2880],{},"warning",[712,2882,2883],{},"error",") plus 3 neutral-spectrum colors (",[712,2886,2887],{},"light",[712,2889,2890],{},"dark",[712,2892,1401],{},"). Following ",[717,2895,755],{"href":752,"rel":2896},[754],", the accent is ",[708,2899,2900],{},"scoped to the icon and the progress bar"," — the toast body stays neutral for every color. So a ",[712,2903,2773],{}," toast is a clean neutral card with a green icon and a green countdown, never a green surface. Pass the color to the toast component; it routes to ",[712,2906,1676],{}," and ",[712,2909,2910],{},"toastProgress({ color })"," under the hood. Because both parts paint with ",[712,2913,2914],{},"currentColor",", an SVG or icon-font glyph picks up the accent automatically.",[704,2917,2918,2919,2922,2923,2927],{},"The neutral body itself is set by the ",[712,2920,2921],{},"variant"," axis (see ",[717,2924,2926],{"href":2925},"#variants","Variants","), and adapts to the color scheme: light in light mode, dark in dark mode.",[2858,2929],{"story":2930,":panel":1688},"theme-recipes-feedback-toast--success",[2932,2933,2935],"h3",{"id":2934},"color-reference","Color Reference",[2858,2937],{"story":2938},"theme-recipes-feedback-toast--all-variants",[704,2940,2941,2942,2945],{},"The token below is the icon\u002Fprogress ",[708,2943,2944],{},"accent"," each color carries (the body stays neutral regardless):",[2947,2948,2949,2965],"table",{},[2950,2951,2952],"thead",{},[2953,2954,2955,2959,2962],"tr",{},[2956,2957,2958],"th",{},"Color",[2956,2960,2961],{},"Accent token",[2956,2963,2964],{},"Use Case",[2966,2967,2968,2983,2997,3011,3025,3039,3053,3071,3085],"tbody",{},[2953,2969,2970,2975,2980],{},[2971,2972,2973],"td",{},[712,2974,2869],{},[2971,2976,2977],{},[712,2978,2979],{},"@color.primary",[2971,2981,2982],{},"Primary brand notifications, key highlights",[2953,2984,2985,2989,2994],{},[2971,2986,2987],{},[712,2988,2872],{},[2971,2990,2991],{},[712,2992,2993],{},"@color.secondary",[2971,2995,2996],{},"Secondary information, supporting messages",[2953,2998,2999,3003,3008],{},[2971,3000,3001],{},[712,3002,2773],{},[2971,3004,3005],{},[712,3006,3007],{},"@color.success",[2971,3009,3010],{},"Positive feedback, completions, confirmations",[2953,3012,3013,3017,3022],{},[2971,3014,3015],{},[712,3016,2877],{},[2971,3018,3019],{},[712,3020,3021],{},"@color.info",[2971,3023,3024],{},"Informational messages, tips, notices",[2953,3026,3027,3031,3036],{},[2971,3028,3029],{},[712,3030,2880],{},[2971,3032,3033],{},[712,3034,3035],{},"@color.warning",[2971,3037,3038],{},"Caution messages, pending states",[2953,3040,3041,3045,3050],{},[2971,3042,3043],{},[712,3044,2883],{},[2971,3046,3047],{},[712,3048,3049],{},"@color.error",[2971,3051,3052],{},"Error messages, failed actions, critical alerts",[2953,3054,3055,3059,3065],{},[2971,3056,3057],{},[712,3058,2887],{},[2971,3060,3061,3064],{},[712,3062,3063],{},"@color.text-inverted"," (adaptive)",[2971,3066,3067,3068,3070],{},"Minimal-weight accent; matches the family's outline ",[712,3069,2887],{}," foreground",[2953,3072,3073,3077,3082],{},[2971,3074,3075],{},[712,3076,2890],{},[2971,3078,3079,3064],{},[712,3080,3081],{},"@color.text",[2971,3083,3084],{},"High-contrast neutral accent",[2953,3086,3087,3091,3095],{},[2971,3088,3089],{},[712,3090,1401],{},[2971,3092,3093,3064],{},[712,3094,3081],{},[2971,3096,3097],{},"Default. Accent matches the body's neutral foreground",[3099,3100,3101,3104],"tip",{},[708,3102,3103],{},"Pro tip:"," Use semantic color names that describe purpose, not appearance. This makes it easier to update your palette without touching component code.",[700,3106,2926],{"id":3107},"variants",[704,3109,3110,3111,3114,3115,3117],{},"Three visual style variants control the toast's ",[708,3112,3113],{},"neutral surface"," — the treatment is the same for every color, since the accent lives on the icon and progress bar, not the body. Unlike the callout it descends from, a toast has no ",[712,3116,748],{}," variant — a floating surface with a transparent background would be illegible over arbitrary page content, so every toast variant is a filled neutral card.",[2932,3119,3120],{"id":737},"Solid",[704,3122,3123,3124,3127],{},"An opaque neutral card — white in light mode, near-black in dark mode — with a hairline border. The highest-contrast surface, matching Nuxt UI's default toast; ideal for critical notifications that demand immediate attention. This is the ",[708,3125,3126],{},"default variant"," for the Toast recipe.",[2858,3129],{"story":3130,":panel":1688},"theme-recipes-feedback-toast--solid",[2932,3132,3133],{"id":741},"Soft",[704,3135,3136],{},"A faint neutral fill with no border. A gentle, low-elevation style that works well for informational messages and tips.",[2858,3138],{"story":3139,":panel":1688},"theme-recipes-feedback-toast--soft",[2932,3141,3142],{"id":744},"Subtle",[704,3144,3145,3146,3148],{},"A faint neutral fill with a hairline border. Combines the softness of the ",[712,3147,741],{}," variant with a defining border for a little more structure.",[2858,3150],{"story":3151,":panel":1688},"theme-recipes-feedback-toast--subtle",[700,3153,3155],{"id":3154},"sizes","Sizes",[704,3157,3158,3159,3162,3163,3166],{},"Three size variants from ",[712,3160,3161],{},"sm"," to ",[712,3164,3165],{},"lg"," control the font size, padding, and gap of the toast.",[2858,3168],{"story":3169,":panel":1688},"theme-recipes-feedback-toast--large",[2932,3171,3173],{"id":3172},"size-reference","Size Reference",[2858,3175],{"story":3176},"theme-recipes-feedback-toast--all-sizes",[2947,3178,3179,3198],{},[2950,3180,3181],{},[2953,3182,3183,3186,3189,3192,3195],{},[2956,3184,3185],{},"Size",[2956,3187,3188],{},"Title",[2956,3190,3191],{},"Description",[2956,3193,3194],{},"Padding (V \u002F H)",[2956,3196,3197],{},"Gap",[2966,3199,3200,3229,3256],{},[2953,3201,3202,3206,3211,3216,3225],{},[2971,3203,3204],{},[712,3205,3161],{},[2971,3207,3208],{},[712,3209,3210],{},"@font-size.sm",[2971,3212,3213],{},[712,3214,3215],{},"@font-size.xs",[2971,3217,3218,3221,3222],{},[712,3219,3220],{},"@0.5"," \u002F ",[712,3223,3224],{},"@0.75",[2971,3226,3227],{},[712,3228,3220],{},[2953,3230,3231,3235,3240,3244,3252],{},[2971,3232,3233],{},[712,3234,1432],{},[2971,3236,3237],{},[712,3238,3239],{},"@font-size.md",[2971,3241,3242],{},[712,3243,3210],{},[2971,3245,3246,3221,3249],{},[712,3247,3248],{},"@1",[712,3250,3251],{},"@1.25",[2971,3253,3254],{},[712,3255,3248],{},[2953,3257,3258,3262,3267,3271,3278],{},[2971,3259,3260],{},[712,3261,3165],{},[2971,3263,3264],{},[712,3265,3266],{},"@font-size.lg",[2971,3268,3269],{},[712,3270,3239],{},[2971,3272,3273,3221,3275],{},[712,3274,3251],{},[712,3276,3277],{},"@1.5",[2971,3279,3280],{},[712,3281,3251],{},[704,3283,3284,3285,3288,3289,3291,3292,738,3294,3291,3296,738,3298,3291,3300,3302,3303,3306,3307,3310],{},"The title tracks the ",[712,3286,3287],{},"size"," axis on the literal token (",[712,3290,3161],{}," → ",[712,3293,3161],{},[712,3295,1432],{},[712,3297,1432],{},[712,3299,3165],{},[712,3301,3165],{},"); the description sits one token below it at every step, so the title\u002Fdescription hierarchy reads by both size and weight (",[712,3304,3305],{},"semibold"," vs the description's ",[712,3308,3309],{},"normal",").",[700,3312,3314],{"id":3313},"orientation","Orientation",[704,3316,706,3317,3319,3320,3322,3323,2088],{},[712,3318,3313],{}," variant controls the layout direction of the toast content. Two options are available: ",[712,3321,1448],{}," (default) and ",[712,3324,3325],{},"vertical",[2932,3327,3328],{"id":1448},"Horizontal",[704,3330,3331],{},"Content flows left to right in a row. Icon, text content, and dismiss button align horizontally. Best for compact, single-line notifications.",[2858,3333],{"story":3334,":panel":1688},"theme-recipes-feedback-toast--horizontal",[2932,3336,3337],{"id":3325},"Vertical",[704,3339,3340],{},"Content stacks top to bottom in a column. Useful for toasts with longer descriptions, multiple paragraphs, or action buttons below the message.",[2858,3342],{"story":3343,":panel":1688},"theme-recipes-feedback-toast--vertical",[2932,3345,3347],{"id":3346},"orientation-reference","Orientation Reference",[2858,3349],{"story":3350},"theme-recipes-feedback-toast--all-orientations",[2947,3352,3353,3364],{},[2950,3354,3355],{},[2953,3356,3357,3359,3362],{},[2956,3358,3314],{},[2956,3360,3361],{},"Flex Direction",[2956,3363,2964],{},[2966,3365,3366,3380],{},[2953,3367,3368,3372,3377],{},[2971,3369,3370],{},[712,3371,1448],{},[2971,3373,3374],{},[712,3375,3376],{},"row",[2971,3378,3379],{},"Compact notifications, single-line alerts",[2953,3381,3382,3386,3391],{},[2971,3383,3384],{},[712,3385,3325],{},[2971,3387,3388],{},[712,3389,3390],{},"column",[2971,3392,3393],{},"Longer descriptions, multi-line content, action buttons",[700,3395,3396],{"id":1863},"Dismissible",[704,3398,706,3399,3402,3403,3406,3407,3409,3410,3412],{},[712,3400,3401],{},"useToastDismissRecipe()"," composable styles the close control: an ",[712,3404,3405],{},"em","-sized button that inherits the toast's text color, pushes itself to the end of the row, and includes hover and focus-visible states. The toast recipe also collapses the element when the ",[712,3408,2390],{}," attribute is set, so dismissing only needs to toggle ",[712,3411,2390],{}," on the root element.",[2858,3414],{"story":3415,":panel":1688},"theme-recipes-feedback-toast--dismissible",[700,3417,424],{"id":3418},"progress",[704,3420,706,3421,3424,3425,3428,3429,3432],{},[712,3422,3423],{},"useToastProgressRecipe()"," composable adds a duration indicator — a prominent, rounded bar that shrinks from full width to zero, mirroring the auto-dismiss countdown so it reads at a glance. It is pure CSS: the recipe owns the ",[712,3426,3427],{},"toast-progress"," keyframes and reads the timing from a ",[712,3430,3431],{},"--toast-duration"," custom property, so nothing has to flip a data-attribute at runtime.",[704,3434,3435,3436,3438,3439,3441,3442,3444,3445,3448,3449,3452],{},"The bar is a rounded pill inset from the toast's corners rather than bleeding edge-to-edge. It carries its own ",[712,3437,723],{}," axis — the same one the icon uses — and paints with ",[712,3440,2914],{}," at full opacity, so it renders in the semantic accent while the body stays neutral. The parent ",[712,3443,1264],{}," recipe is ",[712,3446,3447],{},"position: relative"," with ",[712,3450,3451],{},"overflow: hidden",", which anchors the bar and keeps it clipped to the toast's rounded corners.",[851,3454,3456],{"className":2789,"code":3455,"language":2792,"meta":856,"style":856},"\u003Cdiv role=\"status\" class=\"...toast...\" style=\"--toast-duration: 5s\">\n    \u003Cspan class=\"...toast-content...\">Uploading files…\u003C\u002Fspan>\n    \u003Cdiv class=\"...toast-progress...\" aria-hidden=\"true\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[712,3457,3458,3499,3527,3561],{"__ignoreMap":856},[860,3459,3460,3462,3464,3466,3468,3470,3472,3474,3476,3478,3480,3483,3485,3488,3490,3492,3495,3497],{"class":862,"line":863},[860,3461,1284],{"class":870},[860,3463,1633],{"class":1287},[860,3465,1648],{"class":988},[860,3467,995],{"class":870},[860,3469,1299],{"class":870},[860,3471,1655],{"class":887},[860,3473,1299],{"class":870},[860,3475,2803],{"class":988},[860,3477,995],{"class":870},[860,3479,1299],{"class":870},[860,3481,3482],{"class":887},"...toast...",[860,3484,1299],{"class":870},[860,3486,3487],{"class":988}," style",[860,3489,995],{"class":870},[860,3491,1299],{"class":870},[860,3493,3494],{"class":887},"--toast-duration: 5s",[860,3496,1299],{"class":870},[860,3498,1306],{"class":870},[860,3500,3501,3503,3505,3507,3509,3511,3514,3516,3518,3521,3523,3525],{"class":862,"line":897},[860,3502,1630],{"class":870},[860,3504,860],{"class":1287},[860,3506,2803],{"class":988},[860,3508,995],{"class":870},[860,3510,1299],{"class":870},[860,3512,3513],{"class":887},"...toast-content...",[860,3515,1299],{"class":870},[860,3517,1779],{"class":870},[860,3519,3520],{"class":874},"Uploading files…",[860,3522,1603],{"class":870},[860,3524,860],{"class":1287},[860,3526,1306],{"class":870},[860,3528,3529,3531,3533,3535,3537,3539,3542,3544,3546,3548,3550,3552,3554,3557,3559],{"class":862,"line":905},[860,3530,1630],{"class":870},[860,3532,1633],{"class":1287},[860,3534,2803],{"class":988},[860,3536,995],{"class":870},[860,3538,1299],{"class":870},[860,3540,3541],{"class":887},"...toast-progress...",[860,3543,1299],{"class":870},[860,3545,1681],{"class":988},[860,3547,995],{"class":870},[860,3549,1299],{"class":870},[860,3551,1688],{"class":887},[860,3553,1299],{"class":870},[860,3555,3556],{"class":870},">\u003C\u002F",[860,3558,1633],{"class":1287},[860,3560,1306],{"class":870},[860,3562,3563,3565,3567],{"class":862,"line":914},[860,3564,1603],{"class":870},[860,3566,1633],{"class":1287},[860,3568,1306],{"class":870},[704,3570,3571,3572,3574,3575,3578,3579,3582],{},"Set ",[712,3573,3431],{}," to match however long the toast stays on screen; it defaults to ",[712,3576,3577],{},"5s"," when the property is absent. Mark the line ",[712,3580,3581],{},"aria-hidden=\"true\""," — the countdown is decorative, and screen-reader users are served by the live-region text, not the animation.",[2858,3584],{"story":3585,":panel":1688},"theme-recipes-feedback-toast--with-progress",[3587,3588,3589,3592,3593,3596],"note",{},[708,3590,3591],{},"Reduced motion:"," the bar animates continuously toward dismissal. If you honor ",[712,3594,3595],{},"prefers-reduced-motion",", pause or hide the indicator (and the auto-dismiss timer) so motion-sensitive users are not rushed.",[700,3598,580],{"id":3599},"accessibility",[779,3601,3602],{},[782,3603,3604,3607,3608,3611,3612,3615,3616,3619,3620,3623],{},[708,3605,3606],{},"Use the right live-region role."," Use ",[712,3609,3610],{},"role=\"status\""," (an ",[712,3613,3614],{},"aria-live=\"polite\""," region) for ordinary toasts so they are announced at the next pause without interrupting the user. Reserve ",[712,3617,3618],{},"role=\"alert\""," (",[712,3621,3622],{},"aria-live=\"assertive\"",") for urgent, time-critical notifications.",[851,3625,3627],{"className":2789,"code":3626,"language":2792,"meta":856,"style":856},"\u003C!-- Ordinary, non-urgent notification -->\n\u003Cdiv role=\"status\" class=\"...\">Your changes have been saved.\u003C\u002Fdiv>\n\n\u003C!-- Urgent, time-critical notification -->\n\u003Cdiv role=\"alert\" class=\"...\">Connection lost. Reconnecting…\u003C\u002Fdiv>\n",[712,3628,3629,3634,3672,3676,3681],{"__ignoreMap":856},[860,3630,3631],{"class":862,"line":863},[860,3632,3633],{"class":1377},"\u003C!-- Ordinary, non-urgent notification -->\n",[860,3635,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654,3656,3659,3661,3663,3666,3668,3670],{"class":862,"line":897},[860,3637,1284],{"class":870},[860,3639,1633],{"class":1287},[860,3641,1648],{"class":988},[860,3643,995],{"class":870},[860,3645,1299],{"class":870},[860,3647,1655],{"class":887},[860,3649,1299],{"class":870},[860,3651,2803],{"class":988},[860,3653,995],{"class":870},[860,3655,1299],{"class":870},[860,3657,3658],{"class":887},"...",[860,3660,1299],{"class":870},[860,3662,1779],{"class":870},[860,3664,3665],{"class":874},"Your changes have been saved.",[860,3667,1603],{"class":870},[860,3669,1633],{"class":1287},[860,3671,1306],{"class":870},[860,3673,3674],{"class":862,"line":905},[860,3675,982],{"emptyLinePlaceholder":231},[860,3677,3678],{"class":862,"line":914},[860,3679,3680],{"class":1377},"\u003C!-- Urgent, time-critical notification -->\n",[860,3682,3683,3685,3687,3689,3691,3693,3696,3698,3700,3702,3704,3706,3708,3710,3713,3715,3717],{"class":862,"line":922},[860,3684,1284],{"class":870},[860,3686,1633],{"class":1287},[860,3688,1648],{"class":988},[860,3690,995],{"class":870},[860,3692,1299],{"class":870},[860,3694,3695],{"class":887},"alert",[860,3697,1299],{"class":870},[860,3699,2803],{"class":988},[860,3701,995],{"class":870},[860,3703,1299],{"class":870},[860,3705,3658],{"class":887},[860,3707,1299],{"class":870},[860,3709,1779],{"class":870},[860,3711,3712],{"class":874},"Connection lost. Reconnecting…",[860,3714,1603],{"class":870},[860,3716,1633],{"class":1287},[860,3718,1306],{"class":870},[779,3720,3721],{},[782,3722,3723,3726,3727,3310],{},[708,3724,3725],{},"Don't rely on color alone."," Always include descriptive text and pair with an icon to reinforce meaning (",[717,3728,3731],{"href":3729,"rel":3730},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fuse-of-color.html",[754],"WCAG 1.4.1",[851,3733,3735],{"className":2789,"code":3734,"language":2792,"meta":856,"style":856},"\u003C!-- Correct: icon + descriptive text + color -->\n\u003Cdiv role=\"status\" class=\"...\">\n    \u003Cspan>✓\u003C\u002Fspan>\n    \u003Cstrong>Saved:\u003C\u002Fstrong> Your changes were saved.\n\u003C\u002Fdiv>\n\n\u003C!-- Avoid: color alone with vague text -->\n\u003Cdiv class=\"...\">Done\u003C\u002Fdiv>\n",[712,3736,3737,3742,3770,3787,3805,3813,3817,3822],{"__ignoreMap":856},[860,3738,3739],{"class":862,"line":863},[860,3740,3741],{"class":1377},"\u003C!-- Correct: icon + descriptive text + color -->\n",[860,3743,3744,3746,3748,3750,3752,3754,3756,3758,3760,3762,3764,3766,3768],{"class":862,"line":897},[860,3745,1284],{"class":870},[860,3747,1633],{"class":1287},[860,3749,1648],{"class":988},[860,3751,995],{"class":870},[860,3753,1299],{"class":870},[860,3755,1655],{"class":887},[860,3757,1299],{"class":870},[860,3759,2803],{"class":988},[860,3761,995],{"class":870},[860,3763,1299],{"class":870},[860,3765,3658],{"class":887},[860,3767,1299],{"class":870},[860,3769,1306],{"class":870},[860,3771,3772,3774,3776,3778,3781,3783,3785],{"class":862,"line":905},[860,3773,1630],{"class":870},[860,3775,860],{"class":1287},[860,3777,1779],{"class":870},[860,3779,3780],{"class":874},"✓",[860,3782,1603],{"class":870},[860,3784,860],{"class":1287},[860,3786,1306],{"class":870},[860,3788,3789,3791,3793,3795,3797,3799,3801,3803],{"class":862,"line":914},[860,3790,1630],{"class":870},[860,3792,708],{"class":1287},[860,3794,1779],{"class":870},[860,3796,2835],{"class":874},[860,3798,1603],{"class":870},[860,3800,708],{"class":1287},[860,3802,1779],{"class":870},[860,3804,2844],{"class":874},[860,3806,3807,3809,3811],{"class":862,"line":922},[860,3808,1603],{"class":870},[860,3810,1633],{"class":1287},[860,3812,1306],{"class":870},[860,3814,3815],{"class":862,"line":930},[860,3816,982],{"emptyLinePlaceholder":231},[860,3818,3819],{"class":862,"line":938},[860,3820,3821],{"class":1377},"\u003C!-- Avoid: color alone with vague text -->\n",[860,3823,3824,3826,3828,3830,3832,3834,3836,3838,3840,3843,3845,3847],{"class":862,"line":946},[860,3825,1284],{"class":870},[860,3827,1633],{"class":1287},[860,3829,2803],{"class":988},[860,3831,995],{"class":870},[860,3833,1299],{"class":870},[860,3835,3658],{"class":887},[860,3837,1299],{"class":870},[860,3839,1779],{"class":870},[860,3841,3842],{"class":874},"Done",[860,3844,1603],{"class":870},[860,3846,1633],{"class":1287},[860,3848,1306],{"class":870},[779,3850,3851,3857,3870],{},[782,3852,3853,3856],{},[708,3854,3855],{},"Give users time to read."," Auto-dismissing toasts should stay long enough to read, and pause on hover or focus. Provide a manual dismiss control so users are never rushed.",[782,3858,3859,3862,3863,3448,3866,3869],{},[708,3860,3861],{},"Dismissible toasts."," Use a ",[712,3864,3865],{},"\u003Cbutton>",[712,3867,3868],{},"aria-label=\"Dismiss\""," for the close control. Move focus to the next logical element after dismissal.",[782,3871,3872,3875,3876,3881,3882,3884],{},[708,3873,3874],{},"Verify contrast ratios."," The body carries neutral foreground text on a neutral surface, and the semantic accent lands on the icon and progress bar. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify both the body text and the accent with the ",[717,3877,3880],{"href":3878,"rel":3879},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[754],"WebAIM Contrast Checker"," — note the ",[712,3883,2887],{}," accent is intentionally low-contrast on a light body.",[3099,3886,3887,3890,3891,3893,3894,3896,3897,3899,3900,3902],{},[708,3888,3889],{},"Good practice:"," When several toasts stack at once, use the ",[712,3892,2921],{}," prop to create visual hierarchy rather than relying solely on color differences. For example, use ",[712,3895,737],{}," for critical errors and ",[712,3898,741],{}," or ",[712,3901,744],{}," for informational notices.",[700,3904,3906],{"id":3905},"customization","Customization",[2932,3908,3910],{"id":3909},"overriding-defaults","Overriding Defaults",[704,3912,706,3913,3915],{},[712,3914,714],{}," composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[851,3917,3919],{"className":853,"code":3918,"filename":849,"language":855,"meta":856,"style":856},"import { styleframe } from 'virtual:styleframe';\nimport { useToastRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst toast = useToastRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n    },\n    defaultVariants: {\n        variant: 'soft',\n        size: 'md',\n        orientation: 'horizontal',\n    },\n});\n\nexport default s;\n",[712,3920,3921,3941,3961,3965,3979,3983,4000,4009,4024,4029,4038,4053,4068,4083,4087,4095,4099],{"__ignoreMap":856},[860,3922,3923,3925,3927,3929,3931,3933,3935,3937,3939],{"class":862,"line":863},[860,3924,867],{"class":866},[860,3926,871],{"class":870},[860,3928,875],{"class":874},[860,3930,878],{"class":870},[860,3932,881],{"class":866},[860,3934,884],{"class":870},[860,3936,888],{"class":887},[860,3938,891],{"class":870},[860,3940,894],{"class":870},[860,3942,3943,3945,3947,3949,3951,3953,3955,3957,3959],{"class":862,"line":897},[860,3944,867],{"class":866},[860,3946,871],{"class":870},[860,3948,1021],{"class":874},[860,3950,878],{"class":870},[860,3952,881],{"class":866},[860,3954,884],{"class":870},[860,3956,972],{"class":887},[860,3958,891],{"class":870},[860,3960,894],{"class":870},[860,3962,3963],{"class":862,"line":905},[860,3964,982],{"emptyLinePlaceholder":231},[860,3966,3967,3969,3971,3973,3975,3977],{"class":862,"line":914},[860,3968,989],{"class":988},[860,3970,992],{"class":874},[860,3972,995],{"class":870},[860,3974,875],{"class":998},[860,3976,1001],{"class":874},[860,3978,894],{"class":870},[860,3980,3981],{"class":862,"line":922},[860,3982,982],{"emptyLinePlaceholder":231},[860,3984,3985,3987,3989,3991,3993,3996,3998],{"class":862,"line":930},[860,3986,989],{"class":988},[860,3988,1016],{"class":874},[860,3990,995],{"class":870},[860,3992,1021],{"class":998},[860,3994,3995],{"class":874},"(s",[860,3997,1185],{"class":870},[860,3999,902],{"class":870},[860,4001,4002,4005,4007],{"class":862,"line":938},[860,4003,4004],{"class":1287},"    base",[860,4006,1584],{"class":870},[860,4008,902],{"class":870},[860,4010,4011,4014,4016,4018,4020,4022],{"class":862,"line":946},[860,4012,4013],{"class":1287},"        borderRadius",[860,4015,1584],{"class":870},[860,4017,884],{"class":870},[860,4019,806],{"class":887},[860,4021,891],{"class":870},[860,4023,911],{"class":870},[860,4025,4026],{"class":862,"line":954},[860,4027,4028],{"class":870},"    },\n",[860,4030,4031,4034,4036],{"class":862,"line":962},[860,4032,4033],{"class":1287},"    defaultVariants",[860,4035,1584],{"class":870},[860,4037,902],{"class":870},[860,4039,4040,4043,4045,4047,4049,4051],{"class":862,"line":979},[860,4041,4042],{"class":1287},"        variant",[860,4044,1584],{"class":870},[860,4046,884],{"class":870},[860,4048,741],{"class":887},[860,4050,891],{"class":870},[860,4052,911],{"class":870},[860,4054,4055,4058,4060,4062,4064,4066],{"class":862,"line":985},[860,4056,4057],{"class":1287},"        size",[860,4059,1584],{"class":870},[860,4061,884],{"class":870},[860,4063,1432],{"class":887},[860,4065,891],{"class":870},[860,4067,911],{"class":870},[860,4069,4070,4073,4075,4077,4079,4081],{"class":862,"line":1006},[860,4071,4072],{"class":1287},"        orientation",[860,4074,1584],{"class":870},[860,4076,884],{"class":870},[860,4078,1448],{"class":887},[860,4080,891],{"class":870},[860,4082,911],{"class":870},[860,4084,4085],{"class":862,"line":1011},[860,4086,4028],{"class":870},[860,4088,4089,4091,4093],{"class":862,"line":1029},[860,4090,965],{"class":870},[860,4092,2269],{"class":874},[860,4094,894],{"class":870},[860,4096,4097],{"class":862,"line":1046},[860,4098,982],{"emptyLinePlaceholder":231},[860,4100,4101,4103,4105,4107],{"class":862,"line":1063},[860,4102,1139],{"class":866},[860,4104,1142],{"class":866},[860,4106,1145],{"class":874},[860,4108,894],{"class":870},[3587,4110,4111,4114,4115,4117,4118,4121,4122,2907,4125,4128,4129,4132],{},[708,4112,4113],{},"Note:"," ",[712,4116,723],{}," is not a variant of ",[712,4119,4120],{},"useToastRecipe"," — it lives on ",[712,4123,4124],{},"useToastIconRecipe",[712,4126,4127],{},"useToastProgressRecipe",". To change the default accent, pass ",[712,4130,4131],{},"defaultVariants: { color: 'info' }"," to those recipes instead.",[2932,4134,4136],{"id":4135},"filtering-variants","Filtering Variants",[704,4138,4139,4140,4143],{},"If you only need a subset of the available variants, use the ",[712,4141,4142],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[851,4145,4147],{"className":853,"code":4146,"filename":849,"language":855,"meta":856,"style":856},"import { styleframe } from 'virtual:styleframe';\nimport { useToastRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the soft and subtle surface styles\nconst toast = useToastRecipe(s, {\n    filter: {\n        variant: ['soft', 'subtle'],\n    },\n});\n\nexport default s;\n",[712,4148,4149,4169,4189,4193,4207,4211,4216,4232,4241,4268,4272,4280,4284],{"__ignoreMap":856},[860,4150,4151,4153,4155,4157,4159,4161,4163,4165,4167],{"class":862,"line":863},[860,4152,867],{"class":866},[860,4154,871],{"class":870},[860,4156,875],{"class":874},[860,4158,878],{"class":870},[860,4160,881],{"class":866},[860,4162,884],{"class":870},[860,4164,888],{"class":887},[860,4166,891],{"class":870},[860,4168,894],{"class":870},[860,4170,4171,4173,4175,4177,4179,4181,4183,4185,4187],{"class":862,"line":897},[860,4172,867],{"class":866},[860,4174,871],{"class":870},[860,4176,1021],{"class":874},[860,4178,878],{"class":870},[860,4180,881],{"class":866},[860,4182,884],{"class":870},[860,4184,972],{"class":887},[860,4186,891],{"class":870},[860,4188,894],{"class":870},[860,4190,4191],{"class":862,"line":905},[860,4192,982],{"emptyLinePlaceholder":231},[860,4194,4195,4197,4199,4201,4203,4205],{"class":862,"line":914},[860,4196,989],{"class":988},[860,4198,992],{"class":874},[860,4200,995],{"class":870},[860,4202,875],{"class":998},[860,4204,1001],{"class":874},[860,4206,894],{"class":870},[860,4208,4209],{"class":862,"line":922},[860,4210,982],{"emptyLinePlaceholder":231},[860,4212,4213],{"class":862,"line":930},[860,4214,4215],{"class":1377},"\u002F\u002F Only generate the soft and subtle surface styles\n",[860,4217,4218,4220,4222,4224,4226,4228,4230],{"class":862,"line":938},[860,4219,989],{"class":988},[860,4221,1016],{"class":874},[860,4223,995],{"class":870},[860,4225,1021],{"class":998},[860,4227,3995],{"class":874},[860,4229,1185],{"class":870},[860,4231,902],{"class":870},[860,4233,4234,4237,4239],{"class":862,"line":946},[860,4235,4236],{"class":1287},"    filter",[860,4238,1584],{"class":870},[860,4240,902],{"class":870},[860,4242,4243,4245,4247,4250,4252,4254,4256,4258,4260,4262,4264,4266],{"class":862,"line":954},[860,4244,4042],{"class":1287},[860,4246,1584],{"class":870},[860,4248,4249],{"class":874}," [",[860,4251,891],{"class":870},[860,4253,741],{"class":887},[860,4255,891],{"class":870},[860,4257,1185],{"class":870},[860,4259,884],{"class":870},[860,4261,744],{"class":887},[860,4263,891],{"class":870},[860,4265,1520],{"class":874},[860,4267,911],{"class":870},[860,4269,4270],{"class":862,"line":962},[860,4271,4028],{"class":870},[860,4273,4274,4276,4278],{"class":862,"line":979},[860,4275,965],{"class":870},[860,4277,2269],{"class":874},[860,4279,894],{"class":870},[860,4281,4282],{"class":862,"line":985},[860,4283,982],{"emptyLinePlaceholder":231},[860,4285,4286,4288,4290,4292],{"class":862,"line":1006},[860,4287,1139],{"class":866},[860,4289,1142],{"class":866},[860,4291,1145],{"class":874},[860,4293,894],{"class":870},[3587,4295,4296,4298,4299,2088],{},[708,4297,4113],{}," To limit which accent colors are generated, filter the icon and progress recipes — e.g. ",[712,4300,4301],{},"useToastIconRecipe(s, { filter: { color: ['success', 'error'] } })",[3587,4303,4304,4307,4308,4310,4311,4313],{},[708,4305,4306],{},"Good to know:"," When filtering removes a value that a default points at, the default adjusts to keep your recipe consistent — e.g. filtering out ",[712,4309,737],{}," clears the ",[712,4312,2921],{}," default.",[700,4315,83],{"id":4316},"api-reference",[2932,4318,4320],{"id":4319},"usetoastrecipes-options",[712,4321,4322],{},"useToastRecipe(s, options?)",[704,4324,4325,4326,4328],{},"Creates the toast surface recipe with variant, size, and orientation axes. The ",[712,4327,723],{}," accent lives on the icon and progress sub-recipes, not here.",[704,4330,4331],{},[708,4332,4333],{},"Parameters:",[2947,4335,4336,4348],{},[2950,4337,4338],{},[2953,4339,4340,4343,4346],{},[2956,4341,4342],{},"Parameter",[2956,4344,4345],{},"Type",[2956,4347,3191],{},[2966,4349,4350,4365,4380,4395,4409,4424,4439],{},[2953,4351,4352,4357,4362],{},[2971,4353,4354],{},[712,4355,4356],{},"s",[2971,4358,4359],{},[712,4360,4361],{},"Styleframe",[2971,4363,4364],{},"The Styleframe instance",[2953,4366,4367,4372,4377],{},[2971,4368,4369],{},[712,4370,4371],{},"options",[2971,4373,4374],{},[712,4375,4376],{},"DeepPartial\u003CRecipeConfig>",[2971,4378,4379],{},"Optional overrides for the recipe configuration",[2953,4381,4382,4387,4392],{},[2971,4383,4384],{},[712,4385,4386],{},"options.base",[2971,4388,4389],{},[712,4390,4391],{},"VariantDeclarationsBlock",[2971,4393,4394],{},"Custom base styles for the toast",[2953,4396,4397,4402,4406],{},[2971,4398,4399],{},[712,4400,4401],{},"options.variants",[2971,4403,4404],{},[712,4405,2926],{},[2971,4407,4408],{},"Custom variant definitions for the recipe",[2953,4410,4411,4416,4421],{},[2971,4412,4413],{},[712,4414,4415],{},"options.defaultVariants",[2971,4417,4418],{},[712,4419,4420],{},"Record\u003Ckeyof Variants, string>",[2971,4422,4423],{},"Default variant values for the recipe",[2953,4425,4426,4431,4436],{},[2971,4427,4428],{},[712,4429,4430],{},"options.compoundVariants",[2971,4432,4433],{},[712,4434,4435],{},"CompoundVariant[]",[2971,4437,4438],{},"Custom compound variant definitions for the recipe",[2953,4440,4441,4446,4451],{},[2971,4442,4443],{},[712,4444,4445],{},"options.filter",[2971,4447,4448],{},[712,4449,4450],{},"Record\u003Cstring, string[]>",[2971,4452,4453],{},"Limit which variant values are generated",[704,4455,4456],{},[708,4457,4458],{},"Variants:",[2947,4460,4461,4474],{},[2950,4462,4463],{},[2953,4464,4465,4468,4471],{},[2956,4466,4467],{},"Variant",[2956,4469,4470],{},"Options",[2956,4472,4473],{},"Default",[2966,4475,4476,4494,4512],{},[2953,4477,4478,4482,4490],{},[2971,4479,4480],{},[712,4481,2921],{},[2971,4483,4484,738,4486,738,4488],{},[712,4485,737],{},[712,4487,741],{},[712,4489,744],{},[2971,4491,4492],{},[712,4493,737],{},[2953,4495,4496,4500,4508],{},[2971,4497,4498],{},[712,4499,3287],{},[2971,4501,4502,738,4504,738,4506],{},[712,4503,3161],{},[712,4505,1432],{},[712,4507,3165],{},[2971,4509,4510],{},[712,4511,1432],{},[2953,4513,4514,4518,4524],{},[2971,4515,4516],{},[712,4517,3313],{},[2971,4519,4520,738,4522],{},[712,4521,1448],{},[712,4523,3325],{},[2971,4525,4526],{},[712,4527,1448],{},[704,4529,706,4530,4532],{},[712,4531,723],{}," accent is a variant of the icon and progress sub-recipes:",[2947,4534,4535,4545],{},[2950,4536,4537],{},[2953,4538,4539,4541,4543],{},[2956,4540,4467],{},[2956,4542,4470],{},[2956,4544,4473],{},[2966,4546,4547],{},[2953,4548,4549,4553,4573],{},[2971,4550,4551],{},[712,4552,723],{},[2971,4554,4555,738,4557,738,4559,738,4561,738,4563,738,4565,738,4567,738,4569,738,4571],{},[712,4556,2869],{},[712,4558,2872],{},[712,4560,2773],{},[712,4562,2877],{},[712,4564,2880],{},[712,4566,2883],{},[712,4568,2887],{},[712,4570,2890],{},[712,4572,1401],{},[2971,4574,4575],{},[712,4576,1401],{},[2932,4578,4580],{"id":4579},"sub-part-recipes","Sub-part recipes",[704,4582,4583,4584,4587,4588,4590],{},"The toast's parts are styled by recipes that accept the same ",[712,4585,4586],{},"(s, options?)"," signature. Most are base-only; the icon and progress recipes each carry the ",[712,4589,723],{}," axis that paints the semantic accent:",[2947,4592,4593,4606],{},[2950,4594,4595],{},[2953,4596,4597,4600,4603],{},[2956,4598,4599],{},"Composable",[2956,4601,4602],{},"Class",[2956,4604,4605],{},"Purpose",[2966,4607,4608,4626,4641,4656,4671,4692],{},[2953,4609,4610,4615,4620],{},[2971,4611,4612],{},[712,4613,4614],{},"useToastIconRecipe()",[2971,4616,4617],{},[712,4618,4619],{},"toast-icon",[2971,4621,4622,4623,4625],{},"Non-shrinking inline-flex wrapper for the leading icon; carries the ",[712,4624,723],{}," accent",[2953,4627,4628,4633,4638],{},[2971,4629,4630],{},[712,4631,4632],{},"useToastContentRecipe()",[2971,4634,4635],{},[712,4636,4637],{},"toast-content",[2971,4639,4640],{},"Main text area, fills the available space",[2953,4642,4643,4648,4653],{},[2971,4644,4645],{},[712,4646,4647],{},"useToastTitleRecipe()",[2971,4649,4650],{},[712,4651,4652],{},"toast-title",[2971,4654,4655],{},"Headline line — semibold and snug, sits above the description",[2953,4657,4658,4663,4668],{},[2971,4659,4660],{},[712,4661,4662],{},"useToastDescriptionRecipe()",[2971,4664,4665],{},[712,4666,4667],{},"toast-description",[2971,4669,4670],{},"Supporting line — one font-size token below the title, a step down in weight",[2953,4672,4673,4677,4681],{},[2971,4674,4675],{},[712,4676,3423],{},[2971,4678,4679],{},[712,4680,3427],{},[2971,4682,4683,4684,4686,4687,4689,4690,2269],{},"Prominent rounded countdown bar inset from the corners; carries the ",[712,4685,723],{}," accent; shrinks over ",[712,4688,3431],{}," (default ",[712,4691,3577],{},[2953,4693,4694,4698,4703],{},[2971,4695,4696],{},[712,4697,3401],{},[2971,4699,4700],{},[712,4701,4702],{},"toast-dismiss",[2971,4704,4705],{},"Dismiss button reset with hover and focus-visible states",[704,4707,4708],{},[717,4709,4710],{"href":142},"Learn more about recipes →",[700,4712,4714],{"id":4713},"best-practices","Best Practices",[779,4716,4717,4732,4741,4755,4761,4769,4778,4788],{},[782,4718,4719,4722,4723,4725,4726,4728,4729,4731],{},[708,4720,4721],{},"Choose colors by meaning, not appearance",": Use ",[712,4724,2773],{}," for confirmations, ",[712,4727,2883],{}," for failures, and ",[712,4730,2880],{}," for caution messages — this keeps your UI consistent when tokens change.",[782,4733,4734,4740],{},[708,4735,4736,4737,4739],{},"Use ",[712,4738,1401],{}," for generic messages",": The neutral color adapts to light and dark mode automatically, making it the safest default for general-purpose toasts.",[782,4742,4743,4751,4752,4754],{},[708,4744,4745,4746,3899,4748,4750],{},"Prefer ",[712,4747,744],{},[712,4749,741],{}," for informational toasts",": Reserve ",[712,4753,737],{}," for critical notifications that demand immediate attention. Too many solid toasts create visual fatigue.",[782,4756,4757,4760],{},[708,4758,4759],{},"Pair an icon with the message",": Icons reinforce the toast's meaning and improve scannability, especially for users who cannot distinguish colors.",[782,4762,4763,4768],{},[708,4764,4736,4765,4767],{},[712,4766,3325],{}," orientation for longer content",": When toasts contain multi-line descriptions or action buttons, vertical layout prevents cramped horizontal spacing.",[782,4770,4771,4774,4775,4777],{},[708,4772,4773],{},"Filter what you don't need",": If your application only uses a few colors, pass a ",[712,4776,4142],{}," option to reduce generated CSS.",[782,4779,4780,4783,4784,4787],{},[708,4781,4782],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[712,4785,4786],{},"defaultVariants"," so component consumers write less code.",[782,4789,4790,4793],{},[708,4791,4792],{},"Include descriptive text",": Toasts should not rely on color alone to convey meaning. Always include a title or description that communicates the message.",[700,4795,4797],{"id":4796},"faq","FAQ",[4799,4800,4801,4826,4858,4882,4892,4905,4923],"accordion",{},[4802,4803,4806,4807,738,4809,738,4811,745,4813,4815,4816,4818,4819,4821,4822,4825],"accordion-item",{"icon":4804,"label":4805},"i-lucide-circle-help","How is the Toast recipe different from the Callout recipe?","They share the same color, size, and orientation vocabulary. The toast trims the variant axis to the three filled styles — ",[712,4808,737],{},[712,4810,741],{},[712,4812,744],{},[712,4814,748],{},", since a transparent-background surface floating over arbitrary page content would be illegible. The other difference is presentation: the toast floats. Its base adds a soft, diffuse ",[712,4817,802],{}," elevation, well-rounded ",[712,4820,806],{}," corners, and generous padding, and omits the full-width ",[712,4823,4824],{},"flex-basis"," so it sizes to its content, where the callout is an inline, full-width surface. Use a callout for inline, in-flow messages and a toast for transient, floating notifications.",[4802,4827,4829,4830,4833,4834,4836,4837,4839,4840,738,4842,738,4844,4846,4847,4849,4850,2907,4852,4854,4855,4857],{"icon":4804,"label":4828},"Why doesn't the surface recipe have a color axis?","Following ",[717,4831,755],{"href":752,"rel":4832},[754],", the ",[712,4835,723],{}," accent is scoped to the icon and progress bar, so the toast body can stay a calm neutral card for every color. Keeping color off the surface means the ",[712,4838,2921],{}," axis (",[712,4841,737],{},[712,4843,741],{},[712,4845,744],{},") is purely a neutral surface treatment, with no color interactions to compound — so the recipe has no compound variants at all. The accent instead lives as a ",[712,4848,723],{}," axis on ",[712,4851,4124],{},[712,4853,4127],{},", both painting with ",[712,4856,2914],{}," so an SVG or icon-font glyph picks it up automatically.",[4802,4859,4861,4862,2907,4864,4866,4867,4869,4870,4872,4873,4875,4876,4878,4879,4881],{"icon":4804,"label":4860},"What is the difference between the light, dark, and neutral accents?","These three tint the icon and progress bar, not the body. ",[712,4863,2890],{},[712,4865,1401],{}," both resolve to the adaptive ",[712,4868,3081],{}," foreground (dark ink on a light card, light ink on a dark card). ",[712,4871,2887],{}," uses the inverted foreground ",[712,4874,3063],{},", matching the family's outline ",[712,4877,2887],{}," accent — note this is intentionally low-contrast on a light body. For a general-purpose toast that blends with the surrounding interface, ",[712,4880,1401],{}," is the safest default.",[4802,4883,4885,4886,4888,4889,4891],{"icon":4804,"label":4884},"Where do positioning, stacking, and auto-dismiss live?","The Toast recipe styles a single toast surface only. Placing toasts in a corner of the viewport, stacking multiple toasts, timing auto-dismiss, and swipe-to-dismiss are behaviors owned by your toast container \u002F framework, not the recipe. The recipe does provide the collapse-on-",[712,4887,2390],{}," rule so dismissal only needs to toggle the ",[712,4890,2390],{}," attribute.",[4802,4893,4895,4896,4898,4899,4901,4902,4904],{"icon":4804,"label":4894},"What's the difference between the soft and subtle variants?","Both use a faint neutral fill. The difference is that ",[712,4897,744],{}," also adds a hairline border, giving the toast more visual definition. Use ",[712,4900,741],{}," when you want a gentler, borderless appearance, and ",[712,4903,744],{}," when the toast needs slightly more structure. Neither carries a color — the accent is on the icon and progress bar regardless of variant.",[4802,4906,706,4908,4910,4911,4913,4914,4916,4917,4919,4920,4922],{"icon":4804,"label":4907},"How should I handle the dismissible behavior?",[712,4909,3401],{}," composable styles the close control, and the toast recipe collapses the element when the ",[712,4912,2390],{}," attribute is set. Dismissal logic — toggling ",[712,4915,2390],{},", animating out, managing focus — remains the responsibility of your component framework. Use a ",[712,4918,3865],{}," element with ",[712,4921,3868],{}," for the close control, and move focus to the next logical element after dismissal.",[4802,4924,4926,4927,738,4929,738,4931,4933,4934,4936,4937,4940],{"icon":4804,"label":4925},"Can I use the Toast recipe without the design tokens preset?","The Toast recipe references design tokens like ",[712,4928,2979],{},[712,4930,3210],{},[712,4932,802],{},", and ",[712,4935,806],{}," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[712,4938,4939],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[4942,4943,4944],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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}",{"title":856,"searchDepth":897,"depth":897,"links":4946},[4947,4948,4949,4950,4953,4958,4961,4966,4967,4968,4969,4973,4977,4978],{"id":702,"depth":897,"text":88},{"id":773,"depth":897,"text":774},{"id":828,"depth":897,"text":829},{"id":2863,"depth":897,"text":203,"children":4951},[4952],{"id":2934,"depth":905,"text":2935},{"id":3107,"depth":897,"text":2926,"children":4954},[4955,4956,4957],{"id":737,"depth":905,"text":3120},{"id":741,"depth":905,"text":3133},{"id":744,"depth":905,"text":3142},{"id":3154,"depth":897,"text":3155,"children":4959},[4960],{"id":3172,"depth":905,"text":3173},{"id":3313,"depth":897,"text":3314,"children":4962},[4963,4964,4965],{"id":1448,"depth":905,"text":3328},{"id":3325,"depth":905,"text":3337},{"id":3346,"depth":905,"text":3347},{"id":1863,"depth":897,"text":3396},{"id":3418,"depth":897,"text":424},{"id":3599,"depth":897,"text":580},{"id":3905,"depth":897,"text":3906,"children":4970},[4971,4972],{"id":3909,"depth":905,"text":3910},{"id":4135,"depth":905,"text":4136},{"id":4316,"depth":897,"text":83,"children":4974},[4975,4976],{"id":4319,"depth":905,"text":4322},{"id":4579,"depth":905,"text":4580},{"id":4713,"depth":897,"text":4714},{"id":4796,"depth":897,"text":4797},"A transient, floating feedback component for notifications and status messages. Supports multiple colors, visual styles, sizes, and orientations through the recipe system.",null,{},{"icon":7},{"title":436,"description":4979},"rt4zPCbv7afoK5ZhyNj6G83K0SeyVC9EcKCkQjo1hF4",[4986,4988],{"title":432,"path":433,"stem":434,"description":4987,"icon":7,"children":-1},"A loading spinner component with color, size, and optional overlay — built as a multi-part recipe system with SVG-based animation.",{"title":444,"path":445,"stem":446,"description":4989,"icon":7,"children":-1},"A date-grid styling recipe with selected, today, range, booked, disabled, and outside-month day states, week numbers, month\u002Fyear selectors, presets and a time-picker footer, plus a custom cell size through the recipe system.",1784098606802]