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