igniteui-angular 21.1.0-rc.4 → 21.1.0

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

@@ -0,0 +1,347 @@
+# Data Display & Other UI Components
+
+> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
+> For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
+
+## List
+
+> **Docs:** [List Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list)
+
+```typescript
+import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+```
+
+```html
+<igx-list>
+  <igx-list-item [isHeader]="true">Contacts</igx-list-item>
+  @for (contact of contacts; track contact.id) {
+    <igx-list-item>
+      <igx-avatar igxListThumbnail [src]="contact.avatar" shape="circle"></igx-avatar>
+      <span igxListLine>{{ contact.name }}</span>
+      <span igxListLineSubTitle>{{ contact.phone }}</span>
+      <span igxListLineTitle>{{ contact.email }}</span>
+      <igx-icon igxListAction (click)="call(contact)">phone</igx-icon>
+    </igx-list-item>
+  }
+</igx-list>
+```
+
+Auxiliary directives for list items: `igxListThumbnail`, `igxListAction`, `igxListLine`, `igxListLineTitle`, `igxListLineSubTitle`.
+
+## Tree
+
+> **Docs:** [Tree Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree)
+
+```typescript
+import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree';
+```
+
+```html
+<igx-tree [selection]="'BiCascade'" (nodeSelection)="onNodeSelect($event)">
+  @for (node of treeData; track node.id) {
+    <igx-tree-node [data]="node" [expanded]="node.expanded">
+      <igx-icon>folder</igx-icon>
+      {{ node.label }}
+      @for (child of node.children; track child.id) {
+        <igx-tree-node [data]="child">
+          <igx-icon>description</igx-icon>
+          {{ child.label }}
+        </igx-tree-node>
+      }
+    </igx-tree-node>
+  }
+</igx-tree>
+```
+
+Selection modes: `'None'`, `'BiCascade'`, `'Cascade'`.
+
+## Card
+
+> **Docs:** [Card Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card)
+
+```typescript
+import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardHeaderThumbnailDirective } from 'igniteui-angular/card';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+```
+
+```html
+<igx-card>
+  <igx-card-media height="200px">
+    <img [src]="article.coverImage" />
+  </igx-card-media>
+  <igx-card-header>
+    <igx-avatar igxCardHeaderThumbnail [src]="author.photo" shape="circle"></igx-avatar>
+    <h3 igxCardHeaderTitle>{{ article.title }}</h3>
+    <h5 igxCardHeaderSubtitle>{{ author.name }}</h5>
+  </igx-card-header>
+  <igx-card-content>
+    <p>{{ article.excerpt }}</p>
+  </igx-card-content>
+  <igx-card-actions>
+    <button igxButton="flat" igxRipple>Read More</button>
+    <button igxIconButton="flat" igxRipple>
+      <igx-icon>favorite</igx-icon>
+    </button>
+  </igx-card-actions>
+</igx-card>
+```
+
+## Chips
+
+> **Docs:** [Chip Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chip)
+
+```typescript
+import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips';
+```
+
+```html
+<igx-chips-area (reorder)="onChipsReorder($event)">
+  @for (tag of tags; track tag) {
+    <igx-chip [removable]="true" [selectable]="true" (remove)="removeTag(tag)">
+      {{ tag }}
+    </igx-chip>
+  }
+</igx-chips-area>
+```
+
+## Avatar & Badge
+
+> **Docs:** [Avatar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/avatar) · [Badge](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge)
+
+```typescript
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+```
+
+```html
+<!-- Image avatar with badge overlay -->
+<igx-avatar [src]="user.photo" shape="circle" size="large">
+  <igx-badge igxAvatarBadge [type]="'success'" [icon]="'check'"></igx-badge>
+</igx-avatar>
+
+<!-- Initials avatar -->
+<igx-avatar initials="JD" shape="circle"></igx-avatar>
+
+<!-- Icon avatar -->
+<igx-avatar icon="person"></igx-avatar>
+
+<!-- Standalone badge -->
+<igx-badge [type]="'error'" [value]="unreadCount"></igx-badge>
+```
+
+Avatar shapes: `'circle'`, `'rounded'`, `'square'`. Sizes: `'small'`, `'medium'`, `'large'`, or custom CSS.
+Badge types: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`.
+
+## Icon
+
+> **Docs:** [Icon Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon)
+
+```typescript
+import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
+```
+
+```html
+<!-- Material icon (default ligature-based) -->
+<igx-icon>settings</igx-icon>
+<igx-icon color="#e41c77">favorite</igx-icon>
+
+<!-- SVG icon from a registered custom family -->
+<igx-icon [family]="'my-icons'" [name]="'logo'"></igx-icon>
+```
+
+Register custom SVG icons in a service or component constructor:
+
+```typescript
+export class AppComponent {
+  constructor() {
+    const iconService = inject(IgxIconService);
+    // From inline SVG string
+    iconService.addSvgIconFromText('logo', '<svg xmlns="..." viewBox="...">...</svg>', 'my-icons');
+    // From URL
+    iconService.addSvgIcon('arrow', '/assets/icons/arrow.svg', 'my-icons');
+  }
+}
+```
+
+## Carousel
+
+> **Docs:** [Carousel Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel)
+
+```typescript
+import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel';
+```
+
+```html
+<igx-carousel [interval]="3000" [pause]="true" [loop]="true" [navigation]="true">
+  @for (slide of slides; track slide.id) {
+    <igx-slide>
+      <img [src]="slide.image" [alt]="slide.alt" />
+      <div class="slide-caption">{{ slide.caption }}</div>
+    </igx-slide>
+  }
+</igx-carousel>
+```
+
+> **AGENT INSTRUCTION:** Carousel uses Angular animations — ensure `provideAnimations()` is present in `app.config.ts`.
+
+## Paginator
+
+> **Docs:** [Paginator Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/paginator)
+
+```typescript
+import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
+```
+
+```html
+<igx-paginator
+  [totalRecords]="totalItems()"
+  [perPage]="pageSize()"
+  [selectOptions]="[5, 10, 25, 50]"
+  (perPageChange)="onPageSizeChange($event)"
+  (pageChange)="onPageChange($event)">
+</igx-paginator>
+```
+
+> **NOTE:** For grid paging, attach `<igx-paginator>` inside the grid element. See [`../../igniteui-angular-grids/references/paging-remote.md`](../../igniteui-angular-grids/references/paging-remote.md) for grid-specific paging patterns.
+
+## Progress Indicators
+
+> **Docs:** [Linear Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear-progress) · [Circular Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/circular-progress)
+
+```typescript
+import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar';
+import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
+```
+
+```html
+<!-- Linear progress bar -->
+<igx-linear-bar
+  [value]="uploadProgress()"
+  [max]="100"
+  [type]="'info'"
+  [striped]="true"
+  [animate]="true"
+  [textVisibility]="true">
+</igx-linear-bar>
+
+<!-- Circular progress (determinate) -->
+<igx-circular-bar [value]="65" [max]="100" [animate]="true"></igx-circular-bar>
+
+<!-- Circular progress (indeterminate) -->
+<igx-circular-bar [indeterminate]="true"></igx-circular-bar>
+```
+
+Types for linear bar: `'default'`, `'info'`, `'success'`, `'warning'`, `'danger'`.
+
+## Chat (AI Chat Component)
+
+> **Docs:** [Chat Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chat)
+
+```typescript
+import { IgxChatComponent } from 'igniteui-angular/chat';
+```
+
+```html
+ <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, 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
+
+- [`setup.md`](./setup.md) — App providers, architecture, all entry points
+- [`form-controls.md`](./form-controls.md) — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider
+- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer
+- [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner
+- [`directives.md`](./directives.md) — Button, Ripple, Tooltip, Drag and Drop
+- [`../../igniteui-angular-grids/references/paging-remote.md`](../../igniteui-angular-grids/references/paging-remote.md) — Grid-specific paginator usage

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

@@ -0,0 +1,149 @@
+# Directives
+
+> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
+> For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
+
+## Button & Icon Button
+
+> **Docs:** [Button Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button)
+
+```typescript
+import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+```
+
+```html
+<!-- Text buttons -->
+<button igxButton="flat">Flat</button>
+<button igxButton="raised">Raised</button>
+<button igxButton="outlined">Outlined</button>
+<button igxButton="fab">
+  <igx-icon>add</igx-icon>
+</button>
+
+<!-- Icon-only buttons -->
+<button igxIconButton="flat"><igx-icon>edit</igx-icon></button>
+<button igxIconButton="outlined"><igx-icon>delete</igx-icon></button>
+<button igxIconButton="contained"><igx-icon>save</igx-icon></button>
+
+<!-- Disabled state -->
+<button igxButton="raised" [disabled]="isLoading()">Submit</button>
+```
+
+Button variants for `igxButton`: `'flat'`, `'raised'`, `'outlined'`, `'fab'`.
+Button variants for `igxIconButton`: `'flat'`, `'outlined'`, `'contained'`.
+
+## Ripple Effect
+
+> **Docs:** [Ripple Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ripple)
+
+```typescript
+import { IgxRippleDirective } from 'igniteui-angular/directives';
+```
+
+```html
+<!-- Add to any clickable element for Material-style ink ripple -->
+<button igxButton="raised" igxRipple>Click me</button>
+<div igxRipple igxRippleTarget=".my-class" class="custom-surface">Interactive div</div>
+```
+
+Inputs: `[igxRipple]` (ripple color), `[igxRippleCentered]` (always start from center), `[igxRippleDisabled]`.
+
+```html
+<button igxButton="raised" igxRipple="#ff4081" [igxRippleCentered]="true">Pink ripple</button>
+```
+
+## Tooltip
+
+> **Docs:** [Tooltip Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip)
+
+```typescript
+import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives';
+```
+
+```html
+<button igxButton [igxTooltipTarget]="myTooltip" [igxTooltipTargetShowDelay]="500">
+  Hover or focus me
+</button>
+<div igxTooltip #myTooltip="tooltip">Helpful tooltip text</div>
+```
+
+Inputs on `[igxTooltipTarget]`: `[igxTooltipTargetShowDelay]` (ms), `[igxTooltipTargetHideDelay]` (ms), `[tooltipDisabled]`.
+
+Programmatic control:
+
+```typescript
+tooltip = viewChild.required<IgxTooltipDirective>('myTooltip');
+
+showTooltip() { this.tooltip().open(); }
+hideTooltip() { this.tooltip().close(); }
+```
+
+## Drag and Drop
+
+> **Docs:** [Drag and Drop](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drag-drop)
+
+```typescript
+import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEventArgs } from 'igniteui-angular/directives';
+```
+
+### Basic drag and drop
+
+```html
+<!-- Draggable source -->
+<div igxDrag [dragData]="item" (dragMove)="onDragMove($event)" (dragEnd)="onDragEnd($event)">
+  <igx-icon>drag_indicator</igx-icon>
+  {{ item.name }}
+</div>
+
+<!-- Drop target -->
+<div igxDrop (dropped)="onDrop($event)" (dragEnter)="onDragEnter($event)" (dragLeave)="onDragLeave($event)">
+  Drop here
+</div>
+```
+
+```typescript
+onDrop(event: IDropDroppedEventArgs) {
+  const draggedItem = event.drag.data;
+  // Move draggedItem to this drop zone
+  event.cancel = false; // allow the drop
+}
+```
+
+### Ghost element (custom drag preview)
+
+```html
+<div igxDrag [ghostTemplate]="ghostTmpl">Drag me</div>
+
+<ng-template #ghostTmpl>
+  <div class="custom-ghost">
+    <igx-icon>content_copy</igx-icon> Moving...
+  </div>
+</ng-template>
+```
+
+### Reorderable list
+
+```html
+<igx-list>
+  @for (item of items; track item.id) {
+    <igx-list-item igxDrag [dragData]="item" igxDrop (dropped)="reorder($event, item)">
+      <igx-icon igxListAction>drag_handle</igx-icon>
+      <span igxListLine>{{ item.name }}</span>
+    </igx-list-item>
+  }
+</igx-list>
+```
+
+Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(transitioned)`.
+Key drop events: `(dragEnter)`, `(dragLeave)`, `(dragOver)`, `(dropped)`.
+
+> **NOTE:** For touch-based drag, add `importProvidersFrom(HammerModule)` to `app.config.ts` providers.
+
+## See Also
+
+- [`setup.md`](./setup.md) — App providers, architecture, all entry points
+- [`form-controls.md`](./form-controls.md) — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider
+- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer
+- [`data-display.md`](./data-display.md) — List, Tree, Card and other display components
+- [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner

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

@@ -0,0 +1,141 @@
+# Feedback & Overlay Components
+
+> **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.
+
+## 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/directives';
+```
+
+```html
+<igx-dialog
+  #confirmDialog
+  [isModal]="true"
+  [closeOnEscape]="true"
+  [closeOnOutsideSelect]="false"
+  title="Confirm Delete"
+  (closed)="onDialogClosed()">
+  <igx-dialog-title>Confirm Delete</igx-dialog-title>
+  <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+  <div igxDialogActions>
+    <button igxButton="flat" (click)="confirmDialog.close()">Cancel</button>
+    <button igxButton="raised" (click)="deleteItem(); confirmDialog.close()">Delete</button>
+  </div>
+</igx-dialog>
+
+<button igxButton="raised" (click)="confirmDialog.open()">Delete Item</button>
+```
+
+Programmatic control:
+
+```typescript
+dialog = viewChild.required<IgxDialogComponent>('confirmDialog');
+
+open() { this.dialog().open(); }
+close() { this.dialog().close(); }
+```
+
+Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(leftButtonSelect)`, `(rightButtonSelect)`.
+
+## Snackbar
+
+> **Docs:** [Snackbar Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar)
+
+```typescript
+import { IgxSnackbarComponent, IgxSnackbarActionDirective } from 'igniteui-angular/snackbar';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+```
+
+```html
+<igx-snackbar
+  #snackbar
+  [displayTime]="3000"
+  [autoHide]="true"
+  (animationDone)="onSnackbarDone()">
+  Item saved successfully
+  <button igxButton="flat" igxSnackbarAction (click)="undo()">UNDO</button>
+</igx-snackbar>
+```
+
+Trigger in TypeScript:
+
+```typescript
+snackbar = viewChild.required<IgxSnackbarComponent>('snackbar');
+
+save() {
+  this.dataService.save(this.item);
+  this.snackbar().open('Item saved');  // optional: pass message text
+}
+```
+
+## Toast
+
+> **Docs:** [Toast Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)
+
+```typescript
+import { IgxToastComponent } from 'igniteui-angular/toast';
+```
+
+```html
+<igx-toast #toast [displayTime]="2000">Operation complete</igx-toast>
+
+<button igxButton (click)="toast.open()">Trigger Toast</button>
+```
+
+Toast vs Snackbar: Toast is non-interactive (no action button), always auto-hides. Snackbar supports an action button and can be persistent.
+
+## Banner
+
+> **Docs:** [Banner Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner)
+
+```typescript
+import { IgxBannerComponent, IgxBannerActionsDirective } from 'igniteui-angular/banner';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+```
+
+```html
+<igx-banner #banner (closed)="onBannerClosed()">
+  <igx-icon igxBannerIcon>wifi_off</igx-icon>
+  You are offline. Some features may not be available.
+  <div igxBannerActions>
+    <button igxButton="flat" (click)="banner.dismiss()">Dismiss</button>
+    <button igxButton="flat" (click)="retry()">Retry</button>
+  </div>
+</igx-banner>
+```
+
+Trigger in TypeScript:
+
+```typescript
+banner = viewChild.required<IgxBannerComponent>('banner');
+
+showOfflineWarning() { this.banner().open(); }
+hideWarning() { this.banner().close(); }
+```
+
+Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`.
+
+Banner always renders inline (not overlaid) — it pushes page content down when open.
+
+## Key Rules
+
+- **`provideAnimations()` is required** — add it to `app.config.ts` before using Dialog, Snackbar, Toast, or Banner
+- **Dialog** uses the Ignite UI overlay system — set `[isModal]="true"` for blocking modals
+- **Snackbar** vs **Toast**: Snackbar supports action buttons and can be persistent; Toast is always auto-hiding and non-interactive
+- **Banner** renders **inline** (pushes content), not as an overlay — use Dialog for blocking prompts
+
+## See Also
+
+- [`setup.md`](./setup.md) — App providers, architecture, all entry points
+- [`form-controls.md`](./form-controls.md) — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider
+- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer
+- [`data-display.md`](./data-display.md) — List, Tree, Card and other display components
+- [`directives.md`](./directives.md) — Button, Ripple, Tooltip, Drag and Drop