[{"data":1,"prerenderedAt":3751},["ShallowReactive",2],{"navigation_docs":3,"-docs-components-composables-tooltip":398,"-docs-components-composables-tooltip-surround":3746},[4,45,134,150,165,239,281,354],{"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],{"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},"Tooltip","/docs/components/composables/tooltip","docs/06.components/02.composables/08.tooltip",{"title":88,"path":282,"stem":283,"children":284,"icon":6},"/docs/utilities","docs/07.utilities/00.index",[285,286,289],{"title":21,"path":282,"stem":283,"icon":51},{"title":172,"path":287,"stem":288,"icon":175},"/docs/utilities/presets","docs/07.utilities/01.presets",{"title":118,"icon":91,"defaultOpen":177,"path":290,"stem":291,"children":292,"page":6},"/docs/utilities/composables","docs/07.utilities/02.composables",[293,297,301,305,308,312,316,320,324,328,332,335,339,343,347,351],{"title":294,"path":295,"stem":296,"icon":6},"Accessibility","/docs/utilities/composables/accessibility","docs/07.utilities/02.composables/00.accessibility",{"title":298,"path":299,"stem":300,"icon":6},"Animations","/docs/utilities/composables/animations","docs/07.utilities/02.composables/01.animations",{"title":302,"path":303,"stem":304,"icon":6},"Backgrounds","/docs/utilities/composables/backgrounds","docs/07.utilities/02.composables/02.backgrounds",{"title":186,"path":306,"stem":307,"icon":6},"/docs/utilities/composables/borders","docs/07.utilities/02.composables/03.borders",{"title":309,"path":310,"stem":311,"icon":6},"Effects","/docs/utilities/composables/effects","docs/07.utilities/02.composables/04.effects",{"title":313,"path":314,"stem":315,"icon":6},"Filters","/docs/utilities/composables/filters","docs/07.utilities/02.composables/05.filters",{"title":317,"path":318,"stem":319,"icon":6},"Flexbox & Grid","/docs/utilities/composables/flexbox-grid","docs/07.utilities/02.composables/06.flexbox-grid",{"title":321,"path":322,"stem":323,"icon":6},"Interactivity","/docs/utilities/composables/interactivity","docs/07.utilities/02.composables/07.interactivity",{"title":325,"path":326,"stem":327,"icon":6},"Layout","/docs/utilities/composables/layout","docs/07.utilities/02.composables/08.layout",{"title":329,"path":330,"stem":331,"icon":6},"Sizing","/docs/utilities/composables/sizing","docs/07.utilities/02.composables/09.sizing",{"title":228,"path":333,"stem":334,"icon":6},"/docs/utilities/composables/spacing","docs/07.utilities/02.composables/10.spacing",{"title":336,"path":337,"stem":338,"icon":6},"SVG","/docs/utilities/composables/svg","docs/07.utilities/02.composables/11.svg",{"title":340,"path":341,"stem":342,"icon":6},"Tables","/docs/utilities/composables/tables","docs/07.utilities/02.composables/12.tables",{"title":344,"path":345,"stem":346,"icon":6},"Transforms","/docs/utilities/composables/transforms","docs/07.utilities/02.composables/13.transforms",{"title":348,"path":349,"stem":350,"icon":6},"Transitions","/docs/utilities/composables/transitions","docs/07.utilities/02.composables/14.transitions",{"title":232,"path":352,"stem":353,"icon":6},"/docs/utilities/composables/typography","docs/07.utilities/02.composables/15.typography",{"title":93,"path":355,"stem":356,"children":357,"icon":6},"/docs/modifiers","docs/08.modifiers/00.index",[358,359,362],{"title":21,"path":355,"stem":356,"icon":51},{"title":172,"path":360,"stem":361,"icon":175},"/docs/modifiers/presets","docs/08.modifiers/01.presets",{"title":118,"icon":96,"defaultOpen":177,"path":363,"stem":364,"children":365,"page":6},"/docs/modifiers/composables","docs/08.modifiers/02.composables",[366,370,374,378,382,386,390,394],{"title":367,"path":368,"stem":369,"icon":6},"ARIA State","/docs/modifiers/composables/aria-state","docs/08.modifiers/02.composables/00.aria-state",{"title":371,"path":372,"stem":373,"icon":6},"Directional","/docs/modifiers/composables/directional","docs/08.modifiers/02.composables/01.directional",{"title":375,"path":376,"stem":377,"icon":6},"Form State","/docs/modifiers/composables/form-state","docs/08.modifiers/02.composables/02.form-state",{"title":379,"path":380,"stem":381,"icon":6},"Media & Preferences","/docs/modifiers/composables/media-preferences","docs/08.modifiers/02.composables/03.media-preferences",{"title":383,"path":384,"stem":385,"icon":6},"Other State","/docs/modifiers/composables/other-state","docs/08.modifiers/02.composables/04.other-state",{"title":387,"path":388,"stem":389,"icon":6},"Pseudo-Elements","/docs/modifiers/composables/pseudo-elements","docs/08.modifiers/02.composables/05.pseudo-elements",{"title":391,"path":392,"stem":393,"icon":6},"Pseudo-State","/docs/modifiers/composables/pseudo-state","docs/08.modifiers/02.composables/06.pseudo-state",{"title":395,"path":396,"stem":397,"icon":6},"Structural","/docs/modifiers/composables/structural","docs/08.modifiers/02.composables/07.structural",{"id":399,"title":278,"body":400,"description":3740,"extension":950,"links":3741,"meta":3742,"navigation":177,"path":279,"seo":3743,"sitemap":3744,"stem":280,"__hash__":3745},"docs/docs/06.components/02.composables/08.tooltip.md",{"type":401,"value":402,"toc":3712},"minimark",[403,407,429,436,440,443,483,487,1856,1859,1870,1876,1879,1884,1888,1955,1965,1969,1977,1980,1983,1986,1989,1992,1995,1998,2004,2007,2011,2020,2023,2027,2030,2120,2144,2148,2151,2196,2209,2306,2311,2314,2337,2426,2434,2542,2582,2586,2590,2593,2880,2884,2891,3131,3136,3140,3146,3149,3154,3275,3280,3351,3357,3364,3368,3467,3471,3521,3526,3530,3601,3605,3708],[404,405,21],"h2",{"id":406},"overview",[408,409,410,411,414,415,419,420,423,424,428],"p",{},"The ",[412,413,278],"strong",{}," is a floating label element used for supplementary context shown on hover or focus. It is composed of two recipe parts: ",[416,417,418],"code",{},"useTooltipRecipe()"," for the content bubble and ",[416,421,422],{},"useTooltipArrowRecipe()"," for the directional arrow. Each composable creates a fully configured ",[425,426,427],"a",{"href":104},"recipe"," with color and variant options — plus compound variants that handle the color-variant combinations automatically. The content recipe adds a size axis for font size and padding control, while the arrow recipe uses a CSS variable for dimension control.",[408,430,431,432,435],{},"The Tooltip recipes integrate directly with the default ",[425,433,434],{"href":173},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[404,437,439],{"id":438},"why-use-the-tooltip-recipe","Why use the Tooltip recipe?",[408,441,442],{},"The Tooltip recipe helps you:",[444,445,446,453,459,465,471,477],"ul",{},[447,448,449,452],"li",{},[412,450,451],{},"Ship faster with sensible defaults",": Get 3 colors, 3 visual styles, and 3 sizes out of the box with a pair of composable calls.",[447,454,455,458],{},[412,456,457],{},"Compose coordinated parts",": Two recipes (content and arrow) share the same color and variant axes, so your tooltips stay internally consistent.",[447,460,461,464],{},[412,462,463],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules, including dark mode overrides.",[447,466,467,470],{},[412,468,469],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[447,472,473,476],{},[412,474,475],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.",[447,478,479,482],{},[412,480,481],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[404,484,486],{"id":485},"usage","Usage",[488,489,491,496,503,787,791,802,1847,1851],"steps",{"level":490},"4",[492,493,495],"h4",{"id":494},"register-the-recipes","Register the recipes",[408,497,498,499,502],{},"Add the Tooltip recipes to a local Styleframe instance. The global ",[416,500,501],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[504,505,507,680],"code-tree",{"default-value":506},"src/components/tooltip.styleframe.ts",[508,509,514],"pre",{"className":510,"code":511,"filename":506,"language":512,"meta":513,"style":513},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useTooltipRecipe,\n    useTooltipArrowRecipe,\n} from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst tooltip = useTooltipRecipe(s);\nconst tooltipArrow = useTooltipArrowRecipe(s);\n\nexport default s;\n","ts","",[416,515,516,552,560,569,577,594,600,621,626,644,661,666],{"__ignoreMap":513},[517,518,521,525,529,533,536,539,542,546,549],"span",{"class":519,"line":520},"line",1,[517,522,524],{"class":523},"s7zQu","import",[517,526,528],{"class":527},"sMK4o"," {",[517,530,532],{"class":531},"sTEyZ"," styleframe",[517,534,535],{"class":527}," }",[517,537,538],{"class":523}," from",[517,540,541],{"class":527}," '",[517,543,545],{"class":544},"sfazB","virtual:styleframe",[517,547,548],{"class":527},"'",[517,550,551],{"class":527},";\n",[517,553,555,557],{"class":519,"line":554},2,[517,556,524],{"class":523},[517,558,559],{"class":527}," {\n",[517,561,563,566],{"class":519,"line":562},3,[517,564,565],{"class":531},"    useTooltipRecipe",[517,567,568],{"class":527},",\n",[517,570,572,575],{"class":519,"line":571},4,[517,573,574],{"class":531},"    useTooltipArrowRecipe",[517,576,568],{"class":527},[517,578,580,583,585,587,590,592],{"class":519,"line":579},5,[517,581,582],{"class":527},"}",[517,584,538],{"class":523},[517,586,541],{"class":527},[517,588,589],{"class":544},"@styleframe/theme",[517,591,548],{"class":527},[517,593,551],{"class":527},[517,595,597],{"class":519,"line":596},6,[517,598,599],{"emptyLinePlaceholder":177},"\n",[517,601,603,607,610,613,616,619],{"class":519,"line":602},7,[517,604,606],{"class":605},"spNyl","const",[517,608,609],{"class":531}," s ",[517,611,612],{"class":527},"=",[517,614,532],{"class":615},"s2Zo4",[517,617,618],{"class":531},"()",[517,620,551],{"class":527},[517,622,624],{"class":519,"line":623},8,[517,625,599],{"emptyLinePlaceholder":177},[517,627,629,631,634,636,639,642],{"class":519,"line":628},9,[517,630,606],{"class":605},[517,632,633],{"class":531}," tooltip ",[517,635,612],{"class":527},[517,637,638],{"class":615}," useTooltipRecipe",[517,640,641],{"class":531},"(s)",[517,643,551],{"class":527},[517,645,647,649,652,654,657,659],{"class":519,"line":646},10,[517,648,606],{"class":605},[517,650,651],{"class":531}," tooltipArrow ",[517,653,612],{"class":527},[517,655,656],{"class":615}," useTooltipArrowRecipe",[517,658,641],{"class":531},[517,660,551],{"class":527},[517,662,664],{"class":519,"line":663},11,[517,665,599],{"emptyLinePlaceholder":177},[517,667,669,672,675,678],{"class":519,"line":668},12,[517,670,671],{"class":523},"export",[517,673,674],{"class":523}," default",[517,676,677],{"class":531}," s",[517,679,551],{"class":527},[508,681,683],{"className":510,"code":682,"filename":501,"language":512,"meta":513,"style":513},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[416,684,685,706,733,737,751,755,764,773,777],{"__ignoreMap":513},[517,686,687,689,691,693,695,697,699,702,704],{"class":519,"line":520},[517,688,524],{"class":523},[517,690,528],{"class":527},[517,692,532],{"class":531},[517,694,535],{"class":527},[517,696,538],{"class":523},[517,698,541],{"class":527},[517,700,701],{"class":544},"styleframe",[517,703,548],{"class":527},[517,705,551],{"class":527},[517,707,708,710,712,715,718,721,723,725,727,729,731],{"class":519,"line":554},[517,709,524],{"class":523},[517,711,528],{"class":527},[517,713,714],{"class":531}," useDesignTokensPreset",[517,716,717],{"class":527},",",[517,719,720],{"class":531}," useUtilitiesPreset",[517,722,535],{"class":527},[517,724,538],{"class":523},[517,726,541],{"class":527},[517,728,589],{"class":544},[517,730,548],{"class":527},[517,732,551],{"class":527},[517,734,735],{"class":519,"line":562},[517,736,599],{"emptyLinePlaceholder":177},[517,738,739,741,743,745,747,749],{"class":519,"line":571},[517,740,606],{"class":605},[517,742,609],{"class":531},[517,744,612],{"class":527},[517,746,532],{"class":615},[517,748,618],{"class":531},[517,750,551],{"class":527},[517,752,753],{"class":519,"line":579},[517,754,599],{"emptyLinePlaceholder":177},[517,756,757,760,762],{"class":519,"line":596},[517,758,759],{"class":615},"useDesignTokensPreset",[517,761,641],{"class":531},[517,763,551],{"class":527},[517,765,766,769,771],{"class":519,"line":602},[517,767,768],{"class":615},"useUtilitiesPreset",[517,770,641],{"class":531},[517,772,551],{"class":527},[517,774,775],{"class":519,"line":623},[517,776,599],{"emptyLinePlaceholder":177},[517,778,779,781,783,785],{"class":519,"line":628},[517,780,671],{"class":523},[517,782,674],{"class":523},[517,784,677],{"class":531},[517,786,551],{"class":527},[492,788,790],{"id":789},"build-the-component","Build the component",[408,792,793,794,797,798,801],{},"Import the ",[416,795,796],{},"tooltip"," and ",[416,799,800],{},"tooltipArrow"," runtime functions from the virtual module and pass variant props to compute class names:",[803,804,805,1278],"tabs",{},[806,807,810],"tabs-item",{"icon":808,"label":809},"i-devicon-react","React",[508,811,814],{"className":510,"code":812,"filename":813,"language":512,"meta":513,"style":513},"import { tooltip, tooltipArrow } from \"virtual:styleframe\";\n\ninterface TooltipProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"soft\" | \"subtle\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    label?: string;\n    children?: React.ReactNode;\n}\n\nexport function Tooltip({\n    color = \"dark\",\n    variant = \"solid\",\n    size = \"md\",\n    label,\n    children,\n}: TooltipProps) {\n    return (\n        \u003Cdiv className=\"tooltip-wrapper\">\n            \u003Cspan\n                className={tooltip({ color, variant, size })}\n                role=\"tooltip\"\n            >\n                {children ?? label}\n            \u003C/span>\n            \u003Cspan className={`${tooltipArrow({ color, variant })} tooltip-arrow-position`} />\n        \u003C/div>\n    );\n}\n","src/components/Tooltip.tsx",[416,815,816,844,848,859,896,930,964,976,994,999,1003,1016,1032,1047,1062,1069,1076,1089,1098,1122,1131,1161,1176,1182,1199,1209,1255,1265,1273],{"__ignoreMap":513},[517,817,818,820,822,825,827,830,832,834,837,839,842],{"class":519,"line":520},[517,819,524],{"class":523},[517,821,528],{"class":527},[517,823,824],{"class":531}," tooltip",[517,826,717],{"class":527},[517,828,829],{"class":531}," tooltipArrow",[517,831,535],{"class":527},[517,833,538],{"class":523},[517,835,836],{"class":527}," \"",[517,838,545],{"class":544},[517,840,841],{"class":527},"\"",[517,843,551],{"class":527},[517,845,846],{"class":519,"line":554},[517,847,599],{"emptyLinePlaceholder":177},[517,849,850,853,857],{"class":519,"line":562},[517,851,852],{"class":605},"interface",[517,854,856],{"class":855},"sBMFI"," TooltipProps",[517,858,559],{"class":527},[517,860,861,865,868,870,873,875,878,880,883,885,887,889,892,894],{"class":519,"line":571},[517,862,864],{"class":863},"swJcz","    color",[517,866,867],{"class":527},"?:",[517,869,836],{"class":527},[517,871,872],{"class":544},"light",[517,874,841],{"class":527},[517,876,877],{"class":527}," |",[517,879,836],{"class":527},[517,881,882],{"class":544},"dark",[517,884,841],{"class":527},[517,886,877],{"class":527},[517,888,836],{"class":527},[517,890,891],{"class":544},"neutral",[517,893,841],{"class":527},[517,895,551],{"class":527},[517,897,898,901,903,905,908,910,912,914,917,919,921,923,926,928],{"class":519,"line":579},[517,899,900],{"class":863},"    variant",[517,902,867],{"class":527},[517,904,836],{"class":527},[517,906,907],{"class":544},"solid",[517,909,841],{"class":527},[517,911,877],{"class":527},[517,913,836],{"class":527},[517,915,916],{"class":544},"soft",[517,918,841],{"class":527},[517,920,877],{"class":527},[517,922,836],{"class":527},[517,924,925],{"class":544},"subtle",[517,927,841],{"class":527},[517,929,551],{"class":527},[517,931,932,935,937,939,942,944,946,948,951,953,955,957,960,962],{"class":519,"line":596},[517,933,934],{"class":863},"    size",[517,936,867],{"class":527},[517,938,836],{"class":527},[517,940,941],{"class":544},"sm",[517,943,841],{"class":527},[517,945,877],{"class":527},[517,947,836],{"class":527},[517,949,950],{"class":544},"md",[517,952,841],{"class":527},[517,954,877],{"class":527},[517,956,836],{"class":527},[517,958,959],{"class":544},"lg",[517,961,841],{"class":527},[517,963,551],{"class":527},[517,965,966,969,971,974],{"class":519,"line":602},[517,967,968],{"class":863},"    label",[517,970,867],{"class":527},[517,972,973],{"class":855}," string",[517,975,551],{"class":527},[517,977,978,981,983,986,989,992],{"class":519,"line":623},[517,979,980],{"class":863},"    children",[517,982,867],{"class":527},[517,984,985],{"class":855}," React",[517,987,988],{"class":527},".",[517,990,991],{"class":855},"ReactNode",[517,993,551],{"class":527},[517,995,996],{"class":519,"line":628},[517,997,998],{"class":527},"}\n",[517,1000,1001],{"class":519,"line":646},[517,1002,599],{"emptyLinePlaceholder":177},[517,1004,1005,1007,1010,1013],{"class":519,"line":663},[517,1006,671],{"class":523},[517,1008,1009],{"class":605}," function",[517,1011,1012],{"class":615}," Tooltip",[517,1014,1015],{"class":527},"({\n",[517,1017,1018,1021,1024,1026,1028,1030],{"class":519,"line":668},[517,1019,864],{"class":1020},"sHdIc",[517,1022,1023],{"class":527}," =",[517,1025,836],{"class":527},[517,1027,882],{"class":544},[517,1029,841],{"class":527},[517,1031,568],{"class":527},[517,1033,1035,1037,1039,1041,1043,1045],{"class":519,"line":1034},13,[517,1036,900],{"class":1020},[517,1038,1023],{"class":527},[517,1040,836],{"class":527},[517,1042,907],{"class":544},[517,1044,841],{"class":527},[517,1046,568],{"class":527},[517,1048,1050,1052,1054,1056,1058,1060],{"class":519,"line":1049},14,[517,1051,934],{"class":1020},[517,1053,1023],{"class":527},[517,1055,836],{"class":527},[517,1057,950],{"class":544},[517,1059,841],{"class":527},[517,1061,568],{"class":527},[517,1063,1065,1067],{"class":519,"line":1064},15,[517,1066,968],{"class":1020},[517,1068,568],{"class":527},[517,1070,1072,1074],{"class":519,"line":1071},16,[517,1073,980],{"class":1020},[517,1075,568],{"class":527},[517,1077,1079,1082,1084,1087],{"class":519,"line":1078},17,[517,1080,1081],{"class":527},"}:",[517,1083,856],{"class":855},[517,1085,1086],{"class":527},")",[517,1088,559],{"class":527},[517,1090,1092,1095],{"class":519,"line":1091},18,[517,1093,1094],{"class":523},"    return",[517,1096,1097],{"class":863}," (\n",[517,1099,1101,1104,1107,1110,1112,1114,1117,1119],{"class":519,"line":1100},19,[517,1102,1103],{"class":527},"        \u003C",[517,1105,1106],{"class":531},"div",[517,1108,1109],{"class":531}," className",[517,1111,612],{"class":527},[517,1113,841],{"class":527},[517,1115,1116],{"class":544},"tooltip-wrapper",[517,1118,841],{"class":527},[517,1120,1121],{"class":527},">\n",[517,1123,1125,1128],{"class":519,"line":1124},20,[517,1126,1127],{"class":527},"            \u003C",[517,1129,1130],{"class":1020},"span\n",[517,1132,1134,1137,1140,1142,1145,1148,1150,1153,1155,1158],{"class":519,"line":1133},21,[517,1135,1136],{"class":531},"                className",[517,1138,1139],{"class":527},"={",[517,1141,796],{"class":863},[517,1143,1144],{"class":527},"({",[517,1146,1147],{"class":1020}," color",[517,1149,717],{"class":527},[517,1151,1152],{"class":1020}," variant",[517,1154,717],{"class":527},[517,1156,1157],{"class":1020}," size",[517,1159,1160],{"class":527}," })}\n",[517,1162,1164,1167,1169,1171,1173],{"class":519,"line":1163},22,[517,1165,1166],{"class":531},"                role",[517,1168,612],{"class":527},[517,1170,841],{"class":527},[517,1172,796],{"class":544},[517,1174,1175],{"class":527},"\"\n",[517,1177,1179],{"class":519,"line":1178},23,[517,1180,1181],{"class":527},"            >\n",[517,1183,1185,1188,1191,1194,1197],{"class":519,"line":1184},24,[517,1186,1187],{"class":527},"                {",[517,1189,1190],{"class":1020},"children",[517,1192,1193],{"class":863}," ?? ",[517,1195,1196],{"class":1020},"label",[517,1198,998],{"class":527},[517,1200,1202,1205,1207],{"class":519,"line":1201},25,[517,1203,1204],{"class":527},"            \u003C/",[517,1206,517],{"class":531},[517,1208,1121],{"class":527},[517,1210,1212,1214,1216,1218,1220,1223,1225,1228,1231,1233,1235,1238,1240,1242,1244,1247,1250,1252],{"class":519,"line":1211},26,[517,1213,1127],{"class":527},[517,1215,517],{"class":531},[517,1217,1109],{"class":531},[517,1219,1139],{"class":527},[517,1221,1222],{"class":527},"`${",[517,1224,800],{"class":615},[517,1226,1227],{"class":531},"(",[517,1229,1230],{"class":527},"{",[517,1232,1147],{"class":531},[517,1234,717],{"class":527},[517,1236,1237],{"class":531}," variant ",[517,1239,582],{"class":527},[517,1241,1086],{"class":531},[517,1243,582],{"class":527},[517,1245,1246],{"class":863}," tooltip-arrow-position",[517,1248,1249],{"class":527},"`",[517,1251,582],{"class":527},[517,1253,1254],{"class":527}," />\n",[517,1256,1258,1261,1263],{"class":519,"line":1257},27,[517,1259,1260],{"class":527},"        \u003C/",[517,1262,1106],{"class":531},[517,1264,1121],{"class":527},[517,1266,1268,1271],{"class":519,"line":1267},28,[517,1269,1270],{"class":863},"    )",[517,1272,551],{"class":527},[517,1274,1276],{"class":519,"line":1275},29,[517,1277,998],{"class":527},[806,1279,1282],{"icon":1280,"label":1281},"i-devicon-vuejs","Vue",[508,1283,1288],{"className":1284,"code":1285,"filename":1286,"language":1287,"meta":513,"style":513},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { tooltip, tooltipArrow } 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        label?: string;\n    }>(),\n    {},\n);\n\nconst classes = computed(() =>\n    tooltip({\n        color: props.color,\n        variant: props.variant,\n        size: props.size,\n    }),\n);\n\nconst arrowClasses = computed(() =>\n    tooltipArrow({\n        color: props.color,\n        variant: props.variant,\n    }),\n);\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"tooltip-wrapper\">\n        \u003Cspan :class=\"classes\" role=\"tooltip\">\n            \u003Cslot>{{ props.label }}\u003C/slot>\n        \u003C/span>\n        \u003Cspan :class=\"[arrowClasses, 'tooltip-arrow-position']\" />\n    \u003C/div>\n\u003C/template>\n","src/components/Tooltip.vue","vue",[416,1289,1290,1314,1335,1359,1363,1378,1386,1417,1448,1479,1490,1499,1504,1510,1514,1532,1542,1559,1574,1589,1598,1604,1608,1625,1634,1648,1662,1670,1676,1685,1690,1700,1721,1756,1781,1790,1828,1838],{"__ignoreMap":513},[517,1291,1292,1295,1298,1301,1304,1306,1308,1310,1312],{"class":519,"line":520},[517,1293,1294],{"class":527},"\u003C",[517,1296,1297],{"class":863},"script",[517,1299,1300],{"class":605}," setup",[517,1302,1303],{"class":605}," lang",[517,1305,612],{"class":527},[517,1307,841],{"class":527},[517,1309,512],{"class":544},[517,1311,841],{"class":527},[517,1313,1121],{"class":527},[517,1315,1316,1318,1320,1323,1325,1327,1329,1331,1333],{"class":519,"line":554},[517,1317,524],{"class":523},[517,1319,528],{"class":527},[517,1321,1322],{"class":531}," computed",[517,1324,535],{"class":527},[517,1326,538],{"class":523},[517,1328,836],{"class":527},[517,1330,1287],{"class":544},[517,1332,841],{"class":527},[517,1334,551],{"class":527},[517,1336,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357],{"class":519,"line":562},[517,1338,524],{"class":523},[517,1340,528],{"class":527},[517,1342,824],{"class":531},[517,1344,717],{"class":527},[517,1346,829],{"class":531},[517,1348,535],{"class":527},[517,1350,538],{"class":523},[517,1352,836],{"class":527},[517,1354,545],{"class":544},[517,1356,841],{"class":527},[517,1358,551],{"class":527},[517,1360,1361],{"class":519,"line":571},[517,1362,599],{"emptyLinePlaceholder":177},[517,1364,1365,1367,1370,1372,1375],{"class":519,"line":579},[517,1366,606],{"class":605},[517,1368,1369],{"class":531}," props ",[517,1371,612],{"class":527},[517,1373,1374],{"class":615}," withDefaults",[517,1376,1377],{"class":531},"(\n",[517,1379,1380,1383],{"class":519,"line":596},[517,1381,1382],{"class":615},"    defineProps",[517,1384,1385],{"class":527},"\u003C{\n",[517,1387,1388,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413,1415],{"class":519,"line":602},[517,1389,1390],{"class":863},"        color",[517,1392,867],{"class":527},[517,1394,836],{"class":527},[517,1396,872],{"class":544},[517,1398,841],{"class":527},[517,1400,877],{"class":527},[517,1402,836],{"class":527},[517,1404,882],{"class":544},[517,1406,841],{"class":527},[517,1408,877],{"class":527},[517,1410,836],{"class":527},[517,1412,891],{"class":544},[517,1414,841],{"class":527},[517,1416,551],{"class":527},[517,1418,1419,1422,1424,1426,1428,1430,1432,1434,1436,1438,1440,1442,1444,1446],{"class":519,"line":623},[517,1420,1421],{"class":863},"        variant",[517,1423,867],{"class":527},[517,1425,836],{"class":527},[517,1427,907],{"class":544},[517,1429,841],{"class":527},[517,1431,877],{"class":527},[517,1433,836],{"class":527},[517,1435,916],{"class":544},[517,1437,841],{"class":527},[517,1439,877],{"class":527},[517,1441,836],{"class":527},[517,1443,925],{"class":544},[517,1445,841],{"class":527},[517,1447,551],{"class":527},[517,1449,1450,1453,1455,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477],{"class":519,"line":628},[517,1451,1452],{"class":863},"        size",[517,1454,867],{"class":527},[517,1456,836],{"class":527},[517,1458,941],{"class":544},[517,1460,841],{"class":527},[517,1462,877],{"class":527},[517,1464,836],{"class":527},[517,1466,950],{"class":544},[517,1468,841],{"class":527},[517,1470,877],{"class":527},[517,1472,836],{"class":527},[517,1474,959],{"class":544},[517,1476,841],{"class":527},[517,1478,551],{"class":527},[517,1480,1481,1484,1486,1488],{"class":519,"line":646},[517,1482,1483],{"class":863},"        label",[517,1485,867],{"class":527},[517,1487,973],{"class":855},[517,1489,551],{"class":527},[517,1491,1492,1495,1497],{"class":519,"line":663},[517,1493,1494],{"class":527},"    }>",[517,1496,618],{"class":531},[517,1498,568],{"class":527},[517,1500,1501],{"class":519,"line":668},[517,1502,1503],{"class":527},"    {},\n",[517,1505,1506,1508],{"class":519,"line":1034},[517,1507,1086],{"class":531},[517,1509,551],{"class":527},[517,1511,1512],{"class":519,"line":1049},[517,1513,599],{"emptyLinePlaceholder":177},[517,1515,1516,1518,1521,1523,1525,1527,1529],{"class":519,"line":1064},[517,1517,606],{"class":605},[517,1519,1520],{"class":531}," classes ",[517,1522,612],{"class":527},[517,1524,1322],{"class":615},[517,1526,1227],{"class":531},[517,1528,618],{"class":527},[517,1530,1531],{"class":605}," =>\n",[517,1533,1534,1537,1539],{"class":519,"line":1071},[517,1535,1536],{"class":615},"    tooltip",[517,1538,1227],{"class":531},[517,1540,1541],{"class":527},"{\n",[517,1543,1544,1546,1549,1552,1554,1557],{"class":519,"line":1078},[517,1545,1390],{"class":863},[517,1547,1548],{"class":527},":",[517,1550,1551],{"class":531}," props",[517,1553,988],{"class":527},[517,1555,1556],{"class":531},"color",[517,1558,568],{"class":527},[517,1560,1561,1563,1565,1567,1569,1572],{"class":519,"line":1091},[517,1562,1421],{"class":863},[517,1564,1548],{"class":527},[517,1566,1551],{"class":531},[517,1568,988],{"class":527},[517,1570,1571],{"class":531},"variant",[517,1573,568],{"class":527},[517,1575,1576,1578,1580,1582,1584,1587],{"class":519,"line":1100},[517,1577,1452],{"class":863},[517,1579,1548],{"class":527},[517,1581,1551],{"class":531},[517,1583,988],{"class":527},[517,1585,1586],{"class":531},"size",[517,1588,568],{"class":527},[517,1590,1591,1594,1596],{"class":519,"line":1124},[517,1592,1593],{"class":527},"    }",[517,1595,1086],{"class":531},[517,1597,568],{"class":527},[517,1599,1600,1602],{"class":519,"line":1133},[517,1601,1086],{"class":531},[517,1603,551],{"class":527},[517,1605,1606],{"class":519,"line":1163},[517,1607,599],{"emptyLinePlaceholder":177},[517,1609,1610,1612,1615,1617,1619,1621,1623],{"class":519,"line":1178},[517,1611,606],{"class":605},[517,1613,1614],{"class":531}," arrowClasses ",[517,1616,612],{"class":527},[517,1618,1322],{"class":615},[517,1620,1227],{"class":531},[517,1622,618],{"class":527},[517,1624,1531],{"class":605},[517,1626,1627,1630,1632],{"class":519,"line":1184},[517,1628,1629],{"class":615},"    tooltipArrow",[517,1631,1227],{"class":531},[517,1633,1541],{"class":527},[517,1635,1636,1638,1640,1642,1644,1646],{"class":519,"line":1201},[517,1637,1390],{"class":863},[517,1639,1548],{"class":527},[517,1641,1551],{"class":531},[517,1643,988],{"class":527},[517,1645,1556],{"class":531},[517,1647,568],{"class":527},[517,1649,1650,1652,1654,1656,1658,1660],{"class":519,"line":1211},[517,1651,1421],{"class":863},[517,1653,1548],{"class":527},[517,1655,1551],{"class":531},[517,1657,988],{"class":527},[517,1659,1571],{"class":531},[517,1661,568],{"class":527},[517,1663,1664,1666,1668],{"class":519,"line":1257},[517,1665,1593],{"class":527},[517,1667,1086],{"class":531},[517,1669,568],{"class":527},[517,1671,1672,1674],{"class":519,"line":1267},[517,1673,1086],{"class":531},[517,1675,551],{"class":527},[517,1677,1678,1681,1683],{"class":519,"line":1275},[517,1679,1680],{"class":527},"\u003C/",[517,1682,1297],{"class":863},[517,1684,1121],{"class":527},[517,1686,1688],{"class":519,"line":1687},30,[517,1689,599],{"emptyLinePlaceholder":177},[517,1691,1693,1695,1698],{"class":519,"line":1692},31,[517,1694,1294],{"class":527},[517,1696,1697],{"class":863},"template",[517,1699,1121],{"class":527},[517,1701,1703,1706,1708,1711,1713,1715,1717,1719],{"class":519,"line":1702},32,[517,1704,1705],{"class":527},"    \u003C",[517,1707,1106],{"class":863},[517,1709,1710],{"class":605}," class",[517,1712,612],{"class":527},[517,1714,841],{"class":527},[517,1716,1116],{"class":544},[517,1718,841],{"class":527},[517,1720,1121],{"class":527},[517,1722,1724,1726,1728,1731,1734,1736,1738,1741,1743,1746,1748,1750,1752,1754],{"class":519,"line":1723},33,[517,1725,1103],{"class":527},[517,1727,517],{"class":863},[517,1729,1730],{"class":527}," :",[517,1732,1733],{"class":605},"class",[517,1735,612],{"class":527},[517,1737,841],{"class":527},[517,1739,1740],{"class":531},"classes",[517,1742,841],{"class":527},[517,1744,1745],{"class":605}," role",[517,1747,612],{"class":527},[517,1749,841],{"class":527},[517,1751,796],{"class":544},[517,1753,841],{"class":527},[517,1755,1121],{"class":527},[517,1757,1759,1761,1764,1767,1769,1771,1774,1777,1779],{"class":519,"line":1758},34,[517,1760,1127],{"class":527},[517,1762,1763],{"class":863},"slot",[517,1765,1766],{"class":527},">{{",[517,1768,1551],{"class":531},[517,1770,988],{"class":527},[517,1772,1773],{"class":531},"label ",[517,1775,1776],{"class":527},"}}\u003C/",[517,1778,1763],{"class":863},[517,1780,1121],{"class":527},[517,1782,1784,1786,1788],{"class":519,"line":1783},35,[517,1785,1260],{"class":527},[517,1787,517],{"class":863},[517,1789,1121],{"class":527},[517,1791,1793,1795,1797,1799,1801,1803,1805,1808,1811,1814,1816,1819,1821,1824,1826],{"class":519,"line":1792},36,[517,1794,1103],{"class":527},[517,1796,517],{"class":863},[517,1798,1730],{"class":527},[517,1800,1733],{"class":605},[517,1802,612],{"class":527},[517,1804,841],{"class":527},[517,1806,1807],{"class":527},"[",[517,1809,1810],{"class":531},"arrowClasses",[517,1812,1813],{"class":527},", ",[517,1815,548],{"class":527},[517,1817,1818],{"class":544},"tooltip-arrow-position",[517,1820,548],{"class":527},[517,1822,1823],{"class":527},"]",[517,1825,841],{"class":527},[517,1827,1254],{"class":527},[517,1829,1831,1834,1836],{"class":519,"line":1830},37,[517,1832,1833],{"class":527},"    \u003C/",[517,1835,1106],{"class":863},[517,1837,1121],{"class":527},[517,1839,1841,1843,1845],{"class":519,"line":1840},38,[517,1842,1680],{"class":527},[517,1844,1697],{"class":863},[517,1846,1121],{"class":527},[492,1848,1850],{"id":1849},"see-it-in-action","See it in action",[1852,1853],"story-preview",{"story":1854,":panel":1855},"theme-recipes-tooltip--default","true",[404,1857,198],{"id":1858},"colors",[408,1860,1861,1862,1813,1864,1866,1867,1869],{},"The Tooltip recipe includes 3 color variants: ",[416,1863,872],{},[416,1865,882],{},", and ",[416,1868,891],{},". Like the Card recipe, the Tooltip uses neutral-spectrum colors designed for supplementary 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.",[408,1871,1872,1873,1875],{},"The default color is ",[416,1874,882],{},", which provides strong contrast against most page backgrounds and is the most common tooltip style across interfaces.",[1852,1877],{"story":1878,":panel":1855},"theme-recipes-tooltip--dark",[1880,1881,1883],"h3",{"id":1882},"color-reference","Color Reference",[1852,1885],{"story":1886,":height":1887},"theme-recipes-tooltip--all-variants","600",[1889,1890,1891,1907],"table",{},[1892,1893,1894],"thead",{},[1895,1896,1897,1901,1904],"tr",{},[1898,1899,1900],"th",{},"Color",[1898,1902,1903],{},"Token",[1898,1905,1906],{},"Use Case",[1908,1909,1910,1929,1943],"tbody",{},[1895,1911,1912,1917,1926],{},[1913,1914,1915],"td",{},[416,1916,872],{},[1913,1918,1919,1922,1923],{},[416,1920,1921],{},"@color.white"," / ",[416,1924,1925],{},"@color.gray-*",[1913,1927,1928],{},"Light tooltips, stays light in dark mode",[1895,1930,1931,1935,1940],{},[1913,1932,1933],{},[416,1934,882],{},[1913,1936,1937],{},[416,1938,1939],{},"@color.gray-900",[1913,1941,1942],{},"Dark tooltips, stays dark in light mode (default)",[1895,1944,1945,1949,1952],{},[1913,1946,1947],{},[416,1948,891],{},[1913,1950,1951],{},"Adaptive (light ↔ dark)",[1913,1953,1954],{},"Adapts to the current color scheme",[1956,1957,1958,1961,1962,1964],"tip",{},[412,1959,1960],{},"Pro tip:"," Use ",[416,1963,882],{}," as your default tooltip color. Dark tooltips provide strong contrast against most page backgrounds, making the supplementary text easy to read at a glance.",[404,1966,1968],{"id":1967},"variants","Variants",[408,1970,1971,1972,1976],{},"Three visual style variants control how the tooltip is rendered. Each variant is combined with the selected color through ",[425,1973,1975],{"href":1974},"/docs/api/recipes#compound-variants","compound variants",", so you always get the correct background, text, and border colors for your chosen color.",[1880,1978,1979],{"id":907},"Solid",[408,1981,1982],{},"Filled background with a subtle border. The most prominent style, ideal for standard tooltips that need clear visibility.",[1852,1984],{"story":1985,":panel":1855},"theme-recipes-tooltip--solid",[1880,1987,1988],{"id":916},"Soft",[408,1990,1991],{},"Light tinted background with no visible border. A gentler style that works well for tooltips in dense layouts where a bordered tooltip would feel heavy.",[1852,1993],{"story":1994,":panel":1855},"theme-recipes-tooltip--soft",[1880,1996,1997],{"id":925},"Subtle",[408,1999,2000,2001,2003],{},"Light tinted background with a matching border. Combines the softness of the ",[416,2002,916],{}," variant with added visual definition from a border.",[1852,2005],{"story":2006,":panel":1855},"theme-recipes-tooltip--subtle",[404,2008,2010],{"id":2009},"sizes","Sizes",[408,2012,2013,2014,2016,2017,2019],{},"Three size variants from ",[416,2015,941],{}," to ",[416,2018,959],{}," control the font size, padding, and border radius of the tooltip content.",[1852,2021],{"story":2022,":panel":1855},"theme-recipes-tooltip--large",[1880,2024,2026],{"id":2025},"size-reference","Size Reference",[1852,2028],{"story":2029,":height":1887},"theme-recipes-tooltip--all-sizes",[1889,2031,2032,2048],{},[1892,2033,2034],{},[1895,2035,2036,2039,2042,2045],{},[1898,2037,2038],{},"Size",[1898,2040,2041],{},"Font Size",[1898,2043,2044],{},"Padding (V / H)",[1898,2046,2047],{},"Border Radius",[1908,2049,2050,2074,2098],{},[1895,2051,2052,2056,2061,2069],{},[1913,2053,2054],{},[416,2055,941],{},[1913,2057,2058],{},[416,2059,2060],{},"@font-size.xs",[1913,2062,2063,1922,2066],{},[416,2064,2065],{},"@0.25",[416,2067,2068],{},"@0.5",[1913,2070,2071],{},[416,2072,2073],{},"@border-radius.sm",[1895,2075,2076,2080,2085,2093],{},[1913,2077,2078],{},[416,2079,950],{},[1913,2081,2082],{},[416,2083,2084],{},"@font-size.sm",[1913,2086,2087,1922,2090],{},[416,2088,2089],{},"@0.375",[416,2091,2092],{},"@0.625",[1913,2094,2095],{},[416,2096,2097],{},"@border-radius.md",[1895,2099,2100,2104,2109,2116],{},[1913,2101,2102],{},[416,2103,959],{},[1913,2105,2106],{},[416,2107,2108],{},"@font-size.md",[1913,2110,2111,1922,2113],{},[416,2112,2068],{},[416,2114,2115],{},"@0.75",[1913,2117,2118],{},[416,2119,2097],{},[2121,2122,2123,2126,2127,2129,2130,2132,2133,2135,2136,2139,2140,2143],"note",{},[412,2124,2125],{},"Good to know:"," The ",[416,2128,1586],{}," prop only applies to ",[416,2131,418],{},". The arrow recipe (",[416,2134,422],{},") does not have a size variant — its dimensions are controlled by the ",[416,2137,2138],{},"@tooltip.arrow.size"," CSS variable (default: ",[416,2141,2142],{},"5px",").",[404,2145,2147],{"id":2146},"anatomy","Anatomy",[408,2149,2150],{},"The Tooltip recipe is composed of two independent recipes that work together to form a complete tooltip:",[1889,2152,2153,2166],{},[1892,2154,2155],{},[1895,2156,2157,2160,2163],{},[1898,2158,2159],{},"Part",[1898,2161,2162],{},"Recipe",[1898,2164,2165],{},"Role",[1908,2167,2168,2182],{},[1895,2169,2170,2175,2179],{},[1913,2171,2172],{},[412,2173,2174],{},"Content",[1913,2176,2177],{},[416,2178,418],{},[1913,2180,2181],{},"The tooltip bubble with background, border, text styling, and shadow",[1895,2183,2184,2189,2193],{},[1913,2185,2186],{},[412,2187,2188],{},"Arrow",[1913,2190,2191],{},[416,2192,422],{},[1913,2194,2195],{},"Directional indicator using CSS border-triangle technique",[408,2197,410,2198,797,2200,2202,2203,2205,2206,2208],{},[416,2199,1556],{},[416,2201,1571],{}," props should be passed consistently to both recipes so that the arrow colors match the tooltip bubble. The arrow recipe registers a ",[416,2204,2138],{}," CSS variable (default ",[416,2207,2142],{},") that controls the arrow dimensions.",[508,2210,2214],{"className":2211,"code":2212,"language":2213,"meta":513,"style":513},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Both parts working together -->\n\u003Cdiv class=\"tooltip-wrapper\">\n    \u003Cspan class=\"tooltip(...)\" role=\"tooltip\">Tooltip text\u003C/span>\n    \u003Cspan class=\"tooltipArrow(...) tooltip-arrow-position\" />\n\u003C/div>\n","html",[416,2215,2216,2222,2240,2279,2298],{"__ignoreMap":513},[517,2217,2218],{"class":519,"line":520},[517,2219,2221],{"class":2220},"sHwdD","\u003C!-- Both parts working together -->\n",[517,2223,2224,2226,2228,2230,2232,2234,2236,2238],{"class":519,"line":554},[517,2225,1294],{"class":527},[517,2227,1106],{"class":863},[517,2229,1710],{"class":605},[517,2231,612],{"class":527},[517,2233,841],{"class":527},[517,2235,1116],{"class":544},[517,2237,841],{"class":527},[517,2239,1121],{"class":527},[517,2241,2242,2244,2246,2248,2250,2252,2255,2257,2259,2261,2263,2265,2267,2270,2273,2275,2277],{"class":519,"line":562},[517,2243,1705],{"class":527},[517,2245,517],{"class":863},[517,2247,1710],{"class":605},[517,2249,612],{"class":527},[517,2251,841],{"class":527},[517,2253,2254],{"class":544},"tooltip(...)",[517,2256,841],{"class":527},[517,2258,1745],{"class":605},[517,2260,612],{"class":527},[517,2262,841],{"class":527},[517,2264,796],{"class":544},[517,2266,841],{"class":527},[517,2268,2269],{"class":527},">",[517,2271,2272],{"class":531},"Tooltip text",[517,2274,1680],{"class":527},[517,2276,517],{"class":863},[517,2278,1121],{"class":527},[517,2280,2281,2283,2285,2287,2289,2291,2294,2296],{"class":519,"line":571},[517,2282,1705],{"class":527},[517,2284,517],{"class":863},[517,2286,1710],{"class":605},[517,2288,612],{"class":527},[517,2290,841],{"class":527},[517,2292,2293],{"class":544},"tooltipArrow(...) tooltip-arrow-position",[517,2295,841],{"class":527},[517,2297,1254],{"class":527},[517,2299,2300,2302,2304],{"class":519,"line":579},[517,2301,1680],{"class":527},[517,2303,1106],{"class":863},[517,2305,1121],{"class":527},[1956,2307,2308,2310],{},[412,2309,1960],{}," The arrow positioning (top, bottom, left, right) is not part of the recipe. Use your positioning library (e.g., Floating UI) or custom CSS to place the arrow relative to the tooltip content and its trigger element.",[404,2312,294],{"id":2313},"accessibility",[444,2315,2316],{},[447,2317,2318,2327,2328,2330,2331,2334,2335,988],{},[412,2319,2320,2321,797,2324,988],{},"Use ",[416,2322,2323],{},"role=\"tooltip\"",[416,2325,2326],{},"aria-describedby"," The tooltip element needs ",[416,2329,2323],{}," and a unique ",[416,2332,2333],{},"id",". The trigger element references it with ",[416,2336,2326],{},[508,2338,2340],{"className":2211,"code":2339,"language":2213,"meta":513,"style":513},"\u003C!-- Correct: trigger linked to tooltip via aria-describedby -->\n\u003Cbutton aria-describedby=\"tooltip-1\">Hover me\u003C/button>\n\u003Cdiv role=\"tooltip\" id=\"tooltip-1\" class=\"...\">Helpful description\u003C/div>\n",[416,2341,2342,2347,2377],{"__ignoreMap":513},[517,2343,2344],{"class":519,"line":520},[517,2345,2346],{"class":2220},"\u003C!-- Correct: trigger linked to tooltip via aria-describedby -->\n",[517,2348,2349,2351,2354,2357,2359,2361,2364,2366,2368,2371,2373,2375],{"class":519,"line":554},[517,2350,1294],{"class":527},[517,2352,2353],{"class":863},"button",[517,2355,2356],{"class":605}," aria-describedby",[517,2358,612],{"class":527},[517,2360,841],{"class":527},[517,2362,2363],{"class":544},"tooltip-1",[517,2365,841],{"class":527},[517,2367,2269],{"class":527},[517,2369,2370],{"class":531},"Hover me",[517,2372,1680],{"class":527},[517,2374,2353],{"class":863},[517,2376,1121],{"class":527},[517,2378,2379,2381,2383,2385,2387,2389,2391,2393,2396,2398,2400,2402,2404,2406,2408,2410,2413,2415,2417,2420,2422,2424],{"class":519,"line":562},[517,2380,1294],{"class":527},[517,2382,1106],{"class":863},[517,2384,1745],{"class":605},[517,2386,612],{"class":527},[517,2388,841],{"class":527},[517,2390,796],{"class":544},[517,2392,841],{"class":527},[517,2394,2395],{"class":605}," id",[517,2397,612],{"class":527},[517,2399,841],{"class":527},[517,2401,2363],{"class":544},[517,2403,841],{"class":527},[517,2405,1710],{"class":605},[517,2407,612],{"class":527},[517,2409,841],{"class":527},[517,2411,2412],{"class":544},"...",[517,2414,841],{"class":527},[517,2416,2269],{"class":527},[517,2418,2419],{"class":531},"Helpful description",[517,2421,1680],{"class":527},[517,2423,1106],{"class":863},[517,2425,1121],{"class":527},[444,2427,2428],{},[447,2429,2430,2433],{},[412,2431,2432],{},"Show on focus, not just hover."," Tooltips must be accessible via keyboard. Show the tooltip when the trigger receives focus, and hide it on blur.",[508,2435,2437],{"className":2211,"code":2436,"language":2213,"meta":513,"style":513},"\u003C!-- Correct: tooltip shown on both hover and focus -->\n\u003Cbutton\n    aria-describedby=\"tooltip-2\"\n    onfocus=\"showTooltip()\"\n    onblur=\"hideTooltip()\"\n    onmouseenter=\"showTooltip()\"\n    onmouseleave=\"hideTooltip()\">\n    Hover or focus me\n\u003C/button>\n",[416,2438,2439,2444,2451,2465,2481,2497,2512,2529,2534],{"__ignoreMap":513},[517,2440,2441],{"class":519,"line":520},[517,2442,2443],{"class":2220},"\u003C!-- Correct: tooltip shown on both hover and focus -->\n",[517,2445,2446,2448],{"class":519,"line":554},[517,2447,1294],{"class":527},[517,2449,2450],{"class":863},"button\n",[517,2452,2453,2456,2458,2460,2463],{"class":519,"line":562},[517,2454,2455],{"class":605},"    aria-describedby",[517,2457,612],{"class":527},[517,2459,841],{"class":527},[517,2461,2462],{"class":544},"tooltip-2",[517,2464,1175],{"class":527},[517,2466,2467,2470,2472,2474,2477,2479],{"class":519,"line":571},[517,2468,2469],{"class":605},"    onfocus",[517,2471,612],{"class":527},[517,2473,841],{"class":527},[517,2475,2476],{"class":615},"showTooltip",[517,2478,618],{"class":544},[517,2480,1175],{"class":527},[517,2482,2483,2486,2488,2490,2493,2495],{"class":519,"line":579},[517,2484,2485],{"class":605},"    onblur",[517,2487,612],{"class":527},[517,2489,841],{"class":527},[517,2491,2492],{"class":615},"hideTooltip",[517,2494,618],{"class":544},[517,2496,1175],{"class":527},[517,2498,2499,2502,2504,2506,2508,2510],{"class":519,"line":596},[517,2500,2501],{"class":605},"    onmouseenter",[517,2503,612],{"class":527},[517,2505,841],{"class":527},[517,2507,2476],{"class":615},[517,2509,618],{"class":544},[517,2511,1175],{"class":527},[517,2513,2514,2517,2519,2521,2523,2525,2527],{"class":519,"line":602},[517,2515,2516],{"class":605},"    onmouseleave",[517,2518,612],{"class":527},[517,2520,841],{"class":527},[517,2522,2492],{"class":615},[517,2524,618],{"class":544},[517,2526,841],{"class":527},[517,2528,1121],{"class":527},[517,2530,2531],{"class":519,"line":623},[517,2532,2533],{"class":531},"    Hover or focus me\n",[517,2535,2536,2538,2540],{"class":519,"line":628},[517,2537,1680],{"class":527},[517,2539,2353],{"class":863},[517,2541,1121],{"class":527},[444,2543,2544,2556,2566],{},[447,2545,2546,2549,2550,2143],{},[412,2547,2548],{},"Allow dismissal with Escape."," Users should be able to dismiss the tooltip by pressing Escape without moving focus (",[425,2551,2555],{"href":2552,"rel":2553},"https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html",[2554],"nofollow","WCAG 1.4.13",[447,2557,2558,2561,2562,2565],{},[412,2559,2560],{},"Keep content concise."," Tooltips are for supplementary information, not essential content. If the information is critical, use an inline label or a ",[425,2563,2564],{"href":263},"callout"," instead.",[447,2567,2568,2126,2571,2573,2574,2576,2577,988],{},[412,2569,2570],{},"Verify contrast ratios.",[416,2572,907],{}," variant with ",[416,2575,882],{}," color places light text on a dark background. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify with the ",[425,2578,2581],{"href":2579,"rel":2580},"https://webaim.org/resources/contrastchecker/",[2554],"WebAIM Contrast Checker",[404,2583,2585],{"id":2584},"customization","Customization",[1880,2587,2589],{"id":2588},"overriding-defaults","Overriding Defaults",[408,2591,2592],{},"Each tooltip 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:",[508,2594,2596],{"className":510,"code":2595,"filename":506,"language":512,"meta":513,"style":513},"import { styleframe } from 'virtual:styleframe';\nimport {\n    useTooltipRecipe,\n    useTooltipArrowRecipe,\n} from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst tooltip = useTooltipRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n        maxWidth: '320px',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'subtle',\n        size: 'lg',\n    },\n});\n\nconst tooltipArrow = useTooltipArrowRecipe(s, {\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'subtle',\n    },\n});\n\nexport default s;\n",[416,2597,2598,2618,2624,2630,2636,2650,2654,2668,2672,2689,2698,2714,2730,2735,2744,2758,2772,2786,2790,2798,2802,2818,2826,2840,2854,2858,2866,2870],{"__ignoreMap":513},[517,2599,2600,2602,2604,2606,2608,2610,2612,2614,2616],{"class":519,"line":520},[517,2601,524],{"class":523},[517,2603,528],{"class":527},[517,2605,532],{"class":531},[517,2607,535],{"class":527},[517,2609,538],{"class":523},[517,2611,541],{"class":527},[517,2613,545],{"class":544},[517,2615,548],{"class":527},[517,2617,551],{"class":527},[517,2619,2620,2622],{"class":519,"line":554},[517,2621,524],{"class":523},[517,2623,559],{"class":527},[517,2625,2626,2628],{"class":519,"line":562},[517,2627,565],{"class":531},[517,2629,568],{"class":527},[517,2631,2632,2634],{"class":519,"line":571},[517,2633,574],{"class":531},[517,2635,568],{"class":527},[517,2637,2638,2640,2642,2644,2646,2648],{"class":519,"line":579},[517,2639,582],{"class":527},[517,2641,538],{"class":523},[517,2643,541],{"class":527},[517,2645,589],{"class":544},[517,2647,548],{"class":527},[517,2649,551],{"class":527},[517,2651,2652],{"class":519,"line":596},[517,2653,599],{"emptyLinePlaceholder":177},[517,2655,2656,2658,2660,2662,2664,2666],{"class":519,"line":602},[517,2657,606],{"class":605},[517,2659,609],{"class":531},[517,2661,612],{"class":527},[517,2663,532],{"class":615},[517,2665,618],{"class":531},[517,2667,551],{"class":527},[517,2669,2670],{"class":519,"line":623},[517,2671,599],{"emptyLinePlaceholder":177},[517,2673,2674,2676,2678,2680,2682,2685,2687],{"class":519,"line":628},[517,2675,606],{"class":605},[517,2677,633],{"class":531},[517,2679,612],{"class":527},[517,2681,638],{"class":615},[517,2683,2684],{"class":531},"(s",[517,2686,717],{"class":527},[517,2688,559],{"class":527},[517,2690,2691,2694,2696],{"class":519,"line":646},[517,2692,2693],{"class":863},"    base",[517,2695,1548],{"class":527},[517,2697,559],{"class":527},[517,2699,2700,2703,2705,2707,2710,2712],{"class":519,"line":663},[517,2701,2702],{"class":863},"        borderRadius",[517,2704,1548],{"class":527},[517,2706,541],{"class":527},[517,2708,2709],{"class":544},"@border-radius.lg",[517,2711,548],{"class":527},[517,2713,568],{"class":527},[517,2715,2716,2719,2721,2723,2726,2728],{"class":519,"line":668},[517,2717,2718],{"class":863},"        maxWidth",[517,2720,1548],{"class":527},[517,2722,541],{"class":527},[517,2724,2725],{"class":544},"320px",[517,2727,548],{"class":527},[517,2729,568],{"class":527},[517,2731,2732],{"class":519,"line":1034},[517,2733,2734],{"class":527},"    },\n",[517,2736,2737,2740,2742],{"class":519,"line":1049},[517,2738,2739],{"class":863},"    defaultVariants",[517,2741,1548],{"class":527},[517,2743,559],{"class":527},[517,2745,2746,2748,2750,2752,2754,2756],{"class":519,"line":1064},[517,2747,1390],{"class":863},[517,2749,1548],{"class":527},[517,2751,541],{"class":527},[517,2753,891],{"class":544},[517,2755,548],{"class":527},[517,2757,568],{"class":527},[517,2759,2760,2762,2764,2766,2768,2770],{"class":519,"line":1071},[517,2761,1421],{"class":863},[517,2763,1548],{"class":527},[517,2765,541],{"class":527},[517,2767,925],{"class":544},[517,2769,548],{"class":527},[517,2771,568],{"class":527},[517,2773,2774,2776,2778,2780,2782,2784],{"class":519,"line":1078},[517,2775,1452],{"class":863},[517,2777,1548],{"class":527},[517,2779,541],{"class":527},[517,2781,959],{"class":544},[517,2783,548],{"class":527},[517,2785,568],{"class":527},[517,2787,2788],{"class":519,"line":1091},[517,2789,2734],{"class":527},[517,2791,2792,2794,2796],{"class":519,"line":1100},[517,2793,582],{"class":527},[517,2795,1086],{"class":531},[517,2797,551],{"class":527},[517,2799,2800],{"class":519,"line":1124},[517,2801,599],{"emptyLinePlaceholder":177},[517,2803,2804,2806,2808,2810,2812,2814,2816],{"class":519,"line":1133},[517,2805,606],{"class":605},[517,2807,651],{"class":531},[517,2809,612],{"class":527},[517,2811,656],{"class":615},[517,2813,2684],{"class":531},[517,2815,717],{"class":527},[517,2817,559],{"class":527},[517,2819,2820,2822,2824],{"class":519,"line":1163},[517,2821,2739],{"class":863},[517,2823,1548],{"class":527},[517,2825,559],{"class":527},[517,2827,2828,2830,2832,2834,2836,2838],{"class":519,"line":1178},[517,2829,1390],{"class":863},[517,2831,1548],{"class":527},[517,2833,541],{"class":527},[517,2835,891],{"class":544},[517,2837,548],{"class":527},[517,2839,568],{"class":527},[517,2841,2842,2844,2846,2848,2850,2852],{"class":519,"line":1184},[517,2843,1421],{"class":863},[517,2845,1548],{"class":527},[517,2847,541],{"class":527},[517,2849,925],{"class":544},[517,2851,548],{"class":527},[517,2853,568],{"class":527},[517,2855,2856],{"class":519,"line":1201},[517,2857,2734],{"class":527},[517,2859,2860,2862,2864],{"class":519,"line":1211},[517,2861,582],{"class":527},[517,2863,1086],{"class":531},[517,2865,551],{"class":527},[517,2867,2868],{"class":519,"line":1257},[517,2869,599],{"emptyLinePlaceholder":177},[517,2871,2872,2874,2876,2878],{"class":519,"line":1267},[517,2873,671],{"class":523},[517,2875,674],{"class":523},[517,2877,677],{"class":531},[517,2879,551],{"class":527},[1880,2881,2883],{"id":2882},"filtering-variants","Filtering Variants",[408,2885,2886,2887,2890],{},"If you only need a subset of the available variants, use the ",[416,2888,2889],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[508,2892,2894],{"className":510,"code":2893,"filename":506,"language":512,"meta":513,"style":513},"import { styleframe } from 'virtual:styleframe';\nimport { useTooltipRecipe, useTooltipArrowRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Only generate dark color with solid style\nconst tooltip = useTooltipRecipe(s, {\n    filter: {\n        color: ['dark'],\n        variant: ['solid'],\n    },\n});\n\nconst tooltipArrow = useTooltipArrowRecipe(s, {\n    filter: {\n        color: ['dark'],\n        variant: ['solid'],\n    },\n});\n\nexport default s;\n",[416,2895,2896,2916,2940,2944,2958,2962,2967,2983,2992,3011,3029,3033,3041,3045,3061,3069,3087,3105,3109,3117,3121],{"__ignoreMap":513},[517,2897,2898,2900,2902,2904,2906,2908,2910,2912,2914],{"class":519,"line":520},[517,2899,524],{"class":523},[517,2901,528],{"class":527},[517,2903,532],{"class":531},[517,2905,535],{"class":527},[517,2907,538],{"class":523},[517,2909,541],{"class":527},[517,2911,545],{"class":544},[517,2913,548],{"class":527},[517,2915,551],{"class":527},[517,2917,2918,2920,2922,2924,2926,2928,2930,2932,2934,2936,2938],{"class":519,"line":554},[517,2919,524],{"class":523},[517,2921,528],{"class":527},[517,2923,638],{"class":531},[517,2925,717],{"class":527},[517,2927,656],{"class":531},[517,2929,535],{"class":527},[517,2931,538],{"class":523},[517,2933,541],{"class":527},[517,2935,589],{"class":544},[517,2937,548],{"class":527},[517,2939,551],{"class":527},[517,2941,2942],{"class":519,"line":562},[517,2943,599],{"emptyLinePlaceholder":177},[517,2945,2946,2948,2950,2952,2954,2956],{"class":519,"line":571},[517,2947,606],{"class":605},[517,2949,609],{"class":531},[517,2951,612],{"class":527},[517,2953,532],{"class":615},[517,2955,618],{"class":531},[517,2957,551],{"class":527},[517,2959,2960],{"class":519,"line":579},[517,2961,599],{"emptyLinePlaceholder":177},[517,2963,2964],{"class":519,"line":596},[517,2965,2966],{"class":2220},"// Only generate dark color with solid style\n",[517,2968,2969,2971,2973,2975,2977,2979,2981],{"class":519,"line":602},[517,2970,606],{"class":605},[517,2972,633],{"class":531},[517,2974,612],{"class":527},[517,2976,638],{"class":615},[517,2978,2684],{"class":531},[517,2980,717],{"class":527},[517,2982,559],{"class":527},[517,2984,2985,2988,2990],{"class":519,"line":623},[517,2986,2987],{"class":863},"    filter",[517,2989,1548],{"class":527},[517,2991,559],{"class":527},[517,2993,2994,2996,2998,3001,3003,3005,3007,3009],{"class":519,"line":628},[517,2995,1390],{"class":863},[517,2997,1548],{"class":527},[517,2999,3000],{"class":531}," [",[517,3002,548],{"class":527},[517,3004,882],{"class":544},[517,3006,548],{"class":527},[517,3008,1823],{"class":531},[517,3010,568],{"class":527},[517,3012,3013,3015,3017,3019,3021,3023,3025,3027],{"class":519,"line":646},[517,3014,1421],{"class":863},[517,3016,1548],{"class":527},[517,3018,3000],{"class":531},[517,3020,548],{"class":527},[517,3022,907],{"class":544},[517,3024,548],{"class":527},[517,3026,1823],{"class":531},[517,3028,568],{"class":527},[517,3030,3031],{"class":519,"line":663},[517,3032,2734],{"class":527},[517,3034,3035,3037,3039],{"class":519,"line":668},[517,3036,582],{"class":527},[517,3038,1086],{"class":531},[517,3040,551],{"class":527},[517,3042,3043],{"class":519,"line":1034},[517,3044,599],{"emptyLinePlaceholder":177},[517,3046,3047,3049,3051,3053,3055,3057,3059],{"class":519,"line":1049},[517,3048,606],{"class":605},[517,3050,651],{"class":531},[517,3052,612],{"class":527},[517,3054,656],{"class":615},[517,3056,2684],{"class":531},[517,3058,717],{"class":527},[517,3060,559],{"class":527},[517,3062,3063,3065,3067],{"class":519,"line":1064},[517,3064,2987],{"class":863},[517,3066,1548],{"class":527},[517,3068,559],{"class":527},[517,3070,3071,3073,3075,3077,3079,3081,3083,3085],{"class":519,"line":1071},[517,3072,1390],{"class":863},[517,3074,1548],{"class":527},[517,3076,3000],{"class":531},[517,3078,548],{"class":527},[517,3080,882],{"class":544},[517,3082,548],{"class":527},[517,3084,1823],{"class":531},[517,3086,568],{"class":527},[517,3088,3089,3091,3093,3095,3097,3099,3101,3103],{"class":519,"line":1078},[517,3090,1421],{"class":863},[517,3092,1548],{"class":527},[517,3094,3000],{"class":531},[517,3096,548],{"class":527},[517,3098,907],{"class":544},[517,3100,548],{"class":527},[517,3102,1823],{"class":531},[517,3104,568],{"class":527},[517,3106,3107],{"class":519,"line":1091},[517,3108,2734],{"class":527},[517,3110,3111,3113,3115],{"class":519,"line":1100},[517,3112,582],{"class":527},[517,3114,1086],{"class":531},[517,3116,551],{"class":527},[517,3118,3119],{"class":519,"line":1124},[517,3120,599],{"emptyLinePlaceholder":177},[517,3122,3123,3125,3127,3129],{"class":519,"line":1133},[517,3124,671],{"class":523},[517,3126,674],{"class":523},[517,3128,677],{"class":531},[517,3130,551],{"class":527},[2121,3132,3133,3135],{},[412,3134,2125],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[404,3137,3139],{"id":3138},"api-reference","API Reference",[1880,3141,3143],{"id":3142},"usetooltiprecipes-options",[416,3144,3145],{},"useTooltipRecipe(s, options?)",[408,3147,3148],{},"Creates the tooltip content bubble recipe with background, border, text styling, padding, and shadow.",[408,3150,3151],{},[412,3152,3153],{},"Parameters:",[1889,3155,3156,3169],{},[1892,3157,3158],{},[1895,3159,3160,3163,3166],{},[1898,3161,3162],{},"Parameter",[1898,3164,3165],{},"Type",[1898,3167,3168],{},"Description",[1908,3170,3171,3186,3201,3216,3230,3245,3260],{},[1895,3172,3173,3178,3183],{},[1913,3174,3175],{},[416,3176,3177],{},"s",[1913,3179,3180],{},[416,3181,3182],{},"Styleframe",[1913,3184,3185],{},"The Styleframe instance",[1895,3187,3188,3193,3198],{},[1913,3189,3190],{},[416,3191,3192],{},"options",[1913,3194,3195],{},[416,3196,3197],{},"DeepPartial\u003CRecipeConfig>",[1913,3199,3200],{},"Optional overrides for the recipe configuration",[1895,3202,3203,3208,3213],{},[1913,3204,3205],{},[416,3206,3207],{},"options.base",[1913,3209,3210],{},[416,3211,3212],{},"VariantDeclarationsBlock",[1913,3214,3215],{},"Custom base styles for the tooltip content",[1895,3217,3218,3223,3227],{},[1913,3219,3220],{},[416,3221,3222],{},"options.variants",[1913,3224,3225],{},[416,3226,1968],{},[1913,3228,3229],{},"Custom variant definitions for the recipe",[1895,3231,3232,3237,3242],{},[1913,3233,3234],{},[416,3235,3236],{},"options.defaultVariants",[1913,3238,3239],{},[416,3240,3241],{},"Record\u003Ckeyof Variants, string>",[1913,3243,3244],{},"Default variant values for the recipe",[1895,3246,3247,3252,3257],{},[1913,3248,3249],{},[416,3250,3251],{},"options.compoundVariants",[1913,3253,3254],{},[416,3255,3256],{},"CompoundVariant[]",[1913,3258,3259],{},"Custom compound variant definitions for the recipe",[1895,3261,3262,3267,3272],{},[1913,3263,3264],{},[416,3265,3266],{},"options.filter",[1913,3268,3269],{},[416,3270,3271],{},"Record\u003Cstring, string[]>",[1913,3273,3274],{},"Limit which variant values are generated",[408,3276,3277],{},[412,3278,3279],{},"Variants:",[1889,3281,3282,3295],{},[1892,3283,3284],{},[1895,3285,3286,3289,3292],{},[1898,3287,3288],{},"Variant",[1898,3290,3291],{},"Options",[1898,3293,3294],{},"Default",[1908,3296,3297,3315,3333],{},[1895,3298,3299,3303,3311],{},[1913,3300,3301],{},[416,3302,1556],{},[1913,3304,3305,1813,3307,1813,3309],{},[416,3306,872],{},[416,3308,882],{},[416,3310,891],{},[1913,3312,3313],{},[416,3314,882],{},[1895,3316,3317,3321,3329],{},[1913,3318,3319],{},[416,3320,1571],{},[1913,3322,3323,1813,3325,1813,3327],{},[416,3324,907],{},[416,3326,916],{},[416,3328,925],{},[1913,3330,3331],{},[416,3332,907],{},[1895,3334,3335,3339,3347],{},[1913,3336,3337],{},[416,3338,1586],{},[1913,3340,3341,1813,3343,1813,3345],{},[416,3342,941],{},[416,3344,950],{},[416,3346,959],{},[1913,3348,3349],{},[416,3350,950],{},[1880,3352,3354],{"id":3353},"usetooltiparrowrecipes-options",[416,3355,3356],{},"useTooltipArrowRecipe(s, options?)",[408,3358,3359,3360,2139,3362,2143],{},"Creates the tooltip arrow recipe using a CSS border-triangle technique with a pseudo-element for the inner fill. Registers the ",[416,3361,2138],{},[416,3363,2142],{},[408,3365,3366],{},[412,3367,3153],{},[1889,3369,3370,3380],{},[1892,3371,3372],{},[1895,3373,3374,3376,3378],{},[1898,3375,3162],{},[1898,3377,3165],{},[1898,3379,3168],{},[1908,3381,3382,3394,3406,3419,3431,3443,3455],{},[1895,3383,3384,3388,3392],{},[1913,3385,3386],{},[416,3387,3177],{},[1913,3389,3390],{},[416,3391,3182],{},[1913,3393,3185],{},[1895,3395,3396,3400,3404],{},[1913,3397,3398],{},[416,3399,3192],{},[1913,3401,3402],{},[416,3403,3197],{},[1913,3405,3200],{},[1895,3407,3408,3412,3416],{},[1913,3409,3410],{},[416,3411,3207],{},[1913,3413,3414],{},[416,3415,3212],{},[1913,3417,3418],{},"Custom base styles for the tooltip arrow",[1895,3420,3421,3425,3429],{},[1913,3422,3423],{},[416,3424,3222],{},[1913,3426,3427],{},[416,3428,1968],{},[1913,3430,3229],{},[1895,3432,3433,3437,3441],{},[1913,3434,3435],{},[416,3436,3236],{},[1913,3438,3439],{},[416,3440,3241],{},[1913,3442,3244],{},[1895,3444,3445,3449,3453],{},[1913,3446,3447],{},[416,3448,3251],{},[1913,3450,3451],{},[416,3452,3256],{},[1913,3454,3259],{},[1895,3456,3457,3461,3465],{},[1913,3458,3459],{},[416,3460,3266],{},[1913,3462,3463],{},[416,3464,3271],{},[1913,3466,3274],{},[408,3468,3469],{},[412,3470,3279],{},[1889,3472,3473,3483],{},[1892,3474,3475],{},[1895,3476,3477,3479,3481],{},[1898,3478,3288],{},[1898,3480,3291],{},[1898,3482,3294],{},[1908,3484,3485,3503],{},[1895,3486,3487,3491,3499],{},[1913,3488,3489],{},[416,3490,1556],{},[1913,3492,3493,1813,3495,1813,3497],{},[416,3494,872],{},[416,3496,882],{},[416,3498,891],{},[1913,3500,3501],{},[416,3502,882],{},[1895,3504,3505,3509,3517],{},[1913,3506,3507],{},[416,3508,1571],{},[1913,3510,3511,1813,3513,1813,3515],{},[416,3512,907],{},[416,3514,916],{},[416,3516,925],{},[1913,3518,3519],{},[416,3520,907],{},[408,3522,3523],{},[425,3524,3525],{"href":104},"Learn more about recipes →",[404,3527,3529],{"id":3528},"best-practices","Best Practices",[444,3531,3532,3548,3556,3570,3576,3582,3591],{},[447,3533,3534,3542,3543,797,3545,3547],{},[412,3535,3536,3537,797,3539,3541],{},"Pass ",[416,3538,1556],{},[416,3540,1571],{}," consistently",": Both the content and arrow recipes need the same ",[416,3544,1556],{},[416,3546,1571],{}," values so the arrow colors match the tooltip bubble.",[447,3549,3550,3555],{},[412,3551,2320,3552,3554],{},[416,3553,882],{}," for general-purpose tooltips",": Dark tooltips provide strong contrast against most page backgrounds, making them the most readable default.",[447,3557,3558,3561,3562,3565,3566,3569],{},[412,3559,3560],{},"Keep tooltip text short",": Tooltips should provide brief supplementary context, not paragraphs of content. The default ",[416,3563,3564],{},"maxWidth"," of ",[416,3567,3568],{},"240px"," enforces reasonable line lengths.",[447,3571,3572,3575],{},[412,3573,3574],{},"Never put essential information in tooltips",": Tooltips are hidden by default and inaccessible on touch devices. Critical information should be visible inline.",[447,3577,3578,3581],{},[412,3579,3580],{},"Use a positioning library for placement",": The recipe handles visual styling only. Use Floating UI or a similar library for dynamic positioning and collision detection.",[447,3583,3584,3587,3588,3590],{},[412,3585,3586],{},"Filter what you don't need",": If your application only uses dark tooltips, pass a ",[416,3589,2889],{}," option to reduce generated CSS.",[447,3592,3593,3596,3597,3600],{},[412,3594,3595],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[416,3598,3599],{},"defaultVariants"," so component consumers write less code.",[404,3602,3604],{"id":3603},"faq","FAQ",[3606,3607,3608,3614,3626,3636,3651,3664,3678,3693],"accordion",{},[3609,3610,3613],"accordion-item",{"icon":3611,"label":3612},"i-lucide-circle-help","Why are there two separate recipes instead of one?","The content bubble and arrow have fundamentally different rendering techniques. The content uses standard box-model styling (background, padding, border radius), while the arrow uses a CSS border-triangle technique with a pseudo-element for the inner fill. Separating them keeps each recipe focused and lets you omit the arrow entirely if your tooltip design doesn't need one.",[3609,3615,3617,3618,2205,3620,3622,3623],{"icon":3611,"label":3616},"Why doesn't the arrow recipe have a size variant?","The arrow size is controlled by the ",[416,3619,2138],{},[416,3621,2142],{},") rather than discrete size variants. This gives you continuous control over the arrow dimensions and avoids coupling the arrow size to the tooltip content size. Override the variable to change the arrow size: ",[416,3624,3625],{},"s.variable('tooltip.arrow.size', '8px');",[3609,3627,3629,3630,3632,3633,3635],{"icon":3611,"label":3628},"Why is the default color dark instead of neutral?","Tooltips typically appear as dark overlays to contrast with the page content, regardless of the color scheme. The ",[416,3631,882],{}," default ensures high visibility out of the box. Use ",[416,3634,891],{}," if you want the tooltip to adapt to light and dark modes automatically.",[3609,3637,3639,3641,3642,3644,3645,3647,3648,3650],{"icon":3611,"label":3638},"What's the difference between light, dark, and neutral colors?",[416,3640,872],{}," always uses white and gray-100 backgrounds regardless of the color scheme. ",[416,3643,882],{}," always uses gray-800 and gray-900 backgrounds. ",[416,3646,891],{}," adapts to the current color scheme: it appears light in light mode and dark in dark mode. Use ",[416,3649,891],{}," when you want the tooltip to blend naturally with the surrounding interface.",[3609,3652,3654,3655,3657,3658,3660,3661,3663],{"icon":3611,"label":3653},"What's the difference between the soft and subtle variants?","Both use a light tinted background. The difference is that ",[416,3656,925],{}," also adds a matching border, giving the tooltip more visual definition. Use ",[416,3659,916],{}," when you want a borderless, gentler appearance, and ",[416,3662,925],{}," when the tooltip needs slightly more structure.",[3609,3665,3667,3668,3670,3671,3673,3674,3677],{"icon":3611,"label":3666},"How do I change the arrow size?","The arrow recipe registers a ",[416,3669,2138],{}," CSS variable with a default value of ",[416,3672,2142],{},". Override it by calling ",[416,3675,3676],{},"s.variable('tooltip.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.",[3609,3679,3681,3688],{"icon":3611,"label":3680},"How do compound variants work in the Tooltip recipe?",[408,3682,3683,3684,3687],{},"The Tooltip 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 ",[416,3685,3686],{},"&:dark"," selector. The arrow recipe uses matching compound variants so its border-triangle colors align with the content bubble.",[408,3689,3690],{},[425,3691,3692],{"href":1974},"Learn more about compound variants →",[3609,3694,3696,3697,1813,3699,1866,3701,3703,3704,3707],{"icon":3611,"label":3695},"Can I use the Tooltip recipe without the design tokens preset?","The Tooltip recipe references design tokens like ",[416,3698,1921],{},[416,3700,2084],{},[416,3702,2097],{}," 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 ",[416,3705,3706],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[3709,3710,3711],"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":513,"searchDepth":554,"depth":554,"links":3713},[3714,3715,3716,3717,3720,3725,3728,3729,3730,3734,3738,3739],{"id":406,"depth":554,"text":21},{"id":438,"depth":554,"text":439},{"id":485,"depth":554,"text":486},{"id":1858,"depth":554,"text":198,"children":3718},[3719],{"id":1882,"depth":562,"text":1883},{"id":1967,"depth":554,"text":1968,"children":3721},[3722,3723,3724],{"id":907,"depth":562,"text":1979},{"id":916,"depth":562,"text":1988},{"id":925,"depth":562,"text":1997},{"id":2009,"depth":554,"text":2010,"children":3726},[3727],{"id":2025,"depth":562,"text":2026},{"id":2146,"depth":554,"text":2147},{"id":2313,"depth":554,"text":294},{"id":2584,"depth":554,"text":2585,"children":3731},[3732,3733],{"id":2588,"depth":562,"text":2589},{"id":2882,"depth":562,"text":2883},{"id":3138,"depth":554,"text":3139,"children":3735},[3736,3737],{"id":3142,"depth":562,"text":3145},{"id":3353,"depth":562,"text":3356},{"id":3528,"depth":554,"text":3529},{"id":3603,"depth":554,"text":3604},"A floating label component for supplementary information, composed of a content bubble and directional arrow. Supports multiple colors, visual styles, and sizes through the recipe system.",null,{},{"title":278,"description":3740},{"loc":279},"461mRJSPZGNEKFaSltJlYYdisUNLxGwqn5adNzt1bpc",[3747,3749],{"title":274,"path":275,"stem":276,"description":3748,"children":-1},"A dialog component for focused interactions, composed of overlay, container, header, body, and footer sections. Supports multiple colors, visual styles, and sizes through the recipe system.",{"title":21,"path":282,"stem":283,"description":3750,"icon":51,"children":-1},"Explore Styleframe's utility composables for generating CSS utility classes. Create flexible, reusable styling primitives with full type safety.",1775622190838]