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