[{"data":1,"prerenderedAt":2786},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-field-group":682,"-docs-theme-components-field-group-surround":2781},{"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":448,"body":684,"description":2774,"extension":2775,"links":2776,"meta":2777,"navigation":2778,"path":449,"seo":2779,"stem":450,"__hash__":2780},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group.md",{"type":685,"value":686,"toc":2753},"minimark",[687,691,709,725,729,732,760,764,1823,1827,1830,1834,1837,1840,1844,1847,1850,1902,1906,1913,1916,1929,1933,1936,1939,1967,1970,1988,2081,2105,2109,2113,2118,2265,2269,2276,2419,2425,2428,2434,2437,2442,2564,2569,2618,2623,2627,2677,2681,2749],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,708],"p",{},"The ",[696,697,448],"strong",{}," is a layout component that visually connects related controls — buttons, inputs, selects, badges — into a single, cohesive unit. The ",[700,701,702],"code",{},"useFieldGroupRecipe()"," composable creates a fully configured ",[705,706,707],"a",{"href":132},"recipe"," with orientation and block mode options, plus automatic border-radius collapsing so adjacent controls share a seamless edge.",[692,710,711,712,715,716,718,719,721,722,724],{},"Children are placed as ",[696,713,714],{},"direct children"," of the group. The recipe targets them generically, so any bordered control works without per-component wiring — an ",[705,717,452],{"href":453}," next to a ",[705,720,368],{"href":369},", a ",[705,723,468],{"href":469}," prefixing an Input, or a row of buttons. It generates type-safe utility classes at build time with zero runtime CSS.",[688,726,728],{"id":727},"why-use-the-field-group-recipe","Why use the Field Group recipe?",[692,730,731],{},"The Field Group recipe helps you:",[733,734,735,742,748,754],"ul",{},[736,737,738,741],"li",{},[696,739,740],{},"Join controls seamlessly",": Adjacent children automatically collapse their border-radius and inner border at shared edges, creating a clean, unified control.",[736,743,744,747],{},[696,745,746],{},"Compose any controls",": Buttons, inputs, and selects join the same way — no slot wrappers or per-type variants. Fields stretch to take the slack in a horizontal group while buttons stay intrinsic.",[736,749,750,753],{},[696,751,752],{},"Support both orientations",": Switch between horizontal and vertical layouts with a single variant prop — border collapsing adjusts automatically.",[736,755,756,759],{},[696,757,758],{},"Fill available space",": The block variant stretches the group to full width, perfect for search bars, subscribe forms, and mobile layouts.",[688,761,763],{"id":762},"usage","Usage",[765,766,768,773,780,1089,1093,1100,1815,1819],"steps",{"level":767},"4",[769,770,772],"h4",{"id":771},"register-the-recipe","Register the recipe",[692,774,775,776,779],{},"Add the Field Group recipe to a local Styleframe instance. The global ",[700,777,778],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[781,782,784,982],"code-tree",{"default-value":783},"src\u002Fcomponents\u002Ffield-group.styleframe.ts",[785,786,791],"pre",{"className":787,"code":788,"filename":783,"language":789,"meta":790,"style":790},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useButtonRecipe,\n    useInputRecipe,\n    useFieldGroupRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst button = useButtonRecipe(s);\nconst input = useInputRecipe(s);\nconst fieldGroup = useFieldGroupRecipe(s);\n\nexport default s;\n","ts","",[700,792,793,829,837,846,854,862,879,885,906,911,929,946,963,968],{"__ignoreMap":790},[794,795,798,802,806,810,813,816,819,823,826],"span",{"class":796,"line":797},"line",1,[794,799,801],{"class":800},"s7zQu","import",[794,803,805],{"class":804},"sMK4o"," {",[794,807,809],{"class":808},"sTEyZ"," styleframe",[794,811,812],{"class":804}," }",[794,814,815],{"class":800}," from",[794,817,818],{"class":804}," '",[794,820,822],{"class":821},"sfazB","virtual:styleframe",[794,824,825],{"class":804},"'",[794,827,828],{"class":804},";\n",[794,830,832,834],{"class":796,"line":831},2,[794,833,801],{"class":800},[794,835,836],{"class":804}," {\n",[794,838,840,843],{"class":796,"line":839},3,[794,841,842],{"class":808},"    useButtonRecipe",[794,844,845],{"class":804},",\n",[794,847,849,852],{"class":796,"line":848},4,[794,850,851],{"class":808},"    useInputRecipe",[794,853,845],{"class":804},[794,855,857,860],{"class":796,"line":856},5,[794,858,859],{"class":808},"    useFieldGroupRecipe",[794,861,845],{"class":804},[794,863,865,868,870,872,875,877],{"class":796,"line":864},6,[794,866,867],{"class":804},"}",[794,869,815],{"class":800},[794,871,818],{"class":804},[794,873,874],{"class":821},"@styleframe\u002Ftheme",[794,876,825],{"class":804},[794,878,828],{"class":804},[794,880,882],{"class":796,"line":881},7,[794,883,884],{"emptyLinePlaceholder":223},"\n",[794,886,888,892,895,898,901,904],{"class":796,"line":887},8,[794,889,891],{"class":890},"spNyl","const",[794,893,894],{"class":808}," s ",[794,896,897],{"class":804},"=",[794,899,809],{"class":900},"s2Zo4",[794,902,903],{"class":808},"()",[794,905,828],{"class":804},[794,907,909],{"class":796,"line":908},9,[794,910,884],{"emptyLinePlaceholder":223},[794,912,914,916,919,921,924,927],{"class":796,"line":913},10,[794,915,891],{"class":890},[794,917,918],{"class":808}," button ",[794,920,897],{"class":804},[794,922,923],{"class":900}," useButtonRecipe",[794,925,926],{"class":808},"(s)",[794,928,828],{"class":804},[794,930,932,934,937,939,942,944],{"class":796,"line":931},11,[794,933,891],{"class":890},[794,935,936],{"class":808}," input ",[794,938,897],{"class":804},[794,940,941],{"class":900}," useInputRecipe",[794,943,926],{"class":808},[794,945,828],{"class":804},[794,947,949,951,954,956,959,961],{"class":796,"line":948},12,[794,950,891],{"class":890},[794,952,953],{"class":808}," fieldGroup ",[794,955,897],{"class":804},[794,957,958],{"class":900}," useFieldGroupRecipe",[794,960,926],{"class":808},[794,962,828],{"class":804},[794,964,966],{"class":796,"line":965},13,[794,967,884],{"emptyLinePlaceholder":223},[794,969,971,974,977,980],{"class":796,"line":970},14,[794,972,973],{"class":800},"export",[794,975,976],{"class":800}," default",[794,978,979],{"class":808}," s",[794,981,828],{"class":804},[785,983,985],{"className":787,"code":984,"filename":778,"language":789,"meta":790,"style":790},"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,986,987,1008,1035,1039,1053,1057,1066,1075,1079],{"__ignoreMap":790},[794,988,989,991,993,995,997,999,1001,1004,1006],{"class":796,"line":797},[794,990,801],{"class":800},[794,992,805],{"class":804},[794,994,809],{"class":808},[794,996,812],{"class":804},[794,998,815],{"class":800},[794,1000,818],{"class":804},[794,1002,1003],{"class":821},"styleframe",[794,1005,825],{"class":804},[794,1007,828],{"class":804},[794,1009,1010,1012,1014,1017,1020,1023,1025,1027,1029,1031,1033],{"class":796,"line":831},[794,1011,801],{"class":800},[794,1013,805],{"class":804},[794,1015,1016],{"class":808}," useDesignTokensPreset",[794,1018,1019],{"class":804},",",[794,1021,1022],{"class":808}," useUtilitiesPreset",[794,1024,812],{"class":804},[794,1026,815],{"class":800},[794,1028,818],{"class":804},[794,1030,874],{"class":821},[794,1032,825],{"class":804},[794,1034,828],{"class":804},[794,1036,1037],{"class":796,"line":839},[794,1038,884],{"emptyLinePlaceholder":223},[794,1040,1041,1043,1045,1047,1049,1051],{"class":796,"line":848},[794,1042,891],{"class":890},[794,1044,894],{"class":808},[794,1046,897],{"class":804},[794,1048,809],{"class":900},[794,1050,903],{"class":808},[794,1052,828],{"class":804},[794,1054,1055],{"class":796,"line":856},[794,1056,884],{"emptyLinePlaceholder":223},[794,1058,1059,1062,1064],{"class":796,"line":864},[794,1060,1061],{"class":900},"useDesignTokensPreset",[794,1063,926],{"class":808},[794,1065,828],{"class":804},[794,1067,1068,1071,1073],{"class":796,"line":881},[794,1069,1070],{"class":900},"useUtilitiesPreset",[794,1072,926],{"class":808},[794,1074,828],{"class":804},[794,1076,1077],{"class":796,"line":887},[794,1078,884],{"emptyLinePlaceholder":223},[794,1080,1081,1083,1085,1087],{"class":796,"line":908},[794,1082,973],{"class":800},[794,1084,976],{"class":800},[794,1086,979],{"class":808},[794,1088,828],{"class":804},[769,1090,1092],{"id":1091},"build-the-component","Build the component",[692,1094,1095,1096,1099],{},"Import the ",[700,1097,1098],{},"fieldGroup"," runtime function from the virtual module and pass variant props to compute class names. Render the controls you want to join as direct children:",[1101,1102,1103,1353,1600],"framework-switcher",{},[1104,1105,1106],"template",{"v-slot:vue":790},[785,1107,1112],{"className":1108,"code":1109,"filename":1110,"language":1111,"meta":790,"style":790},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { fieldGroup, type FieldGroupProps } from \"virtual:styleframe\";\n\nconst props = withDefaults(\n    defineProps\u003CFieldGroupProps>(),\n    {\n        orientation: \"horizontal\",\n        block: false,\n    },\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv\n        :class=\"fieldGroup({ orientation: props.orientation, block: props.block ? 'true' : 'false' })\"\n        role=\"group\"\n    >\n        \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FFieldGroup.vue","vue",[700,1113,1114,1141,1171,1175,1190,1208,1213,1230,1243,1248,1255,1264,1268,1276,1284,1300,1315,1321,1333,1344],{"__ignoreMap":790},[794,1115,1116,1119,1123,1126,1129,1131,1134,1136,1138],{"class":796,"line":797},[794,1117,1118],{"class":804},"\u003C",[794,1120,1122],{"class":1121},"swJcz","script",[794,1124,1125],{"class":890}," setup",[794,1127,1128],{"class":890}," lang",[794,1130,897],{"class":804},[794,1132,1133],{"class":804},"\"",[794,1135,789],{"class":821},[794,1137,1133],{"class":804},[794,1139,1140],{"class":804},">\n",[794,1142,1143,1145,1147,1150,1152,1155,1158,1160,1162,1165,1167,1169],{"class":796,"line":831},[794,1144,801],{"class":800},[794,1146,805],{"class":804},[794,1148,1149],{"class":808}," fieldGroup",[794,1151,1019],{"class":804},[794,1153,1154],{"class":800}," type",[794,1156,1157],{"class":808}," FieldGroupProps",[794,1159,812],{"class":804},[794,1161,815],{"class":800},[794,1163,1164],{"class":804}," \"",[794,1166,822],{"class":821},[794,1168,1133],{"class":804},[794,1170,828],{"class":804},[794,1172,1173],{"class":796,"line":839},[794,1174,884],{"emptyLinePlaceholder":223},[794,1176,1177,1179,1182,1184,1187],{"class":796,"line":848},[794,1178,891],{"class":890},[794,1180,1181],{"class":808}," props ",[794,1183,897],{"class":804},[794,1185,1186],{"class":900}," withDefaults",[794,1188,1189],{"class":808},"(\n",[794,1191,1192,1195,1197,1201,1204,1206],{"class":796,"line":856},[794,1193,1194],{"class":900},"    defineProps",[794,1196,1118],{"class":804},[794,1198,1200],{"class":1199},"sBMFI","FieldGroupProps",[794,1202,1203],{"class":804},">",[794,1205,903],{"class":808},[794,1207,845],{"class":804},[794,1209,1210],{"class":796,"line":864},[794,1211,1212],{"class":804},"    {\n",[794,1214,1215,1218,1221,1223,1226,1228],{"class":796,"line":881},[794,1216,1217],{"class":1121},"        orientation",[794,1219,1220],{"class":804},":",[794,1222,1164],{"class":804},[794,1224,1225],{"class":821},"horizontal",[794,1227,1133],{"class":804},[794,1229,845],{"class":804},[794,1231,1232,1235,1237,1241],{"class":796,"line":887},[794,1233,1234],{"class":1121},"        block",[794,1236,1220],{"class":804},[794,1238,1240],{"class":1239},"sfNiH"," false",[794,1242,845],{"class":804},[794,1244,1245],{"class":796,"line":908},[794,1246,1247],{"class":804},"    },\n",[794,1249,1250,1253],{"class":796,"line":913},[794,1251,1252],{"class":808},")",[794,1254,828],{"class":804},[794,1256,1257,1260,1262],{"class":796,"line":931},[794,1258,1259],{"class":804},"\u003C\u002F",[794,1261,1122],{"class":1121},[794,1263,1140],{"class":804},[794,1265,1266],{"class":796,"line":948},[794,1267,884],{"emptyLinePlaceholder":223},[794,1269,1270,1272,1274],{"class":796,"line":965},[794,1271,1118],{"class":804},[794,1273,1104],{"class":1121},[794,1275,1140],{"class":804},[794,1277,1278,1281],{"class":796,"line":970},[794,1279,1280],{"class":804},"    \u003C",[794,1282,1283],{"class":1121},"div\n",[794,1285,1287,1290,1292,1294,1297],{"class":796,"line":1286},15,[794,1288,1289],{"class":890},"        :class",[794,1291,897],{"class":804},[794,1293,1133],{"class":804},[794,1295,1296],{"class":821},"fieldGroup({ orientation: props.orientation, block: props.block ? 'true' : 'false' })",[794,1298,1299],{"class":804},"\"\n",[794,1301,1303,1306,1308,1310,1313],{"class":796,"line":1302},16,[794,1304,1305],{"class":890},"        role",[794,1307,897],{"class":804},[794,1309,1133],{"class":804},[794,1311,1312],{"class":821},"group",[794,1314,1299],{"class":804},[794,1316,1318],{"class":796,"line":1317},17,[794,1319,1320],{"class":804},"    >\n",[794,1322,1324,1327,1330],{"class":796,"line":1323},18,[794,1325,1326],{"class":804},"        \u003C",[794,1328,1329],{"class":1121},"slot",[794,1331,1332],{"class":804}," \u002F>\n",[794,1334,1336,1339,1342],{"class":796,"line":1335},19,[794,1337,1338],{"class":804},"    \u003C\u002F",[794,1340,1341],{"class":1121},"div",[794,1343,1140],{"class":804},[794,1345,1347,1349,1351],{"class":796,"line":1346},20,[794,1348,1259],{"class":804},[794,1350,1104],{"class":1121},[794,1352,1140],{"class":804},[1104,1354,1355],{"v-slot:react":790},[785,1356,1359],{"className":787,"code":1357,"filename":1358,"language":789,"meta":790,"style":790},"import { fieldGroup, type FieldGroupProps } from \"virtual:styleframe\";\n\nexport function FieldGroup({\n    orientation = \"horizontal\",\n    block = false,\n    children,\n}: FieldGroupProps & { children?: React.ReactNode }) {\n    const classes = fieldGroup({ orientation, block: block ? \"true\" : \"false\" });\n\n    return (\n        \u003Cdiv className={classes} role=\"group\">\n            {children}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FFieldGroup.tsx",[700,1360,1361,1387,1391,1404,1421,1432,1439,1471,1527,1531,1539,1569,1580,1589,1596],{"__ignoreMap":790},[794,1362,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1385],{"class":796,"line":797},[794,1364,801],{"class":800},[794,1366,805],{"class":804},[794,1368,1149],{"class":808},[794,1370,1019],{"class":804},[794,1372,1154],{"class":800},[794,1374,1157],{"class":808},[794,1376,812],{"class":804},[794,1378,815],{"class":800},[794,1380,1164],{"class":804},[794,1382,822],{"class":821},[794,1384,1133],{"class":804},[794,1386,828],{"class":804},[794,1388,1389],{"class":796,"line":831},[794,1390,884],{"emptyLinePlaceholder":223},[794,1392,1393,1395,1398,1401],{"class":796,"line":839},[794,1394,973],{"class":800},[794,1396,1397],{"class":890}," function",[794,1399,1400],{"class":900}," FieldGroup",[794,1402,1403],{"class":804},"({\n",[794,1405,1406,1410,1413,1415,1417,1419],{"class":796,"line":848},[794,1407,1409],{"class":1408},"sHdIc","    orientation",[794,1411,1412],{"class":804}," =",[794,1414,1164],{"class":804},[794,1416,1225],{"class":821},[794,1418,1133],{"class":804},[794,1420,845],{"class":804},[794,1422,1423,1426,1428,1430],{"class":796,"line":856},[794,1424,1425],{"class":1408},"    block",[794,1427,1412],{"class":804},[794,1429,1240],{"class":1239},[794,1431,845],{"class":804},[794,1433,1434,1437],{"class":796,"line":864},[794,1435,1436],{"class":1408},"    children",[794,1438,845],{"class":804},[794,1440,1441,1444,1446,1449,1451,1454,1457,1460,1463,1466,1469],{"class":796,"line":881},[794,1442,1443],{"class":804},"}:",[794,1445,1157],{"class":1199},[794,1447,1448],{"class":804}," &",[794,1450,805],{"class":804},[794,1452,1453],{"class":1121}," children",[794,1455,1456],{"class":804},"?:",[794,1458,1459],{"class":1199}," React",[794,1461,1462],{"class":804},".",[794,1464,1465],{"class":1199},"ReactNode",[794,1467,1468],{"class":804}," })",[794,1470,836],{"class":804},[794,1472,1473,1476,1479,1481,1483,1486,1489,1492,1494,1497,1499,1501,1504,1506,1509,1511,1514,1516,1519,1521,1523,1525],{"class":796,"line":887},[794,1474,1475],{"class":890},"    const",[794,1477,1478],{"class":808}," classes",[794,1480,1412],{"class":804},[794,1482,1149],{"class":900},[794,1484,1485],{"class":1121},"(",[794,1487,1488],{"class":804},"{",[794,1490,1491],{"class":808}," orientation",[794,1493,1019],{"class":804},[794,1495,1496],{"class":1121}," block",[794,1498,1220],{"class":804},[794,1500,1496],{"class":808},[794,1502,1503],{"class":804}," ?",[794,1505,1164],{"class":804},[794,1507,1508],{"class":821},"true",[794,1510,1133],{"class":804},[794,1512,1513],{"class":804}," :",[794,1515,1164],{"class":804},[794,1517,1518],{"class":821},"false",[794,1520,1133],{"class":804},[794,1522,812],{"class":804},[794,1524,1252],{"class":1121},[794,1526,828],{"class":804},[794,1528,1529],{"class":796,"line":908},[794,1530,884],{"emptyLinePlaceholder":223},[794,1532,1533,1536],{"class":796,"line":913},[794,1534,1535],{"class":800},"    return",[794,1537,1538],{"class":1121}," (\n",[794,1540,1541,1543,1545,1548,1551,1554,1556,1559,1561,1563,1565,1567],{"class":796,"line":931},[794,1542,1326],{"class":804},[794,1544,1341],{"class":808},[794,1546,1547],{"class":808}," className",[794,1549,1550],{"class":804},"={",[794,1552,1553],{"class":808},"classes",[794,1555,867],{"class":804},[794,1557,1558],{"class":808}," role",[794,1560,897],{"class":804},[794,1562,1133],{"class":804},[794,1564,1312],{"class":821},[794,1566,1133],{"class":804},[794,1568,1140],{"class":804},[794,1570,1571,1574,1577],{"class":796,"line":948},[794,1572,1573],{"class":804},"            {",[794,1575,1576],{"class":1408},"children",[794,1578,1579],{"class":804},"}\n",[794,1581,1582,1585,1587],{"class":796,"line":965},[794,1583,1584],{"class":804},"        \u003C\u002F",[794,1586,1341],{"class":808},[794,1588,1140],{"class":804},[794,1590,1591,1594],{"class":796,"line":970},[794,1592,1593],{"class":1121},"    )",[794,1595,828],{"class":804},[794,1597,1598],{"class":796,"line":1286},[794,1599,1579],{"class":804},[1104,1601,1602,1608,1687],{"v-slot:other":790},[692,1603,694,1604,1607],{},[700,1605,1606],{},"fieldGroup()"," runtime returns a class string. Apply it however your framework binds classes:",[785,1609,1612],{"className":787,"code":1610,"filename":1611,"language":789,"meta":790,"style":790},"import { fieldGroup } from \"virtual:styleframe\";\n\nconst classes = fieldGroup({ orientation: \"horizontal\", block: \"false\" });\n\u002F\u002F → \"field-group _display:inline-flex _flex-direction:row ...\"\n","src\u002Fcomponents\u002Ffield-group.ts",[700,1613,1614,1634,1638,1681],{"__ignoreMap":790},[794,1615,1616,1618,1620,1622,1624,1626,1628,1630,1632],{"class":796,"line":797},[794,1617,801],{"class":800},[794,1619,805],{"class":804},[794,1621,1149],{"class":808},[794,1623,812],{"class":804},[794,1625,815],{"class":800},[794,1627,1164],{"class":804},[794,1629,822],{"class":821},[794,1631,1133],{"class":804},[794,1633,828],{"class":804},[794,1635,1636],{"class":796,"line":831},[794,1637,884],{"emptyLinePlaceholder":223},[794,1639,1640,1642,1645,1647,1649,1651,1653,1655,1657,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677,1679],{"class":796,"line":839},[794,1641,891],{"class":890},[794,1643,1644],{"class":808}," classes ",[794,1646,897],{"class":804},[794,1648,1149],{"class":900},[794,1650,1485],{"class":808},[794,1652,1488],{"class":804},[794,1654,1491],{"class":1121},[794,1656,1220],{"class":804},[794,1658,1164],{"class":804},[794,1660,1225],{"class":821},[794,1662,1133],{"class":804},[794,1664,1019],{"class":804},[794,1666,1496],{"class":1121},[794,1668,1220],{"class":804},[794,1670,1164],{"class":804},[794,1672,1518],{"class":821},[794,1674,1133],{"class":804},[794,1676,812],{"class":804},[794,1678,1252],{"class":808},[794,1680,828],{"class":804},[794,1682,1683],{"class":796,"line":848},[794,1684,1686],{"class":1685},"sHwdD","\u002F\u002F → \"field-group _display:inline-flex _flex-direction:row ...\"\n",[785,1688,1693],{"className":1689,"code":1690,"filename":1691,"language":1692,"meta":790,"style":790},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"field-group _display:inline-flex _flex-direction:row ...\" role=\"group\">\n    \u003Cspan class=\"input ...\">\u003Cinput class=\"input-field\" placeholder=\"Search...\" \u002F>\u003C\u002Fspan>\n    \u003Cbutton class=\"button ...\">Search\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Ffield-group.html","html",[700,1694,1695,1725,1778,1807],{"__ignoreMap":790},[794,1696,1697,1699,1701,1704,1706,1708,1711,1713,1715,1717,1719,1721,1723],{"class":796,"line":797},[794,1698,1118],{"class":804},[794,1700,1341],{"class":1121},[794,1702,1703],{"class":890}," class",[794,1705,897],{"class":804},[794,1707,1133],{"class":804},[794,1709,1710],{"class":821},"field-group _display:inline-flex _flex-direction:row ...",[794,1712,1133],{"class":804},[794,1714,1558],{"class":890},[794,1716,897],{"class":804},[794,1718,1133],{"class":804},[794,1720,1312],{"class":821},[794,1722,1133],{"class":804},[794,1724,1140],{"class":804},[794,1726,1727,1729,1731,1733,1735,1737,1740,1742,1745,1748,1750,1752,1754,1757,1759,1762,1764,1766,1769,1771,1774,1776],{"class":796,"line":831},[794,1728,1280],{"class":804},[794,1730,794],{"class":1121},[794,1732,1703],{"class":890},[794,1734,897],{"class":804},[794,1736,1133],{"class":804},[794,1738,1739],{"class":821},"input ...",[794,1741,1133],{"class":804},[794,1743,1744],{"class":804},">\u003C",[794,1746,1747],{"class":1121},"input",[794,1749,1703],{"class":890},[794,1751,897],{"class":804},[794,1753,1133],{"class":804},[794,1755,1756],{"class":821},"input-field",[794,1758,1133],{"class":804},[794,1760,1761],{"class":890}," placeholder",[794,1763,897],{"class":804},[794,1765,1133],{"class":804},[794,1767,1768],{"class":821},"Search...",[794,1770,1133],{"class":804},[794,1772,1773],{"class":804}," \u002F>\u003C\u002F",[794,1775,794],{"class":1121},[794,1777,1140],{"class":804},[794,1779,1780,1782,1785,1787,1789,1791,1794,1796,1798,1801,1803,1805],{"class":796,"line":839},[794,1781,1280],{"class":804},[794,1783,1784],{"class":1121},"button",[794,1786,1703],{"class":890},[794,1788,897],{"class":804},[794,1790,1133],{"class":804},[794,1792,1793],{"class":821},"button ...",[794,1795,1133],{"class":804},[794,1797,1203],{"class":804},[794,1799,1800],{"class":808},"Search",[794,1802,1259],{"class":804},[794,1804,1784],{"class":1121},[794,1806,1140],{"class":804},[794,1808,1809,1811,1813],{"class":796,"line":848},[794,1810,1259],{"class":804},[794,1812,1341],{"class":1121},[794,1814,1140],{"class":804},[769,1816,1818],{"id":1817},"see-it-in-action","See it in action",[1820,1821],"story-preview",{":panel":1508,"story":1822},"theme-recipes-forms-field-group--default",[688,1824,1826],{"id":1825},"orientation","Orientation",[692,1828,1829],{},"The Field Group supports two orientation variants that control the layout direction and which edges have their borders collapsed.",[1831,1832,1833],"h3",{"id":1225},"Horizontal",[692,1835,1836],{},"The default orientation. Controls are laid out side-by-side in a row. Border-radius is removed from the right edge of each child except the last, and from the left edge of each child except the first. The right border is removed from each child except the last to prevent doubled borders. Inputs and selects flex-grow to fill the remaining space while buttons keep their intrinsic width.",[1820,1838],{":panel":1508,"story":1839},"theme-recipes-forms-field-group--horizontal",[1831,1841,1843],{"id":1842},"vertical","Vertical",[692,1845,1846],{},"Controls are stacked top-to-bottom in a column. Border-radius is removed from the bottom edge of each child except the last, and from the top edge of each child except the first. The bottom border is removed from each child except the last to prevent doubled borders.",[1820,1848],{":panel":1508,"story":1849},"theme-recipes-forms-field-group--vertical",[1851,1852,1853,1868],"table",{},[1854,1855,1856],"thead",{},[1857,1858,1859,1862,1865],"tr",{},[1860,1861,1826],"th",{},[1860,1863,1864],{},"Direction",[1860,1866,1867],{},"Border Collapsing",[1869,1870,1871,1887],"tbody",{},[1857,1872,1873,1878,1884],{},[1874,1875,1876],"td",{},[700,1877,1225],{},[1874,1879,1880,1881,1252],{},"Left to right (",[700,1882,1883],{},"row",[1874,1885,1886],{},"Right border + right\u002Fleft radius removed at joins",[1857,1888,1889,1893,1899],{},[1874,1890,1891],{},[700,1892,1842],{},[1874,1894,1895,1896,1252],{},"Top to bottom (",[700,1897,1898],{},"column",[1874,1900,1901],{},"Bottom border + bottom\u002Ftop radius removed at joins",[688,1903,1905],{"id":1904},"block","Block",[692,1907,1908,1909,1912],{},"The block variant stretches the field group to fill the full width of its container. Inputs and selects already absorb the free space in a horizontal group; buttons are given equal flex sizing (",[700,1910,1911],{},"flex-basis: 0; flex-grow: 1",") so a row of buttons distributes evenly.",[1820,1914],{":panel":1508,"story":1915},"theme-recipes-forms-field-group--block",[1917,1918,1919,1922,1923,1925,1926,1928],"tip",{},[696,1920,1921],{},"Pro tip:"," The block variant works with both orientations. Combine ",[700,1924,1904],{}," with ",[700,1927,1842],{}," for a full-width stacked layout, such as a compose box with an action button beneath it.",[688,1930,1932],{"id":1931},"composing-controls","Composing controls",[692,1934,1935],{},"A field group joins whatever bordered controls you nest inside it. Pair a Select with an Input for a currency field, or wrap a Button around an Input for a search bar.",[1820,1937],{":panel":1508,"story":1938},"theme-recipes-forms-field-group--with-select",[1940,1941,1942,1945,1946,1950,1951,1954,1955,1958,1959,1962,1963,1966],"note",{},[696,1943,1944],{},"Direct children only."," The seam rules rely on each control being a ",[1947,1948,1949],"em",{},"direct"," child and on ",[700,1952,1953],{},":first-child"," \u002F ",[700,1956,1957],{},":last-child"," position. Render conditional children with ",[700,1960,1961],{},"v-if"," (or equivalent) so they are removed from the DOM rather than hidden with ",[700,1964,1965],{},"display: none",", which would shift the first\u002Flast edges. Overlay panels (e.g. a Select's dropdown) must be nested inside their own control, never placed as a direct group child.",[688,1968,568],{"id":1969},"accessibility",[733,1971,1972],{},[736,1973,1974,1980,1981,1983,1984,1987],{},[696,1975,1976,1977,1462],{},"Use ",[700,1978,1979],{},"role=\"group\""," Wrap the controls in an element with ",[700,1982,1979],{}," and an ",[700,1985,1986],{},"aria-label"," describing the group's purpose so screen readers announce the context.",[785,1989,1991],{"className":1689,"code":1990,"language":1692,"meta":790,"style":790},"\u003C!-- Correct: semantic group with label -->\n\u003Cdiv role=\"group\" aria-label=\"Search the site\">\n    \u003Cinput class=\"input-field\" \u002F>\n    \u003Cbutton class=\"...\">Search\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[700,1992,1993,1998,2028,2046,2073],{"__ignoreMap":790},[794,1994,1995],{"class":796,"line":797},[794,1996,1997],{"class":1685},"\u003C!-- Correct: semantic group with label -->\n",[794,1999,2000,2002,2004,2006,2008,2010,2012,2014,2017,2019,2021,2024,2026],{"class":796,"line":831},[794,2001,1118],{"class":804},[794,2003,1341],{"class":1121},[794,2005,1558],{"class":890},[794,2007,897],{"class":804},[794,2009,1133],{"class":804},[794,2011,1312],{"class":821},[794,2013,1133],{"class":804},[794,2015,2016],{"class":890}," aria-label",[794,2018,897],{"class":804},[794,2020,1133],{"class":804},[794,2022,2023],{"class":821},"Search the site",[794,2025,1133],{"class":804},[794,2027,1140],{"class":804},[794,2029,2030,2032,2034,2036,2038,2040,2042,2044],{"class":796,"line":839},[794,2031,1280],{"class":804},[794,2033,1747],{"class":1121},[794,2035,1703],{"class":890},[794,2037,897],{"class":804},[794,2039,1133],{"class":804},[794,2041,1756],{"class":821},[794,2043,1133],{"class":804},[794,2045,1332],{"class":804},[794,2047,2048,2050,2052,2054,2056,2058,2061,2063,2065,2067,2069,2071],{"class":796,"line":848},[794,2049,1280],{"class":804},[794,2051,1784],{"class":1121},[794,2053,1703],{"class":890},[794,2055,897],{"class":804},[794,2057,1133],{"class":804},[794,2059,2060],{"class":821},"...",[794,2062,1133],{"class":804},[794,2064,1203],{"class":804},[794,2066,1800],{"class":808},[794,2068,1259],{"class":804},[794,2070,1784],{"class":1121},[794,2072,1140],{"class":804},[794,2074,2075,2077,2079],{"class":796,"line":856},[794,2076,1259],{"class":804},[794,2078,1341],{"class":1121},[794,2080,1140],{"class":804},[733,2082,2083],{},[736,2084,2085,2088,2089,2092,2093,2096,2097,2100,2101,2104],{},[696,2086,2087],{},"Keyboard navigation."," Native ",[700,2090,2091],{},"\u003Cbutton>",", ",[700,2094,2095],{},"\u003Cinput>",", and ",[700,2098,2099],{},"\u003Cselect>"," elements provide Tab key support out of the box. For single-selection button groups (segmented controls), consider ",[700,2102,2103],{},"role=\"toolbar\""," with arrow-key navigation.",[688,2106,2108],{"id":2107},"customization","Customization",[1831,2110,2112],{"id":2111},"overriding-defaults","Overriding Defaults",[692,2114,694,2115,2117],{},[700,2116,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:",[785,2119,2121],{"className":787,"code":2120,"filename":783,"language":789,"meta":790,"style":790},"import { styleframe } from 'virtual:styleframe';\nimport { useFieldGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst fieldGroup = useFieldGroupRecipe(s, {\n    defaultVariants: {\n        orientation: 'vertical',\n        block: 'true',\n    },\n});\n\nexport default s;\n",[700,2122,2123,2143,2163,2167,2181,2185,2202,2211,2225,2239,2243,2251,2255],{"__ignoreMap":790},[794,2124,2125,2127,2129,2131,2133,2135,2137,2139,2141],{"class":796,"line":797},[794,2126,801],{"class":800},[794,2128,805],{"class":804},[794,2130,809],{"class":808},[794,2132,812],{"class":804},[794,2134,815],{"class":800},[794,2136,818],{"class":804},[794,2138,822],{"class":821},[794,2140,825],{"class":804},[794,2142,828],{"class":804},[794,2144,2145,2147,2149,2151,2153,2155,2157,2159,2161],{"class":796,"line":831},[794,2146,801],{"class":800},[794,2148,805],{"class":804},[794,2150,958],{"class":808},[794,2152,812],{"class":804},[794,2154,815],{"class":800},[794,2156,818],{"class":804},[794,2158,874],{"class":821},[794,2160,825],{"class":804},[794,2162,828],{"class":804},[794,2164,2165],{"class":796,"line":839},[794,2166,884],{"emptyLinePlaceholder":223},[794,2168,2169,2171,2173,2175,2177,2179],{"class":796,"line":848},[794,2170,891],{"class":890},[794,2172,894],{"class":808},[794,2174,897],{"class":804},[794,2176,809],{"class":900},[794,2178,903],{"class":808},[794,2180,828],{"class":804},[794,2182,2183],{"class":796,"line":856},[794,2184,884],{"emptyLinePlaceholder":223},[794,2186,2187,2189,2191,2193,2195,2198,2200],{"class":796,"line":864},[794,2188,891],{"class":890},[794,2190,953],{"class":808},[794,2192,897],{"class":804},[794,2194,958],{"class":900},[794,2196,2197],{"class":808},"(s",[794,2199,1019],{"class":804},[794,2201,836],{"class":804},[794,2203,2204,2207,2209],{"class":796,"line":881},[794,2205,2206],{"class":1121},"    defaultVariants",[794,2208,1220],{"class":804},[794,2210,836],{"class":804},[794,2212,2213,2215,2217,2219,2221,2223],{"class":796,"line":887},[794,2214,1217],{"class":1121},[794,2216,1220],{"class":804},[794,2218,818],{"class":804},[794,2220,1842],{"class":821},[794,2222,825],{"class":804},[794,2224,845],{"class":804},[794,2226,2227,2229,2231,2233,2235,2237],{"class":796,"line":908},[794,2228,1234],{"class":1121},[794,2230,1220],{"class":804},[794,2232,818],{"class":804},[794,2234,1508],{"class":821},[794,2236,825],{"class":804},[794,2238,845],{"class":804},[794,2240,2241],{"class":796,"line":913},[794,2242,1247],{"class":804},[794,2244,2245,2247,2249],{"class":796,"line":931},[794,2246,867],{"class":804},[794,2248,1252],{"class":808},[794,2250,828],{"class":804},[794,2252,2253],{"class":796,"line":948},[794,2254,884],{"emptyLinePlaceholder":223},[794,2256,2257,2259,2261,2263],{"class":796,"line":965},[794,2258,973],{"class":800},[794,2260,976],{"class":800},[794,2262,979],{"class":808},[794,2264,828],{"class":804},[1831,2266,2268],{"id":2267},"filtering-variants","Filtering Variants",[692,2270,2271,2272,2275],{},"If you only need a subset of the available variants, use the ",[700,2273,2274],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[785,2277,2279],{"className":787,"code":2278,"filename":783,"language":789,"meta":790,"style":790},"import { styleframe } from 'virtual:styleframe';\nimport { useFieldGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate horizontal orientation\nconst fieldGroup = useFieldGroupRecipe(s, {\n    filter: {\n        orientation: ['horizontal'],\n    },\n});\n\nexport default s;\n",[700,2280,2281,2301,2321,2325,2339,2343,2348,2364,2373,2393,2397,2405,2409],{"__ignoreMap":790},[794,2282,2283,2285,2287,2289,2291,2293,2295,2297,2299],{"class":796,"line":797},[794,2284,801],{"class":800},[794,2286,805],{"class":804},[794,2288,809],{"class":808},[794,2290,812],{"class":804},[794,2292,815],{"class":800},[794,2294,818],{"class":804},[794,2296,822],{"class":821},[794,2298,825],{"class":804},[794,2300,828],{"class":804},[794,2302,2303,2305,2307,2309,2311,2313,2315,2317,2319],{"class":796,"line":831},[794,2304,801],{"class":800},[794,2306,805],{"class":804},[794,2308,958],{"class":808},[794,2310,812],{"class":804},[794,2312,815],{"class":800},[794,2314,818],{"class":804},[794,2316,874],{"class":821},[794,2318,825],{"class":804},[794,2320,828],{"class":804},[794,2322,2323],{"class":796,"line":839},[794,2324,884],{"emptyLinePlaceholder":223},[794,2326,2327,2329,2331,2333,2335,2337],{"class":796,"line":848},[794,2328,891],{"class":890},[794,2330,894],{"class":808},[794,2332,897],{"class":804},[794,2334,809],{"class":900},[794,2336,903],{"class":808},[794,2338,828],{"class":804},[794,2340,2341],{"class":796,"line":856},[794,2342,884],{"emptyLinePlaceholder":223},[794,2344,2345],{"class":796,"line":864},[794,2346,2347],{"class":1685},"\u002F\u002F Only generate horizontal orientation\n",[794,2349,2350,2352,2354,2356,2358,2360,2362],{"class":796,"line":881},[794,2351,891],{"class":890},[794,2353,953],{"class":808},[794,2355,897],{"class":804},[794,2357,958],{"class":900},[794,2359,2197],{"class":808},[794,2361,1019],{"class":804},[794,2363,836],{"class":804},[794,2365,2366,2369,2371],{"class":796,"line":887},[794,2367,2368],{"class":1121},"    filter",[794,2370,1220],{"class":804},[794,2372,836],{"class":804},[794,2374,2375,2377,2379,2382,2384,2386,2388,2391],{"class":796,"line":908},[794,2376,1217],{"class":1121},[794,2378,1220],{"class":804},[794,2380,2381],{"class":808}," [",[794,2383,825],{"class":804},[794,2385,1225],{"class":821},[794,2387,825],{"class":804},[794,2389,2390],{"class":808},"]",[794,2392,845],{"class":804},[794,2394,2395],{"class":796,"line":913},[794,2396,1247],{"class":804},[794,2398,2399,2401,2403],{"class":796,"line":931},[794,2400,867],{"class":804},[794,2402,1252],{"class":808},[794,2404,828],{"class":804},[794,2406,2407],{"class":796,"line":948},[794,2408,884],{"emptyLinePlaceholder":223},[794,2410,2411,2413,2415,2417],{"class":796,"line":965},[794,2412,973],{"class":800},[794,2414,976],{"class":800},[794,2416,979],{"class":808},[794,2418,828],{"class":804},[1940,2420,2421,2424],{},[696,2422,2423],{},"Good to know:"," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,2426,73],{"id":2427},"api-reference",[1831,2429,2431],{"id":2430},"usefieldgrouprecipes-options",[700,2432,2433],{},"useFieldGroupRecipe(s, options?)",[692,2435,2436],{},"Creates a field group recipe with orientation and block mode variants plus automatic border collapsing for direct children.",[692,2438,2439],{},[696,2440,2441],{},"Parameters:",[1851,2443,2444,2457],{},[1854,2445,2446],{},[1857,2447,2448,2451,2454],{},[1860,2449,2450],{},"Parameter",[1860,2452,2453],{},"Type",[1860,2455,2456],{},"Description",[1869,2458,2459,2474,2489,2504,2519,2534,2549],{},[1857,2460,2461,2466,2471],{},[1874,2462,2463],{},[700,2464,2465],{},"s",[1874,2467,2468],{},[700,2469,2470],{},"Styleframe",[1874,2472,2473],{},"The Styleframe instance",[1857,2475,2476,2481,2486],{},[1874,2477,2478],{},[700,2479,2480],{},"options",[1874,2482,2483],{},[700,2484,2485],{},"DeepPartial\u003CRecipeConfig>",[1874,2487,2488],{},"Optional overrides for the recipe configuration",[1857,2490,2491,2496,2501],{},[1874,2492,2493],{},[700,2494,2495],{},"options.base",[1874,2497,2498],{},[700,2499,2500],{},"VariantDeclarationsBlock",[1874,2502,2503],{},"Custom base styles for the field group",[1857,2505,2506,2511,2516],{},[1874,2507,2508],{},[700,2509,2510],{},"options.variants",[1874,2512,2513],{},[700,2514,2515],{},"Variants",[1874,2517,2518],{},"Custom variant definitions for the recipe",[1857,2520,2521,2526,2531],{},[1874,2522,2523],{},[700,2524,2525],{},"options.defaultVariants",[1874,2527,2528],{},[700,2529,2530],{},"Record\u003Ckeyof Variants, string>",[1874,2532,2533],{},"Default variant values for the recipe",[1857,2535,2536,2541,2546],{},[1874,2537,2538],{},[700,2539,2540],{},"options.compoundVariants",[1874,2542,2543],{},[700,2544,2545],{},"CompoundVariant[]",[1874,2547,2548],{},"Custom compound variant definitions for the recipe",[1857,2550,2551,2556,2561],{},[1874,2552,2553],{},[700,2554,2555],{},"options.filter",[1874,2557,2558],{},[700,2559,2560],{},"Record\u003Cstring, string[]>",[1874,2562,2563],{},"Limit which variant values are generated",[692,2565,2566],{},[696,2567,2568],{},"Variants:",[1851,2570,2571,2584],{},[1854,2572,2573],{},[1857,2574,2575,2578,2581],{},[1860,2576,2577],{},"Variant",[1860,2579,2580],{},"Options",[1860,2582,2583],{},"Default",[1869,2585,2586,2602],{},[1857,2587,2588,2592,2598],{},[1874,2589,2590],{},[700,2591,1825],{},[1874,2593,2594,2092,2596],{},[700,2595,1225],{},[700,2597,1842],{},[1874,2599,2600],{},[700,2601,1225],{},[1857,2603,2604,2608,2614],{},[1874,2605,2606],{},[700,2607,1904],{},[1874,2609,2610,2092,2612],{},[700,2611,1508],{},[700,2613,1518],{},[1874,2615,2616],{},[700,2617,1518],{},[692,2619,2620],{},[705,2621,2622],{"href":132},"Learn more about recipes →",[688,2624,2626],{"id":2625},"best-practices","Best Practices",[733,2628,2629,2638,2644,2650,2668],{},[736,2630,2631,2634,2635,2637],{},[696,2632,2633],{},"Render controls as direct children",": The border-collapsing selectors target the group's direct children by position. Don't wrap individual controls in extra elements, and don't hide children with ",[700,2636,1965],{}," — remove them from the DOM instead.",[736,2639,2640,2643],{},[696,2641,2642],{},"Keep a single size",": All controls in a group should use the same size for consistent alignment along the seam.",[736,2645,2646,2649],{},[696,2647,2648],{},"Use block mode for full-width forms",": Search bars and subscribe forms read best when the group fills its container and the input absorbs the free space.",[736,2651,2652,2655,2656,2659,2660,2663,2664,2667],{},[696,2653,2654],{},"Maintain a visual hierarchy",": Combine a ",[700,2657,2658],{},"primary"," action button with ",[700,2661,2662],{},"neutral","\u002F",[700,2665,2666],{},"outline"," controls so users can quickly identify the primary action.",[736,2669,2670,2673,2674,2676],{},[696,2671,2672],{},"Add an aria-label",": Always describe the group's purpose with ",[700,2675,1986],{}," so screen readers can communicate the relationship between controls.",[688,2678,2680],{"id":2679},"faq","FAQ",[2682,2683,2684,2690,2697,2709,2724],"accordion",{},[2685,2686,2689],"accordion-item",{"icon":2687,"label":2688},"i-lucide-circle-help","How does border collapsing work?","The Field Group recipe uses CSS selectors that target its direct children by position. In horizontal mode, each child except the last has its right border-radius and right border removed; each child except the first has its left border-radius removed. In vertical mode, the same logic applies to the bottom and top edges. This creates a seamless join between adjacent controls without any additional markup.",[2685,2691,2693,2694,2696],{"icon":2687,"label":2692},"Which controls can I put in a field group?","Any bordered control — buttons, inputs, selects, badges, and any custom control that carries a border and border-radius. The recipe targets children generically, so zeroing a border on a borderless element is simply a no-op. The only requirement is that controls are ",[1947,2695,1949],{}," children of the group.",[2685,2698,2700,2701,2704,2705,2708],{"icon":2687,"label":2699},"Why does my input grow but my button doesn't?","In a horizontal group, inputs, selects, and textareas are given ",[700,2702,2703],{},"flex-grow: 1"," so they absorb the free space — the natural behaviour for a ",[700,2706,2707],{},"[input][Search]"," search bar. Buttons and badges stay at their intrinsic width. If you want a button to stretch too, use the block variant, which equal-fills buttons.",[2685,2710,2712,2713,2716,2717,1925,2720,2723],{"icon":2687,"label":2711},"What's the difference between block and non-block mode?","In the default (non-block) mode, the group uses ",[700,2714,2715],{},"display: inline-flex"," and only takes up as much space as its children need. In block mode, the group switches to ",[700,2718,2719],{},"display: flex",[700,2721,2722],{},"width: 100%","; inputs absorb the free space and buttons are given equal flex sizing.",[2685,2725,2727,2728,2092,2731,2096,2734,2737,2738,1954,2741,2744,2745,2748],{"icon":2687,"label":2726},"How is this different from the old prepend\u002Fappend slots?","Earlier versions baked attached addons into the input and textarea recipes via ",[700,2729,2730],{},"useInputGroupRecipe",[700,2732,2733],{},"useInputPrependRecipe",[700,2735,2736],{},"useInputAppendRecipe",". The Field Group replaces all of them with one explicit, composable wrapper: drop your controls in as direct children and the seams merge automatically. Inline ",[700,2739,2740],{},"prefix",[700,2742,2743],{},"suffix"," addons that render ",[1947,2746,2747],{},"inside"," a field are unchanged.",[2750,2751,2752],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":790,"searchDepth":831,"depth":831,"links":2754},[2755,2756,2757,2758,2762,2763,2764,2765,2769,2772,2773],{"id":690,"depth":831,"text":78},{"id":727,"depth":831,"text":728},{"id":762,"depth":831,"text":763},{"id":1825,"depth":831,"text":1826,"children":2759},[2760,2761],{"id":1225,"depth":839,"text":1833},{"id":1842,"depth":839,"text":1843},{"id":1904,"depth":831,"text":1905},{"id":1931,"depth":831,"text":1932},{"id":1969,"depth":831,"text":568},{"id":2107,"depth":831,"text":2108,"children":2766},[2767,2768],{"id":2111,"depth":839,"text":2112},{"id":2267,"depth":839,"text":2268},{"id":2427,"depth":831,"text":73,"children":2770},[2771],{"id":2430,"depth":839,"text":2433},{"id":2625,"depth":831,"text":2626},{"id":2679,"depth":831,"text":2680},"A layout component for joining buttons, inputs, selects, and other bordered controls into a single unit with merged borders and shared orientation. Supports horizontal and vertical layouts plus full-width block mode through the recipe system.","md",null,{},{"icon":7},{"title":448,"description":2774},"QPLq0QeLmJuQ4MUHXCnwax2ANQtwPh3-RIOcvCt1shs",[2782,2784],{"title":444,"path":445,"stem":446,"description":2783,"icon":7,"children":-1},"A color selection control composed of a saturation\u002Fvalue selector square, a vertical hue track, and shared draggable thumbs. Renders any color through a CSS variable and gradients, with five sizes through the recipe system.",{"title":452,"path":453,"stem":454,"description":2785,"icon":7,"children":-1},"A text-field component with a wrapper-owned visual surface, inline prefix\u002Fsuffix addons, and invalid\u002Fdisabled\u002Freadonly states. Supports light, dark, and neutral colors, default\u002Fsoft\u002Fghost styles, and three sizes through the recipe system.",1781596339610]