Merge branch 'vnext' into jp-sync/dock-manager-i18n-peer-dep-6cc0581559368056

Author: gedinakova

.github/workflows/build-angular.yml

@@ -10,20 +10,16 @@ on:
     branches: [ master, vnext ]
 
 jobs:
-  build:
+  build-angular:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x, 18.x]
-
     steps:
     - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js 22.x
       uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: 22.x
     - name: Install packages
       run: npm ci
     - name: DotNet tool restore

.github/workflows/build-blazor.yml

@@ -10,20 +10,16 @@ on:
     branches: [ master, vnext ]
 
 jobs:
-  build:
+  build-blazor:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x, 18.x]
-
     steps:
     - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js 22.x
       uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: 22.x
     - name: Install packages
       run: npm ci
     - name: DotNet tool restore

.github/workflows/build-react.yml

@@ -10,20 +10,16 @@ on:
     branches: [ master, vnext ]
 
 jobs:
-  build:
+  build-react:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x, 18.x]
-
     steps:
     - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js 22.x
       uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: 22.x
     - name: Install packages
       run: npm ci
     - name: DotNet tool restore

.github/workflows/build-wc.yml

@@ -10,20 +10,16 @@ on:
     branches: [ master, vnext ]
 
 jobs:
-  build:
+  build-wc:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x, 18.x]
-
     steps:
     - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js 22.x
       uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: 22.x
     - name: Install packages
       run: npm ci
     - name: DotNet tool restore

doc/en/components/ai/skills.md

@@ -57,6 +57,16 @@ npx -y igniteui-theming igniteui-theming-mcp
 > [!NOTE]
 > The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention.
 
+<!-- Angular -->
+### How version resolution works
+
+Because `igniteui-theming` is a dependency of `igniteui-angular`, it is already present in your `node_modules` after `npm install`. When you run the launch command above, `npx` detects the locally installed copy and runs it directly — no network request is made. This means the MCP server version always stays in sync with the rest of your Ignite UI packages.
+
+If you run the command outside a project (or before running `npm install`), `npx -y` downloads the **latest** version from npm into a temporary cache instead. The server will still start, but `detect_platform` will return `generic` since there is no `package.json` to inspect.
+
+Choose your AI client below for the specific configuration steps.
+<!-- end: Angular -->
+
 ### VS Code
 
 GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root:
@@ -245,6 +255,11 @@ Here is a brief overview of each tool:
 > [!NOTE]
 > For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector.
 
+<!-- Angular -->
+> [!NOTE]
+> If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly.
+<!-- end: Angular -->
+
 ## Example Scenarios
 
 The following scenarios show what you can ask the AI to do once the MCP server is connected.
@@ -255,6 +270,29 @@ The following scenarios show what you can ask the AI to do once the MCP server i
 
 The AI will call `create_theme` and return a ready-to-use `styles.scss` file. The generated output will look similar to this:
 
+<!-- Angular -->
+```scss
+/* styles.scss */
+@use 'igniteui-angular/theming' as *;
+
+$my-palette: palette(
+  $primary: #2563eb,
+  $secondary: #f97316,
+  $surface: #fff,
+  $gray: #9e9e9e,
+);
+
+$my-typography: typography(
+  $font-family: 'Roboto, sans-serif',
+);
+
+@include core();
+@include typography($my-typography);
+@include theme($my-palette, $schema: $light-material-schema);
+```
+<!-- end: Angular -->
+
+<!-- React, WebComponents -->
 ```scss
 /* styles.scss */
 @use 'igniteui-theming' as *;
@@ -274,6 +312,7 @@ $my-palette: palette(
   $type-scale: $material-type-scale
 );
 ```
+<!-- end: React, WebComponents -->
 
 ### Dark Mode Variant
 
@@ -283,7 +322,7 @@ $my-palette: palette(
 
 > _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_
 
-The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest.
+The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest.<!-- Angular --> See [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes) for more detail on shade generation.<!-- end: Angular-->
 
 ### Component-Level Customization
 
@@ -301,7 +340,7 @@ The AI will call `set_spacing` scoped to the calendar component and `set_size` a
 
 **Platform not detected**
 
-If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-react`) as a dependency. You can also tell the AI explicitly: _"Use {ProductName}."_
+If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `{PackageCommon}`) as a dependency. You can also tell the AI explicitly: _"Use the {Platform} platform."_
 
 **Luminance warning on colors**
 
@@ -311,9 +350,36 @@ If the AI warns about color luminance, it means the chosen color is too light or
 
 For light themes use a light surface (e.g., `#fafafa`). For dark themes use a dark surface (e.g., `#121212`). Mismatched surface colors cause the AI to emit a warning.
 
+<!-- Angular -->
+**Generated Sass does not compile**
+
+Ensure `igniteui-angular` and `igniteui-theming` are installed:
+
+```bash
+ng add igniteui-angular
+```
+
+Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index">) for the correct file setup.
+<!-- end: Angular -->
+
 ## Additional Resources
 
 - [{ProductName} Skills](./skills.md)
+
+<!-- Ideally these should be included once documentation is combined
+- [Theming Overview](../themes/index.md)
+- [Palettes](../themes/palettes.md)
+- [Typography](../themes/typography.md)
+- [Elevations](../themes/elevations.md)
+- [Spacing](../themes/spacing.md)
+- [Roundness](../themes/roundness.md)
+- [Theming with Sass](../themes/sass/index.md)
+-->
+
+<div class="divider--half"></div>
+
+Our community is active and always welcoming to new ideas.
+
 - [{ProductName} **Forums**]({ForumsLink})
 - [{ProductName} **GitHub**]({GithubLink})
 

doc/en/components/ai/theming-mcp.md

@@ -13,6 +13,25 @@ All notable changes for each version of {ProductName} are documented on this pag
 
 ## **{PackageVerLatest}**
 
+### {PackageCommon}
+
+#### Changed
+
+- `DockManager`: Updated to use the latest `igniteui-dockmanager@2.1.0` with new `minResizeWidth` and `minResizeHeight` properties, `paneFlyoutToggle` event; additional `layoutChange` event detail and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-dockmanager/blob/master/CHANGELOG.md#210).
+- Updated to use the latest `igniteui-webcomponents@7.1.0` including new `Splitter` and `Highlight` container components and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md#710---2026-03-19).
+
+#### New Features
+
+- #### AI-Assisted Development - Agent Skills
+  - Structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for React.
+  - The skill files are included in the `igniteui-react` package and also live in the [skills/](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory:
+    - **components** - Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, etc.
+    - **customize-theme** - Customize styling using CSS custom properties, Sass, and the theming system in React, including using Ignite UI Theming MCP server.
+    - **optimize-bundle-size** - Reduce bundle size with granular imports, tree-shaking, and lazy loading.
+  - These skills are automatically discovered when placed in the agent's skills path (e.g. `.agents/skills` or `.claude/skills`).
+
+## **{PackageVerChanges-26-2-MAR}**
+
 ### Bug Fixes
 
 | Bug Number | Control | Description |
@@ -476,7 +495,8 @@ Please note that the maximum size available for the icons is 24x24. You can prov
 |37244 | Excel Library | Custom Data Validation is not working.|
 
 ## **{PackageVerChanges-24-2-APR2}**
-> [!Note]With 19.0.0 the React product introduces many breaking changes done to improve and streamline the API. Please refer to the full Update Guide.
+> [!Note]
+> With 19.0.0 the React product introduces many breaking changes done to improve and streamline the API. Please refer to the full Update Guide.
 
 [Update Guide](update-guide.md)