igniteui-angular 21.1.0 → 21.1.2

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

@@ -5,6 +5,15 @@
 > For Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite setup — see [`types.md`](./types.md).
 > For paging and remote data — see [`paging-remote.md`](./paging-remote.md).
 
+## Contents
+
+- [State Persistence](#state-persistence)
+- [Tree Grid Data Operations](#tree-grid-data-operations)
+- [Hierarchical Grid Data Operations](#hierarchical-grid-data-operations)
+- [Pivot Grid Data Operations](#pivot-grid-data-operations)
+- [Grid Lite Data Operations](#grid-lite-data-operations)
+- [Key Rules](#key-rules)
+
 ## State Persistence
 
 > **Docs:** [State Persistence](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/state-persistence) (substitute URL prefix per grid type)
@@ -20,7 +29,7 @@ Use `IgxGridStateDirective` to persist sorting, filtering, grouping, paging, sel
 ```
 
 ```typescript
-import { IgxGridStateDirective } from 'igniteui-angular/grids/grid';
+import { IgxGridStateDirective } from 'igniteui-angular/grids/core';
 
 export class StatefulGridComponent {
   gridState = viewChild.required(IgxGridStateDirective);
@@ -234,7 +243,7 @@ Setting `[batchEditing]="true"` on the root hierarchical grid automatically prop
 ### Dimension-Based Filtering
 
 ```typescript
-import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular/grids/core';
+import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular/core';
 
 // Create a filter for a dimension
 const regionFilter = new FilteringExpressionsTree(FilteringLogic.Or);
@@ -277,155 +286,12 @@ this.pivotGridRef().pipeTrigger++;
 
 ## Grid Lite Data Operations
 
-**Grid Lite** is a lightweight, open-source (MIT licensed) Web Component grid with an Angular wrapper. It supports **sorting and filtering only** — no editing, grouping, paging, summaries, selection, or export. Its API is **different from** the Flat/Tree/Hierarchical Grid APIs.
-
-> **IMPORTANT**: Grid Lite uses `IgxGridLiteSortingExpression` and `IgxGridLiteFilteringExpression` — NOT `ISortingExpression` or `FilteringExpressionsTree` from the enterprise grids.
-
-### Grid Lite Sorting
-
-```typescript
-import {
-  IgxGridLiteComponent,
-  IgxGridLiteSortingExpression,
-  IgxGridLiteSortingOptions
-} from 'igniteui-angular/grids/lite';
-
-@Component({
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  // ...
-})
-export class GridLiteSortExample {
-  gridRef = viewChild<IgxGridLiteComponent<Product>>('grid');
-
-  // Sorting options: mode can be 'single' or 'multiple'
-  sortingOptions: IgxGridLiteSortingOptions = { mode: 'multiple' };
-
-  // Initial sort state
-  sortExprs: IgxGridLiteSortingExpression[] = [
-    { key: 'name', direction: 'ascending' }
-  ];
-
-  sortByPrice() {
-    // Sort programmatically (single expression or array)
-    this.gridRef().sort({ key: 'price', direction: 'descending' });
-  }
-
-  clearAllSorts() {
-    this.gridRef().clearSort(); // clear all
-    // or: this.gridRef().clearSort('price'); // clear specific column
-  }
-}
-```
-
-```html
-<igx-grid-lite #grid
-  [data]="data"
-  [sortingOptions]="sortingOptions"
-  [(sortingExpressions)]="sortExprs"
-  (sorting)="onSorting($event)"
-  (sorted)="onSorted($event)">
-  <igx-grid-lite-column field="name" header="Name" sortable></igx-grid-lite-column>
-  <igx-grid-lite-column field="price" header="Price" dataType="number" sortable></igx-grid-lite-column>
-</igx-grid-lite>
-```
-
-Sort expression shape: `{ key: string, direction: 'ascending' | 'descending' | 'none' }`
-
-Sorting modes:
-- `'single'` — only one column sorted at a time
-- `'multiple'` — multi-column sorting
-- `triState: true` — allows cycling through ascending → descending → none
-
-### Grid Lite Filtering
-
-```typescript
-import {
-  IgxGridLiteComponent,
-  IgxGridLiteFilteringExpression
-} from 'igniteui-angular/grids/lite';
-
-// Filter expression shape
-const filters: IgxGridLiteFilteringExpression[] = [
-  { key: 'price', condition: 'greaterThan', searchTerm: 100 },
-  { key: 'name', condition: 'contains', searchTerm: 'Widget' }
-];
-
-// Programmatic filtering
-this.gridRef().filter({ key: 'price', condition: 'greaterThan', searchTerm: 100 });
-this.gridRef().clearFilter('price');
-this.gridRef().clearFilter(); // clear all
-```
-
-```html
-<igx-grid-lite #grid
-  [data]="data"
-  [(filteringExpressions)]="filterExprs"
-  (filtering)="onFiltering($event)"
-  (filtered)="onFiltered($event)">
-  <igx-grid-lite-column field="name" header="Name" filterable></igx-grid-lite-column>
-  <igx-grid-lite-column field="price" header="Price" dataType="number" filterable></igx-grid-lite-column>
-</igx-grid-lite>
-```
-
-Filter expression shape: `{ key: string, condition: string, searchTerm: any, criteria?: any[], caseSensitive?: boolean }`
-
-Filter conditions depend on `dataType`:
-- **string**: `contains`, `startsWith`, `endsWith`, `equals`, `doesNotContain`, `doesNotEqual`, `empty`, `notEmpty`, `null`, `notNull`
-- **number**: `equals`, `doesNotEqual`, `greaterThan`, `lessThan`, `greaterThanOrEqualTo`, `lessThanOrEqualTo`, `empty`, `notEmpty`, `null`, `notNull`
-- **boolean**: `all`, `true`, `false`, `empty`, `notEmpty`, `null`, `notNull`
-- **date**: `equals`, `doesNotEqual`, `before`, `after`, `today`, `yesterday`, `thisMonth`, `lastMonth`, `nextMonth`, `thisYear`, `lastYear`, `nextYear`, `empty`, `notEmpty`, `null`, `notNull`
-
-### Grid Lite Remote Data Operations
-
-Grid Lite uses `dataPipelineConfiguration` — a callback-based approach (NOT noop strategies):
-
-```typescript
-import { IgxGridLiteDataPipelineConfiguration } from 'igniteui-angular/grids/lite';
-
-dataPipeline: IgxGridLiteDataPipelineConfiguration<Product> = {
-  sort: async (params) => {
-    // params.grid — the grid instance
-    // params.data — current data array
-    // params.type — 'sort'
-    const result = await fetch(`/api/products?sort=${JSON.stringify(params.grid.sortingExpressions)}`);
-    return await result.json();
-  },
-  filter: async (params) => {
-    const result = await fetch(`/api/products?filter=${JSON.stringify(params.grid.filteringExpressions)}`);
-    return await result.json();
-  }
-};
-```
-
-```html
-<igx-grid-lite #grid
-  [data]="data"
-  [dataPipelineConfiguration]="dataPipeline">
-</igx-grid-lite>
-```
-
-Callbacks can be synchronous (return `T[]`) or asynchronous (return `Promise<T[]>`). When a `dataPipelineConfiguration` callback is provided for a given operation, the client-side pipeline for that operation is bypassed entirely.
-
-### Grid Lite Events
-
-| Event | Cancelable | Payload |
-|---|---|---|
-| `(sorting)` | Yes (`event.detail.cancel = true`) | Sorting expression about to be applied |
-| `(sorted)` | No | Sorting completed |
-| `(filtering)` | Yes (`event.detail.cancel = true`) | Filter expression about to be applied |
-| `(filtered)` | No | Filtering completed |
-
-### Grid Lite Limitations (No Data Operations)
-
-These data operations are **NOT available** in Grid Lite:
-- Editing (cell, row, batch) — no `[editable]`, no `beginEdit()`, no transactions
-- Grouping — no `groupBy()`, no `IgxGroupByRow`
-- Paging — no `IgxPaginatorComponent`
-- Summaries — no `IgxSummaryOperand`
-- Selection — no `rowSelection`, `cellSelection`, or `columnSelection`
-- State persistence — no `IgxGridStateDirective`
-- Export — no `IgxExcelExporterService` or `IgxCsvExporterService`
-- Advanced filtering — no `advancedFilteringExpressionsTree`
+> **Grid Lite sorting, filtering, remote data, events, and limitations are fully documented in [`types.md`](./types.md#grid-lite).** Refer to that file for all Grid Lite data operations — this section intentionally avoids duplicating that content.
+>
+> Key differences from Flat/Tree/Hierarchical Grid APIs:
+> - Uses `IgxGridLiteSortingExpression` / `IgxGridLiteFilteringExpression` (NOT `ISortingExpression` / `FilteringExpressionsTree`)
+> - Uses `dataPipelineConfiguration` for remote ops (NOT noop strategies + events)
+> - Has no editing, grouping, paging, summaries, selection, state persistence, or export
 
 ## Key Rules
 

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

@@ -6,6 +6,15 @@
 > For Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics — see [`types.md`](./types.md).
 > For programmatic data operations — see [`data-operations.md`](./data-operations.md).
 
+## Contents
+
+- [Quick Start](#quick-start)
+- [Column Configuration](#column-configuration)
+- [Sorting](#sorting)
+- [Filtering](#filtering)
+- [Selection](#selection)
+- [Key Rules](#key-rules)
+
 ## Quick Start
 
 ### Imports

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

@@ -5,6 +5,14 @@
 > For shared column config, sorting, filtering, selection — see [`structure.md`](./structure.md).
 > For editing, grouping, toolbar, export — see [`features.md`](./features.md).
 
+## Contents
+
+- [Tree Grid](#tree-grid)
+- [Hierarchical Grid](#hierarchical-grid)
+- [Grid Lite](#grid-lite)
+- [Pivot Grid](#pivot-grid)
+- [Key Rules](#key-rules)
+
 ## Tree Grid
 
 > **Docs:** [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid)
@@ -333,6 +341,27 @@ dataPipeline: IgxGridLiteDataPipelineConfiguration<Product> = {
 </igx-grid-lite>
 ```
 
+### Grid Lite Events
+
+| Event | Cancelable | Payload |
+|---|---|---|
+| `(sorting)` | Yes (`event.detail.cancel = true`) | Sorting expression about to be applied |
+| `(sorted)` | No | Sorting completed |
+| `(filtering)` | Yes (`event.detail.cancel = true`) | Filter expression about to be applied |
+| `(filtered)` | No | Filtering completed |
+
+### Grid Lite Limitations
+
+These features are **NOT available** in Grid Lite:
+- Editing (cell, row, batch) — no `[editable]`, no `beginEdit()`, no transactions
+- Grouping — no `groupBy()`, no `IgxGroupByRow`
+- Paging — no `IgxPaginatorComponent`
+- Summaries — no `IgxSummaryOperand`
+- Selection — no `rowSelection`, `cellSelection`, or `columnSelection`
+- State persistence — no `IgxGridStateDirective`
+- Export — no `IgxExcelExporterService` or `IgxCsvExporterService`
+- Advanced filtering — no `advancedFilteringExpressionsTree`
+
 ### Grid Lite Key Differences from Flat Grid
 
 - **Separate package**: `npm install igniteui-grid-lite`
@@ -356,41 +385,91 @@ For **pivot table analytics** where users reshape data by dragging dimensions be
 > **IMPORTANT**: The Pivot Grid is fundamentally different from the other three grids. Standard grid features like cell editing, row editing, batch editing, paging, column pinning, column moving, row dragging, and standard filtering/sorting are **disabled**. All data operations are driven by the `pivotConfiguration`.
 
 ```typescript
-import { Component, ChangeDetectionStrategy, signal, viewChild } from '@angular/core';
-import { IgxPivotGridComponent, IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
-import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/pivot-grid';
+import { Component } from "@angular/core";
+import { DATA } from '../../data/pivot-data';
+
+import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core';
+import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid';
 
 @Component({
-  selector: 'app-sales-pivot',
-  imports: [IGX_PIVOT_GRID_DIRECTIVES],
-  templateUrl: './sales-pivot.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'app-pivot-grid-basic-sample',
+    styleUrls: ['./pivot-grid-basic-sample.component.scss'],
+    templateUrl: './pivot-grid-basic-sample.component.html',
+    imports: [IgxPivotGridComponent]
 })
-export class SalesPivotComponent {
-  pivotGridRef = viewChild.required<IgxPivotGridComponent>('pivotGrid');
-  salesData = signal<Sale[]>([]);
-
-  pivotConfig: IPivotConfiguration = {
-    columns: [{ memberName: 'Quarter', enabled: true }],
-    rows: [{ memberName: 'Region', enabled: true }],
-    values: [{
-      member: 'Revenue',
-      aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'SUM', label: 'Sum' },
-      enabled: true
-    }],
-    filters: [{ memberName: 'Year', enabled: true }]
-  };
+export class PivotGridBasicSampleComponent {
+    public data = DATA;
+    public pivotConfigHierarchy: IPivotConfiguration = {
+        columns: [
+            {
+
+                memberName: 'Product',
+                memberFunction: (data) => data.Product.Name,
+                enabled: true
+            }
+            
+        ],
+        rows: [
+            {
+                memberName: 'Seller',
+                memberFunction: (data) => data.Seller.Name,
+                enabled: true
+            }
+        ],
+        values: [
+            {
+                member: 'NumberOfUnits',
+                aggregate: {
+                    aggregator: IgxPivotNumericAggregate.sum,
+                    key: 'sum',
+                    label: 'Sum'
+                },
+                enabled: true
+
+            }
+        ],
+        filters: null
+    };
 }
 ```
 
 ```html
-<igx-pivot-grid #pivotGrid
-  [data]="salesData()"
-  [pivotConfiguration]="pivotConfig"
-  height="600px">
+<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy" height="500px">
 </igx-pivot-grid>
 ```
 
+```json
+export const DATA = [
+    {
+        Product: {
+            Name: 'Clothing',
+            UnitPrice: '12.814860936633712'
+        },
+        Seller: {
+            Name: 'Stanley Brooker',
+            City: 'Seattle'
+        },
+        Date: '2007-01-01T00:00:00',
+        Value: '94.2652032683907',
+        NumberOfUnits: '282'
+    },
+    {
+        Product: {
+            Name: 'Clothing',
+            UnitPrice: '49.579375120615296'
+        },
+        Seller: {
+            Name: 'Elisa Longbottom',
+            City: 'Sofia'
+        },
+        Date: '2007-01-05T00:00:00',
+        Value: '70.798922689072285',
+        NumberOfUnits: '296'
+    }
+    ...
+];
+```
+
 ### Pivot Data Selector
 
 Provide a drag-and-drop UI for users to reshape the pivot interactively:

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

@@ -1,7 +1,7 @@
 ---
 name: igniteui-angular-theming
-description: "Customize Ignite UI components styling using the igniteui-theming MCP server for AI-assisted theming. Use when users ask to theme or restyle Ignite UI components, change the color palette, switch between light and dark themes, apply or generate a global theme, customize typography or elevations, or configure component-level styles."
-user-invokable: true
+description: "Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. Do NOT use for component behavior, APIs, or data binding — use igniteui-angular-components or igniteui-angular-grids instead."
+user-invocable: true
 ---
 
 # Ignite UI for Angular — Theming Skill
@@ -29,71 +29,7 @@ This skill teaches AI agents how to theme Ignite UI for Angular applications usi
 
 ## Setting Up the Theming MCP Server
 
-The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available.
-
-### VS Code
-
-Create or edit `.vscode/mcp.json` in your project:
-
-```json
-{
-  "servers": {
-    "igniteui-theming": {
-      "command": "npx",
-      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
-    }
-  }
-}
-```
-
-This works whether `igniteui-theming` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases.
-
-### Cursor
-
-Create or edit `.cursor/mcp.json`:
-
-```json
-{
-  "mcpServers": {
-    "igniteui-theming": {
-      "command": "npx",
-      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
-    }
-  }
-}
-```
-
-### Claude Desktop
-
-Edit the Claude Desktop config file:
-- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
-- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
-
-```json
-{
-  "mcpServers": {
-    "igniteui-theming": {
-      "command": "npx",
-      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
-    }
-  }
-}
-```
-
-### WebStorm / JetBrains IDEs
-
-1. Go to **Settings → Tools → AI Assistant → MCP Servers**
-2. Click **+ Add MCP Server**
-3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp`
-4. Click OK and restart the AI Assistant
-
-### Verifying the Setup
-
-After configuring the MCP server, ask your AI assistant:
-
-> "Detect which Ignite UI platform my project uses"
-
-If the MCP server is running, the `detect_platform` tool will analyze your `package.json` and return the detected platform (e.g., `angular`).
+> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification.
 
 ## Theming Architecture
 
@@ -474,41 +410,7 @@ Everything else must use `var(--ig-<family>-<shade>)` tokens.
 
 ## Common Patterns
 
-### Switching Between Light and Dark Themes
-
-```scss
-@use 'igniteui-angular/theming' as *;
-
-$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA);
-$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212);
-
-@include core();
-@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
-
-// Light is default
-@include theme($palette: $light-palette, $schema: $light-material-schema);
-
-// Dark via class on <body> or <html>
-.dark-theme {
-  @include theme($palette: $dark-palette, $schema: $dark-material-schema);
-}
-```
-
-### Scoping a Theme to a Container
-
-```scss
-.admin-panel {
-  @include theme($palette: $admin-palette, $schema: $light-indigo-schema);
-}
-```
-
-### Licensed Package Users
-
-If using the licensed `@infragistics/igniteui-angular` package, set `licensed: true` on MCP tool calls and change the Sass import:
-
-```scss
-@use '@infragistics/igniteui-angular/theming' as *;
-```
+> **Light/dark theme switching, scoped themes, and licensed package configuration are in [`references/common-patterns.md`](./references/common-patterns.md).** Read that file for ready-to-use Sass patterns.
 
 ## Key Rules
 
@@ -524,7 +426,5 @@ If using the licensed `@infragistics/igniteui-angular` package, set `licensed: t
 
 ## Related Skills
 
-- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — Form controls, application setup, architecture, and import patterns
-- [`igniteui-angular-components-layout`](../igniteui-angular-components-layout/SKILL.md) — Layout, data display, feedback/overlay components, and directives
-- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Data Grid structure, column configuration, sorting, filtering, selection
-- [`igniteui-angular-grids-types`](../igniteui-angular-grids-types/SKILL.md) — Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics
+- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — UI components (form controls, layout, data display, feedback/overlays, directives, charts)
+- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Data Grids (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid)

package/skills/igniteui-angular-theming/references/common-patterns.md

@@ -0,0 +1,45 @@
+# Common Theming Patterns
+
+> **Part of the [`igniteui-angular-theming`](../SKILL.md) skill hub.**
+
+## Contents
+
+- [Switching Between Light and Dark Themes](#switching-between-light-and-dark-themes)
+- [Scoping a Theme to a Container](#scoping-a-theme-to-a-container)
+- [Licensed Package Users](#licensed-package-users)
+
+## Switching Between Light and Dark Themes
+
+```scss
+@use 'igniteui-angular/theming' as *;
+
+$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA);
+$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212);
+
+@include core();
+@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
+
+// Light is default
+@include theme($palette: $light-palette, $schema: $light-material-schema);
+
+// Dark via class on <body> or <html>
+.dark-theme {
+  @include theme($palette: $dark-palette, $schema: $dark-material-schema);
+}
+```
+
+## Scoping a Theme to a Container
+
+```scss
+.admin-panel {
+  @include theme($palette: $admin-palette, $schema: $light-indigo-schema);
+}
+```
+
+## Licensed Package Users
+
+If using the licensed `@infragistics/igniteui-angular` package, set `licensed: true` on MCP tool calls and change the Sass import:
+
+```scss
+@use '@infragistics/igniteui-angular/theming' as *;
+```

package/skills/igniteui-angular-theming/references/mcp-setup.md

@@ -0,0 +1,77 @@
+# Setting Up the Theming MCP Server
+
+> **Part of the [`igniteui-angular-theming`](../SKILL.md) skill hub.**
+
+## Contents
+
+- [VS Code](#vs-code)
+- [Cursor](#cursor)
+- [Claude Desktop](#claude-desktop)
+- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides)
+- [Verifying the Setup](#verifying-the-setup)
+
+The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available.
+
+## VS Code
+
+Create or edit `.vscode/mcp.json` in your project:
+
+```json
+{
+  "servers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+
+This works whether `igniteui-theming` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases.
+
+## Cursor
+
+Create or edit `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+
+## Claude Desktop
+
+Edit the Claude Desktop config file:
+- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+
+## WebStorm / JetBrains IDEs
+
+1. Go to **Settings → Tools → AI Assistant → MCP Servers**
+2. Click **+ Add MCP Server**
+3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp`
+4. Click OK and restart the AI Assistant
+
+## Verifying the Setup
+
+After configuring the MCP server, ask your AI assistant:
+
+> "Detect which Ignite UI platform my project uses"
+
+If the MCP server is running, the `detect_platform` tool will analyze your `package.json` and return the detected platform (e.g., `angular`).

package/types/igniteui-angular-grids-grid.d.ts

@@ -2071,6 +2071,7 @@ declare abstract class IgxGridBaseDirective implements GridType, OnInit, DoCheck
     private _sortDescendingHeaderIconTemplate;
     private _gridSize;
     private _defaultRowHeight;
+    private _borderSize;
     private _rowCount;
     private _cellMergeMode;
     private _columnsToMerge;