[{"data":1,"prerenderedAt":3549},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-button":682,"-docs-theme-components-button-surround":3544},{"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":368,"body":684,"description":3538,"extension":1162,"links":3539,"meta":3540,"navigation":3541,"path":369,"seo":3542,"stem":370,"__hash__":3543},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button.md",{"type":685,"value":686,"toc":3508},"minimark",[687,691,709,716,720,723,757,761,1695,1698,1730,1733,1738,1741,1892,1899,1903,1911,1914,1917,1920,1924,1927,1930,1934,1937,1940,1944,1952,1955,1959,1962,1965,1969,1972,1975,1979,1990,1993,1997,2000,2095,2098,2113,2116,2119,2135,2271,2307,2393,2412,2416,2420,2425,2619,2623,2630,2807,2814,2817,2823,2826,2831,2952,2957,3052,3057,3061,3127,3131,3504],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,708],"p",{},"The ",[696,697,368],"strong",{}," is an interactive UI element used for triggering actions, submitting forms, and navigating between views. The ",[700,701,702],"code",{},"useButtonRecipe()"," composable creates a fully configured ",[705,706,707],"a",{"href":132},"recipe"," with color, variant, and size options — plus compound variants that handle the color-variant combinations automatically.",[692,710,711,712,715],{},"The Button recipe integrates directly with the default ",[705,713,714],{"href":171},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[688,717,719],{"id":718},"why-use-the-button-recipe","Why use the Button recipe?",[692,721,722],{},"The Button recipe helps you:",[724,725,726,733,739,745,751],"ul",{},[727,728,729,732],"li",{},[696,730,731],{},"Ship faster with sensible defaults",": Get 9 colors, 6 visual styles, and 5 sizes out of the box with a single composable call.",[727,734,735,738],{},[696,736,737],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules, including hover, focus, active, and dark mode states.",[727,740,741,744],{},[696,742,743],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[727,746,747,750],{},[696,748,749],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.",[727,752,753,756],{},[696,754,755],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,758,760],{"id":759},"usage","Usage",[762,763,765,770,777,1025,1029,1036,1686,1690],"steps",{"level":764},"4",[766,767,769],"h4",{"id":768},"register-the-recipe","Register the recipe",[692,771,772,773,776],{},"Add the Button recipe to a local Styleframe instance. The global ",[700,774,775],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[778,779,781,917],"code-tree",{"default-value":780},"src\u002Fcomponents\u002Fbutton.styleframe.ts",[782,783,788],"pre",{"className":784,"code":785,"filename":780,"language":786,"meta":787,"style":787},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useButtonRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst button = useButtonRecipe(s);\n\nexport default s;\n","ts","",[700,789,790,826,849,855,876,881,898,903],{"__ignoreMap":787},[791,792,795,799,803,807,810,813,816,820,823],"span",{"class":793,"line":794},"line",1,[791,796,798],{"class":797},"s7zQu","import",[791,800,802],{"class":801},"sMK4o"," {",[791,804,806],{"class":805},"sTEyZ"," styleframe",[791,808,809],{"class":801}," }",[791,811,812],{"class":797}," from",[791,814,815],{"class":801}," '",[791,817,819],{"class":818},"sfazB","virtual:styleframe",[791,821,822],{"class":801},"'",[791,824,825],{"class":801},";\n",[791,827,829,831,833,836,838,840,842,845,847],{"class":793,"line":828},2,[791,830,798],{"class":797},[791,832,802],{"class":801},[791,834,835],{"class":805}," useButtonRecipe",[791,837,809],{"class":801},[791,839,812],{"class":797},[791,841,815],{"class":801},[791,843,844],{"class":818},"@styleframe\u002Ftheme",[791,846,822],{"class":801},[791,848,825],{"class":801},[791,850,852],{"class":793,"line":851},3,[791,853,854],{"emptyLinePlaceholder":223},"\n",[791,856,858,862,865,868,871,874],{"class":793,"line":857},4,[791,859,861],{"class":860},"spNyl","const",[791,863,864],{"class":805}," s ",[791,866,867],{"class":801},"=",[791,869,806],{"class":870},"s2Zo4",[791,872,873],{"class":805},"()",[791,875,825],{"class":801},[791,877,879],{"class":793,"line":878},5,[791,880,854],{"emptyLinePlaceholder":223},[791,882,884,886,889,891,893,896],{"class":793,"line":883},6,[791,885,861],{"class":860},[791,887,888],{"class":805}," button ",[791,890,867],{"class":801},[791,892,835],{"class":870},[791,894,895],{"class":805},"(s)",[791,897,825],{"class":801},[791,899,901],{"class":793,"line":900},7,[791,902,854],{"emptyLinePlaceholder":223},[791,904,906,909,912,915],{"class":793,"line":905},8,[791,907,908],{"class":797},"export",[791,910,911],{"class":797}," default",[791,913,914],{"class":805}," s",[791,916,825],{"class":801},[782,918,920],{"className":784,"code":919,"filename":775,"language":786,"meta":787,"style":787},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[700,921,922,943,970,974,988,992,1001,1010,1014],{"__ignoreMap":787},[791,923,924,926,928,930,932,934,936,939,941],{"class":793,"line":794},[791,925,798],{"class":797},[791,927,802],{"class":801},[791,929,806],{"class":805},[791,931,809],{"class":801},[791,933,812],{"class":797},[791,935,815],{"class":801},[791,937,938],{"class":818},"styleframe",[791,940,822],{"class":801},[791,942,825],{"class":801},[791,944,945,947,949,952,955,958,960,962,964,966,968],{"class":793,"line":828},[791,946,798],{"class":797},[791,948,802],{"class":801},[791,950,951],{"class":805}," useDesignTokensPreset",[791,953,954],{"class":801},",",[791,956,957],{"class":805}," useUtilitiesPreset",[791,959,809],{"class":801},[791,961,812],{"class":797},[791,963,815],{"class":801},[791,965,844],{"class":818},[791,967,822],{"class":801},[791,969,825],{"class":801},[791,971,972],{"class":793,"line":851},[791,973,854],{"emptyLinePlaceholder":223},[791,975,976,978,980,982,984,986],{"class":793,"line":857},[791,977,861],{"class":860},[791,979,864],{"class":805},[791,981,867],{"class":801},[791,983,806],{"class":870},[791,985,873],{"class":805},[791,987,825],{"class":801},[791,989,990],{"class":793,"line":878},[791,991,854],{"emptyLinePlaceholder":223},[791,993,994,997,999],{"class":793,"line":883},[791,995,996],{"class":870},"useDesignTokensPreset",[791,998,895],{"class":805},[791,1000,825],{"class":801},[791,1002,1003,1006,1008],{"class":793,"line":900},[791,1004,1005],{"class":870},"useUtilitiesPreset",[791,1007,895],{"class":805},[791,1009,825],{"class":801},[791,1011,1012],{"class":793,"line":905},[791,1013,854],{"emptyLinePlaceholder":223},[791,1015,1017,1019,1021,1023],{"class":793,"line":1016},9,[791,1018,908],{"class":797},[791,1020,911],{"class":797},[791,1022,914],{"class":805},[791,1024,825],{"class":801},[766,1026,1028],{"id":1027},"build-the-component","Build the component",[692,1030,1031,1032,1035],{},"Import the ",[700,1033,1034],{},"button"," runtime function from the virtual module and pass variant props to compute class names:",[1037,1038,1039,1293,1549],"framework-switcher",{},[1040,1041,1042],"template",{"v-slot:vue":787},[782,1043,1048],{"className":1044,"code":1045,"filename":1046,"language":1047,"meta":787,"style":787},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { button, type ButtonProps } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"solid\",\n    size = \"md\",\n    disabled = false,\n} = defineProps\u003CButtonProps>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cbutton :class=\"button({ color, variant, size })\" :disabled=\"disabled\">\n        \u003Cslot \u002F>\n    \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FButton.vue","vue",[700,1049,1050,1077,1107,1111,1118,1135,1151,1167,1180,1204,1214,1219,1228,1262,1274,1284],{"__ignoreMap":787},[791,1051,1052,1055,1059,1062,1065,1067,1070,1072,1074],{"class":793,"line":794},[791,1053,1054],{"class":801},"\u003C",[791,1056,1058],{"class":1057},"swJcz","script",[791,1060,1061],{"class":860}," setup",[791,1063,1064],{"class":860}," lang",[791,1066,867],{"class":801},[791,1068,1069],{"class":801},"\"",[791,1071,786],{"class":818},[791,1073,1069],{"class":801},[791,1075,1076],{"class":801},">\n",[791,1078,1079,1081,1083,1086,1088,1091,1094,1096,1098,1101,1103,1105],{"class":793,"line":828},[791,1080,798],{"class":797},[791,1082,802],{"class":801},[791,1084,1085],{"class":805}," button",[791,1087,954],{"class":801},[791,1089,1090],{"class":797}," type",[791,1092,1093],{"class":805}," ButtonProps",[791,1095,809],{"class":801},[791,1097,812],{"class":797},[791,1099,1100],{"class":801}," \"",[791,1102,819],{"class":818},[791,1104,1069],{"class":801},[791,1106,825],{"class":801},[791,1108,1109],{"class":793,"line":851},[791,1110,854],{"emptyLinePlaceholder":223},[791,1112,1113,1115],{"class":793,"line":857},[791,1114,861],{"class":860},[791,1116,1117],{"class":801}," {\n",[791,1119,1120,1123,1125,1127,1130,1132],{"class":793,"line":878},[791,1121,1122],{"class":805},"    color ",[791,1124,867],{"class":801},[791,1126,1100],{"class":801},[791,1128,1129],{"class":818},"neutral",[791,1131,1069],{"class":801},[791,1133,1134],{"class":801},",\n",[791,1136,1137,1140,1142,1144,1147,1149],{"class":793,"line":883},[791,1138,1139],{"class":805},"    variant ",[791,1141,867],{"class":801},[791,1143,1100],{"class":801},[791,1145,1146],{"class":818},"solid",[791,1148,1069],{"class":801},[791,1150,1134],{"class":801},[791,1152,1153,1156,1158,1160,1163,1165],{"class":793,"line":900},[791,1154,1155],{"class":805},"    size ",[791,1157,867],{"class":801},[791,1159,1100],{"class":801},[791,1161,1162],{"class":818},"md",[791,1164,1069],{"class":801},[791,1166,1134],{"class":801},[791,1168,1169,1172,1174,1178],{"class":793,"line":905},[791,1170,1171],{"class":805},"    disabled ",[791,1173,867],{"class":801},[791,1175,1177],{"class":1176},"sfNiH"," false",[791,1179,1134],{"class":801},[791,1181,1182,1185,1188,1191,1193,1197,1200,1202],{"class":793,"line":1016},[791,1183,1184],{"class":801},"}",[791,1186,1187],{"class":801}," =",[791,1189,1190],{"class":870}," defineProps",[791,1192,1054],{"class":801},[791,1194,1196],{"class":1195},"sBMFI","ButtonProps",[791,1198,1199],{"class":801},">",[791,1201,873],{"class":805},[791,1203,825],{"class":801},[791,1205,1207,1210,1212],{"class":793,"line":1206},10,[791,1208,1209],{"class":801},"\u003C\u002F",[791,1211,1058],{"class":1057},[791,1213,1076],{"class":801},[791,1215,1217],{"class":793,"line":1216},11,[791,1218,854],{"emptyLinePlaceholder":223},[791,1220,1222,1224,1226],{"class":793,"line":1221},12,[791,1223,1054],{"class":801},[791,1225,1040],{"class":1057},[791,1227,1076],{"class":801},[791,1229,1231,1234,1236,1239,1241,1243,1246,1248,1251,1253,1255,1258,1260],{"class":793,"line":1230},13,[791,1232,1233],{"class":801},"    \u003C",[791,1235,1034],{"class":1057},[791,1237,1238],{"class":860}," :class",[791,1240,867],{"class":801},[791,1242,1069],{"class":801},[791,1244,1245],{"class":818},"button({ color, variant, size })",[791,1247,1069],{"class":801},[791,1249,1250],{"class":860}," :disabled",[791,1252,867],{"class":801},[791,1254,1069],{"class":801},[791,1256,1257],{"class":818},"disabled",[791,1259,1069],{"class":801},[791,1261,1076],{"class":801},[791,1263,1265,1268,1271],{"class":793,"line":1264},14,[791,1266,1267],{"class":801},"        \u003C",[791,1269,1270],{"class":1057},"slot",[791,1272,1273],{"class":801}," \u002F>\n",[791,1275,1277,1280,1282],{"class":793,"line":1276},15,[791,1278,1279],{"class":801},"    \u003C\u002F",[791,1281,1034],{"class":1057},[791,1283,1076],{"class":801},[791,1285,1287,1289,1291],{"class":793,"line":1286},16,[791,1288,1209],{"class":801},[791,1290,1040],{"class":1057},[791,1292,1076],{"class":801},[1040,1294,1295],{"v-slot:react":787},[782,1296,1299],{"className":784,"code":1297,"filename":1298,"language":786,"meta":787,"style":787},"import { button, type ButtonProps } from \"virtual:styleframe\";\n\nexport function Button({\n    color = \"neutral\",\n    variant = \"solid\",\n    size = \"md\",\n    disabled = false,\n    children,\n}: ButtonProps & { children?: React.ReactNode }) {\n    const classes = button({ color, variant, size });\n\n    return (\n        \u003Cbutton className={classes} disabled={disabled}>\n            {children}\n        \u003C\u002Fbutton>\n    );\n}\n","src\u002Fcomponents\u002FButton.tsx",[700,1300,1301,1327,1331,1344,1360,1375,1390,1401,1408,1440,1478,1482,1490,1517,1528,1537,1544],{"__ignoreMap":787},[791,1302,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325],{"class":793,"line":794},[791,1304,798],{"class":797},[791,1306,802],{"class":801},[791,1308,1085],{"class":805},[791,1310,954],{"class":801},[791,1312,1090],{"class":797},[791,1314,1093],{"class":805},[791,1316,809],{"class":801},[791,1318,812],{"class":797},[791,1320,1100],{"class":801},[791,1322,819],{"class":818},[791,1324,1069],{"class":801},[791,1326,825],{"class":801},[791,1328,1329],{"class":793,"line":828},[791,1330,854],{"emptyLinePlaceholder":223},[791,1332,1333,1335,1338,1341],{"class":793,"line":851},[791,1334,908],{"class":797},[791,1336,1337],{"class":860}," function",[791,1339,1340],{"class":870}," Button",[791,1342,1343],{"class":801},"({\n",[791,1345,1346,1350,1352,1354,1356,1358],{"class":793,"line":857},[791,1347,1349],{"class":1348},"sHdIc","    color",[791,1351,1187],{"class":801},[791,1353,1100],{"class":801},[791,1355,1129],{"class":818},[791,1357,1069],{"class":801},[791,1359,1134],{"class":801},[791,1361,1362,1365,1367,1369,1371,1373],{"class":793,"line":878},[791,1363,1364],{"class":1348},"    variant",[791,1366,1187],{"class":801},[791,1368,1100],{"class":801},[791,1370,1146],{"class":818},[791,1372,1069],{"class":801},[791,1374,1134],{"class":801},[791,1376,1377,1380,1382,1384,1386,1388],{"class":793,"line":883},[791,1378,1379],{"class":1348},"    size",[791,1381,1187],{"class":801},[791,1383,1100],{"class":801},[791,1385,1162],{"class":818},[791,1387,1069],{"class":801},[791,1389,1134],{"class":801},[791,1391,1392,1395,1397,1399],{"class":793,"line":900},[791,1393,1394],{"class":1348},"    disabled",[791,1396,1187],{"class":801},[791,1398,1177],{"class":1176},[791,1400,1134],{"class":801},[791,1402,1403,1406],{"class":793,"line":905},[791,1404,1405],{"class":1348},"    children",[791,1407,1134],{"class":801},[791,1409,1410,1413,1415,1418,1420,1423,1426,1429,1432,1435,1438],{"class":793,"line":1016},[791,1411,1412],{"class":801},"}:",[791,1414,1093],{"class":1195},[791,1416,1417],{"class":801}," &",[791,1419,802],{"class":801},[791,1421,1422],{"class":1057}," children",[791,1424,1425],{"class":801},"?:",[791,1427,1428],{"class":1195}," React",[791,1430,1431],{"class":801},".",[791,1433,1434],{"class":1195},"ReactNode",[791,1436,1437],{"class":801}," })",[791,1439,1117],{"class":801},[791,1441,1442,1445,1448,1450,1452,1455,1458,1461,1463,1466,1468,1471,1473,1476],{"class":793,"line":1206},[791,1443,1444],{"class":860},"    const",[791,1446,1447],{"class":805}," classes",[791,1449,1187],{"class":801},[791,1451,1085],{"class":870},[791,1453,1454],{"class":1057},"(",[791,1456,1457],{"class":801},"{",[791,1459,1460],{"class":805}," color",[791,1462,954],{"class":801},[791,1464,1465],{"class":805}," variant",[791,1467,954],{"class":801},[791,1469,1470],{"class":805}," size",[791,1472,809],{"class":801},[791,1474,1475],{"class":1057},")",[791,1477,825],{"class":801},[791,1479,1480],{"class":793,"line":1216},[791,1481,854],{"emptyLinePlaceholder":223},[791,1483,1484,1487],{"class":793,"line":1221},[791,1485,1486],{"class":797},"    return",[791,1488,1489],{"class":1057}," (\n",[791,1491,1492,1494,1496,1499,1502,1505,1507,1510,1512,1514],{"class":793,"line":1230},[791,1493,1267],{"class":801},[791,1495,1034],{"class":805},[791,1497,1498],{"class":805}," className",[791,1500,1501],{"class":801},"={",[791,1503,1504],{"class":805},"classes",[791,1506,1184],{"class":801},[791,1508,1509],{"class":805}," disabled",[791,1511,1501],{"class":801},[791,1513,1257],{"class":805},[791,1515,1516],{"class":801},"}>\n",[791,1518,1519,1522,1525],{"class":793,"line":1264},[791,1520,1521],{"class":801},"            {",[791,1523,1524],{"class":1348},"children",[791,1526,1527],{"class":801},"}\n",[791,1529,1530,1533,1535],{"class":793,"line":1276},[791,1531,1532],{"class":801},"        \u003C\u002F",[791,1534,1034],{"class":805},[791,1536,1076],{"class":801},[791,1538,1539,1542],{"class":793,"line":1286},[791,1540,1541],{"class":1057},"    )",[791,1543,825],{"class":801},[791,1545,1547],{"class":793,"line":1546},17,[791,1548,1527],{"class":801},[1040,1550,1551,1557,1649],{"v-slot:other":787},[692,1552,694,1553,1556],{},[700,1554,1555],{},"button()"," runtime returns a class string. Apply it however your framework binds classes:",[782,1558,1561],{"className":784,"code":1559,"filename":1560,"language":786,"meta":787,"style":787},"import { button } from \"virtual:styleframe\";\n\nconst classes = button({ color: \"neutral\", variant: \"solid\", size: \"md\" });\n\u002F\u002F → \"button _border-width:thin _cursor:pointer _background:neutral ...\"\n","src\u002Fcomponents\u002Fbutton.ts",[700,1562,1563,1583,1587,1643],{"__ignoreMap":787},[791,1564,1565,1567,1569,1571,1573,1575,1577,1579,1581],{"class":793,"line":794},[791,1566,798],{"class":797},[791,1568,802],{"class":801},[791,1570,1085],{"class":805},[791,1572,809],{"class":801},[791,1574,812],{"class":797},[791,1576,1100],{"class":801},[791,1578,819],{"class":818},[791,1580,1069],{"class":801},[791,1582,825],{"class":801},[791,1584,1585],{"class":793,"line":828},[791,1586,854],{"emptyLinePlaceholder":223},[791,1588,1589,1591,1594,1596,1598,1600,1602,1604,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627,1629,1631,1633,1635,1637,1639,1641],{"class":793,"line":851},[791,1590,861],{"class":860},[791,1592,1593],{"class":805}," classes ",[791,1595,867],{"class":801},[791,1597,1085],{"class":870},[791,1599,1454],{"class":805},[791,1601,1457],{"class":801},[791,1603,1460],{"class":1057},[791,1605,1606],{"class":801},":",[791,1608,1100],{"class":801},[791,1610,1129],{"class":818},[791,1612,1069],{"class":801},[791,1614,954],{"class":801},[791,1616,1465],{"class":1057},[791,1618,1606],{"class":801},[791,1620,1100],{"class":801},[791,1622,1146],{"class":818},[791,1624,1069],{"class":801},[791,1626,954],{"class":801},[791,1628,1470],{"class":1057},[791,1630,1606],{"class":801},[791,1632,1100],{"class":801},[791,1634,1162],{"class":818},[791,1636,1069],{"class":801},[791,1638,809],{"class":801},[791,1640,1475],{"class":805},[791,1642,825],{"class":801},[791,1644,1645],{"class":793,"line":857},[791,1646,1648],{"class":1647},"sHwdD","\u002F\u002F → \"button _border-width:thin _cursor:pointer _background:neutral ...\"\n",[782,1650,1655],{"className":1651,"code":1652,"filename":1653,"language":1654,"meta":787,"style":787},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"button _border-width:thin _cursor:pointer _background:neutral ...\">Click me\u003C\u002Fbutton>\n","src\u002Fcomponents\u002Fbutton.html","html",[700,1656,1657],{"__ignoreMap":787},[791,1658,1659,1661,1663,1666,1668,1670,1673,1675,1677,1680,1682,1684],{"class":793,"line":794},[791,1660,1054],{"class":801},[791,1662,1034],{"class":1057},[791,1664,1665],{"class":860}," class",[791,1667,867],{"class":801},[791,1669,1069],{"class":801},[791,1671,1672],{"class":818},"button _border-width:thin _cursor:pointer _background:neutral ...",[791,1674,1069],{"class":801},[791,1676,1199],{"class":801},[791,1678,1679],{"class":805},"Click me",[791,1681,1209],{"class":801},[791,1683,1034],{"class":1057},[791,1685,1076],{"class":801},[766,1687,1689],{"id":1688},"see-it-in-action","See it in action",[1691,1692],"story-preview",{"story":1693,":panel":1694},"theme-recipes-actions-button--default","true",[688,1696,195],{"id":1697},"colors",[692,1699,1700,1701,1704,1705,1704,1708,1704,1711,1704,1714,1704,1717,1720,1721,1704,1724,1704,1727,1729],{},"The Button recipe includes 9 color variants: 6 semantic colors (",[700,1702,1703],{},"primary",", ",[700,1706,1707],{},"secondary",[700,1709,1710],{},"success",[700,1712,1713],{},"info",[700,1715,1716],{},"warning",[700,1718,1719],{},"error",") plus 3 neutral-scale colors (",[700,1722,1723],{},"light",[700,1725,1726],{},"dark",[700,1728,1129],{},"). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including hover, focus, active, and dark mode states.",[1691,1731],{"story":1732,":panel":1694},"theme-recipes-actions-button--success",[1734,1735,1737],"h3",{"id":1736},"color-reference","Color Reference",[1691,1739],{"story":1740},"theme-recipes-actions-button--all-variants",[1742,1743,1744,1760],"table",{},[1745,1746,1747],"thead",{},[1748,1749,1750,1754,1757],"tr",{},[1751,1752,1753],"th",{},"Color",[1751,1755,1756],{},"Token",[1751,1758,1759],{},"Use Case",[1761,1762,1763,1778,1792,1806,1820,1834,1848,1866,1880],"tbody",{},[1748,1764,1765,1770,1775],{},[1766,1767,1768],"td",{},[700,1769,1703],{},[1766,1771,1772],{},[700,1773,1774],{},"@color.primary",[1766,1776,1777],{},"Default actions, links, key information",[1748,1779,1780,1784,1789],{},[1766,1781,1782],{},[700,1783,1707],{},[1766,1785,1786],{},[700,1787,1788],{},"@color.secondary",[1766,1790,1791],{},"Secondary actions, neutral states",[1748,1793,1794,1798,1803],{},[1766,1795,1796],{},[700,1797,1710],{},[1766,1799,1800],{},[700,1801,1802],{},"@color.success",[1766,1804,1805],{},"Positive actions, confirmations, completions",[1748,1807,1808,1812,1817],{},[1766,1809,1810],{},[700,1811,1713],{},[1766,1813,1814],{},[700,1815,1816],{},"@color.info",[1766,1818,1819],{},"Informational actions, tips, highlights",[1748,1821,1822,1826,1831],{},[1766,1823,1824],{},[700,1825,1716],{},[1766,1827,1828],{},[700,1829,1830],{},"@color.warning",[1766,1832,1833],{},"Caution actions, pending states",[1748,1835,1836,1840,1845],{},[1766,1837,1838],{},[700,1839,1719],{},[1766,1841,1842],{},[700,1843,1844],{},"@color.error",[1766,1846,1847],{},"Destructive actions, error states, alerts",[1748,1849,1850,1854,1863],{},[1766,1851,1852],{},[700,1853,1723],{},[1766,1855,1856,1859,1860],{},[700,1857,1858],{},"@color.white"," \u002F ",[700,1861,1862],{},"@color.gray-*",[1766,1864,1865],{},"Light surfaces, stays light in dark mode",[1748,1867,1868,1872,1877],{},[1766,1869,1870],{},[700,1871,1726],{},[1766,1873,1874],{},[700,1875,1876],{},"@color.gray-900",[1766,1878,1879],{},"Dark surfaces, stays dark in light mode",[1748,1881,1882,1886,1889],{},[1766,1883,1884],{},[700,1885,1129],{},[1766,1887,1888],{},"Adaptive (light ↔ dark)",[1766,1890,1891],{},"Default color, adapts to the current color scheme",[1893,1894,1895,1898],"tip",{},[696,1896,1897],{},"Pro tip:"," Use semantic color names that describe purpose, not appearance. This makes it easier to update your palette without touching component code.",[688,1900,1902],{"id":1901},"variants","Variants",[692,1904,1905,1906,1910],{},"Six visual style variants control how the button is rendered. Each variant is combined with the selected color through ",[705,1907,1909],{"href":1908},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","compound variants",", so you always get the correct background, text, and border colors for your chosen color.",[1734,1912,1913],{"id":1146},"Solid",[692,1915,1916],{},"Filled background with light text. The most prominent style, ideal for primary actions and call-to-action buttons.",[1691,1918],{"story":1919,":panel":1694},"theme-recipes-actions-button--solid",[1734,1921,1923],{"id":1922},"outline","Outline",[692,1925,1926],{},"Transparent background with colored border and text. Useful for secondary actions that shouldn't dominate the visual hierarchy.",[1691,1928],{"story":1929,":panel":1694},"theme-recipes-actions-button--outline",[1734,1931,1933],{"id":1932},"soft","Soft",[692,1935,1936],{},"Light tinted background with colored text. A subtle but visible style that works well for tertiary actions and grouped controls.",[1691,1938],{"story":1939,":panel":1694},"theme-recipes-actions-button--soft",[1734,1941,1943],{"id":1942},"subtle","Subtle",[692,1945,1946,1947,1949,1950,1431],{},"Light tinted background with colored text and a matching border. Combines the softness of the ",[700,1948,1932],{}," variant with the definition of ",[700,1951,1922],{},[1691,1953],{"story":1954,":panel":1694},"theme-recipes-actions-button--subtle",[1734,1956,1958],{"id":1957},"ghost","Ghost",[692,1960,1961],{},"Transparent background with colored text that reveals a tinted background on hover. Ideal for toolbar actions and icon buttons where the button chrome should be invisible until interaction.",[1691,1963],{"story":1964,":panel":1694},"theme-recipes-actions-button--ghost",[1734,1966,1968],{"id":1967},"link","Link",[692,1970,1971],{},"Styled as an inline text link with no background or border. On hover, the text darkens and gains an underline. Use for navigation actions that should look like hyperlinks.",[1691,1973],{"story":1974,":panel":1694},"theme-recipes-actions-button--link",[688,1976,1978],{"id":1977},"sizes","Sizes",[692,1980,1981,1982,1985,1986,1989],{},"Five size variants from ",[700,1983,1984],{},"xs"," to ",[700,1987,1988],{},"xl"," control the font size, padding, gap, and border radius of the button.",[1691,1991],{"story":1992,":panel":1694},"theme-recipes-actions-button--extra-large",[1734,1994,1996],{"id":1995},"size-reference","Size Reference",[1691,1998],{"story":1999},"theme-recipes-actions-button--all-sizes",[1742,2001,2002,2015],{},[1745,2003,2004],{},[1748,2005,2006,2009,2012],{},[1751,2007,2008],{},"Size",[1751,2010,2011],{},"Font Size",[1751,2013,2014],{},"Border Radius",[1761,2016,2017,2033,2049,2063,2079],{},[1748,2018,2019,2023,2028],{},[1766,2020,2021],{},[700,2022,1984],{},[1766,2024,2025],{},[700,2026,2027],{},"@font-size.xs",[1766,2029,2030],{},[700,2031,2032],{},"@border-radius.md",[1748,2034,2035,2040,2045],{},[1766,2036,2037],{},[700,2038,2039],{},"sm",[1766,2041,2042],{},[700,2043,2044],{},"@font-size.sm",[1766,2046,2047],{},[700,2048,2032],{},[1748,2050,2051,2055,2059],{},[1766,2052,2053],{},[700,2054,1162],{},[1766,2056,2057],{},[700,2058,2044],{},[1766,2060,2061],{},[700,2062,2032],{},[1748,2064,2065,2070,2075],{},[1766,2066,2067],{},[700,2068,2069],{},"lg",[1766,2071,2072],{},[700,2073,2074],{},"@font-size.md",[1766,2076,2077],{},[700,2078,2032],{},[1748,2080,2081,2085,2090],{},[1766,2082,2083],{},[700,2084,1988],{},[1766,2086,2087],{},[700,2088,2089],{},"@font-size.lg",[1766,2091,2092],{},[700,2093,2094],{},"@border-radius.lg",[688,2096,2097],{"id":1257},"Disabled",[692,2099,2100,2101,2104,2105,2108,2109,2112],{},"The Button recipe includes a built-in disabled state through the ",[700,2102,2103],{},"&:disabled"," pseudo-class. Disabled buttons have reduced opacity, a ",[700,2106,2107],{},"not-allowed"," cursor, and ",[700,2110,2111],{},"pointer-events: none"," to prevent interaction.",[1691,2114],{"story":2115,":panel":1694},"theme-recipes-actions-button--disabled",[688,2117,568],{"id":2118},"accessibility",[724,2120,2121],{},[727,2122,2123,2126,2127,2130,2131,2134],{},[696,2124,2125],{},"Use semantic HTML."," Render buttons with ",[700,2128,2129],{},"\u003Cbutton>"," (or ",[700,2132,2133],{},"\u003Ca>"," for navigation) to get built-in keyboard support and screen reader announcements.",[782,2136,2138],{"className":1651,"code":2137,"language":1654,"meta":787,"style":787},"\u003C!-- Correct: semantic button element -->\n\u003Cbutton class=\"...\">Save Changes\u003C\u002Fbutton>\n\n\u003C!-- Correct: link styled as button for navigation -->\n\u003Ca href=\"\u002Fsettings\" class=\"...\">Settings\u003C\u002Fa>\n\n\u003C!-- Avoid: non-semantic element as button -->\n\u003Cdiv class=\"...\" onclick=\"save()\">Save Changes\u003C\u002Fdiv>\n",[700,2139,2140,2145,2173,2177,2182,2221,2225,2230],{"__ignoreMap":787},[791,2141,2142],{"class":793,"line":794},[791,2143,2144],{"class":1647},"\u003C!-- Correct: semantic button element -->\n",[791,2146,2147,2149,2151,2153,2155,2157,2160,2162,2164,2167,2169,2171],{"class":793,"line":828},[791,2148,1054],{"class":801},[791,2150,1034],{"class":1057},[791,2152,1665],{"class":860},[791,2154,867],{"class":801},[791,2156,1069],{"class":801},[791,2158,2159],{"class":818},"...",[791,2161,1069],{"class":801},[791,2163,1199],{"class":801},[791,2165,2166],{"class":805},"Save Changes",[791,2168,1209],{"class":801},[791,2170,1034],{"class":1057},[791,2172,1076],{"class":801},[791,2174,2175],{"class":793,"line":851},[791,2176,854],{"emptyLinePlaceholder":223},[791,2178,2179],{"class":793,"line":857},[791,2180,2181],{"class":1647},"\u003C!-- Correct: link styled as button for navigation -->\n",[791,2183,2184,2186,2188,2191,2193,2195,2198,2200,2202,2204,2206,2208,2210,2212,2215,2217,2219],{"class":793,"line":878},[791,2185,1054],{"class":801},[791,2187,705],{"class":1057},[791,2189,2190],{"class":860}," href",[791,2192,867],{"class":801},[791,2194,1069],{"class":801},[791,2196,2197],{"class":818},"\u002Fsettings",[791,2199,1069],{"class":801},[791,2201,1665],{"class":860},[791,2203,867],{"class":801},[791,2205,1069],{"class":801},[791,2207,2159],{"class":818},[791,2209,1069],{"class":801},[791,2211,1199],{"class":801},[791,2213,2214],{"class":805},"Settings",[791,2216,1209],{"class":801},[791,2218,705],{"class":1057},[791,2220,1076],{"class":801},[791,2222,2223],{"class":793,"line":883},[791,2224,854],{"emptyLinePlaceholder":223},[791,2226,2227],{"class":793,"line":900},[791,2228,2229],{"class":1647},"\u003C!-- Avoid: non-semantic element as button -->\n",[791,2231,2232,2234,2237,2239,2241,2243,2245,2247,2250,2252,2254,2257,2259,2261,2263,2265,2267,2269],{"class":793,"line":905},[791,2233,1054],{"class":801},[791,2235,2236],{"class":1057},"div",[791,2238,1665],{"class":860},[791,2240,867],{"class":801},[791,2242,1069],{"class":801},[791,2244,2159],{"class":818},[791,2246,1069],{"class":801},[791,2248,2249],{"class":860}," onclick",[791,2251,867],{"class":801},[791,2253,1069],{"class":801},[791,2255,2256],{"class":870},"save",[791,2258,873],{"class":818},[791,2260,1069],{"class":801},[791,2262,1199],{"class":801},[791,2264,2166],{"class":805},[791,2266,1209],{"class":801},[791,2268,2236],{"class":1057},[791,2270,1076],{"class":801},[724,2272,2273,2290],{},[727,2274,2275,2278,2279,2282,2283,2289],{},[696,2276,2277],{},"Focus visibility."," The recipe includes a ",[700,2280,2281],{},":focus-visible"," outline (2px solid, primary color, 2px offset) that appears only during keyboard navigation (",[705,2284,2288],{"href":2285,"rel":2286},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Ffocus-visible.html",[2287],"nofollow","WCAG 2.4.7",").",[727,2291,2292,2295,2296,2299,2300,2303,2304,2306],{},[696,2293,2294],{},"Disabled state."," The ",[700,2297,2298],{},":disabled"," pseudo-class reduces opacity, sets ",[700,2301,2302],{},"cursor: not-allowed",", and disables pointer events. Always pair the visual style with the HTML ",[700,2305,1257],{}," attribute.",[782,2308,2310],{"className":1651,"code":2309,"language":1654,"meta":787,"style":787},"\u003C!-- Correct: visual style + HTML attribute -->\n\u003Cbutton class=\"...\" disabled>Submit\u003C\u002Fbutton>\n\n\u003C!-- Avoid: visual-only disabled state -->\n\u003Cbutton class=\"...\" style=\"opacity: 0.75\">Submit\u003C\u002Fbutton>\n",[700,2311,2312,2317,2346,2350,2355],{"__ignoreMap":787},[791,2313,2314],{"class":793,"line":794},[791,2315,2316],{"class":1647},"\u003C!-- Correct: visual style + HTML attribute -->\n",[791,2318,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337,2340,2342,2344],{"class":793,"line":828},[791,2320,1054],{"class":801},[791,2322,1034],{"class":1057},[791,2324,1665],{"class":860},[791,2326,867],{"class":801},[791,2328,1069],{"class":801},[791,2330,2159],{"class":818},[791,2332,1069],{"class":801},[791,2334,1509],{"class":860},[791,2336,1199],{"class":801},[791,2338,2339],{"class":805},"Submit",[791,2341,1209],{"class":801},[791,2343,1034],{"class":1057},[791,2345,1076],{"class":801},[791,2347,2348],{"class":793,"line":851},[791,2349,854],{"emptyLinePlaceholder":223},[791,2351,2352],{"class":793,"line":857},[791,2353,2354],{"class":1647},"\u003C!-- Avoid: visual-only disabled state -->\n",[791,2356,2357,2359,2361,2363,2365,2367,2369,2371,2374,2376,2378,2381,2383,2385,2387,2389,2391],{"class":793,"line":878},[791,2358,1054],{"class":801},[791,2360,1034],{"class":1057},[791,2362,1665],{"class":860},[791,2364,867],{"class":801},[791,2366,1069],{"class":801},[791,2368,2159],{"class":818},[791,2370,1069],{"class":801},[791,2372,2373],{"class":860}," style",[791,2375,867],{"class":801},[791,2377,1069],{"class":801},[791,2379,2380],{"class":818},"opacity: 0.75",[791,2382,1069],{"class":801},[791,2384,1199],{"class":801},[791,2386,2339],{"class":805},[791,2388,1209],{"class":801},[791,2390,1034],{"class":1057},[791,2392,1076],{"class":801},[1893,2394,2395,2398,2399,2402,2403,2405,2406,2408,2409,2411],{},[696,2396,2397],{},"Good practice:"," When buttons appear next to each other in a toolbar or form, use the ",[700,2400,2401],{},"variant"," prop to create visual hierarchy. For example, use ",[700,2404,1146],{}," for the primary action and ",[700,2407,1922],{}," or ",[700,2410,1957],{}," for secondary actions.",[688,2413,2415],{"id":2414},"customization","Customization",[1734,2417,2419],{"id":2418},"overriding-defaults","Overriding Defaults",[692,2421,694,2422,2424],{},[700,2423,702],{}," 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:",[782,2426,2428],{"className":784,"code":2427,"filename":780,"language":786,"meta":787,"style":787},"import { styleframe } from 'virtual:styleframe';\nimport { useButtonRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst button = useButtonRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.full',\n    },\n    defaultVariants: {\n        color: 'success',\n        variant: 'soft',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[700,2429,2430,2450,2470,2474,2488,2492,2509,2518,2534,2539,2548,2563,2578,2593,2597,2605,2609],{"__ignoreMap":787},[791,2431,2432,2434,2436,2438,2440,2442,2444,2446,2448],{"class":793,"line":794},[791,2433,798],{"class":797},[791,2435,802],{"class":801},[791,2437,806],{"class":805},[791,2439,809],{"class":801},[791,2441,812],{"class":797},[791,2443,815],{"class":801},[791,2445,819],{"class":818},[791,2447,822],{"class":801},[791,2449,825],{"class":801},[791,2451,2452,2454,2456,2458,2460,2462,2464,2466,2468],{"class":793,"line":828},[791,2453,798],{"class":797},[791,2455,802],{"class":801},[791,2457,835],{"class":805},[791,2459,809],{"class":801},[791,2461,812],{"class":797},[791,2463,815],{"class":801},[791,2465,844],{"class":818},[791,2467,822],{"class":801},[791,2469,825],{"class":801},[791,2471,2472],{"class":793,"line":851},[791,2473,854],{"emptyLinePlaceholder":223},[791,2475,2476,2478,2480,2482,2484,2486],{"class":793,"line":857},[791,2477,861],{"class":860},[791,2479,864],{"class":805},[791,2481,867],{"class":801},[791,2483,806],{"class":870},[791,2485,873],{"class":805},[791,2487,825],{"class":801},[791,2489,2490],{"class":793,"line":878},[791,2491,854],{"emptyLinePlaceholder":223},[791,2493,2494,2496,2498,2500,2502,2505,2507],{"class":793,"line":883},[791,2495,861],{"class":860},[791,2497,888],{"class":805},[791,2499,867],{"class":801},[791,2501,835],{"class":870},[791,2503,2504],{"class":805},"(s",[791,2506,954],{"class":801},[791,2508,1117],{"class":801},[791,2510,2511,2514,2516],{"class":793,"line":900},[791,2512,2513],{"class":1057},"    base",[791,2515,1606],{"class":801},[791,2517,1117],{"class":801},[791,2519,2520,2523,2525,2527,2530,2532],{"class":793,"line":905},[791,2521,2522],{"class":1057},"        borderRadius",[791,2524,1606],{"class":801},[791,2526,815],{"class":801},[791,2528,2529],{"class":818},"@border-radius.full",[791,2531,822],{"class":801},[791,2533,1134],{"class":801},[791,2535,2536],{"class":793,"line":1016},[791,2537,2538],{"class":801},"    },\n",[791,2540,2541,2544,2546],{"class":793,"line":1206},[791,2542,2543],{"class":1057},"    defaultVariants",[791,2545,1606],{"class":801},[791,2547,1117],{"class":801},[791,2549,2550,2553,2555,2557,2559,2561],{"class":793,"line":1216},[791,2551,2552],{"class":1057},"        color",[791,2554,1606],{"class":801},[791,2556,815],{"class":801},[791,2558,1710],{"class":818},[791,2560,822],{"class":801},[791,2562,1134],{"class":801},[791,2564,2565,2568,2570,2572,2574,2576],{"class":793,"line":1221},[791,2566,2567],{"class":1057},"        variant",[791,2569,1606],{"class":801},[791,2571,815],{"class":801},[791,2573,1932],{"class":818},[791,2575,822],{"class":801},[791,2577,1134],{"class":801},[791,2579,2580,2583,2585,2587,2589,2591],{"class":793,"line":1230},[791,2581,2582],{"class":1057},"        size",[791,2584,1606],{"class":801},[791,2586,815],{"class":801},[791,2588,2069],{"class":818},[791,2590,822],{"class":801},[791,2592,1134],{"class":801},[791,2594,2595],{"class":793,"line":1264},[791,2596,2538],{"class":801},[791,2598,2599,2601,2603],{"class":793,"line":1276},[791,2600,1184],{"class":801},[791,2602,1475],{"class":805},[791,2604,825],{"class":801},[791,2606,2607],{"class":793,"line":1286},[791,2608,854],{"emptyLinePlaceholder":223},[791,2610,2611,2613,2615,2617],{"class":793,"line":1546},[791,2612,908],{"class":797},[791,2614,911],{"class":797},[791,2616,914],{"class":805},[791,2618,825],{"class":801},[1734,2620,2622],{"id":2621},"filtering-variants","Filtering Variants",[692,2624,2625,2626,2629],{},"If you only need a subset of the available variants, use the ",[700,2627,2628],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[782,2631,2633],{"className":784,"code":2632,"filename":780,"language":786,"meta":787,"style":787},"import { styleframe } from 'virtual:styleframe';\nimport { useButtonRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate primary and error colors, with solid and outline styles\nconst button = useButtonRecipe(s, {\n    filter: {\n        color: ['primary', 'error'],\n        variant: ['solid', 'outline'],\n    },\n});\n\nexport default s;\n",[700,2634,2635,2655,2675,2679,2693,2697,2702,2718,2727,2755,2781,2785,2793,2797],{"__ignoreMap":787},[791,2636,2637,2639,2641,2643,2645,2647,2649,2651,2653],{"class":793,"line":794},[791,2638,798],{"class":797},[791,2640,802],{"class":801},[791,2642,806],{"class":805},[791,2644,809],{"class":801},[791,2646,812],{"class":797},[791,2648,815],{"class":801},[791,2650,819],{"class":818},[791,2652,822],{"class":801},[791,2654,825],{"class":801},[791,2656,2657,2659,2661,2663,2665,2667,2669,2671,2673],{"class":793,"line":828},[791,2658,798],{"class":797},[791,2660,802],{"class":801},[791,2662,835],{"class":805},[791,2664,809],{"class":801},[791,2666,812],{"class":797},[791,2668,815],{"class":801},[791,2670,844],{"class":818},[791,2672,822],{"class":801},[791,2674,825],{"class":801},[791,2676,2677],{"class":793,"line":851},[791,2678,854],{"emptyLinePlaceholder":223},[791,2680,2681,2683,2685,2687,2689,2691],{"class":793,"line":857},[791,2682,861],{"class":860},[791,2684,864],{"class":805},[791,2686,867],{"class":801},[791,2688,806],{"class":870},[791,2690,873],{"class":805},[791,2692,825],{"class":801},[791,2694,2695],{"class":793,"line":878},[791,2696,854],{"emptyLinePlaceholder":223},[791,2698,2699],{"class":793,"line":883},[791,2700,2701],{"class":1647},"\u002F\u002F Only generate primary and error colors, with solid and outline styles\n",[791,2703,2704,2706,2708,2710,2712,2714,2716],{"class":793,"line":900},[791,2705,861],{"class":860},[791,2707,888],{"class":805},[791,2709,867],{"class":801},[791,2711,835],{"class":870},[791,2713,2504],{"class":805},[791,2715,954],{"class":801},[791,2717,1117],{"class":801},[791,2719,2720,2723,2725],{"class":793,"line":905},[791,2721,2722],{"class":1057},"    filter",[791,2724,1606],{"class":801},[791,2726,1117],{"class":801},[791,2728,2729,2731,2733,2736,2738,2740,2742,2744,2746,2748,2750,2753],{"class":793,"line":1016},[791,2730,2552],{"class":1057},[791,2732,1606],{"class":801},[791,2734,2735],{"class":805}," [",[791,2737,822],{"class":801},[791,2739,1703],{"class":818},[791,2741,822],{"class":801},[791,2743,954],{"class":801},[791,2745,815],{"class":801},[791,2747,1719],{"class":818},[791,2749,822],{"class":801},[791,2751,2752],{"class":805},"]",[791,2754,1134],{"class":801},[791,2756,2757,2759,2761,2763,2765,2767,2769,2771,2773,2775,2777,2779],{"class":793,"line":1206},[791,2758,2567],{"class":1057},[791,2760,1606],{"class":801},[791,2762,2735],{"class":805},[791,2764,822],{"class":801},[791,2766,1146],{"class":818},[791,2768,822],{"class":801},[791,2770,954],{"class":801},[791,2772,815],{"class":801},[791,2774,1922],{"class":818},[791,2776,822],{"class":801},[791,2778,2752],{"class":805},[791,2780,1134],{"class":801},[791,2782,2783],{"class":793,"line":1216},[791,2784,2538],{"class":801},[791,2786,2787,2789,2791],{"class":793,"line":1221},[791,2788,1184],{"class":801},[791,2790,1475],{"class":805},[791,2792,825],{"class":801},[791,2794,2795],{"class":793,"line":1230},[791,2796,854],{"emptyLinePlaceholder":223},[791,2798,2799,2801,2803,2805],{"class":793,"line":1264},[791,2800,908],{"class":797},[791,2802,911],{"class":797},[791,2804,914],{"class":805},[791,2806,825],{"class":801},[2808,2809,2810,2813],"note",{},[696,2811,2812],{},"Good to know:"," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,2815,73],{"id":2816},"api-reference",[1734,2818,2820],{"id":2819},"usebuttonrecipes-options",[700,2821,2822],{},"useButtonRecipe(s, options?)",[692,2824,2825],{},"Creates a full button recipe with all variants and compound variant styling.",[692,2827,2828],{},[696,2829,2830],{},"Parameters:",[1742,2832,2833,2846],{},[1745,2834,2835],{},[1748,2836,2837,2840,2843],{},[1751,2838,2839],{},"Parameter",[1751,2841,2842],{},"Type",[1751,2844,2845],{},"Description",[1761,2847,2848,2863,2878,2893,2907,2922,2937],{},[1748,2849,2850,2855,2860],{},[1766,2851,2852],{},[700,2853,2854],{},"s",[1766,2856,2857],{},[700,2858,2859],{},"Styleframe",[1766,2861,2862],{},"The Styleframe instance",[1748,2864,2865,2870,2875],{},[1766,2866,2867],{},[700,2868,2869],{},"options",[1766,2871,2872],{},[700,2873,2874],{},"DeepPartial\u003CRecipeConfig>",[1766,2876,2877],{},"Optional overrides for the recipe configuration",[1748,2879,2880,2885,2890],{},[1766,2881,2882],{},[700,2883,2884],{},"options.base",[1766,2886,2887],{},[700,2888,2889],{},"VariantDeclarationsBlock",[1766,2891,2892],{},"Custom base styles for the button",[1748,2894,2895,2900,2904],{},[1766,2896,2897],{},[700,2898,2899],{},"options.variants",[1766,2901,2902],{},[700,2903,1902],{},[1766,2905,2906],{},"Custom variant definitions for the recipe",[1748,2908,2909,2914,2919],{},[1766,2910,2911],{},[700,2912,2913],{},"options.defaultVariants",[1766,2915,2916],{},[700,2917,2918],{},"Record\u003Ckeyof Variants, string>",[1766,2920,2921],{},"Default variant values for the recipe",[1748,2923,2924,2929,2934],{},[1766,2925,2926],{},[700,2927,2928],{},"options.compoundVariants",[1766,2930,2931],{},[700,2932,2933],{},"CompoundVariant[]",[1766,2935,2936],{},"Custom compound variant definitions for the recipe",[1748,2938,2939,2944,2949],{},[1766,2940,2941],{},[700,2942,2943],{},"options.filter",[1766,2945,2946],{},[700,2947,2948],{},"Record\u003Cstring, string[]>",[1766,2950,2951],{},"Limit which variant values are generated",[692,2953,2954],{},[696,2955,2956],{},"Variants:",[1742,2958,2959,2972],{},[1745,2960,2961],{},[1748,2962,2963,2966,2969],{},[1751,2964,2965],{},"Variant",[1751,2967,2968],{},"Options",[1751,2970,2971],{},"Default",[1761,2973,2974,3005,3029],{},[1748,2975,2976,2981,3001],{},[1766,2977,2978],{},[700,2979,2980],{},"color",[1766,2982,2983,1704,2985,1704,2987,1704,2989,1704,2991,1704,2993,1704,2995,1704,2997,1704,2999],{},[700,2984,1703],{},[700,2986,1707],{},[700,2988,1710],{},[700,2990,1713],{},[700,2992,1716],{},[700,2994,1719],{},[700,2996,1723],{},[700,2998,1726],{},[700,3000,1129],{},[1766,3002,3003],{},[700,3004,1129],{},[1748,3006,3007,3011,3025],{},[1766,3008,3009],{},[700,3010,2401],{},[1766,3012,3013,1704,3015,1704,3017,1704,3019,1704,3021,1704,3023],{},[700,3014,1146],{},[700,3016,1922],{},[700,3018,1932],{},[700,3020,1942],{},[700,3022,1957],{},[700,3024,1967],{},[1766,3026,3027],{},[700,3028,1146],{},[1748,3030,3031,3036,3048],{},[1766,3032,3033],{},[700,3034,3035],{},"size",[1766,3037,3038,1704,3040,1704,3042,1704,3044,1704,3046],{},[700,3039,1984],{},[700,3041,2039],{},[700,3043,1162],{},[700,3045,2069],{},[700,3047,1988],{},[1766,3049,3050],{},[700,3051,1162],{},[692,3053,3054],{},[705,3055,3056],{"href":132},"Learn more about recipes →",[688,3058,3060],{"id":3059},"best-practices","Best Practices",[724,3062,3063,3075,3093,3099,3108,3117],{},[727,3064,3065,3068,3069,3071,3072,3074],{},[696,3066,3067],{},"Choose colors by meaning, not appearance",": Use ",[700,3070,1710],{}," for positive actions and ",[700,3073,1719],{}," for destructive actions — this keeps your UI consistent when tokens change.",[727,3076,3077,3068,3080,3082,3083,2408,3085,3087,3088,2408,3090,3092],{},[696,3078,3079],{},"Establish a clear visual hierarchy",[700,3081,1146],{}," for the primary action, ",[700,3084,1922],{},[700,3086,1932],{}," for secondary actions, and ",[700,3089,1957],{},[700,3091,1967],{}," for tertiary actions within the same context.",[727,3094,3095,3098],{},[696,3096,3097],{},"Stick to one or two sizes per context",": Mixing too many sizes in the same area creates visual noise. Pick a default size and use alternatives sparingly.",[727,3100,3101,3107],{},[696,3102,3103,3104,3106],{},"Use ",[700,3105,1957],{}," for toolbars and icon buttons",": The transparent resting state keeps the interface clean while the hover state confirms interactivity.",[727,3109,3110,3113,3114,3116],{},[696,3111,3112],{},"Filter what you don't need",": If your component only uses a few variants, pass a ",[700,3115,2628],{}," option to reduce generated CSS.",[727,3118,3119,3122,3123,3126],{},[696,3120,3121],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[700,3124,3125],{},"defaultVariants"," so component consumers write less code.",[688,3128,3130],{"id":3129},"faq","FAQ",[3132,3133,3134,3174,3415,3436,3449,3473,3489],"accordion",{},[3135,3136,3139,3169],"accordion-item",{"icon":3137,"label":3138},"i-lucide-circle-help","How do compound variants work in the Button recipe?",[692,3140,3141,3142,3144,3145,3147,3148,3144,3150,3152,3153,1704,3156,3159,3160,3163,3164,3147,3166,3168],{},"The Button recipe uses compound variants to map each color-variant combination to specific styles. For example, when ",[700,3143,2980],{}," is ",[700,3146,1703],{}," and ",[700,3149,2401],{},[700,3151,1146],{},", the compound variant applies ",[700,3154,3155],{},"background: @color.primary",[700,3157,3158],{},"color: @color.white",", and ",[700,3161,3162],{},"borderColor: @color.primary-shade-50",", along with hover, focus, active, and dark mode overrides. This approach keeps the individual ",[700,3165,2980],{},[700,3167,2401],{}," definitions clean while handling all 54 combinations (9 colors × 6 variants) automatically.",[692,3170,3171],{},[705,3172,3173],{"href":1908},"Learn more about compound variants →",[3135,3175,3177,3187],{"icon":3137,"label":3176},"Can I add custom colors beyond the default six?",[692,3178,3179,3180,3147,3183,3186],{},"Yes. Override the ",[700,3181,3182],{},"variants.color",[700,3184,3185],{},"compoundVariants"," options to add new colors. You'll need to define the empty color variant and add compound variants for each visual style:",[782,3188,3190],{"className":784,"code":3189,"filename":780,"language":786,"meta":787,"style":787},"const button = useButtonRecipe(s, {\n    variants: {\n        color: {\n            brand: {},\n        },\n    },\n    compoundVariants: [\n        { match: { color: 'brand', variant: 'solid' }, css: { background: '@color.brand', color: '@color.white' } },\n        { match: { color: 'brand', variant: 'outline' }, css: { color: '@color.brand', borderColor: '@color.brand' } },\n        \u002F\u002F ... soft, subtle, ghost, and link\n    ],\n});\n",[700,3191,3192,3208,3217,3225,3235,3240,3244,3254,3328,3395,3400,3407],{"__ignoreMap":787},[791,3193,3194,3196,3198,3200,3202,3204,3206],{"class":793,"line":794},[791,3195,861],{"class":860},[791,3197,888],{"class":805},[791,3199,867],{"class":801},[791,3201,835],{"class":870},[791,3203,2504],{"class":805},[791,3205,954],{"class":801},[791,3207,1117],{"class":801},[791,3209,3210,3213,3215],{"class":793,"line":828},[791,3211,3212],{"class":1057},"    variants",[791,3214,1606],{"class":801},[791,3216,1117],{"class":801},[791,3218,3219,3221,3223],{"class":793,"line":851},[791,3220,2552],{"class":1057},[791,3222,1606],{"class":801},[791,3224,1117],{"class":801},[791,3226,3227,3230,3232],{"class":793,"line":857},[791,3228,3229],{"class":1057},"            brand",[791,3231,1606],{"class":801},[791,3233,3234],{"class":801}," {},\n",[791,3236,3237],{"class":793,"line":878},[791,3238,3239],{"class":801},"        },\n",[791,3241,3242],{"class":793,"line":883},[791,3243,2538],{"class":801},[791,3245,3246,3249,3251],{"class":793,"line":900},[791,3247,3248],{"class":1057},"    compoundVariants",[791,3250,1606],{"class":801},[791,3252,3253],{"class":805}," [\n",[791,3255,3256,3259,3262,3264,3266,3268,3270,3272,3275,3277,3279,3281,3283,3285,3287,3289,3292,3295,3297,3299,3302,3304,3306,3309,3311,3313,3315,3317,3319,3321,3323,3325],{"class":793,"line":905},[791,3257,3258],{"class":801},"        {",[791,3260,3261],{"class":1057}," match",[791,3263,1606],{"class":801},[791,3265,802],{"class":801},[791,3267,1460],{"class":1057},[791,3269,1606],{"class":801},[791,3271,815],{"class":801},[791,3273,3274],{"class":818},"brand",[791,3276,822],{"class":801},[791,3278,954],{"class":801},[791,3280,1465],{"class":1057},[791,3282,1606],{"class":801},[791,3284,815],{"class":801},[791,3286,1146],{"class":818},[791,3288,822],{"class":801},[791,3290,3291],{"class":801}," },",[791,3293,3294],{"class":1057}," css",[791,3296,1606],{"class":801},[791,3298,802],{"class":801},[791,3300,3301],{"class":1057}," background",[791,3303,1606],{"class":801},[791,3305,815],{"class":801},[791,3307,3308],{"class":818},"@color.brand",[791,3310,822],{"class":801},[791,3312,954],{"class":801},[791,3314,1460],{"class":1057},[791,3316,1606],{"class":801},[791,3318,815],{"class":801},[791,3320,1858],{"class":818},[791,3322,822],{"class":801},[791,3324,809],{"class":801},[791,3326,3327],{"class":801}," },\n",[791,3329,3330,3332,3334,3336,3338,3340,3342,3344,3346,3348,3350,3352,3354,3356,3358,3360,3362,3364,3366,3368,3370,3372,3374,3376,3378,3380,3383,3385,3387,3389,3391,3393],{"class":793,"line":1016},[791,3331,3258],{"class":801},[791,3333,3261],{"class":1057},[791,3335,1606],{"class":801},[791,3337,802],{"class":801},[791,3339,1460],{"class":1057},[791,3341,1606],{"class":801},[791,3343,815],{"class":801},[791,3345,3274],{"class":818},[791,3347,822],{"class":801},[791,3349,954],{"class":801},[791,3351,1465],{"class":1057},[791,3353,1606],{"class":801},[791,3355,815],{"class":801},[791,3357,1922],{"class":818},[791,3359,822],{"class":801},[791,3361,3291],{"class":801},[791,3363,3294],{"class":1057},[791,3365,1606],{"class":801},[791,3367,802],{"class":801},[791,3369,1460],{"class":1057},[791,3371,1606],{"class":801},[791,3373,815],{"class":801},[791,3375,3308],{"class":818},[791,3377,822],{"class":801},[791,3379,954],{"class":801},[791,3381,3382],{"class":1057}," borderColor",[791,3384,1606],{"class":801},[791,3386,815],{"class":801},[791,3388,3308],{"class":818},[791,3390,822],{"class":801},[791,3392,809],{"class":801},[791,3394,3327],{"class":801},[791,3396,3397],{"class":793,"line":1206},[791,3398,3399],{"class":1647},"        \u002F\u002F ... soft, subtle, ghost, and link\n",[791,3401,3402,3405],{"class":793,"line":1216},[791,3403,3404],{"class":805},"    ]",[791,3406,1134],{"class":801},[791,3408,3409,3411,3413],{"class":793,"line":1221},[791,3410,1184],{"class":801},[791,3412,1475],{"class":805},[791,3414,825],{"class":801},[3135,3416,3418,3419,3147,3421,3423,3424,3426,3427,3429,3430,3432,3433,3435],{"icon":3137,"label":3417},"What's the difference between ghost and link variants?","Both ",[700,3420,1957],{},[700,3422,1967],{}," have a transparent resting state. The difference is that ",[700,3425,1957],{}," reveals a tinted background on hover (like a toolbar button), while ",[700,3428,1967],{}," adds an underline on hover (like a hyperlink). Use ",[700,3431,1957],{}," for actions within a layout and ",[700,3434,1967],{}," for inline navigation actions.",[3135,3437,3439,3440,3442,3443,3445,3446,3448],{"icon":3137,"label":3438},"What's the difference between soft and subtle variants?","Both use a light tinted background with colored text. The difference is that ",[700,3441,1942],{}," also adds a matching colored border, giving the button more visual definition. Use ",[700,3444,1932],{}," when you want a gentler appearance, and ",[700,3447,1942],{}," when the button needs slightly more structure.",[3135,3450,3452,3453,3455,3456,3458,3459,3462,3463,1704,3465,1704,3467,3469,3470,3472],{"icon":3137,"label":3451},"How does filtering affect compound variants?","When you use the ",[700,3454,2628],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[700,3457,2401],{}," to only ",[700,3460,3461],{},"['solid', 'outline']",", all compound variants matching ",[700,3464,1932],{},[700,3466,1942],{},[700,3468,1957],{},", or ",[700,3471,1967],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[3135,3474,3476,3477,3479,3480,3482,3483,3485,3486,3488],{"icon":3137,"label":3475},"How do I handle the disabled state?","The Button recipe includes built-in disabled styles through the ",[700,3478,2103],{}," pseudo-class in the base configuration. It reduces opacity to 0.75, sets ",[700,3481,2302],{},", and disables pointer events. Pass the HTML ",[700,3484,1257],{}," attribute to your ",[700,3487,2129],{}," element to activate both the visual style and the accessibility semantics.",[3135,3490,3492,3493,1704,3495,3159,3497,3499,3500,3503],{"icon":3137,"label":3491},"Can I use the Button recipe without the design tokens preset?","The Button recipe references design tokens like ",[700,3494,1774],{},[700,3496,2044],{},[700,3498,2032],{}," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[700,3501,3502],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[3505,3506,3507],"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":787,"searchDepth":828,"depth":828,"links":3509},[3510,3511,3512,3513,3516,3524,3527,3528,3529,3533,3536,3537],{"id":690,"depth":828,"text":78},{"id":718,"depth":828,"text":719},{"id":759,"depth":828,"text":760},{"id":1697,"depth":828,"text":195,"children":3514},[3515],{"id":1736,"depth":851,"text":1737},{"id":1901,"depth":828,"text":1902,"children":3517},[3518,3519,3520,3521,3522,3523],{"id":1146,"depth":851,"text":1913},{"id":1922,"depth":851,"text":1923},{"id":1932,"depth":851,"text":1933},{"id":1942,"depth":851,"text":1943},{"id":1957,"depth":851,"text":1958},{"id":1967,"depth":851,"text":1968},{"id":1977,"depth":828,"text":1978,"children":3525},[3526],{"id":1995,"depth":851,"text":1996},{"id":1257,"depth":828,"text":2097},{"id":2118,"depth":828,"text":568},{"id":2414,"depth":828,"text":2415,"children":3530},[3531,3532],{"id":2418,"depth":851,"text":2419},{"id":2621,"depth":851,"text":2622},{"id":2816,"depth":828,"text":73,"children":3534},[3535],{"id":2819,"depth":851,"text":2822},{"id":3059,"depth":828,"text":3060},{"id":3129,"depth":828,"text":3130},"An interactive control component for actions and navigation. Supports multiple colors, visual styles, sizes, and states through the recipe system.",null,{},{"icon":7},{"title":368,"description":3538},"_wFg1rUAhBq781jqyBLuyQegIEkeNTXWRRoi3UJ0zoE",[3545,3547],{"title":78,"path":359,"stem":360,"description":3546,"icon":79,"children":-1},"Explore Styleframe's component recipes — pre-built, composable styling patterns for common UI elements like badges, buttons, and more.",{"title":372,"path":373,"stem":374,"description":3548,"icon":7,"children":-1},"A three-bar toggle button that animates into a different glyph (X, arrow, plus, or minus) when opened. Supports three colors, three sizes, seven animations, and an active state through the recipe system.",1781596334227]