docs(button-group): add button group code section

Author: dauriamarco

docs/components/buttons-menus/button-group.md

@@ -98,3 +98,124 @@ The button group component is inherently horizontal and cannot be wrapped or sta
 Alternatively, actions can be collapsed under a menu or replaced with a [select](../forms-inputs/select.md),
 [radio](../forms-inputs/radio.md), or [checkboxes](../forms-inputs/checkbox.md) component,
 depending on the interaction type.
+
+## Code ---
+
+Button groups are created using CSS classes. The button group component is CSS-only and does not require any Angular components.
+
+### Usage
+
+Wrap buttons in a `btn-group` container with the appropriate `role` and `aria-label` attributes for accessibility.
+
+```html
+<div class="btn-group" role="group" aria-label="Basic example">
+  <button type="button" class="btn btn-secondary">Left</button>
+  <button type="button" class="btn btn-secondary">Middle</button>
+  <button type="button" class="btn btn-secondary">Right</button>
+</div>
+```
+
+### Button group sizes
+
+Button groups support three sizes: small (`btn-sm`), default, and large (`btn-lg`).
+
+```html
+<!-- Large group -->
+<div class="btn-group" role="group" aria-label="Large group">
+  <button type="button" class="btn btn-lg btn-secondary">Large</button>
+  <button type="button" class="btn btn-lg btn-secondary">Group</button>
+</div>
+
+<!-- Default group -->
+<div class="btn-group" role="group" aria-label="Default group">
+  <button type="button" class="btn btn-secondary">Default</button>
+  <button type="button" class="btn btn-secondary">Group</button>
+</div>
+
+<!-- Small group -->
+<div class="btn-group" role="group" aria-label="Small group">
+  <button type="button" class="btn btn-sm btn-secondary">Small</button>
+  <button type="button" class="btn btn-sm btn-secondary">Group</button>
+</div>
+```
+
+### Icon-only buttons
+
+For icon-only button groups, use the `btn-icon` class along with appropriate `aria-label` attributes.
+
+```html
+<div class="btn-group" role="group" aria-label="Icon button group">
+  <button type="button" class="btn btn-icon btn-secondary" aria-label="Edit">
+    <i class="icon element-edit"></i>
+  </button>
+  <button type="button" class="btn btn-icon btn-secondary" aria-label="Copy">
+    <i class="icon element-copy"></i>
+  </button>
+  <button type="button" class="btn btn-icon btn-secondary" aria-label="Delete">
+    <i class="icon element-delete"></i>
+  </button>
+</div>
+```
+
+### Action button group example
+
+<si-docs-component example="buttons/button-groups" height="400"></si-docs-component>
+
+### Split button
+
+A split button combines a primary action with a dropdown menu of related options.
+
+```html
+<div class="btn-group" role="group" aria-label="Split button">
+  <button type="button" class="btn btn-primary">
+    <i class="icon element-download"></i>
+    Download
+  </button>
+  <button
+    type="button"
+    class="btn btn-primary btn-icon dropdown-toggle"
+    aria-label="Dropdown toggle"
+    [cdkMenuTriggerFor]="dropdownMenu"
+  >
+    <i class="dropdown-caret icon element-down-2"></i>
+  </button>
+</div>
+```
+
+<si-docs-component example="buttons/split-button" height="300"></si-docs-component>
+
+### Selection button
+
+For selection-based button groups that represent different states or views, use radio buttons or checkboxes with button styling.
+
+**Single-select:**
+
+```html
+<div class="btn-group" role="group" aria-label="View selection">
+  <input type="radio" class="btn-check" name="view" id="view-all" checked />
+  <label class="btn" for="view-all">All</label>
+
+  <input type="radio" class="btn-check" name="view" id="view-read" />
+  <label class="btn" for="view-read">Read</label>
+
+  <input type="radio" class="btn-check" name="view" id="view-unread" />
+  <label class="btn" for="view-unread">Unread</label>
+</div>
+```
+
+**Multi-select:**
+
+```html
+<div class="btn-group" role="group" aria-label="Filter options">
+  <input type="checkbox" class="btn-check" id="filter-temp" />
+  <label class="btn" for="filter-temp">Temperature</label>
+
+  <input type="checkbox" class="btn-check" id="filter-pressure" />
+  <label class="btn" for="filter-pressure">Pressure</label>
+
+  <input type="checkbox" class="btn-check" id="filter-voltage" />
+  <label class="btn" for="filter-voltage">Voltage</label>
+</div>
+```
+
+<si-docs-component example="buttons/selection-buttons" height="350"></si-docs-component>

docs/components/buttons-menus/segmented-button.md

@@ -109,15 +109,13 @@ documentation.
 
 - [Scatter Chart](charts/scatter-chart.md)
 - [Search Bar](sorting-filtering/search-bar.md)
-- [Segmented Button](buttons-menus/segmented-button.md)
 - [Select](forms-inputs/select.md)
 - [Side Panel](layout-navigation/side-panel.md)
 - [Skeleton](progress-indication/skeleton.md)
 - [Slider](forms-inputs/slider.md)
 - [Sort Bar](sorting-filtering/sort-bar.md)
 - [Spinner](progress-indication/spinner.md)
 - [Split](layout-navigation/split.md)
-- [Split buttons](buttons-menus/split-button.md)
 - [Status Bar](status-notifications/status-bar.md)
 - [Status Counter](status-notifications/status-counter.md)
 - [Status Toggle](status-notifications/status-toggle.md)

docs/components/buttons-menus/split-button.md

@@ -54,8 +54,6 @@ nav:
     - Buttons & menus:
       - Buttons:                          'components/buttons-menus/buttons.md'
       - Button Group:                     'components/buttons-menus/button-group.md'
-      - Segmented Button:                 'components/buttons-menus/segmented-button.md'
-      - Split buttons:                    'components/buttons-menus/split-button.md'
       - Content Action Bar:               'components/buttons-menus/content-actions.md'
       - Dropdowns:                        'components/buttons-menus/dropdowns.md'
       - Help Button:                      'components/buttons-menus/help-button.md'

docs/components/index.md

@@ -80,7 +80,7 @@
 
   <h4 class="mb-4">Sizing</h4>
   <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
-    <div class="btn-group btn-group-lg" role="group" aria-label="Large group">
+    <div class="btn-group" role="group" aria-label="Large group">
       <button type="button" class="btn btn-lg btn-primary">Large</button>
       <button type="button" class="btn btn-lg btn-primary">Group</button>
       <button type="button" class="btn btn-lg btn-primary">Size</button>
@@ -92,15 +92,15 @@ <h4 class="mb-4">Sizing</h4>
       <button type="button" class="btn btn-primary">Size</button>
     </div>
 
-    <div class="btn-group btn-group-sm" role="group" aria-label="Small group">
+    <div class="btn-group" role="group" aria-label="Small group">
       <button type="button" class="btn btn-sm btn-primary">Small</button>
       <button type="button" class="btn btn-sm btn-primary">Group</button>
       <button type="button" class="btn btn-sm btn-primary">Size</button>
     </div>
   </div>
 
   <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
-    <div class="btn-group btn-group-lg" role="group" aria-label="Large group">
+    <div class="btn-group" role="group" aria-label="Large group">
       <button type="button" class="btn btn-lg btn-secondary">Large</button>
       <button type="button" class="btn btn-lg btn-secondary">Group</button>
       <button type="button" class="btn btn-lg btn-secondary">Size</button>
@@ -112,15 +112,15 @@ <h4 class="mb-4">Sizing</h4>
       <button type="button" class="btn btn-secondary">Size</button>
     </div>
 
-    <div class="btn-group btn-group-sm" role="group" aria-label="Small group">
+    <div class="btn-group" role="group" aria-label="Small group">
       <button type="button" class="btn btn-sm btn-secondary">Small</button>
       <button type="button" class="btn btn-sm btn-secondary">Group</button>
       <button type="button" class="btn btn-sm btn-secondary">Size</button>
     </div>
   </div>
 
   <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
-    <div class="btn-group btn-group-lg" role="group" aria-label="Large group">
+    <div class="btn-group" role="group" aria-label="Large group">
       <button type="button" class="btn btn-lg btn-tertiary">Large</button>
       <button type="button" class="btn btn-lg btn-tertiary">Group</button>
       <button type="button" class="btn btn-lg btn-tertiary">Size</button>
@@ -132,7 +132,7 @@ <h4 class="mb-4">Sizing</h4>
       <button type="button" class="btn btn-tertiary">Size</button>
     </div>
 
-    <div class="btn-group btn-group-sm" role="group" aria-label="Small group">
+    <div class="btn-group" role="group" aria-label="Small group">
       <button type="button" class="btn btn-sm btn-tertiary">Small</button>
       <button type="button" class="btn btn-sm btn-tertiary">Group</button>
       <button type="button" class="btn btn-sm btn-tertiary">Size</button>