IgniteUI · ChronosSF · Feb 3, 2026 · Dec 9, 2025 · Dec 17, 2025 · Dec 19, 2025
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -192,7 +192,7 @@ Code view example:
 ```html
 <code-view style="height:700px" 
            data-demos-base-url="{environment:lobDemosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid" 
+           iframe-src="{environment:lobDemosBaseUrl}/grid/grid/" 
            alt="Angular data grid example">
 </code-view>
 ```

diff --git a/cspell.json b/cspell.json
@@ -30,6 +30,7 @@
     }
   ],
   "words": [
+    "Figma",
     "IgniteUI",
     "Ignite",
     "DocFX",

diff --git a/en/components/badge.md b/en/components/badge.md
@@ -162,6 +162,15 @@ Then, just specify the icon name and family as follows:
            iframe-src="{environment:demosBaseUrl}/data-display/badge-icon/" >
 </code-view>
 
+### Dot Badge
+
+The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).
+
+<code-view style="height: 100px"
+           data-demos-base-url="{environment:demosBaseUrl}"
+           iframe-src="{environment:demosBaseUrl}/data-display/badge-dot-sample/" >
+</code-view>
+
 ### Badge in List
 
 Let's extend the previous sample and create a list with contacts, similar to those in chat clients. In addition to the contact name, we want to display an avatar and the current state of the contact (online, offline or away). To achieve this, we're using the [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) and [`igx-avatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) components. For a container, [`igx-list`]({environment:angularApiUrl}/classes/igxlistcomponent.html) is used.

diff --git a/en/components/charts/chart-overview.md b/en/components/charts/chart-overview.md
@@ -342,7 +342,7 @@ If you are considering any other Angular Charts on the market, here are a few th
 <!-- Angular -->
 
 - Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular.
-- We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Sketch designs. With Indigo.Design, everything you craft in Sketch from our Indigo Design System matches to our Ignite UI for Angular controls.
+- We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls.
 
 <!-- end: Angular -->
 

diff --git a/en/components/date-range-picker.md b/en/components/date-range-picker.md
@@ -122,7 +122,7 @@ The Angular Date Range Picker component also allows configuring two separate inp
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-start-end" >
+           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-start-end/" >
 </code-view>
 
 ### Popup modes
@@ -135,7 +135,7 @@ By default, when clicked, the [`IgxDateRangePickerComponent`]({environment:angul
 
 <code-view style="height:700px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-mode" >
+           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-mode/" >
 </code-view>
 
 <div class="divider--half"></div>

diff --git a/en/components/general-changelog-dv.md b/en/components/general-changelog-dv.md
@@ -16,6 +16,10 @@ All notable changes for each version of Ignite UI for Angular are documented on
 
 - [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master)
 
+## **21.0.0 (January 2026)**
+
+- Angular 21 support.
+
 ## **20.2.1 (December 2025)**
 
 ### Bug Fixes

diff --git a/en/components/general/angular-grid-overview-guide.md b/en/components/general/angular-grid-overview-guide.md
@@ -266,7 +266,7 @@ The Ignite Angular UI toolset also includes [data analysis capabilities](data-an
 
 ## Tools for Code Generation and Design
 
-Ignite UI for Angular is part of the [Indigo.Design System](https://www.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design System") which lets you [generate native Angular code](https://www.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio Plugin") from designs created in Sketch with the [Indigo.Design UI Kit](https://www.infragistics.com/products/indigo-design/help/creating-an-artboard.html "Indigo Design Creating an artboard"). You can generate a mobile-friendly or data-dense grid supporting various editing and filtering modes, but you can also use many of the popular grid features such as sorting, paging, summaries, and group by. Moreover, on every column you can specify various operations like moving, resizing, hiding, and pinning to achieve the most sophisticated data manipulations scenarios at design time and have a pixel-perfect user interface running in minutes.
+Ignite UI for Angular is part of the [Indigo.Design System](https://www.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design System") which lets you [generate native Angular code](https://www.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio Plugin") from designs created in Figma with the [Indigo.Design UI Kit](https://www.infragistics.com/products/indigo-design/help/creating-an-artboard.html "Indigo Design Creating an artboard"). You can generate a mobile-friendly or data-dense grid supporting various editing and filtering modes, but you can also use many of the popular grid features such as sorting, paging, summaries, and group by. Moreover, on every column you can specify various operations like moving, resizing, hiding, and pinning to achieve the most sophisticated data manipulations scenarios at design time and have a pixel-perfect user interface running in minutes.
 
 ## Performance Benchmarks
 

diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md
@@ -6,7 +6,7 @@ _keywords: ignite ui for angular, getting started, angular components
 
 # Getting started with Ignite UI for Angular
 
-[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework.
+[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) is a complete set of Material-based UI Widgets, Components & Figma UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework.
 
 Ignite UI for Angular is offered under a dual-license model, which allows for both commercial and permissive open-source use, depending on the components, modules, directives, and services being used. For more details, refer to the [Ignite UI Licensing](./ignite-ui-licensing.md) and [Open Source vs Premium](./open-source-vs-premium.md) topics.
 

diff --git a/en/components/general/how-to/signal-r-service-live-data.md b/en/components/general/how-to/signal-r-service-live-data.md
@@ -45,7 +45,7 @@ The purpose of this demo is to showcase a financial screen board with a Real-tim
 
 <code-view style="height:700px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs-dock-manager/grid-finjs-dock-manager" alt="Angular Live-data Update Example with a service">
+           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs-dock-manager/grid-finjs-dock-manager/" alt="Angular Live-data Update Example with a service">
 </code-view>
 
 ## SignalR Server Configuration

diff --git a/en/components/grid-lite/binding.md b/en/components/grid-lite/binding.md
@@ -47,7 +47,7 @@ the column collection is reset, and a new data source is bound to the grid.
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/data-binding-dynamic" alt="Angular Grid Lite Data Binding Example">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/data-binding-dynamic/" alt="Angular Grid Lite Data Binding Example">
 </code-view>
 
 <!-- TODO ## API References

diff --git a/en/components/grid-lite/cell-template.md b/en/components/grid-lite/cell-template.md
@@ -109,7 +109,7 @@ export interface GridLiteCellContext<
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-simple" alt="Angular Grid Lite Column Config Basic">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-simple/" alt="Angular Grid Lite Column Config Basic">
 </code-view>
 
 <!-- TODO ## API References

diff --git a/en/components/grid-lite/column-configuration.md b/en/components/grid-lite/column-configuration.md
@@ -105,7 +105,7 @@ In the sample below you can try out the different column properties and how they
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-dynamic" alt="Angular Grid Lite Column Config Dynamic">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-dynamic/" alt="Angular Grid Lite Column Config Dynamic">
 </code-view>
 
 <!-- TODO ## API References

diff --git a/en/components/grid-lite/filtering.md b/en/components/grid-lite/filtering.md
@@ -36,7 +36,7 @@ The **`filter`** property can be either a simple boolean or a
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-simple" alt="Angular Grid Lite Filtering Config">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-simple/" alt="Angular Grid Lite Filtering Config">
 </code-view>
 
 ## Filter Model
@@ -145,7 +145,7 @@ grid.addEventListener('filtered', (event: CustomEvent<GridLiteFilteredEvent<T>>)
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-events" alt="Angular Grid Lite Filtering Config Events">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-events/" alt="Angular Grid Lite Filtering Config Events">
 </code-view>
 
 ## Remote filter operations
@@ -182,7 +182,7 @@ The following example mocks remote filter operation, reflecting the REST endpoin
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-pipeline" alt="Angular Grid Lite Filtering Config Remote">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-pipeline/" alt="Angular Grid Lite Filtering Config Remote">
 </code-view>
 
 <!-- TODO ## API References

diff --git a/en/components/grid-lite/header-template.md b/en/components/grid-lite/header-template.md
@@ -40,7 +40,7 @@ import { html } from 'lit';
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-headers" alt="Angular Grid Lite Column Config Headers">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-headers/" alt="Angular Grid Lite Column Config Headers">
 </code-view>
 
 <!-- TODO ## API References

diff --git a/en/components/grid-lite/overview.md b/en/components/grid-lite/overview.md
@@ -21,12 +21,60 @@ Angular Grid Lite features:
 - Sorting
 - Row Virtualization
 - Accessibility
-- Themes And Styling
+- Themes and Styling
 - Column Data Types
 
+## Installation and Setup
+
+### Installation
+To install GridLite, go to the root folder of your project (where `package.json` is located) and run the following command using npm:
+
+```cmd
+npm install igniteui-grid-lite --save
+```
+
+Or using yarn:
+
+```cmd
+yarn add igniteui-grid-lite
+```
+
+### Using Grid Lite in your Angular code
+
+In the file where you want to use Grid Lite, import and register it before your component class is declared:
+
+```typescript
+import { IgcGridLite } from 'igniteui-grid-lite';
+
+IgcGridLite.register();
+```
+
+You also need to add `CUSTOM_ELEMENTS_SCHEMA` because we are working with web components for Grid Lite
+
+```typescript
+@Component({
+  selector: 'app-grid-lite',
+  templateUrl: './grid-lite.component.html',
+  styleUrls: ['./grid-lite.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+```
+
+Finally add the `<igc-grid-lite>` element to your markup:
+
+```html
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+```
+
+## Grid Lite in Action
+
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/overview" alt="Angular Grid Lite App Sample Main">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/overview/" alt="Angular Grid Lite App Sample Main">
 </code-view>
 
 Grid Lite controls are completely free, MIT licensed, as a part of our initiative to make Ignite UI more open, transparent, and accessible. However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have an upgrade strategy for transitioning from the Grid Lite to the full-featured and advanced Data Grid.  

diff --git a/en/components/grid-lite/sorting.md b/en/components/grid-lite/sorting.md
@@ -41,7 +41,7 @@ The **`sort`** property can be either a simple boolean or a **`ColumnSortConfigu
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-simple" alt="Angular Grid Lite Sorting Config">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-simple/" alt="Angular Grid Lite Sorting Config">
 </code-view>
 
 ## Single and Multi-Sorting
@@ -82,7 +82,7 @@ The following sample shows the grid **`sortConfiguration`** combinations and how
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-grid-config" alt="Angular Grid Lite Sorting Config Grid">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-grid-config/" alt="Angular Grid Lite Sorting Config Grid">
 </code-view>
 
 ## Sort model
@@ -186,7 +186,7 @@ In the following sample, when you try to sort the **Name** and **Rating** column
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-events" alt="Angular Grid Lite Sorting Config Events">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-events/" alt="Angular Grid Lite Sorting Config Events">
 </code-view>
 
 ## Remote Sort Operations
@@ -222,7 +222,7 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-pipeline" alt="Angular Grid Lite Sorting Config Pipeline">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-pipeline/" alt="Angular Grid Lite Sorting Config Pipeline">
 </code-view>
 
 <!-- TODO ## API References

diff --git a/en/components/grid-lite/theming.md b/en/components/grid-lite/theming.md
@@ -37,7 +37,7 @@ In the sample below, you can preview all the default base themes.
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-config-themes" alt="Angular Grid Lite Styling Config Themes">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-config-themes/" alt="Angular Grid Lite Styling Config Themes">
 </code-view>
 
 -->
@@ -87,7 +87,7 @@ Here is an example showcasing the custom theming from above.
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-custom" alt="Angular Grid Lite Styling Custom Theme">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-custom/" alt="Angular Grid Lite Styling Custom Theme">
 </code-view>
 
 <!-- TODO ## API References

diff --git a/en/components/grid/grid.md b/en/components/grid/grid.md
@@ -64,7 +64,7 @@ Boston Marathon 2021 – In this angular grid example, you can see how users can
 <code-view style="height:700px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
            img-src="https://static.infragistics.com/marketing/Website/products/Ignite-UI-for-Angular/ignite-ui-angular-marathon-app"
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid" alt="Angular data grid example">
+           iframe-src="{environment:lobDemosBaseUrl}/grid/grid/" alt="Angular data grid example">
 </code-view>
 
 <div class="divider--half"></div>

diff --git a/en/components/grid/master-detail.md b/en/components/grid/master-detail.md
@@ -16,7 +16,7 @@ This mode is useful when you need to display master-detail style data in a hiera
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid-master-detail" alt="Angular Grid Master-Detail Example">
+           iframe-src="{environment:lobDemosBaseUrl}/grid/grid-master-detail/" alt="Angular Grid Master-Detail Example">
 </code-view>
 
 

diff --git a/en/components/grids_templates/cell-merging.md b/en/components/grids_templates/cell-merging.md
@@ -12,21 +12,21 @@ The Ignite UI for Angular @@igComponent provides a Cell Merging feature that com
 ## Angular Cell Merging Example
 
 @@if(igxName === 'IgxGrid'){
-<code-view style="height:755px"
+<code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge" alt="Angular Cell Merging Example">
+           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge/" alt="Angular Cell Merging Example">
 </code-view>
 }
 @@if(igxName === 'IgxHierarchicalGrid'){
-<code-view style="height:755px"
+<code-view style="height:475px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cell-merge" alt="Angular Cell Merging Example">
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cell-merge/" alt="Angular Cell Merging Example">
 </code-view>
 }
 @@if(igxName === 'IgxTreeGrid'){
 <code-view style="height:755px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-merge" alt="Angular Cell Merging Example">
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-merge/" alt="Angular Cell Merging Example">
 </code-view>
 }
 
@@ -172,10 +172,23 @@ protected customStrategy = new MyCustomStrategy();
 @@if(igxName === 'IgxGrid'){
 
 ### Demo
-
+<code-view style="height:600px"
+           data-demos-base-url="{environment:demosBaseUrl}"
+           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge-custom/" alt="Angular Cell Merging Example with Custom Condition">
+</code-view>
+}
+@@if(igxName === 'IgxHierarchicalGrid'){
+### Demo
+<code-view style="height:425px"
+           data-demos-base-url="{environment:demosBaseUrl}"
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cell-merge-custom" alt="Angular Cell Merging Example with Custom Condition">
+</code-view>
+}
+@@if(igxName === 'IgxTreeGrid'){
+### Demo
 <code-view style="height:755px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge-custom" alt="Angular Cell Merging Example with Custom Condition">
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-merge-custom" alt="Angular Cell Merging Example with Custom Condition">
 </code-view>
 }