fix(skills): add igx-buttongroup and icon button to igniteui-angular-components skill

skills/igniteui-angular-components/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: igniteui-angular-components
-description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
+description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
 user-invocable: true
 ---
 
@@ -33,7 +33,7 @@ Base your code and explanation exclusively on what you read. If the reference fi
 | Tabs, Bottom Navigation, Stepper, Accordion, Expansion Panel, Splitter, Navigation Drawer | [`references/layout.md`](./references/layout.md) |
 | List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Indicators, Chat | [`references/data-display.md`](./references/data-display.md) |
 | Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) |
-| Button, Icon Button, Ripple, Tooltip, Drag and Drop | [`references/directives.md`](./references/directives.md) |
+| Button, Icon Button, Button Group, Ripple, Tooltip, Drag and Drop | [`references/directives.md`](./references/directives.md) |
 | Layout Manager (`igxLayout`, `igxFlex` directives), Dock Manager (`igc-dockmanager` web component) | [`references/layout-manager.md`](./references/layout-manager.md) |
 | Charts (Area, Bar, Column, Stock/Financial, Pie), chart configuration, chart features (animation, tooltips, markers, highlighting, zooming), data binding | [`references/charts.md`](./references/charts.md) |
 

skills/igniteui-angular-components/references/directives.md

@@ -6,6 +6,7 @@
 ## Contents
 
 - [Button & Icon Button](#button--icon-button)
+- [Button Group](#button-group)
 - [Ripple Effect](#ripple-effect)
 - [Tooltip](#tooltip)
 - [Drag and Drop](#drag-and-drop)
@@ -40,6 +41,121 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 Button variants for `igxButton`: `'flat'`, `'raised'`, `'outlined'`, `'fab'`.
 Button variants for `igxIconButton`: `'flat'`, `'outlined'`, `'contained'`.
 
+## Button Group
+
+> **Docs:** [Button Group Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup)
+
+```typescript
+// Option A — convenience collection (includes IgxButtonGroupComponent + IgxButtonDirective)
+import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
+
+// Option B — individual imports
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+
+import { IgxIconComponent } from 'igniteui-angular/icon';
+```
+
+```html
+<!-- Text buttons — single selection (default) -->
+<igx-buttongroup>
+  <button igxButton>Left</button>
+  <button igxButton [selected]="true">Center</button>
+  <button igxButton>Right</button>
+</igx-buttongroup>
+
+<!-- Multi-selection -->
+<igx-buttongroup selectionMode="multi">
+  <button igxButton><igx-icon>format_bold</igx-icon></button>
+  <button igxButton><igx-icon>format_italic</igx-icon></button>
+  <button igxButton><igx-icon>format_underlined</igx-icon></button>
+</igx-buttongroup>
+
+<!-- singleRequired — always keeps one button selected, cannot deselect -->
+<igx-buttongroup selectionMode="singleRequired">
+  <button igxButton [selected]="true">Day</button>
+  <button igxButton>Week</button>
+  <button igxButton>Month</button>
+</igx-buttongroup>
+
+<!-- Vertical alignment -->
+<igx-buttongroup alignment="vertical">
+  <button igxButton>Top</button>
+  <button igxButton>Middle</button>
+  <button igxButton>Bottom</button>
+</igx-buttongroup>
+
+<!-- Disabled group -->
+<igx-buttongroup [disabled]="true">
+  <button igxButton>A</button>
+  <button igxButton>B</button>
+</igx-buttongroup>
+
+<!-- React to selection / deselection events -->
+<igx-buttongroup (selected)="onSelected($event)" (deselected)="onDeselected($event)">
+  <button igxButton>One</button>
+  <button igxButton>Two</button>
+  <button igxButton>Three</button>
+</igx-buttongroup>
+```
+
+```typescript
+import { IButtonGroupEventArgs } from 'igniteui-angular/button-group';
+
+onSelected(event: IButtonGroupEventArgs) {
+  console.log('Selected index:', event.index, 'button:', event.button);
+}
+
+onDeselected(event: IButtonGroupEventArgs) {
+  console.log('Deselected index:', event.index);
+}
+```
+
+**Key inputs on `igx-buttongroup`:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `selectionMode` | `'single' \| 'singleRequired' \| 'multi'` | `'single'` | Selection behaviour. `singleRequired` prevents full deselection. |
+| `alignment` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction of the buttons. |
+| `disabled` | `boolean` | `false` | Disables every button in the group. |
+
+**Key outputs on `igx-buttongroup`:**
+
+| Output | Payload | Emits when |
+|---|---|---|
+| `(selected)` | `IButtonGroupEventArgs` | A button is selected. |
+| `(deselected)` | `IButtonGroupEventArgs` | A button is deselected. |
+
+`IButtonGroupEventArgs`: `{ owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number }`, where `IgxButtonDirective` is imported from `igniteui-angular/directives` (see **Button & Icon Button** section above).
+
+**Key inputs on each `<button igxButton>` child:**
+
+| Input | Type | Description |
+|---|---|---|
+| `[selected]` | `boolean` | Sets the initial selected state of the button. |
+| `[disabled]` | `boolean` | Disables a specific button within the group. |
+
+**Programmatic control:**
+
+```typescript
+import { viewChild } from '@angular/core';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+
+buttonGroup = viewChild.required<IgxButtonGroupComponent>('myGroup');
+
+selectSecond()   { this.buttonGroup().selectButton(1); }
+deselectSecond() { this.buttonGroup().deselectButton(1); }
+getSelected()    { return this.buttonGroup().selectedButtons; }
+```
+
+```html
+<igx-buttongroup #myGroup selectionMode="multi">
+  <button igxButton>A</button>
+  <button igxButton>B</button>
+  <button igxButton>C</button>
+</igx-buttongroup>
+```
+
 ## Ripple Effect
 
 > **Docs:** [Ripple Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ripple)

skills/igniteui-angular-components/references/setup.md

@@ -120,6 +120,7 @@ import { IgxComboComponent } from 'igniteui-angular';
 | Circular Progress | `igniteui-angular/progressbar` |
 | Chat | `igniteui-angular/chat` |
 | Button / Icon Button | `igniteui-angular/directives` |
+| Button Group | `igniteui-angular/button-group` |
 | Ripple | `igniteui-angular/directives` |
 | IgxTooltipDirective, IgxTooltipTargetDirective | `igniteui-angular/directives` |
 | Drag & Drop | `igniteui-angular/directives` |
@@ -145,6 +146,7 @@ For complex components, use the bundled directive arrays instead of listing ever
 
 | Token | Entry Point | Includes |
 |---|---|---|
+| `IGX_BUTTON_GROUP_DIRECTIVES` | `igniteui-angular/button-group` | Button group + button directive |
 | `IGX_INPUT_GROUP_DIRECTIVES` | `igniteui-angular/input-group` | Input group + label, hint, prefix, suffix |
 | `IGX_TABS_DIRECTIVES` | `igniteui-angular/tabs` | Tabs + tab item, header, content |
 | `IGX_STEPPER_DIRECTIVES` | `igniteui-angular/stepper` | Stepper + step |
@@ -158,7 +160,7 @@ For complex components, use the bundled directive arrays instead of listing ever
 - [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer
 - [`data-display.md`](./data-display.md) — List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress, Chat
 - [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner
-- [`directives.md`](./directives.md) — Button, Ripple, Tooltip, Drag and Drop
+- [`directives.md`](./directives.md) — Button, Icon Button, Button Group, Ripple, Tooltip, Drag and Drop
 - [`layout-manager.md`](./layout-manager.md) — Layout Manager directives, Dock Manager
 - [`../../igniteui-angular-grids/SKILL.md`](../../igniteui-angular-grids/SKILL.md) — Data Grids
 - [`../../igniteui-angular-theming/SKILL.md`](../../igniteui-angular-theming/SKILL.md) — Theming & Styling