igniteui-cli 15.2.2 → 15.3.0

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/form-controls.md

@@ -28,8 +28,6 @@ This reference gives high-level guidance on form controls, their key features, a
 
 ## Input
 
-> **Docs:** [Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/input)
-
 ```csharp
 // Program.cs
 builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));
@@ -45,10 +43,6 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));
 }
 ```
 
-Key attributes: `Label`, `Placeholder`, `DisplayType` (`InputType.Text / Email / Password / Tel / Number`), `Required`, `Disabled`, `ReadOnly`, `MinLength`, `MaxLength`.
-
-Slots: `prefix`, `suffix`, `helper-text`.
-
 > **AGENT INSTRUCTION - Icons in slots:** Always use `IgbIcon` in `prefix`/`suffix` slots, never `<span class="material-icons">`. Font spans are `display: inline` so `vertical-align` is ignored inside the slot's flex context - the icon floats to the top. `IgbIcon` (`igc-icon`) is `display: inline-flex; align-items: center` and self-centers automatically. Register the icon in `OnAfterRenderAsync(firstRender)` after `EnsureReady()`.
 
 Events: `InputOcurred` (fires while typing), `Change` (fires on commit/blur).
@@ -59,8 +53,6 @@ Events: `InputOcurred` (fires while typing), `Change` (fires on commit/blur).
 
 ## Combo Box
 
-> **Docs:** [Combo Box](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/combo/overview)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
 ```
@@ -80,18 +72,12 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
 }
 ```
 
-Key attributes: `Data`, `ValueKey` (required for complex objects), `DisplayKey`, `T` (type parameter - must match `ValueKey` property type or `"object"` if no `ValueKey`), `Label`, `Placeholder`, `SingleSelect` (for single-selection mode), `Disabled`, `Required`.
-
-Events: `Opening`, `Opened`, `Closing`, `Closed`, `Change` (IgbComboChangeEventArgs).
-
 > **AGENT INSTRUCTION:** `IgbCombo` does **not** work inside a standard HTML `<form>`. Use `<EditForm>` with `@bind-Value` instead.
 
 ---
 
 ## Select
 
-> **Docs:** [Select](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/select)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
 ```
@@ -104,16 +90,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
 </IgbSelect>
 ```
 
-For grouped options use `IgbSelectHeader` and `IgbSelectGroup`. Key attributes on `IgbSelect`: `Label`, `Placeholder`, `Outlined`, `Disabled`, `Required`, `Name`. On `IgbSelectItem`: `Value`, `Selected`, `Disabled`.
-
-Slots on `IgbSelect`: `header`, `footer`, `helper-text`, `prefix`, `suffix`, `toggle-icon`.
-
 ---
 
 ## Date Picker
 
-> **Docs:** [Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-picker)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
 ```
@@ -127,18 +107,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
 }
 ```
 
-Key attributes: `Value` (DateTime), `Min`, `Max`, `InputFormat`, `DisplayFormat`, `Locale`, `Mode` (`PickerMode.Dropdown` / `PickerMode.Dialog`), `ShowWeekNumbers`, `WeekStart`, `Disabled`, `Required`.
-
-Slots: `calendar`, `clear`, `prefix`, `suffix`, `actions` (custom footer buttons).
-
-Methods: `StepUp(DatePart)`, `StepDown(DatePart)`, `Clear()`.
-
 ---
 
 ## Date Range Picker
 
-> **Docs:** [Date Range Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule));
 ```
@@ -151,14 +123,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule));
 }
 ```
 
-Returns a start and end `DateTime`. Key attributes: `Min`, `Max`, `InputFormat`, `Locale`, `Mode`.
-
 ---
 
 ## Calendar
 
-> **Docs:** [Calendar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule));
 ```
@@ -173,8 +141,6 @@ Use Calendar when the UI needs an always-visible date picker rather than an inpu
 
 ## Date Time Input
 
-> **Docs:** [Date Time Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/date-time-input)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
 ```
@@ -189,16 +155,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
 }
 ```
 
-Key attributes: `Value` (DateTime?), `InputFormat`, `DisplayFormat`, `Min`, `Max`, `SpinLoop`.
-
-Methods: `StepUp()`, `StepDown()`, `Clear()`.
-
 ---
 
 ## Mask Input
 
-> **Docs:** [Mask Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/mask-input)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));
 ```
@@ -209,14 +169,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));
               Placeholder="(555) 123-4567" />
 ```
 
-Key attributes: `Mask` (pattern string: `0` = digit, `L` = letter, `A` = alphanumeric), `Placeholder`, `Prompt` (fill character, default `_`), `ValueMode` (`MaskInputValueMode.Raw` or `MaskInputValueMode.WithFormatting`).
-
 ---
 
 ## Checkbox
 
-> **Docs:** [Checkbox](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/checkbox)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule));
 ```
@@ -229,16 +185,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule));
 }
 ```
 
-Key attributes: `Checked`, `Indeterminate`, `Disabled`, `Required`, `Invalid`, `LabelPosition` (`ToggleLabelPosition.After` / `Before`), `Name`, `Value`.
-
-CSS parts: `base`, `control`, `indicator`, `label`.
-
 ---
 
 ## Radio / Radio Group
 
-> **Docs:** [Radio & Radio Group](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/radio)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbRadioModule), typeof(IgbRadioGroupModule));
 ```
@@ -251,14 +201,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbRadioModule), typeof(IgbRadioGroupM
 </IgbRadioGroup>
 ```
 
-Key attributes on `IgbRadioGroup`: `Alignment` (`ContentOrientation.Horizontal` / `ContentOrientation.Vertical`), `Name`. On `IgbRadio`: `Value`, `Checked`, `Disabled`, `Invalid`, `LabelPosition`.
-
 ---
 
 ## Switch
 
-> **Docs:** [Switch](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/switch)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
 ```
@@ -271,14 +217,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
 }
 ```
 
-Key attributes: `Checked`, `Disabled`, `Required`, `LabelPosition`.
-
 ---
 
 ## Slider / Range Slider
 
-> **Docs:** [Slider & Range Slider](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/slider)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule), typeof(IgbRangeSliderModule));
 ```
@@ -300,16 +242,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule), typeof(IgbRangeSlide
 }
 ```
 
-Key attributes on `IgbSlider`: `Value`, `Min`, `Max`, `Step`, `Disabled`, `HideTooltip`. On `IgbRangeSlider`: `Lower`, `Upper`, `Min`, `Max`, `Step`.
-
-Events (both): `Input` (fires while dragging), `Change` (fires on commit).
-
 ---
 
 ## Rating
 
-> **Docs:** [Rating](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/rating)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
 ```
@@ -322,10 +258,6 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
 }
 ```
 
-Key attributes: `Value`, `Max`, `Step` (for half-star: `0.5`), `Disabled`, `ReadOnly`, `Label`, `ValueFormat`.
-
-Events: `Change`, `Hover`.
-
 ---
 
 ## Form & Binding Notes

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/layout-manager.md

@@ -7,9 +7,7 @@
 
 - [Dock Manager](#dock-manager)
   - [Basic Setup](#basic-setup)
-  - [Pane Types](#pane-types)
   - [Layout Serialization](#layout-serialization)
-  - [Events](#events)
 - [Tile Manager](#tile-manager)
 - [Key Rules](#key-rules)
 
@@ -20,40 +18,13 @@ This reference gives high-level guidance on when to use each layout manager comp
 
 ## Dock Manager
 
-> **Docs:** [Dock Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager)
-
 Dock Manager provides an IDE-like dockable pane layout. Users can drag panes to dock, float, pin/unpin, and close them at runtime.
 
 ```csharp
+// In Program.cs or Startup.cs
 builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule));
 ```
 
-Key properties on `IgbDockManager`:
-
-| Property | Type | Description |
-|---|---|---|
-| `Layout` | `IgbDockManagerLayout` | Gets/sets the layout configuration |
-| `ActivePane` | `IgbContentPane` | Gets/sets the currently active (focused) pane |
-| `MaximizedPane` | `IgbDockManagerPane` | Gets/sets the maximized pane |
-| `AllowFloatingPanesResize` | `bool` | Allows resizing floating panes (default: `true`) |
-| `AllowInnerDock` | `bool` | Allows inner-docking panes (default: `true`) |
-| `AllowMaximize` | `bool` | Allows maximizing panes (default: `true`) |
-| `AllowSplitterDock` | `bool` | Allows docking by dragging over a splitter (default: `false`) |
-| `CloseBehavior` | `PaneActionBehavior` | `AllPanes` or `SelectedPane` — which pane(s) close when clicking close in a TabGroup (default: `AllPanes`) |
-| `UnpinBehavior` | `PaneActionBehavior` | `AllPanes` or `SelectedPane` — which pane(s) unpin when clicking unpin (default: `AllPanes`) |
-| `ContainedInBoundaries` | `bool` | Keeps floating panes inside the Dock Manager bounds (default: `false`) |
-| `ProximityDock` | `bool` | Enables docking by proximity instead of indicators (default: `false`) |
-| `ShowPaneHeaders` | `DockManagerShowPaneHeaders` | `Always` or `OnHoverOnly` (default: `Always`) |
-| `ShowHeaderIconOnHover` | `DockManagerShowHeaderIconOnHover` | Which tab icons show on hover: `None`, `All`, `CloseOnly`, `MoreOptionsOnly` (default: `None`) |
-| `DisableKeyboardNavigation` | `bool` | Disables built-in keyboard shortcuts (default: `false`) |
-
-Key methods on `IgbDockManager`:
-
-| Method | Returns | Description |
-|---|---|---|
-| `FocusPane(string contentId)` | `void` | Programmatically focuses a pane by its content ID |
-| `GetCurrentLayout()` | `IgbDockManagerLayout` | Returns the current layout object reflecting runtime state |
-
 ### Basic Setup
 
 Dock Manager uses a C# layout object graph to define pane structure. Pane content is projected via named slots.
@@ -112,102 +83,16 @@ Dock Manager uses a C# layout object graph to define pane structure. Pane conten
 }
 ```
 
-### Pane Types
-
-| Class | Description |
-|---|---|
-| `IgbSplitPane` | Container that splits horizontally or vertically into child panes |
-| `IgbTabGroupPane` | Container that groups content panes into tabs |
-| `IgbContentPane` | Leaf pane with actual content (maps to a named slot) |
-| `IgbDocumentHost` | Special container for document-style tabbed panes (like an IDE editor area). Contains a `RootPane` (`IgbSplitPane`) |
-
-Key properties on `IgbContentPane`:
-
-| Property | Type | Description |
-|---|---|---|
-| `ContentId` | `string` | Must match the `slot` name on the projected content element |
-| `Header` | `string` | Pane tab header title |
-| `HeaderId` | `string` | Slot name for a custom header template element. Falls back to `Header` text if not set |
-| `Size` | `double` | Size relative to sibling panes (default: `100`) |
-| `AllowClose` | `bool` | Shows/hides the close button (default: `true`) |
-| `AllowPinning` | `bool` | Allows pin/unpin (default: `true`) |
-| `AllowMaximize` | `bool` | Allows maximize |
-| `AllowFloating` | `bool` | Allows tearing off into a floating window (default: `true`) |
-| `AllowDocking` | `bool` | Allows the user to dock the pane (default: `true`) |
-| `IsPinned` | `bool` | Set to `false` to start as an unpinned (collapsed to edge) pane |
-| `IsMaximized` | `bool` | Whether the pane is maximized (default: `false`) |
-| `Hidden` | `bool` | Hides the pane from the UI (default: `false`) |
-| `Disabled` | `bool` | Disables the pane (default: `false`) |
-| `DocumentOnly` | `bool` | Restricts the pane so it can only be docked inside a document host |
-| `UnpinnedLocation` | `UnpinnedLocation` | Edge where the unpinned flyout appears. Auto-calculated from document host if not set |
-| `UnpinnedSize` | `double` | Absolute size of the pane when unpinned (default: `200`) |
-| `Id` | `string` | Pane identifier. Auto-generated if not set |
-
-Key properties on `IgbSplitPane`:
-
-| Property | Type | Description |
-|---|---|---|
-| `Orientation` | `SplitPaneOrientation` | `Horizontal` or `Vertical` |
-| `Panes` | `IgbDockManagerPaneCollection` | Child panes |
-| `Size` | `double` | Size relative to sibling panes (default: `100`) |
-| `FloatingLocation` | `IgbDockManagerPoint` | Absolute position of a floating pane |
-| `FloatingWidth` | `double` | Absolute width of a floating pane (default: `100`) |
-| `FloatingHeight` | `double` | Absolute height of a floating pane (default: `100`) |
-| `FloatingResizable` | `bool` | Whether floating pane resizing is allowed |
-| `AllowEmpty` | `bool` | Whether the pane stays in the UI when it has no children |
-| `IsMaximized` | `bool` | Whether the split pane is maximized (default: `false`) |
-| `UseFixedSize` | `bool` | Sizes children in pixels instead of relative; allows scrollable overflow (default: `false`) |
-| `Id` | `string` | Pane identifier. Auto-generated if not set |
-
-Key properties on `IgbTabGroupPane`:
-
-| Property | Type | Description |
-|---|---|---|
-| `Panes` | `IgbContentPaneCollection` | Child content panes displayed as tabs |
-| `SelectedIndex` | `double` | Index of the initially selected tab |
-| `Size` | `double` | Size relative to sibling panes (default: `100`) |
-| `AllowEmpty` | `bool` | Whether the tab group stays in the UI when it has no children |
-| `IsMaximized` | `bool` | Whether the tab group is maximized (default: `false`) |
-| `Id` | `string` | Pane identifier. Auto-generated if not set |
-
-Key properties on `IgbDocumentHost`:
-
-| Property | Type | Description |
-|---|---|---|
-| `RootPane` | `IgbSplitPane` | The root split pane inside the document host |
-| `Size` | `double` | Size relative to sibling panes (default: `100`) |
-| `Id` | `string` | Pane identifier. Auto-generated if not set |
-
 ### Layout Serialization
 
 Persisting a Dock Manager layout is version-sensitive. The current `dock-manager` MCP overview documents the layout object graph, pane content slots, styling, and keyboard behavior; it does not show a verified Blazor serialization sample in this reference. Before generating persistence code, inspect the current installed API and use only the documented event signatures and methods for that version.
 
 > **AGENT INSTRUCTION - Layout serialization:** The serialized JSON contains only pane structure and positions. It does **not** serialize the slot content. The slot content markup must remain static in the Razor template; only pane arrangement changes at runtime.
 
-### Events
-
-**Blazor EventCallbacks** (direct Blazor binding):
-
-| Event | Type | Description |
-|---|---|---|
-| `LayoutChange` | `EventCallback<IgbLayoutChangeEventArgs>` | Fires when the layout is modified by user interaction (drag, close, resize) |
-| `LayoutChanged` | `EventCallback<IgbDockManagerLayout>` | Fires after the layout has changed; provides the updated layout object |
-
-**Web-component-level events** (accessible via JavaScript interop, not as Blazor EventCallbacks):
-
-| Event | Description |
-|---|---|
-| `paneClose` | Fires when a pane is closed; detail contains the closed pane(s) |
-| `activePaneChanged` | Fires when the active (focused) pane changes |
-| `splitterResizeStart` | Fires when a splitter drag begins |
-| `splitterResizeEnd` | Fires when a splitter drag ends |
-
 ---
 
 ## Tile Manager
 
-> **Docs:** [Tile Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager)
-
 Tile Manager provides a resizable, draggable tile/widget dashboard layout.
 
 ```csharp
@@ -231,14 +116,6 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule));
 </IgbTileManager>
 ```
 
-Key attributes on `IgbTileManager`: `ColumnCount`, `Gap` (CSS length string such as `"8px"`), `MinColumnWidth`, `MinRowHeight`, `ResizeMode` (`TileManagerResizeMode.*`), `DragMode` (`TileManagerDragMode.*`).
-
-Key attributes on `IgbTile`: `ColSpan`, `RowSpan`, `ColStart`, `RowStart`, `Maximized`, `Position`, `DisableFullscreen`, `DisableMaximize`, `DisableResize`.
-
-Slots on `IgbTile`: `title` (header), `actions` (header action buttons), `fullscreen-action`, `maximize-action`, `side-adorner`, `corner-adorner`, `bottom-adorner`. Default slot = tile body content.
-
-Methods on `IgbTileManager`: `SaveLayout()` and `LoadLayout(string)` persist tile order, size, and position. `GetTiles()` returns the current `IgbTile[]` array. Tile content is not serialized.
-
 ---
 
 ## Key Rules

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/layout.md

@@ -20,8 +20,6 @@ This reference gives high-level guidance on layout and navigation components, th
 
 ## Tabs
 
-> **Docs:** [Tabs](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tabs)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule));
 ```
@@ -51,20 +49,10 @@ For icon tabs, use the `label` slot inside `IgbTab`:
 </IgbTab>
 ```
 
-Key attributes on `IgbTabs`: `Alignment` (`TabsAlignment.Start` / `End` / `Center` / `Justify`), `Activation` (`TabsActivation.Auto` / `Manual`). On `IgbTab`: `Label`, `Disabled`, `Selected`.
-
-Events on `IgbTabs`: `Change` (`EventCallback<IgbTabComponentEventArgs>`) - fires when the selected tab changes.
-
-Methods on `IgbTabs`: `Select(string id)` — selects a tab by id; `GetSelected()` — returns the id of the currently selected tab.
-
-CSS parts: `headers`, `headers-content`, `headers-wrapper`, `header`, `selected-indicator`, `content`.
-
 ---
 
 ## Stepper
 
-> **Docs:** [Stepper](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/stepper)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule));
 ```
@@ -94,22 +82,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule));
 }
 ```
 
-Key attributes on `IgbStepper`: `Linear` (prevents skipping steps), `Orientation` (`StepperOrientation.Horizontal` / `Vertical`), `StepType` (`StepperStepType.Indicator` / `Title` / `Full`), `TitlePosition` (`StepperTitlePosition.Auto` / `Bottom` / `Top` / `End` / `Start`), `ContentTop` (renders step content above the header), `HorizontalAnimation` (`HorizontalTransitionAnimation.Slide` / `Fade` / `None`), `VerticalAnimation` (`StepperVerticalAnimation.Grow` / `Fade` / `None`), `AnimationDuration`.
-
-Key attributes on `IgbStep`: `Complete`, `Optional`, `Disabled`, `Invalid`, `Active`.
-
-Slots on `IgbStep`: `indicator` (custom icon/number), `title`, `subtitle`.
-
-Methods on `IgbStepper`: `Next()`, `Prev()`, `NavigateTo(index)`, `Reset()`.
-
-Events: `ActiveStepChanging` (cancellable), `ActiveStepChanged`.
-
 ---
 
 ## Accordion & Expansion Panel
 
-> **Docs:** [Accordion](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/accordion), [Expansion Panel](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/expansion-panel)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));
 // IgbExpansionPanel is included in IgbAccordionModule
@@ -141,20 +117,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));
 }
 ```
 
-Key attributes on `IgbAccordion`: `SingleExpand` (only one panel open at a time). On `IgbExpansionPanel`: `Open`, `Disabled`, `IndicatorPosition` (`ExpansionPanelIndicatorPosition.Start` / `End` / `None`).
-
-Slots on `IgbExpansionPanel`: `title`, `subtitle`, `indicator` (custom expand icon).
-
-Events on `IgbExpansionPanel`: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`. These same events also fire on `IgbAccordion` at the accordion level.
-
-Methods on `IgbExpansionPanel`: `Show()`, `Hide()`, `Toggle()`. Methods on `IgbAccordion`: `ShowAll()`, `HideAll()`.
-
 ---
 
 ## Navbar
 
-> **Docs:** [Navbar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navbar)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));
 ```
@@ -168,24 +134,12 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));
 </IgbNavbar>
 ```
 
-Slots: `start` (left content, e.g., menu button), `end` (right content, e.g., action icons). The default slot is used for the title.
-
-CSS parts: `base`, `start`, `middle`, `end`.
-
-Required theme CSS:
-
-```html
-<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
-```
-
 > **AGENT INSTRUCTION:** Register icons used by `IgbNavbar` and `IgbIconButton` before relying on them in samples. Call `await iconRef.EnsureReady()` before `RegisterIconAsync()` or `RegisterIconFromTextAsync()`.
 
 ---
 
 ## Navigation Drawer
 
-> **Docs:** [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navigation-drawer)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(
     typeof(IgbNavDrawerModule),
@@ -268,12 +222,6 @@ Mini variant:
 </IgbNavDrawer>
 ```
 
-Key attributes on `IgbNavDrawer`: `Open`, `Position` (`NavDrawerPosition.Start` / `End` / `Top` / `Bottom` / `Relative`). On `IgbNavDrawerItem`: `Active`, `Disabled`. Use the `mini` slot to provide collapsed icon-only content.
-
-Methods: `Show()`, `Hide()`, `Toggle()`.
-
-CSS parts: `base`, `main`, `mini`.
-
 > **AGENT INSTRUCTION - IgbNavDrawer shadow DOM mechanics:**
 >
 > Regardless of `Open` state or `style` on the host, `::part(base)` is always rendered as `position: fixed; transform: translateX(-Npx)`. When the component considers itself closed it also sets `inert` on `::part(base)`. The host element itself contributes `width: 0` to the layout because the fixed part takes no space.
@@ -289,8 +237,6 @@ CSS parts: `base`, `main`, `mini`.
 
 ## Tree
 
-> **Docs:** [Tree](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree)
-
 ```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule), typeof(IgbTreeItemModule));
 ```
@@ -307,14 +253,6 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule), typeof(IgbTreeItemModu
 </IgbTree>
 ```
 
-Key attributes on `IgbTree`: `Selection` (`TreeSelection.None` / `Multiple` / `Cascade`), `SingleBranchExpand` (only one branch expanded at a time), `ToggleNodeOnClick` (toggle expand on click). On `IgbTreeItem`: `Label`, `Value`, `Expanded`, `Selected`, `Disabled`, `Active`, `Loading`.
-
-Slots on `IgbTreeItem`: `label` (custom label content), `indicator` (expand/collapse icon override). Nest `IgbTreeItem` children directly inside a parent `IgbTreeItem`.
-
-Methods on `IgbTree`: `ExpandToItem(IgbTreeItem)`. Methods on `IgbTreeItem`: `Expand()`, `Collapse()`, `Toggle()`, `GetPath()` (returns ancestor chain).
-
-Events on `IgbTree`: `SelectionChanged` (`EventCallback<IgbTreeSelectionEventArgs>`), `ItemExpanding` (cancellable), `ItemExpanded`, `ItemCollapsing` (cancellable), `ItemCollapsed`, `ActiveItem`.
-
 ---
 
 ## Key Rules

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/SKILL.md

@@ -252,7 +252,7 @@ Base CSS and instructions on what the MCP tools return and what the reference fi
 7. **Use `igc-*` selectors in CSS**, not Razor component names such as `IgbButton`
 8. **Use `::part()` only after confirming part names with Blazor docs**, and prefer design tokens when a token exists
 9. **Surface color must match the variant**; use a light surface for `light` and a dark surface for `dark`
-10. **Only one built-in theme CSS file should be active at a time** to avoid conflicting variables and component styles
+10. **Only one built-in theme CSS file should be active at a time**; link only one theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`) to avoid conflicts
 
 ## Related Skills
 

package/templates/react/igr-ts/projects/_base/files/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "@igniteui/material-icons-extended": "^3.0.2",
     "element-internals-polyfill": "^3.0.2",
     "functions-have-names": "^1.2.3",
     "igniteui-react": "~19.7.0",

package/templates/react/igr-ts/projects/_base/files/src/app/app.tsx

@@ -3,6 +3,8 @@ import { Outlet } from "react-router-dom";
 export default function App() {
 
   return (
-    <Outlet />
-  )
+    <div className="outer-wrapper">
+      <Outlet />
+    </div>
+  );
 }

package/templates/react/igr-ts/projects/_base/files/src/setupTests.ts

@@ -4,6 +4,18 @@ import ResizeObserver from 'resize-observer-polyfill';
 export function setupTestMocks() {
   globalThis.ResizeObserver = ResizeObserver;
 
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation(query => ({
+      matches: true,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+
   HTMLElement.prototype.scrollIntoView = vi.fn();
   HTMLElement.prototype.hidePopover = vi.fn();
   HTMLElement.prototype.showPopover = vi.fn();

package/templates/react/igr-ts/projects/_base/files/styles.css

@@ -14,6 +14,12 @@ html, body, #root {
   height: 100%;
 }
 
+.outer-wrapper {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
 /* minor CSS reset */
 body, h1, h2, h3, h4, h5, h6, p {
   margin: 0;

package/templates/react/igr-ts/projects/_base_with_home/files/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>IgniteUI for React</title>
+    <title>Ignite UI for React</title>
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
     <link rel="stylesheet" href="./styles.css">
   </head>
   <body>

package/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/home.tsx

@@ -1,24 +1,74 @@
 import logo from "/logo.svg";
+import { github } from "@igniteui/material-icons-extended";
+import { IgrIcon, registerIconFromText } from "igniteui-react";
 import styles from "./style.module.css";
 
-export default function App() {
-  const name = '$(name)';
+registerIconFromText(github.name, github.value, "imx-icons");
 
+export default function App() {
   return (
-    <div className="app">
-      <div className={styles.app__name}>{name}</div>
-      <header className={styles.header}>
-        <img src={logo} className={styles.logo} alt="logo" />
-        <p>Welcome to Ignite UI for React!</p>
+    <main className={styles.content}>
+      <h1 className={styles.header}>Welcome to Ignite UI for React!</h1>
+      <h4 className={styles.subject}>
+        A complete library of 50+ UI components for building modern web applications with reusable React components.
+      </h4>
+      <img src={logo} className={styles.logo} alt="Ignite UI for React" />
+
+      <p className={styles.subtitle}>Discover more at</p>
+      <p>
         <a
           className={styles.link}
           target="_blank"
           href="https://www.infragistics.com/products/ignite-ui-react"
           rel="noopener noreferrer"
         >
-          Learn More
+          www.infragistics.com/products/ignite-ui-react
+        </a>
+      </p>
+      <p>
+        <a
+          className={styles.link}
+          target="_blank"
+          href="https://www.infragistics.com/products/indigo-design"
+          rel="noopener noreferrer"
+        >
+          www.infragistics.com/products/indigo-design
         </a>
-      </header>
-    </div>
+      </p>
+
+      <p className={styles.subtitle}>We are also on GitHub</p>
+      <p className={styles.githubLinks}>
+        <span className={styles.githubItem}>
+          <IgrIcon
+            className={styles.githubIcon}
+            name="github"
+            collection="imx-icons"
+          />
+          <a
+            className={styles.githubLink}
+            target="_blank"
+            href="https://github.com/IgniteUI/igniteui-react"
+            rel="noopener noreferrer"
+          >
+            Ignite UI for React
+          </a>
+        </span>
+        <span className={styles.githubItem}>
+          <IgrIcon
+            className={styles.githubIcon}
+            name="github"
+            collection="imx-icons"
+          />
+          <a
+            className={styles.githubLink}
+            target="_blank"
+            href="https://github.com/IgniteUI/igniteui-cli"
+            rel="noopener noreferrer"
+          >
+            Ignite UI CLI
+          </a>
+        </span>
+      </p>
+    </main>
   );
 }