ux4g-components-angular 1.1.0 → 1.1.2

package/README.md

@@ -1,6 +1,8 @@
 # ux4g-components-angular
 
-Angular wrapper components for the UX4G Design System.
+Angular wrapper components for the **UX4G Design System**.
+
+Thin, typed Angular components that map inputs to UX4G CSS classes. Each component is tree-shakeable via sub-path imports and NgModule.
 
 ## Installation
 
@@ -8,74 +10,1168 @@ Angular wrapper components for the UX4G Design System.
 npm install ux4g-components-angular ux4g-components-web
 ```
 
+> **Note:** `ux4g-components-web` is required — it provides the CSS bundle that styles all components.
+
 ## Setup
 
 Add the CSS bundle to your `angular.json` styles array:
 
 ```json
 {
-  "styles": [
-    "node_modules/ux4g-components-web/styles/ux4g.css",
-    "src/styles.css"
-  ]
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "node_modules/ux4g-components-web/styles/ux4g.css",
+              "src/styles.css"
+            ]
+          }
+        }
+      }
+    }
+  }
 }
 ```
 
-## Usage
+That's it. Runtime behaviors (dropdowns, modals, tooltips, etc.) are auto-initialized when you import any component module — no manual setup needed.
+
+## Peer Dependencies
+
+- `@angular/core >= 15.0.0`
+- `@angular/common >= 15.0.0`
+
+---
+
+## Components
+
+### Button
 
 ```ts
 // app.module.ts
 import { UX4GButtonModule } from 'ux4g-components-angular/button';
-import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
 
 @NgModule({
-  imports: [UX4GButtonModule, UX4GSpinnerModule],
+  imports: [UX4GButtonModule],
 })
 export class AppModule {}
 ```
 
 ```html
 <!-- app.component.html -->
-<ux4g-button variant="primary" size="md" (buttonClick)="onSave()">
+<ux4g-button variant="primary" size="md" (clicked)="onSave()">
   Save
 </ux4g-button>
 
-<ux4g-spinner variant="primary" size="md" type="full"></ux4g-spinner>
+<ux4g-button variant="outline-danger" size="lg">
+  Delete
+</ux4g-button>
+
+<ux4g-button variant="tonal-primary" size="sm" shape="pill">
+  Tag
+</ux4g-button>
+
+<ux4g-button variant="primary" size="md" [loading]="true">
+  Saving...
+</ux4g-button>
+
+<ux4g-button variant="primary" size="md" [disabled]="true">
+  Disabled
+</ux4g-button>
 ```
 
-## Available Components (50)
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'primary' \| 'outline-primary' \| 'text-primary' \| 'tonal-primary' \| 'danger' \| 'outline-danger' \| 'text-danger' \| 'tonal-danger'` | `'primary'` | Visual style |
+| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Button size |
+| `shape` | `'rectangle' \| 'pill'` | `'rectangle'` | Border shape |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `loading` | `boolean` | `false` | Loading state (shows spinner) |
 
-Each component is available as a sub-path import:
+| Output | Type | Description |
+|---|---|---|
+| `clicked` | `EventEmitter<MouseEvent>` | Emitted on click (suppressed when disabled) |
+
+### Spinner
 
 ```ts
-import { UX4GButtonModule } from 'ux4g-components-angular/button';
 import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
+
+@NgModule({ imports: [UX4GSpinnerModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-spinner variant="primary" size="md" type="full"></ux4g-spinner>
+<ux4g-spinner variant="danger" size="lg" type="split"></ux4g-spinner>
+<ux4g-spinner variant="inverse" size="xs" type="partial" label="Processing"></ux4g-spinner>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'primary' \| 'inverse' \| 'danger'` | `'primary'` | Color variant |
+| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Spinner size |
+| `type` | `'full' \| 'split' \| 'partial'` | `'full'` | Spinner style |
+| `label` | `string` | `'Loading'` | Accessible label |
+
+### Link
+
+```ts
+import { UX4GLinkModule } from 'ux4g-components-angular/link';
+
+@NgModule({ imports: [UX4GLinkModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-link href="/docs" variant="default" size="md">Documentation</ux4g-link>
+<ux4g-link href="/terms" variant="neutral" size="sm">Terms of Service</ux4g-link>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default' \| 'neutral'` | `'default'` | Link color style |
+| `size` | `'sm' \| 'md'` | `'md'` | Link size |
+| `href` | `string` | — | Link URL |
+
+### Badge
+
+```ts
 import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
+
+@NgModule({ imports: [UX4GBadgeModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-badge type="dot" color="primary"></ux4g-badge>
+<ux4g-badge type="digit" color="danger" size="m">5</ux4g-badge>
+<ux4g-badge type="icon" color="success" size="l">✓</ux4g-badge>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `type` | `'dot' \| 'icon' \| 'digit'` | `'dot'` | Badge type |
+| `color` | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'secondary' \| 'tertiary' \| 'neutral'` | `'primary'` | Badge color |
+| `size` | `'s' \| 'm' \| 'l' \| 'profile-l' \| 'profile-xl' \| 'profile-2xl' \| 'profile-3xl'` | — | Badge size |
+
+### Avatar
+
+```ts
+import { UX4GAvatarModule } from 'ux4g-components-angular/avatar';
+
+@NgModule({ imports: [UX4GAvatarModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-avatar avatarType="status" size="m">
+  <img src="user.jpg" alt="User" />
+</ux4g-avatar>
+
+<ux4g-avatar avatarType="profile" size="xl">
+  <img src="profile.jpg" alt="Profile" />
+</ux4g-avatar>
+
+<ux4g-avatar avatarType="group">
+  <img src="u1.jpg" alt="" />
+  <img src="u2.jpg" alt="" />
+</ux4g-avatar>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `avatarType` | `'status' \| 'profile' \| 'group'` | `'status'` | Avatar type |
+| `size` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl'` | — | Avatar size |
+
+### Image
+
+```ts
+import { UX4GImageModule } from 'ux4g-components-angular/image';
+
+@NgModule({ imports: [UX4GImageModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-image src="photo.jpg" alt="Photo" ratio="16-9"></ux4g-image>
+<ux4g-image src="photo.jpg" alt="Photo" ratio="4-3" [rounded]="true" [overlay]="true"></ux4g-image>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `ratio` | `'1-1' \| '4-3' \| '3-2' \| '16-10' \| '16-9' \| '2-1' \| '5-2' \| '3-1' \| '1-16' \| '2-3' \| '3-4'` | — | Aspect ratio |
+| `rounded` | `boolean` | `false` | Rounded corners |
+| `overlay` | `boolean` | `false` | Enable overlay |
+
+### Chip
+
+```ts
+import { UX4GChipModule } from 'ux4g-components-angular/chip';
+
+@NgModule({ imports: [UX4GChipModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-chip chipType="filter" size="md">Category</ux4g-chip>
+<ux4g-chip chipType="choice" size="sm" [active]="true">Selected</ux4g-chip>
+<ux4g-chip chipType="input" size="xs">Tag</ux4g-chip>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `chipType` | `'filter' \| 'choice' \| 'input'` | `'filter'` | Chip type |
+| `size` | `'md' \| 'sm' \| 'xs'` | `'md'` | Chip size (xs only for input) |
+| `active` | `boolean` | `false` | Active/selected state |
+
+### Tag
+
+```ts
+import { UX4GTagModule } from 'ux4g-components-angular/tag';
+
+@NgModule({ imports: [UX4GTagModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-tag variant="tonal" color="neutral">Default</ux4g-tag>
+<ux4g-tag variant="filled" color="success" [small]="true">Active</ux4g-tag>
+<ux4g-tag variant="outline" color="error">Error</ux4g-tag>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'tonal' \| 'filled' \| 'outline' \| 'text'` | `'tonal'` | Tag style |
+| `color` | `'neutral' \| 'brand' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'neutral'` | Tag color |
+| `small` | `boolean` | `false` | Small size |
+
+### Divider
+
+```ts
+import { UX4GDividerModule } from 'ux4g-components-angular/divider';
+
+@NgModule({ imports: [UX4GDividerModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-divider orientation="horizontal"></ux4g-divider>
+<ux4g-divider orientation="vertical"></ux4g-divider>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Divider direction |
+
+### Breadcrumb
+
+```ts
+import { UX4GBreadcrumbModule } from 'ux4g-components-angular/breadcrumb';
+
+@NgModule({ imports: [UX4GBreadcrumbModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-breadcrumb separator="divider">
+  <a href="#">Home</a>
+  <a href="#">Products</a>
+  <span>Current</span>
+</ux4g-breadcrumb>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `separator` | `'divider' \| 'icon'` | `'divider'` | Separator style |
+
+### Checkbox
+
+```ts
+import { UX4GCheckboxModule } from 'ux4g-components-angular/checkbox';
+
+@NgModule({ imports: [UX4GCheckboxModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-checkbox size="md" label="Accept terms"></ux4g-checkbox>
+<ux4g-checkbox size="sm" [error]="true" label="Required field"></ux4g-checkbox>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Checkbox size |
+| `error` | `boolean` | `false` | Error state |
+
+### Radio
+
+```ts
+import { UX4GRadioModule } from 'ux4g-components-angular/radio';
+
+@NgModule({ imports: [UX4GRadioModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-radio size="md" name="option" label="Option A"></ux4g-radio>
+<ux4g-radio size="lg" name="option" label="Option B" [error]="true"></ux4g-radio>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Radio size |
+| `error` | `boolean` | `false` | Error state |
+
+### Switch
+
+```ts
+import { UX4GSwitchModule } from 'ux4g-components-angular/switch';
+
+@NgModule({ imports: [UX4GSwitchModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-switch size="md" label="Enable notifications"></ux4g-switch>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Switch size |
+
+### Card
+
+```ts
 import { UX4GCardModule } from 'ux4g-components-angular/card';
-// ... and 46 more
+
+@NgModule({ imports: [UX4GCardModule] })
+export class AppModule {}
 ```
 
-Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
+```html
+<ux4g-card variant="solid" layout="vertical">
+  <h3>Card Title</h3>
+  <p>Card content goes here.</p>
+</ux4g-card>
 
-## Architecture
+<ux4g-card variant="outline" layout="horizontal">
+  <img src="thumb.jpg" alt="" />
+  <p>Horizontal card</p>
+</ux4g-card>
+```
 
-This package follows a CSS-first architecture:
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'solid' \| 'outline' \| 'no-fill'` | `'solid'` | Card style |
+| `layout` | `'vertical' \| 'horizontal'` | `'vertical'` | Card layout |
 
-- **CSS is the source of truth** — all visual decisions live in CSS
-- **Wrappers are thin** — they map typed inputs to CSS class strings via `buildXxxClasses()` functions
-- **No inline styles, no CSS-in-JS** — only `[class]` bindings
-- **No local `types.ts` copies** — all Class_Builder functions are imported from `ux4g-components-web/types`
+### Input
 
-## Compatibility
+```ts
+import { UX4GInputModule } from 'ux4g-components-angular/input';
 
-- Angular >= 15.0.0
-- Built with Ivy partial compilation (compatible with Angular 15–19+)
-- `typesVersions` included for `moduleResolution: node` compatibility
+@NgModule({ imports: [UX4GInputModule] })
+export class AppModule {}
+```
 
-## Peer Dependencies
+```html
+<ux4g-input size="md" state="default" label="Email" placeholder="Enter email"></ux4g-input>
+<ux4g-input size="lg" state="error" label="Password" helperText="Password is required"></ux4g-input>
+```
 
-- `@angular/core >= 15.0.0`
-- `@angular/common >= 15.0.0`
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Input size |
+| `state` | `'default' \| 'error' \| 'success' \| 'warning'` | `'default'` | Validation state |
+
+### List
+
+```ts
+import { UX4GListModule } from 'ux4g-components-angular/list';
+
+@NgModule({ imports: [UX4GListModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-list variant="default" size="m">
+  <li>Item one</li>
+  <li>Item two</li>
+</ux4g-list>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default' \| 'error' \| 'success' \| 'warning'` | `'default'` | List style |
+| `size` | `'s' \| 'm' \| 'l' \| 'xl'` | `'m'` | List size |
+
+### Dropdown
+
+```ts
+import { UX4GDropdownModule } from 'ux4g-components-angular/dropdown';
+
+@NgModule({ imports: [UX4GDropdownModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-dropdown type="selection" mode="single" size="md" state="default">
+  <ux4g-dropdown-item value="1">Option 1</ux4g-dropdown-item>
+  <ux4g-dropdown-item value="2">Option 2</ux4g-dropdown-item>
+</ux4g-dropdown>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `type` | `'selection' \| 'button' \| 'overflow'` | `'selection'` | Dropdown type |
+| `mode` | `'single' \| 'multi'` | `'single'` | Selection mode |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Dropdown size |
+| `state` | `'default' \| 'error' \| 'success' \| 'warning'` | `'default'` | Validation state |
+| `open` | `boolean` | `false` | Open state |
+
+### Combobox
+
+```ts
+import { UX4GComboboxModule } from 'ux4g-components-angular/combobox';
+
+@NgModule({ imports: [UX4GComboboxModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-combobox type="single" size="md" state="default" placeholder="Search..."></ux4g-combobox>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `type` | `'single' \| 'multi'` | `'single'` | Combobox type |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Combobox size |
+| `state` | `'default' \| 'error' \| 'success' \| 'warning'` | `'default'` | Validation state |
+| `open` | `boolean` | `false` | Open state |
+
+### Modal
+
+```ts
+import { UX4GModalModule } from 'ux4g-components-angular/modal';
+
+@NgModule({ imports: [UX4GModalModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-modal size="m" opacity="50" [open]="isOpen" (closed)="isOpen = false">
+  <h2>Modal Title</h2>
+  <p>Modal content here.</p>
+</ux4g-modal>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'s' \| 'm' \| 'l'` | `'m'` | Modal size |
+| `opacity` | `'25' \| '50' \| '75'` | `'50'` | Backdrop opacity |
+| `blur` | `boolean` | `false` | Backdrop blur |
+| `open` | `boolean` | `false` | Open state |
+| `centerContent` | `boolean` | `false` | Center modal content |
+
+| Output | Type | Description |
+|---|---|---|
+| `closed` | `EventEmitter<void>` | Emitted when modal is closed |
+
+### Alert / Toast
+
+```ts
+import { UX4GAlertModule } from 'ux4g-components-angular/alert';
+
+@NgModule({ imports: [UX4GAlertModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-alert variant="info">This is an informational message.</ux4g-alert>
+<ux4g-alert variant="success" layout="wide">Saved successfully!</ux4g-alert>
+
+<ux4g-alert-container position="top-right">
+  <ux4g-alert variant="success">Toast notification</ux4g-alert>
+</ux4g-alert-container>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | Alert type |
+| `layout` | `'fluid' \| 'center' \| 'wide'` | `'fluid'` | Alert layout |
+
+**AlertContainer Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `position` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'` | Container position |
+
+### Search
+
+```ts
+import { UX4GSearchModule } from 'ux4g-components-angular/search';
+
+@NgModule({ imports: [UX4GSearchModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-search size="m" placeholder="Search..." (searched)="onSearch($event)"></ux4g-search>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'s' \| 'm' \| 'lg'` | `'m'` | Search size |
+
+| Output | Type | Description |
+|---|---|---|
+| `searched` | `EventEmitter<string>` | Emitted on search submit |
+
+### Pagination
+
+```ts
+import { UX4GPaginationModule } from 'ux4g-components-angular/pagination';
+
+@NgModule({ imports: [UX4GPaginationModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-pagination variant="default" [totalPages]="10" [currentPage]="1" (pageChanged)="onPage($event)"></ux4g-pagination>
+<ux4g-pagination variant="dotted" paginationStyle="solid" [totalPages]="5" [currentPage]="2"></ux4g-pagination>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default' \| 'dotted'` | `'default'` | Pagination style |
+| `paginationStyle` | `'default' \| 'solid' \| 'translucent'` | `'default'` | Dotted variant style |
+
+| Output | Type | Description |
+|---|---|---|
+| `pageChanged` | `EventEmitter<number>` | Emitted on page change |
+
+### Table
+
+```ts
+import { UX4GTableModule } from 'ux4g-components-angular/table';
+
+@NgModule({ imports: [UX4GTableModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-table size="m" divider="row" [interactive]="true">
+  <thead>
+    <tr><th>Name</th><th>Email</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Alice</td><td>alice@example.com</td></tr>
+  </tbody>
+</ux4g-table>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'s' \| 'm' \| 'lg'` | `'m'` | Table size |
+| `divider` | `'row' \| 'column' \| 'none'` | `'row'` | Divider style |
+| `zebra` | `'none' \| 'rows' \| 'cols'` | `'none'` | Zebra striping |
+| `interactive` | `boolean` | `false` | Hover highlight |
+| `sortable` | `boolean` | `false` | Sortable columns |
+| `resizable` | `boolean` | `false` | Resizable columns |
+| `headerBrand` | `boolean` | `false` | Brand-colored header |
+
+### Popover
+
+```ts
+import { UX4GPopoverModule } from 'ux4g-components-angular/popover';
+
+@NgModule({ imports: [UX4GPopoverModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-popover placement="right" title="Popover Title" content="Body text" [show]="showPopover">
+  <button>Toggle Popover</button>
+</ux4g-popover>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `placement` | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `'bottom'` | Popover position |
+| `show` | `boolean` | `false` | Visibility |
+
+### Tooltip
+
+```ts
+import { UX4GTooltipModule } from 'ux4g-components-angular/tooltip';
+
+@NgModule({ imports: [UX4GTooltipModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-tooltip placement="top-center" size="s" content="Tooltip text">
+  <button>Hover me</button>
+</ux4g-tooltip>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `placement` | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right' \| 'left-center' \| 'right-center'` | `'top-center'` | Tooltip position |
+| `size` | `'s' \| 'xs'` | `'s'` | Tooltip size |
+
+### Tab
+
+```ts
+import { UX4GTabModule } from 'ux4g-components-angular/tab';
+
+@NgModule({ imports: [UX4GTabModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-tab variant="underline" size="md">
+  <ux4g-tab-item label="Tab 1" [active]="true">Content 1</ux4g-tab-item>
+  <ux4g-tab-item label="Tab 2">Content 2</ux4g-tab-item>
+</ux4g-tab>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'underline' \| 'pill'` | `'underline'` | Tab style |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tab size |
+| `vertical` | `boolean` | `false` | Vertical layout |
+
+### Icon Button
+
+```ts
+import { UX4GIconButtonModule } from 'ux4g-components-angular/icon-button';
+
+@NgModule({ imports: [UX4GIconButtonModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-icon-button variant="primary" size="md" aria-label="Edit">
+  <i class="ux4g-icon-edit"></i>
+</ux4g-icon-button>
+
+<ux4g-icon-button variant="tonal-primary" size="lg" [pill]="true" aria-label="Add">
+  <i class="ux4g-icon-plus"></i>
+</ux4g-icon-button>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'primary' \| 'outline-primary' \| 'tonal-primary' \| 'text-primary'` | `'primary'` | Button style |
+| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Button size |
+| `pill` | `boolean` | `false` | Pill shape |
+
+### Accessibility Bar
+
+```ts
+import { UX4GAccessibilityBarModule } from 'ux4g-components-angular/accessibility-bar';
+
+@NgModule({ imports: [UX4GAccessibilityBarModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-accessibility-bar>
+  <a href="#main-content">Skip to main content</a>
+</ux4g-accessibility-bar>
+```
+
+### Accordion
+
+```ts
+import { UX4GAccordionModule } from 'ux4g-components-angular/accordion';
+
+@NgModule({ imports: [UX4GAccordionModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-accordion arrowPosition="right" variant="default">
+  <ux4g-accordion-item title="Section 1">Content 1</ux4g-accordion-item>
+  <ux4g-accordion-item title="Section 2">Content 2</ux4g-accordion-item>
+</ux4g-accordion>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `arrowPosition` | `'right' \| 'left'` | `'right'` | Arrow icon position |
+| `variant` | `'default' \| 'bordered'` | `'default'` | Accordion style |
+
+### Stepper
+
+```ts
+import { UX4GStepperModule } from 'ux4g-components-angular/stepper';
+
+@NgModule({ imports: [UX4GStepperModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-stepper orientation="horizontal" alignment="center">
+  <ux4g-stepper-step status="completed">Step 1</ux4g-stepper-step>
+  <ux4g-stepper-step status="active">Step 2</ux4g-stepper-step>
+  <ux4g-stepper-step>Step 3</ux4g-stepper-step>
+</ux4g-stepper>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction |
+| `alignment` | `'default' \| 'center' \| 'left'` | `'default'` | Horizontal alignment |
+| `variant` | `'default' \| 'bottom-line' \| 'bottom-line-fill' \| 'mobile' \| 'progress'` | `'default'` | Stepper style |
+| `size` | `'default' \| 's'` | `'default'` | Stepper size |
+
+### Slider
+
+```ts
+import { UX4GSliderModule } from 'ux4g-components-angular/slider';
+
+@NgModule({ imports: [UX4GSliderModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-slider size="sm" [min]="0" [max]="100" [value]="50"></ux4g-slider>
+<ux4g-slider size="md" [min]="0" [max]="100" [value]="75"></ux4g-slider>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'sm' \| 'md'` | `'sm'` | Slider size |
+
+### Drawer
+
+```ts
+import { UX4GDrawerModule } from 'ux4g-components-angular/drawer';
+
+@NgModule({ imports: [UX4GDrawerModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-drawer placement="right" [open]="isOpen" (closed)="isOpen = false">
+  <h3>Drawer Title</h3>
+  <p>Drawer content</p>
+</ux4g-drawer>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `placement` | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | Slide-in direction |
+| `open` | `boolean` | `false` | Open state |
+
+| Output | Type | Description |
+|---|---|---|
+| `closed` | `EventEmitter<void>` | Emitted when drawer is closed |
+
+### Date-Time Picker
+
+```ts
+import { UX4GDateTimePickerModule } from 'ux4g-components-angular/date-time-picker';
+
+@NgModule({ imports: [UX4GDateTimePickerModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-date-time-picker mode="date"></ux4g-date-time-picker>
+<ux4g-date-time-picker mode="time"></ux4g-date-time-picker>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `mode` | `'date' \| 'time'` | `'date'` | Picker mode |
+
+### Status Pipeline
+
+```ts
+import { UX4GStatusPipelineModule } from 'ux4g-components-angular/status-pipeline';
+
+@NgModule({ imports: [UX4GStatusPipelineModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-status-pipeline orientation="horizontal" alignment="center">
+  <ux4g-status-pipeline-step status="completed">Submitted</ux4g-status-pipeline-step>
+  <ux4g-status-pipeline-step status="active">In Review</ux4g-status-pipeline-step>
+  <ux4g-status-pipeline-step>Approved</ux4g-status-pipeline-step>
+</ux4g-status-pipeline>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction |
+| `alignment` | `'default' \| 'center' \| 'left'` | `'default'` | Horizontal alignment |
+| `variant` | `'default' \| 'bottom-line' \| 'bottom-line-fill' \| 'mobile' \| 'progress'` | `'default'` | Pipeline style |
+| `size` | `'default' \| 's'` | `'default'` | Pipeline size |
+
+### Journey Timeline
+
+```ts
+import { UX4GJourneyTimelineModule } from 'ux4g-components-angular/journey-timeline';
+
+@NgModule({ imports: [UX4GJourneyTimelineModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-journey-timeline orientation="vertical">
+  <ux4g-journey-timeline-item>Event 1</ux4g-journey-timeline-item>
+  <ux4g-journey-timeline-item>Event 2</ux4g-journey-timeline-item>
+</ux4g-journey-timeline>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Timeline direction |
+
+### Form Field Group
+
+```ts
+import { UX4GFormFieldGroupModule } from 'ux4g-components-angular/form-field-group';
+
+@NgModule({ imports: [UX4GFormFieldGroupModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-form-field-group>
+  <label>Full Name</label>
+  <input type="text" />
+  <span>Enter your full legal name</span>
+</ux4g-form-field-group>
+```
+
+### OTP Input
+
+```ts
+import { UX4GOtpInputModule } from 'ux4g-components-angular/otp-input';
+
+@NgModule({ imports: [UX4GOtpInputModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-otp-input [length]="4" state="default"></ux4g-otp-input>
+<ux4g-otp-input [length]="6" state="error"></ux4g-otp-input>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `state` | `'default' \| 'success' \| 'error' \| 'locked'` | `'default'` | Input state |
+
+### File Upload
+
+```ts
+import { UX4GFileUploadModule } from 'ux4g-components-angular/file-upload';
+
+@NgModule({ imports: [UX4GFileUploadModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-file-upload state="default"></ux4g-file-upload>
+<ux4g-file-upload state="uploaded" fileName="document.pdf"></ux4g-file-upload>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `state` | `'default' \| 'default-vle' \| 'selecting' \| 'scanning' \| 'uploaded' \| 'uploaded-vle' \| 'error'` | `'default'` | Upload state |
+
+### Progress Indicator
+
+```ts
+import { UX4GProgressIndicatorModule } from 'ux4g-components-angular/progress-indicator';
+
+@NgModule({ imports: [UX4GProgressIndicatorModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-progress-indicator type="bar" [value]="60"></ux4g-progress-indicator>
+<ux4g-progress-indicator type="circle" [value]="75" size="l"></ux4g-progress-indicator>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `type` | `'bar' \| 'circle'` | `'bar'` | Indicator type |
+| `size` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl'` | `'m'` | Circle size |
+
+### Feedback
+
+```ts
+import { UX4GFeedbackModule } from 'ux4g-components-angular/feedback';
+
+@NgModule({ imports: [UX4GFeedbackModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-feedback>
+  <p>Was this helpful?</p>
+  <button>Yes</button>
+  <button>No</button>
+</ux4g-feedback>
+```
+
+### Draft Status Banner
+
+```ts
+import { UX4GDraftStatusBannerModule } from 'ux4g-components-angular/draft-status-banner';
+
+@NgModule({ imports: [UX4GDraftStatusBannerModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-draft-status-banner variant="default">Draft saved</ux4g-draft-status-banner>
+<ux4g-draft-status-banner variant="auto">Auto-saving...</ux4g-draft-status-banner>
+<ux4g-draft-status-banner variant="success">Published</ux4g-draft-status-banner>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default' \| 'auto' \| 'success'` | `'default'` | Banner style |
+
+### SLA Progress Indicator
+
+```ts
+import { UX4GSlaProgressIndicatorModule } from 'ux4g-components-angular/sla-progress-indicator';
+
+@NgModule({ imports: [UX4GSlaProgressIndicatorModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-sla-progress-indicator type="circle" [value]="75"></ux4g-sla-progress-indicator>
+<ux4g-sla-progress-indicator type="linear" [value]="50"></ux4g-sla-progress-indicator>
+<ux4g-sla-progress-indicator type="badge">On Track</ux4g-sla-progress-indicator>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `type` | `'circle' \| 'linear' \| 'badge'` | `'circle'` | Indicator type |
+
+### Carousel
+
+```ts
+import { UX4GCarouselModule } from 'ux4g-components-angular/carousel';
+
+@NgModule({ imports: [UX4GCarouselModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-carousel>
+  <ux4g-carousel-item>Slide 1</ux4g-carousel-item>
+  <ux4g-carousel-item>Slide 2</ux4g-carousel-item>
+  <ux4g-carousel-item>Slide 3</ux4g-carousel-item>
+</ux4g-carousel>
+```
+
+### Empty State
+
+```ts
+import { UX4GEmptyStateModule } from 'ux4g-components-angular/empty-state';
+
+@NgModule({ imports: [UX4GEmptyStateModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-empty-state>
+  <img src="empty.svg" alt="" />
+  <h3>No results found</h3>
+  <p>Try adjusting your search.</p>
+</ux4g-empty-state>
+```
+
+### Chip Group
+
+```ts
+import { UX4GChipGroupModule } from 'ux4g-components-angular/chip-group';
+
+@NgModule({ imports: [UX4GChipGroupModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-chip-group variant="filter">
+  <ux4g-chip chipType="filter" size="md" [active]="true">All</ux4g-chip>
+  <ux4g-chip chipType="filter" size="md">Category A</ux4g-chip>
+</ux4g-chip-group>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'filter' \| 'choice'` | `'filter'` | Group type |
+
+### Navbar
+
+```ts
+import { UX4GNavbarModule } from 'ux4g-components-angular/navbar';
+
+@NgModule({ imports: [UX4GNavbarModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-navbar>
+  <a href="/">Logo</a>
+  <nav>
+    <a href="#">Home</a>
+    <a href="#">About</a>
+  </nav>
+</ux4g-navbar>
+```
+
+### Social Links
+
+```ts
+import { UX4GSocialLinksModule } from 'ux4g-components-angular/social-links';
+
+@NgModule({ imports: [UX4GSocialLinksModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-social-links size="md">
+  <a href="#" aria-label="Twitter"><i class="ux4g-icon-twitter"></i></a>
+  <a href="#" aria-label="LinkedIn"><i class="ux4g-icon-linkedin"></i></a>
+</ux4g-social-links>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Icon spacing size |
+
+### Slot Grid
+
+```ts
+import { UX4GSlotGridModule } from 'ux4g-components-angular/slot-grid';
+
+@NgModule({ imports: [UX4GSlotGridModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-slot-grid variant="weekly">
+  <div>9:00 AM</div>
+  <div>10:00 AM</div>
+</ux4g-slot-grid>
+
+<ux4g-slot-grid variant="compact">
+  <div>9:00</div>
+  <div>9:30</div>
+</ux4g-slot-grid>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'weekly' \| 'compact'` | `'weekly'` | Grid layout |
+
+### Footer
+
+```ts
+import { UX4GFooterModule } from 'ux4g-components-angular/footer';
+
+@NgModule({ imports: [UX4GFooterModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-footer theme="primary">
+  <p>&copy; 2024 Company Name</p>
+</ux4g-footer>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `theme` | `'default' \| 'primary' \| 'dark'` | `'default'` | Footer theme |
+
+### Result List Row
+
+```ts
+import { UX4GResultListRowModule } from 'ux4g-components-angular/result-list-row';
+
+@NgModule({ imports: [UX4GResultListRowModule] })
+export class AppModule {}
+```
+
+```html
+<ux4g-result-list-row variation="default">
+  <h4>Result Title</h4>
+  <p>Description</p>
+</ux4g-result-list-row>
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `variation` | `'default' \| 'v1' \| 'v2' \| 'v3' \| 'v4' \| 'v5'` | `'default'` | Row layout variation |
+
+---
+
+## Dark Theme
+
+Apply the dark theme by adding `data-theme="dark"` to any container or the `<html>` element:
+
+```html
+<!-- In index.html -->
+<html data-theme="dark">
+
+<!-- Or scoped to a section in a template -->
+<div data-theme="dark">
+  <ux4g-button variant="primary" size="md">Dark themed</ux4g-button>
+</div>
+```
+
+Design tokens automatically switch values — no additional imports needed.
+
+---
+
+## Architecture
+
+This package follows a CSS-first architecture:
+
+- **CSS is the source of truth** — all visual decisions live in CSS from `ux4g-components-web`
+- **Wrappers are thin** — they map typed inputs to CSS class strings via `buildXxxClasses()` functions
+- **No inline styles, no CSS-in-JS** — only `[class]` bindings
+- **Class_Builder functions** are imported from `ux4g-components-web/types`
+- **Runtime auto-bootstrap** — interactive behaviors initialize automatically
+
+---
+
+## Compatibility
+
+- Angular >= 15.0.0
+- Built with Ivy partial compilation (compatible with Angular 15–19+)
+- `typesVersions` included for `moduleResolution: node` compatibility
+
+---
+
+## Available Components (50)
+
+All components are available as sub-path imports:
+
+```ts
+import { UX4GButtonModule } from 'ux4g-components-angular/button';
+import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
+import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
+// ... etc.
+```
+
+Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
+
+---
 
 ## Related Packages