igniteui-angular 21.1.0 → 21.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "21.1.0",
+  "version": "21.1.1",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",

package/skills/igniteui-angular-components/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: igniteui-angular-components
-description: "All Ignite UI Angular UI components: application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress bar, Linear Progress Bar, Circular Progress Bar, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use for any non-grid Ignite UI Angular UI question."
-user-invokable: true
+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
 ---
 
 # Ignite UI for Angular — UI Components
@@ -18,13 +18,10 @@ You are **required** to complete ALL of the following steps before producing any
 **STEP 1 — Identify every component or feature involved.**
 Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., a form inside a Dialog requires reading both `form-controls.md` AND `feedback.md`).
 
-**STEP 2 — Read every identified reference file in full.**
-Call `read_file` (or equivalent) on each reference file identified in Step 1. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.
+**STEP 2 — Read every identified reference file in full (PARALLEL).**
+Call `read_file` (or equivalent) on **all** reference files identified in Step 1 **in a single parallel batch** — do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.
 
-**STEP 3 — Check app setup.**
-If the component is new to the project (or you're scaffolding a new feature), also read [`references/setup.md`](./references/setup.md) to verify the correct providers and entry-point import patterns. Missing `provideAnimations()` is the most common source of runtime failures.
-
-**STEP 4 — Only then produce output.**
+**STEP 3 — Only then produce output.**
 Base your code and explanation exclusively on what you read. If the reference files do not cover something, say so explicitly rather than guessing.
 
 ### Task → Reference File
@@ -36,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) |
 

package/skills/igniteui-angular-components/references/charts.md

@@ -1,5 +1,17 @@
 # Angular Charts Reference
 
+## Contents
+
+- [Overview](#overview)
+- [General Chart Configuration](#general-chart-configuration)
+- [Key Chart Features](#key-chart-features)
+- [Chart Types Reference](#chart-types-reference)
+- [Common API Members by Chart Type](#common-api-members-by-chart-type)
+- [Import Paths](#import-paths)
+- [Styling & Theming](#styling--theming)
+- [Data Requirements](#data-requirements)
+- [Documentation References](#documentation-references)
+
 ## Overview
 
 Ignite UI for Angular Charts provides 65+ chart types for data visualization. Charts are packaged separately in `igniteui-angular-charts` (or `@infragistics/igniteui-angular-charts` for licensed users).
@@ -303,7 +315,6 @@ highlightingMode: HighlightingMode;
 import {
   IgxCategoryChartModule,    // provides IgxCategoryChartComponent
   IgxFinancialChartModule,   // provides IgxFinancialChartComponent
-  IgxDataChartModule,        // provides IgxDataChartComponent + all series/axes
   IgxPieChartModule,         // provides IgxPieChartComponent
   IgxDataPieChartModule,     // provides IgxDataPieChartComponent
   IgxLegendModule,           // provides IgxLegendComponent
@@ -311,21 +322,20 @@ import {
 
 // Enums and types — these ARE plain TS exports and can be imported directly
 import {
-  ChartType,
   FinancialChartType,
   MarkerType,
   ToolTipType,
-  TrendLineType,
+  TrendLineTypeCollection,
   HighlightingMode,
-  TransitionInMode,
-  AxisLabelLocation,
+  TransitionInSpeedType,
+  AxisLabelSettings,
   CrosshairsDisplayMode,
   LegendOrientation,
-  OthersCategoryType,
-  SelectionMode,
-  IndicatorType,
-  VolumeType,
-  AxisMode
+  OthersCategoryContext,
+  SeriesSelectionMode,
+  IndicatorDisplayType,
+  FinancialChartVolumeType,
+  AxisOrientation
 } from 'igniteui-angular-charts';
 ```
 

package/skills/igniteui-angular-components/references/data-display.md

@@ -3,6 +3,19 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [List](#list)
+- [Tree](#tree)
+- [Card](#card)
+- [Chips](#chips)
+- [Avatar & Badge](#avatar--badge)
+- [Icon](#icon)
+- [Carousel](#carousel)
+- [Paginator](#paginator)
+- [Progress Indicators](#progress-indicators)
+- [Chat (AI Chat Component)](#chat-ai-chat-component)
+
 ## List
 
 > **Docs:** [List Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list)

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

@@ -3,6 +3,14 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [Button & Icon Button](#button--icon-button)
+- [Button Group](#button-group)
+- [Ripple Effect](#ripple-effect)
+- [Tooltip](#tooltip)
+- [Drag and Drop](#drag-and-drop)
+
 ## Button & Icon Button
 
 > **Docs:** [Button Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button)
@@ -33,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)

package/skills/igniteui-angular-components/references/feedback.md

@@ -5,6 +5,14 @@
 
 > **AGENT INSTRUCTION:** All components in this file rely on Angular animations and the Ignite UI overlay system. Before using any of them, ensure `provideAnimations()` (or `provideAnimationsAsync()`) is present in `app.config.ts`. If it is missing, add it — these components will throw runtime errors or silently fail to animate without it.
 
+## Contents
+
+- [Dialog](#dialog)
+- [Snackbar](#snackbar)
+- [Toast](#toast)
+- [Banner](#banner)
+- [Key Rules](#key-rules)
+
 ## Dialog
 
 > **Docs:** [Dialog Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog)

package/skills/igniteui-angular-components/references/form-controls.md

@@ -3,6 +3,21 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [Input Group](#input-group)
+- [Combo (Multi-Select Dropdown)](#combo-multi-select-dropdown)
+- [Simple Combo (Single-Select)](#simple-combo-single-select)
+- [Select](#select)
+- [Date Picker](#date-picker)
+- [Date Range Picker](#date-range-picker)
+- [Time Picker](#time-picker)
+- [Calendar](#calendar)
+- [Checkbox, Radio, Switch](#checkbox-radio-switch)
+- [Slider](#slider)
+- [Reactive Forms Integration](#reactive-forms-integration)
+- [Key Rules](#key-rules)
+
 ## Input Group
 
 > **Docs:** [Input Group](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group)

package/skills/igniteui-angular-components/references/layout-manager.md

@@ -3,6 +3,11 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [Layout Manager Directives](#layout-manager-directives)
+- [Dock Manager](#dock-manager)
+
 ---
 
 ## Layout Manager Directives

package/skills/igniteui-angular-components/references/layout.md

@@ -3,6 +3,15 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [Tabs](#tabs)
+- [Bottom Navigation](#bottom-navigation)
+- [Stepper](#stepper)
+- [Accordion](#accordion)
+- [Splitter](#splitter)
+- [Navigation Drawer](#navigation-drawer)
+
 ## Tabs
 
 > **Docs:** [Tabs Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)

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

@@ -2,6 +2,13 @@
 
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 
+## Contents
+
+- [Installation](#installation)
+- [Required Providers (`app.config.ts`)](#required-providers-appconfigts)
+- [Architecture — Standalone Components](#architecture--standalone-components)
+- [Multi-Entry-Point Imports](#multi-entry-point-imports)
+
 ## Installation
 
 ```bash
@@ -113,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` |
@@ -138,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 |
@@ -151,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

package/skills/igniteui-angular-grids/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: igniteui-angular-grids
-description: "All grid topics for Ignite UI Angular: grid setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, and Pivot Grid. Use for any grid-related question."
-user-invokable: true
+description: "Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data. Do NOT use for non-grid UI components (forms, dialogs, navigation, charts) — use igniteui-angular-components instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
+user-invocable: true
 ---
 
 # Ignite UI for Angular — Data Grids
@@ -21,8 +21,8 @@ Use the Grid Selection Decision Guide below. If the grid type is not explicitly
 **STEP 2 — Identify every task category involved.**
 Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., remote paging AND editing requires reading both `paging-remote.md` AND `editing.md`).
 
-**STEP 3 — Read every identified reference file in full.**
-Call `read_file` (or equivalent) on each reference file identified in Step 2. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.
+**STEP 3 — Read every identified reference file in full (PARALLEL).**
+Call `read_file` (or equivalent) on **all** reference files identified in Step 2 **in a single parallel batch** — do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.
 
 **STEP 4 — Only then produce output.**
 Base your code and explanation exclusively on what you read in Step 3. If the reference files do not cover something, say so explicitly rather than guessing.
@@ -33,11 +33,11 @@ Base your code and explanation exclusively on what you read in Step 3. If the re
 |---|---|
 | Grid type selection, column config, column templates, column groups, MRL, pinning, sorting UI, filtering UI, selection | [`references/structure.md`](./references/structure.md) |
 | Grouping, summaries, cell merging, toolbar, export, row drag, action strip, master-detail, clipboard | [`references/features.md`](./references/features.md) |
-| Tree Grid specifics, Hierarchical Grid specifics, Grid Lite setup, Pivot Grid setup | [`references/types.md`](./references/types.md) |
+| Tree Grid specifics, Hierarchical Grid specifics, Grid Lite setup, Grid Lite data operations, Pivot Grid setup | [`references/types.md`](./references/types.md) |
 | Programmatic sorting / filtering / grouping, canonical import patterns, `viewChild` access | [`references/data-operations.md`](./references/data-operations.md) |
 | Cell editing, row editing, batch editing, transactions, validation, summaries | [`references/editing.md`](./references/editing.md) |
 | Paging, remote data, server-side ops, noop strategies, virtual scroll, multi-grid coordination | [`references/paging-remote.md`](./references/paging-remote.md) |
-| State persistence, Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite data operations | [`references/state.md`](./references/state.md) |
+| State persistence, Tree Grid / Hierarchical Grid / Pivot Grid data operations | [`references/state.md`](./references/state.md) |
 
 > **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application.
 

package/skills/igniteui-angular-grids/references/data-operations.md

@@ -6,6 +6,14 @@
 > For editing and validation — see [`editing.md`](./editing.md).
 > For state persistence — see [`state.md`](./state.md).
 
+## Contents
+
+- [Accessing the Grid Instance](#accessing-the-grid-instance)
+- [Sorting](#sorting)
+- [Filtering](#filtering)
+- [Grouping (Flat Grid Only)](#grouping-flat-grid-only)
+- [Key Rules](#key-rules)
+
 ## Accessing the Grid Instance
 
 All programmatic data operations require a reference to the grid component. Use `viewChild` with the **correct component type** for your grid.
@@ -190,7 +198,7 @@ onSortingDone(event: ISortingEventArgs) {
 Implement `ISortingStrategy` to control how values are compared:
 
 ```typescript
-import { ISortingStrategy, SortingDirection } from 'igniteui-angular/grids/core';
+import { ISortingStrategy, SortingDirection } from 'igniteui-angular/core';
 
 class PrioritySortStrategy implements ISortingStrategy {
   private priorityOrder = ['Critical', 'High', 'Medium', 'Low'];
@@ -249,7 +257,8 @@ import {
   IgxBooleanFilteringOperand,
   FilteringExpressionsTree,
   FilteringLogic
-} from 'igniteui-angular/grids/core';
+} from 'igniteui-angular/core';
+// import { ... } from '@infragistics/igniteui-angular/core'; for licensed package
 
 // Simple single-column filter
 this.gridRef().filter('name', 'John', IgxStringFilteringOperand.instance().condition('contains'), true);
@@ -309,7 +318,7 @@ Control the AND/OR logic between **different column** filters:
 ```
 
 ```typescript
-import { FilteringLogic } from 'igniteui-angular/grids/core';
+import { FilteringLogic } from 'igniteui-angular';
 
 // FilteringLogic.And (default) — row must match ALL column filters
 // FilteringLogic.Or — row must match ANY column filter
@@ -369,7 +378,7 @@ onFilteringDone(event: IFilteringEventArgs) {
 ### Programmatic Grouping
 
 ```typescript
-import { SortingDirection } from 'igniteui-angular/grids/core';
+import { SortingDirection } from 'igniteui-angular/core';
 
 // Group by a column
 this.gridRef().groupBy({ fieldName: 'category', dir: SortingDirection.Asc, ignoreCase: true });

package/skills/igniteui-angular-grids/references/editing.md

@@ -5,6 +5,16 @@
 > For state persistence — see [`state.md`](./state.md).
 > For paging and remote data — see [`paging-remote.md`](./paging-remote.md).
 
+## Contents
+
+- [Editing Data Through the Grid](#editing-data-through-the-grid)
+- [Batch Editing & Transactions](#batch-editing--transactions)
+- [Excel-Style Editing Workflows](#excel-style-editing-workflows)
+- [Editing Events Reference](#editing-events-reference)
+- [Validation](#validation)
+- [Summaries](#summaries)
+- [Key Rules](#key-rules)
+
 ## Editing Data Through the Grid
 
 > **AGENT INSTRUCTION:** When a user says they want to "edit data through the grid", "make the grid editable", or "allow CRUD in the grid", use this section to pick the right editing mode before writing any code.
@@ -423,7 +433,8 @@ Default summaries by type:
 ### Custom Summary Operand
 
 ```typescript
-import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/grids/core';
+import { IgxNumberSummaryOperand } from 'igniteui-angular/grids/core';
+import { IgxSummaryResult } from 'igniteui-angular/core';
 
 class RevenueSummary extends IgxNumberSummaryOperand {
   operate(data: number[]): IgxSummaryResult[] {

package/skills/igniteui-angular-grids/references/features.md

@@ -5,6 +5,21 @@
 > For Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics — see [`types.md`](./types.md).
 > For full editing coverage (cell/row/batch) — see [`editing.md`](./editing.md).
 
+## Contents
+
+- [Editing](#editing)
+- [Grouping (Grid only)](#grouping-grid-only)
+- [Summaries](#summaries)
+- [Cell Merging](#cell-merging)
+- [Toolbar](#toolbar)
+- [Export](#export)
+- [Virtualization & Performance](#virtualization--performance)
+- [Row Drag](#row-drag)
+- [Action Strip](#action-strip)
+- [Master-Detail (Grid only)](#master-detail-grid-only)
+- [Clipboard](#clipboard)
+- [Key Rules](#key-rules)
+
 ## Editing
 
 > **Full editing coverage is in [`editing.md`](./editing.md)**, which includes cell editing, row editing, batch editing with transactions, row adding/deleting, validation, and summaries. Use that reference for any editing task.
@@ -43,15 +58,9 @@ For advanced programmatic grouping patterns — see [`data-operations.md`](./dat
 
 ## Summaries
 
-> **Full summaries coverage (built-in and custom summary operands) is in [`editing.md`](./editing.md).**
-
-Quick reference — enable per-column summaries:
-
-```html
-<igx-column field="salary" dataType="number" [hasSummary]="true"></igx-column>
-```
-
-Default summaries by type: **number** → Count/Min/Max/Sum/Average; **date** → Count/Earliest/Latest; **string/boolean** → Count.
+> **Full summaries coverage — built-in summaries, custom summary operands, and summaries with grouping — is in [`editing.md`](./editing.md#summaries).**
+>
+> Quick reference: enable per-column summaries with `[hasSummary]="true"` on an `igx-column`. Default operands: **number** → Count/Min/Max/Sum/Average; **date** → Count/Earliest/Latest; **string/boolean** → Count.
 
 ## Cell Merging
 
@@ -68,7 +77,10 @@ Or apply a custom merge strategy:
 ```
 
 ```typescript
-priceRangeMerge: IgxCellMergeStrategy = {
+import { IGridMergeStrategy } from 'igniteui-angular/core';
+// import { IGridMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package
+
+priceRangeMerge: IGridMergeStrategy = {
   shouldMerge(prevCell, curCell) {
     return Math.abs(prevCell.value - curCell.value) < 10;
   }
@@ -79,6 +91,10 @@ priceRangeMerge: IgxCellMergeStrategy = {
 
 > **Docs:** [Toolbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/toolbar)
 
+```typescript
+import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';
+```
+
 ```html
 <igx-grid [data]="data()">
   <igx-grid-toolbar>

package/skills/igniteui-angular-grids/references/paging-remote.md

@@ -5,6 +5,14 @@
 > For editing and validation — see [`editing.md`](./editing.md).
 > For state persistence — see [`state.md`](./state.md).
 
+## Contents
+
+- [Paging](#paging)
+- [Remote Data Operations](#remote-data-operations)
+- [Virtualization](#virtualization)
+- [Multi-Grid Coordination](#multi-grid-coordination)
+- [Key Rules](#key-rules)
+
 ## Paging
 
 > **Docs:** [Paging — Remote Paging](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#remote-paging) (substitute URL prefix per grid type)
@@ -51,7 +59,8 @@ this.gridRef().paginator.perPage = 25;
 ### Remote Paging
 
 ```typescript
-import { GridPagingMode } from 'igniteui-angular/grids/grid';
+import { GridPagingMode } from 'igniteui-angular/grids/core';
+import { IPageEventArgs } from 'igniteui-angular/paginator';
 
 export class RemotePagingComponent {
   data = signal<Product[]>([]);
@@ -120,12 +129,12 @@ import { Component, ChangeDetectionStrategy, signal, viewChild, inject, DestroyR
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IgxGridComponent, IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
 import {
-  IForOfState,
-  ISortingEventArgs,
   IFilteringExpressionsTree,
   NoopSortingStrategy,
   NoopFilteringStrategy
-} from 'igniteui-angular/grids/core';
+} from 'igniteui-angular/core';
+import { IForOfState } from 'igniteui-angular/directives';
+import { ISortingEventArgs } from 'igniteui-angular/grids/core';
 import { debounceTime, Subject } from 'rxjs';
 
 @Component({