diff --git a/skills/igniteui-angular-components/references/charts.md b/skills/igniteui-angular-components/references/charts.md
index 283fbe55c3a..9487580e0f6 100644
--- a/skills/igniteui-angular-components/references/charts.md
+++ b/skills/igniteui-angular-components/references/charts.md
@@ -35,7 +35,7 @@ This reference gives high-level guidance on when to use each chart type, their k
 | `IgxLegendComponent` | `IgxLegendModule` | Shared legend component |
 
 ### When to use each:
-- **Category Chart** → Use for simple line/area/column/point/spline/step/waterfall; let framework auto-configure
+- **Category Chart** → Use for simple area/column/line/spline/waterfall; let framework auto-configure
 - **Financial Chart** → Use for stock data with time-series OHLC, indicators, volume
 - **Data Chart** → Use for advanced scenarios: multiple axes, custom series combinations, stacked/scatter
 - **Pie Chart** → Use for part-to-whole (segments sum to 100%)
@@ -52,32 +52,31 @@ chartComponent.dataSource = [
   { month: 'Feb', revenue: 6500 }
 ];
 
-// Data Chart uses 'itemsSource' and explicit series configuration
-chartComponent.itemsSource = dataArray;
+// Data Chart: data is bound on individual series via 'itemsSource', not on the chart itself
+seriesComponent.itemsSource = dataArray;
 ```
 
 ### Chart Type Selection
-- **Category Chart**: `chartType` property (Auto, Area, Column, Line, Point, etc.)
-- **Financial Chart**: `chartType` property (Auto, Candle, Line, Bar, Column)
-- **Data Chart**: Configure explicit series (IgxAreaSeriesComponent, IgxBarSeriesComponent, IgxBarSeries, etc.)
+- **Category Chart**: `chartType` property — type: `CategoryChartType` (Auto, Line, Area, Column, Spline, ...)
+- **Financial Chart**: `chartType` property — type: `FinancialChartType` (Auto, Bar, Candle, ...)
+- **Data Chart**: Configure explicit series (IgxAreaSeriesComponent, IgxBarSeriesComponent, IgxColumnSeriesComponent, etc.)
 - **Pie Chart**: No chartType needed; inherent pie structure
 
 ### Required Properties
 
 **IgxCategoryChartComponent** (simplest API; auto-detects numeric & string columns):
 - `dataSource` — Data array (required)
-- `chartType` — Chart type (Auto, Area, Column, Line, Point, etc.)
+- `chartType` — type: `CategoryChartType`
 - Component auto-detects: first string column → X-axis labels, numeric columns → Y-axis data
 
 **IgxDataChartComponent** (advanced; requires explicit configuration):
-- `itemsSource` — Data array (required)
-- `valueMemberPath` — Which property contains numeric values (for series)
+- Data is bound on individual series via `itemsSource`, not on the chart itself
+- `valueMemberPath` — Set on the series, not the chart
 - Requires explicit axis and series components
 
 **IgxFinancialChartComponent** (stock data):
-- `dataSource` — Data array with date + OHLC columns
-- `chartType` — Chart type (Auto, Candle, Line, Bar, Column)
-- `openMemberPath`, `highMemberPath`, `lowMemberPath`, `closeMemberPath` — OHLC field names
+- `dataSource` — Data array with date + OHLC columns (chart auto-detects columns)
+- `chartType` — type: `FinancialChartType`
 
 **IgxPieChartComponent**:
 - `dataSource` — Data array
@@ -100,23 +99,23 @@ chartComponent.itemsSource = dataArray;
 - Gridlines: `xAxisMajorStroke`, `yAxisMajorStroke`, gridline styling
 
 ### Tooltips
-- **Default tooltips**: Auto-enabled; style with `toolTipType` (Category, Item, etc.)
-- **Custom tooltips**: `tooltipTemplate` directive for custom content
-- Properties: `showDefaultTooltip`, `toolTipBrush` (color)
+- **Default tooltips**: Auto-enabled; style with `toolTipType`: `ToolTipType` (Default, Item, Category, None)
+- **Custom tooltips**: `tooltipTemplate` for custom content
 
 ### Markers & Data Points
 - Control marker visibility and style via `markerTypes`, `markerBrushes`, `markerOutlines`
-- Properties: `markerSize`, `markerShape` (Circle, Square, Triangle, etc.)
-- Use marker templates for custom marker appearance
+- Properties: `markerThickness`, `markerMaxCount`, `markerFillMode`, `markerOutlineMode`
+- `markerTypes` accepts `MarkerType` values
 
 ### Animations
-- Enable with `transitionInMode` (Auto, None, FromZero, FromSeries, etc.)
-- Control speed via `transitionDuration` (milliseconds)
-- Works on initial load and data updates
+- Enable with `transitionInMode` — type: `CategoryTransitionInMode` (Auto, FromZero, SweepFromLeft, ...)
+- Control initial load speed via `transitionInDuration` (milliseconds)
+- Control data-change animation speed via `transitionDuration` (milliseconds)
+- `transitionInSpeedType` — type: `TransitionInSpeedType`
 
 ### Highlighting & Selection
-- **Highlighting**: Mouse hover effect; set `highlightingMode`, `highlightingBehavior`
-- **Selection**: Click to select data points/series; properties vary by chart type
+- **Highlighting**: Mouse hover effect; `highlightingMode`: `SeriesHighlightingMode` (None, Brighten, FadeOthers, ...), `highlightingBehavior`: `SeriesHighlightingBehavior`
+- **Selection**: Click to select data points/series; `selectionMode`: `SeriesSelectionMode`, `selectionBehavior`: `SeriesSelectionBehavior`
 
 ### Zooming & Panning
 - Mouse wheel to zoom; drag to pan
@@ -124,18 +123,18 @@ chartComponent.itemsSource = dataArray;
 - Keyboard support: Arrow keys, +/- for zoom
 
 ### Trendlines
-- Visualize data trends with trendline types (Linear, Logarithmic, Exponential, etc.)
-- Property: `trendLineType` (Category/Financial charts)
+- Property: `trendLineType`: `TrendLineType` (Category/Financial charts)
 
 ### Legend
 - Display with `legend` property (assign `IgxLegendComponent`)
 - `legendItemTemplate` for custom legend items
-- Properties: `showLegend`, `legendOrientation`, `legendPosition`
+- Properties: `legendItemVisibility`, `legendHighlightingMode`, `legendItemBadgeShape`
+- `legendOrientation` is set on the `IgxLegendComponent` itself, not on the chart
 
 ### Annotations
-- **Crosshairs**: `crosshairsDisplayMode` (None, Vertical, Horizontal, Both)
-- **Final Value Layer**: Show ending values on axis
-- **Callout Layer**: Custom callouts at specific values
+- **Crosshairs**: `crosshairsDisplayMode`: `CrosshairsDisplayMode`
+- **Final Value Layer**: `finalValueAnnotationsVisible` — show ending values on axis
+- **Callout Layer**: `calloutsVisible` — custom callouts at specific values
 - **Range Annotations**: Highlight data ranges
 
 ---
@@ -146,7 +145,7 @@ chartComponent.itemsSource = dataArray;
 - **Use**: Trends over time, cumulative part-to-whole
 - **Data**: X-axis categories, Y-axis numeric values
 - **Variants**: Area, StepArea, Stacked Area, Stacked 100% Area
-- **API**: `chartType`, `valueMemberPath`, `categoryXAxis`
+- **API**: `chartType`, `dataSource` (auto-detects numeric columns)
 - **Best Practices**:
   - Start Y-axis at 0 for accuracy
   - Use transparent colors for overlaid series
@@ -157,7 +156,7 @@ chartComponent.itemsSource = dataArray;
 - **Use**: Compare categories, show rankings, time-series changes
 - **Data**: X-axis numeric, Y-axis categories (reversed from Column)
 - **Variants**: Grouped Bar, Stacked Bar, Stacked 100% Bar, Polar Bar
-- **API**: `IgxBarSeriesComponent`, `valueMemberPath`, `argumentMemberPath`
+- **API**: `IgxBarSeriesComponent`, `valueMemberPath`, `valueAxis`, `categoryAxis`
 - **Best Practices**:
   - Start numeric axis at 0
   - Sort categories by value (ascending/descending)
@@ -168,7 +167,7 @@ chartComponent.itemsSource = dataArray;
 - **Use**: Compare categories, show distribution, time-series changes
 - **Data**: X-axis categories, Y-axis numeric values
 - **Variants**: Column, StackedColumn, Stacked100%Column, RangeColumn, WaterfallColumn
-- **API**: `chartType`, `valueMemberPath`, `categoryXAxis`
+- **API**: `chartType`, `dataSource` (auto-detects numeric columns)
 - **Best Practices**:
   - Start Y-axis at 0
   - Order time-series left to right
@@ -186,20 +185,20 @@ chartComponent.itemsSource = dataArray;
   - **Volume Pane**: Show trading volume (column, line, or area chart)
   - **Indicator Pane**: Financial indicators (RSI, MACD, Bollinger Bands, etc.)
   - **Zoom Pane**: Navigation slider to zoom/pan
-- **Chart Types**: `Auto` (default), `Candle`, `Line`, `Bar`, `Column`
 - **API**:
-  - `chartType` — Price display type (Auto, Line, Candle, Bar, Column)
-  - `volumeType` — Volume display (None, Column, Line, Area)
-  - `indicatorTypes` — Array of indicators (0 or more)
-  - `zoomSliderType` — Zoom pane display (defaults to match chartType)
+  - `chartType`: `FinancialChartType`
+  - `volumeType`: `FinancialChartVolumeType`
+  - `indicatorTypes`: `FinancialIndicatorType[]`
+  - `zoomSliderType`: `FinancialChartZoomSliderType`
 - **Indicators**: RSI, MACD, Bollinger Bands, Force Index, Standard Deviation, and more
 - **Features**:
   - Crosshairs with value snapshots
   - Trendlines and overlays
   - Time-based filters (users can select 1M, 3M, 6M, YTD, 1Y, ALL)
 - **Data Binding**: 
-  - `openMemberPath`, `highMemberPath`, `lowMemberPath`, `closeMemberPath`, `volumeMemberPath`
-  - `dateMemberPath` — Date/time column
+  - The Financial Chart auto-detects OHLC, Volume, and Date columns from the data source
+  - Data items should have properties named like `open`, `high`, `low`, `close`, `volume`, `date` (or similar)
+  - No explicit member path properties are needed on the chart component
 
 ### Pie Chart (`IgxPieChartComponent` or `IgxDataPieChartComponent`)
 - **Use**: Part-to-whole visualization (segments sum to 100%)
@@ -209,9 +208,9 @@ chartComponent.itemsSource = dataArray;
   - `labelMemberPath` — Data property for slice labels
   - `valueMemberPath` — Data property for numeric values
   - `legend` — Assign IgxLegendComponent for legend display
-  - `selectionMode` — Single, Multiple, Manual (default Single)
+  - `selectionMode`: `SliceSelectionMode`
   - `othersCategoryThreshold` — Combine small slices into "Others"
-  - `othersCategoryType` — Threshold as Number or Percent
+  - `othersCategoryType`: `OthersCategoryType`
   - `allowSliceExplosion` — Enable click to expand slice
   - `allowSliceSelection` — Enable click selection highlighting
 - **Features**:
@@ -235,72 +234,66 @@ chartComponent.itemsSource = dataArray;
 ```typescript
 // Required
 dataSource: any[];           // Data array (auto-detects numeric fields)
-chartType: CategoryChartType;        // Auto, Area, Column, Line, Point, etc.
+chartType: CategoryChartType;
 
 // Common optional inputs
 xAxisTitle: string;          // X-axis label
 yAxisTitle: string;          // Y-axis label
-xAxisLabelLocation: AxisLabelLocation;  // Axis label alignment
-yAxisLabelLocation: AxisLabelLocation;
+xAxisLabelLocation: XAxisLabelLocation;
+yAxisLabelLocation: YAxisLabelLocation;
 yAxisMinimumValue: number;   // Y-axis minimum
 yAxisMaximumValue: number;   // Y-axis maximum
 brushes: string[];           // Series colors (fill)
 outlines: string[];          // Series colors (outline)
-markerTypes: MarkerType[];   // Marker shapes (Circle, Square, etc.)
+markerTypes: MarkerType[];
 markerBrushes: string[];     // Marker fill colors
 markerOutlines: string[];    // Marker outline colors
-toolTipType: ToolTipType;    // Tooltip display mode
-highlightingMode: HighlightingMode;     // Hover highlight behavior
-highlightingBehavior: HighlightingBehavior;
-trendLineType: TrendLineType;           // Trendline visualization
-transitionInMode: TransitionInMode;     // Animation on load
-transitionInDuration: number;           // Animation duration (milliseconds)
+toolTipType: ToolTipType;
+highlightingMode: SeriesHighlightingMode;
+highlightingBehavior: SeriesHighlightingBehavior;
+trendLineType: TrendLineType;
+transitionInMode: CategoryTransitionInMode;
+transitionInDuration: number;           // Initial load animation duration (milliseconds)
 ```
 
 ### IgxFinancialChartComponent (Stock/Candlestick/OHLC)
 ```typescript
-chartType: FinancialChartType; // Auto, Line, Candle, Bar, Column
-itemsSource: any[];
-openMemberPath: string;
-highMemberPath: string;
-lowMemberPath: string;
-closeMemberPath: string;
-volumeMemberPath: string;
-dateMemberPath: string;
-volumeType: VolumeType; // None, Column, Line, Area
-indicatorTypes: IndicatorType[]; // RSI, MACD, etc.
-zoomSliderType: FinancialChartType; // Should match chartType
+chartType: FinancialChartType;
+dataSource: any[];             // Data array (auto-detects OHLC and date columns)
+volumeType: FinancialChartVolumeType;
+indicatorTypes: FinancialIndicatorType[];
+zoomSliderType: FinancialChartZoomSliderType;
 xAxisTitle: string;
 yAxisTitle: string;
-xAxisMode: AxisMode; // OrdinalTimeX, DateTimeX
-yAxisMode: AxisMode;
-showDefaultTooltip: boolean;
+xAxisMode: FinancialChartXAxisMode;
+yAxisMode: FinancialChartYAxisMode;
+toolTipType: ToolTipType;
 isHorizontalZoomEnabled: boolean;
 isVerticalZoomEnabled: boolean;
 crosshairsDisplayMode: CrosshairsDisplayMode;
 trendLineType: TrendLineType;
+isToolbarVisible: boolean;
+isLegendVisible: boolean;
 ```
 
 ### IgxPieChartComponent / IgxDataPieChartComponent
 ```typescript
-itemsSource: any[];
+dataSource: any[];
 labelMemberPath: string;
 valueMemberPath: string;
 legend: IgxLegendComponent;
 legendLabelMemberPath: string;
-legendItemTemplate: TemplateRef;
-legendItemBadgeTemplate: TemplateRef;
-selectionMode: SelectionMode; // Single, Multiple, Manual
-selectionBehavior: SelectionBehavior;
+legendItemTemplate: IgDataTemplate;
+legendItemBadgeTemplate: IgDataTemplate;
+selectionMode: SliceSelectionMode;
 allowSliceExplosion: boolean;
 allowSliceSelection: boolean;
 othersCategoryThreshold: number;
-othersCategoryType: OthersCategoryType; // Number, Percent
+othersCategoryType: OthersCategoryType;
 startAngle: number;
 radiusFactor: number;
-showDefaultTooltip: boolean;
-toolTipType: ToolTipType;
-highlightingMode: HighlightingMode;
+innerExtent: number;          // 0 for pie, >0 for donut (ring)
+sweepDirection: SweepDirection;
 ```
 
 ---
@@ -324,19 +317,28 @@ import {
 
 // Enums and types — these ARE plain TS exports and can be imported directly
 import {
+  CategoryChartType,
+  CategoryTransitionInMode,
   FinancialChartType,
+  FinancialChartVolumeType,
+  FinancialChartXAxisMode,
+  FinancialChartYAxisMode,
+  FinancialChartZoomSliderType,
+  FinancialIndicatorType,
   MarkerType,
   ToolTipType,
-  TrendLineTypeCollection,
-  HighlightingMode,
+  TrendLineType,
+  SeriesHighlightingMode,
+  SeriesHighlightingBehavior,
   TransitionInSpeedType,
-  AxisLabelSettings,
   CrosshairsDisplayMode,
-  LegendOrientation,
-  OthersCategoryContext,
+  SliceSelectionMode,
   SeriesSelectionMode,
+  OthersCategoryType,
   IndicatorDisplayType,
-  FinancialChartVolumeType,
+  XAxisLabelLocation,
+  YAxisLabelLocation,
+  LegendOrientation,
   AxisOrientation
 } from 'igniteui-angular-charts';
 ```
@@ -347,7 +349,7 @@ import {
 import { Component } from '@angular/core';
 import {
   IgxCategoryChartModule,
-  ChartType
+  CategoryChartType
 } from 'igniteui-angular-charts';
 
 @Component({
@@ -414,9 +416,9 @@ import { IgxCategoryChartModule } from 'igniteui-angular-charts';
 ### Color Customization
 - **Series colors**: `brushes` (fill), `outlines` (border)
 - **Marker colors**: `markerBrushes`, `markerOutlines`
-- **Axis styles**: `xAxisMajorStroke`, `yAxisMajorStroke`, `xAxisLabelBrush`, `yAxisLabelBrush`
-- **Tooltip**: `toolTipBrush`, `toolTipTextColor`
-- **Highlight**: `highlightedSeriesOpacity`, `highlightedItemsOpacity`
+- **Axis styles**: `xAxisMajorStroke`, `yAxisMajorStroke`, `xAxisLabelTextColor`, `yAxisLabelTextColor`
+- **Tooltip**: Controlled via `toolTipType` and custom tooltip templates
+- **Highlight**: `highlightingFadeOpacity` (opacity for faded non-highlighted series)
 
 ### CSS & Host Binding
 - Chart containers inherit CSS flex/grid properties
diff --git a/skills/igniteui-angular-components/references/data-display.md b/skills/igniteui-angular-components/references/data-display.md
index 8ab836a9b97..754502498be 100644
--- a/skills/igniteui-angular-components/references/data-display.md
+++ b/skills/igniteui-angular-components/references/data-display.md
@@ -35,9 +35,8 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
   @for (contact of contacts; track contact.id) {
     <igx-list-item>
       <igx-avatar igxListThumbnail [src]="contact.avatar" shape="circle"></igx-avatar>
-      <span igxListLine>{{ contact.name }}</span>
+      <span igxListLineTitle>{{ contact.name }}</span>
       <span igxListLineSubTitle>{{ contact.phone }}</span>
-      <span igxListLineTitle>{{ contact.email }}</span>
       <igx-icon igxListAction (click)="call(contact)">phone</igx-icon>
     </igx-list-item>
   }
@@ -55,7 +54,7 @@ import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree';
 ```
 
 ```html
-<igx-tree [selection]="'BiCascade'" (nodeSelection)="onNodeSelect($event)">
+<igx-tree selection="BiState" (nodeSelection)="onNodeSelect($event)">
   @for (node of treeData; track node.id) {
     <igx-tree-node [data]="node" [expanded]="node.expanded">
       <igx-icon>folder</igx-icon>
@@ -71,14 +70,14 @@ import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree';
 </igx-tree>
 ```
 
-Selection modes: `'None'`, `'BiCascade'`, `'Cascade'`.
+Selection modes: `'None'`, `'BiState'`, `'Cascading'`.
 
 ## Card
 
 > **Docs:** [Card Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card)
 
 ```typescript
-import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardHeaderThumbnailDirective } from 'igniteui-angular/card';
+import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective } from 'igniteui-angular/card';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
 import { IgxRippleDirective } from 'igniteui-angular/directives';
@@ -91,7 +90,8 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     <img [src]="article.coverImage" />
   </igx-card-media>
   <igx-card-header>
-    <igx-avatar igxCardHeaderThumbnail [src]="author.photo" shape="circle"></igx-avatar>
+    <!-- igx-avatar inside igx-card-header is auto-detected as thumbnail -->
+    <igx-avatar [src]="author.photo" shape="circle"></igx-avatar>
     <h3 igxCardHeaderTitle>{{ article.title }}</h3>
     <h5 igxCardHeaderSubtitle>{{ author.name }}</h5>
   </igx-card-header>
@@ -268,7 +268,7 @@ import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
 <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
 ```
 
-Types for linear bar: `'default'`, `'info'`, `'success'`, `'warning'`, `'danger'`.
+Types for linear bar: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`.
 
 ## Chat (AI Chat Component)
 
diff --git a/skills/igniteui-angular-components/references/directives.md b/skills/igniteui-angular-components/references/directives.md
index 7b242d17c28..598a07d7cc6 100644
--- a/skills/igniteui-angular-components/references/directives.md
+++ b/skills/igniteui-angular-components/references/directives.md
@@ -129,7 +129,7 @@ onDeselected(event: IButtonGroupEventArgs) {
 | `(selected)` | `IButtonGroupEventArgs` | A button is selected. |
 | `(deselected)` | `IButtonGroupEventArgs` | A button is deselected. |
 
-`IButtonGroupEventArgs`: `{ owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number }`, where `IgxButtonDirective` is imported from `igniteui-angular/directives` (see **Button & Icon Button** section above).
+`IButtonGroupEventArgs`: `{ owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number }`, where `IgxButtonGroupComponent` is from `igniteui-angular/button-group` and `IgxButtonDirective` is from `igniteui-angular/directives` (see **Button & Icon Button** section above).
 
 **Key inputs on each `<button igxButton>` child:**
 
@@ -188,21 +188,21 @@ import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular
 ```
 
 ```html
-<button igxButton [igxTooltipTarget]="myTooltip" [igxTooltipTargetShowDelay]="500">
+<button igxButton [igxTooltipTarget]="myTooltip" [showDelay]="500">
   Hover or focus me
 </button>
 <div igxTooltip #myTooltip="tooltip">Helpful tooltip text</div>
 ```
 
-Inputs on `[igxTooltipTarget]`: `[igxTooltipTargetShowDelay]` (ms), `[igxTooltipTargetHideDelay]` (ms), `[tooltipDisabled]`.
+Inputs on `[igxTooltipTarget]`: `[showDelay]` (ms), `[hideDelay]` (ms), `[tooltipDisabled]`.
 
-Programmatic control:
+Programmatic control via the target directive:
 
 ```typescript
-tooltip = viewChild.required<IgxTooltipDirective>('myTooltip');
+tooltipTarget = viewChild.required(IgxTooltipTargetDirective);
 
-showTooltip() { this.tooltip().open(); }
-hideTooltip() { this.tooltip().close(); }
+show() { this.tooltipTarget().showTooltip(); }
+hide() { this.tooltipTarget().hideTooltip(); }
 ```
 
 ## Drag and Drop
@@ -217,13 +217,13 @@ import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEve
 
 ```html
 <!-- Draggable source -->
-<div igxDrag [dragData]="item" (dragMove)="onDragMove($event)" (dragEnd)="onDragEnd($event)">
+<div [igxDrag]="item" (dragMove)="onDragMove($event)" (dragEnd)="onDragEnd($event)">
   <igx-icon>drag_indicator</igx-icon>
   {{ item.name }}
 </div>
 
 <!-- Drop target -->
-<div igxDrop (dropped)="onDrop($event)" (dragEnter)="onDragEnter($event)" (dragLeave)="onDragLeave($event)">
+<div igxDrop (dropped)="onDrop($event)" (enter)="onDragEnter($event)" (leave)="onDragLeave($event)">
   Drop here
 </div>
 ```
@@ -253,7 +253,7 @@ onDrop(event: IDropDroppedEventArgs) {
 ```html
 <igx-list>
   @for (item of items; track item.id) {
-    <igx-list-item igxDrag [dragData]="item" igxDrop (dropped)="reorder($event, item)">
+    <igx-list-item [igxDrag]="item" igxDrop (dropped)="reorder($event, item)">
       <igx-icon igxListAction>drag_handle</igx-icon>
       <span igxListLine>{{ item.name }}</span>
     </igx-list-item>
@@ -261,8 +261,8 @@ onDrop(event: IDropDroppedEventArgs) {
 </igx-list>
 ```
 
-Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(transitioned)`.
-Key drop events: `(dragEnter)`, `(dragLeave)`, `(dragOver)`, `(dropped)`.
+Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(ghostCreate)`, `(ghostDestroy)`, `(transitioned)`.
+Key drop events: `(enter)`, `(leave)`, `(over)`, `(dropped)`.
 
 > **NOTE:** For touch-based drag, add `importProvidersFrom(HammerModule)` to `app.config.ts` providers.
 
diff --git a/skills/igniteui-angular-components/references/feedback.md b/skills/igniteui-angular-components/references/feedback.md
index abdd9046b7c..b6b462f7d2c 100644
--- a/skills/igniteui-angular-components/references/feedback.md
+++ b/skills/igniteui-angular-components/references/feedback.md
@@ -31,7 +31,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
   [isModal]="true"
   [closeOnEscape]="true"
   [closeOnOutsideSelect]="false"
-  title="Confirm Delete"
   (closed)="onDialogClosed()">
   <igx-dialog-title>Confirm Delete</igx-dialog-title>
   <p>Are you sure you want to delete this item? This action cannot be undone.</p>
@@ -60,7 +59,7 @@ Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(leftButtonSelect)`,
 > **Docs:** [Snackbar Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar)
 
 ```typescript
-import { IgxSnackbarComponent, IgxSnackbarActionDirective } from 'igniteui-angular/snackbar';
+import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
 ```
 
@@ -69,9 +68,10 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
   #snackbar
   [displayTime]="3000"
   [autoHide]="true"
+  actionText="UNDO"
+  (clicked)="undo()"
   (animationDone)="onSnackbarDone()">
   Item saved successfully
-  <button igxButton="flat" igxSnackbarAction (click)="undo()">UNDO</button>
 </igx-snackbar>
 ```
 
@@ -114,12 +114,12 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
 
 ```html
 <igx-banner #banner (closed)="onBannerClosed()">
-  <igx-icon igxBannerIcon>wifi_off</igx-icon>
+  <igx-icon>wifi_off</igx-icon>
   You are offline. Some features may not be available.
-  <div igxBannerActions>
-    <button igxButton="flat" (click)="banner.dismiss()">Dismiss</button>
+  <igx-banner-actions>
+    <button igxButton="flat" (click)="banner.close()">Dismiss</button>
     <button igxButton="flat" (click)="retry()">Retry</button>
-  </div>
+  </igx-banner-actions>
 </igx-banner>
 ```
 
diff --git a/skills/igniteui-angular-components/references/form-controls.md b/skills/igniteui-angular-components/references/form-controls.md
index ae6c2bd1314..e2b32b3436e 100644
--- a/skills/igniteui-angular-components/references/form-controls.md
+++ b/skills/igniteui-angular-components/references/form-controls.md
@@ -202,8 +202,7 @@ import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
 ```html
 <igx-time-picker
   [(ngModel)]="selectedTime"
-  [inputFormat]="'HH:mm'"
-  [is24HourFormat]="true">
+  [inputFormat]="'HH:mm'">
 </igx-time-picker>
 ```
 
diff --git a/skills/igniteui-angular-components/references/layout-manager.md b/skills/igniteui-angular-components/references/layout-manager.md
index d49d8e36400..4f51423decc 100644
--- a/skills/igniteui-angular-components/references/layout-manager.md
+++ b/skills/igniteui-angular-components/references/layout-manager.md
@@ -130,12 +130,11 @@ npm install igniteui-dockmanager
 
 Because Dock Manager is a Web Component, it requires two one-time setup steps:
 
-**1. Register custom elements — `main.ts`:**
+**1. Register custom elements — `app.config.ts`:**
 
 ```typescript
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
 
-// Must be called before bootstrapApplication
 defineCustomElements();
 ```
 
@@ -409,7 +408,7 @@ export class DockManagerComponent {
 ### Key Rules for Dock Manager
 
 1. **Separate package** — `igniteui-dockmanager` is installed independently of `igniteui-angular`
-2. **Call `defineCustomElements()` in `main.ts`** before `bootstrapApplication` — without this the `<igc-dockmanager>` element renders as an unknown element
+2. **Call `defineCustomElements()` from `igniteui-dockmanager/loader` in `app.config.ts`** — without this the `<igc-dockmanager>` element renders as an unknown element
 3. **Add `CUSTOM_ELEMENTS_SCHEMA`** to every standalone component or NgModule that uses `<igc-dockmanager>`
 4. **Slot names = `contentId` values** — the `slot="..."` attribute on child elements must exactly match the `contentId` string in the layout
 5. **Premium component** — requires a licensed Ignite UI subscription; verify availability before recommending to users
diff --git a/skills/igniteui-angular-components/references/layout.md b/skills/igniteui-angular-components/references/layout.md
index 86819fff7eb..29cd4c13da1 100644
--- a/skills/igniteui-angular-components/references/layout.md
+++ b/skills/igniteui-angular-components/references/layout.md
@@ -100,7 +100,7 @@ import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper';
 </igx-stepper>
 ```
 
-Key inputs: `[linear]`, `[orientation]` (`'horizontal'` | `'vertical'`), `[stepType]` (`'indicator'` | `'title'` | `'full'`), `[animationType]`.
+Key inputs: `[linear]`, `[orientation]` (`'horizontal'` | `'vertical'`), `[stepType]` (`'indicator'` | `'title'` | `'full'`), `[horizontalAnimationType]` (`'slide'` | `'fade'` | `'none'`), `[verticalAnimationType]` (`'grow'` | `'fade'` | `'none'`), `[animationDuration]`.
 
 Events: `(activeStepChanging)`, `(activeStepChanged)`.
 
diff --git a/skills/igniteui-angular-components/references/setup.md b/skills/igniteui-angular-components/references/setup.md
index a8c03016ab9..9b062539dcd 100644
--- a/skills/igniteui-angular-components/references/setup.md
+++ b/skills/igniteui-angular-components/references/setup.md
@@ -44,7 +44,6 @@ export const appConfig: ApplicationConfig = {
 |---|---|---|
 | `provideAnimations()` | `@angular/platform-browser/animations` | **All overlay and animated components** — Dialog, Combo, Select, Dropdown, Date/Time Picker, Snackbar, Toast, Banner, Navigation Drawer, Carousel, Overlay service |
 | `importProvidersFrom(HammerModule)` | `@angular/platform-browser` | OPTIONAL — touch gestures (Slider, Drag & Drop, swipe) |
-| `provideIgniteIntl()` | `igniteui-angular/core` | Localization for grids, date/time pickers, and components displaying formatted values |
 
 > **`provideAnimationsAsync()`** lazy-loads the animations module — prefer it for SSR or when optimizing initial bundle size:
 > ```typescript
diff --git a/skills/igniteui-angular-grids/references/data-operations.md b/skills/igniteui-angular-grids/references/data-operations.md
index 7406e99bf22..d103a57f572 100644
--- a/skills/igniteui-angular-grids/references/data-operations.md
+++ b/skills/igniteui-angular-grids/references/data-operations.md
@@ -178,18 +178,21 @@ this.gridRef().clearSort();
 | Event | Cancelable | Payload |
 |---|---|---|
 | `(sorting)` | Yes | `ISortingEventArgs` — set `event.cancel = true` to prevent |
-| `(sortingDone)` | No | `ISortingEventArgs` — fires after sort is applied |
+| `(sortingDone)` | No | `ISortingExpression \| ISortingExpression[]` — fires after sort is applied |
 
 ```typescript
 onSorting(event: ISortingEventArgs) {
   // Prevent sorting on a specific column
-  if (event.fieldName === 'id') {
+  const exprs = Array.isArray(event.sortingExpressions)
+    ? event.sortingExpressions : [event.sortingExpressions];
+  if (exprs.some(e => e?.fieldName === 'id')) {
     event.cancel = true;
   }
 }
 
-onSortingDone(event: ISortingEventArgs) {
-  console.log('Sorted by:', event.fieldName, event.dir);
+onSortingDone(event: ISortingExpression | ISortingExpression[]) {
+  const expr = Array.isArray(event) ? event[0] : event;
+  console.log('Sorted by:', expr.fieldName, expr.dir);
   // Good place to trigger remote data fetch
 }
 ```
@@ -204,8 +207,8 @@ import { ISortingStrategy, SortingDirection } from 'igniteui-angular/core';
 class PrioritySortStrategy implements ISortingStrategy {
   private priorityOrder = ['Critical', 'High', 'Medium', 'Low'];
 
-  sort(data: any[], fieldName: string, dir: SortingDirection): any[] {
-    return data.sort((a, b) => {
+  sort(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: (obj: any, key: string) => any): any[] {
+    return [...data].sort((a, b) => {
       const indexA = this.priorityOrder.indexOf(a[fieldName]);
       const indexB = this.priorityOrder.indexOf(b[fieldName]);
       return dir === SortingDirection.Asc ? indexA - indexB : indexB - indexA;
@@ -305,8 +308,11 @@ this.gridRef().cdr.detectChanges();
 
 ### Global Filtering & Cross-Column Logic
 
+> **DEPRECATED (v19.0+):** `filterGlobal()` is deprecated. Use `filteringExpressionsTree` to build a tree that applies conditions across all columns instead.
+
 ```typescript
 // Filter all filterable columns at once with a search term
+// ⚠️ Deprecated since v19.0 — prefer filteringExpressionsTree
 this.gridRef().filterGlobal('search term', IgxStringFilteringOperand.instance().condition('contains'), true);
 ```
 
@@ -319,7 +325,8 @@ Control the AND/OR logic between **different column** filters:
 ```
 
 ```typescript
-import { FilteringLogic } from 'igniteui-angular';
+import { FilteringLogic } from 'igniteui-angular/core';
+// import { FilteringLogic } from '@infragistics/igniteui-angular/core'; for licensed package
 
 // FilteringLogic.And (default) — row must match ALL column filters
 // FilteringLogic.Or — row must match ANY column filter
@@ -331,11 +338,11 @@ filteringLogic = FilteringLogic.And;
 | Event | Cancelable | Payload |
 |---|---|---|
 | `(filtering)` | Yes | `IFilteringEventArgs` — set `event.cancel = true` to prevent |
-| `(filteringDone)` | No | `IFilteringEventArgs` — fires after a **column-level** filter is applied |
+| `(filteringDone)` | No | `IFilteringExpressionsTree` — fires after a **column-level** filter is applied |
 | `(filteringExpressionsTreeChange)` | No | `IFilteringExpressionsTree` — fires after the **grid-level** filter tree changes (use this for remote data) |
 
 ```typescript
-onFilteringDone(event: IFilteringEventArgs) {
+onFilteringDone(event: IFilteringExpressionsTree) {
   // Trigger remote data fetch with new filter state
   this.loadFilteredData();
 }
diff --git a/skills/igniteui-angular-grids/references/editing.md b/skills/igniteui-angular-grids/references/editing.md
index c4d6b274a13..6f4692590db 100644
--- a/skills/igniteui-angular-grids/references/editing.md
+++ b/skills/igniteui-angular-grids/references/editing.md
@@ -171,10 +171,10 @@ When starting a new row programmatically, pre-populate fields using `(cellEditEn
 ```typescript
 onCellEditEnter(event: IGridEditEventArgs) {
   if (event.isAddRow && event.column.field === 'available') {
-    event.cellEditArgs.newValue = true; // default new cars to available
+    event.newValue = true; // default new cars to available
   }
   if (event.isAddRow && event.column.field === 'year') {
-    event.cellEditArgs.newValue = new Date().getFullYear();
+    event.newValue = new Date().getFullYear();
   }
 }
 ```
@@ -475,7 +475,7 @@ When grouping is enabled, summaries appear for each group. Control this with:
 2. **`[primaryKey]` is required for all editing** — row editing, batch editing, row adding, and row deletion all depend on it (Flat, Tree, Hierarchical, Pivot grids; NOT Grid Lite)
 3. **Always set `[autoGenerate]="false"` when editing** — define columns explicitly and mark each with `[editable]="true"` to control exactly what users can change
 4. **Batch editing requires `[primaryKey]`** — call `endEdit(true)` before `transactions.undo()`/`redo()`, commit via `transactions.commit(data)`
-5. **Cancelable events** — use `event.cancel = true` in `(cellEdit)`, `(rowEdit)`, `(paging)` to prevent the action
+5. **Cancelable events** — use `event.cancel = true` in `(cellEdit)`, `(rowEdit)`, `(rowEditEnter)`, `(cellEditEnter)` to prevent the action
 6. **Validation** — use template-driven validators on columns (`required`, `min`, `max`, `email`, `pattern`) or reactive validators via `(formGroupCreated)`
 7. **Use the correct component type for `viewChild`** — `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
 8. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, or `IGX_PIVOT_GRID_DIRECTIVES`
diff --git a/skills/igniteui-angular-grids/references/features.md b/skills/igniteui-angular-grids/references/features.md
index dc785782310..250b94d1be9 100644
--- a/skills/igniteui-angular-grids/references/features.md
+++ b/skills/igniteui-angular-grids/references/features.md
@@ -67,24 +67,35 @@ For advanced programmatic grouping patterns — see [`data-operations.md`](./dat
 Merge adjacent cells with equal values:
 
 ```html
-<igx-column field="category" [merge]="true"></igx-column>
+<igx-grid [data]="data()" [cellMergeMode]="'always'">
+  <igx-column field="category" [merge]="true"></igx-column>
+</igx-grid>
 ```
 
-Or apply a custom merge strategy:
+Grid merge modes (`cellMergeMode`):
+- `'onSort'` — merge only when the column is sorted **(default)**
+- `'always'` — merge regardless of sort state
+
+Or apply a custom merge strategy at the **grid level** (not column):
 
 ```html
-<igx-column field="price" [merge]="true" [mergeStrategy]="priceRangeMerge"></igx-column>
+<igx-grid [data]="data()" [mergeStrategy]="customMerge" [cellMergeMode]="'always'">
+  <igx-column field="price" [merge]="true"></igx-column>
+</igx-grid>
 ```
 
 ```typescript
-import { IGridMergeStrategy } from 'igniteui-angular/core';
-// import { IGridMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package
+import { DefaultMergeStrategy } from 'igniteui-angular/core';
+// import { DefaultMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package
 
-priceRangeMerge: IGridMergeStrategy = {
-  shouldMerge(prevCell, curCell) {
-    return Math.abs(prevCell.value - curCell.value) < 10;
+// Extend DefaultMergeStrategy and override comparer
+class PriceRangeMergeStrategy extends DefaultMergeStrategy {
+  public override comparer(prevRecord: any, record: any, field: string): boolean {
+    return Math.abs(prevRecord[field] - record[field]) < 10;
   }
-};
+}
+
+customMerge = new PriceRangeMergeStrategy();
 ```
 
 ## Toolbar
@@ -164,12 +175,24 @@ For full remote virtualization patterns — see [`paging-remote.md`](./paging-re
 
 ```html
 <igx-grid [rowDraggable]="true" (rowDragStart)="onDragStart($event)" (rowDragEnd)="onDragEnd($event)">
-  <ng-template igxRowDragGhost let-dragData>
-    <span>Moving {{ dragData.dragData.name }}</span>
+  <!-- Custom ghost template (purely visual; row data is accessed in event handlers, not in the ghost template) -->
+  <ng-template igxRowDragGhost>
+    <igx-icon>arrow_right_alt</igx-icon>
   </ng-template>
 </igx-grid>
 ```
 
+Handle drops via `igxDrop` on the target:
+
+```typescript
+import { IDropDroppedEventArgs } from 'igniteui-angular/directives';
+
+onDropAllowed(args: IDropDroppedEventArgs) {
+  this.targetGrid.addRow(args.dragData.data);    // row data
+  this.sourceGrid.deleteRow(args.dragData.key);  // primary key
+}
+```
+
 ## Action Strip
 
 > **Docs:** [Action Strip](https://www.infragistics.com/products/ignite-ui-angular/angular/components/action-strip)
diff --git a/skills/igniteui-angular-grids/references/paging-remote.md b/skills/igniteui-angular-grids/references/paging-remote.md
index df2318437a1..4d5f95115ec 100644
--- a/skills/igniteui-angular-grids/references/paging-remote.md
+++ b/skills/igniteui-angular-grids/references/paging-remote.md
@@ -130,11 +130,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IgxGridComponent, IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
 import {
   IFilteringExpressionsTree,
+  ISortingExpression,
   NoopSortingStrategy,
   NoopFilteringStrategy
 } from 'igniteui-angular/core';
 import { IForOfState } from 'igniteui-angular/directives';
-import { ISortingEventArgs } from 'igniteui-angular/grids/core';
 import { debounceTime, Subject } from 'rxjs';
 
 @Component({
@@ -156,7 +156,7 @@ export class RemoteGridComponent {
   private dataService = inject(OrderService);
   private destroyRef = inject(DestroyRef);
 
-  private currentSort: ISortingEventArgs[] | undefined;
+  private currentSort: ISortingExpression[] | undefined;
   private currentFilter: IFilteringExpressionsTree | undefined;
 
   // Debounce rapid dataPreLoad events during fast scrolling
@@ -179,7 +179,7 @@ export class RemoteGridComponent {
     this.dataPreLoad$.next(event);
   }
 
-  onSortingDone(event: ISortingEventArgs) {
+  onSortingDone() {
     this.currentSort = this.gridRef().sortingExpressions;
     this.loadData(0, 15);
   }
@@ -217,7 +217,7 @@ export class RemoteGridComponent {
   [sortStrategy]="noopSort"
   [filterStrategy]="noopFilter"
   (dataPreLoad)="onDataPreLoad($event)"
-  (sortingDone)="onSortingDone($event)"
+  (sortingDone)="onSortingDone()"
   (filteringExpressionsTreeChange)="onFilteringExpressionsTreeChange()"
   height="600px">
 
diff --git a/skills/igniteui-angular-grids/references/sizing.md b/skills/igniteui-angular-grids/references/sizing.md
index d7b99cb7639..5cf718b9108 100644
--- a/skills/igniteui-angular-grids/references/sizing.md
+++ b/skills/igniteui-angular-grids/references/sizing.md
@@ -25,6 +25,15 @@ The grid supports both component inputs (`width`/`height`) and regular CSS/layou
 
 **Default:** `100%` — the grid fills available width of the parent/window.
 
+### `null` Width
+
+```html
+<igx-grid [width]="null" ...></igx-grid>
+```
+
+- All columns are rendered in the DOM — **horizontal column virtualization is disabled**.
+- **Warning:** rendering many columns without virtualization can significantly impact performance.
+
 ### Pixel Width
 
 ```html
@@ -141,6 +150,7 @@ html, body, .grid-container {
 - Column width is calculated as a percentage of the grid width.
 - Responsive — resizes when the grid resizes.
 - Combined percentages less than `100%` leave an empty area; greater than `100%` triggers a horizontal scrollbar.
+- If the grid `width` is `null`, percentage-width columns fall back to `136px` each.
 
 ## Grid Cell Spacing Control
 
diff --git a/skills/igniteui-angular-grids/references/state.md b/skills/igniteui-angular-grids/references/state.md
index 2ffdd43d24f..9094f535b08 100644
--- a/skills/igniteui-angular-grids/references/state.md
+++ b/skills/igniteui-angular-grids/references/state.md
@@ -260,18 +260,16 @@ regionFilter.filteringOperands = [
   }
 ];
 
-// Apply the filter to a dimension
+// Apply the filter to a dimension and notify the grid
 this.pivotConfig.filters[0].filter = regionFilter;
-// Notify the grid of the change
-this.pivotGridRef().pipeTrigger++;
+this.pivotGridRef().notifyDimensionChange(true);
 ```
 
 ### Dimension-Based Sorting
 
 ```typescript
-// Sort a row dimension
-this.pivotConfig.rows[0].sortDirection = SortingDirection.Desc;
-this.pivotGridRef().pipeTrigger++;
+// Sort a row dimension via the public API
+this.pivotGridRef().sortDimension(this.pivotConfig.rows[0], SortingDirection.Desc);
 ```
 
 ### Key Pivot Grid Limitations
diff --git a/skills/igniteui-angular-grids/references/structure.md b/skills/igniteui-angular-grids/references/structure.md
index 371a8de56c8..57a6b5e933c 100644
--- a/skills/igniteui-angular-grids/references/structure.md
+++ b/skills/igniteui-angular-grids/references/structure.md
@@ -249,7 +249,7 @@ For advanced programmatic filtering, complex AND/OR trees, and remote filtering
 <igx-grid [rowSelection]="'multiple'" [primaryKey]="'id'" [(selectedRows)]="selectedIds">
   <!-- Optional: Custom row selector checkbox -->
   <ng-template igxRowSelector let-rowContext>
-    <igx-checkbox [checked]="rowContext.selected" (change)="rowContext.select(!rowContext.selected)">
+    <igx-checkbox [checked]="rowContext.selected" [readonly]="true">
     </igx-checkbox>
   </ng-template>
 </igx-grid>
diff --git a/skills/igniteui-angular-grids/references/types.md b/skills/igniteui-angular-grids/references/types.md
index 08c69e08aea..12ababe424d 100644
--- a/skills/igniteui-angular-grids/references/types.md
+++ b/skills/igniteui-angular-grids/references/types.md
@@ -184,7 +184,7 @@ npm install igniteui-grid-lite
 ### Setup
 
 ```typescript
-import { Component, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
 import {
   IgxGridLiteComponent,
   IgxGridLiteColumnComponent,
@@ -215,7 +215,6 @@ export class UsersLiteComponent {
 ```html
 <igx-grid-lite #grid
   [data]="data"
-  [autoGenerate]="false"
   [sortingOptions]="{ mode: 'multiple' }">
 
   <igx-grid-lite-column
@@ -262,22 +261,21 @@ Columns use `<igx-grid-lite-column>` with these inputs:
 
 ### Templates
 
-Cell and header templates use dedicated directives:
+Use `igxGridLiteCell` for cell templates and `igxGridLiteHeader` for header templates:
 
 ```html
-<igx-grid-lite-column field="status" header="Status">
-  <!-- Custom cell template -->
-  <ng-template igxGridLiteCell let-value let-row="row" let-column="column">
-    <span [class]="value">{{ value }}</span>
+<igx-grid-lite-column field="rating" dataType="number">
+  <ng-template igxGridLiteHeader let-value>
+    <span>⭐ Rating</span>
   </ng-template>
-
-  <!-- Custom header template -->
-  <ng-template igxGridLiteHeader let-column>
-    <strong>{{ column.header }}</strong>
+  <ng-template igxGridLiteCell let-value let-row="row">
+    <span>{{ value }}</span>
   </ng-template>
 </igx-grid-lite-column>
 ```
 
+> When a header template is provided, the `header` text property is ignored.
+
 ### Sorting & Filtering API
 
 ```typescript
@@ -345,9 +343,9 @@ dataPipeline: IgxGridLiteDataPipelineConfiguration<Product> = {
 
 | Event | Cancelable | Payload |
 |---|---|---|
-| `(sorting)` | Yes (`event.detail.cancel = true`) | Sorting expression about to be applied |
+| `(sorting)` | Yes (`event.preventDefault()`) | Sorting expression about to be applied |
 | `(sorted)` | No | Sorting completed |
-| `(filtering)` | Yes (`event.detail.cancel = true`) | Filter expression about to be applied |
+| `(filtering)` | Yes (`event.preventDefault()`) | Filter expression about to be applied |
 | `(filtered)` | No | Filtering completed |
 
 ### Grid Lite Limitations