igniteui-angular 22.1.0-beta.0 → 22.1.0-beta.1

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

@@ -14,22 +14,12 @@ This skill teaches AI agents how to theme Ignite UI for Angular applications usi
 
 - An Angular project with `igniteui-angular` installed, **or** `@infragistics/igniteui-angular` for licensed users
 - Sass support enabled in the project (default for Angular CLI projects)
-- The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider
 
-> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)**
->
-> Before using any theming tools, you MUST verify the MCP server is available
-> by calling `detect_platform`. 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 theming related work.
-> Do NOT skip this step or ask the user to do it manually.
+## Ignite UI Theming MCP Server (recommended, not required)
 
-## Setting Up the Theming MCP Server
+The `igniteui-theming` MCP server generates production-ready theme code (`create_theme`, `create_palette`, `create_component_theme`, `get_component_design_tokens`, `get_color`, and more). When its tools are available, prefer them over writing theme Sass from memory — start by calling `detect_platform`.
 
-> **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.
+If the tools are not available, do not block the task — use the manual Sass workflow in this file. Suggest that the user run `npx -y igniteui-cli ai-config` from the project root (it configures both the `igniteui-cli` and `igniteui-theming` MCP servers) and reload the editor. MCP servers cannot be started mid-session; the configuration takes effect on the next session. Editor-specific details are in [`references/mcp-setup.md`](./references/mcp-setup.md).
 
 ## Theming Architecture
 
@@ -85,7 +75,7 @@ All files are located under `node_modules/igniteui-angular/styles/` (or `node_mo
 
 ## Custom Sass Theme (Manual)
 
-> **AGENT INSTRUCTION — Sass Theming Docs**: If the user explicitly asks to build a Sass-based theme or configure Sass, refer to the dedicated Sass documentation:
+> **Important — Sass Theming Docs**: If the user explicitly asks to build a Sass-based theme or configure Sass, refer to the dedicated Sass documentation:
 >
 > - [Sass Theming Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index)
 > - [Sass Configuration](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/configuration)
@@ -133,37 +123,7 @@ $dark-palette: palette(
 
 Override individual component appearance using component theme functions and the `tokens` mixin.
 
-> **AGENT INSTRUCTION — No Hardcoded Colors (CRITICAL)**
->
-> Once a palette has been generated (via `palette()` in Sass or `create_palette` / `create_theme` via MCP),
-> **every color reference MUST come from the generated palette tokens** — never hardcode hex/RGB/HSL values.
->
-> Use `var(--ig-primary-500)`, `var(--ig-secondary-300)`, `var(--ig-surface-500)`, etc. in CSS,
-> or the `get_color` MCP tool to obtain the correct token reference.
->
-> **WRONG** (hardcoded hex — breaks theme switching, ignores the palette):
->
-> ```scss
-> $custom-avatar: avatar-theme(
->   $background: #e91e63,
->   $color: #ffffff,
-> );
-> ```
->
-> **RIGHT** (palette token — stays in sync with the theme):
->
-> ```scss
-> $custom-avatar: avatar-theme(
->   $schema: $light-material-schema,
->   $background: var(--ig-primary-500),
->   $color: var(--ig-primary-500-contrast),
-> );
-> ```
->
-> This applies to **all** style code: component themes, custom CSS rules, Sass variables used
-> for borders/backgrounds/text, Angular `host` bindings, and inline styles.
-> The only place raw hex values belong is the **initial `palette()` call** that seeds the color system.
-> Everything downstream must reference the palette.
+All color values passed to component themes must be palette tokens, not raw hex/RGB/HSL — see [No Hardcoded Colors After Palette Generation](#no-hardcoded-colors-after-palette-generation) below.
 
 ```scss
 @use 'igniteui-angular/theming' as *;
@@ -244,7 +204,7 @@ igx-avatar {
 
 The Ignite UI Theming MCP server provides tools for AI-assisted theme code generation.
 
-> **IMPORTANT — File Safety Rule**: When generating or updating theme code, **never overwrite existing style files directly**. Instead, always **propose the changes as an update** and let the user review and approve before writing to disk. If a `styles.scss` (or any target file) already exists, show the generated code as a diff or suggestion rather than replacing the file contents. This prevents accidental loss of custom styles the user has already written.
+> **File safety**: When applying generated theme code to an existing style file, make targeted edits that preserve the user's existing custom styles — never wholesale-replace the file contents. If the environment does not gate file writes behind user approval, present the change as a diff for review before writing.
 
 Always follow this workflow:
 
@@ -297,11 +257,6 @@ Params: {
 }
 ```
 
-> **Reminder**: After a palette is generated, all token values passed to
-> `create_component_theme` must reference palette CSS custom properties
-> (e.g., `var(--ig-primary-500)`, `var(--ig-secondary-A200)`,
-> `var(--ig-gray-100)`). Never pass raw hex values like `"#E3F2FD"`.
-
 ### Step 4 — Generate a Palette
 
 For simple mid-luminance base colors:
@@ -327,9 +282,9 @@ Tool: set_spacing  → { spacing: 0.75, component: "grid" }
 Tool: set_roundness → { radiusFactor: 0.8 }
 ```
 
-### Step 6 — Reference Palette Colors (MANDATORY for All Color Usage)
+### Step 6 — Reference Palette Colors via `get_color`
 
-After a palette is generated, **always** use the `get_color` tool to obtain the correct CSS custom property reference. Never hardcode hex/RGB/HSL values in component themes, custom CSS, or Sass variables.
+After a palette is generated, use the `get_color` tool to obtain the correct CSS custom property reference for any color you need (see [No Hardcoded Colors After Palette Generation](#no-hardcoded-colors-after-palette-generation)):
 
 ```
 Tool: get_color
@@ -343,14 +298,6 @@ Params: { color: "primary", opacity: 0.5 }
 → hsl(from var(--ig-primary-500) h s l / 0.5)
 ```
 
-Use these token references everywhere:
-- Component theme `tokens` values
-- Custom CSS rules (`color`, `background`, `border-color`, `fill`, `stroke`, etc.)
-- Sass variables for derived values (`$sidebar-bg: var(--ig-surface-500);`)
-- Angular `host` style bindings
-
-The **only** place raw hex values are acceptable is in the initial `palette()` call or the `create_palette` / `create_theme` MCP tool inputs that seed the color system.
-
 ### Loading Reference Data
 
 Use `read_resource` with these URIs for preset values and documentation:
@@ -365,9 +312,9 @@ Use `read_resource` with these URIs for preset values and documentation:
 | `theming://guidance/colors/rules` | Light/dark theme rules         |
 | `theming://platforms/angular`     | Angular platform specifics     |
 
-## Referencing Colors in Custom Styles
+## No Hardcoded Colors After Palette Generation
 
-After a theme is applied, the palette is available as CSS custom properties on `:root`. Use these tokens in all custom CSS — never introduce standalone hex/RGB variables for colors that the palette already provides.
+This is the single most important theming rule. Once a palette exists (via `palette()` in Sass or `create_palette` / `create_theme` via MCP), every color reference must come from the palette tokens, which are available as CSS custom properties on `:root`. This applies to all style code: component theme `tokens` values, custom CSS rules (`color`, `background`, `border-color`, `fill`, `stroke`), Sass variables for derived values, Angular `host` bindings, and inline styles. Hardcoded values break theme switching and drift out of sync when the palette changes.
 
 ### Correct: Palette Tokens
 
@@ -420,7 +367,7 @@ Everything else must use `var(--ig-<family>-<shade>)` tokens.
 
 ## Key Rules
 
-1. **Never overwrite existing files directly** — always propose theme code as an update for user review; do not replace existing style files without confirmation
+1. **Preserve existing styles** — apply theme code as targeted edits to existing style files; never wholesale-replace a file the user has customized
 2. **Always call `detect_platform` first** when using MCP tools
 3. **Always call `get_component_design_tokens` before `create_component_theme`** to discover valid token names
 4. **Palette shades 50 = lightest, 900 = darkest** for all chromatic colors — never invert for dark themes (only gray inverts)
@@ -428,7 +375,7 @@ Everything else must use `var(--ig-<family>-<shade>)` tokens.
 6. **Use `@include core()` once** before `@include theme()` in your global styles
 7. **Component themes use `@include tokens($theme)`** inside a selector to emit CSS custom properties
 8. **For compound components**, follow the full checklist returned by `get_component_design_tokens` — theme each child component with its scoped selector
-9. **Never hardcode colors after palette generation** — once a palette is created, every color in component themes, custom CSS, and Sass variables must use `var(--ig-<family>-<shade>)` palette tokens (e.g., `var(--ig-primary-500)`, `var(--ig-gray-200)`). Raw hex/RGB/HSL values are only acceptable in the initial `palette()` seed call. This ensures themes remain consistent, switchable (light/dark), and maintainable
+9. **No hardcoded colors after palette generation** — see [No Hardcoded Colors After Palette Generation](#no-hardcoded-colors-after-palette-generation); raw hex/RGB/HSL is only acceptable in the initial palette seed values
 
 ## Related Skills
 

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

@@ -2,40 +2,29 @@
 
 > **Part of the [`igniteui-angular-theming`](../SKILL.md) skill hub.**
 
-## Contents
+The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in the editor/agent before the theming tools become available, and the editor or agent session must be restarted afterwards — MCP servers cannot be hot-loaded into a running session.
 
-- [VS Code](#vs-code)
-- [Cursor](#cursor)
-- [Claude Desktop](#claude-desktop)
-- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides)
-- [Verifying the Setup](#verifying-the-setup)
+> Depending on the client, MCP tool names may appear with a server prefix (e.g. `mcp__igniteui-theming__detect_platform` in Claude Code). This skill refers to tools by their bare names.
 
-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.
+## Recommended: One-Command Setup
 
-## VS Code
+From the project root:
 
-Create or edit `.vscode/mcp.json` in your project:
-
-```json
-{
-  "servers": {
-    "igniteui-theming": {
-      "command": "npx",
-      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
-    }
-  }
-}
+```bash
+npx -y igniteui-cli ai-config
 ```
 
-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.
+This configures **both** the `igniteui-theming` and `igniteui-cli` MCP servers, copies the Ignite UI Agent Skills into the project, and preserves any existing server entries in the config files. Inline options such as `--agents claude copilot` and `--assistants vscode cursor` select which agents and editors to configure.
+
+## Manual Configuration (fallback)
 
-## Cursor
+Use these only when `ai-config` is unavailable or your editor is not covered by it.
 
-Create or edit `.cursor/mcp.json`:
+### VS Code — `.vscode/mcp.json`
 
 ```json
 {
-  "mcpServers": {
+  "servers": {
     "igniteui-theming": {
       "command": "npx",
       "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
@@ -44,11 +33,15 @@ Create or edit `.cursor/mcp.json`:
 }
 ```
 
-## Claude Desktop
+`npx -y` works whether `igniteui-theming` is installed locally in `node_modules` or needs to be pulled from the npm registry.
 
-Edit the Claude Desktop config file:
-- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
-- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+### Claude Code
+
+```bash
+claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp
+```
+
+### Cursor — `.cursor/mcp.json`
 
 ```json
 {
@@ -61,17 +54,21 @@ Edit the Claude Desktop config file:
 }
 ```
 
-## WebStorm / JetBrains IDEs
+### Claude Desktop
+
+Edit the Claude Desktop config file (**macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`, **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`) and add the same `mcpServers` entry as shown for Cursor above.
+
+### 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`
+3. Set Command to `npx` and Arguments to `-y 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:
+After restarting the editor/session, ask the 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`).
+If the MCP server is running, the `detect_platform` tool will analyze `package.json` and return the detected platform (e.g., `angular`).

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injector, AfterRenderRef, EventEmitter, OnDestroy, ElementRef, Type, ViewContainerRef, ComponentRef, NgZone, QueryList, ChangeDetectorRef, TemplateRef, PipeTransform, DestroyRef, Provider } from '@angular/core';
+import { InjectionToken, Injector, AfterRenderRef, NgZone, EventEmitter, OnDestroy, ElementRef, Type, ViewContainerRef, ComponentRef, QueryList, ChangeDetectorRef, TemplateRef, PipeTransform, DestroyRef, Provider } from '@angular/core';
 import * as rxjs from 'rxjs';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { AnimationReferenceMetadata, AnimationPlayer as AnimationPlayer$1 } from '@angular/animations';
@@ -707,8 +707,14 @@ interface IgxGestureEvent {
  * @internal
  */
 interface IgxTouchManagerCallbacks {
-    /** Fired on pointer down once the pointer type passes the configured filter, before any movement. */
-    pointerDown?: (event: IgxGestureEvent) => void;
+    /**
+     * Fired on pointer down once the pointer type passes the configured filter, before any movement.
+     *
+     * Return `false` to veto the gesture (e.g. when the touch does not start in an active zone).
+     * The manager then stops tracking immediately and best-effort releases the pointer capture, so
+     * normal page/component scrolling is not blocked by the `touchmove` listener.
+     */
+    pointerDown?: (event: IgxGestureEvent) => boolean | void;
     /** Fired on the first pointer move of a tracked gesture, once movement begins (mirrors Hammer's `panstart`). */
     panStart?: (event: IgxGestureEvent) => void;
     /** Fired on each pointer move while a gesture is tracked. */
@@ -737,14 +743,28 @@ interface IgxTouchManagerOptions {
     tapThreshold?: number;
     /** Minimum velocity (in px/ms) for a primarily horizontal gesture to be recognized as a swipe. Defaults to `0.3`. */
     swipeVelocityThreshold?: number;
+    /**
+     * Predicate evaluated on pointer down. When it returns `false` the gesture is not tracked at all,
+     * so no pointer capture is taken and the native scrolling of the page is not prevented.
+     * Defaults to always tracking.
+     */
+    canStart?: (event: PointerEvent) => boolean;
+    /**
+     * When provided, the listeners are attached outside of the Angular zone so that the high frequency
+     * `panMove` callback does not trigger change detection. The remaining callbacks are still invoked
+     * inside the Angular zone.
+     */
+    ngZone?: NgZone;
 }
 /**
  * Lightweight, zoneless pointer-based gesture manager.
  *
  * Consolidates the pan/swipe/tap recognition logic shared across components
  * (carousel, navigation drawer, list item, time picker) on top of native
- * Pointer Events. It does not depend on `NgZone`; consumers update their own
- * state inside the provided callbacks.
+ * Pointer Events. It does not require `NgZone`; consumers update their own
+ * state inside the provided callbacks. An `NgZone` can optionally be supplied so
+ * that the listeners are attached outside of Angular and only the discrete
+ * callbacks re-enter it, keeping continuous dragging free of change detection.
  *
  * Outside of a browser environment (e.g. during server-side rendering) it is a
  * noop: no listeners are attached and no callbacks are invoked, so consumers can
@@ -779,16 +799,23 @@ declare class IgxTouchManager {
     private readonly _setPointerCapture;
     private readonly _tapThreshold;
     private readonly _swipeVelocityThreshold;
+    private readonly _canStart;
+    private readonly _ngZone;
     constructor(target: EventTarget, callbacks: IgxTouchManagerCallbacks, options?: IgxTouchManagerOptions);
     /** Detaches all listeners and stops tracking. */
     destroy(): void;
     private _accepts;
+    private _runOutsideAngular;
+    /** Invokes a discrete (low frequency) callback back inside the Angular zone, when one is provided. */
+    private _runInAngular;
     private _createEvent;
     private _onPointerDown;
     private _onPointerMove;
     private _onPointerUp;
     private _onPointerCancel;
     private _onTouchMove;
+    /** Stops tracking the current gesture and best-effort releases the pointer capture. */
+    private _stopTracking;
 }
 
 interface AnimationService {

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

@@ -68,6 +68,7 @@ declare class IgxListItemComponent implements IListChild, OnInit, OnDestroy {
     list: IgxListBaseDirective;
     private elementRef;
     private _renderer;
+    private _zone;
     /**
      * @hidden
      */
@@ -293,6 +294,10 @@ declare class IgxListItemComponent implements IListChild, OnInit, OnDestroy {
      * @hidden
      */
     ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    private get panningAllowed();
     /**
      * @hidden
      */