igniteui-cli 15.2.2-alpha.2 → 15.2.2-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "15.2.2-alpha.2",
+  "version": "15.2.2-alpha.3",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -66,9 +66,9 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "^21.2.1522-alpha.2",
-    "@igniteui/cli-core": "^15.2.2-alpha.2",
-    "@igniteui/mcp-server": "^15.2.2-alpha.2",
+    "@igniteui/angular-templates": "^21.2.1522-alpha.3",
+    "@igniteui/cli-core": "^15.2.2-alpha.3",
+    "@igniteui/mcp-server": "^15.2.2-alpha.3",
     "@inquirer/prompts": "^7.9.0",
     "chalk": "^5.3.0",
     "glob": "^11.0.0",

package/templates/blazor/igb/projects/ai-config/files/skills/AGENTS.md

@@ -1,4 +1,4 @@
-You are an expert in C#, Blazor, and scalable web application development. You write functional, maintainable, performant, and accessible code following .NET and Blazor best practices. You are currently immersed in the latest .NET and Blazor, adopting modern C# features, component-based architecture with clean separation of concerns, and modern Blazor patterns for reactive UI and dependencygit pull injection.
+You are an expert in C#, Blazor, and scalable web application development. You write functional, maintainable, performant, and accessible code following .NET and Blazor best practices. You are currently immersed in the latest .NET and Blazor, adopting modern C# features, component-based architecture with clean separation of concerns, and modern Blazor patterns for reactive UI and dependency injection.
 
 ## Coding Standards
 
@@ -57,9 +57,10 @@ You are an expert in C#, Blazor, and scalable web application development. You w
 
 ## UI Components
 
-- Use `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and light-weight grid, and `IgniteUI.Blazor` (trial version available publicly as `IgniteUI.Blazor.Trial`) for specialized feature-rich grids and charts.
+- Use `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and light-weight grid, and `IgniteUI.Blazor` (trial version available publicly as `IgniteUI.Blazor.Trial`) for specialized feature-rich grids and charts. If the project already references full `IgniteUI.Blazor`, do not add `IgniteUI.Blazor.Lite` or `IgniteUI.Blazor.GridLite` unless the user explicitly chooses to switch package strategy.
 - Components use the `Igb` prefix (e.g., `IgbGrid`, `IgbCombo`, `IgbDatePicker`).
 - Every component requires module registration in `Program.cs`: `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule))`.
 - Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`.
 - Link a theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`).
-- If the `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` NuGet packages are not present in the project file, add it first.
+- Add the Ignite UI runtime script before the Blazor framework script in the host page: `<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>`.
+- If no Ignite UI package is present, add the package that matches the chosen package strategy.

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/SKILL.md

@@ -12,7 +12,7 @@ user-invocable: true
 - The correct NuGet package installed: `IgniteUI.Blazor.Lite` (NuGet.org, MIT) for general purpose UI components; `IgniteUI.Blazor.GridLite` (NuGet.org, MIT) for the lightweight grid; `IgniteUI.Blazor` (Infragistics private feed, licensed) for the full suite including charts, maps, gauges, and enterprise grids; or `IgniteUI.Blazor.Trial` (NuGet.org) for evaluation of the full suite
 - `builder.Services.AddIgniteUIBlazor(...)` called in `Program.cs`
 - `@using IgniteUI.Blazor.Controls` added to `_Imports.razor`
-- A theme CSS file linked in the host page (see [`references/setup.md`](./references/setup.md))
+- A theme CSS file and `_content/IgniteUI.Blazor/app.bundle.js` runtime script linked in the host page (see [`references/setup.md`](./references/setup.md))
 - The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider
 
 > **AGENT INSTRUCTION - MCP Server Setup (REQUIRED)**
@@ -78,7 +78,7 @@ Base your code and explanation exclusively on what you read. If the reference fi
 | `IgniteUI.Blazor` | Infragistics private NuGet feed (`https://packages.infragistics.com/nuget/licensed/`) | Licensed / enterprise users that need the full component suite (grids, charts, maps, gauges, Dock Manager) |
 | `IgniteUI.Blazor.Trial` | NuGet.org | Evaluation users — same full suite as `IgniteUI.Blazor` but with a trial watermark |
 
-`IgniteUI.Blazor.Lite` contains the open-source UI component set, while `IgniteUI.Blazor.GridLite` contains the free `IgbGridLite` data grid package. Both use the `IgniteUI.Blazor.Controls` namespace. Do **not** mix the licensed `IgniteUI.Blazor` package with `IgniteUI.Blazor.Lite` in the same project; they use the same namespaces and duplicate some components.
+`IgniteUI.Blazor.Lite` contains the open-source UI component set, while `IgniteUI.Blazor.GridLite` contains the free `IgbGridLite` data grid package. Both use the `IgniteUI.Blazor.Controls` namespace. Do **not** mix the licensed `IgniteUI.Blazor` package with `IgniteUI.Blazor.Lite` in the same project; they use the same namespaces and duplicate some components. If full `IgniteUI.Blazor` is already referenced, do not add Lite/GridLite unless the user explicitly asks to switch package strategy.
 
 ## Key Blazor-Specific Notes
 

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/charts.md

@@ -70,7 +70,7 @@ Key attributes: `DataSource`, `ChartType` (`CategoryChartType.Line` / `Area` / `
 
 > **AGENT INSTRUCTION:** `CategoryChartType.Bar` does **not** exist. For a horizontal bar-style chart, use `CategoryChartType.Column` (vertical) or switch to `IgbDataChart` with `IgbBarSeries` for true horizontal bars. Never generate `ChartType="CategoryChartType.Bar"`.
 
-> **AGENT INSTRUCTION:** The `XAxisLabel` parameter on `IgbCategoryChart` is not a plain string property name. To control which data field is used as the X-axis label, set `XAxisMemberPath` with the property name string (e.g., `XAxisMemberPath="Month"`).
+> **AGENT INSTRUCTION:** `IgbCategoryChart` auto-detects which string or date property in the data to use as X-axis labels. To control which data properties are charted, use `IncludedProperties` or `ExcludedProperties` (string arrays).
 
 Brush list properties such as `Brushes`, `Outlines`, `MarkerBrushes`, and `MarkerOutlines` are **string** parameters. Separate multiple colors with spaces, as in `Brushes="DodgerBlue IndianRed"`.
 
@@ -328,4 +328,5 @@ Use Dashboard Tile when the requested component should infer or render compact d
 5. **`IgbDataChart` series must match axes by name.** The `XAxisName` / `YAxisName` on each series must match the `Name` attribute of the axis component.
 6. **`IncludedProperties` and `ExcludedProperties` are `string[]` arrays.** Bind with `@(new string[] { "Prop1", "Prop2" })`. Do not pass a plain string.
 7. **`CategoryChartType.Bar` does not exist.** Use `Column` for vertical bars in `IgbCategoryChart`. For horizontal bars, use `IgbDataChart` with `IgbBarSeries`.
-8. **Use `XAxisMemberPath` to set the X-axis label field**, not `XAxisLabel`. Passing a property name string to `XAxisLabel` is evaluated as a C# expression and silently fails.
+8. **Do not use `XAxisLabel` to specify a data field.** It controls label formatting only. Use `IncludedProperties`/`ExcludedProperties` on `IgbCategoryChart`, or `Label` on `IgbCategoryXAxis` for `IgbDataChart`.
+9. **Scatter and bubble series use `XMemberPath`/`YMemberPath`, not `XAxisMemberPath`.** For `IgbScatterSeries` and `IgbBubbleSeries`, map data fields with `XMemberPath="FieldX"` and `YMemberPath="FieldY"`. `IgbBubbleSeries` additionally requires `RadiusMemberPath`.

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-generate-from-image-design/references/component-mapping.md

@@ -270,6 +270,16 @@ builder.Services.AddIgniteUIBlazor(
 <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
 ```
 
+> **If the generated view includes any full-featured grid** (`IgbGrid`, `IgbTreeGrid`, `IgbHierarchicalGrid`, `IgbPivotGrid`), also add the grid-specific stylesheet immediately after:
+> ```html
+> <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
+> ```
+>
+> **If the generated view includes `IgbGridLite`**, replace both links above with the single Grid Lite stylesheet (from the `IgniteUI.Blazor.GridLite` package):
+> ```html
+> <link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
+> ```
+
 ### 5. JS interop script (`wwwroot/index.html` or `App.razor`)
 
 ```html

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-generate-from-image-design/references/gotchas.md

@@ -378,6 +378,22 @@ Switch the theme `<link>` from light to dark:
 <link href="_content/IgniteUI.Blazor/themes/dark/bootstrap.css" rel="stylesheet" />
 ```
 
+> **If the view includes any full-featured grid**, switch the grid-specific stylesheet variant too:
+> ```html
+> <!-- Light -->
+> <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
+> <!-- Dark -->
+> <link href="_content/IgniteUI.Blazor/themes/grid/dark/bootstrap.css" rel="stylesheet" />
+> ```
+>
+> **If the view uses `IgbGridLite`**, switch its single stylesheet instead:
+> ```html
+> <!-- Light -->
+> <link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
+> <!-- Dark -->
+> <link href="_content/IgniteUI.Blazor.GridLite/css/themes/dark/bootstrap.css" rel="stylesheet" />
+> ```
+
 ### CSS custom properties for dark panels
 When the design has multiple dark surface depths (e.g., sidebar darker than content area), define semantic tokens:
 ```css

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/SKILL.md

@@ -62,7 +62,8 @@ Before using any Ignite UI for Blazor grid component you must have:
 | NuGet package | `IgniteUI.Blazor` (licensed) for all full-featured grids; `IgniteUI.Blazor.GridLite` (MIT, separate NuGet) for Grid Lite only - grids are **not** included in `IgniteUI.Blazor.Lite` |
 | Service registration | `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule), ...)` in **Program.cs** with required module types |
 | Using directive | `@using IgniteUI.Blazor.Controls` in **_Imports.razor** |
-| CSS theme | `<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />` in **index.html** or **_Host.cshtml** |
+| CSS theme (IgbGrid / IgbTreeGrid / IgbHierarchicalGrid / IgbPivotGrid) | Add **both** in **index.html** / **_Host.cshtml**: base theme `<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />` **and** grid-specific `<link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />` (always required when any full-featured grid is used) |
+| CSS theme (IgbGridLite) | `<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />` — from the `IgniteUI.Blazor.GridLite` package; do **not** use the paths above |
 | JS interop script | `<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>` in **index.html** or **_Host.cshtml** |
 | Ignite UI CLI MCP | The **Ignite UI CLI MCP server** (`igniteui-cli`) available as a tool provider - see [`references/mcp-setup.md`](./references/mcp-setup.md) |
 
@@ -154,7 +155,7 @@ builder.Services.AddIgniteUIBlazor(
 | State persistence | ❌ | ✅ | ✅ | ✅ | ✅ |
 | Virtualization | ✅ | ✅ | ✅ | ✅ | ✅ |
 | Cell merging | ❌ | ✅ | ❌ | ❌ | ❌ |
-| Load on demand | ❌ | ❌ | ✅ **Exclusive** | ❌ | ❌ |
+| Load on demand | ❌ | ❌ | ✅ (JS interop via `LoadChildrenOnDemandScript`) | ✅ (`GridCreatedScript` on `IgbRowIsland` + JS interop) | ❌ |
 | Remote data ops | `DataPipelineConfiguration` | Events + noop strategies | Events + noop strategies | Events + noop strategies | N/A |
 
 ---

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/SKILL.md

@@ -13,7 +13,7 @@ This skill teaches AI agents how to theme Ignite UI for Blazor applications usin
 ## Prerequisites
 
 - A Blazor project using Ignite UI for Blazor components
-- A theme CSS file linked in the host page (see [`references/common-patterns.md`](./references/common-patterns.md))
+- A theme CSS file and `_content/IgniteUI.Blazor/app.bundle.js` runtime script linked in the host page (see [`references/common-patterns.md`](./references/common-patterns.md))
 - The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider
 
 > **AGENT INSTRUCTION - MCP Server Setup (REQUIRED)**
@@ -182,6 +182,7 @@ Place generated CSS in an app stylesheet loaded after the Ignite UI theme CSS, s
 ```html
 <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
 <link href="css/app.css" rel="stylesheet" />
+<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
 ```
 
 Palette and global layout CSS normally go in `:root`. Component theme CSS goes on the generated `igc-*` selector or under a scoped wrapper selector.

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/references/common-patterns.md

@@ -46,6 +46,14 @@ Add a single `<link>` tag in your host page:
 <link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />
 ```
 
+### Additional
+
+Also add the Ignite UI runtime script before the Blazor framework script:
+
+```html
+<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
+```
+
 ### .NET 9+ Web App - use `Assets` collection
 
 ```razor

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/CHARTS-GRIDS.md

@@ -374,7 +374,7 @@ const currencyTemplate = (ctx: IgrCellContext<Order>) => (
 );
 
 const dateTemplate = (ctx: IgrCellContext<Order>) => (
-  <span>${(ctx.value as Date).toLocaleDateString()}</span>
+  <span>{(ctx.value as Date).toLocaleDateString()}</span>
 );
 
 const statusTemplate = (ctx: IgrCellContext<Order>) => {

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md

@@ -57,7 +57,7 @@ Use the tables below to map a UI need to the right React component. All componen
 | UI Need | Component | Import | Docs |
 |---|---|---|---|
 | Full calendar view | `IgrCalendar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/calendar) |
-| Date picker (popup calendar) | `IgrDatepicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-picker) |
+| Date picker (popup calendar) | `IgrDatePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-picker) |
 | Date range selection | `IgrDateRangePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-range-picker) |
 
 ### Notifications & Feedback
@@ -109,7 +109,7 @@ Use the tables below to map a UI need to the right React component. All componen
 | Simple scrollable list | `IgrList` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/list) |
 | Hierarchical / tree data | `IgrTree` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree) |
 | Tabular data (MIT, lightweight) | `IgrGridLite` | `igniteui-react/grid-lite` (requires both `igniteui-react` and `igniteui-grid-lite` packages) | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grid-lite/overview) |
-| Full-featured tabular data grid | `IgrDataGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/overview) |
+| Full-featured tabular data grid | `IgrGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/overview) |
 | Nested / master-detail grid | `IgrHierarchicalGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/hierarchical-grid/overview) |
 | Parent-child relational tree grid | `IgrTreeGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree-grid/overview) |
 | Cross-tabulation / BI pivot table | `IgrPivotGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/overview) |
@@ -156,8 +156,8 @@ Use the **Component Catalogue** tables above to find matching components. When i
 | Simple static list | `IgrList` | Data Grid |
 | Basic dropdown | `IgrSelect` | `IgrCombo` |
 | Searchable or multi-select dropdown | `IgrCombo` | `IgrSelect` |
-| Tabular data with basic display | `IgrGridLite` (grid-lite) | `IgrDataGrid` (commercial) |
-| Tabular data, advanced features needed | `IgrDataGrid` | `IgrGridLite` (grid-lite) |
+| Tabular data with basic display | `IgrGridLite` (grid-lite) | `IgrGrid` (commercial) |
+| Tabular data, advanced features needed | `IgrGrid` | `IgrGridLite` (grid-lite) |
 | Single dismissible message | `IgrToast` | `IgrSnackbar` |
 | Message requiring user action | `IgrSnackbar` | `IgrToast` |
 | Collapsible single section | `IgrExpansionPanel` | `IgrAccordion` |
@@ -249,7 +249,7 @@ function Dashboard() {
 
 - `IgrInput` — search bar
 - `IgrCombo` — filter dropdowns
-- `IgrGridLite` (grid-lite) or `IgrDataGrid` — tabular data
+- `IgrGridLite` (grid-lite) or `IgrGrid` — tabular data
 - `IgrButton` / `IgrIconButton` — actions
 - `IgrDialog` — confirm delete modal
 - `IgrBadge` — status indicators
@@ -269,7 +269,7 @@ function Dashboard() {
 - `IgrNavDrawer` — side navigation
 - `IgrCard` — KPI summary cards
 - `IgrTabs` or `IgrTileManager` — section layout
-- `IgrDataGrid` or `IgrPivotGrid` — detailed data tables
+- `IgrGrid` or `IgrPivotGrid` — detailed data tables
 - `IgrCategoryChart` — charts (from `igniteui-react-charts`)
 - `IgrLinearProgress` / `IgrCircularProgress` — loading indicators
 

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/EVENT-HANDLING.md

@@ -50,7 +50,7 @@ function MyForm() {
 | `IgrDialog` | `onClosed` | Dialog has closed |
 | `IgrTabs` | `onChange` | Active tab changes |
 | `IgrCalendar` | `onChange` | Selected date changes |
-| `IgrDatepicker` | `onChange` | Selected date changes |
+| `IgrDatePicker` | `onChange` | Selected date changes |
 
 ## TypeScript Event Types
 

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/JSX-PATTERNS.md

@@ -51,6 +51,7 @@ Ignite UI components use the web component **slot** mechanism under the hood. In
 Some components like the Data Grid support **render props** for custom cell rendering:
 
 ```tsx
+import { IgrBadge } from 'igniteui-react';
 import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
 
 function UserGrid({ users }: { users: User[] }) {
@@ -152,10 +153,9 @@ function MainLayout() {
   const location = useLocation();
 
   const handleTabChange = (e: CustomEvent) => {
-    const selectedIndex = (e.target as any).selectedIndex;
-    if (selectedIndex !== undefined && tabs[selectedIndex]) {
-      navigate(tabs[selectedIndex].path);
-    }
+    const selectedLabel = (e.detail as any).label as string;
+    const tab = tabs.find(t => t.label === selectedLabel);
+    if (tab) navigate(tab.path);
   };
 
   return (

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/REFS-FORMS.md

@@ -57,7 +57,7 @@ import { IgrInput, IgrSelect, IgrSelectItem, IgrButton } from 'igniteui-react';
 function SimpleForm() {
   const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     // e.preventDefault(); // optionally prevent default submit for custom handling
-    const formData = new FormData(e.target);
+    const formData = new FormData(e.currentTarget);
     console.log(formData.get('name'));       // input value
     console.log(formData.get('role'));       // selected option value
   };
@@ -84,7 +84,7 @@ Wire up Ignite UI form components with React state for controlled behavior:
 
 ```tsx
 import { useState } from 'react';
-import { IgrInput, IgrCheckbox, IgrSelect, IgrSelectItem } from 'igniteui-react';
+import { IgrInput, IgrCheckbox, IgrSelect, IgrSelectItem, IgrCheckboxChangeEventArgsDetail } from 'igniteui-react';
 
 function ProfileForm() {
   const [name, setName] = useState('');
@@ -101,7 +101,7 @@ function ProfileForm() {
 
       <IgrCheckbox
         checked={newsletter}
-        onChange={(e: CustomEvent<IgcCheckboxChangeEventArgs>) =>
+        onChange={(e: CustomEvent<IgrCheckboxChangeEventArgsDetail>) =>
           setNewsletter(e.detail.checked)
         }
       >
@@ -111,7 +111,7 @@ function ProfileForm() {
       <IgrSelect
         label="Role"
         value={role}
-        onChange={(e: CustomEvent<IgcSelectItemComponent>) =>
+        onChange={(e: CustomEvent<IgrSelectItem>) =>
           setRole(e.detail.value)
         }
       >
@@ -130,7 +130,7 @@ Ignite UI components are form-associated web components. You can integrate them
 
 ```tsx
 import { useForm, Controller } from 'react-hook-form';
-import { IgrInput, IgrCheckbox, IgrButton } from 'igniteui-react';
+import { IgrInput, IgrCheckbox, IgrButton, IgrCheckboxChangeEventArgsDetail } from 'igniteui-react';
 
 interface FormData {
   email: string;
@@ -172,7 +172,7 @@ function SignUpForm() {
         render={({ field }) => (
           <IgrCheckbox
             checked={field.value || false}
-            onChange={(e: CustomEvent<IgcCheckboxChangeEventArgs>) =>
+            onChange={(e: CustomEvent<IgrCheckboxChangeEventArgsDetail>) =>
               field.onChange(e.detail.checked)
             }
           >

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md

@@ -39,10 +39,10 @@ Component decision matrix (by visual pattern, domain-neutral):
 | Content blocks / summary cards | `IgrCard` | Use when card chrome helps match the panel shape and structure. Use `IgrCardHeader`, `IgrCardContent`, and `IgrCardActions`, or plain `<div>` containers for flat or highly custom tiles |
 | Any text input field | `IgrInput` | Use when the input anatomy matches the screenshot, including search fields and inline editors. Apply CSS to match the screenshot's border/radius style |
 | Dropdown or select | `IgrSelect` | Use when the screenshot clearly shows select/dropdown behavior |
-| Form fields with labels and inputs | `IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatepicker`, `IgrDateTimeInput` | Cover text, select, combo, and date/time inputs |
+| Form fields with labels and inputs | `IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatePicker`, `IgrDateTimeInput` | Cover text, select, combo, and date/time inputs |
 | Multi-step form / wizard | `IgrStepper` | Use when a sequence of steps is visually present |
 | Filter chips / tag inputs | `IgrChip` | Use when chip anatomy matches status badges, filter tags, or removable labels in the screenshot |
-| Calendar or date picker as a primary view element | `IgrCalendar`, `IgrDatepicker`, `IgrDateRangePicker` | Use when scheduling or date selection is the core UI |
+| Calendar or date picker as a primary view element | `IgrCalendar`, `IgrDatePicker`, `IgrDateRangePicker` | Use when scheduling or date selection is the core UI |
 | Top icon/action bar | `IgrNavbar` with `IgrButton` / `IgrIconButton` | Use when a navbar structure matches the screenshot; use plain icon buttons or custom containers when that is a closer fit |
 
 ## Chart Components
@@ -51,7 +51,7 @@ Component decision matrix (by visual pattern, domain-neutral):
 |---|---|---|
 | Area chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `areaFillOpacity` |
 | Line chart | `IgrCategoryChart` | `chartType`, `markerTypes` |
-| Column/bar chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `includedProperties` |
+| Column chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `includedProperties` |
 | Sparkline (mini chart) | `IgrSparkline` or `IgrDataChart` | `displayType`, `valueMemberPath`, sized container |
 | Pie/donut chart | `IgrPieChart` | `valueMemberPath`, `labelMemberPath` |
 | Financial chart | `IgrFinancialChart` | OHLC/candlestick data |
@@ -68,7 +68,7 @@ Decision rule:
 | UI Pattern | Ignite UI Component | Key Properties |
 |---|---|---|
 | Item list | `IgrList` | slot-based row content, selection, and dense list styling |
-| User avatar | `IgrAvatar` | `initials`, `shape`, `size` |
+| User avatar | `IgrAvatar` | `initials`, `shape`, `src` |
 | Status badge | `IgrBadge` | value/children plus token-based styling |
 | Icons | `IgrIcon` | icon name, collection, styling |
 | Progress bar | `IgrLinearProgress` | `value`, `max` |
@@ -91,7 +91,7 @@ Decision rule:
 | Text input | `IgrInput` | `label`, `placeholder`, `type` |
 | Dropdown select | `IgrSelect` | option children, label, value |
 | Searchable multi-select | `IgrCombo` | `data`, `displayKey`, `valueKey` |
-| Date picker | `IgrDatepicker` | value and label props |
+| Date picker | `IgrDatePicker` | value and label props |
 | Date/time input | `IgrDateTimeInput` | value, format options |
 | Toggle switch | `IgrSwitch` | checked state, change events |
 | Checkbox | `IgrCheckbox` | checked state, `indeterminate` |

package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-choose-components/SKILL.md

@@ -70,9 +70,6 @@ Ignite UI for Web Components is distributed across several packages depending on
 |---|---|---|---|
 | [`igniteui-webcomponents`](https://www.npmjs.com/package/igniteui-webcomponents) | MIT | `npm install igniteui-webcomponents` | General UI components (inputs, layouts, notifications, scheduling) |
 | [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
-| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
-| [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
-| [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
 | [`@infragistics/igniteui-webcomponents-grids`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-grids) | Commercial | `npm install @infragistics/igniteui-webcomponents-grids` (licensed) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
 | [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
 | [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
@@ -113,7 +110,7 @@ All inputs are form-associated and integrate natively with `<form>`.
 | On/off toggle | Switch | `<igc-switch>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch) |
 | Single choice from a list | Radio / Radio Group | `<igc-radio>` / `<igc-radio-group>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio) |
 | Star / score rating | Rating | `<igc-rating>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating) |
-| Formatted / masked text input | Mask Input | `<igc-mask-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) |
+| Formatted / masked text input | Mask Input | `<igc-mask-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/mask-input) |
 | Date and time input | Date Time Input | `<igc-date-time-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/date-time-input) |
 | File upload | File Input | `<igc-file-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/file-input) |
 | Simple dropdown / select | Select | `<igc-select>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/select) |
@@ -136,7 +133,7 @@ All inputs are form-associated and integrate natively with `<form>`.
 | UI Need | Component | Tag | Docs |
 |---|---|---|---|
 | Full calendar view | Calendar | `<igc-calendar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/calendar) |
-| Date picker (popup calendar) | Date Picker | `<igc-datepicker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-picker) |
+| Date picker (popup calendar) | Date Picker | `<igc-date-picker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-picker) |
 | Date range selection | Date Range Picker | `<igc-date-range-picker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker) |
 
 ### Notifications & Feedback
@@ -191,7 +188,7 @@ All inputs are form-associated and integrate natively with `<form>`.
 | Full-featured tabular data grid | Data Grid | `<igc-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview) |
 | Nested / master-detail grid | Hierarchical Grid | `<igc-hierarchical-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/hierarchical-grid/overview) |
 | Parent-child relational tree grid | Tree Grid | `<igc-tree-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree-grid/overview) |
-| Cross-tabulation / BI pivot table | Pivot Grid | `<igc-pivot-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/web-components/components/grids/pivot-grid/overview) |
+| Cross-tabulation / BI pivot table | Pivot Grid | `<igc-pivot-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview) |
 
 ### Charting & Visualization
 

package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-generate-from-image-design/references/component-mapping.md

@@ -51,9 +51,11 @@ Component decision matrix (by visual pattern, domain-neutral):
 |---|---|---|
 | Area chart | `IgcCategoryChartComponent` | `chartType`, `markerTypes`, `brushes`, `outlines` |
 | Line chart | `IgcCategoryChartComponent` | `chartType`, `markerTypes`, `brushes` |
-| Column/bar chart | `IgcCategoryChartComponent` or `IgcDataChartComponent` | `chartType`, `markerTypes`, series configuration |
+| Column chart | `IgcCategoryChartComponent` | `chartType`, `markerTypes`|
+| Bar chart | `IgcDataChartComponent` | `IgxBarSeriesComponent`, `valueMemberPath`, `argumentMemberPath` |
 | Sparkline (mini chart) | `IgcSparklineComponent` | `displayType`, `valueMemberPath` |
-| Pie/donut chart | `IgcPieChartComponent` / `IgcDoughnutChartComponent` | `valueMemberPath`, `labelMemberPath` |
+| Pie chart | `IgcPieChartComponent` | `valueMemberPath`, `labelMemberPath` |
+| Donut chart | `IgcDoughnutChartComponent` | `innerExtent`; bind data via child `IgcRingSeriesBaseComponent` with `valueMemberPath`, `labelMemberPath` |
 | Financial chart | `IgcFinancialChartComponent` | OHLC/candlestick data |
 | Complex multi-series | `IgcDataChartComponent` | multiple series plus axes |