igniteui-angular 21.2.0-rc.3 → 21.2.1

package/fesm2022/igniteui-angular-badge.mjs

@@ -31,9 +31,11 @@ const IgxBadgeType = {
  *
  * @example
  * ```html
- * <igx-avatar>
- *   <igx-badge icon="check" type="success"></igx-badge>
- * </igx-avatar>
+ * <div class="avatar-badge-container">
+ *  <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+ *  <igx-badge icon="check" type="success" shape="square"></igx-badge>
+ * </div>
+ * ```
  */
 class IgxBadgeComponent {
     constructor() {

package/fesm2022/igniteui-angular-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"igniteui-angular-badge.mjs","sources":["../../../projects/igniteui-angular/badge/src/badge/badge.component.ts","../../../projects/igniteui-angular/badge/src/badge/badge.component.html","../../../projects/igniteui-angular/badge/src/badge/badge.module.ts","../../../projects/igniteui-angular/badge/src/igniteui-angular-badge.ts"],"sourcesContent":["import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\n\nlet NEXT_ID = 0;\n\n/**\n * Determines the igxBadge type\n */\nexport const IgxBadgeType = {\n    PRIMARY: 'primary',\n    INFO: 'info',\n    SUCCESS: 'success',\n    WARNING: 'warning',\n    ERROR: 'error'\n} as const;\nexport type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];\n/**\n * Badge provides visual notifications used to decorate avatars, menus, etc.\n *\n * @igxModule IgxBadgeModule\n *\n * @igxTheme igx-badge-theme\n *\n * @igxKeywords badge, icon, notification\n *\n * @igxGroup Data Entry & Display\n *\n * @remarks\n * The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the\n * application when visual notification is needed. They are usually designed as icons with a predefined\n * style to communicate information, success, warnings, or errors.\n *\n * @example\n * ```html\n * <igx-avatar>\n *   <igx-badge icon=\"check\" type=\"success\"></igx-badge>\n * </igx-avatar>\n */\n@Component({\n    selector: 'igx-badge',\n    templateUrl: 'badge.component.html',\n    imports: [IgxIconComponent]\n})\nexport class IgxBadgeComponent {\n\n   /**\n    * Sets/gets the `id` of the badge.\n    *\n    * @remarks\n    * If not set, the `id` will have value `\"igx-badge-0\"`.\n    *\n    * @example\n    * ```html\n    * <igx-badge id=\"igx-badge-2\"></igx-badge>\n    * ```\n    */\n    @HostBinding('attr.id')\n    @Input()\n    public id = `igx-badge-${NEXT_ID++}`;\n\n   /**\n    * Sets/gets the type of the badge.\n    *\n    * @remarks\n    * Allowed values are `primary`, `info`, `success`, `warning`, `error`.\n    * Providing an invalid value won't display a badge.\n    *\n    * @example\n    * ```html\n    * <igx-badge type=\"success\"></igx-badge>\n    * ```\n    */\n    @Input()\n    public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;\n\n   /**\n    * Sets/gets the value to be displayed inside the badge.\n    *\n    * @remarks\n    * If neither a `value` nor an `icon` is set the content of the badge will be empty.\n    *\n    * @example\n    * ```html\n    * <igx-badge value=\"11\"></igx-badge>\n    * ```\n    */\n    @Input()\n    public value: string | number = '';\n\n    /**\n     * Sets/gets an icon for the badge from the material icons set.\n     *\n     * @remarks\n     * If neither a `value` nor an `icon` is set the content of the badge will be empty.\n     * Providing an invalid value won't display anything.\n     *\n     * @example\n     * ```html\n     * <igx-badge icon=\"check\"></igx-badge>\n     * ```\n     */\n    @Input()\n    public icon: string;\n\n    /**\n     * The name of the icon set. Used in case the icon is from a different icon set.\n     */\n    @Input()\n    public iconSet: string;\n\n    /**\n     * Sets/gets the role attribute value.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild(\"MyBadge\", { read: IgxBadgeComponent })\n     * public badge: IgxBadgeComponent;\n     *\n     * badge.role = 'status';\n     * ```\n     */\n    @HostBinding('attr.role')\n    public role = 'status';\n\n    /**\n     * Sets/gets the css class to use on the badge.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild(\"MyBadge\", { read: IgxBadgeComponent })\n     * public badge: IgxBadgeComponent;\n     *\n     * badge.cssClass = 'my-badge-class';\n     * ```\n     */\n    @HostBinding('class.igx-badge')\n    public cssClass = 'igx-badge';\n\n    /**\n     * Sets a square shape to the badge, if `shape` is set to `square`.\n     * By default the shape of the badge is rounded.\n     *\n     * @example\n     * ```html\n     * <igx-badge shape=\"square\"></igx-badge>\n     * ```\n     */\n    @Input()\n    public shape: 'rounded' | 'square' = 'rounded';\n\n    /** @hidden @internal */\n    @HostBinding('class.igx-badge--square')\n    public get _squareShape(): boolean {\n        if (!this.dot) {\n            return this.shape === 'square';\n        }\n    }\n\n    /**\n     * Sets/gets the aria-label attribute value.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild(\"MyBadge\", { read: IgxBadgeComponent })\n     * public badge: IgxBadgeComponent;\n     *\n     * badge.label = 'badge';\n     * ```\n     */\n    @HostBinding('attr.aria-label')\n    public label = 'badge';\n\n    /**\n     * Sets/gets whether the badge is outlined.\n     * Default value is `false`.\n     *\n     * @example\n     * ```html\n     * <igx-badge outlined></igx-badge>\n     * ```\n     */\n    @Input({transform: booleanAttribute})\n    @HostBinding('class.igx-badge--outlined')\n    public outlined = false;\n\n    /**\n     * Sets/gets whether the badge is displayed as a dot.\n     * When true, the badge will be rendered as a minimal 8px indicator without any content.\n     * Default value is `false`.\n     *\n     * @example\n     * ```html\n     * <igx-badge dot type=\"success\"></igx-badge>\n     * ```\n     */\n    @Input({transform: booleanAttribute})\n    @HostBinding('class.igx-badge--dot')\n    public dot = false;\n\n    /**\n     * Defines a human-readable, accessor, author-localized description for\n     * the `type` and the `icon` or `value` of the element.\n     *\n     * @hidden\n     * @internal\n     */\n    @HostBinding('attr.aria-roledescription')\n    public get roleDescription() {\n        if (this.icon) {\n            return this.type + ' type badge with icon type ' + this.icon;\n        } else if (this.value || this.value === 0) {\n            return this.type + ' badge type with value ' + this.value;\n        }\n        return this.type + ' badge type without value';\n    }\n\n    @HostBinding('class.igx-badge--info')\n    public get infoClass() {\n        return this.type === IgxBadgeType.INFO;\n    }\n\n    @HostBinding('class.igx-badge--success')\n    public get successClass() {\n        return this.type === IgxBadgeType.SUCCESS;\n    }\n\n    @HostBinding('class.igx-badge--warning')\n    public get warningClass() {\n        return this.type === IgxBadgeType.WARNING;\n    }\n\n    @HostBinding('class.igx-badge--error')\n    public get errorClass() {\n        return this.type === IgxBadgeType.ERROR;\n    }\n}\n","@if (value || value === 0 && !icon) {\n    <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n    <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n    <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { IgxBadgeComponent } from './badge.component';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    exports: [IgxBadgeComponent],\n    imports: [IgxBadgeComponent]\n})\nexport class IgxBadgeModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"igniteui-angular-badge.mjs","sources":["../../../projects/igniteui-angular/badge/src/badge/badge.component.ts","../../../projects/igniteui-angular/badge/src/badge/badge.component.html","../../../projects/igniteui-angular/badge/src/badge/badge.module.ts","../../../projects/igniteui-angular/badge/src/igniteui-angular-badge.ts"],"sourcesContent":["import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\n\nlet NEXT_ID = 0;\n\n/**\n * Determines the igxBadge type\n */\nexport const IgxBadgeType = {\n    PRIMARY: 'primary',\n    INFO: 'info',\n    SUCCESS: 'success',\n    WARNING: 'warning',\n    ERROR: 'error'\n} as const;\nexport type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];\n/**\n * Badge provides visual notifications used to decorate avatars, menus, etc.\n *\n * @igxModule IgxBadgeModule\n *\n * @igxTheme igx-badge-theme\n *\n * @igxKeywords badge, icon, notification\n *\n * @igxGroup Data Entry & Display\n *\n * @remarks\n * The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the\n * application when visual notification is needed. They are usually designed as icons with a predefined\n * style to communicate information, success, warnings, or errors.\n *\n * @example\n * ```html\n * <div class=\"avatar-badge-container\">\n *  <igx-avatar icon=\"person\" shape=\"circle\" size=\"small\"></igx-avatar>\n *  <igx-badge icon=\"check\" type=\"success\" shape=\"square\"></igx-badge>\n * </div>\n * ```\n */\n@Component({\n    selector: 'igx-badge',\n    templateUrl: 'badge.component.html',\n    imports: [IgxIconComponent]\n})\nexport class IgxBadgeComponent {\n\n   /**\n    * Sets/gets the `id` of the badge.\n    *\n    * @remarks\n    * If not set, the `id` will have value `\"igx-badge-0\"`.\n    *\n    * @example\n    * ```html\n    * <igx-badge id=\"igx-badge-2\"></igx-badge>\n    * ```\n    */\n    @HostBinding('attr.id')\n    @Input()\n    public id = `igx-badge-${NEXT_ID++}`;\n\n   /**\n    * Sets/gets the type of the badge.\n    *\n    * @remarks\n    * Allowed values are `primary`, `info`, `success`, `warning`, `error`.\n    * Providing an invalid value won't display a badge.\n    *\n    * @example\n    * ```html\n    * <igx-badge type=\"success\"></igx-badge>\n    * ```\n    */\n    @Input()\n    public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;\n\n   /**\n    * Sets/gets the value to be displayed inside the badge.\n    *\n    * @remarks\n    * If neither a `value` nor an `icon` is set the content of the badge will be empty.\n    *\n    * @example\n    * ```html\n    * <igx-badge value=\"11\"></igx-badge>\n    * ```\n    */\n    @Input()\n    public value: string | number = '';\n\n    /**\n     * Sets/gets an icon for the badge from the material icons set.\n     *\n     * @remarks\n     * If neither a `value` nor an `icon` is set the content of the badge will be empty.\n     * Providing an invalid value won't display anything.\n     *\n     * @example\n     * ```html\n     * <igx-badge icon=\"check\"></igx-badge>\n     * ```\n     */\n    @Input()\n    public icon: string;\n\n    /**\n     * The name of the icon set. Used in case the icon is from a different icon set.\n     */\n    @Input()\n    public iconSet: string;\n\n    /**\n     * Sets/gets the role attribute value.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild(\"MyBadge\", { read: IgxBadgeComponent })\n     * public badge: IgxBadgeComponent;\n     *\n     * badge.role = 'status';\n     * ```\n     */\n    @HostBinding('attr.role')\n    public role = 'status';\n\n    /**\n     * Sets/gets the css class to use on the badge.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild(\"MyBadge\", { read: IgxBadgeComponent })\n     * public badge: IgxBadgeComponent;\n     *\n     * badge.cssClass = 'my-badge-class';\n     * ```\n     */\n    @HostBinding('class.igx-badge')\n    public cssClass = 'igx-badge';\n\n    /**\n     * Sets a square shape to the badge, if `shape` is set to `square`.\n     * By default the shape of the badge is rounded.\n     *\n     * @example\n     * ```html\n     * <igx-badge shape=\"square\"></igx-badge>\n     * ```\n     */\n    @Input()\n    public shape: 'rounded' | 'square' = 'rounded';\n\n    /** @hidden @internal */\n    @HostBinding('class.igx-badge--square')\n    public get _squareShape(): boolean {\n        if (!this.dot) {\n            return this.shape === 'square';\n        }\n    }\n\n    /**\n     * Sets/gets the aria-label attribute value.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild(\"MyBadge\", { read: IgxBadgeComponent })\n     * public badge: IgxBadgeComponent;\n     *\n     * badge.label = 'badge';\n     * ```\n     */\n    @HostBinding('attr.aria-label')\n    public label = 'badge';\n\n    /**\n     * Sets/gets whether the badge is outlined.\n     * Default value is `false`.\n     *\n     * @example\n     * ```html\n     * <igx-badge outlined></igx-badge>\n     * ```\n     */\n    @Input({transform: booleanAttribute})\n    @HostBinding('class.igx-badge--outlined')\n    public outlined = false;\n\n    /**\n     * Sets/gets whether the badge is displayed as a dot.\n     * When true, the badge will be rendered as a minimal 8px indicator without any content.\n     * Default value is `false`.\n     *\n     * @example\n     * ```html\n     * <igx-badge dot type=\"success\"></igx-badge>\n     * ```\n     */\n    @Input({transform: booleanAttribute})\n    @HostBinding('class.igx-badge--dot')\n    public dot = false;\n\n    /**\n     * Defines a human-readable, accessor, author-localized description for\n     * the `type` and the `icon` or `value` of the element.\n     *\n     * @hidden\n     * @internal\n     */\n    @HostBinding('attr.aria-roledescription')\n    public get roleDescription() {\n        if (this.icon) {\n            return this.type + ' type badge with icon type ' + this.icon;\n        } else if (this.value || this.value === 0) {\n            return this.type + ' badge type with value ' + this.value;\n        }\n        return this.type + ' badge type without value';\n    }\n\n    @HostBinding('class.igx-badge--info')\n    public get infoClass() {\n        return this.type === IgxBadgeType.INFO;\n    }\n\n    @HostBinding('class.igx-badge--success')\n    public get successClass() {\n        return this.type === IgxBadgeType.SUCCESS;\n    }\n\n    @HostBinding('class.igx-badge--warning')\n    public get warningClass() {\n        return this.type === IgxBadgeType.WARNING;\n    }\n\n    @HostBinding('class.igx-badge--error')\n    public get errorClass() {\n        return this.type === IgxBadgeType.ERROR;\n    }\n}\n","@if (value || value === 0 && !icon) {\n    <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n    <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n    <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { IgxBadgeComponent } from './badge.component';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    exports: [IgxBadgeComponent],\n    imports: [IgxBadgeComponent]\n})\nexport class IgxBadgeModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "21.2.0-rc.3",
+  "version": "21.2.1",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -104,7 +104,7 @@
     }
   },
   "igxDevDependencies": {
-    "@igniteui/angular-schematics": "~21.2.1500-rc.3"
+    "@igniteui/angular-schematics": "~21.2.1500"
   },
   "ng-update": {
     "migrations": "./migrations/migration-collection.json",

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

@@ -6,6 +6,29 @@ user-invocable: true
 
 # Ignite UI for Angular — UI Components
 
+## Prerequisites
+- Angular 20+ project
+- `@angular/cli` installed
+- `igniteui-angular` or `@infragistics/igniteui-angular` added to the project via `ng add igniteui-angular` (or the `@infragistics` variant) or `npm install` — see [Package Variants](#package-variants) below.
+- A theme applied to the application (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md)).
+- `provideAnimations()` in `app.config.ts` — **required before using any overlay or animated component**
+- The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider
+
+> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)**
+>
+> Before using any Ignite UI CLI MCP tools, you MUST verify the MCP server is available
+> by calling `list_components`. If the tool is not available or the call fails,
+> you MUST automatically configure it by following the setup process steps described below.
+>
+> After writing the file, inform the user that the MCP server has been
+> configured and they may need to reload the editor for the tools to activate.
+> Start the MCP server and wait for that MCP server to start before continuing the component-related work.
+> Do NOT skip this step or ask the user to do it manually.
+
+## Setting Up the Ignite UI CLI MCP Server
+
+> **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.
+
 ## MANDATORY AGENT PROTOCOL — YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT
 
 **This file is a routing hub only. It contains NO code examples and NO API details.**
@@ -41,15 +64,6 @@ Base your code and explanation exclusively on what you read. If the reference fi
 
 ---
 
-## Prerequisites
-
-- Angular 20+ project
-- `@angular/cli` installed
-- `igniteui-angular` or `@infragistics/igniteui-angular` added to the project via `ng add igniteui-angular` (or the `@infragistics` variant) or `npm install` — see [Package Variants](#package-variants) below.
-- A theme applied to the application (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md)).
-- `provideAnimations()` in `app.config.ts` — **required before using any overlay or animated component**
-
-
 ## Package Variants
 
 | Package | Install | Who uses it |

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

@@ -15,6 +15,7 @@
 ## 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).
+This reference gives high-level guidance on when to use each chart type, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart component or feature you're interested in.
 
 ### Chart Component packages
 - `igniteui-angular-charts` — Category Chart, Financial Chart, Data Chart, and Pie Chart components (NPM)

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

@@ -16,6 +16,9 @@
 - [Progress Indicators](#progress-indicators)
 - [Chat (AI Chat Component)](#chat-ai-chat-component)
 
+## Overview
+This reference gives high-level guidance on when to use each data display component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
+
 ## List
 
 > **Docs:** [List Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list)
@@ -133,9 +136,10 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 ```html
 <!-- Image avatar with badge overlay -->
-<igx-avatar [src]="user.photo" shape="circle" size="large">
-  <igx-badge igxAvatarBadge [type]="'success'" [icon]="'check'"></igx-badge>
-</igx-avatar>
+<div class="avatar-badge-container">
+  <igx-avatar [src]="user.photo" shape="circle" size="large"></igx-avatar>
+  <igx-badge [type]="'success'" [icon]="'check'"></igx-badge>
+</div>
 
 <!-- Initials avatar -->
 <igx-avatar initials="JD" shape="circle"></igx-avatar>
@@ -147,8 +151,23 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 <igx-badge [type]="'error'" [value]="unreadCount"></igx-badge>
 ```
 
+```scss
+// Required styles to position the badge as an overlay on the avatar
+.avatar-badge-container {
+  position: relative;
+  display: inline-flex;
+
+  igx-badge {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: translate(25%, 25%);
+  }
+}
+```
+
 Avatar shapes: `'circle'`, `'rounded'`, `'square'`. Sizes: `'small'`, `'medium'`, `'large'`, or custom CSS.
-Badge types: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`.
+Badge types: `'primary'`, `'info'`, `'success'`, `'warning'`, `'error'`.
 
 ## Icon
 

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

@@ -11,6 +11,9 @@
 - [Tooltip](#tooltip)
 - [Drag and Drop](#drag-and-drop)
 
+## Overview
+This reference gives high-level guidance on when to use each directive, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific directive or feature you're interested in.
+
 ## Button & Icon Button
 
 > **Docs:** [Button Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button)

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

@@ -13,6 +13,9 @@
 - [Banner](#banner)
 - [Key Rules](#key-rules)
 
+## Overview
+This reference gives high-level guidance on when to use each feedback and overlay component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
+
 ## Dialog
 
 > **Docs:** [Dialog Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog)

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

@@ -18,6 +18,9 @@
 - [Reactive Forms Integration](#reactive-forms-integration)
 - [Key Rules](#key-rules)
 
+## Overview
+This reference gives high-level guidance on when to use each form control component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
+
 ## 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

@@ -9,6 +9,9 @@
 - [Dock Manager](#dock-manager)
 - [Tile Manager](#tile-manager)
 
+## Overview
+This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
+
 ---
 
 ## Layout Manager Directives

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

@@ -12,6 +12,9 @@
 - [Splitter](#splitter)
 - [Navigation Drawer](#navigation-drawer)
 
+## Overview
+This reference gives high-level guidance on when to use each layout component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
+
 ## Tabs
 
 > **Docs:** [Tabs Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)

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

@@ -0,0 +1,77 @@
+# Setting Up the Ignite UI CLI MCP Server
+
+> **Part of the [`igniteui-angular-components`](../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 CLI MCP server enables AI assistants to discover Ignite UI components, access component documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available.
+
+## VS Code
+
+Create or edit `.vscode/mcp.json` in your project:
+
+```json
+{
+  "servers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli@next", "mcp"]
+    }
+  }
+}
+```
+
+This works whether `igniteui-cli` 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-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli@next", "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-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli@next", "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-cli@next mcp`
+4. Click OK and restart the AI Assistant
+
+## Verifying the Setup
+
+After configuring the MCP server, ask your AI assistant:
+
+> "List all available Ignite UI components"
+
+If the MCP server is running, the `list_components` tool will return all available components for the detected framework.

package/types/igniteui-angular-badge.d.ts

@@ -29,9 +29,11 @@ type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
  *
  * @example
  * ```html
- * <igx-avatar>
- *   <igx-badge icon="check" type="success"></igx-badge>
- * </igx-avatar>
+ * <div class="avatar-badge-container">
+ *  <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+ *  <igx-badge icon="check" type="success" shape="square"></igx-badge>
+ * </div>
+ * ```
  */
 declare class IgxBadgeComponent {
     /**