@eagami/ui 0.7.4 → 0.9.0

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="docs/images/eagami-header.png" alt="eagami design system — elegant web design." width="800" />
+  <img src="docs/images/eagami-header.png" alt="eagami design system — elegant web design" width="800" />
 </p>
 
 A lightweight, accessible Angular component library built on CSS custom properties. Ready to use out of the box — install, import, and start building.
@@ -81,113 +81,137 @@ No modules to register, no providers to configure. Every component works the sam
 
 ## Components
 
-### Button
+<details>
+<summary><strong>Accordion</strong> — expandable content sections</summary>
 
-Variants: `primary` | `secondary` | `ghost` | `danger`. Sizes: `sm` | `md` | `lg`. Supports `loading`, `disabled`, and `fullWidth` states.
+Supports single or `multi` expand mode. Built-in chevron animation and disabled state.
 
 ```html
-<ea-button variant="primary" size="md" [loading]="isSaving" (clicked)="save()">
-  Save changes
-</ea-button>
+<ea-accordion>
+  <ea-accordion-item label="Section 1">Content for section 1</ea-accordion-item>
+  <ea-accordion-item label="Section 2">Content for section 2</ea-accordion-item>
+</ea-accordion>
 ```
 
-<img src="docs/images/button.png" alt="Button component" width="560" />
+<img src="docs/images/accordion.png" alt="Accordion component" width="560" />
 
----
+</details>
 
-### Input
+<details>
+<summary><strong>Alert</strong> — semantic alert banners with optional dismiss</summary>
 
-Full `ControlValueAccessor` support. Types: `text` | `email` | `password` | `number` | `search` | `tel` | `url`. Built-in password visibility toggle.
+Variants: `default` | `success` | `warning` | `error` | `info`. Two-way `visible` binding.
 
 ```html
-<ea-input
-  label="Email"
-  type="email"
-  placeholder="you@example.com"
-  hint="We'll never share your email"
-  [(value)]="email" />
+<ea-alert variant="success">Changes saved successfully.</ea-alert>
+<ea-alert variant="error" [dismissible]="true">Something went wrong.</ea-alert>
 ```
 
-<img src="docs/images/input.png" alt="Input component" width="560" />
+<img src="docs/images/alert.png" alt="Alert component" width="560" />
 
----
+</details>
 
-### Textarea
+<details>
+<summary><strong>Autocomplete</strong> — text input with filtered suggestion dropdown</summary>
 
-Mirrors the Input API with `ControlValueAccessor`. Configurable `rows`, `resize` (`none` | `vertical` | `horizontal` | `both`), and `maxlength`.
+Arrow key navigation, case-insensitive substring matching, configurable `minLength` and `maxResults`. Full `ControlValueAccessor` support.
 
 ```html
-<ea-textarea
-  label="Message"
-  placeholder="Enter your message…"
-  hint="Maximum 500 characters"
-  [rows]="4"
-  [(value)]="message" />
+<ea-autocomplete
+  label="Country"
+  placeholder="Start typing…"
+  [options]="countries"
+  [(value)]="selectedCountry"
+  (optionSelected)="onSelect($event)" />
 ```
 
-<img src="docs/images/textarea.png" alt="Textarea component" width="560" />
+<img src="docs/images/autocomplete.png" alt="Autocomplete component" width="560" />
 
----
+</details>
 
-### Checkbox
+<details>
+<summary><strong>Avatar</strong> — image with initials or icon fallback</summary>
 
-`ControlValueAccessor` with `indeterminate` state support. Sizes: `sm` | `md` | `lg`.
+Sizes: `xs` | `sm` | `md` | `lg` | `xl`. Shapes: `circle` | `square`.
 
 ```html
-<ea-checkbox label="Accept terms and conditions" [(checked)]="accepted" />
+<ea-avatar src="/photo.jpg" alt="User" size="lg" />
+<ea-avatar initials="MW" shape="square" />
+<ea-avatar />  <!-- shows fallback user icon -->
 ```
 
-<img src="docs/images/checkbox.png" alt="Checkbox component" width="560" />
+<img src="docs/images/avatar.png" alt="Avatar component" width="560" />
 
----
+</details>
 
-### Switch
+<details>
+<summary><strong>Avatar Editor</strong> — canvas-based image editor with pan, zoom, and crop</summary>
 
-Toggle switch with `ControlValueAccessor`. Sizes: `sm` | `md` | `lg`.
+Drag-and-drop upload, zoom via slider or scroll wheel. Outputs a `Blob` and data URL.
 
 ```html
-<ea-switch label="Enable notifications" [(checked)]="notificationsOn" />
+<ea-avatar-editor
+  shape="circle"
+  [canvasSize]="200"
+  (cropped)="onCropped($event)" />
 ```
 
-<img src="docs/images/switch.png" alt="Switch component" width="560" />
+<img src="docs/images/avatar-editor.png" alt="Avatar editor component" width="560" />
 
----
+</details>
 
-### Radio Group
+<details>
+<summary><strong>Badge</strong> — semantic status indicators</summary>
 
-Composite pattern with `ControlValueAccessor`. Supports `vertical` and `horizontal` orientation.
+Variants: `default` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`.
 
 ```html
-<ea-radio-group [(value)]="plan">
-  <ea-radio value="free" label="Free" />
-  <ea-radio value="pro" label="Pro" />
-  <ea-radio value="enterprise" label="Enterprise" />
-</ea-radio-group>
+<ea-badge variant="success">Active</ea-badge>
+<ea-badge variant="error">Failed</ea-badge>
 ```
 
-<img src="docs/images/radio.png" alt="Radio group component" width="560" />
+<img src="docs/images/badge.png" alt="Badge component" width="560" />
 
----
+</details>
 
-### Dropdown
+<details>
+<summary><strong>Breadcrumbs</strong> — navigation trail with chevron or slash separators</summary>
 
-Select dropdown with `ControlValueAccessor` and keyboard navigation (Arrow keys, Enter/Space, Escape).
+Separators: `chevron` | `slash`. Items can be links (`href`), buttons (no `href`), or disabled. The last item is automatically rendered as the current page.
 
 ```html
-<ea-dropdown
-  label="Country"
-  placeholder="Select a country…"
-  [options]="countries"
-  [(value)]="selectedCountry" />
+<ea-breadcrumbs
+  [items]="[
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'MacBook Pro' }
+  ]"
+  (itemClicked)="navigate($event)" />
 ```
 
-<img src="docs/images/dropdown.png" alt="Dropdown component" width="560" />
+<img src="docs/images/breadcrumbs.png" alt="Breadcrumbs component" width="560" />
 
----
+</details>
 
-### Card
+<details>
+<summary><strong>Button</strong> — primary, secondary, ghost, danger variants with loading state</summary>
 
-Content container with variants: `elevated` | `outlined` | `filled`. Padding: `none` | `sm` | `md` | `lg` | `xl`. Customizable shadow via `--ea-card-shadow`.
+Sizes: `sm` | `md` | `lg`. Supports `loading`, `disabled`, and `fullWidth` states.
+
+```html
+<ea-button variant="primary" size="md" [loading]="isSaving" (clicked)="save()">
+  Save changes
+</ea-button>
+```
+
+<img src="docs/images/button.png" alt="Button component" width="560" />
+
+</details>
+
+<details>
+<summary><strong>Card</strong> — content container with elevated, outlined, and filled variants</summary>
+
+Padding: `none` | `sm` | `md` | `lg` | `xl`. Customizable shadow via `--ea-card-shadow`.
 
 ```html
 <ea-card variant="elevated">
@@ -202,65 +226,79 @@ Content container with variants: `elevated` | `outlined` | `filled`. Padding: `n
 
 <img src="docs/images/card.png" alt="Card component" width="560" />
 
----
+</details>
 
-### Avatar
+<details>
+<summary><strong>Checkbox</strong> — with indeterminate state and ControlValueAccessor</summary>
 
-Image with initials or icon fallback. Sizes: `xs` | `sm` | `md` | `lg` | `xl`. Shapes: `circle` | `square`.
+Sizes: `sm` | `md` | `lg`.
 
 ```html
-<ea-avatar src="/photo.jpg" alt="User" size="lg" />
-<ea-avatar initials="MW" shape="square" />
-<ea-avatar />  <!-- shows fallback user icon -->
+<ea-checkbox label="Accept terms and conditions" [(checked)]="accepted" />
 ```
 
-<img src="docs/images/avatar.png" alt="Avatar component" width="560" />
+<img src="docs/images/checkbox.png" alt="Checkbox component" width="560" />
 
----
+</details>
 
-### Avatar Editor
+<details>
+<summary><strong>Code Input</strong> — verification code entry with auto-advance and paste support</summary>
 
-Canvas-based image editor with drag-and-drop upload, pan, zoom (slider + scroll wheel), and crop export. Outputs a `Blob` and data URL for use with the Avatar component.
+Configurable `length` (default 6). Full `ControlValueAccessor` support.
 
 ```html
-<ea-avatar-editor
-  shape="circle"
-  [canvasSize]="200"
-  (cropped)="onCropped($event)" />
+<ea-code-input [(value)]="code" [length]="6" (completed)="verify()" />
 ```
 
-<img src="docs/images/avatar-editor.png" alt="Avatar editor component" width="560" />
+<img src="docs/images/code-input.png" alt="Code input component" width="560" />
 
----
+</details>
 
-### Badge
+<details>
+<summary><strong>Data Table</strong> — sortable columns, sticky headers, density modes</summary>
 
-Semantic status indicators. Variants: `default` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`.
+Striped, bordered, and hoverable rows. Custom cell templates via `ng-template`. Density: `compact` | `comfortable` | `spacious`. Two-way `sort` binding.
 
 ```html
-<ea-badge variant="success">Active</ea-badge>
-<ea-badge variant="error">Failed</ea-badge>
+<ea-data-table
+  [columns]="columns"
+  [data]="users"
+  [stickyHeader]="true"
+  [striped]="true"
+  [(sort)]="sortState"
+  trackBy="id" />
 ```
 
-<img src="docs/images/badge.png" alt="Badge component" width="560" />
+<img src="docs/images/data-table.png" alt="Data table component" width="560" />
 
----
+</details>
 
-### Spinner
+<details>
+<summary><strong>Dialog</strong> — native dialog element with focus trapping</summary>
 
-SVG loading indicator with `role="status"` for accessibility. Sizes: `sm` | `md` | `lg`.
+Sizes: `sm` | `md` | `lg` | `full`. Two-way `open` binding.
 
 ```html
-<ea-spinner size="md" label="Loading data" />
+<ea-button (clicked)="dialogOpen.set(true)">Open</ea-button>
+
+<ea-dialog [(open)]="dialogOpen" size="md">
+  <span slot="header">Confirm</span>
+  <p>Are you sure?</p>
+  <span slot="footer">
+    <ea-button variant="secondary" (clicked)="dialogOpen.set(false)">Cancel</ea-button>
+    <ea-button (clicked)="confirm()">Confirm</ea-button>
+  </span>
+</ea-dialog>
 ```
 
-<img src="docs/images/spinner.png" alt="Spinner component" width="560" />
+<img src="docs/images/dialog.png" alt="Dialog component" width="560" />
 
----
+</details>
 
-### Divider
+<details>
+<summary><strong>Divider</strong> — visual separator with optional label</summary>
 
-Visual separator with optional label. Orientation: `horizontal` | `vertical`.
+Orientation: `horizontal` | `vertical`.
 
 ```html
 <ea-divider />
@@ -270,110 +308,154 @@ Visual separator with optional label. Orientation: `horizontal` | `vertical`.
 
 <img src="docs/images/divider.png" alt="Divider component" width="560" />
 
----
+</details>
 
-### Dialog
+<details>
+<summary><strong>Drawer</strong> — side panel using native dialog with focus trapping</summary>
 
-Built on the native `<dialog>` element for built-in focus trapping. Sizes: `sm` | `md` | `lg` | `full`. Two-way `open` binding.
+Positions: `left` | `right` | `top` | `bottom`. Sizes: `sm` | `md` | `lg` | `full`. Two-way `open` binding.
 
 ```html
-<ea-button (clicked)="dialogOpen.set(true)">Open</ea-button>
+<ea-button (clicked)="drawerOpen.set(true)">Open</ea-button>
 
-<ea-dialog [(open)]="dialogOpen" size="md">
-  <span slot="header">Confirm</span>
-  <p>Are you sure?</p>
+<ea-drawer [(open)]="drawerOpen" position="right" size="md">
+  <span slot="header">Details</span>
+  <p>Drawer body content…</p>
   <span slot="footer">
-    <ea-button variant="secondary" (clicked)="dialogOpen.set(false)">Cancel</ea-button>
-    <ea-button (clicked)="confirm()">Confirm</ea-button>
+    <ea-button variant="secondary" (clicked)="drawerOpen.set(false)">Cancel</ea-button>
+    <ea-button (clicked)="save()">Save</ea-button>
   </span>
-</ea-dialog>
+</ea-drawer>
 ```
 
----
+<img src="docs/images/drawer.png" alt="Drawer component" width="560" />
 
-### Tooltip
+</details>
 
-Directive that shows a positioned tooltip on hover and focus. Positions: `top` | `bottom` | `left` | `right`.
+<details>
+<summary><strong>Dropdown</strong> — select with ControlValueAccessor and keyboard navigation</summary>
+
+Arrow keys, Enter/Space to select, Escape to close. Sizes: `sm` | `md` | `lg`.
 
 ```html
-<ea-button eaTooltip="Save your changes" tooltipPosition="top">Save</ea-button>
+<ea-dropdown
+  label="Country"
+  placeholder="Select a country…"
+  [options]="countries"
+  [(value)]="selectedCountry" />
 ```
 
----
+<img src="docs/images/dropdown.png" alt="Dropdown component" width="560" />
 
-### Toast
+</details>
 
-Notification system via injectable `ToastService`. Variants: `default` | `success` | `warning` | `error` | `info`. Auto-dismiss with configurable duration. Full-width on mobile, independent widths on desktop.
+<details>
+<summary><strong>Eagami Wordmark</strong> — branded logo wordmark linking to eagami.com</summary>
 
-```typescript
-import { ToastService } from '@eagami/ui';
+Variants: `logo` (icon only) | `signature` (handcrafted by eagami) | `brand` (eagami with tagline). Three discrete sizes (`sm`, `md`, `lg`) scale both the logo and the text proportionally.
 
-export class MyComponent {
-  private toast = inject(ToastService);
+```html
+<ea-eagami-wordmark variant="brand" size="md" />
+```
 
-  save() {
-    this.toast.success('Changes saved');
-  }
+<img src="docs/images/eagami-wordmark.png" alt="Eagami Wordmark component" width="560" />
 
-  handleError() {
-    this.toast.error('Something went wrong');
-  }
-}
+</details>
+
+<details>
+<summary><strong>Input</strong> — text field with ControlValueAccessor and password toggle</summary>
+
+Types: `text` | `email` | `password` | `number` | `search` | `tel` | `url`. Sizes: `sm` | `md` | `lg`.
+
+```html
+<ea-input
+  label="Email"
+  type="email"
+  placeholder="you@example.com"
+  hint="We'll never share your email"
+  [(value)]="email" />
 ```
 
-Add the toast outlet once in your root template:
+<img src="docs/images/input.png" alt="Input component" width="560" />
+
+</details>
+
+<details>
+<summary><strong>Menu</strong> — popup action menu with trigger slot and menu items</summary>
+
+Placements: `bottom-start` | `bottom-end` | `top-start` | `top-end`. Menu items support icons, disabled state, and a `danger` variant. Closes on outside click or Escape.
 
 ```html
-<ea-toast />
+<ea-menu placement="bottom-end">
+  <ea-button slot="trigger" variant="secondary">Actions</ea-button>
+  <ea-menu-item (itemClicked)="edit()">
+    <ea-icon-pencil slot="icon" />
+    Edit
+  </ea-menu-item>
+  <ea-menu-item variant="danger" (itemClicked)="delete()">
+    <ea-icon-trash slot="icon" />
+    Delete
+  </ea-menu-item>
+</ea-menu>
 ```
 
-<img src="docs/images/toast.png" alt="Toast component" width="560" />
+<img src="docs/images/menu.png" alt="Menu component" width="560" />
 
----
+</details>
 
-### Code Input
+<details>
+<summary><strong>Paginator</strong> — page navigation with configurable page sizes</summary>
 
-Verification code input with auto-advance, paste support, and arrow key navigation. Configurable `length` (default 6). Full `ControlValueAccessor` support.
+Placement: `left` | `center` | `right`. Emits `pageChange` events with current page, page size, and total.
 
 ```html
-<ea-code-input [(value)]="code" [length]="6" (completed)="verify()" />
+<ea-paginator
+  [total]="100"
+  [pageSize]="10"
+  placement="center"
+  (pageChange)="onPageChange($event)" />
 ```
 
-<img src="docs/images/code-input.png" alt="Code input component" width="560" />
+<img src="docs/images/paginator.png" alt="Paginator component" width="560" />
 
----
+</details>
 
-### Tabs
+<details>
+<summary><strong>Progress Bar</strong> — determinate and indeterminate linear indicator</summary>
 
-Tab navigation with keyboard support (Arrow keys, Home/End). Variants: `underline` | `filled`. Sizes: `sm` | `md` | `lg`.
+Variants: `default` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`. Optional `label` and `showValue` display.
 
 ```html
-<ea-tabs activeTab="account" variant="underline">
-  <ea-tab value="account" label="Account">Account content</ea-tab>
-  <ea-tab value="security" label="Security">Security content</ea-tab>
-</ea-tabs>
+<ea-progress-bar [value]="72" label="Uploading" [showValue]="true" />
+<ea-progress-bar variant="success" [value]="100" />
+<ea-progress-bar [indeterminate]="true" label="Processing…" />
 ```
 
-<img src="docs/images/tabs.png" alt="Tabs component" width="560" />
+<img src="docs/images/progress-bar.png" alt="Progress bar component" width="560" />
 
----
+</details>
 
-### Alert
+<details>
+<summary><strong>Radio Group</strong> — composite pattern with ControlValueAccessor</summary>
 
-Semantic alert banners. Variants: `default` | `success` | `warning` | `error` | `info`. Optional `dismissible` close button with two-way `visible` binding.
+Supports `vertical` and `horizontal` orientation. Sizes: `sm` | `md` | `lg`.
 
 ```html
-<ea-alert variant="success">Changes saved successfully.</ea-alert>
-<ea-alert variant="error" [dismissible]="true">Something went wrong.</ea-alert>
+<ea-radio-group [(value)]="plan">
+  <ea-radio value="free" label="Free" />
+  <ea-radio value="pro" label="Pro" />
+  <ea-radio value="enterprise" label="Enterprise" />
+</ea-radio-group>
 ```
 
-<img src="docs/images/alert.png" alt="Alert component" width="560" />
+<img src="docs/images/radio.png" alt="Radio group component" width="560" />
 
----
+</details>
 
-### Skeleton
+<details>
+<summary><strong>Skeleton</strong> — loading placeholder with animated pulse</summary>
 
-Loading placeholder with animated pulse. Variants: `text` | `circle` | `rect`. Custom `width` and `height`. Respects `prefers-reduced-motion`.
+Variants: `text` | `circle` | `rect`. Custom `width` and `height`. Respects `prefers-reduced-motion`.
 
 ```html
 <ea-skeleton variant="text" width="200px" />
@@ -383,38 +465,54 @@ Loading placeholder with animated pulse. Variants: `text` | `circle` | `rect`. C
 
 <img src="docs/images/skeleton.png" alt="Skeleton component" width="560" />
 
----
+</details>
 
-### Accordion
+<details>
+<summary><strong>Spinner</strong> — SVG loading indicator with accessible role</summary>
 
-Expandable content sections. Supports single or `multi` expand mode. Built-in chevron animation and disabled state.
+Sizes: `sm` | `md` | `lg`.
 
 ```html
-<ea-accordion>
-  <ea-accordion-item label="Section 1">Content for section 1</ea-accordion-item>
-  <ea-accordion-item label="Section 2">Content for section 2</ea-accordion-item>
-</ea-accordion>
+<ea-spinner size="md" label="Loading data" />
 ```
 
-<img src="docs/images/accordion.png" alt="Accordion component" width="560" />
+<img src="docs/images/spinner.png" alt="Spinner component" width="560" />
+
+</details>
 
-### Progress Bar
+<details>
+<summary><strong>Switch</strong> — toggle with ControlValueAccessor</summary>
 
-Linear progress indicator with determinate and indeterminate modes. Variants: `default` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`. Optional `label` and `showValue` display.
+Sizes: `sm` | `md` | `lg`.
 
 ```html
-<ea-progress-bar [value]="72" label="Uploading" [showValue]="true" />
-<ea-progress-bar variant="success" [value]="100" />
-<ea-progress-bar [indeterminate]="true" label="Processing…" />
+<ea-switch label="Enable notifications" [(checked)]="notificationsOn" />
 ```
 
-<img src="docs/images/progress-bar.png" alt="Progress bar component" width="560" />
+<img src="docs/images/switch.png" alt="Switch component" width="560" />
 
----
+</details>
 
-### Tag
+<details>
+<summary><strong>Tabs</strong> — tab navigation with keyboard support</summary>
 
-Inline label with optional remove button. Variants: `default` | `primary` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`.
+Variants: `underline` | `filled`. Sizes: `sm` | `md` | `lg`.
+
+```html
+<ea-tabs activeTab="account" variant="underline">
+  <ea-tab value="account" label="Account">Account content</ea-tab>
+  <ea-tab value="security" label="Security">Security content</ea-tab>
+</ea-tabs>
+```
+
+<img src="docs/images/tabs.png" alt="Tabs component" width="560" />
+
+</details>
+
+<details>
+<summary><strong>Tag</strong> — inline label with optional remove button</summary>
+
+Variants: `default` | `primary` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`.
 
 ```html
 <ea-tag variant="primary">TypeScript</ea-tag>
@@ -423,30 +521,131 @@ Inline label with optional remove button. Variants: `default` | `primary` | `suc
 
 <img src="docs/images/tag.png" alt="Tag component" width="560" />
 
----
+</details>
+
+<details>
+<summary><strong>Textarea</strong> — multiline text with ControlValueAccessor</summary>
+
+Mirrors the Input API. Configurable `rows`, `resize` (`none` | `vertical` | `horizontal` | `both`), and `maxlength`.
+
+```html
+<ea-textarea
+  label="Message"
+  placeholder="Enter your message…"
+  hint="Maximum 500 characters"
+  [rows]="4"
+  [(value)]="message" />
+```
+
+<img src="docs/images/textarea.png" alt="Textarea component" width="560" />
+
+</details>
+
+<details>
+<summary><strong>Toast</strong> — notification system via injectable ToastService</summary>
+
+Variants: `default` | `success` | `warning` | `error` | `info`. Auto-dismiss with configurable duration. Full-width on mobile, independent widths on desktop.
+
+```typescript
+import { ToastService } from '@eagami/ui';
+
+export class MyComponent {
+  private toast = inject(ToastService);
+
+  save() {
+    this.toast.success('Changes saved');
+  }
+
+  handleError() {
+    this.toast.error('Something went wrong');
+  }
+}
+```
+
+Add the toast outlet once in your root template:
+
+```html
+<ea-toast />
+```
+
+<img src="docs/images/toast.png" alt="Toast component" width="560" />
+
+</details>
+
+<details>
+<summary><strong>Tooltip</strong> — positioned tooltip on hover and focus</summary>
+
+Positions: `top` | `bottom` | `left` | `right`.
+
+```html
+<ea-button eaTooltip="Save your changes" tooltipPosition="top">Save</ea-button>
+```
+
+<img src="docs/images/tooltip.png" alt="Tooltip component" width="560" />
+
+</details>
 
 ## Icons
 
-Built-in SVG icon components following the Feather icon style (24x24 viewBox, stroke-based, inherits `currentColor`):
+<details>
+<summary><strong>52 built-in SVG icon components</strong> — Feather-style (24x24, stroke-based, inherits <code>currentColor</code>)</summary>
 
 | Tag | Preview |
 |---|---|
 | `<ea-icon-alert-circle />` | <img src="docs/images/icons/alert-circle.png" width="48" height="48" alt="alert-circle" /> |
+| `<ea-icon-alert-triangle />` | <img src="docs/images/icons/alert-triangle.png" width="48" height="48" alt="alert-triangle" /> |
+| `<ea-icon-apple />` | <img src="docs/images/icons/apple.png" width="48" height="48" alt="apple" /> |
+| `<ea-icon-arrow-down />` | <img src="docs/images/icons/arrow-down.png" width="48" height="48" alt="arrow-down" /> |
+| `<ea-icon-arrow-left />` | <img src="docs/images/icons/arrow-left.png" width="48" height="48" alt="arrow-left" /> |
+| `<ea-icon-arrow-right />` | <img src="docs/images/icons/arrow-right.png" width="48" height="48" alt="arrow-right" /> |
+| `<ea-icon-arrow-up />` | <img src="docs/images/icons/arrow-up.png" width="48" height="48" alt="arrow-up" /> |
+| `<ea-icon-bell />` | <img src="docs/images/icons/bell.png" width="48" height="48" alt="bell" /> |
+| `<ea-icon-calendar />` | <img src="docs/images/icons/calendar.png" width="48" height="48" alt="calendar" /> |
 | `<ea-icon-camera />` | <img src="docs/images/icons/camera.png" width="48" height="48" alt="camera" /> |
-| `<ea-icon-chevron-down />` | <img src="docs/images/icons/chevron-down.png" width="48" height="48" alt="chevron-down" /> |
 | `<ea-icon-check />` | <img src="docs/images/icons/check.png" width="48" height="48" alt="check" /> |
+| `<ea-icon-check-circle />` | <img src="docs/images/icons/check-circle.png" width="48" height="48" alt="check-circle" /> |
+| `<ea-icon-chevron-down />` | <img src="docs/images/icons/chevron-down.png" width="48" height="48" alt="chevron-down" /> |
+| `<ea-icon-chevron-left />` | <img src="docs/images/icons/chevron-left.png" width="48" height="48" alt="chevron-left" /> |
+| `<ea-icon-chevron-right />` | <img src="docs/images/icons/chevron-right.png" width="48" height="48" alt="chevron-right" /> |
+| `<ea-icon-chevron-up />` | <img src="docs/images/icons/chevron-up.png" width="48" height="48" alt="chevron-up" /> |
+| `<ea-icon-chevrons-up-down />` | <img src="docs/images/icons/chevrons-up-down.png" width="48" height="48" alt="chevrons-up-down" /> |
+| `<ea-icon-clock />` | <img src="docs/images/icons/clock.png" width="48" height="48" alt="clock" /> |
+| `<ea-icon-copy />` | <img src="docs/images/icons/copy.png" width="48" height="48" alt="copy" /> |
+| `<ea-icon-download />` | <img src="docs/images/icons/download.png" width="48" height="48" alt="download" /> |
+| `<ea-icon-eagami />` | <img src="docs/images/icons/eagami.png" width="48" height="48" alt="eagami" /> |
+| `<ea-icon-external-link />` | <img src="docs/images/icons/external-link.png" width="48" height="48" alt="external-link" /> |
 | `<ea-icon-eye />` | <img src="docs/images/icons/eye.png" width="48" height="48" alt="eye" /> |
 | `<ea-icon-eye-off />` | <img src="docs/images/icons/eye-off.png" width="48" height="48" alt="eye-off" /> |
+| `<ea-icon-facebook />` | <img src="docs/images/icons/facebook.png" width="48" height="48" alt="facebook" /> |
+| `<ea-icon-file />` | <img src="docs/images/icons/file.png" width="48" height="48" alt="file" /> |
+| `<ea-icon-filter />` | <img src="docs/images/icons/filter.png" width="48" height="48" alt="filter" /> |
+| `<ea-icon-github />` | <img src="docs/images/icons/github.png" width="48" height="48" alt="github" /> |
 | `<ea-icon-google />` | <img src="docs/images/icons/google.png" width="48" height="48" alt="google" /> |
+| `<ea-icon-heart />` | <img src="docs/images/icons/heart.png" width="48" height="48" alt="heart" /> |
+| `<ea-icon-image />` | <img src="docs/images/icons/image.png" width="48" height="48" alt="image" /> |
 | `<ea-icon-info />` | <img src="docs/images/icons/info.png" width="48" height="48" alt="info" /> |
+| `<ea-icon-link />` | <img src="docs/images/icons/link.png" width="48" height="48" alt="link" /> |
 | `<ea-icon-loader />` | <img src="docs/images/icons/loader.png" width="48" height="48" alt="loader" /> |
+| `<ea-icon-log-out />` | <img src="docs/images/icons/log-out.png" width="48" height="48" alt="log-out" /> |
+| `<ea-icon-mail />` | <img src="docs/images/icons/mail.png" width="48" height="48" alt="mail" /> |
+| `<ea-icon-menu />` | <img src="docs/images/icons/menu.png" width="48" height="48" alt="menu" /> |
+| `<ea-icon-microsoft />` | <img src="docs/images/icons/microsoft.png" width="48" height="48" alt="microsoft" /> |
 | `<ea-icon-minus />` | <img src="docs/images/icons/minus.png" width="48" height="48" alt="minus" /> |
+| `<ea-icon-more-horizontal />` | <img src="docs/images/icons/more-horizontal.png" width="48" height="48" alt="more-horizontal" /> |
+| `<ea-icon-pencil />` | <img src="docs/images/icons/pencil.png" width="48" height="48" alt="pencil" /> |
 | `<ea-icon-plus />` | <img src="docs/images/icons/plus.png" width="48" height="48" alt="plus" /> |
 | `<ea-icon-rotate-ccw />` | <img src="docs/images/icons/rotate-ccw.png" width="48" height="48" alt="rotate-ccw" /> |
+| `<ea-icon-search />` | <img src="docs/images/icons/search.png" width="48" height="48" alt="search" /> |
+| `<ea-icon-settings />` | <img src="docs/images/icons/settings.png" width="48" height="48" alt="settings" /> |
+| `<ea-icon-star />` | <img src="docs/images/icons/star.png" width="48" height="48" alt="star" /> |
 | `<ea-icon-trash />` | <img src="docs/images/icons/trash.png" width="48" height="48" alt="trash" /> |
 | `<ea-icon-upload />` | <img src="docs/images/icons/upload.png" width="48" height="48" alt="upload" /> |
 | `<ea-icon-user />` | <img src="docs/images/icons/user.png" width="48" height="48" alt="user" /> |
 | `<ea-icon-x />` | <img src="docs/images/icons/x.png" width="48" height="48" alt="x" /> |
+| `<ea-icon-x-circle />` | <img src="docs/images/icons/x-circle.png" width="48" height="48" alt="x-circle" /> |
+| `<ea-icon-x-twitter />` | <img src="docs/images/icons/x-twitter.png" width="48" height="48" alt="x-twitter" /> |
+
+</details>
 
 ## Theming
 
@@ -483,7 +682,7 @@ See [`src/styles/tokens/`](src/styles/tokens/) for the full token reference.
 
 ```bash
 pnpm install       # Install dependencies
-pnpm start         # Run sandbox dev app
+pnpm sandbox       # Run sandbox dev app
 pnpm storybook     # Run Storybook
 pnpm test          # Run tests
 pnpm build         # Build the library