igniteui-angular 22.1.0-beta.0 → 22.1.0-beta.1

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

@@ -11,9 +11,6 @@
 - [Tooltip](#tooltip)
 - [Drag and Drop](#drag-and-drop)
 
-## Overview
-This reference gives high-level guidance on when to use each directive, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific directive or feature you're interested in.
-
 ## Button & Icon Button
 
 ```typescript
@@ -56,104 +53,19 @@ 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>
+<igx-buttongroup selectionMode="multi" alignment="horizontal"
+  (selected)="onSelected($event)" (deselected)="onDeselected($event)">
+  <button igxButton [selected]="true"><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>
+  <button igxButton [disabled]="true"><igx-icon>format_underlined</igx-icon></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 `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:**
-
-| 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>
-```
+- `selectionMode`: `'single'` (default) | `'singleRequired'` (one always stays selected) | `'multi'`
+- `alignment`: `'horizontal'` (default) | `'vertical'`; `[disabled]` on the group disables all buttons
+- `(selected)`/`(deselected)` emit `IButtonGroupEventArgs` (`{ owner, button, index }`, from `igniteui-angular/button-group`)
+- Programmatic: `selectButton(index)`, `deselectButton(index)`, `selectedButtons` on `IgxButtonGroupComponent`
+- Further members: `search_api({ framework: "angular", query: "IgxButtonGroupComponent" })`
 
 ## Ripple Effect
 
@@ -175,28 +87,15 @@ Inputs: `[igxRipple]` (ripple color), `[igxRippleCentered]` (always start from c
 
 ## Tooltip
 
-```typescript
-import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives';
-```
+> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "tooltip" })` covers triggers, overlay behavior, sticky/arrowed tooltips, styling, and accessibility.
+
+The at-a-glance pairing — `igxTooltipTarget` on the host references the `igxTooltip` element (both from `igniteui-angular/directives`):
 
 ```html
-<button igxButton [igxTooltipTarget]="myTooltip" [showDelay]="500">
-  Hover or focus me
-</button>
+<button igxButton [igxTooltipTarget]="myTooltip" [showDelay]="500">Hover or focus me</button>
 <div igxTooltip #myTooltip="tooltip">Helpful tooltip text</div>
 ```
 
-Inputs on `[igxTooltipTarget]`: `[showDelay]` (ms), `[hideDelay]` (ms), `[tooltipDisabled]`.
-
-Programmatic control via the target directive:
-
-```typescript
-tooltipTarget = viewChild.required(IgxTooltipTargetDirective);
-
-show() { this.tooltipTarget().showTooltip(); }
-hide() { this.tooltipTarget().hideTooltip(); }
-```
-
 ## Drag and Drop
 
 ```typescript

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

@@ -3,7 +3,7 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
-> **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.
+> **Important:** 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
 
@@ -13,9 +13,6 @@
 - [Banner](#banner)
 - [Key Rules](#key-rules)
 
-## Overview
-This reference gives high-level guidance on when to use each feedback and overlay component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
-
 ## Dialog
 
 ```typescript

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

@@ -19,9 +19,6 @@
 - [Reactive Forms Integration](#reactive-forms-integration)
 - [Key Rules](#key-rules)
 
-## Overview
-This reference gives high-level guidance on when to use each form control component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
-
 ## Input Group
 
 ```typescript
@@ -43,43 +40,21 @@ Types: `line` (default), `border`, `box`, `search`.
 
 ## Combo (Multi-Select Dropdown)
 
+> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "combo" })` covers data binding, selection APIs, forms support, keyboard behavior, and known issues. Prefer it over this snippet when available.
+
 ```typescript
 import { IgxComboComponent } from 'igniteui-angular/combo';
 ```
 
 ```html
-<igx-combo
-  [data]="cities"
-  [valueKey]="'id'"
-  [displayKey]="'name'"
-  [groupKey]="'region'"
-  placeholder="Select cities"
-  [allowCustomValues]="false"
-  [(ngModel)]="selectedCityIds">
-</igx-combo>
+<igx-combo [data]="cities" [valueKey]="'id'" [displayKey]="'name'" [(ngModel)]="selectedCityIds"></igx-combo>
 ```
 
-Key inputs: `[data]`, `[valueKey]`, `[displayKey]`, `[groupKey]`, `[placeholder]`, `[allowCustomValues]`, `[filterFunction]`, `[itemsMaxHeight]`, `[type]`.
-
-Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(selectionChanging)`, `(addition)`, `(searchInputUpdate)`.
-
 ## Simple Combo (Single-Select)
 
-```typescript
-import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo';
-```
+> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "simple-combo" })`.
 
-```html
-<igx-simple-combo
-  [data]="countries"
-  [valueKey]="'code'"
-  [displayKey]="'name'"
-  placeholder="Select country"
-  [(ngModel)]="selectedCountry">
-</igx-simple-combo>
-```
-
-Same API as `igx-combo` but restricted to single selection.
+`IgxSimpleComboComponent` from `igniteui-angular/simple-combo` (its own entry point, not `/combo`). Same API as `igx-combo` but restricted to single selection.
 
 ## Select
 
@@ -123,59 +98,21 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxPickerToggleComponent, IgxPickerClearComponent } from 'igniteui-angular/core';
 ```
 
-```html
-<igx-date-range-picker [(ngModel)]="dateRange">
-  <igx-date-range-start>
-    <input igxInput igxDateTimeEditor type="text" />
-  </igx-date-range-start>
-  <igx-date-range-end>
-    <input igxInput igxDateTimeEditor type="text" />
-  </igx-date-range-end>
-</igx-date-range-picker>
-```
-
-
-`IgxDateRangePickerComponent` is imported from `igniteui-angular/date-picker`.
-
-In the two-input configuration:
-
-- place the `input` directly inside `igx-date-range-start` and `igx-date-range-end`
-- use `igx-picker-toggle igxPrefix` for the calendar action
-- use `igx-picker-clear igxSuffix` for the clear action
-
-A plain `igx-prefix` or `igx-suffix` with an `igx-icon` is decorative only and does not trigger picker actions.
-Do not wrap the inputs in an additional `igx-input-group`.
-
-**Avoid these patterns in two-input mode:**
-
-- `<igx-prefix><igx-icon>calendar_today</igx-icon></igx-prefix>`
-
-- placing the toggle on only one input unless explicitly requested
-
-Common two-input configuration with calendar toggles:
+Two-input configuration rules — place the `input` directly inside `igx-date-range-start`/`igx-date-range-end` (no extra `igx-input-group` wrapper); use `igx-picker-toggle igxPrefix` for the calendar action and `igx-picker-clear igxSuffix` for the clear action on **both** inputs. A plain `igx-prefix`/`igx-suffix` icon is decorative only and does not trigger picker actions.
 
 ```html
 <igx-date-range-picker [(ngModel)]="dateRange">
   <igx-date-range-start>
-    <igx-picker-toggle igxPrefix>
-      <igx-icon>calendar_today</igx-icon>
-    </igx-picker-toggle>
+    <igx-picker-toggle igxPrefix><igx-icon>calendar_today</igx-icon></igx-picker-toggle>
     <label igxLabel>Start Date</label>
     <input igxInput igxDateTimeEditor type="text" />
-    <igx-picker-clear igxSuffix>
-      <igx-icon>clear</igx-icon>
-    </igx-picker-clear>
+    <igx-picker-clear igxSuffix><igx-icon>clear</igx-icon></igx-picker-clear>
   </igx-date-range-start>
-
   <igx-date-range-end>
-    <igx-picker-toggle igxPrefix>
-      <igx-icon>calendar_today</igx-icon>
-    </igx-picker-toggle>
+    <igx-picker-toggle igxPrefix><igx-icon>calendar_today</igx-icon></igx-picker-toggle>
     <label igxLabel>End Date</label>
     <input igxInput igxDateTimeEditor type="text" />
-    <igx-picker-clear igxSuffix>
-      <igx-icon>clear</igx-icon>
-    </igx-picker-clear>
+    <igx-picker-clear igxSuffix><igx-icon>clear</igx-icon></igx-picker-clear>
   </igx-date-range-end>
 </igx-date-range-picker>
 ```
@@ -357,8 +294,6 @@ export class MyFormComponent {
 - **Always check `app.config.ts` first** — add `provideAnimations()` before using Combo, Select, Date Picker, or any overlay component
 - **Import from specific entry points** — avoid the root `igniteui-angular` barrel
 - Date/Time pickers implement both `ControlValueAccessor` and `Validator` — they integrate with reactive forms natively
-- For `igx-date-range-picker` with separate start and end inputs, use this structure for both inputs: `igx-picker-toggle igxPrefix`, then `input igxInput igxDateTimeEditor`, then optional `igx-picker-clear igxSuffix`.
-- Do not use a plain `igx-prefix` / `igx-suffix` icon for calendar or clear actions.
 - How to choose between Combo, Simple Combo, Select, and Auto-complete:
   - Use `igx-combo` for multi-select dropdowns with built-in filtering and grouping
   - Use `igx-simple-combo` for single-select dropdowns with built-in filtering and grouping

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

@@ -9,9 +9,6 @@
 - [Dock Manager](#dock-manager)
 - [Tile Manager](#tile-manager)
 
-## Overview
-This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
-
 ---
 
 ## Layout Manager Directives
@@ -62,26 +59,7 @@ import { IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular/directive
 </div>
 ```
 
-#### Centered Content
-
-```html
-<div igxLayout igxLayoutDir="row" igxLayoutJustify="center" igxLayoutItemAlign="center"
-     style="height: 100vh;">
-  <div igxFlex igxFlexGrow="0">Centered content</div>
-</div>
-```
-
-#### Wrapping Tiles
-
-```html
-<div igxLayout igxLayoutDir="row" igxLayoutWrap="wrap" igxLayoutJustify="flex-start">
-  @for (item of items; track item.id) {
-    <div igxFlex igxFlexBasis="200px" igxFlexGrow="0" class="tile">
-      {{ item.title }}
-    </div>
-  }
-</div>
-```
+Other patterns (centering, wrapping tile grids) follow directly from the directive inputs below — e.g. `igxLayoutJustify="center" igxLayoutItemAlign="center"` to center, `igxLayoutWrap="wrap"` + fixed `igxFlexBasis` children for tile grids.
 
 ### `igxLayout` Directive Inputs
 
@@ -252,114 +230,6 @@ export class DockManagerComponent {
 </igc-dockmanager>
 ```
 
-### Full Example (from user-provided code)
-
-```typescript
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {
-  IgcDockManagerLayout,
-  IgcDockManagerPaneType,
-  IgcSplitPaneOrientation
-} from 'igniteui-dockmanager';
-
-@Component({
-  selector: 'app-dock-manager',
-  templateUrl: './dock-manager.component.html',
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class DockManagerComponent {
-  layout: IgcDockManagerLayout = {
-    rootPane: {
-      type: IgcDockManagerPaneType.splitPane,
-      orientation: IgcSplitPaneOrientation.horizontal,
-      panes: [
-        {
-          type: IgcDockManagerPaneType.splitPane,
-          orientation: IgcSplitPaneOrientation.vertical,
-          panes: [
-            { type: IgcDockManagerPaneType.contentPane, contentId: 'content1', header: 'Content Pane 1' },
-            { type: IgcDockManagerPaneType.contentPane, contentId: 'content2', header: 'Unpinned Pane 1', isPinned: false }
-          ]
-        },
-        {
-          type: IgcDockManagerPaneType.splitPane,
-          orientation: IgcSplitPaneOrientation.vertical,
-          size: 200,
-          panes: [
-            {
-              type: IgcDockManagerPaneType.documentHost,
-              size: 200,
-              rootPane: {
-                type: IgcDockManagerPaneType.splitPane,
-                orientation: IgcSplitPaneOrientation.horizontal,
-                allowEmpty: true,
-                panes: [
-                  {
-                    type: IgcDockManagerPaneType.tabGroupPane,
-                    panes: [
-                      { type: IgcDockManagerPaneType.contentPane, header: 'Document 1', contentId: 'content3', documentOnly: true },
-                      { type: IgcDockManagerPaneType.contentPane, header: 'Document 2', contentId: 'content4', documentOnly: true }
-                    ]
-                  }
-                ]
-              }
-            },
-            { type: IgcDockManagerPaneType.contentPane, contentId: 'content5', header: 'Unpinned Pane 2', isPinned: false }
-          ]
-        },
-        {
-          type: IgcDockManagerPaneType.splitPane,
-          orientation: IgcSplitPaneOrientation.vertical,
-          panes: [
-            {
-              type: IgcDockManagerPaneType.tabGroupPane,
-              size: 200,
-              panes: [
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content6', header: 'Tab 1' },
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content7', header: 'Tab 2' },
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content8', header: 'Tab 3' },
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content9', header: 'Tab 4' },
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content10', header: 'Tab 5' }
-              ]
-            },
-            { type: IgcDockManagerPaneType.contentPane, contentId: 'content11', header: 'Content Pane 2' }
-          ]
-        }
-      ]
-    },
-    floatingPanes: [
-      {
-        type: IgcDockManagerPaneType.splitPane,
-        orientation: IgcSplitPaneOrientation.horizontal,
-        floatingHeight: 150,
-        floatingWidth: 250,
-        floatingLocation: { x: 300, y: 200 },
-        panes: [
-          { type: IgcDockManagerPaneType.contentPane, contentId: 'content12', header: 'Floating Pane' }
-        ]
-      }
-    ]
-  };
-}
-```
-
-```html
-<igc-dockmanager [layout]="layout" style="height: 600px;">
-  <div slot="content1" class="dockManagerContent">Content 1</div>
-  <div slot="content2" class="dockManagerContent">Content 2</div>
-  <div slot="content3" class="dockManagerContent">Content 3</div>
-  <div slot="content4" class="dockManagerContent">Content 4</div>
-  <div slot="content5" class="dockManagerContent">Content 5</div>
-  <div slot="content6" class="dockManagerContent">Content 6</div>
-  <div slot="content7" class="dockManagerContent">Content 7</div>
-  <div slot="content8" class="dockManagerContent">Content 8</div>
-  <div slot="content9" class="dockManagerContent">Content 9</div>
-  <div slot="content10" class="dockManagerContent">Content 10</div>
-  <div slot="content11" class="dockManagerContent">Content 11</div>
-  <div slot="content12" class="dockManagerContent">Content 12</div>
-</igc-dockmanager>
-```
-
 ### Key Rules for Dock Manager
 
 1. **Separate package** — `igniteui-dockmanager` is installed independently of `igniteui-angular`
@@ -407,86 +277,33 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 export class TileManagerComponent { }
 ```
 
-### Basic Usage
+### Usage
 
 ```html
-<igc-tile-manager>
-  <igc-tile>
-    <span slot="title">Tile 1 header</span>
-    <p>Tile 1 content</p>
-  </igc-tile>
-  <igc-tile>
-    <span slot="title">Tile 2 header</span>
-    <p>Tile 2 content</p>
-  </igc-tile>
-</igc-tile-manager>
-```
-
-### Layout Properties
-
-Key `igc-tile-manager` properties:
-
-- **`column-count`**: number of grid columns; if omitted or \<1, as many columns as fit with a minimum width (200px) are created.
-- **`gap`**: space between tiles (e.g., `"20px"`, `"1rem"`).
-- **`min-column-width`**: minimum width per column (e.g., `"200px"`).
-- **`min-row-height`**: minimum height per row (e.g., `"150px"`).
-
-```html
-<igc-tile-manager
-  column-count="2"
-  gap="20px"
-  min-column-width="220px"
-  min-row-height="160px">
-  <igc-tile>
-    <span slot="title">Tile 1 header</span>
-    <p>Tile 1 content</p>
-  </igc-tile>
-  <igc-tile>
-    <span slot="title">Tile 2 header</span>
-    <p>Tile 2 content</p>
-  </igc-tile>
-</igc-tile-manager>
-```
-
-### Tile Properties
-
-Each `igc-tile` can configure its own size and behavior:
-
-- **`row-start` / `col-start`**: starting row/column for the tile
-- **`row-span` / `col-span`**: how many rows/columns the tile spans
-- **`disable-resize`**: prevents the tile from being resized
-- **`disable-maximize`** / **`disable-fullscreen`**: hide default header actions
-
-```html
-<igc-tile-manager>
+<igc-tile-manager column-count="2" gap="20px" min-column-width="220px" min-row-height="160px"
+  resize-mode="hover" drag-mode="tile-header">
   <igc-tile col-span="2" disable-resize>
     <span slot="title">Wide tile</span>
-    <p>Content</p>
+    <p>Content spanning two columns</p>
   </igc-tile>
   <igc-tile row-span="2">
     <span slot="title">Tall tile</span>
-    <p>Content that spans two rows.</p>
+    <p>Content spanning two rows</p>
   </igc-tile>
 </igc-tile-manager>
 ```
 
-### Resizing & Dragging
+`igc-tile-manager` properties:
 
-- Resizing is controlled by the `resize-mode` property on `igc-tile-manager` (`"none"`, `"hover"`, `"always"`).
-- Reordering is enabled via the `drag-mode` property (`"tile"` or `"tile-header"`).
+- **`column-count`**: number of grid columns; if omitted or \<1, as many columns as fit with a minimum width (200px) are created
+- **`gap`** / **`min-column-width`** / **`min-row-height`**: spacing and minimum track sizes (e.g., `"20px"`)
+- **`resize-mode`**: `"none"` | `"hover"` | `"always"` — controls tile resizing
+- **`drag-mode`**: `"tile"` | `"tile-header"` — enables reordering
 
-```html
-<igc-tile-manager resize-mode="hover" drag-mode="tile-header">
-  <igc-tile>
-    <span slot="title">Tile 1</span>
-    <p>Content</p>
-  </igc-tile>
-  <igc-tile>
-    <span slot="title">Tile 2</span>
-    <p>Content</p>
-  </igc-tile>
-</igc-tile-manager>
-```
+`igc-tile` properties:
+
+- **`row-start` / `col-start`** and **`row-span` / `col-span`**: grid placement and spanning
+- **`disable-resize`**, **`disable-maximize`** / **`disable-fullscreen`**: opt out of resize / default header actions
 
 ### Key Rules for Tile Manager
 

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

@@ -12,9 +12,6 @@
 - [Splitter](#splitter)
 - [Navigation Drawer](#navigation-drawer)
 
-## Overview
-This reference gives high-level guidance on when to use each layout component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
-
 ## Tabs
 
 ```typescript
@@ -201,7 +198,7 @@ Key inputs: `[isOpen]`, `[pin]` (dock to content), `[pinThreshold]` (auto-pin at
 
 Events: `(opened)`, `(closed)`, `(pinChange)`.
 
-> **AGENT INSTRUCTION:** The Navigation Drawer uses the Ignite UI overlay/animation system — ensure `provideAnimations()` is in `app.config.ts`.
+> **Important:** The Navigation Drawer uses the Ignite UI overlay/animation system — ensure `provideAnimations()` is in `app.config.ts`.
 
 ## See Also