igniteui-angular 21.2.4 → 21.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "21.2.4",
+  "version": "21.2.6",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",

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

@@ -52,7 +52,7 @@ Base your code and explanation exclusively on what you read. If the reference fi
 | Task | Reference file to read |
 |---|---|
 | App setup, `app.config.ts` providers, `provideAnimations()`, entry-point imports, convenience directive arrays | [`references/setup.md`](./references/setup.md) |
-| Input Group, Combo, Simple Combo, Select, Date Picker, Date Range Picker, Time Picker, Calendar, Checkbox, Radio, Switch, Slider, reactive/template-driven forms | [`references/form-controls.md`](./references/form-controls.md) |
+| Input Group, Combo, Simple Combo, Select, Date Picker, Date Range Picker, Time Picker, Calendar, Checkbox, Radio, Switch, Slider, Autocomplete, reactive/template-driven forms | [`references/form-controls.md`](./references/form-controls.md) |
 | Tabs, Bottom Navigation, Stepper, Accordion, Expansion Panel, Splitter, Navigation Drawer | [`references/layout.md`](./references/layout.md) |
 | List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Indicators, Chat | [`references/data-display.md`](./references/data-display.md) |
 | Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) |

package/skills/igniteui-angular-components/references/charts.md

@@ -18,7 +18,7 @@ Ignite UI for Angular Charts provides 65+ chart types for data visualization. Ch
 This reference gives high-level guidance on when to use each chart type, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart component or feature you're interested in.
 
 ### Chart Component packages
-- `igniteui-angular-charts` — Category Chart, Financial Chart, Data Chart, and Pie Chart components (NPM)
+- `igniteui-angular-charts` — Category Chart, Financial Chart, Data Chart, Pie Chart, and Sparkline components (NPM)
 - `@infragistics/igniteui-angular-charts` — Licensed version with same API (ProGet)
 
 ### Main Chart Components
@@ -33,51 +33,41 @@ This reference gives high-level guidance on when to use each chart type, their k
 | `IgxPieChartComponent` | `IgxPieChartModule` | Part-to-whole pie and donut charts |
 | `IgxDataPieChartComponent` | `IgxDataPieChartModule` | Simplified API for pie charts |
 | `IgxLegendComponent` | `IgxLegendModule` | Shared legend component |
+| `IgxSparklineComponent` | `IgxSparklineModule` | Compact inline chart for grid cells or small layouts |
 
 ### When to use each:
-- **Category Chart** → Use for simple area/bar/column; 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%)
+- **Sparkline** → Use for compact inline visualization in grid cells, dashboards, or small-space layouts
 
 ---
 
 ## General Chart Configuration
 
-### Data Binding
-```typescript
-// Category Chart uses 'dataSource' to bind data (auto-detects numeric fields)
-chartComponent.dataSource = [
-  { month: 'Jan', revenue: 5000 },
-  { month: 'Feb', revenue: 6500 }
-];
-
-// Data Chart uses 'itemsSource' and explicit series configuration
-chartComponent.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.)
+- **Sparkline**: `displayType` property — type: `SparklineDisplayType` (Line, Area, Column, WinLoss)
 - **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
@@ -85,58 +75,7 @@ chartComponent.itemsSource = dataArray;
 - `valueMemberPath` — Field with numeric values
 
 ### Responsive & Sizing
-- Charts auto-resize with container
-- Set height/width on chart container (div, flexbox parent)
-- Use CSS for responsive behavior
-
----
-
-## Key Chart Features
-
-### Axis Configuration
-- **X-Axis**: Category (string/date) or Numeric (scatter/financial)
-- **Y-Axis**: Always numeric
-- Properties: `xAxisTitle`, `yAxisTitle`, `xAxisInterval`, `yAxisMinimumValue`, `yAxisMaximumValue`
-- 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)
-
-### 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
-
-### Animations
-- Enable with `transitionInMode` (Auto, None, FromZero, FromSeries, etc.)
-- Control speed via `transitionDuration` (milliseconds)
-- Works on initial load and data updates
-
-### Highlighting & Selection
-- **Highlighting**: Mouse hover effect; set `highlightingMode`, `highlightingBehavior`
-- **Selection**: Click to select data points/series; properties vary by chart type
-
-### Zooming & Panning
-- Mouse wheel to zoom; drag to pan
-- Properties: `isHorizontalZoomEnabled`, `isVerticalZoomEnabled`
-- Keyboard support: Arrow keys, +/- for zoom
-
-### Trendlines
-- Visualize data trends with trendline types (Linear, Logarithmic, Exponential, etc.)
-- Property: `trendLineType` (Category/Financial charts)
-
-### Legend
-- Display with `legend` property (assign `IgxLegendComponent`)
-- `legendItemTemplate` for custom legend items
-- Properties: `showLegend`, `legendOrientation`, `legendPosition`
-
-### Annotations
-- **Crosshairs**: `crosshairsDisplayMode` (None, Vertical, Horizontal, Both)
-- **Final Value Layer**: Show ending values on axis
-- **Callout Layer**: Custom callouts at specific values
-- **Range Annotations**: Highlight data ranges
+- Set height/width on chart container (div, flexbox parent). The chart will render with 0px height if the container doesn't have a defined height.
 
 ---
 
@@ -146,7 +85,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 +96,6 @@ 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`
 - **Best Practices**:
   - Start numeric axis at 0
   - Sort categories by value (ascending/descending)
@@ -168,7 +106,6 @@ 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`
 - **Best Practices**:
   - Start Y-axis at 0
   - Order time-series left to right
@@ -186,34 +123,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)
 - **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%)
 - **Data**: Category labels, numeric values
 - **Variants**: Pie, Donut (ring), Radial Pie
-- **API**:
-  - `labelMemberPath` — Data property for slice labels
-  - `valueMemberPath` — Data property for numeric values
-  - `legend` — Assign IgxLegendComponent for legend display
-  - `selectionMode` — Single, Multiple, Manual (default Single)
-  - `othersCategoryThreshold` — Combine small slices into "Others"
-  - `othersCategoryType` — Threshold as Number or Percent
-  - `allowSliceExplosion` — Enable click to expand slice
-  - `allowSliceSelection` — Enable click selection highlighting
 - **Features**:
   - Slice explosion (separate a slice from pie)
   - Slice selection (single or multiple)
@@ -227,127 +150,32 @@ chartComponent.itemsSource = dataArray;
   - Use distinguishable colors
 - **Avoid**: Many segments (>8), change over time (use Bar/Line instead), precise comparisons (Bar is better)
 
----
-
-## Common API Members by Chart Type
-
-### IgxCategoryChartComponent (Area, Bar, Column, Line, etc.)
-```typescript
-// Required
-dataSource: any[];           // Data array (auto-detects numeric fields)
-chartType: CategoryChartType;        // Auto, Area, Column, Line, Point, etc.
-
-// Common optional inputs
-xAxisTitle: string;          // X-axis label
-yAxisTitle: string;          // Y-axis label
-xAxisLabelLocation: AxisLabelLocation;  // Axis label alignment
-yAxisLabelLocation: AxisLabelLocation;
-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.)
-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)
-```
-
-### 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
-xAxisTitle: string;
-yAxisTitle: string;
-xAxisMode: AxisMode; // OrdinalTimeX, DateTimeX
-yAxisMode: AxisMode;
-showDefaultTooltip: boolean;
-isHorizontalZoomEnabled: boolean;
-isVerticalZoomEnabled: boolean;
-crosshairsDisplayMode: CrosshairsDisplayMode;
-trendLineType: TrendLineType;
-```
-
-### IgxPieChartComponent / IgxDataPieChartComponent
-```typescript
-itemsSource: any[];
-labelMemberPath: string;
-valueMemberPath: string;
-legend: IgxLegendComponent;
-legendLabelMemberPath: string;
-legendItemTemplate: TemplateRef;
-legendItemBadgeTemplate: TemplateRef;
-selectionMode: SelectionMode; // Single, Multiple, Manual
-selectionBehavior: SelectionBehavior;
-allowSliceExplosion: boolean;
-allowSliceSelection: boolean;
-othersCategoryThreshold: number;
-othersCategoryType: OthersCategoryType; // Number, Percent
-startAngle: number;
-radiusFactor: number;
-showDefaultTooltip: boolean;
-toolTipType: ToolTipType;
-highlightingMode: HighlightingMode;
-```
+### Sparkline (`IgxSparklineComponent`)
+- **Use**: Compact inline data visualization in grid cells, dashboards, or small-space layouts
+- **Data**: One-dimensional array with at least one numeric field
+- **Variants**: Line, Area, Column, WinLoss
+- **Features**:
+  - Configurable markers (All, Low, High, First, Last, Negative)
+  - Normal range — horizontal shaded band (`normalRangeMinimum`, `normalRangeMaximum`)
+  - Trendlines via `trendLineType`
+  - Unknown value plotting via `unknownValuePlotting`
+  - Tooltip support via `tooltipTemplate`
+- **Best Practices**:
+  - Set explicit `height` and `width` on the component or its container (renders at 0px otherwise)
+  - Start Y-axis at 0 for accurate comparisons
+  - Use Line or Area type for trend visualization; Column for discrete comparisons; WinLoss for binary positive/negative
+  - When embedding in a grid cell, set compact dimensions (e.g. `height="40px"` `width="220px"`)
+- **Avoid**: Detailed data analysis (use Category Chart or Data Chart), displaying many data labels (Sparkline only supports first/last X-axis labels and high/low Y-axis values)
 
 ---
 
-## Import Paths
-
-> **Chart components are NOT standalone** — always import via their NgModule, never by component class. Standalone Angular components can import NgModules directly in their `imports` array.
-
-### NgModule imports (required for all project types)
-
-```typescript
-// NgModules — import these into your standalone component's 'imports' array
-// or into an NgModule's 'imports' array
-import {
-  IgxCategoryChartModule,    // provides IgxCategoryChartComponent
-  IgxFinancialChartModule,   // provides IgxFinancialChartComponent
-  IgxPieChartModule,         // provides IgxPieChartComponent
-  IgxDataPieChartModule,     // provides IgxDataPieChartComponent
-  IgxLegendModule,           // provides IgxLegendComponent
-} from 'igniteui-angular-charts';
-
-// Enums and types — these ARE plain TS exports and can be imported directly
-import {
-  FinancialChartType,
-  MarkerType,
-  ToolTipType,
-  TrendLineTypeCollection,
-  HighlightingMode,
-  TransitionInSpeedType,
-  AxisLabelSettings,
-  CrosshairsDisplayMode,
-  LegendOrientation,
-  OthersCategoryContext,
-  SeriesSelectionMode,
-  IndicatorDisplayType,
-  FinancialChartVolumeType,
-  AxisOrientation
-} from 'igniteui-angular-charts';
-```
-
 ### Standalone component example
 
 ```typescript
 import { Component } from '@angular/core';
 import {
   IgxCategoryChartModule,
-  ChartType
+  CategoryChartType
 } from 'igniteui-angular-charts';
 
 @Component({
@@ -414,9 +242,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
@@ -445,15 +273,8 @@ import { IgxCategoryChartModule } from 'igniteui-angular-charts';
 - 1 numeric column (value; segments should sum to 100%)
 - Example: `[{ label: 'Category A', value: 30 }, { label: 'Category B', value: 70 }]`
 
----
-
-## Documentation References
-
-- **Chart Overview**: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-overview
-- **Chart API**: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-api
-- **Chart Features**: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-features
-- **Area Chart**: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart
-- **Bar Chart**: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bar-chart
-- **Column Chart**: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/column-chart
-- **Stock Chart**: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart
-- **Pie Chart**: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart
+### Sparkline
+- Array of data items (one-dimensional)
+- At least 1 numeric field mapped via `valueMemberPath`
+- Optionally 1 string field mapped via `labelMemberPath` (used for first/last X-axis labels)
+- Example: `[{ label: 'Jan', value: 10 }, { label: 'Feb', value: 25 }, { label: 'Mar', value: 15 }]`

package/skills/igniteui-angular-components/references/data-display.md

@@ -21,8 +21,6 @@ This reference gives high-level guidance on when to use each data display compon
 
 ## List
 
-> **Docs:** [List Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list)
-
 ```typescript
 import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
@@ -35,9 +33,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>
   }
@@ -48,14 +45,12 @@ Auxiliary directives for list items: `igxListThumbnail`, `igxListAction`, `igxLi
 
 ## Tree
 
-> **Docs:** [Tree Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree)
-
 ```typescript
 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 +66,12 @@ 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 +84,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>
@@ -109,8 +103,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 
 ## Chips
 
-> **Docs:** [Chip Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chip)
-
 ```typescript
 import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips';
 ```
@@ -127,8 +119,6 @@ import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'
 
 ## Avatar & Badge
 
-> **Docs:** [Avatar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/avatar) · [Badge](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge)
-
 ```typescript
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
@@ -171,8 +161,6 @@ Badge types: `'primary'`, `'info'`, `'success'`, `'warning'`, `'error'`.
 
 ## Icon
 
-> **Docs:** [Icon Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon)
-
 ```typescript
 import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
 ```
@@ -202,8 +190,6 @@ export class AppComponent {
 
 ## Carousel
 
-> **Docs:** [Carousel Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel)
-
 ```typescript
 import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel';
 ```
@@ -223,8 +209,6 @@ import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carous
 
 ## Paginator
 
-> **Docs:** [Paginator Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/paginator)
-
 ```typescript
 import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
 ```
@@ -243,8 +227,6 @@ import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
 
 ## Progress Indicators
 
-> **Docs:** [Linear Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear-progress) · [Circular Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/circular-progress)
-
 ```typescript
 import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar';
 import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
@@ -268,12 +250,10 @@ 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)
 
-> **Docs:** [Chat Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chat)
-
 ```typescript
 import { IgxChatComponent } from 'igniteui-angular/chat';
 ```

package/skills/igniteui-angular-components/references/directives.md

@@ -16,8 +16,6 @@ This reference gives high-level guidance on when to use each directive, their ke
 
 ## Button & Icon Button
 
-> **Docs:** [Button Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button)
-
 ```typescript
 import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -46,8 +44,6 @@ Button variants for `igxIconButton`: `'flat'`, `'outlined'`, `'contained'`.
 
 ## Button Group
 
-> **Docs:** [Button Group Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup)
-
 ```typescript
 // Option A — convenience collection (includes IgxButtonGroupComponent + IgxButtonDirective)
 import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
@@ -129,7 +125,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:**
 
@@ -161,8 +157,6 @@ getSelected()    { return this.buttonGroup().selectedButtons; }
 
 ## Ripple Effect
 
-> **Docs:** [Ripple Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ripple)
-
 ```typescript
 import { IgxRippleDirective } from 'igniteui-angular/directives';
 ```
@@ -181,34 +175,30 @@ Inputs: `[igxRipple]` (ripple color), `[igxRippleCentered]` (always start from c
 
 ## Tooltip
 
-> **Docs:** [Tooltip Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip)
-
 ```typescript
 import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives';
 ```
 
 ```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
 
-> **Docs:** [Drag and Drop](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drag-drop)
-
 ```typescript
 import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEventArgs } from 'igniteui-angular/directives';
 ```
@@ -217,13 +207,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 +243,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 +251,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.