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