IgniteUI · ChronosSF · May 28, 2026 · May 27, 2026 · May 28, 2026 · May 28, 2026
diff --git a/docs/angular/astro.config.ts b/docs/angular/astro.config.ts
@@ -1,4 +1,4 @@
-// @ts-check
+// @ts-check
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createDocsSite, type DocsMode } from 'docs-template/integration';
@@ -85,7 +85,17 @@ export default createDocsSite({
 		{ tag: 'link', attrs: { rel: 'icon', href: `${mode !== 'development' ? base : ''}/favicon.ico`, type: 'image/x-icon' } },
 	],
 	sidebar: { exclude: [/^internal\//] },
-	integrations: [mdx()],
+	integrations: [
+		mdx(),
+		{
+			name: 'watch-docs-template',
+			hooks: {
+				'astro:server:setup': ({ server }) => {
+					server.watcher.add(path.resolve(__dirname, '../../src'));
+				},
+			},
+		},
+	],
 	// Expose @/ alias so MDX files can import Sample.astro and peer components.
 	// @xplat-images resolves xplat-sourced MDX image imports to the angular images dir.
 	vite: {
@@ -95,5 +105,6 @@ export default createDocsSite({
 				'@xplat-images': path.join(__dirname, 'src', 'content', docsLang, 'images'),
 			},
 		},
+		server: { fs: { strict: false } },
 	},
 });
diff --git a/docs/angular/package.json b/docs/angular/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "astro": "^6.1.6",
     "docs-template": "file:../../",
-    "igniteui-astro-components": "0.0.14",
+    "igniteui-astro-components": "0.0.15",
     "sharp": "^0.34.2"
   },
   "devDependencies": {

diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx
@@ -214,7 +214,7 @@ Additional components and/or directives that can be used within the Action Strip
 - <ApiLink type="GridEditingActions" />
 - <ApiLink type="DividerDirective" suffix={false} />
 
-<div class="divider"></div>
+<igc-divider></igc-divider>
 
 ## Theming Dependencies
 

diff --git a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
@@ -35,9 +35,7 @@ npx igniteui-cli ai-config
 ```
 
 <DocsAside type="info">
-
 Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x.
-
 </DocsAside>
 
 
@@ -279,7 +277,6 @@ For configuration details and theming workflows, see [Theming MCP](theming-mcp.m
 - [Ignite UI CLI MCP](./cli-mcp.md)
 - [Ignite UI Theming MCP](./theming-mcp.md)
 
-<div class="divider--half"></div>
 
 Our community is active and always welcoming to new ideas.
 

diff --git a/docs/angular/src/content/en/components/ai/cli-mcp.mdx b/docs/angular/src/content/en/components/ai/cli-mcp.mdx
@@ -14,7 +14,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 <p class="highlight">The Ignite UI CLI MCP is a <a href="https://modelcontextprotocol.io/" target="_blank">Model Context Protocol</a> (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.</p>
 
-<div class="divider"></div>
+<igc-divider></igc-divider>
 
 ## Overview
 
@@ -429,7 +429,6 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve
 - [Ignite UI for Angular Skills](./skills.md)
 - [Ignite UI Theming MCP](./theming-mcp.md)
 
-<div class="divider--half"></div>
 
 Our community is active and always welcoming to new ideas.
 

diff --git a/docs/angular/src/content/en/components/ai/maker-framework.mdx b/docs/angular/src/content/en/components/ai/maker-framework.mdx
@@ -226,7 +226,6 @@ The binary cache location can be overridden with the `MAKER_MCP_CACHE` environme
 - [Ignite UI CLI MCP](./cli-mcp.md)
 - [Ignite UI Theming MCP](./theming-mcp.md)
 
-<div class="divider--half"></div>
 
 Our community is active and always welcoming to new ideas.
 

diff --git a/docs/angular/src/content/en/components/ai/theming-mcp.mdx b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
@@ -10,7 +10,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 <p class="highlight">The Ignite UI Theming MCP is a <a href="https://modelcontextprotocol.io/" target="_blank">Model Context Protocol</a> (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe the theme, palette, or component overrides you want generated.</p>
 
-<div class="divider"></div>
+<igc-divider></igc-divider>
 
 ## Overview
 

diff --git a/docs/angular/src/content/en/components/avatar.mdx b/docs/angular/src/content/en/components/avatar.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 <div class="highlight">
 Angular Avatar component helps adding initials, images, or material icons to your application.
 </div>
-<div class="divider"></div>
+<igc-divider></igc-divider>
 
 ## Angular Avatar Example
 
@@ -157,27 +157,10 @@ You should see something like this:
 
 Changing the `$background` property automatically updates the following dependent properties:
 
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><strong>$background</strong></td>
-      <td>$color</td>
-      <td>The text color used for the avatar.</td>
-    </tr>
-    <tr>
-      <td></td>
-      <td>$icon-color</td>
-      <td>The icon color used for the avatar.</td>
-    </tr>
-  </tbody>
-</table>
+| Primary Property | Dependent Property | Description |
+| --- | --- | --- |
+| **$background** | $color | The text color used for the avatar. |
+|  | $icon-color | The icon color used for the avatar. |
 
 To get started with styling the avatar, we need to import the `index` file, where all the theme functions and component mixins live:
 
@@ -296,11 +279,8 @@ Learn more about it in the [Size](/display-density) article.
 <hr/>
 
 ## API References
-
 <hr/>
-
 - <ApiLink type="Avatar" />
-
 ## Theming Dependencies
 
 - <ApiLink kind="sass" module="themes" type="function-avatar-theme" label="IgxAvatar Theme" />

diff --git a/docs/angular/src/content/en/components/badge.mdx b/docs/angular/src/content/en/components/badge.mdx
@@ -343,27 +343,10 @@ If the sample is configured properly, a list of members should be displayed and
 
 Changing the `$background-color` property automatically updates the following dependent properties:
 
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><strong>$background-color</strong></td>
-      <td>$icon-color</td>
-      <td>The color used for icons in the badge.</td>
-    </tr>
-    <tr>
-      <td></td>
-      <td>$text-color</td>
-      <td>The color used for text in the badge.</td>
-    </tr>
-  </tbody>
-</table>
+| Primary Property | Dependent Property | Description |
+| --- | --- | --- |
+| **$background-color** | $icon-color | The color used for icons in the badge. |
+|  | $text-color | The color used for text in the badge. |
 
 To get started with styling the badges, we need to import the `index` file, where all the theme functions and component mixins live:
 
@@ -432,16 +415,13 @@ At the end your badges should look like this:
 <Sample src="/data-display/badge-tailwind-styling-sample" height={340} iframeOnly />
 
 ## API References
-
 <hr/>
-
 - <ApiLink type="Avatar" />
 - <ApiLink type="Badge" />
 - <ApiLink kind="sass" module="themes" type="function-badge-theme" label="IgxBadgeComponent Styles" />
 - <ApiLink type="List" />
 - <ApiLink type="ListItem" />
 - <ApiLink kind="type" type="BadgeType" />
-
 ## Theming Dependencies
 
 - <ApiLink kind="sass" module="themes" type="function-icon-theme" label="IgxIcon Theme" />

diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx
@@ -24,7 +24,6 @@ The following sample demonstrates how setting multiple properties on the same <A
 
 
 
-<div class="divider--half"></div>
 
 The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the <ApiLink pkg="gauges" type="BulletGraph" member="transitionDuration" label="TransitionDuration" /> property.
 The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more.
@@ -73,7 +72,6 @@ export class AppModule {}
 
 
 
-<div class="divider--half"></div>
 
 ## Usage
 
@@ -112,7 +110,6 @@ The following code walks through creating a bullet graph component, and configur
 
 
 
-<div class="divider--half"></div>
 
 ## Comparative Measures
 The bullet graph can show two measures: performance value and target value.
@@ -453,11 +450,8 @@ For your convenience, all above code snippets are combined into one code block b
 
 
 ## API References
-
-
-<ApiLink type="BulletGraph" pkg="gauges" /><br />
-<ApiLink type="LinearGraphRange" pkg="gauges" /><br />
-
+<ApiLink type="BulletGraph" pkg="gauges" />
+<ApiLink type="LinearGraphRange" pkg="gauges" />
 ## Additional Resources
 
 You can find more information about other types of gauges in these topics: