igniteui-cli 15.2.2 → 15.3.0

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

@@ -9,18 +9,24 @@
 - [Package Requirements](#package-requirements)
 - [Import Patterns](#import-patterns)
 
+> **MCP lookup pattern (applies to all sections):**
+> - Find doc names → `list_components({ framework: "webcomponents", filter: "<keyword>" })`
+> - Usage examples and slots → `get_doc({ framework: "webcomponents", name: "<doc-name>" })`
+> - Find exact class names → `search_api({ platform: "webcomponents", query: "<keyword>" })`
+> - Full property/method/event API → `get_api_reference({ platform: "webcomponents", component: "<ClassName>" })`
+
 ## Dashboard & Layout Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Top navigation bar | `IgcNavbarComponent` | `slot="start"`, default slot, `slot="end"` |
-| Side navigation | `IgcNavDrawerComponent` | `open`, `position`, default slot, `slot="mini"` |
-| Content cards/panels | `IgcCardComponent` | `<igc-card-header>`, `<igc-card-content>`, `<igc-card-actions>` |
-| Tabbed content | `IgcTabsComponent` | `<igc-tab>` children, `alignment`, `activation` |
-| Accordion sections | `IgcAccordionComponent` | `IgcExpansionPanelComponent` children |
-| Split layouts | `IgcSplitterComponent` | pane-based layout, nested split regions |
-| Tile dashboard | `IgcTileManagerComponent` | drag/resize tiles |
-| IDE-style dock layout | `IgcDockManagerComponent` | floating/docking panels (Commercial) |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Top navigation bar | `IgcNavbarComponent` |
+| Side navigation | `IgcNavDrawerComponent` |
+| Content cards/panels | `IgcCardComponent` |
+| Tabbed content | `IgcTabsComponent` |
+| Accordion sections | `IgcAccordionComponent` |
+| Split layouts | `IgcSplitterComponent` |
+| Tile dashboard | `IgcTileManagerComponent` |
+| IDE-style dock layout | `IgcDockManagerComponent` |
 
 Decision rule:
 
@@ -47,17 +53,19 @@ Component decision matrix (by visual pattern, domain-neutral):
 
 ## Chart Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Area chart | `IgcCategoryChartComponent` | `chartType`, `markerTypes`, `brushes`, `outlines` |
-| Line chart | `IgcCategoryChartComponent` | `chartType`, `markerTypes`, `brushes` |
-| Column chart | `IgcCategoryChartComponent` | `chartType`, `markerTypes`|
-| Bar chart | `IgcDataChartComponent` | `IgxBarSeriesComponent`, `valueMemberPath`, `argumentMemberPath` |
-| Sparkline (mini chart) | `IgcSparklineComponent` | `displayType`, `valueMemberPath` |
-| 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 |
+> Use the lookup pattern above with `filter: "chart"` to find all chart doc names.
+
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Area chart | `IgcCategoryChartComponent` |
+| Line chart | `IgcCategoryChartComponent` |
+| Column chart | `IgcCategoryChartComponent` |
+| Bar chart | `IgcDataChartComponent` |
+| Sparkline (mini chart) | `IgcSparklineComponent` |
+| Pie chart | `IgcPieChartComponent` |
+| Donut chart | `IgcDoughnutChartComponent` |
+| Financial chart | `IgcFinancialChartComponent` |
+| Complex multi-series | `IgcDataChartComponent` |
 
 Decision rule:
 
@@ -67,17 +75,17 @@ Decision rule:
 
 ## Data Display Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Item list | `IgcListComponent` + `IgcListItemComponent` | `slot="title"`, `slot="subtitle"`, `slot="start"`, `slot="end"` |
-| User avatar | `IgcAvatarComponent` | `initials`, `shape`, `src` |
-| Status badge | `IgcBadgeComponent` | `value`, styling |
-| Icons | `IgcIconComponent` | `name`, `collection`, styling |
-| Progress bar | `IgcLinearProgressComponent` | `value`, `max` |
-| Circular progress | `IgcCircularProgressComponent` | `value`, `max` |
-| Flat data grid | `IgcGridComponent` | Grid Lite or full Data Grid depending features |
-| Hierarchical/tree data grid | `IgcTreeGridComponent` / `IgcHierarchicalGridComponent` | hierarchical data support |
-| Filter/tag chips | `IgcChipComponent` | `removable`, `selectable` |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Item list | `IgcListComponent` + `IgcListItemComponent` |
+| User avatar | `IgcAvatarComponent` |
+| Status badge | `IgcBadgeComponent` |
+| Icons | `IgcIconComponent` |
+| Progress bar | `IgcLinearProgressComponent` |
+| Circular progress | `IgcCircularProgressComponent` |
+| Flat data grid | `IgcGridComponent` |
+| Hierarchical/tree data grid | `IgcTreeGridComponent` / `IgcHierarchicalGridComponent` |
+| Filter/tag chips | `IgcChipComponent` |
 
 Decision rule:
 
@@ -88,42 +96,33 @@ Decision rule:
 
 ## Form & Input Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Text input | `IgcInputComponent` | `type`, `value`, prefix/suffix/helper slots |
-| Dropdown select | `IgcSelectComponent` | `<igc-select-item>` children, prefix/suffix slots |
-| Searchable multi-select | `IgcComboComponent` | data binding, display/value keys, selection mode |
-| Date picker | `IgcDatePickerComponent` | `value`, `min`, `max` |
-| Time or date-time entry | `IgcDateTimeInputComponent` | typed editing for date/time fields |
-| Toggle switch | `IgcSwitchComponent` | checked state, change events |
-| Checkbox | `IgcCheckboxComponent` | checked state, validation |
-| Radio button group | `IgcRadioGroupComponent` + `IgcRadioComponent` | grouped selection |
-| Slider | `IgcSliderComponent` | `min`, `max`, labels/ticks |
-| Multi-step wizard | `IgcStepperComponent` + `IgcStepComponent` | orientation, linear step flow |
-| Chip filter bar | `IgcChipComponent` or `IgcButtonGroupComponent` | choose based on chip versus segmented-control anatomy |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Text input | `IgcInputComponent` |
+| Dropdown select | `IgcSelectComponent` |
+| Searchable multi-select | `IgcComboComponent` |
+| Date picker | `IgcDatePickerComponent` |
+| Time or date-time entry | `IgcDateTimeInputComponent` |
+| Toggle switch | `IgcSwitchComponent` |
+| Checkbox | `IgcCheckboxComponent` |
+| Radio button group | `IgcRadioGroupComponent` + `IgcRadioComponent` |
+| Slider | `IgcSliderComponent` |
+| Multi-step wizard | `IgcStepperComponent` + `IgcStepComponent` |
+| Chip filter bar | `IgcChipComponent` or `IgcButtonGroupComponent` |
 
 ## Calendar & Scheduling Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Calendar view | `IgcCalendarComponent` | `value`, selection mode |
-| Date range picker | `IgcDateRangePickerComponent` | `value`, range selection |
-| Month/year picker | `IgcCalendarComponent` | month/year modes when the calendar UI is primary |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Calendar view | `IgcCalendarComponent` |
+| Date range picker | `IgcDateRangePickerComponent` |
+| Month/year picker | `IgcCalendarComponent` |
 
 ## Package Requirements
 
-The main `igniteui-webcomponents` package contains general UI components (list, avatar, navbar, drawer, card, badge, progress, icon, inputs, scheduling, layout, etc.).
-
-Additional packages may be required beyond the main package:
-
-| Capability | Additional packages |
-|---|---|
-| Lightweight tabular data | `igniteui-grid-lite` |
-| Advanced grids | `igniteui-webcomponents-grids` (trial) or `@infragistics/igniteui-webcomponents-grids` (licensed) |
-| Charts / sparklines | `igniteui-webcomponents-core` + `igniteui-webcomponents-charts` (trial) or licensed equivalents |
-| Dock manager | `igniteui-dockmanager` (trial) or `@infragistics/igniteui-dockmanager` (licensed) |
+See [`igniteui-wc-choose-components`](../../igniteui-wc-choose-components/SKILL.md) for the full package routing table (general UI, grids, charts, dock manager, trial vs. licensed).
 
-Install only the packages required by the components you actually selected. Resolve the exact package layout from the current workspace before installing or importing.
+Install only the packages required by the components you actually selected.
 
 ## Import Patterns
 

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

@@ -28,14 +28,21 @@ Do not assume everything comes from `igniteui-webcomponents`. Advanced grids, ch
 
 ## Chart Properties
 
+> **Always use the MCP lookup pattern before coding any chart.** Chart APIs are extensive and change between versions.
+> - Find doc names → `list_components({ framework: "webcomponents", filter: "chart" })`
+> - Usage examples and slots → `get_doc({ framework: "webcomponents", name: "<doc-name>" })`
+> - Find exact class names → `search_api({ platform: "webcomponents", query: "<keyword>" })`
+> - Full property/method/event API → `get_api_reference({ platform: "webcomponents", component: "<ClassName>" })`
+
 ### Markers shown by default
 Category charts can show markers by default. If the screenshot does not show markers, set `markerTypes` to the matching no-marker option documented for the component. Confirm the exact value shape from `get_doc`.
 
-### `plotAreaBackground` does NOT exist on `igc-category-chart`
-Use CSS to style the chart container background instead.
-
-### `areaFillOpacity` exists on `IgcCategoryChartComponent`
-It does NOT exist on `IgcSparklineComponent`.
+### `plotAreaBackground` and `areaFillOpacity` are inherited — not visible in `get_api_reference`
+Both properties exist but are defined on parent classes, so `get_api_reference({ platform: "webcomponents", component: "IgcCategoryChartComponent" })` will not list them. Use `search_api` to find them:
+```ts
+chart.plotAreaBackground = 'transparent';  // inherited from IgcSeriesViewerComponent
+chart.areaFillOpacity = 0.3;               // inherited from IgcDomainChartComponent (not on IgcSparklineComponent)
+```
 
 ### `includedProperties` must be a real array
 Assign it as an array through JavaScript or TypeScript, not as a serialized string:
@@ -74,9 +81,6 @@ igc-category-chart {
 
 ## Component Properties
 
-### Avatar shape is controlled by `shape`
-Use the supported `shape` API (`circle`, `rounded`, `square`, etc. as documented for the component).
-
 ### List item title and subtitle are slots
 Use the Web Components slot anatomy:
 ```html
@@ -94,11 +98,11 @@ Use the Web Components slot anatomy:
 ```
 
 ### Nav drawer width
-The drawer sizing hooks in the current implementation are `--menu-full-width` and `--menu-mini-width`:
+Width is controlled by two CSS custom properties exposed on the host — they are **not** design tokens and won't appear in `get_component_design_tokens`. Override them directly:
 ```css
 igc-nav-drawer {
-  --menu-full-width: <extracted-sidebar-width>;
-  --menu-mini-width: <extracted-mini-drawer-width>;
+  --menu-full-width: 280px;  /* default: 240px */
+  --menu-mini-width: 56px;   /* no default — collapses to content width if unset */
 }
 ```
 

package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-optimize-bundle-size/SKILL.md

@@ -97,92 +97,24 @@ For more details, see the [igniteui-wc-integrate-with-framework](../igniteui-wc-
 
 ## Analyzing Your Bundle
 
-### Using Webpack Bundle Analyzer
-
-**Installation:**
-
-```bash
-npm install --save-dev webpack-bundle-analyzer
-```
-
-**Configuration (`webpack.config.js`):**
-
-```javascript
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-module.exports = {
-  plugins: [
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      openAnalyzer: false,
-      reportFilename: 'bundle-report.html'
-    })
-  ]
-};
-```
-
-**Run analysis:**
-
-```bash
-npm run build
-# Open bundle-report.html to see what's included
-```
-
-### Using Vite Bundle Analyzer
-
-**Installation:**
+Use a bundle analyzer to identify what's being included before and after optimization.
 
+**Vite projects** — [rollup-plugin-visualizer](https://www.npmjs.com/package/rollup-plugin-visualizer):
 ```bash
 npm install --save-dev rollup-plugin-visualizer
 ```
+Add `visualizer()` to the Vite `plugins` array and run `npm run build`. The plugin opens a treemap in the browser.
 
-**Configuration (`vite.config.ts`):**
-
-```typescript
-import { defineConfig } from 'vite';
-import { visualizer } from 'rollup-plugin-visualizer';
-
-export default defineConfig({
-  plugins: [
-    visualizer({
-      open: true,
-      gzipSize: true,
-      brotliSize: true,
-    })
-  ]
-});
-```
-
-**Run analysis:**
-
+**Webpack projects** — [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer):
 ```bash
-npm run build
-# Opens stats.html automatically
+npm install --save-dev webpack-bundle-analyzer
 ```
+Add `BundleAnalyzerPlugin` to `webpack.config.js` plugins and run `npm run build`.
 
-### Using source-map-explorer
-
-**Installation:**
-
+**Framework-agnostic** — [source-map-explorer](https://www.npmjs.com/package/source-map-explorer):
 ```bash
 npm install --save-dev source-map-explorer
-```
-
-**Package.json:**
-
-```json
-{
-  "scripts": {
-    "analyze": "source-map-explorer 'dist/**/*.js'"
-  }
-}
-```
-
-**Run:**
-
-```bash
-npm run build
-npm run analyze
+# Then: source-map-explorer 'dist/**/*.js'
 ```
 
 ## Audit Your Component Usage
@@ -381,35 +313,14 @@ export class MyComponent {
 
 ## Route-Based Code Splitting
 
-Load components only for specific routes.
-
-### React Router
-
-```tsx
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { lazy, Suspense } from 'react';
-
-// Lazy load route components
-const HomePage = lazy(() => import('./pages/Home'));
-const DashboardPage = lazy(() => import('./pages/Dashboard'));
+Load Ignite UI components only for the routes that need them by placing `defineComponents(...)` calls inside the lazy-loaded route module for each framework.
 
-function App() {
-  return (
-    <BrowserRouter>
-      <Suspense fallback={<div>Loading...</div>}>
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/dashboard" element={<DashboardPage />} />
-        </Routes>
-      </Suspense>
-    </BrowserRouter>
-  );
-}
-```
+### React (using React.lazy)
 
-**In route component (`pages/Dashboard.tsx`):**
+Put component imports and `defineComponents` at the top of each page module. React's `lazy()` + `Suspense` handles the async split:
 
 ```tsx
+// pages/Dashboard.tsx
 import { IgrCard, IgrButton } from 'igniteui-react';
 
 function Dashboard() {
@@ -424,30 +335,11 @@ function Dashboard() {
 }
 ```
 
-### Vue Router
-
-```typescript
-// router/index.ts
-import { createRouter, createWebHistory } from 'vue-router';
-
-const routes = [
-  {
-    path: '/',
-    component: () => import('../views/Home.vue') // Lazy load
-  },
-  {
-    path: '/dashboard',
-    component: () => import('../views/Dashboard.vue') // Lazy load
-  }
-];
+Refer to your router's lazy-loading docs (React Router, TanStack Router, etc.) for how to split `pages/Dashboard` into its own chunk.
 
-export default createRouter({
-  history: createWebHistory(),
-  routes
-});
-```
+### Vue 3
 
-**In route component (`views/Dashboard.vue`):**
+Use `onMounted` to register components only when the route mounts:
 
 ```vue
 <script setup lang="ts">
@@ -461,109 +353,23 @@ onMounted(async () => {
 </script>
 ```
 
+Refer to Vue Router docs for the `() => import('./views/Dashboard.vue')` lazy-route syntax.
+
 ### Angular
 
-```typescript
-// app-routing.module.ts
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: 'dashboard',
-    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
-```
+Place `defineComponents(...)` inside the route's module or component so it's included only in that lazy chunk. Refer to Angular Router docs for `loadChildren` / `loadComponent` lazy loading.
 
 ## Build Configuration Optimizations
 
-### Vite Configuration
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  build: {
-    // Enable minification
-    minify: 'terser',
-    terserOptions: {
-      compress: {
-        drop_console: true, // Remove console.logs
-        drop_debugger: true
-      }
-    },
-
-    // Optimize chunk splitting
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          // Separate vendor chunks
-          'vendor': ['igniteui-webcomponents'],
-        }
-      }
-    },
-
-    // Set chunk size warning limit
-    chunkSizeWarningLimit: 600,
-  },
-
-  // Optimize deps
-  optimizeDeps: {
-    include: ['igniteui-webcomponents']
-  }
-});
-```
+Ensure your build tool is running in production mode with minification enabled. For Vite, this is the default for `vite build`. For Webpack, set `mode: 'production'`.
 
-### Webpack Configuration
-
-```javascript
-// webpack.config.js
-module.exports = {
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name: 'vendors',
-          priority: 10,
-        },
-        igniteui: {
-          test: /[\\/]node_modules[\\/]igniteui-webcomponents[\\/]/,
-          name: 'igniteui',
-          priority: 20,
-        }
-      }
-    },
-    minimize: true,
-  },
-
-  // Tree shaking
-  mode: 'production',
-};
-```
+To reduce chunk-size warnings from Ignite UI components, increase the `chunkSizeWarningLimit` in Vite or configure `splitChunks` in Webpack to place `igniteui-*` packages in a named vendor chunk. Consult your build tool's documentation for the exact configuration options.
 
 ## Size Comparison
 
-Here's what you can expect in terms of bundle size:
-
-| Import Strategy | Approximate Size (gzipped) | Components Included |
-|----------------|---------------------------|---------------------|
-| `defineAllComponents()` | ~500KB+ | All 60+ components |
-| 10 components via `defineComponents()` | ~150-200KB | 10 components + deps |
-| 5 components via `defineComponents()` | ~100-150KB | 5 components + deps |
-| 3 components via `defineComponents()` | ~80-120KB | 3 components + deps |
-| 1 component via `defineComponents()` | ~50-80KB | 1 component + deps |
+Actual sizes depend heavily on which components you import (grid and chart components are significantly larger than UI components). Use your bundle analyzer to measure the real impact in your project rather than relying on generic estimates.
 
-**Note:** Sizes vary based on which components you import (some have more dependencies than others).
+The key rule: importing a subset of components with `defineComponents()` instead of `defineAllComponents()` will reduce the bundle by the weight of every component you don't include, plus all of their exclusive dependencies.
 
 ## Best Practices Checklist
 
@@ -634,64 +440,7 @@ import type { IgcButtonComponent } from 'igniteui-webcomponents';
 
 ## Monitoring Bundle Size
 
-### Set up bundle size monitoring in CI/CD
-
-**Using bundlesize (for any build tool):**
-
-```bash
-npm install --save-dev bundlesize
-```
-
-**Package.json:**
-
-```json
-{
-  "scripts": {
-    "test:size": "bundlesize"
-  },
-  "bundlesize": [
-    {
-      "path": "./dist/**/*.js",
-      "maxSize": "300 kB"
-    }
-  ]
-}
-```
-
-**Run in CI:**
-
-```bash
-npm run build
-npm run test:size
-```
-
-### GitHub Actions Example
-
-```yaml
-name: Bundle Size Check
-
-on: [pull_request]
-
-jobs:
-  size:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-      - run: npm ci
-      - run: npm run build
-      - run: npm run test:size
-```
-
-## Expected Results
-
-After optimization, you should see:
-
-- **Initial load time reduced** by 40-60%
-- **Bundle size reduced** by 50-80%
-- **Better Core Web Vitals** scores
-- **Faster time to interactive**
-- **Lower bandwidth usage** for users
+For ongoing bundle size monitoring in CI, tools like [bundlesize](https://www.npmjs.com/package/bundlesize), [size-limit](https://www.npmjs.com/package/size-limit), or the [Bundlewatch GitHub Action](https://github.com/apps/bundlewatch) can fail a pull request when the bundle exceeds a defined threshold. Configure a size limit appropriate for your project's component set after you've completed the import optimization.
 
 ## Next Steps
 

package/templates/webcomponents/igc-ts/projects/empty/index.js

@@ -31,7 +31,7 @@ class EmptyPageTemplate extends _base_with_home_1.BaseWithHomeIgcProject {
         super(...arguments);
         this.id = "empty";
         this.name = "Empty Project";
-        this.description = "Project structure with routing and a home page";
+        this.description = "Starter project with routing and a home page";
         this.framework = "webcomponents";
         this.projectType = "igc-ts";
         this.hasExtraConfiguration = false;

package/templates/webcomponents/igc-ts/projects/side-nav/files/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en-GB">
+
+<head>
+  <meta charset="utf-8">
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Ignite UI for Web Components</title>
+  <link rel="icon" type="image/png" href="./src/assets/wc.png">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/material.css">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+
+<body class="ig-scrollbar">
+  <app-root></app-root>
+
+  <script type="module" src="./src/index.ts"></script>
+</body>
+
+</html>

package/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app-routing.ts

@@ -0,0 +1,9 @@
+import { type Route } from '@vaadin/router';
+import './home/home.js';
+import './not-found/not-found.js';
+
+export const routes: Array<Route & { name?: string; icon?: string }> = [
+  { path: '/', component: 'app-home', name: 'Home', icon: 'home' },
+  // The fallback route should always be after other alternatives.
+  { path: '(.*)', component: 'app-not-found' },
+];