[{"data":1,"prerenderedAt":2760},["ShallowReactive",2],{"navigation_docs":3,"-docs-components-composables-button-group":386,"-docs-components-composables-button-group-surround":2755},[4,45,134,150,165,239,269,342],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/docs/getting-started","docs/01.getting-started",[10,15,35,40],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/docs/getting-started/introduction","docs/01.getting-started/01.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"children":19,"icon":34},"Installation","/docs/getting-started/installation","docs/01.getting-started/02.installation/00.index",[20,22,26,30],{"title":21,"path":17,"stem":18},"Overview",{"title":23,"path":24,"stem":25},"Vite Installation","/docs/getting-started/installation/vite","docs/01.getting-started/02.installation/01.vite",{"title":27,"path":28,"stem":29},"Nuxt Installation","/docs/getting-started/installation/nuxt","docs/01.getting-started/02.installation/02.nuxt",{"title":31,"path":32,"stem":33},"Custom Installation","/docs/getting-started/installation/custom","docs/01.getting-started/02.installation/03.custom","i-lucide-download",{"title":36,"path":37,"stem":38,"icon":39},"Licensing","/docs/getting-started/licensing","docs/01.getting-started/03.licensing","i-lucide-scale",{"title":41,"path":42,"stem":43,"icon":44},"CLI Reference","/docs/getting-started/cli","docs/01.getting-started/04.cli","i-lucide-square-terminal",{"title":46,"path":47,"stem":48,"children":49,"icon":6},"API Essentials","/docs/api","docs/02.api/00.index",[50,52,57,62,67,72,77,82,87,92,97,102,117,122,127,132],{"title":21,"path":47,"stem":48,"icon":51},"i-lucide-book-text",{"title":53,"path":54,"stem":55,"icon":56},"Instance","/docs/api/instance","docs/02.api/01.instance","i-lucide-cloud-lightning",{"title":58,"path":59,"stem":60,"icon":61},"Variables","/docs/api/variables","docs/02.api/02.variables","i-lucide-variable",{"title":63,"path":64,"stem":65,"icon":66},"Selectors","/docs/api/selectors","docs/02.api/03.selectors","i-lucide-scan-text",{"title":68,"path":69,"stem":70,"icon":71},"At-Rules","/docs/api/at-rules","docs/02.api/04.at-rules","i-lucide-at-sign",{"title":73,"path":74,"stem":75,"icon":76},"Media Queries","/docs/api/media-queries","docs/02.api/05.media-queries","i-lucide-image-upscale",{"title":78,"path":79,"stem":80,"icon":81},"Keyframes","/docs/api/keyframes","docs/02.api/06.keyframes","i-lucide-square-play",{"title":83,"path":84,"stem":85,"icon":86},"Interpolation","/docs/api/interpolation","docs/02.api/07.interpolation","i-lucide-wrap-text",{"title":88,"path":89,"stem":90,"icon":91},"Utilities","/docs/api/utilities","docs/02.api/08.utilities","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Utility Modifiers","/docs/api/utility-modifiers","docs/02.api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":98,"path":99,"stem":100,"icon":101},"Themes","/docs/api/themes","docs/02.api/10.themes","i-lucide-paintbrush",{"title":103,"path":104,"stem":105,"children":106,"icon":116},"Recipes","/docs/api/recipes","docs/02.api/11.recipes/00.index",[107,108,112],{"title":21,"path":104,"stem":105},{"title":109,"path":110,"stem":111},"Runtime","/docs/api/recipes/runtime","docs/02.api/11.recipes/01.runtime",{"title":113,"path":114,"stem":115},"Output Format","/docs/api/recipes/output-format","docs/02.api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":118,"path":119,"stem":120,"icon":121},"Composables","/docs/api/composables","docs/02.api/12.composables","i-lucide-component",{"title":123,"path":124,"stem":125,"icon":126},"Imports","/docs/api/imports","docs/02.api/13.imports","i-lucide-file-input",{"title":128,"path":129,"stem":130,"icon":131},"Merging","/docs/api/merging","docs/02.api/13.merging","i-lucide-squares-intersect",{"title":123,"path":124,"stem":133,"icon":126},"docs/02.api/14.imports",{"title":135,"path":136,"stem":137,"children":138,"icon":6},"Tooling","/docs/tooling","docs/03.tooling/00.index",[139,140,145],{"title":21,"path":136,"stem":137,"icon":51},{"title":141,"path":142,"stem":143,"icon":144},"Utility Scanner","/docs/tooling/scanner","docs/03.tooling/01.scanner","i-lucide-view",{"title":146,"path":147,"stem":148,"icon":149},"Figma Plugin","/docs/tooling/figma-plugin","docs/03.tooling/02.figma-plugin","i-simple-icons-figma",{"title":151,"icon":6,"path":152,"stem":153,"children":154,"page":6},"Resources","/docs/resources","docs/04.resources",[155,160],{"title":156,"path":157,"stem":158,"icon":159},"Guides","/docs/resources/guides","docs/04.resources/01.guides","i-lucide-book-open",{"title":161,"path":162,"stem":163,"icon":164},"Comparisons","/docs/resources/comparisons","docs/04.resources/02.comparisons","i-lucide-file-diff",{"title":166,"path":167,"stem":168,"children":169,"icon":6},"Design Tokens","/docs/design-tokens","docs/05.design-tokens/00.index",[170,171,176],{"title":21,"path":167,"stem":168,"icon":51},{"title":172,"path":173,"stem":174,"icon":175},"Presets","/docs/design-tokens/presets","docs/05.design-tokens/01.presets","i-lucide-package",{"title":118,"icon":61,"defaultOpen":177,"path":178,"stem":179,"children":180,"page":6},true,"/docs/design-tokens/composables","docs/05.design-tokens/02.composables",[181,185,189,193,197,201,205,209,223,227,231,235],{"title":182,"path":183,"stem":184,"icon":6},"Border Radiuses","/docs/design-tokens/composables/border-radiuses","docs/05.design-tokens/02.composables/00.border-radiuses",{"title":186,"path":187,"stem":188,"icon":6},"Borders","/docs/design-tokens/composables/borders","docs/05.design-tokens/02.composables/01.borders",{"title":190,"path":191,"stem":192,"icon":6},"Box Shadows","/docs/design-tokens/composables/box-shadows","docs/05.design-tokens/02.composables/02.box-shadows",{"title":194,"path":195,"stem":196,"icon":6},"Breakpoints","/docs/design-tokens/composables/breakpoints","docs/05.design-tokens/02.composables/03.breakpoints",{"title":198,"path":199,"stem":200,"icon":6},"Colors","/docs/design-tokens/composables/colors","docs/05.design-tokens/02.composables/04.colors",{"title":202,"path":203,"stem":204,"icon":6},"Duration","/docs/design-tokens/composables/duration","docs/05.design-tokens/02.composables/05.duration",{"title":206,"path":207,"stem":208,"icon":6},"Easing","/docs/design-tokens/composables/easing","docs/05.design-tokens/02.composables/06.easing",{"title":210,"path":211,"stem":212,"children":213,"icon":6,"pro":177,"defaultOpen":6},"Fluid Design","/docs/design-tokens/composables/fluid-design","docs/05.design-tokens/02.composables/07.fluid-design/01.index",[214,215,219],{"title":21,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","/docs/design-tokens/composables/fluid-design/viewport","docs/05.design-tokens/02.composables/07.fluid-design/02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","/docs/design-tokens/composables/fluid-design/typography","docs/05.design-tokens/02.composables/07.fluid-design/03.typography",{"title":224,"path":225,"stem":226,"icon":6},"Scales","/docs/design-tokens/composables/scales","docs/05.design-tokens/02.composables/08.scales",{"title":228,"path":229,"stem":230,"icon":6},"Spacing","/docs/design-tokens/composables/spacing","docs/05.design-tokens/02.composables/09.spacing",{"title":232,"path":233,"stem":234,"icon":6},"Typography","/docs/design-tokens/composables/typography","docs/05.design-tokens/02.composables/10.typography",{"title":236,"path":237,"stem":238,"icon":6,"children":-1},"Z-Index","/docs/design-tokens/composables/z-index","docs/05.design-tokens/02.composables/11.z-index",{"title":240,"path":241,"stem":242,"children":243,"icon":6},"Components","/docs/components","docs/06.components/00.index",[244,245],{"title":21,"path":241,"stem":242,"icon":51},{"title":118,"icon":116,"defaultOpen":177,"path":246,"stem":247,"children":248,"page":6},"/docs/components/composables","docs/06.components/02.composables",[249,253,257,261,265],{"title":250,"path":251,"stem":252},"Badge","/docs/components/composables/badge","docs/06.components/02.composables/01.badge",{"title":254,"path":255,"stem":256},"Button","/docs/components/composables/button","docs/06.components/02.composables/02.button",{"title":258,"path":259,"stem":260},"Button Group","/docs/components/composables/button-group","docs/06.components/02.composables/03.button-group",{"title":262,"path":263,"stem":264},"Callout","/docs/components/composables/callout","docs/06.components/02.composables/04.callout",{"title":266,"path":267,"stem":268},"Card","/docs/components/composables/card","docs/06.components/02.composables/05.card",{"title":88,"path":270,"stem":271,"children":272,"icon":6},"/docs/utilities","docs/07.utilities/00.index",[273,274,277],{"title":21,"path":270,"stem":271,"icon":51},{"title":172,"path":275,"stem":276,"icon":175},"/docs/utilities/presets","docs/07.utilities/01.presets",{"title":118,"icon":91,"defaultOpen":177,"path":278,"stem":279,"children":280,"page":6},"/docs/utilities/composables","docs/07.utilities/02.composables",[281,285,289,293,296,300,304,308,312,316,320,323,327,331,335,339],{"title":282,"path":283,"stem":284,"icon":6},"Accessibility","/docs/utilities/composables/accessibility","docs/07.utilities/02.composables/00.accessibility",{"title":286,"path":287,"stem":288,"icon":6},"Animations","/docs/utilities/composables/animations","docs/07.utilities/02.composables/01.animations",{"title":290,"path":291,"stem":292,"icon":6},"Backgrounds","/docs/utilities/composables/backgrounds","docs/07.utilities/02.composables/02.backgrounds",{"title":186,"path":294,"stem":295,"icon":6},"/docs/utilities/composables/borders","docs/07.utilities/02.composables/03.borders",{"title":297,"path":298,"stem":299,"icon":6},"Effects","/docs/utilities/composables/effects","docs/07.utilities/02.composables/04.effects",{"title":301,"path":302,"stem":303,"icon":6},"Filters","/docs/utilities/composables/filters","docs/07.utilities/02.composables/05.filters",{"title":305,"path":306,"stem":307,"icon":6},"Flexbox & Grid","/docs/utilities/composables/flexbox-grid","docs/07.utilities/02.composables/06.flexbox-grid",{"title":309,"path":310,"stem":311,"icon":6},"Interactivity","/docs/utilities/composables/interactivity","docs/07.utilities/02.composables/07.interactivity",{"title":313,"path":314,"stem":315,"icon":6},"Layout","/docs/utilities/composables/layout","docs/07.utilities/02.composables/08.layout",{"title":317,"path":318,"stem":319,"icon":6},"Sizing","/docs/utilities/composables/sizing","docs/07.utilities/02.composables/09.sizing",{"title":228,"path":321,"stem":322,"icon":6},"/docs/utilities/composables/spacing","docs/07.utilities/02.composables/10.spacing",{"title":324,"path":325,"stem":326,"icon":6},"SVG","/docs/utilities/composables/svg","docs/07.utilities/02.composables/11.svg",{"title":328,"path":329,"stem":330,"icon":6},"Tables","/docs/utilities/composables/tables","docs/07.utilities/02.composables/12.tables",{"title":332,"path":333,"stem":334,"icon":6},"Transforms","/docs/utilities/composables/transforms","docs/07.utilities/02.composables/13.transforms",{"title":336,"path":337,"stem":338,"icon":6},"Transitions","/docs/utilities/composables/transitions","docs/07.utilities/02.composables/14.transitions",{"title":232,"path":340,"stem":341,"icon":6},"/docs/utilities/composables/typography","docs/07.utilities/02.composables/15.typography",{"title":93,"path":343,"stem":344,"children":345,"icon":6},"/docs/modifiers","docs/08.modifiers/00.index",[346,347,350],{"title":21,"path":343,"stem":344,"icon":51},{"title":172,"path":348,"stem":349,"icon":175},"/docs/modifiers/presets","docs/08.modifiers/01.presets",{"title":118,"icon":96,"defaultOpen":177,"path":351,"stem":352,"children":353,"page":6},"/docs/modifiers/composables","docs/08.modifiers/02.composables",[354,358,362,366,370,374,378,382],{"title":355,"path":356,"stem":357,"icon":6},"ARIA State","/docs/modifiers/composables/aria-state","docs/08.modifiers/02.composables/00.aria-state",{"title":359,"path":360,"stem":361,"icon":6},"Directional","/docs/modifiers/composables/directional","docs/08.modifiers/02.composables/01.directional",{"title":363,"path":364,"stem":365,"icon":6},"Form State","/docs/modifiers/composables/form-state","docs/08.modifiers/02.composables/02.form-state",{"title":367,"path":368,"stem":369,"icon":6},"Media & Preferences","/docs/modifiers/composables/media-preferences","docs/08.modifiers/02.composables/03.media-preferences",{"title":371,"path":372,"stem":373,"icon":6},"Other State","/docs/modifiers/composables/other-state","docs/08.modifiers/02.composables/04.other-state",{"title":375,"path":376,"stem":377,"icon":6},"Pseudo-Elements","/docs/modifiers/composables/pseudo-elements","docs/08.modifiers/02.composables/05.pseudo-elements",{"title":379,"path":380,"stem":381,"icon":6},"Pseudo-State","/docs/modifiers/composables/pseudo-state","docs/08.modifiers/02.composables/06.pseudo-state",{"title":383,"path":384,"stem":385,"icon":6},"Structural","/docs/modifiers/composables/structural","docs/08.modifiers/02.composables/07.structural",{"id":387,"title":258,"body":388,"description":2749,"extension":1754,"links":2750,"meta":2751,"navigation":177,"path":259,"seo":2752,"sitemap":2753,"stem":260,"__hash__":2754},"docs/docs/06.components/02.composables/03.button-group.md",{"type":389,"value":390,"toc":2714},"minimark",[391,395,413,420,424,427,455,459,1399,1402,1405,1409,1412,1415,1418,1421,1424,1428,1432,1484,1487,1494,1497,1500,1513,1516,1524,1527,1531,1534,1608,1612,1627,1631,1634,1637,1640,1643,1646,1650,1653,1656,1659,1662,1665,1669,1672,1675,1679,1682,1685,1689,1696,1699,1703,1706,1787,1790,1808,2057,2073,2077,2081,2086,2233,2237,2244,2387,2394,2398,2404,2407,2412,2533,2538,2587,2592,2596,2644,2648,2710],[392,393,21],"h2",{"id":394},"overview",[396,397,398,399,402,403,407,408,412],"p",{},"The ",[400,401,258],"strong",{}," is a layout component that visually connects related buttons into a single, cohesive unit. The ",[404,405,406],"code",{},"useButtonGroupRecipe()"," composable creates a fully configured ",[409,410,411],"a",{"href":104},"recipe"," with orientation and block mode options — plus automatic border-radius collapsing so adjacent buttons share a seamless edge.",[396,414,415,416,419],{},"The Button Group recipe integrates directly with the ",[409,417,418],{"href":255},"Button recipe"," and generates type-safe utility classes at build time with zero runtime CSS.",[392,421,423],{"id":422},"why-use-the-button-group-recipe","Why use the Button Group recipe?",[396,425,426],{},"The Button Group recipe helps you:",[428,429,430,437,443,449],"ul",{},[431,432,433,436],"li",{},[400,434,435],{},"Join buttons seamlessly",": Adjacent buttons automatically collapse their border-radius and borders at shared edges, creating a clean, unified control.",[431,438,439,442],{},[400,440,441],{},"Support both orientations",": Switch between horizontal and vertical layouts with a single variant prop — border collapsing adjusts automatically.",[431,444,445,448],{},[400,446,447],{},"Fill available space",": The block variant stretches the group to full width and distributes buttons equally, perfect for mobile layouts and form actions.",[431,450,451,454],{},[400,452,453],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid orientation or block values at compile time.",[392,456,458],{"id":457},"usage","Usage",[460,461,463,468,475,743,747,754,1391,1395],"steps",{"level":462},"4",[464,465,467],"h4",{"id":466},"register-the-recipe","Register the recipe",[396,469,470,471,474],{},"Add the Button Group recipe to a local Styleframe instance. The global ",[404,472,473],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[476,477,479,637],"code-tree",{"default-value":478},"src/components/button-group.styleframe.ts",[480,481,486],"pre",{"className":482,"code":483,"filename":478,"language":484,"meta":485,"style":485},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useButtonRecipe, useButtonGroupRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst button = useButtonRecipe(s);\nconst buttonGroup = useButtonGroupRecipe(s);\n\nexport default s;\n","ts","",[404,487,488,524,553,559,580,585,602,618,623],{"__ignoreMap":485},[489,490,493,497,501,505,508,511,514,518,521],"span",{"class":491,"line":492},"line",1,[489,494,496],{"class":495},"s7zQu","import",[489,498,500],{"class":499},"sMK4o"," {",[489,502,504],{"class":503},"sTEyZ"," styleframe",[489,506,507],{"class":499}," }",[489,509,510],{"class":495}," from",[489,512,513],{"class":499}," '",[489,515,517],{"class":516},"sfazB","virtual:styleframe",[489,519,520],{"class":499},"'",[489,522,523],{"class":499},";\n",[489,525,527,529,531,534,537,540,542,544,546,549,551],{"class":491,"line":526},2,[489,528,496],{"class":495},[489,530,500],{"class":499},[489,532,533],{"class":503}," useButtonRecipe",[489,535,536],{"class":499},",",[489,538,539],{"class":503}," useButtonGroupRecipe",[489,541,507],{"class":499},[489,543,510],{"class":495},[489,545,513],{"class":499},[489,547,548],{"class":516},"@styleframe/theme",[489,550,520],{"class":499},[489,552,523],{"class":499},[489,554,556],{"class":491,"line":555},3,[489,557,558],{"emptyLinePlaceholder":177},"\n",[489,560,562,566,569,572,575,578],{"class":491,"line":561},4,[489,563,565],{"class":564},"spNyl","const",[489,567,568],{"class":503}," s ",[489,570,571],{"class":499},"=",[489,573,504],{"class":574},"s2Zo4",[489,576,577],{"class":503},"()",[489,579,523],{"class":499},[489,581,583],{"class":491,"line":582},5,[489,584,558],{"emptyLinePlaceholder":177},[489,586,588,590,593,595,597,600],{"class":491,"line":587},6,[489,589,565],{"class":564},[489,591,592],{"class":503}," button ",[489,594,571],{"class":499},[489,596,533],{"class":574},[489,598,599],{"class":503},"(s)",[489,601,523],{"class":499},[489,603,605,607,610,612,614,616],{"class":491,"line":604},7,[489,606,565],{"class":564},[489,608,609],{"class":503}," buttonGroup ",[489,611,571],{"class":499},[489,613,539],{"class":574},[489,615,599],{"class":503},[489,617,523],{"class":499},[489,619,621],{"class":491,"line":620},8,[489,622,558],{"emptyLinePlaceholder":177},[489,624,626,629,632,635],{"class":491,"line":625},9,[489,627,628],{"class":495},"export",[489,630,631],{"class":495}," default",[489,633,634],{"class":503}," s",[489,636,523],{"class":499},[480,638,640],{"className":482,"code":639,"filename":473,"language":484,"meta":485,"style":485},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[404,641,642,663,689,693,707,711,720,729,733],{"__ignoreMap":485},[489,643,644,646,648,650,652,654,656,659,661],{"class":491,"line":492},[489,645,496],{"class":495},[489,647,500],{"class":499},[489,649,504],{"class":503},[489,651,507],{"class":499},[489,653,510],{"class":495},[489,655,513],{"class":499},[489,657,658],{"class":516},"styleframe",[489,660,520],{"class":499},[489,662,523],{"class":499},[489,664,665,667,669,672,674,677,679,681,683,685,687],{"class":491,"line":526},[489,666,496],{"class":495},[489,668,500],{"class":499},[489,670,671],{"class":503}," useDesignTokensPreset",[489,673,536],{"class":499},[489,675,676],{"class":503}," useUtilitiesPreset",[489,678,507],{"class":499},[489,680,510],{"class":495},[489,682,513],{"class":499},[489,684,548],{"class":516},[489,686,520],{"class":499},[489,688,523],{"class":499},[489,690,691],{"class":491,"line":555},[489,692,558],{"emptyLinePlaceholder":177},[489,694,695,697,699,701,703,705],{"class":491,"line":561},[489,696,565],{"class":564},[489,698,568],{"class":503},[489,700,571],{"class":499},[489,702,504],{"class":574},[489,704,577],{"class":503},[489,706,523],{"class":499},[489,708,709],{"class":491,"line":582},[489,710,558],{"emptyLinePlaceholder":177},[489,712,713,716,718],{"class":491,"line":587},[489,714,715],{"class":574},"useDesignTokensPreset",[489,717,599],{"class":503},[489,719,523],{"class":499},[489,721,722,725,727],{"class":491,"line":604},[489,723,724],{"class":574},"useUtilitiesPreset",[489,726,599],{"class":503},[489,728,523],{"class":499},[489,730,731],{"class":491,"line":620},[489,732,558],{"emptyLinePlaceholder":177},[489,734,735,737,739,741],{"class":491,"line":625},[489,736,628],{"class":495},[489,738,631],{"class":495},[489,740,634],{"class":503},[489,742,523],{"class":499},[464,744,746],{"id":745},"build-the-component","Build the component",[396,748,749,750,753],{},"Import the ",[404,751,752],{},"buttonGroup"," runtime function from the virtual module and pass variant props to compute class names:",[755,756,757,1080],"tabs",{},[758,759,762],"tabs-item",{"icon":760,"label":761},"i-devicon-react","React",[480,763,766],{"className":482,"code":764,"filename":765,"language":484,"meta":485,"style":485},"import { buttonGroup } from \"virtual:styleframe\";\n\ninterface ButtonGroupProps {\n    orientation?: \"horizontal\" | \"vertical\";\n    block?: boolean;\n    children?: React.ReactNode;\n}\n\nexport function ButtonGroup({\n    orientation = \"horizontal\",\n    block = false,\n    children,\n}: ButtonGroupProps) {\n    const classes = buttonGroup({ orientation, block: block ? \"true\" : \"false\" });\n\n    return (\n        \u003Cdiv className={classes} role=\"group\">\n            {children}\n        \u003C/div>\n    );\n}\n","src/components/ButtonGroup.tsx",[404,767,768,791,795,807,835,847,865,870,874,887,905,918,925,938,996,1001,1010,1046,1057,1067,1075],{"__ignoreMap":485},[489,769,770,772,774,777,779,781,784,786,789],{"class":491,"line":492},[489,771,496],{"class":495},[489,773,500],{"class":499},[489,775,776],{"class":503}," buttonGroup",[489,778,507],{"class":499},[489,780,510],{"class":495},[489,782,783],{"class":499}," \"",[489,785,517],{"class":516},[489,787,788],{"class":499},"\"",[489,790,523],{"class":499},[489,792,793],{"class":491,"line":526},[489,794,558],{"emptyLinePlaceholder":177},[489,796,797,800,804],{"class":491,"line":555},[489,798,799],{"class":564},"interface",[489,801,803],{"class":802},"sBMFI"," ButtonGroupProps",[489,805,806],{"class":499}," {\n",[489,808,809,813,816,818,821,823,826,828,831,833],{"class":491,"line":561},[489,810,812],{"class":811},"swJcz","    orientation",[489,814,815],{"class":499},"?:",[489,817,783],{"class":499},[489,819,820],{"class":516},"horizontal",[489,822,788],{"class":499},[489,824,825],{"class":499}," |",[489,827,783],{"class":499},[489,829,830],{"class":516},"vertical",[489,832,788],{"class":499},[489,834,523],{"class":499},[489,836,837,840,842,845],{"class":491,"line":582},[489,838,839],{"class":811},"    block",[489,841,815],{"class":499},[489,843,844],{"class":802}," boolean",[489,846,523],{"class":499},[489,848,849,852,854,857,860,863],{"class":491,"line":587},[489,850,851],{"class":811},"    children",[489,853,815],{"class":499},[489,855,856],{"class":802}," React",[489,858,859],{"class":499},".",[489,861,862],{"class":802},"ReactNode",[489,864,523],{"class":499},[489,866,867],{"class":491,"line":604},[489,868,869],{"class":499},"}\n",[489,871,872],{"class":491,"line":620},[489,873,558],{"emptyLinePlaceholder":177},[489,875,876,878,881,884],{"class":491,"line":625},[489,877,628],{"class":495},[489,879,880],{"class":564}," function",[489,882,883],{"class":574}," ButtonGroup",[489,885,886],{"class":499},"({\n",[489,888,890,893,896,898,900,902],{"class":491,"line":889},10,[489,891,812],{"class":892},"sHdIc",[489,894,895],{"class":499}," =",[489,897,783],{"class":499},[489,899,820],{"class":516},[489,901,788],{"class":499},[489,903,904],{"class":499},",\n",[489,906,908,910,912,916],{"class":491,"line":907},11,[489,909,839],{"class":892},[489,911,895],{"class":499},[489,913,915],{"class":914},"sfNiH"," false",[489,917,904],{"class":499},[489,919,921,923],{"class":491,"line":920},12,[489,922,851],{"class":892},[489,924,904],{"class":499},[489,926,928,931,933,936],{"class":491,"line":927},13,[489,929,930],{"class":499},"}:",[489,932,803],{"class":802},[489,934,935],{"class":499},")",[489,937,806],{"class":499},[489,939,941,944,947,949,951,954,957,960,962,965,968,970,973,975,978,980,983,985,988,990,992,994],{"class":491,"line":940},14,[489,942,943],{"class":564},"    const",[489,945,946],{"class":503}," classes",[489,948,895],{"class":499},[489,950,776],{"class":574},[489,952,953],{"class":811},"(",[489,955,956],{"class":499},"{",[489,958,959],{"class":503}," orientation",[489,961,536],{"class":499},[489,963,964],{"class":811}," block",[489,966,967],{"class":499},":",[489,969,964],{"class":503},[489,971,972],{"class":499}," ?",[489,974,783],{"class":499},[489,976,977],{"class":516},"true",[489,979,788],{"class":499},[489,981,982],{"class":499}," :",[489,984,783],{"class":499},[489,986,987],{"class":516},"false",[489,989,788],{"class":499},[489,991,507],{"class":499},[489,993,935],{"class":811},[489,995,523],{"class":499},[489,997,999],{"class":491,"line":998},15,[489,1000,558],{"emptyLinePlaceholder":177},[489,1002,1004,1007],{"class":491,"line":1003},16,[489,1005,1006],{"class":495},"    return",[489,1008,1009],{"class":811}," (\n",[489,1011,1013,1016,1019,1022,1025,1028,1031,1034,1036,1038,1041,1043],{"class":491,"line":1012},17,[489,1014,1015],{"class":499},"        \u003C",[489,1017,1018],{"class":503},"div",[489,1020,1021],{"class":503}," className",[489,1023,1024],{"class":499},"={",[489,1026,1027],{"class":503},"classes",[489,1029,1030],{"class":499},"}",[489,1032,1033],{"class":503}," role",[489,1035,571],{"class":499},[489,1037,788],{"class":499},[489,1039,1040],{"class":516},"group",[489,1042,788],{"class":499},[489,1044,1045],{"class":499},">\n",[489,1047,1049,1052,1055],{"class":491,"line":1048},18,[489,1050,1051],{"class":499},"            {",[489,1053,1054],{"class":892},"children",[489,1056,869],{"class":499},[489,1058,1060,1063,1065],{"class":491,"line":1059},19,[489,1061,1062],{"class":499},"        \u003C/",[489,1064,1018],{"class":503},[489,1066,1045],{"class":499},[489,1068,1070,1073],{"class":491,"line":1069},20,[489,1071,1072],{"class":811},"    )",[489,1074,523],{"class":499},[489,1076,1078],{"class":491,"line":1077},21,[489,1079,869],{"class":499},[758,1081,1084],{"icon":1082,"label":1083},"i-devicon-vuejs","Vue",[480,1085,1090],{"className":1086,"code":1087,"filename":1088,"language":1089,"meta":485,"style":485},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { buttonGroup } from \"virtual:styleframe\";\n\nconst props = withDefaults(\n    defineProps\u003C{\n        orientation?: \"horizontal\" | \"vertical\";\n        block?: boolean;\n    }>(),\n    {\n        orientation: \"horizontal\",\n        block: false,\n    },\n);\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv\n        :class=\"buttonGroup({ orientation: props.orientation, block: props.block ? 'true' : 'false' })\"\n        role=\"group\"\n    >\n        \u003Cslot />\n    \u003C/div>\n\u003C/template>\n","src/components/ButtonGroup.vue","vue",[404,1091,1092,1116,1136,1140,1155,1163,1186,1197,1206,1211,1225,1235,1240,1246,1255,1259,1268,1276,1344,1357,1362,1372,1382],{"__ignoreMap":485},[489,1093,1094,1097,1100,1103,1106,1108,1110,1112,1114],{"class":491,"line":492},[489,1095,1096],{"class":499},"\u003C",[489,1098,1099],{"class":811},"script",[489,1101,1102],{"class":564}," setup",[489,1104,1105],{"class":564}," lang",[489,1107,571],{"class":499},[489,1109,788],{"class":499},[489,1111,484],{"class":516},[489,1113,788],{"class":499},[489,1115,1045],{"class":499},[489,1117,1118,1120,1122,1124,1126,1128,1130,1132,1134],{"class":491,"line":526},[489,1119,496],{"class":495},[489,1121,500],{"class":499},[489,1123,776],{"class":503},[489,1125,507],{"class":499},[489,1127,510],{"class":495},[489,1129,783],{"class":499},[489,1131,517],{"class":516},[489,1133,788],{"class":499},[489,1135,523],{"class":499},[489,1137,1138],{"class":491,"line":555},[489,1139,558],{"emptyLinePlaceholder":177},[489,1141,1142,1144,1147,1149,1152],{"class":491,"line":561},[489,1143,565],{"class":564},[489,1145,1146],{"class":503}," props ",[489,1148,571],{"class":499},[489,1150,1151],{"class":574}," withDefaults",[489,1153,1154],{"class":503},"(\n",[489,1156,1157,1160],{"class":491,"line":582},[489,1158,1159],{"class":574},"    defineProps",[489,1161,1162],{"class":499},"\u003C{\n",[489,1164,1165,1168,1170,1172,1174,1176,1178,1180,1182,1184],{"class":491,"line":587},[489,1166,1167],{"class":811},"        orientation",[489,1169,815],{"class":499},[489,1171,783],{"class":499},[489,1173,820],{"class":516},[489,1175,788],{"class":499},[489,1177,825],{"class":499},[489,1179,783],{"class":499},[489,1181,830],{"class":516},[489,1183,788],{"class":499},[489,1185,523],{"class":499},[489,1187,1188,1191,1193,1195],{"class":491,"line":604},[489,1189,1190],{"class":811},"        block",[489,1192,815],{"class":499},[489,1194,844],{"class":802},[489,1196,523],{"class":499},[489,1198,1199,1202,1204],{"class":491,"line":620},[489,1200,1201],{"class":499},"    }>",[489,1203,577],{"class":503},[489,1205,904],{"class":499},[489,1207,1208],{"class":491,"line":625},[489,1209,1210],{"class":499},"    {\n",[489,1212,1213,1215,1217,1219,1221,1223],{"class":491,"line":889},[489,1214,1167],{"class":811},[489,1216,967],{"class":499},[489,1218,783],{"class":499},[489,1220,820],{"class":516},[489,1222,788],{"class":499},[489,1224,904],{"class":499},[489,1226,1227,1229,1231,1233],{"class":491,"line":907},[489,1228,1190],{"class":811},[489,1230,967],{"class":499},[489,1232,915],{"class":914},[489,1234,904],{"class":499},[489,1236,1237],{"class":491,"line":920},[489,1238,1239],{"class":499},"    },\n",[489,1241,1242,1244],{"class":491,"line":927},[489,1243,935],{"class":503},[489,1245,523],{"class":499},[489,1247,1248,1251,1253],{"class":491,"line":940},[489,1249,1250],{"class":499},"\u003C/",[489,1252,1099],{"class":811},[489,1254,1045],{"class":499},[489,1256,1257],{"class":491,"line":998},[489,1258,558],{"emptyLinePlaceholder":177},[489,1260,1261,1263,1266],{"class":491,"line":1003},[489,1262,1096],{"class":499},[489,1264,1265],{"class":811},"template",[489,1267,1045],{"class":499},[489,1269,1270,1273],{"class":491,"line":1012},[489,1271,1272],{"class":499},"    \u003C",[489,1274,1275],{"class":811},"div\n",[489,1277,1278,1281,1284,1286,1288,1290,1293,1296,1299,1302,1304,1306,1309,1312,1314,1316,1318,1320,1323,1325,1327,1329,1332,1334,1336,1338,1341],{"class":491,"line":1048},[489,1279,1280],{"class":499},"        :",[489,1282,1283],{"class":564},"class",[489,1285,571],{"class":499},[489,1287,788],{"class":499},[489,1289,752],{"class":574},[489,1291,1292],{"class":499},"({ ",[489,1294,1295],{"class":811},"orientation",[489,1297,1298],{"class":499},": ",[489,1300,1301],{"class":503},"props",[489,1303,859],{"class":499},[489,1305,1295],{"class":503},[489,1307,1308],{"class":499},", ",[489,1310,1311],{"class":811},"block",[489,1313,1298],{"class":499},[489,1315,1301],{"class":503},[489,1317,859],{"class":499},[489,1319,1311],{"class":503},[489,1321,1322],{"class":499}," ? ",[489,1324,520],{"class":499},[489,1326,977],{"class":516},[489,1328,520],{"class":499},[489,1330,1331],{"class":499}," : ",[489,1333,520],{"class":499},[489,1335,987],{"class":516},[489,1337,520],{"class":499},[489,1339,1340],{"class":499}," })",[489,1342,1343],{"class":499},"\"\n",[489,1345,1346,1349,1351,1353,1355],{"class":491,"line":1059},[489,1347,1348],{"class":564},"        role",[489,1350,571],{"class":499},[489,1352,788],{"class":499},[489,1354,1040],{"class":516},[489,1356,1343],{"class":499},[489,1358,1359],{"class":491,"line":1069},[489,1360,1361],{"class":499},"    >\n",[489,1363,1364,1366,1369],{"class":491,"line":1077},[489,1365,1015],{"class":499},[489,1367,1368],{"class":811},"slot",[489,1370,1371],{"class":499}," />\n",[489,1373,1375,1378,1380],{"class":491,"line":1374},22,[489,1376,1377],{"class":499},"    \u003C/",[489,1379,1018],{"class":811},[489,1381,1045],{"class":499},[489,1383,1385,1387,1389],{"class":491,"line":1384},23,[489,1386,1250],{"class":499},[489,1388,1265],{"class":811},[489,1390,1045],{"class":499},[464,1392,1394],{"id":1393},"see-it-in-action","See it in action",[1396,1397],"story-preview",{"story":1398,":panel":977},"theme-recipes-button-group--default",[392,1400,1401],{"id":1295},"Orientation",[396,1403,1404],{},"The Button Group supports two orientation variants that control the layout direction and which edges have their borders collapsed.",[1406,1407,1408],"h3",{"id":820},"Horizontal",[396,1410,1411],{},"The default orientation. Buttons are laid out side-by-side in a row. Border-radius is removed from the right edge of each button except the last, and from the left edge of each button except the first. The right border is removed from each button except the last to prevent doubled borders.",[1396,1413],{"story":1414,":panel":977},"theme-recipes-button-group--horizontal",[1406,1416,1417],{"id":830},"Vertical",[396,1419,1420],{},"Buttons are stacked top-to-bottom in a column. Border-radius is removed from the bottom edge of each button except the last, and from the top edge of each button except the first. The bottom border is removed from each button except the last to prevent doubled borders.",[1396,1422],{"story":1423,":panel":977},"theme-recipes-button-group--vertical",[1406,1425,1427],{"id":1426},"orientation-reference","Orientation Reference",[1396,1429],{"story":1430,":height":1431},"theme-recipes-button-group--all-orientations","600",[1433,1434,1435,1450],"table",{},[1436,1437,1438],"thead",{},[1439,1440,1441,1444,1447],"tr",{},[1442,1443,1401],"th",{},[1442,1445,1446],{},"Direction",[1442,1448,1449],{},"Border Collapsing",[1451,1452,1453,1469],"tbody",{},[1439,1454,1455,1460,1466],{},[1456,1457,1458],"td",{},[404,1459,820],{},[1456,1461,1462,1463,935],{},"Left to right (",[404,1464,1465],{},"row",[1456,1467,1468],{},"Right border + right/left radius removed at joins",[1439,1470,1471,1475,1481],{},[1456,1472,1473],{},[404,1474,830],{},[1456,1476,1477,1478,935],{},"Top to bottom (",[404,1479,1480],{},"column",[1456,1482,1483],{},"Bottom border + bottom/top radius removed at joins",[392,1485,1486],{"id":1311},"Block",[396,1488,1489,1490,1493],{},"The block variant stretches the button group to fill the full width of its container. Each child button is given equal flex sizing (",[404,1491,1492],{},"flex-basis: 0; flex-grow: 1","), distributing the available space evenly.",[1396,1495],{"story":1496,":panel":977},"theme-recipes-button-group--block",[1396,1498],{"story":1499,":panel":977},"theme-recipes-button-group--block-vertical",[1501,1502,1503,1506,1507,1509,1510,1512],"tip",{},[400,1504,1505],{},"Pro tip:"," The block variant works with both orientations. Combine ",[404,1508,1311],{}," with ",[404,1511,830],{}," for a full-width stacked layout, such as a mobile action menu.",[392,1514,198],{"id":1515},"colors",[396,1517,1518,1519,1523],{},"The Button Group works with all ",[409,1520,1522],{"href":1521},"/docs/components/composables/button#colors","Button color variants",". Each button within the group retains its own color styling while the group handles layout and border collapsing.",[1396,1525],{"story":1526,":panel":977},"theme-recipes-button-group--primary",[1406,1528,1530],{"id":1529},"color-reference","Color Reference",[1396,1532],{"story":1533,":height":1431},"theme-recipes-button-group--all-variants",[1433,1535,1536,1546],{},[1436,1537,1538],{},[1439,1539,1540,1543],{},[1442,1541,1542],{},"Color",[1442,1544,1545],{},"Use Case",[1451,1547,1548,1558,1568,1578,1588,1598],{},[1439,1549,1550,1555],{},[1456,1551,1552],{},[404,1553,1554],{},"primary",[1456,1556,1557],{},"Default actions, key information",[1439,1559,1560,1565],{},[1456,1561,1562],{},[404,1563,1564],{},"secondary",[1456,1566,1567],{},"Secondary actions, neutral states",[1439,1569,1570,1575],{},[1456,1571,1572],{},[404,1573,1574],{},"success",[1456,1576,1577],{},"Positive actions, confirmations",[1439,1579,1580,1585],{},[1456,1581,1582],{},[404,1583,1584],{},"info",[1456,1586,1587],{},"Informational actions, tips",[1439,1589,1590,1595],{},[1456,1591,1592],{},[404,1593,1594],{},"warning",[1456,1596,1597],{},"Caution actions, pending states",[1439,1599,1600,1605],{},[1456,1601,1602],{},[404,1603,1604],{},"error",[1456,1606,1607],{},"Destructive actions, error states",[392,1609,1611],{"id":1610},"variants","Variants",[396,1613,1614,1615,1619,1620,1623,1624,859],{},"The Button Group showcases how each ",[409,1616,1618],{"href":1617},"/docs/components/composables/button#variants","Button visual style"," looks when buttons are joined together. Border collapsing is most visible with variants that have explicit borders, like ",[404,1621,1622],{},"outline"," and ",[404,1625,1626],{},"subtle",[1406,1628,1630],{"id":1629},"solid","Solid",[396,1632,1633],{},"Filled background buttons joined seamlessly. The most prominent grouping style, ideal for primary action sets.",[1396,1635],{"story":1636,":panel":977},"theme-recipes-button-group--solid",[1406,1638,1639],{"id":1622},"Outline",[396,1641,1642],{},"Bordered buttons with transparent backgrounds. Border collapsing is clearly visible here — shared edges merge into a single border line.",[1396,1644],{"story":1645,":panel":977},"theme-recipes-button-group--outline",[1406,1647,1649],{"id":1648},"soft","Soft",[396,1651,1652],{},"Light tinted background buttons. The soft backgrounds blend together at the join points.",[1396,1654],{"story":1655,":panel":977},"theme-recipes-button-group--soft",[1406,1657,1658],{"id":1626},"Subtle",[396,1660,1661],{},"Light tinted background with visible borders. Like outline, the border collapsing creates clean shared edges.",[1396,1663],{"story":1664,":panel":977},"theme-recipes-button-group--subtle",[1406,1666,1668],{"id":1667},"ghost","Ghost",[396,1670,1671],{},"Transparent buttons that only show background on hover. Minimal visual weight for secondary action groups.",[1396,1673],{"story":1674,":panel":977},"theme-recipes-button-group--ghost",[1406,1676,1678],{"id":1677},"link","Link",[396,1680,1681],{},"Styled as inline text links. Useful for navigation-style button groups with minimal chrome.",[1396,1683],{"story":1684,":panel":977},"theme-recipes-button-group--link",[392,1686,1688],{"id":1687},"sizes","Sizes",[396,1690,1518,1691,1695],{},[409,1692,1694],{"href":1693},"/docs/components/composables/button#sizes","Button sizes",". All buttons within a group should use the same size for consistent alignment.",[1396,1697],{"story":1698,":panel":977},"theme-recipes-button-group--extra-large",[1406,1700,1702],{"id":1701},"size-reference","Size Reference",[1396,1704],{"story":1705,":height":1431},"theme-recipes-button-group--all-sizes",[1433,1707,1708,1720],{},[1436,1709,1710],{},[1439,1711,1712,1715,1718],{},[1442,1713,1714],{},"Size",[1442,1716,1717],{},"Token",[1442,1719,1545],{},[1451,1721,1722,1735,1748,1761,1774],{},[1439,1723,1724,1729,1732],{},[1456,1725,1726],{},[404,1727,1728],{},"xs",[1456,1730,1731],{},"Extra small",[1456,1733,1734],{},"Compact toolbars, dense UIs",[1439,1736,1737,1742,1745],{},[1456,1738,1739],{},[404,1740,1741],{},"sm",[1456,1743,1744],{},"Small",[1456,1746,1747],{},"Secondary action groups, table rows",[1439,1749,1750,1755,1758],{},[1456,1751,1752],{},[404,1753,1754],{},"md",[1456,1756,1757],{},"Medium (default)",[1456,1759,1760],{},"General purpose button groups",[1439,1762,1763,1768,1771],{},[1456,1764,1765],{},[404,1766,1767],{},"lg",[1456,1769,1770],{},"Large",[1456,1772,1773],{},"Prominent action groups, hero sections",[1439,1775,1776,1781,1784],{},[1456,1777,1778],{},[404,1779,1780],{},"xl",[1456,1782,1783],{},"Extra large",[1456,1785,1786],{},"Full-width mobile actions, marketing CTAs",[392,1788,282],{"id":1789},"accessibility",[428,1791,1792],{},[431,1793,1794,1800,1801,1803,1804,1807],{},[400,1795,1796,1797,859],{},"Use ",[404,1798,1799],{},"role=\"group\""," Wrap buttons in an element with ",[404,1802,1799],{}," and an ",[404,1805,1806],{},"aria-label"," describing the group's purpose so screen readers announce the context.",[480,1809,1813],{"className":1810,"code":1811,"language":1812,"meta":485,"style":485},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Correct: semantic group with label -->\n\u003Cdiv role=\"group\" aria-label=\"Text alignment\">\n    \u003Cbutton class=\"...\">Left\u003C/button>\n    \u003Cbutton class=\"...\">Center\u003C/button>\n    \u003Cbutton class=\"...\">Right\u003C/button>\n\u003C/div>\n\n\u003C!-- Avoid: no group semantics -->\n\u003Cdiv class=\"...\">\n    \u003Cbutton class=\"...\">Left\u003C/button>\n    \u003Cbutton class=\"...\">Center\u003C/button>\n    \u003Cbutton class=\"...\">Right\u003C/button>\n\u003C/div>\n","html",[404,1814,1815,1821,1851,1882,1909,1936,1944,1948,1953,1971,1997,2023,2049],{"__ignoreMap":485},[489,1816,1817],{"class":491,"line":492},[489,1818,1820],{"class":1819},"sHwdD","\u003C!-- Correct: semantic group with label -->\n",[489,1822,1823,1825,1827,1829,1831,1833,1835,1837,1840,1842,1844,1847,1849],{"class":491,"line":526},[489,1824,1096],{"class":499},[489,1826,1018],{"class":811},[489,1828,1033],{"class":564},[489,1830,571],{"class":499},[489,1832,788],{"class":499},[489,1834,1040],{"class":516},[489,1836,788],{"class":499},[489,1838,1839],{"class":564}," aria-label",[489,1841,571],{"class":499},[489,1843,788],{"class":499},[489,1845,1846],{"class":516},"Text alignment",[489,1848,788],{"class":499},[489,1850,1045],{"class":499},[489,1852,1853,1855,1858,1861,1863,1865,1868,1870,1873,1876,1878,1880],{"class":491,"line":555},[489,1854,1272],{"class":499},[489,1856,1857],{"class":811},"button",[489,1859,1860],{"class":564}," class",[489,1862,571],{"class":499},[489,1864,788],{"class":499},[489,1866,1867],{"class":516},"...",[489,1869,788],{"class":499},[489,1871,1872],{"class":499},">",[489,1874,1875],{"class":503},"Left",[489,1877,1250],{"class":499},[489,1879,1857],{"class":811},[489,1881,1045],{"class":499},[489,1883,1884,1886,1888,1890,1892,1894,1896,1898,1900,1903,1905,1907],{"class":491,"line":561},[489,1885,1272],{"class":499},[489,1887,1857],{"class":811},[489,1889,1860],{"class":564},[489,1891,571],{"class":499},[489,1893,788],{"class":499},[489,1895,1867],{"class":516},[489,1897,788],{"class":499},[489,1899,1872],{"class":499},[489,1901,1902],{"class":503},"Center",[489,1904,1250],{"class":499},[489,1906,1857],{"class":811},[489,1908,1045],{"class":499},[489,1910,1911,1913,1915,1917,1919,1921,1923,1925,1927,1930,1932,1934],{"class":491,"line":582},[489,1912,1272],{"class":499},[489,1914,1857],{"class":811},[489,1916,1860],{"class":564},[489,1918,571],{"class":499},[489,1920,788],{"class":499},[489,1922,1867],{"class":516},[489,1924,788],{"class":499},[489,1926,1872],{"class":499},[489,1928,1929],{"class":503},"Right",[489,1931,1250],{"class":499},[489,1933,1857],{"class":811},[489,1935,1045],{"class":499},[489,1937,1938,1940,1942],{"class":491,"line":587},[489,1939,1250],{"class":499},[489,1941,1018],{"class":811},[489,1943,1045],{"class":499},[489,1945,1946],{"class":491,"line":604},[489,1947,558],{"emptyLinePlaceholder":177},[489,1949,1950],{"class":491,"line":620},[489,1951,1952],{"class":1819},"\u003C!-- Avoid: no group semantics -->\n",[489,1954,1955,1957,1959,1961,1963,1965,1967,1969],{"class":491,"line":625},[489,1956,1096],{"class":499},[489,1958,1018],{"class":811},[489,1960,1860],{"class":564},[489,1962,571],{"class":499},[489,1964,788],{"class":499},[489,1966,1867],{"class":516},[489,1968,788],{"class":499},[489,1970,1045],{"class":499},[489,1972,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995],{"class":491,"line":889},[489,1974,1272],{"class":499},[489,1976,1857],{"class":811},[489,1978,1860],{"class":564},[489,1980,571],{"class":499},[489,1982,788],{"class":499},[489,1984,1867],{"class":516},[489,1986,788],{"class":499},[489,1988,1872],{"class":499},[489,1990,1875],{"class":503},[489,1992,1250],{"class":499},[489,1994,1857],{"class":811},[489,1996,1045],{"class":499},[489,1998,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021],{"class":491,"line":907},[489,2000,1272],{"class":499},[489,2002,1857],{"class":811},[489,2004,1860],{"class":564},[489,2006,571],{"class":499},[489,2008,788],{"class":499},[489,2010,1867],{"class":516},[489,2012,788],{"class":499},[489,2014,1872],{"class":499},[489,2016,1902],{"class":503},[489,2018,1250],{"class":499},[489,2020,1857],{"class":811},[489,2022,1045],{"class":499},[489,2024,2025,2027,2029,2031,2033,2035,2037,2039,2041,2043,2045,2047],{"class":491,"line":920},[489,2026,1272],{"class":499},[489,2028,1857],{"class":811},[489,2030,1860],{"class":564},[489,2032,571],{"class":499},[489,2034,788],{"class":499},[489,2036,1867],{"class":516},[489,2038,788],{"class":499},[489,2040,1872],{"class":499},[489,2042,1929],{"class":503},[489,2044,1250],{"class":499},[489,2046,1857],{"class":811},[489,2048,1045],{"class":499},[489,2050,2051,2053,2055],{"class":491,"line":927},[489,2052,1250],{"class":499},[489,2054,1018],{"class":811},[489,2056,1045],{"class":499},[428,2058,2059],{},[431,2060,2061,2064,2065,2068,2069,2072],{},[400,2062,2063],{},"Keyboard navigation."," Native ",[404,2066,2067],{},"\u003Cbutton>"," elements provide Tab key support. For single-selection groups (segmented controls), consider ",[404,2070,2071],{},"role=\"toolbar\""," with arrow-key navigation.",[392,2074,2076],{"id":2075},"customization","Customization",[1406,2078,2080],{"id":2079},"overriding-defaults","Overriding Defaults",[396,2082,398,2083,2085],{},[404,2084,406],{}," 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:",[480,2087,2089],{"className":482,"code":2088,"filename":478,"language":484,"meta":485,"style":485},"import { styleframe } from 'virtual:styleframe';\nimport { useButtonGroupRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst buttonGroup = useButtonGroupRecipe(s, {\n    defaultVariants: {\n        orientation: 'vertical',\n        block: 'true',\n    },\n});\n\nexport default s;\n",[404,2090,2091,2111,2131,2135,2149,2153,2170,2179,2193,2207,2211,2219,2223],{"__ignoreMap":485},[489,2092,2093,2095,2097,2099,2101,2103,2105,2107,2109],{"class":491,"line":492},[489,2094,496],{"class":495},[489,2096,500],{"class":499},[489,2098,504],{"class":503},[489,2100,507],{"class":499},[489,2102,510],{"class":495},[489,2104,513],{"class":499},[489,2106,517],{"class":516},[489,2108,520],{"class":499},[489,2110,523],{"class":499},[489,2112,2113,2115,2117,2119,2121,2123,2125,2127,2129],{"class":491,"line":526},[489,2114,496],{"class":495},[489,2116,500],{"class":499},[489,2118,539],{"class":503},[489,2120,507],{"class":499},[489,2122,510],{"class":495},[489,2124,513],{"class":499},[489,2126,548],{"class":516},[489,2128,520],{"class":499},[489,2130,523],{"class":499},[489,2132,2133],{"class":491,"line":555},[489,2134,558],{"emptyLinePlaceholder":177},[489,2136,2137,2139,2141,2143,2145,2147],{"class":491,"line":561},[489,2138,565],{"class":564},[489,2140,568],{"class":503},[489,2142,571],{"class":499},[489,2144,504],{"class":574},[489,2146,577],{"class":503},[489,2148,523],{"class":499},[489,2150,2151],{"class":491,"line":582},[489,2152,558],{"emptyLinePlaceholder":177},[489,2154,2155,2157,2159,2161,2163,2166,2168],{"class":491,"line":587},[489,2156,565],{"class":564},[489,2158,609],{"class":503},[489,2160,571],{"class":499},[489,2162,539],{"class":574},[489,2164,2165],{"class":503},"(s",[489,2167,536],{"class":499},[489,2169,806],{"class":499},[489,2171,2172,2175,2177],{"class":491,"line":604},[489,2173,2174],{"class":811},"    defaultVariants",[489,2176,967],{"class":499},[489,2178,806],{"class":499},[489,2180,2181,2183,2185,2187,2189,2191],{"class":491,"line":620},[489,2182,1167],{"class":811},[489,2184,967],{"class":499},[489,2186,513],{"class":499},[489,2188,830],{"class":516},[489,2190,520],{"class":499},[489,2192,904],{"class":499},[489,2194,2195,2197,2199,2201,2203,2205],{"class":491,"line":625},[489,2196,1190],{"class":811},[489,2198,967],{"class":499},[489,2200,513],{"class":499},[489,2202,977],{"class":516},[489,2204,520],{"class":499},[489,2206,904],{"class":499},[489,2208,2209],{"class":491,"line":889},[489,2210,1239],{"class":499},[489,2212,2213,2215,2217],{"class":491,"line":907},[489,2214,1030],{"class":499},[489,2216,935],{"class":503},[489,2218,523],{"class":499},[489,2220,2221],{"class":491,"line":920},[489,2222,558],{"emptyLinePlaceholder":177},[489,2224,2225,2227,2229,2231],{"class":491,"line":927},[489,2226,628],{"class":495},[489,2228,631],{"class":495},[489,2230,634],{"class":503},[489,2232,523],{"class":499},[1406,2234,2236],{"id":2235},"filtering-variants","Filtering Variants",[396,2238,2239,2240,2243],{},"If you only need a subset of the available variants, use the ",[404,2241,2242],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[480,2245,2247],{"className":482,"code":2246,"filename":478,"language":484,"meta":485,"style":485},"import { styleframe } from 'virtual:styleframe';\nimport { useButtonGroupRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Only generate horizontal orientation\nconst buttonGroup = useButtonGroupRecipe(s, {\n    filter: {\n        orientation: ['horizontal'],\n    },\n});\n\nexport default s;\n",[404,2248,2249,2269,2289,2293,2307,2311,2316,2332,2341,2361,2365,2373,2377],{"__ignoreMap":485},[489,2250,2251,2253,2255,2257,2259,2261,2263,2265,2267],{"class":491,"line":492},[489,2252,496],{"class":495},[489,2254,500],{"class":499},[489,2256,504],{"class":503},[489,2258,507],{"class":499},[489,2260,510],{"class":495},[489,2262,513],{"class":499},[489,2264,517],{"class":516},[489,2266,520],{"class":499},[489,2268,523],{"class":499},[489,2270,2271,2273,2275,2277,2279,2281,2283,2285,2287],{"class":491,"line":526},[489,2272,496],{"class":495},[489,2274,500],{"class":499},[489,2276,539],{"class":503},[489,2278,507],{"class":499},[489,2280,510],{"class":495},[489,2282,513],{"class":499},[489,2284,548],{"class":516},[489,2286,520],{"class":499},[489,2288,523],{"class":499},[489,2290,2291],{"class":491,"line":555},[489,2292,558],{"emptyLinePlaceholder":177},[489,2294,2295,2297,2299,2301,2303,2305],{"class":491,"line":561},[489,2296,565],{"class":564},[489,2298,568],{"class":503},[489,2300,571],{"class":499},[489,2302,504],{"class":574},[489,2304,577],{"class":503},[489,2306,523],{"class":499},[489,2308,2309],{"class":491,"line":582},[489,2310,558],{"emptyLinePlaceholder":177},[489,2312,2313],{"class":491,"line":587},[489,2314,2315],{"class":1819},"// Only generate horizontal orientation\n",[489,2317,2318,2320,2322,2324,2326,2328,2330],{"class":491,"line":604},[489,2319,565],{"class":564},[489,2321,609],{"class":503},[489,2323,571],{"class":499},[489,2325,539],{"class":574},[489,2327,2165],{"class":503},[489,2329,536],{"class":499},[489,2331,806],{"class":499},[489,2333,2334,2337,2339],{"class":491,"line":620},[489,2335,2336],{"class":811},"    filter",[489,2338,967],{"class":499},[489,2340,806],{"class":499},[489,2342,2343,2345,2347,2350,2352,2354,2356,2359],{"class":491,"line":625},[489,2344,1167],{"class":811},[489,2346,967],{"class":499},[489,2348,2349],{"class":503}," [",[489,2351,520],{"class":499},[489,2353,820],{"class":516},[489,2355,520],{"class":499},[489,2357,2358],{"class":503},"]",[489,2360,904],{"class":499},[489,2362,2363],{"class":491,"line":889},[489,2364,1239],{"class":499},[489,2366,2367,2369,2371],{"class":491,"line":907},[489,2368,1030],{"class":499},[489,2370,935],{"class":503},[489,2372,523],{"class":499},[489,2374,2375],{"class":491,"line":920},[489,2376,558],{"emptyLinePlaceholder":177},[489,2378,2379,2381,2383,2385],{"class":491,"line":927},[489,2380,628],{"class":495},[489,2382,631],{"class":495},[489,2384,634],{"class":503},[489,2386,523],{"class":499},[2388,2389,2390,2393],"note",{},[400,2391,2392],{},"Good to know:"," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[392,2395,2397],{"id":2396},"api-reference","API Reference",[1406,2399,2401],{"id":2400},"usebuttongrouprecipes-options",[404,2402,2403],{},"useButtonGroupRecipe(s, options?)",[396,2405,2406],{},"Creates a button group recipe with orientation and block mode variants plus automatic border collapsing.",[396,2408,2409],{},[400,2410,2411],{},"Parameters:",[1433,2413,2414,2427],{},[1436,2415,2416],{},[1439,2417,2418,2421,2424],{},[1442,2419,2420],{},"Parameter",[1442,2422,2423],{},"Type",[1442,2425,2426],{},"Description",[1451,2428,2429,2444,2459,2474,2488,2503,2518],{},[1439,2430,2431,2436,2441],{},[1456,2432,2433],{},[404,2434,2435],{},"s",[1456,2437,2438],{},[404,2439,2440],{},"Styleframe",[1456,2442,2443],{},"The Styleframe instance",[1439,2445,2446,2451,2456],{},[1456,2447,2448],{},[404,2449,2450],{},"options",[1456,2452,2453],{},[404,2454,2455],{},"DeepPartial\u003CRecipeConfig>",[1456,2457,2458],{},"Optional overrides for the recipe configuration",[1439,2460,2461,2466,2471],{},[1456,2462,2463],{},[404,2464,2465],{},"options.base",[1456,2467,2468],{},[404,2469,2470],{},"VariantDeclarationsBlock",[1456,2472,2473],{},"Custom base styles for the button group",[1439,2475,2476,2481,2485],{},[1456,2477,2478],{},[404,2479,2480],{},"options.variants",[1456,2482,2483],{},[404,2484,1611],{},[1456,2486,2487],{},"Custom variant definitions for the recipe",[1439,2489,2490,2495,2500],{},[1456,2491,2492],{},[404,2493,2494],{},"options.defaultVariants",[1456,2496,2497],{},[404,2498,2499],{},"Record\u003Ckeyof Variants, string>",[1456,2501,2502],{},"Default variant values for the recipe",[1439,2504,2505,2510,2515],{},[1456,2506,2507],{},[404,2508,2509],{},"options.compoundVariants",[1456,2511,2512],{},[404,2513,2514],{},"CompoundVariant[]",[1456,2516,2517],{},"Custom compound variant definitions for the recipe",[1439,2519,2520,2525,2530],{},[1456,2521,2522],{},[404,2523,2524],{},"options.filter",[1456,2526,2527],{},[404,2528,2529],{},"Record\u003Cstring, string[]>",[1456,2531,2532],{},"Limit which variant values are generated",[396,2534,2535],{},[400,2536,2537],{},"Variants:",[1433,2539,2540,2553],{},[1436,2541,2542],{},[1439,2543,2544,2547,2550],{},[1442,2545,2546],{},"Variant",[1442,2548,2549],{},"Options",[1442,2551,2552],{},"Default",[1451,2554,2555,2571],{},[1439,2556,2557,2561,2567],{},[1456,2558,2559],{},[404,2560,1295],{},[1456,2562,2563,1308,2565],{},[404,2564,820],{},[404,2566,830],{},[1456,2568,2569],{},[404,2570,820],{},[1439,2572,2573,2577,2583],{},[1456,2574,2575],{},[404,2576,1311],{},[1456,2578,2579,1308,2581],{},[404,2580,977],{},[404,2582,987],{},[1456,2584,2585],{},[404,2586,987],{},[396,2588,2589],{},[409,2590,2591],{"href":104},"Learn more about recipes →",[392,2593,2595],{"id":2594},"best-practices","Best Practices",[428,2597,2598,2611,2617,2623,2635],{},[431,2599,2600,2603,2604,2607,2608,2610],{},[400,2601,2602],{},"Pair with the Button recipe",": The Button Group recipe targets child elements with the ",[404,2605,2606],{},".button"," class. Always use it alongside the ",[409,2609,418],{"href":255}," for consistent border collapsing.",[431,2612,2613,2616],{},[400,2614,2615],{},"Keep groups small",": Limit button groups to 2–5 buttons. Larger groups are harder to scan and may overwhelm the user with choices.",[431,2618,2619,2622],{},[400,2620,2621],{},"Use block mode for mobile",": On narrow screens, the block variant gives buttons equal width and prevents awkward wrapping.",[431,2624,2625,2628,2629,2631,2632,2634],{},[400,2626,2627],{},"Maintain a visual hierarchy within the group",": Combine different button variants (e.g., one ",[404,2630,1629],{}," primary action with ",[404,2633,1622],{}," secondary actions) so users can quickly identify the primary action.",[431,2636,2637,2640,2641,2643],{},[400,2638,2639],{},"Add an aria-label",": Always describe the group's purpose with ",[404,2642,1806],{}," so screen readers can communicate the relationship between buttons.",[392,2645,2647],{"id":2646},"faq","FAQ",[2649,2650,2651,2660,2671,2686,2696],"accordion",{},[2652,2653,2656,2657,2659],"accordion-item",{"icon":2654,"label":2655},"i-lucide-circle-help","How does border collapsing work?","The Button Group recipe uses CSS selectors that target child ",[404,2658,2606],{}," elements based on their position. In horizontal mode, each button except the last has its right border-radius and right border removed; each button 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 buttons without any additional markup.",[2652,2661,2663,2664,1308,2666,1308,2668,2670],{"icon":2654,"label":2662},"Can I mix button variants inside a group?","Yes. Each button within the group retains its own color and variant styling. The Button Group recipe only modifies border-radius and border-width at shared edges, so you can freely combine ",[404,2665,1629],{},[404,2667,1622],{},[404,2669,1648],{},", and other button variants within the same group.",[2652,2672,2674,2675,2678,2679,1509,2682,2685],{"icon":2654,"label":2673},"What's the difference between block and non-block mode?","In the default (non-block) mode, the button group uses ",[404,2676,2677],{},"display: inline-flex"," and only takes up as much horizontal space as its children need. In block mode, the group switches to ",[404,2680,2681],{},"display: flex",[404,2683,2684],{},"width: 100%",", and each child button is given equal flex sizing so they distribute the full width evenly.",[2652,2687,2689,2690,2692,2693,2695],{"icon":2654,"label":2688},"Can I use the Button Group without the Button recipe?","The border-collapsing selectors target elements with the ",[404,2691,2606],{}," class, which is the class name generated by the Button recipe. If you want to use the Button Group with custom buttons, make sure your buttons use the ",[404,2694,2606],{}," class, or override the selectors in the recipe setup callback.",[2652,2697,2699,2700,2702,2703,2705,2706,2709],{"icon":2654,"label":2698},"How does filtering affect the border-collapsing styles?","When you use the ",[404,2701,2242],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[404,2704,1295],{}," to only ",[404,2707,2708],{},"['horizontal']",", the vertical border-collapsing selectors are still registered by the setup callback but the vertical compound variant class name won't be generated, so those selectors won't match any elements.",[2711,2712,2713],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":485,"searchDepth":526,"depth":526,"links":2715},[2716,2717,2718,2719,2724,2725,2728,2736,2739,2740,2744,2747,2748],{"id":394,"depth":526,"text":21},{"id":422,"depth":526,"text":423},{"id":457,"depth":526,"text":458},{"id":1295,"depth":526,"text":1401,"children":2720},[2721,2722,2723],{"id":820,"depth":555,"text":1408},{"id":830,"depth":555,"text":1417},{"id":1426,"depth":555,"text":1427},{"id":1311,"depth":526,"text":1486},{"id":1515,"depth":526,"text":198,"children":2726},[2727],{"id":1529,"depth":555,"text":1530},{"id":1610,"depth":526,"text":1611,"children":2729},[2730,2731,2732,2733,2734,2735],{"id":1629,"depth":555,"text":1630},{"id":1622,"depth":555,"text":1639},{"id":1648,"depth":555,"text":1649},{"id":1626,"depth":555,"text":1658},{"id":1667,"depth":555,"text":1668},{"id":1677,"depth":555,"text":1678},{"id":1687,"depth":526,"text":1688,"children":2737},[2738],{"id":1701,"depth":555,"text":1702},{"id":1789,"depth":526,"text":282},{"id":2075,"depth":526,"text":2076,"children":2741},[2742,2743],{"id":2079,"depth":555,"text":2080},{"id":2235,"depth":555,"text":2236},{"id":2396,"depth":526,"text":2397,"children":2745},[2746],{"id":2400,"depth":555,"text":2403},{"id":2594,"depth":526,"text":2595},{"id":2646,"depth":526,"text":2647},"A layout component for grouping buttons with joined borders and shared orientation. Supports horizontal and vertical layouts plus full-width block mode through the recipe system.",null,{},{"title":258,"description":2749},{"loc":259},"nGCVYkFPDlPwtH69olYZ9QVggO5FS8-ydinhHgOKSrI",[2756,2758],{"title":254,"path":255,"stem":256,"description":2757,"children":-1},"An interactive control component for actions and navigation. Supports multiple colors, visual styles, sizes, and states through the recipe system.",{"title":262,"path":263,"stem":264,"description":2759,"children":-1},"A contextual feedback component for alerts, notifications, and inline messages. Supports multiple colors, visual styles, sizes, and orientations through the recipe system.",1775321189239]