igniteui-angular 21.1.0-rc.5 → 21.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "21.1.0-rc.5",
+  "version": "21.1.1",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -86,8 +86,8 @@
     "@angular/forms": "21",
     "hammerjs": "^2.0.8",
     "@types/hammerjs": "^2.0.46",
-    "igniteui-webcomponents": "^6.5.0",
-    "igniteui-grid-lite": "~0.5.0"
+    "igniteui-webcomponents": "^7.0.0",
+    "igniteui-grid-lite": "~0.6.0"
   },
   "peerDependenciesMeta": {
     "hammerjs": {
@@ -104,7 +104,7 @@
     }
   },
   "igxDevDependencies": {
-    "@igniteui/angular-schematics": "~21.1.1490-beta.0"
+    "@igniteui/angular-schematics": "~21.1.1490"
   },
   "ng-update": {
     "migrations": "./migrations/migration-collection.json",

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

@@ -1,7 +1,7 @@
 ---
 name: igniteui-angular-components
-description: "All Ignite UI Angular UI components: application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager directives), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use for any non-grid Ignite UI Angular UI question."
-user-invokable: true
+description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
+user-invocable: true
 ---
 
 # Ignite UI for Angular — UI Components
@@ -18,13 +18,10 @@ You are **required** to complete ALL of the following steps before producing any
 **STEP 1 — Identify every component or feature involved.**
 Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., a form inside a Dialog requires reading both `form-controls.md` AND `feedback.md`).
 
-**STEP 2 — Read every identified reference file in full.**
-Call `read_file` (or equivalent) on each reference file identified in Step 1. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.
+**STEP 2 — Read every identified reference file in full (PARALLEL).**
+Call `read_file` (or equivalent) on **all** reference files identified in Step 1 **in a single parallel batch** — do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.
 
-**STEP 3 — Check app setup.**
-If the component is new to the project (or you're scaffolding a new feature), also read [`references/setup.md`](./references/setup.md) to verify the correct providers and entry-point import patterns. Missing `provideAnimations()` is the most common source of runtime failures.
-
-**STEP 4 — Only then produce output.**
+**STEP 3 — Only then produce output.**
 Base your code and explanation exclusively on what you read. If the reference files do not cover something, say so explicitly rather than guessing.
 
 ### Task → Reference File
@@ -36,7 +33,7 @@ Base your code and explanation exclusively on what you read. If the reference fi
 | 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) |
-| Button, Icon Button, Ripple, Tooltip, Drag and Drop | [`references/directives.md`](./references/directives.md) |
+| Button, Icon Button, Button Group, Ripple, Tooltip, Drag and Drop | [`references/directives.md`](./references/directives.md) |
 | Layout Manager (`igxLayout`, `igxFlex` directives), Dock Manager (`igc-dockmanager` web component) | [`references/layout-manager.md`](./references/layout-manager.md) |
 | Charts (Area, Bar, Column, Stock/Financial, Pie), chart configuration, chart features (animation, tooltips, markers, highlighting, zooming), data binding | [`references/charts.md`](./references/charts.md) |
 
@@ -47,11 +44,11 @@ Base your code and explanation exclusively on what you read. If the reference fi
 ## Prerequisites
 
 - Angular 20+ project
-- `igniteui-angular` installed via `npm install igniteui-angular`, **or** `@infragistics/igniteui-angular` for licensed users
-- A theme applied (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md))
+- `@angular/cli` installed
+- `igniteui-angular` or `@infragistics/igniteui-angular` added to the project via `ng add igniteui-angular` (or the `@infragistics` variant) or `npm install` — see [Package Variants](#package-variants) below.
+- A theme applied to the application (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md)).
 - `provideAnimations()` in `app.config.ts` — **required before using any overlay or animated component**
 
----
 
 ## Package Variants
 
@@ -61,6 +58,7 @@ Base your code and explanation exclusively on what you read. If the reference fi
 | `@infragistics/igniteui-angular` | Requires private `@infragistics` registry | Licensed / enterprise users |
 
 Both packages share **identical entry-point paths**. Check `package.json` and use that package name as the prefix for every import. Never import from the root barrel of either package.
+Both packages can be added to the project using `@angular/cli` with the following commands: `ng add igniteui-angular` or `ng add @infragistics/igniteui-angular`.
 
 ---
 

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

@@ -1,5 +1,17 @@
 # Angular Charts Reference
 
+## Contents
+
+- [Overview](#overview)
+- [General Chart Configuration](#general-chart-configuration)
+- [Key Chart Features](#key-chart-features)
+- [Chart Types Reference](#chart-types-reference)
+- [Common API Members by Chart Type](#common-api-members-by-chart-type)
+- [Import Paths](#import-paths)
+- [Styling & Theming](#styling--theming)
+- [Data Requirements](#data-requirements)
+- [Documentation References](#documentation-references)
+
 ## Overview
 
 Ignite UI for Angular Charts provides 65+ chart types for data visualization. Charts are packaged separately in `igniteui-angular-charts` (or `@infragistics/igniteui-angular-charts` for licensed users).
@@ -303,7 +315,6 @@ highlightingMode: HighlightingMode;
 import {
   IgxCategoryChartModule,    // provides IgxCategoryChartComponent
   IgxFinancialChartModule,   // provides IgxFinancialChartComponent
-  IgxDataChartModule,        // provides IgxDataChartComponent + all series/axes
   IgxPieChartModule,         // provides IgxPieChartComponent
   IgxDataPieChartModule,     // provides IgxDataPieChartComponent
   IgxLegendModule,           // provides IgxLegendComponent
@@ -311,21 +322,20 @@ import {
 
 // Enums and types — these ARE plain TS exports and can be imported directly
 import {
-  ChartType,
   FinancialChartType,
   MarkerType,
   ToolTipType,
-  TrendLineType,
+  TrendLineTypeCollection,
   HighlightingMode,
-  TransitionInMode,
-  AxisLabelLocation,
+  TransitionInSpeedType,
+  AxisLabelSettings,
   CrosshairsDisplayMode,
   LegendOrientation,
-  OthersCategoryType,
-  SelectionMode,
-  IndicatorType,
-  VolumeType,
-  AxisMode
+  OthersCategoryContext,
+  SeriesSelectionMode,
+  IndicatorDisplayType,
+  FinancialChartVolumeType,
+  AxisOrientation
 } from 'igniteui-angular-charts';
 ```
 

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

@@ -3,6 +3,19 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [List](#list)
+- [Tree](#tree)
+- [Card](#card)
+- [Chips](#chips)
+- [Avatar & Badge](#avatar--badge)
+- [Icon](#icon)
+- [Carousel](#carousel)
+- [Paginator](#paginator)
+- [Progress Indicators](#progress-indicators)
+- [Chat (AI Chat Component)](#chat-ai-chat-component)
+
 ## List
 
 > **Docs:** [List Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list)
@@ -64,9 +77,8 @@ Selection modes: `'None'`, `'BiCascade'`, `'Cascade'`.
 ```typescript
 import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardHeaderThumbnailDirective } from 'igniteui-angular/card';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
-import { IgxButtonDirective } from 'igniteui-angular/button';
-import { IgxRippleDirective } from 'igniteui-angular/ripple';
-import { IgxIconButtonDirective } from 'igniteui-angular/button';
+import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxRippleDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 ```
 
@@ -215,8 +227,8 @@ import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
 > **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/linear-progress-bar';
-import { IgxCircularProgressBarComponent } from 'igniteui-angular/circular-progress-bar';
+import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar';
+import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
 ```
 
 ```html
@@ -248,26 +260,94 @@ import { IgxChatComponent } from 'igniteui-angular/chat';
 ```
 
 ```html
-<igx-chat
-  [messages]="messages()"
-  [isSendDisabled]="isLoading()"
-  (sendMessage)="onSend($event)">
-</igx-chat>
+ <igx-chat
+        [options]="options()"
+        [messages]="messages()"
+        [draftMessage]="draftMessage"
+        [templates]="templates()"
+        (messageCreated)="onMessageCreated($event)">
+    </igx-chat>
+
+    <ng-template #messageHeader let-message>
+        @if (message.sender !== 'user') {
+            <div>
+                <span style="font-weight: bold; color: #c00000;"
+                >Developer Support</span
+                >
+            </div>
+        }
+    </ng-template>
+
+    <ng-template #suggestionPrefix>
+        <span style="font-weight: bold">💡</span>
+    </ng-template>
+
+    <ng-template #messageContent let-message igxChatMessageContext>
+        <div [innerHTML]="message.text | fromMarkdown | async"></div>
+    </ng-template>
 ```
 
 ```typescript
-import { IgxChatComponent, IgxMessage } from 'igniteui-angular/chat';
-
-messages = signal<IgxMessage[]>([]);
-isLoading = signal(false);
-
-async onSend(text: string) {
-  this.messages.update(m => [...m, { author: 'user', content: text }]);
-  this.isLoading.set(true);
-  const reply = await this.aiService.ask(text);
-  this.messages.update(m => [...m, { author: 'assistant', content: reply }]);
-  this.isLoading.set(false);
-}
+import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatOptions } from 'igniteui-angular/chat';
+import { MarkdownPipe } from 'igniteui-angular/chat-extras';
+
+@Component({
+    selector: 'app-chat-features-sample',
+    styleUrls: ['./features-sample.component.scss'],
+    templateUrl: './features-sample.component.html',
+    imports: [IgxChatComponent, IgxChatMessageContextDirective, AsyncPipe, MarkdownPipe]
+})
+export class ChatFeaturesSampleComponent {
+    private _messageHeader = viewChild.required('messageHeader');
+    private _suggestionPrefix = viewChild.required('suggestionPrefix');
+    private _messageContent = viewChild.required('messageContent');
+
+...
+
+
+public options = signal<IgxChatOptions>({
+        disableAutoScroll: false,
+        disableInputAttachments: false,
+        inputPlaceholder: 'Type your message here...',
+        headerText: 'Developer Support',
+        suggestionsPosition: "below-input",
+        suggestions: [ 'Send me an e-mail when support is available.' ]
+    });
+
+    public templates = signal({});
+
+    constructor() {
+        effect(() => {
+            const messageHeader = this._messageHeader();
+            const suggestionPrefix = this._suggestionPrefix();
+            const messageContent = this._messageContent();
+
+            if (messageHeader && suggestionPrefix && messageContent) {
+                this.templates.set({
+                    messageHeader: messageHeader,
+                    suggestionPrefix: suggestionPrefix,
+                    messageContent: messageContent
+                });
+            }
+        });
+    }
+
+    public onMessageCreated(e: any): void {
+        const newMessage = e;
+        this.messages.update(messages => [...messages, newMessage]);
+        this.options.update(options => ({ ...options, isTyping: true, suggestions: [] }));
+
+        const responseMessage = {
+            id: Date.now().toString(),
+            text: 'Our support team is currently unavailable. We\'ll get back to you as soon as possible.',
+            sender: 'support',
+            timestamp: Date.now().toString()
+        };
+
+        this.draftMessage = { text: '', attachments: [] };
+        this.messages.update(messages => [...messages, responseMessage]);
+        this.options.update(options => ({ ...options, isTyping: false }));
+    }
 ```
 
 ## See Also

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

@@ -3,12 +3,20 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [Button & Icon Button](#button--icon-button)
+- [Button Group](#button-group)
+- [Ripple Effect](#ripple-effect)
+- [Tooltip](#tooltip)
+- [Drag and Drop](#drag-and-drop)
+
 ## Button & Icon Button
 
 > **Docs:** [Button Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button)
 
 ```typescript
-import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/button';
+import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 ```
 
@@ -33,12 +41,127 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 Button variants for `igxButton`: `'flat'`, `'raised'`, `'outlined'`, `'fab'`.
 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';
+
+// Option B — individual imports
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+
+import { IgxIconComponent } from 'igniteui-angular/icon';
+```
+
+```html
+<!-- Text buttons — single selection (default) -->
+<igx-buttongroup>
+  <button igxButton>Left</button>
+  <button igxButton [selected]="true">Center</button>
+  <button igxButton>Right</button>
+</igx-buttongroup>
+
+<!-- Multi-selection -->
+<igx-buttongroup selectionMode="multi">
+  <button igxButton><igx-icon>format_bold</igx-icon></button>
+  <button igxButton><igx-icon>format_italic</igx-icon></button>
+  <button igxButton><igx-icon>format_underlined</igx-icon></button>
+</igx-buttongroup>
+
+<!-- singleRequired — always keeps one button selected, cannot deselect -->
+<igx-buttongroup selectionMode="singleRequired">
+  <button igxButton [selected]="true">Day</button>
+  <button igxButton>Week</button>
+  <button igxButton>Month</button>
+</igx-buttongroup>
+
+<!-- Vertical alignment -->
+<igx-buttongroup alignment="vertical">
+  <button igxButton>Top</button>
+  <button igxButton>Middle</button>
+  <button igxButton>Bottom</button>
+</igx-buttongroup>
+
+<!-- Disabled group -->
+<igx-buttongroup [disabled]="true">
+  <button igxButton>A</button>
+  <button igxButton>B</button>
+</igx-buttongroup>
+
+<!-- React to selection / deselection events -->
+<igx-buttongroup (selected)="onSelected($event)" (deselected)="onDeselected($event)">
+  <button igxButton>One</button>
+  <button igxButton>Two</button>
+  <button igxButton>Three</button>
+</igx-buttongroup>
+```
+
+```typescript
+import { IButtonGroupEventArgs } from 'igniteui-angular/button-group';
+
+onSelected(event: IButtonGroupEventArgs) {
+  console.log('Selected index:', event.index, 'button:', event.button);
+}
+
+onDeselected(event: IButtonGroupEventArgs) {
+  console.log('Deselected index:', event.index);
+}
+```
+
+**Key inputs on `igx-buttongroup`:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `selectionMode` | `'single' \| 'singleRequired' \| 'multi'` | `'single'` | Selection behaviour. `singleRequired` prevents full deselection. |
+| `alignment` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction of the buttons. |
+| `disabled` | `boolean` | `false` | Disables every button in the group. |
+
+**Key outputs on `igx-buttongroup`:**
+
+| Output | Payload | Emits when |
+|---|---|---|
+| `(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).
+
+**Key inputs on each `<button igxButton>` child:**
+
+| Input | Type | Description |
+|---|---|---|
+| `[selected]` | `boolean` | Sets the initial selected state of the button. |
+| `[disabled]` | `boolean` | Disables a specific button within the group. |
+
+**Programmatic control:**
+
+```typescript
+import { viewChild } from '@angular/core';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+
+buttonGroup = viewChild.required<IgxButtonGroupComponent>('myGroup');
+
+selectSecond()   { this.buttonGroup().selectButton(1); }
+deselectSecond() { this.buttonGroup().deselectButton(1); }
+getSelected()    { return this.buttonGroup().selectedButtons; }
+```
+
+```html
+<igx-buttongroup #myGroup selectionMode="multi">
+  <button igxButton>A</button>
+  <button igxButton>B</button>
+  <button igxButton>C</button>
+</igx-buttongroup>
+```
+
 ## Ripple Effect
 
 > **Docs:** [Ripple Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ripple)
 
 ```typescript
-import { IgxRippleDirective } from 'igniteui-angular/ripple';
+import { IgxRippleDirective } from 'igniteui-angular/directives';
 ```
 
 ```html
@@ -58,7 +181,7 @@ Inputs: `[igxRipple]` (ripple color), `[igxRippleCentered]` (always start from c
 > **Docs:** [Tooltip Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip)
 
 ```typescript
-import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/tooltip';
+import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives';
 ```
 
 ```html
@@ -84,7 +207,7 @@ hideTooltip() { this.tooltip().close(); }
 > **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/drag-drop';
+import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEventArgs } from 'igniteui-angular/directives';
 ```
 
 ### Basic drag and drop

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

@@ -5,13 +5,21 @@
 
 > **AGENT INSTRUCTION:** All components in this file rely on Angular animations and the Ignite UI overlay system. Before using any of them, ensure `provideAnimations()` (or `provideAnimationsAsync()`) is present in `app.config.ts`. If it is missing, add it — these components will throw runtime errors or silently fail to animate without it.
 
+## Contents
+
+- [Dialog](#dialog)
+- [Snackbar](#snackbar)
+- [Toast](#toast)
+- [Banner](#banner)
+- [Key Rules](#key-rules)
+
 ## Dialog
 
 > **Docs:** [Dialog Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog)
 
 ```typescript
 import { IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective } from 'igniteui-angular/dialog';
-import { IgxButtonDirective } from 'igniteui-angular/button';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 ```
 
 ```html
@@ -50,7 +58,7 @@ Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(leftButtonSelect)`,
 
 ```typescript
 import { IgxSnackbarComponent, IgxSnackbarActionDirective } from 'igniteui-angular/snackbar';
-import { IgxButtonDirective } from 'igniteui-angular/button';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 ```
 
 ```html
@@ -98,7 +106,7 @@ Toast vs Snackbar: Toast is non-interactive (no action button), always auto-hide
 ```typescript
 import { IgxBannerComponent, IgxBannerActionsDirective } from 'igniteui-angular/banner';
 import { IgxIconComponent } from 'igniteui-angular/icon';
-import { IgxButtonDirective } from 'igniteui-angular/button';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 ```
 
 ```html

package/skills/igniteui-angular-components/references/form-controls.md

@@ -3,6 +3,21 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [Input Group](#input-group)
+- [Combo (Multi-Select Dropdown)](#combo-multi-select-dropdown)
+- [Simple Combo (Single-Select)](#simple-combo-single-select)
+- [Select](#select)
+- [Date Picker](#date-picker)
+- [Date Range Picker](#date-range-picker)
+- [Time Picker](#time-picker)
+- [Calendar](#calendar)
+- [Checkbox, Radio, Switch](#checkbox-radio-switch)
+- [Slider](#slider)
+- [Reactive Forms Integration](#reactive-forms-integration)
+- [Key Rules](#key-rules)
+
 ## Input Group
 
 > **Docs:** [Input Group](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group)
@@ -109,9 +124,11 @@ Implements `ControlValueAccessor` and `Validator`. Works with both reactive and
 > **Docs:** [Date Range Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-range-picker)
 
 ```typescript
-import { IgxDateRangePickerComponent } from 'igniteui-angular/date-range-picker';
-import { IgxDateTimeEditorDirective } from 'igniteui-angular/date-time-editor';
+import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker';
+import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
 import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
+
+// import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 ```
 
 ```html
@@ -186,7 +203,13 @@ import { IgxSwitchComponent } from 'igniteui-angular/switch';
 > **Docs:** [Slider Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)
 
 ```typescript
-import { IgxSliderComponent, SliderType } from 'igniteui-angular/slider';
+import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider';
+
+public sliderType = IgxSliderType;
+  public priceRange = {
+      lower: 200,
+      upper: 800
+  };
 ```
 
 ```html
@@ -195,7 +218,7 @@ import { IgxSliderComponent, SliderType } from 'igniteui-angular/slider';
 
 <!-- Range slider -->
 <igx-slider
-  [type]="SliderType.RANGE"
+  [type]="sliderType.RANGE"
   [minValue]="0"
   [maxValue]="100"
   [lowerBound]="20"

package/skills/igniteui-angular-components/references/layout-manager.md

@@ -3,6 +3,11 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [Layout Manager Directives](#layout-manager-directives)
+- [Dock Manager](#dock-manager)
+
 ---
 
 ## Layout Manager Directives

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

@@ -3,6 +3,15 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
+## Contents
+
+- [Tabs](#tabs)
+- [Bottom Navigation](#bottom-navigation)
+- [Stepper](#stepper)
+- [Accordion](#accordion)
+- [Splitter](#splitter)
+- [Navigation Drawer](#navigation-drawer)
+
 ## Tabs
 
 > **Docs:** [Tabs Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)
@@ -171,9 +180,9 @@ import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'ig
 > **Docs:** [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer)
 
 ```typescript
-import { IgxNavDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerMiniTemplateDirective } from 'igniteui-angular/nav-drawer';
+import { IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerMiniTemplateDirective } from 'igniteui-angular/navigation-drawer';
 import { IgxIconComponent } from 'igniteui-angular/icon';
-import { IgxRippleDirective } from 'igniteui-angular/ripple';
+import { IgxRippleDirective } from 'igniteui-angular/directives';
 ```
 
 ```html