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