igniteui-cli 15.1.0 → 15.2.0

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

@@ -0,0 +1,302 @@
+# Charts & Data Visualization
+
+> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.**
+> For project setup and module registration, see [`setup.md`](./setup.md).
+
+## Contents
+
+- [Overview](#overview)
+- [Chart Type Decision Guide](#chart-type-decision-guide)
+- [Category Chart](#category-chart)
+- [Data Chart](#data-chart)
+- [Financial / Stock Chart](#financial--stock-chart)
+- [Pie Chart](#pie-chart)
+- [Donut Chart](#donut-chart)
+- [Sparkline](#sparkline)
+- [Treemap](#treemap)
+- [Geographic Map](#geographic-map)
+- [Gauges](#gauges)
+- [Dashboard Tile](#dashboard-tile)
+- [Common Chart Features](#common-chart-features)
+- [Key Rules](#key-rules)
+
+---
+## Overview
+
+Ignite UI for Blazor provides 65+ chart types for data visualization. Charts are part of the IgniteUI.Blazor package (trial watermarked version available in the IgniteUI.Blazor.Trial public NuGet package).
+This reference gives high-level guidance on when to use some of the chart types, 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 Type Decision Guide
+
+| Use case | Recommended component |
+|---|---|
+| Simple line/area/column/point/spline/waterfall charts with minimal config | `IgbCategoryChart` |
+| Multiple series types on the same chart, custom axes, annotations | `IgbDataChart` |
+| Candlestick / OHLC financial data with range selector | `IgbFinancialChart` / stock chart docs |
+| Part-to-whole proportions (slices) | `IgbPieChart` |
+| Donut with center label | `IgbDoughnutChart` |
+| Inline sparkline for tables or cards | `IgbSparkline` |
+| Hierarchical part-to-whole data | Treemap docs |
+| Geographic points, shapes, map markers | Geographic Map docs |
+| KPI values, ranges, scales, bullet comparisons | Gauge docs |
+| Auto-generated dashboard visualization from data | Dashboard Tile docs |
+
+---
+
+## Category Chart
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbCategoryChartModule));
+```
+
+```razor
+<IgbCategoryChart DataSource="SalesData"
+                  ChartType="CategoryChartType.Line"
+                  Height="400px"
+                  Width="100%"
+                  YAxisTitle="Revenue (USD)"
+                  XAxisTitle="Month"
+                  Brushes="DodgerBlue IndianRed"
+                  IsHorizontalZoomEnabled="true"
+                  IsVerticalZoomEnabled="false"
+                  IsTransitionInEnabled="true" />
+
+@code {
+    public List<SalesRecord> SalesData { get; set; } = SampleData.GetSales();
+}
+```
+
+Key attributes: `DataSource`, `ChartType` (`CategoryChartType.Line` / `Area` / `Column` / `Point` / `Spline` / `SplineArea` / `StepLine` / `StepArea` / `Waterfall` / `Auto`), `Height`, `Width`, `YAxisTitle`, `XAxisTitle`, `Brushes`, `Outlines`, `MarkerBrushes`, `IsTransitionInEnabled`, `IsHorizontalZoomEnabled`, `IsVerticalZoomEnabled`.
+
+> **AGENT INSTRUCTION:** `CategoryChartType.Bar` does **not** exist. For a horizontal bar-style chart, use `CategoryChartType.Column` (vertical) or switch to `IgbDataChart` with `IgbBarSeries` for true horizontal bars. Never generate `ChartType="CategoryChartType.Bar"`.
+
+> **AGENT INSTRUCTION:** The `XAxisLabel` parameter on `IgbCategoryChart` is not a plain string property name. To control which data field is used as the X-axis label, set `XAxisMemberPath` with the property name string (e.g., `XAxisMemberPath="Month"`).
+
+Brush list properties such as `Brushes`, `Outlines`, `MarkerBrushes`, and `MarkerOutlines` are **string** parameters. Separate multiple colors with spaces, as in `Brushes="DodgerBlue IndianRed"`.
+
+> **AGENT INSTRUCTION:** `IgbCategoryChart` auto-detects numeric properties in `DataSource` objects and creates series for them. To control which properties are charted, use `IncludedProperties` or `ExcludedProperties` attributes. These are **array** parameters - bind them with `@(new string[] { ... })` syntax:
+> ```razor
+> <IgbCategoryChart DataSource="SalesData"
+>                   ExcludedProperties='@(new string[] { "Id", "InternalCode" })' />
+> ```
+> Do NOT pass a plain string like `ExcludedProperties="Id"` - this causes a type mismatch error.
+
+---
+
+## Data Chart
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbDataChartCoreModule), typeof(IgbDataChartCategoryModule));
+// Add additional modules for other series types:
+// IgbDataChartScatterModule, IgbDataChartFinancialModule, etc.
+```
+
+```razor
+<IgbDataChart Height="500px" Width="100%" IsHorizontalZoomEnabled="true">
+    <IgbCategoryXAxis Name="xAxis" DataSource="ChartData" Label="Month" />
+    <IgbNumericYAxis Name="yAxis" />
+    <IgbLineSeries DataSource="ChartData"
+                   XAxisName="xAxis"
+                   YAxisName="yAxis"
+                   ValueMemberPath="Revenue"
+                   Title="Revenue" />
+    <IgbColumnSeries DataSource="ChartData"
+                     XAxisName="xAxis"
+                     YAxisName="yAxis"
+                     ValueMemberPath="Expenses"
+                     Title="Expenses" />
+    <IgbChartLegend Name="legend" />
+</IgbDataChart>
+
+@code {
+    public List<MonthData> ChartData { get; set; } = SampleData.GetMonthly();
+}
+```
+
+Common axis types: `IgbCategoryXAxis`, `IgbNumericXAxis`, `IgbNumericYAxis`, `IgbCategoryYAxis`, `IgbTimeXAxis`, `IgbOrdinalTimeXAxis`.
+
+Common series types: `IgbLineSeries`, `IgbAreaSeries`, `IgbColumnSeries`, `IgbBarSeries`, `IgbSplineSeries`, `IgbBubbleSeries`, `IgbScatterSeries`.
+
+Every series must reference its axes by matching `Name` and `XAxisName` / `YAxisName`.
+
+> **AGENT INSTRUCTION:** `IgbDataChart` requires separate NuGet module registrations for each category of series. Always check `get_doc` to find the exact module names, for example category, scatter, polar, radial, stacked, or financial modules.
+
+---
+
+## Financial / Stock Chart
+
+> **Docs:** [Financial Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/stock-chart)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbFinancialChartModule));
+```
+
+```razor
+<IgbFinancialChart DataSource="StockData"
+                   Width="100%"
+                   Height="500px"
+                   ChartType="FinancialChartType.Candle"
+                   ZoomSliderType="FinancialChartZoomSliderType.Line" />
+
+@code {
+    public List<StockPrice> StockData { get; set; } = SampleData.GetStockPrices();
+}
+```
+
+The data source must contain `Open`, `High`, `Low`, `Close`, and `Volume` numeric fields plus a `Date`/`Time` field. Key attributes: `ChartType` (`FinancialChartType.Candle` / `Bar` / `Line`), `ZoomSliderType`, `IsTooltipVisible`, `VolumeType`.
+
+---
+
+## Pie Chart
+
+> **Docs:** [Pie Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/pie-chart)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbPieChartModule));
+```
+
+```razor
+<IgbPieChart DataSource="SliceData"
+             LabelMemberPath="Department"
+             ValueMemberPath="Budget"
+             Width="500px"
+             Height="400px"
+             LegendLabelMemberPath="Department"
+             SliceClick="OnSliceClick" />
+
+@code {
+    public List<BudgetSlice> SliceData { get; set; } = SampleData.GetBudget();
+
+    void OnSliceClick(IgbSliceClickEventArgs e) { /* handle click */ }
+}
+```
+
+Key attributes: `DataSource`, `LabelMemberPath`, `ValueMemberPath`, `RadiusFactor` (0-1), `StartAngle`, `OthersCategoryThreshold`, `OthersCategoryType`, `LegendLabelMemberPath`, `LegendItemTemplate`.
+
+Events: `SliceClick`.
+
+---
+
+## Donut Chart
+
+> **Docs:** [Doughnut Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/donut-chart)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbDoughnutChartModule), typeof(IgbRingSeriesModule));
+```
+
+```razor
+<IgbDoughnutChart Width="400px" Height="400px">
+    <IgbRingSeries DataSource="DonutData"
+                   LabelMemberPath="Category"
+                   ValueMemberPath="Share" />
+</IgbDoughnutChart>
+```
+
+Supports multiple `IgbRingSeries` for concentric rings.
+
+---
+
+## Sparkline
+
+> **Docs:** [Sparkline](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/sparkline-chart)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbSparklineModule));
+```
+
+```razor
+<IgbSparkline DataSource="TrendData"
+              ValueMemberPath="Value"
+              DisplayType="SparklineDisplayType.Line"
+              Width="120px"
+              Height="40px"
+              Brushes="DodgerBlue"
+              LineThickness="2" />
+```
+
+Key attributes: `DataSource`, `ValueMemberPath`, `DisplayType` (`SparklineDisplayType.Line` / `Area` / `Column` / `WinLoss`), `Width`, `Height`, `Brushes`, `LineThickness`, `MarkerVisibility`, `FirstMarkerVisibility`, `LastMarkerVisibility`, `HighMarkerVisibility`, `LowMarkerVisibility`.
+
+---
+
+## Treemap
+
+> **Docs:** [Treemap](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/treemap-chart)
+
+Use Treemap for hierarchical, weighted, part-to-whole data. Always call `get_doc("treemap-chart")` before writing markup because hierarchy binding, member paths, and layout options are component-specific.
+
+---
+
+## Geographic Map
+
+> **Docs:** [Geographic Map](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/geo-map-type-scatter-area-series)
+
+Use Geographic Map for map backgrounds, shape files, geographic points, bubbles, and marker layers. Do not adapt Data Chart axis or series examples to maps unless the Blazor Geographic Map docs explicitly show the same API.
+
+---
+
+## Gauges
+
+> **Docs:** [Radial Gauge](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/radial-gauge), [Linear Gauge](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/linear-gauge), [Bullet Graph](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/bullet-graph)
+
+Use gauges for KPI values, ranges, thresholds, progress-style numeric summaries, and bullet comparisons. Select the exact gauge doc first, then use the MCP-documented property names for ranges, labels, scale, and value binding.
+
+---
+
+## Dashboard Tile
+
+> **Docs:** [Dashboard Tile](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/dashboard-tile)
+
+Use Dashboard Tile when the requested component should infer or render compact dashboard visualizations from bound data. Verify supported chart modes and binding shape with MCP before producing code.
+
+---
+
+## Common Chart Features
+
+### Legends
+
+```razor
+<IgbLegend @ref="Legend" Orientation="LandmarkOrientation.Horizontal" />
+<IgbCategoryChart DataSource="Data" Legend="Legend" />
+```
+
+### Tooltips
+
+```razor
+<IgbCategoryChart IsDefaultTooltipEnabled="true" />
+<!-- Or custom tooltip via ToolTipTemplate slot -->
+```
+
+### Animations
+
+```razor
+<IgbCategoryChart IsTransitionInEnabled="true" TransitionInDuration="1000" />
+```
+
+### Highlighting
+
+```razor
+<IgbCategoryChart IsSeriesHighlightingEnabled="true"
+                  HighlightingBehavior="SeriesHighlightingBehavior.BrightenSpecificItemsAndDarkenOthers" />
+```
+
+### Zooming and Panning
+
+```razor
+<IgbCategoryChart IsHorizontalZoomEnabled="true"
+                  IsVerticalZoomEnabled="false"
+                  CrosshairsDisplayMode="CrosshairsDisplayMode.Both" />
+```
+
+---
+
+## Key Rules
+
+1. **`IgbCategoryChart` is the fastest path for standard charts.** It auto-generates series from data. Use `IgbDataChart` only when you need multiple series types, custom axes, or advanced features.
+2. **`IgbDataChart` requires one module per series category.** Check `get_doc` for the exact module name.
+3. **Financial chart data must have `Open`, `High`, `Low`, `Close` fields.** If the data model is different, the chart will not render correctly.
+4. **Always set explicit `Width` and `Height` on charts.** Charts do not auto-size to their container without a height.
+5. **`IgbDataChart` series must match axes by name.** The `XAxisName` / `YAxisName` on each series must match the `Name` attribute of the axis component.
+6. **`IncludedProperties` and `ExcludedProperties` are `string[]` arrays.** Bind with `@(new string[] { "Prop1", "Prop2" })`. Do not pass a plain string.
+7. **`CategoryChartType.Bar` does not exist.** Use `Column` for vertical bars in `IgbCategoryChart`. For horizontal bars, use `IgbDataChart` with `IgbBarSeries`.
+8. **Use `XAxisMemberPath` to set the X-axis label field**, not `XAxisLabel`. Passing a property name string to `XAxisLabel` is evaluated as a C# expression and silently fails.

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

@@ -0,0 +1,350 @@
+# Data Display Components
+
+> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.**
+> For project setup and module registration - see [`setup.md`](./setup.md).
+
+## Contents
+
+- [Button & Button Group](#button--button-group)
+- [Icon & Icon Button](#icon--icon-button)
+- [Card](#card)
+- [Carousel](#carousel)
+- [List](#list)
+- [Avatar](#avatar)
+- [Badge](#badge)
+- [Chip](#chip)
+- [Circular Progress](#circular-progress)
+- [Linear Progress](#linear-progress)
+- [Dropdown](#dropdown)
+- [Tooltip](#tooltip)
+- [Ripple](#ripple)
+- [Key Rules](#key-rules)
+
+---
+
+## Overview
+This reference gives high-level guidance on data display and action components, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details.
+
+## Button & Button Group
+
+> **Docs:** [Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/button), [Button Group](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/button-group)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule), typeof(IgbButtonGroupModule));
+```
+
+```razor
+<!-- Button variants -->
+<IgbButton Variant="@ButtonVariant.Contained" @onclick="Save">Save</IgbButton>
+<IgbButton Variant="@ButtonVariant.Outlined" @onclick="Cancel">Cancel</IgbButton>
+<IgbButton Variant="@ButtonVariant.Flat">Flat</IgbButton>
+
+<!-- Button Group (toggle buttons) -->
+<IgbButtonGroup Selection="ButtonGroupSelection.Single">
+    <IgbToggleButton Value="left">Left</IgbToggleButton>
+    <IgbToggleButton Value="center" Selected="true">Center</IgbToggleButton>
+    <IgbToggleButton Value="right">Right</IgbToggleButton>
+</IgbButtonGroup>
+```
+
+Key attributes on `IgbButton`: `Variant` (`ButtonVariant.Contained` / `Outlined` / `Flat` / `Fab`), `Disabled`, `DisplayType` (`ButtonBaseType.Button` / `Submit` / `Reset`), `Href` (renders as `<a>`).
+
+Key attributes on `IgbButtonGroup`: `Selection` (`ButtonGroupSelection.Single` / `SingleRequired` / `Multiple`), `Alignment` (`ContentOrientation.Horizontal` / `ContentOrientation.Vertical`).
+
+---
+
+## Icon & Icon Button
+
+> **Docs:** [Icon](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/icon), [Icon Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/icon-button)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule), typeof(IgbIconButtonModule));
+```
+
+```razor
+<IgbIcon @ref="MyIcon" IconName="home" Collection="material" />
+<IgbIconButton @ref="MenuBtn" IconName="menu" Collection="material" Variant="@IconButtonVariant.Flat" />
+
+@code {
+    IgbIcon MyIcon { get; set; }
+    IgbIconButton MenuBtn { get; set; }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && MyIcon != null)
+        {
+            await MyIcon.EnsureReady();
+            string svg = "<svg>...</svg>";
+            await MyIcon.RegisterIconFromTextAsync("home", svg, "material");
+        }
+    }
+}
+```
+
+Key attributes: `IconName`, `Collection`, `Mirrored` (for RTL). Size is controlled via CSS `--ig-size: var(--ig-size-small | --ig-size-medium | --ig-size-large)`.
+
+> **AGENT INSTRUCTION - Icon Registration:** Icons are registered by name+collection. Registration must happen in `OnAfterRenderAsync(bool firstRender)` after calling `EnsureReady()`. Re-use the same collection name across the app for consistency.
+
+---
+
+## Card
+
+> **Docs:** [Card](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/card)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule));
+```
+
+```razor
+<IgbCard style="width: 350px;">
+    <IgbCardMedia>
+        <img src="photo.jpg" alt="Card image" />
+    </IgbCardMedia>
+    <IgbCardHeader>
+        <h3 slot="title">Jane Doe</h3>
+        <span slot="subtitle">Photographer</span>
+    </IgbCardHeader>
+    <IgbCardContent>
+        <p>A short description of Jane Doe.</p>
+    </IgbCardContent>
+    <IgbCardActions>
+        <IgbButton slot="start" Variant="@ButtonVariant.Flat">Like</IgbButton>
+        <IgbButton slot="start" Variant="@ButtonVariant.Flat">Share</IgbButton>
+    </IgbCardActions>
+</IgbCard>
+```
+
+Sub-components: `IgbCardMedia`, `IgbCardHeader`, `IgbCardContent`, `IgbCardActions`. Slots on `IgbCardHeader`: `thumbnail`, `title`, `subtitle`.
+
+---
+
+## Carousel
+
+> **Docs:** [Carousel](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/carousel)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule));
+```
+
+```razor
+<IgbCarousel>
+    <IgbCarouselSlide Active="true">
+        <img src="slide-1.jpg" alt="Slide 1" />
+    </IgbCarouselSlide>
+    <IgbCarouselSlide>
+        <img src="slide-2.jpg" alt="Slide 2" />
+    </IgbCarouselSlide>
+</IgbCarousel>
+```
+
+Use Carousel for image/content slides, banners, onboarding panels, or media galleries. Check the `carousel` MCP doc for current slide APIs, navigation controls, indicators, autoplay, animation, and CSS parts.
+
+---
+
+## List
+
+> **Docs:** [List](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/list)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbListModule), typeof(IgbListItemModule), typeof(IgbListHeaderModule));
+```
+
+```razor
+<IgbList>
+    <IgbListHeader>Contacts</IgbListHeader>
+    @foreach (var contact in Contacts)
+    {
+        <IgbListItem>
+            <IgbAvatar slot="start" Shape="@AvatarShape.Circle">@contact.Initials</IgbAvatar>
+            <span slot="title">@contact.Name</span>
+            <span slot="subtitle">@contact.Phone</span>
+            <IgbIconButton slot="end" IconName="delete" Collection="material" />
+        </IgbListItem>
+    }
+</IgbList>
+```
+
+Slots on `IgbListItem`: `start`, `end`, `title`, `subtitle`.
+
+---
+
+## Avatar
+
+> **Docs:** [Avatar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/avatar)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));
+```
+
+```razor
+<!-- Image avatar -->
+<IgbAvatar Src="avatar.png" Alt="User photo" Shape="@AvatarShape.Circle" />
+
+<!-- Initials avatar -->
+<IgbAvatar Shape="@AvatarShape.Circle">AB</IgbAvatar>
+
+<!-- Icon avatar -->
+<IgbAvatar Shape="@AvatarShape.Square">
+    <IgbIcon IconName="person" Collection="material" />
+</IgbAvatar>
+```
+
+Key attributes: `Src`, `Alt`, `Initials`, `Shape` (`AvatarShape.Circle` / `Square` / `Rounded`). Size is controlled via CSS `--ig-size: var(--ig-size-small | --ig-size-medium | --ig-size-large)`.
+
+---
+
+## Badge
+
+> **Docs:** [Badge](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/badge)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule));
+```
+
+```razor
+<IgbBadge Variant="@BadgeVariant.Primary">5</IgbBadge>
+<IgbBadge Variant="@BadgeVariant.Danger" Shape="@BadgeShape.Dot" />
+```
+
+Key attributes: `Variant` (`BadgeVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`), `Shape` (`BadgeShape.Rounded` / `Square` / `Dot`), `Outlined`.
+
+---
+
+## Chip
+
+> **Docs:** [Chip](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/chip)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
+```
+
+```razor
+<IgbChip Selectable="true" Removable="true" Remove="OnChipRemoved">
+    <IgbIcon slot="start" IconName="star" Collection="material" />
+    Blazor
+</IgbChip>
+
+@code {
+    void OnChipRemoved(IgbComponentBoolValueChangedEventArgs e) { /* handle removal */ }
+}
+```
+
+Key attributes: `Selectable`, `Selected`, `Removable`, `Disabled`, `Variant` (`ChipVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`).
+
+Slots: `start`, `end` (prefix/suffix icons).
+
+Events: `Select`, `Remove`.
+
+---
+
+## Circular Progress
+
+> **Docs:** [Circular Progress](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/circular-progress)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
+```
+
+```razor
+<!-- Determinate -->
+<IgbCircularProgress Value="65" Max="100">
+    <span slot="default">65%</span>
+</IgbCircularProgress>
+
+<!-- Indeterminate (spinner) -->
+<IgbCircularProgress Indeterminate="true" />
+```
+
+Key attributes: `Value`, `Max`, `Indeterminate`, `AnimationDuration`, `Variant` (`ProgressBaseVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`).
+
+---
+
+## Linear Progress
+
+> **Docs:** [Linear Progress](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/linear-progress)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));
+```
+
+```razor
+<IgbLinearProgress Value="42" Max="100" Striped="true" />
+<IgbLinearProgress Indeterminate="true" />
+```
+
+Key attributes: `Value`, `Max`, `Indeterminate`, `Striped`, `Variant`, `LabelAlign` (`LinearProgressLabelAlign.TopStart` / `Top` / `TopEnd` / `BottomStart` / `Bottom` / `BottomEnd`).
+
+---
+
+## Dropdown
+
+> **Docs:** [Dropdown](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/dropdown)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule));
+```
+
+```razor
+<div>
+    <IgbDropdown>
+        <IgbButton slot="target">Options</IgbButton>
+        <IgbDropdownHeader>Actions</IgbDropdownHeader>
+        <IgbDropdownItem Value="edit">Edit</IgbDropdownItem>
+        <IgbDropdownItem Value="delete">Delete</IgbDropdownItem>
+        <IgbDropdownItem Value="disabled" Disabled="true">Archive</IgbDropdownItem>
+    </IgbDropdown>
+</div>
+
+```
+
+Key attributes on `IgbDropdown`: `Placement` (`PopoverPlacement.*`), `Flip`, `Distance`, `SameWidth`, `KeepOpenOnOutsideClick`, `KeepOpenOnSelect`. Key attributes on `IgbDropdownItem`: `Value`, `Selected`, `Disabled`. Events on `IgbDropdown`: `Opening`, `Opened`, `Closing`, `Closed`, `Change`.
+
+---
+
+## Tooltip
+
+> **Docs:** [Tooltip](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule));
+```
+
+```razor
+<IgbButton id="hover-button">Hover me</IgbButton>
+<IgbTooltip Anchor="hover-button" Placement="@PopoverPlacement.Top">
+    This is a tooltip
+</IgbTooltip>
+```
+
+Key attributes: `Anchor` (target element ID string), `Placement` (`PopoverPlacement.Top` / `Bottom` / `Left` / `Right` and start/end variants), `ShowDelay`, `HideDelay`, `ShowTriggers`, `HideTriggers`, `Sticky`, `WithArrow`, `Open`.
+
+---
+
+## Ripple
+
+> **Docs:** [Ripple](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/ripple)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule));
+```
+
+Attach to any element with the `igcRipple` attribute or nest `IgbRipple` inside a container:
+
+```razor
+<div style="position: relative; padding: 16px; cursor: pointer;">
+    Click me
+    <IgbRipple />
+</div>
+```
+
+CSS part: `base`. Customize color via `--color` CSS custom property.
+
+---
+
+## Key Rules
+
+1. **Register each module explicitly.** `IgbButtonModule` and `IgbIconButtonModule` are separate modules.
+2. **Icons must be registered before they display.** Use `EnsureReady()` + `RegisterIconFromTextAsync()` in `OnAfterRenderAsync(bool firstRender)`.
+3. **`IgbCard` does not set a default width.** Always set a width via inline style or CSS class.
+4. **Prefer the Dropdown `target` slot for the trigger.** For an external trigger, follow the current `dropdown` MCP doc and call `Show()`, `Hide()`, or `Toggle()` on the dropdown reference.
+5. **`IgbTooltip.Anchor` uses the target element ID string in the documented Blazor pattern.** Give the target an `id` and pass that same value to `Anchor`.