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