@eagami/ui 1.2.1 → 1.4.0

package/README.md

@@ -9,10 +9,19 @@
   <a href="https://github.com/mwiraszka/eagami/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@eagami/ui.svg" alt="license" /></a>
 </p>
 
-A lightweight, accessible Angular component library built on CSS custom properties. Standalone, signal-based, fully themable, and localized in five languages out of the box.
+`@eagami/ui` is a lightweight, accessible Angular component library. Sensible defaults out of the box, with a fully customizable design to fit any brand.
 
 **Live documentation:** [eagami.com/ui](https://eagami.com/ui)
 
+## Design principles
+
+- **Accessible.** Keyboard navigation, focus management, screen-reader support, and reduced-motion handling are built into every component.
+- **Lightweight.** Each component imports independently and the bundle only ships what you use.
+- **Themeable.** Fully customizable with [design tokens](https://eagami.com/ui/design-tokens) while maintaining a unified look across every page. Light and dark variants ship together and default to the user's system preference.
+- **Localized.** Built-in component text ships in English, French, Greek, Polish, and Spanish.
+- **Modern.** Regularly updated with the latest Angular features and modern web standards.
+- **Unlocked.** Every component is plain Angular and CSS with no vendor lock-in, so the source can be read, copied, or modified like any other code in your project.
+
 ## Installation
 
 ```bash
@@ -31,27 +40,36 @@ Add the global stylesheet to your `angular.json`:
 
 See the [Setup](https://eagami.com/ui/setup) page for fonts and your first component import.
 
-## Features
-
-- Standalone components; no `NgModule` boilerplate
-- Signal-based APIs (`input()`, `model()`, `output()`)
-- Tree-shakeable; ~70 KB gzipped for the whole library
-- Themed via CSS custom properties on `:root`
-- Dark mode automatic via `prefers-color-scheme`
-- Accessible: ARIA, keyboard, focus management, reduced motion
-- Localized in English, French, Greek, Polish, Spanish
-- `ControlValueAccessor` on every form control
-
 ## What's included
 
 - **Form controls**: Input, Textarea, Checkbox, Switch, Radio, Dropdown, Autocomplete, Date picker, Slider, Code input, Segmented, Avatar editor
 - **Overlays**: Dialog, Drawer, Tooltip, Menu, Toast
 - **Navigation**: Tabs, Breadcrumbs, Paginator, Accordion
 - **Display**: Card, Badge, Tag, Alert, Avatar, Skeleton, Spinner, Progress bar, Empty state, Divider, Eagami wordmark, Data table
-- **Icons**: 100 stroke-based SVG icon components (`<ea-icon-*>`)
 
 Full API and live demos at [eagami.com/ui/components](https://eagami.com/ui/components).
 
+## Icons
+
+Standalone Angular components (`<ea-icon-*>`) that inherit their color and scale with `font-size`, so they render at any size. The library ships the full [Feather Icons](https://feathericons.com/) set (287 icons at their canonical slugs) by [Cole Bemis](https://github.com/colebemis), used under the [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE), plus a set of original Eagami UI additions (basic shapes, household objects, the Eagami brand mark) and a small coloured brand-icon set for nominative use.
+
+Each icon component exposes `static readonly` metadata so consumers can build catalogues, search indices, or doc tables without importing every icon:
+
+```ts
+import { GithubIconComponent } from '@eagami/ui';
+
+GithubIconComponent.slug;     // 'github'
+GithubIconComponent.category; // 'feather'
+GithubIconComponent.isBrand;  // true
+GithubIconComponent.tags;     // ['github', 'git', 'repository', ...]
+```
+
+The shape of this metadata is described by the exported `IconCategory`, `IconMeta`, and `IconComponentType` types. Every icon component extends the abstract `IconComponentBase` directive, which contributes the shared `display: inline-flex; width: 1em; height: 1em` host bindings.
+
+For catalogue-style use cases, import the `ICONS` array (a slug-sorted, `ReadonlyArray<IconComponentType>` of every non-deprecated icon) and the `iconDisplayName(iconOrSlug)` helper that resolves the human-readable label with the correct casing for acronyms and brand marks (`GitHub`, `npm`, `CodePen`, `X (Twitter)`, etc.). Importing `ICONS` pulls every icon into the bundle, so apps that only render a handful should keep importing the components they use directly.
+
+See [icons](https://eagami.com/ui/icons) for the full set, per-brand guideline links, and a searchable filter.
+
 ## Theming
 
 Every visual property is a CSS custom property on `:root`, so overriding any token retunes the whole library. See [design tokens](https://eagami.com/ui/design-tokens) for the full reference and theming examples.