@eagami/ui 0.8.1 → 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.
@@ -111,6 +111,24 @@ Variants: `default` | `success` | `warning` | `error` | `info`. Two-way `visible
 
 </details>
 
+<details>
+<summary><strong>Autocomplete</strong> — text input with filtered suggestion dropdown</summary>
+
+Arrow key navigation, case-insensitive substring matching, configurable `minLength` and `maxResults`. Full `ControlValueAccessor` support.
+
+```html
+<ea-autocomplete
+  label="Country"
+  placeholder="Start typing…"
+  [options]="countries"
+  [(value)]="selectedCountry"
+  (optionSelected)="onSelect($event)" />
+```
+
+<img src="docs/images/autocomplete.png" alt="Autocomplete component" width="560" />
+
+</details>
+
 <details>
 <summary><strong>Avatar</strong> — image with initials or icon fallback</summary>
 
@@ -156,6 +174,25 @@ Variants: `default` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `m
 
 </details>
 
+<details>
+<summary><strong>Breadcrumbs</strong> — navigation trail with chevron or slash separators</summary>
+
+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-breadcrumbs
+  [items]="[
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'MacBook Pro' }
+  ]"
+  (itemClicked)="navigate($event)" />
+```
+
+<img src="docs/images/breadcrumbs.png" alt="Breadcrumbs component" width="560" />
+
+</details>
+
 <details>
 <summary><strong>Button</strong> — primary, secondary, ghost, danger variants with loading state</summary>
 
@@ -254,6 +291,8 @@ Sizes: `sm` | `md` | `lg` | `full`. Two-way `open` binding.
 </ea-dialog>
 ```
 
+<img src="docs/images/dialog.png" alt="Dialog component" width="560" />
+
 </details>
 
 <details>
@@ -271,6 +310,28 @@ Orientation: `horizontal` | `vertical`.
 
 </details>
 
+<details>
+<summary><strong>Drawer</strong> — side panel using native dialog with focus trapping</summary>
+
+Positions: `left` | `right` | `top` | `bottom`. Sizes: `sm` | `md` | `lg` | `full`. Two-way `open` binding.
+
+```html
+<ea-button (clicked)="drawerOpen.set(true)">Open</ea-button>
+
+<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)="drawerOpen.set(false)">Cancel</ea-button>
+    <ea-button (clicked)="save()">Save</ea-button>
+  </span>
+</ea-drawer>
+```
+
+<img src="docs/images/drawer.png" alt="Drawer component" width="560" />
+
+</details>
+
 <details>
 <summary><strong>Dropdown</strong> — select with ControlValueAccessor and keyboard navigation</summary>
 
@@ -288,6 +349,19 @@ Arrow keys, Enter/Space to select, Escape to close. Sizes: `sm` | `md` | `lg`.
 
 </details>
 
+<details>
+<summary><strong>Eagami Wordmark</strong> — branded logo wordmark linking to eagami.com</summary>
+
+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.
+
+```html
+<ea-eagami-wordmark variant="brand" size="md" />
+```
+
+<img src="docs/images/eagami-wordmark.png" alt="Eagami Wordmark component" width="560" />
+
+</details>
+
 <details>
 <summary><strong>Input</strong> — text field with ControlValueAccessor and password toggle</summary>
 
@@ -306,6 +380,29 @@ Types: `text` | `email` | `password` | `number` | `search` | `tel` | `url`. Size
 
 </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-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/menu.png" alt="Menu component" width="560" />
+
+</details>
+
 <details>
 <summary><strong>Paginator</strong> — page navigation with configurable page sizes</summary>
 
@@ -319,6 +416,8 @@ Placement: `left` | `center` | `right`. Emits `pageChange` events with current p
   (pageChange)="onPageChange($event)" />
 ```
 
+<img src="docs/images/paginator.png" alt="Paginator component" width="560" />
+
 </details>
 
 <details>
@@ -482,12 +581,14 @@ Positions: `top` | `bottom` | `left` | `right`.
 <ea-button eaTooltip="Save your changes" tooltipPosition="top">Save</ea-button>
 ```
 
+<img src="docs/images/tooltip.png" alt="Tooltip component" width="560" />
+
 </details>
 
 ## Icons
 
 <details>
-<summary><strong>51 built-in SVG icon components</strong> — Feather-style (24x24, stroke-based, inherits <code>currentColor</code>)</summary>
+<summary><strong>52 built-in SVG icon components</strong> — Feather-style (24x24, stroke-based, inherits <code>currentColor</code>)</summary>
 
 | Tag | Preview |
 |---|---|
@@ -511,6 +612,7 @@ Positions: `top` | `bottom` | `left` | `right`.
 | `<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" /> |