@eagami/ui 0.8.1 → 0.10.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>
 
@@ -127,7 +145,7 @@ Sizes: `xs` | `sm` | `md` | `lg` | `xl`. Shapes: `circle` | `square`.
 </details>
 
 <details>
-<summary><strong>Avatar Editor</strong> — canvas-based image editor with pan, zoom, and crop</summary>
+<summary><strong>Avatar editor</strong> — canvas-based image editor with pan, zoom, and crop</summary>
 
 Drag-and-drop upload, zoom via slider or scroll wheel. Outputs a `Blob` and data URL.
 
@@ -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>
 
@@ -205,7 +242,7 @@ Sizes: `sm` | `md` | `lg`.
 </details>
 
 <details>
-<summary><strong>Code Input</strong> — verification code entry with auto-advance and paste support</summary>
+<summary><strong>Code input</strong> — verification code entry with auto-advance and paste support</summary>
 
 Configurable `length` (default 6). Full `ControlValueAccessor` support.
 
@@ -218,7 +255,7 @@ Configurable `length` (default 6). Full `ControlValueAccessor` support.
 </details>
 
 <details>
-<summary><strong>Data Table</strong> — sortable columns, sticky headers, density modes</summary>
+<summary><strong>Data table</strong> — sortable columns, sticky headers, density modes</summary>
 
 Striped, bordered, and hoverable rows. Custom cell templates via `ng-template`. Density: `compact` | `comfortable` | `spacious`. Two-way `sort` binding.
 
@@ -236,6 +273,24 @@ Striped, bordered, and hoverable rows. Custom cell templates via `ng-template`.
 
 </details>
 
+<details>
+<summary><strong>Date picker</strong> — calendar popover with keyboard navigation and min/max bounds</summary>
+
+Sizes: `sm` | `md` | `lg`. Formats: `short` | `medium` | `long` (locale-aware via `Intl.DateTimeFormat`). Configurable week start (Sunday or Monday). Full keyboard navigation (arrows, PageUp/PageDown, Home/End, Enter, Escape) and `ControlValueAccessor` integration.
+
+```html
+<ea-date-picker
+  label="Appointment"
+  placeholder="Pick a date…"
+  format="medium"
+  [minDate]="today"
+  [(value)]="appointmentDate" />
+```
+
+<img src="docs/images/date-picker.png" alt="Date picker component" width="560" />
+
+</details>
+
 <details>
 <summary><strong>Dialog</strong> — native dialog element with focus trapping</summary>
 
@@ -254,6 +309,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 +328,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 +367,22 @@ 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 &lt;text&gt;) | `brand` (&lt;text&gt; with tagline). The `text` input switches the main wordmark between `eagami` and `eagami design system` in the `signature` and `brand` variants. Three discrete sizes (`sm`, `md`, `lg`) scale both the logo and the text proportionally.
+
+```html
+<ea-eagami-wordmark
+  variant="brand"
+  size="md"
+  text="eagami design system" />
+```
+
+<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 +401,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,10 +437,12 @@ 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>
-<summary><strong>Progress Bar</strong> — determinate and indeterminate linear indicator</summary>
+<summary><strong>Progress bar</strong> — determinate and indeterminate linear indicator</summary>
 
 Variants: `default` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`. Optional `label` and `showValue` display.
 
@@ -482,12 +602,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 +633,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" /> |