@raintonic/formaui 0.3.1 → 0.9.0

package/llms-full.txt

@@ -56,8 +56,8 @@ A flexible alert component for displaying informational messages, warnings, erro
 | Name | Type | Default | Required |
 |------|------|---------|----------|
 | variant | FuiAlertVariant | 'info' | no |
-| description | string | null | null | no |
-| icon | string | null | null | no |
+| description | string \| null | null | no |
+| icon | string \| null | null | no |
 | title | string | - | yes |
 
 #### Outputs
@@ -70,7 +70,7 @@ A flexible alert component for displaying informational messages, warnings, erro
 
 ## autocomplete
 
-An autocomplete component designed to work seamlessly with fui-form-field. Similar to Angular Material's mat-autocomplete integration with mat-form-field. Provides full Reactive Forms support with validation, filtering, and optional add/refresh actions.
+A typeahead input with a filterable dropdown of options. Designed to work inside `fui-form-field` with full Reactive Forms support, keyboard navigation, and built-in accessibility announcements.
 
 - **Import**: `import { FuiAutocompleteComponent } from 'formaui/components/autocomplete'`
 - **Selector**: `fui-autocomplete`
@@ -79,27 +79,58 @@ An autocomplete component designed to work seamlessly with fui-form-field. Simil
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| addButtonLabel | string | undefined | undefined | no |
-| refreshButtonLabel | string | undefined | undefined | no |
-| noOptionsText | string | undefined | undefined | no |
-| searchPlaceholder | string | undefined | undefined | no |
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
 
 #### Outputs
 
 | Name | Type |
 |------|------|
-| valueChange | unknown |
-| selectionChange | FuiAutocompleteChange |
+| valueChange | T \| T[] \| null |
 | openedChange | boolean |
 | searchChange | string |
-| addNew | void |
-| refresh | void |
+
+### Usage
+
+```html
+<!-- Basic autocomplete inside form-field -->
+<fui-form-field>
+  <fui-label>Country</fui-label>
+  <fui-autocomplete placeholder="Search countries..." [formControl]="countryControl">
+    @for (country of countries(); track country.code) {
+    <fui-option [value]="country.code">{{ country.name }}</fui-option>
+    }
+  </fui-autocomplete>
+  <fui-error>Country is required</fui-error>
+</fui-form-field>
+
+<!-- Panel actions slot for custom action buttons -->
+<fui-form-field>
+  <fui-label>Category</fui-label>
+  <fui-autocomplete [formControl]="categoryControl">
+    @for (c of categories(); track c.id) {
+    <fui-option [value]="c.id">{{ c.name }}</fui-option>
+    }
+    <button fuiButton fuiAutocompletePanelActions (click)="openCreateCategoryDialog()">+ Add new</button>
+  </fui-autocomplete>
+</fui-form-field>
+```
+
+### Notes
+
+- **Accessibility:** Live-region announcements for option navigation and selection. `aria-activedescendant` tracks the highlighted option, `aria-describedby` links to hint and error content from `fui-form-field`.
+- **Integration:** Must be placed inside `fui-form-field` for label, error, and hint slots. Implements `FuiFormFieldControl` and provides `FUI_FORM_FIELD_CONTROL`. Options are projected `fui-option` children from `formaui/components/select`.
+- **Keyboard:** Arrow Up/Down to move through filtered options, Home/End for first/last, PageUp/PageDown to jump 10 at a time, Enter to select, Escape or Tab to close.
+- **Filtering:** Options are filtered client-side by their label text against the in-panel search field. For async data, update the `fui-option` list reactively on `(searchChange)` and keep the current value in sync externally.
+- **Panel actions:** Project `[fuiAutocompletePanelActions]` content to add custom buttons at the bottom of the dropdown panel.
+- Use `compareWith` input for custom object comparison.
+- Emits `selectionChange: FuiAutocompleteChange`, `valueChange: T | T[] | null`, `openedChange: boolean`, `searchChange: string`.
 
 ---
 
 ## avatar
 
+Displays a user avatar with initials-only fallback (no image tag). Shows computed initials from fullName with a tooltip on hover.
+
 - **Import**: `import { FuiAvatarComponent } from 'formaui/components/avatar'`
 - **Selector**: `fui-avatar`
 
@@ -107,22 +138,17 @@ An autocomplete component designed to work seamlessly with fui-form-field. Simil
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| size | FuiAvatarSize | number | 'md' | no |
-| shape | 'circle' | 'rounded' | 'square' | 'circle' | no |
-| src | string | null | null | no |
-| avatarUrl | string | null | null | no |
-| srcSet | string | null | null | no |
-| sizesAttr | string | null | null | no |
-| name | string | null | null | no |
-| surname | string | null | null | no |
-| fullName | string | null | null | no |
-| alt | string | null | null | no |
-| identityKey | string | null | null | no |
+| size | FuiAvatarSize \| number | 'md' | no |
+| initials | string \| undefined | - | no |
+| alt | string \| null | null | no |
+| fullName | string | - | yes |
 
 ---
 
 ## badge
 
+Displays a small label badge with optional icon and color variants. Supports custom colors with automatic text contrast calculation.
+
 - **Import**: `import { FuiBadgeComponent } from 'formaui/components/badge'`
 - **Selector**: `fui-badge`
 
@@ -130,36 +156,19 @@ An autocomplete component designed to work seamlessly with fui-form-field. Simil
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| icon | string | null | null | no |
-| customColor | FuiBadgeCustomColor | null | null | no |
+| icon | string \| null | null | no |
+| customColor | FuiBadgeCustomColor \| null | null | no |
 | size | FuiBadgeSize | 'md' | no |
 | variant | FuiBadgeVariant | 'primary' | no |
-| ariaLabel | string | null | null | no |
+| ariaLabel | string \| null | null | no |
 | label | string | - | yes |
 
 ---
 
-## big-menu
-
-- **Import**: `import { FuiBigMenuComponent } from 'formaui/components/big-menu'`
-- **Selector**: `fui-big-menu`
-
-#### Inputs
-
-| Name | Type | Default | Required |
-|------|------|---------|----------|
-| menu | BigMenuItem[] | - | yes |
-
-#### Outputs
-
-| Name | Type |
-|------|------|
-| itemMenuClick | { item: BigMenuChild; event: MouseEvent } |
-
----
-
 ## breadcrumb
 
+A navigation trail that shows the user's location within a hierarchy. Compose `fui-breadcrumb` with one or more `fui-breadcrumb-item` children; each item can be a router link, and the last item is rendered as the current page.
+
 - **Import**: `import { FuiBreadcrumbComponent } from 'formaui/components/breadcrumb'`
 - **Selector**: `fui-breadcrumb`
 
@@ -167,7 +176,33 @@ An autocomplete component designed to work seamlessly with fui-form-field. Simil
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| aria-label | string | undefined | undefined | no |
+| aria-label | string \| undefined | undefined | no |
+
+### Usage
+
+```html
+<!-- Basic breadcrumb with router links -->
+<fui-breadcrumb aria-label="Breadcrumb">
+  <fui-breadcrumb-item [routerLink]="['/']">Home</fui-breadcrumb-item>
+  <fui-breadcrumb-item [routerLink]="['/products']">Products</fui-breadcrumb-item>
+  <fui-breadcrumb-item>Laptop</fui-breadcrumb-item>
+</fui-breadcrumb>
+
+<!-- Custom separator and a disabled item -->
+<fui-breadcrumb separator="›">
+  <fui-breadcrumb-item [routerLink]="['/']">Home</fui-breadcrumb-item>
+  <fui-breadcrumb-item [routerLink]="['/settings']" disabled>Settings</fui-breadcrumb-item>
+  <fui-breadcrumb-item>Profile</fui-breadcrumb-item>
+</fui-breadcrumb>
+```
+
+### Notes
+
+- **Accessibility:** The last item gets `aria-current="page"` automatically and is rendered as plain text rather than a link. Separators are decorative (`aria-hidden="true"`). Provide `aria-label` on the group for context; the default `Breadcrumb` label text comes from `FuiBreadcrumbIntl`.
+- **Routing:** `routerLink` accepts a string or a commands array (`string | unknown[]`). An item renders as a link only when `routerLink` is set and it is neither the last item nor `disabled`; otherwise it renders as text.
+- **Separator:** Set `separator` on `fui-breadcrumb` (default `/`); the value is propagated to every item and shown between entries.
+- **Composition:** The parent tracks its `fui-breadcrumb-item` content children and assigns last-item and separator state to each one automatically — order in the template defines the trail.
+- **i18n:** Override `FuiBreadcrumbIntl` to localize the root `aria-label`; intl changes trigger re-render.
 
 ### Sub-components
 
@@ -179,14 +214,14 @@ An autocomplete component designed to work seamlessly with fui-form-field. Simil
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| routerLink | string | unknown[] | null | null | no |
+| routerLink | string \| unknown[] \| null | null | no |
 | disabled | boolean | false | no |
 
 ---
 
 ## button
 
-A versatile button directive that can be applied to both `<button>` and `<a>` elements. Follows Carbon Design System patterns with full accessibility support.
+A versatile button directive for triggering user actions. Supports multiple visual variants, sizes, loading states, and icon-only mode. Works on both `<button>` and `<a>` elements.
 
 - **Import**: `import { FuiButtonDirective } from 'formaui/components/button'`
 - **Selector**: `button[fuiButton], a[fuiButton]`
@@ -201,9 +236,46 @@ A versatile button directive that can be applied to both `<button>` and `<a>` el
 | fullWidth | boolean | false | no |
 | loading | boolean | false | no |
 | iconOnly | boolean | false | no |
-| aria-label | string | null | null | no |
+| aria-label | string \| null | null | no |
 | type | ButtonType | 'button' | no |
 
+### Usage
+
+```html
+<!-- Primary button -->
+<button fuiButton>Click me</button>
+
+<!-- Button with variant and size -->
+<button fuiButton variant="secondary" size="lg">Large Secondary</button>
+
+<!-- Destructive button for destructive actions -->
+<button fuiButton variant="destructive">Delete</button>
+
+<!-- Tertiary violet accent button -->
+<button fuiButton variant="tertiary-violet">Learn more</button>
+
+<!-- Loading state -->
+<button fuiButton [loading]="isLoading">Save</button>
+
+<!-- Icon-only button -->
+<button fuiButton variant="tertiary" iconOnly aria-label="Settings">
+  <fui-icon name="settings" />
+</button>
+
+<!-- Link button -->
+<a fuiButton variant="link" href="/dashboard">Go to Dashboard</a>
+
+<!-- Full-width button -->
+<button fuiButton fullWidth>Full Width Action</button>
+```
+
+### Notes
+
+- Use `variant="destructive"` only for destructive actions (delete, remove, etc.)
+- Always provide `aria-label` on icon-only buttons for accessibility
+- The `loading` state automatically disables the button and shows a spinner
+- On `<a>` elements, the `disabled` state removes the `href` attribute
+
 ---
 
 ## button-group
@@ -217,13 +289,13 @@ A container component that groups multiple buttons together, creating a unified
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| ariaLabel | string | undefined | undefined | no |
+| ariaLabel | string \| undefined | undefined | no |
 
 ---
 
 ## card
 
-A flexible container component following Carbon Design System patterns. Provides a structured layout with optional header, content, and actions sections.
+A container for grouping related content with an optional header and actions slot. Supports elevated, outlined, and flat variants plus an optional clickable state with hover lift and keyboard activation.
 
 - **Import**: `import { FuiCardComponent } from 'formaui/components/card'`
 - **Selector**: `fui-card`
@@ -235,6 +307,45 @@ A flexible container component following Carbon Design System patterns. Provides
 | variant | FuiCardVariant | 'outlined' | no |
 | padding | FuiCardPadding | 'lg' | no |
 
+### Usage
+
+```html
+<!-- Basic card -->
+<fui-card>
+  <p>Plain content in a card.</p>
+</fui-card>
+
+<!-- Card with header, content, and action buttons -->
+<fui-card variant="outlined">
+  <fui-card-header title="Project status" subtitle="Updated 2 min ago">
+    <button fuiButton variant="tertiary" size="sm" iconOnly aria-label="More">
+      <fui-icon name="overflow-menu-vertical" />
+    </button>
+  </fui-card-header>
+
+  <p>Main card body — put anything here.</p>
+
+  <fui-card-actions align="end">
+    <button fuiButton variant="secondary">Cancel</button>
+    <button fuiButton>Save</button>
+  </fui-card-actions>
+</fui-card>
+
+<!-- Elevated and clickable -->
+<fui-card variant="elevated" [clickable]="true" (click)="openDetails()">
+  <fui-card-header title="Open details" />
+  <p>The whole card is a button.</p>
+</fui-card>
+```
+
+### Notes
+
+- **Accessibility:** When `[clickable]="true"`, the card gets `role="button"`, is focusable (`tabindex="0"`), and activates on Enter/Space. Otherwise it renders as `role="region"`. If an `fui-card-header` with a title is projected, its id is wired to the card's `aria-labelledby` automatically.
+- **Integration:** Composition-based — project `fui-card-header` and/or `fui-card-actions` alongside free-form content. Only one of each is supported per card.
+- **Variants:** `elevated` (shadow), `outlined` (border — default), `flat` (no border/shadow). Padding options: `none | sm | md | lg | xl` (default `lg`).
+- **Theming:** hover/lift animation, border, and shadow all use `--fui-*` CSS custom properties from the theme — override them at the host to restyle without changing the template.
+- `disabled` suppresses the click handler, removes focus, and greys out the card (click and keyboard events are swallowed).
+
 ### Sub-components
 
 #### FuiCardActionsComponent
@@ -245,7 +356,7 @@ A flexible container component following Carbon Design System patterns. Provides
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| align | 'start' | 'center' | 'end' | 'end' | no |
+| align | 'start' \| 'center' \| 'end' | 'end' | no |
 
 #### FuiCardHeaderComponent
 
@@ -262,7 +373,7 @@ A flexible container component following Carbon Design System patterns. Provides
 
 ## checkbox
 
-A checkbox component with full Angular Reactive Forms support. Compatible with Angular Material's mat-checkbox interface.
+A boolean input with checked, unchecked, and indeterminate states. Full Reactive Forms support via `ControlValueAccessor`, compatible with the `mat-checkbox` API surface.
 
 - **Import**: `import { FuiCheckboxComponent } from 'formaui/components/checkbox'`
 - **Selector**: `fui-checkbox`
@@ -277,12 +388,12 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 | indeterminate | boolean | false | no |
 | required | boolean | false | no |
 | labelPosition | FuiCheckboxLabelPosition | 'after' | no |
-| name | string | null | null | no |
-| aria-label | string | null | null | no |
-| aria-labelledby | string | null | null | no |
-| aria-describedby | string | null | null | no |
+| name | string \| null | null | no |
+| aria-label | string \| null | null | no |
+| aria-labelledby | string \| null | null | no |
+| aria-describedby | string \| null | null | no |
 | disableRipple | boolean | false | no |
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
 
 #### Outputs
 
@@ -291,10 +402,96 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 | change | FuiCheckboxChange |
 | indeterminateChange | boolean |
 
+### Usage
+
+```html
+<!-- Basic checkbox with projected label -->
+<fui-checkbox>Accept terms and conditions</fui-checkbox>
+
+<!-- Two-way binding with ngModel -->
+<fui-checkbox [(ngModel)]="subscribed">Subscribe to newsletter</fui-checkbox>
+
+<!-- Reactive forms -->
+<fui-checkbox formControlName="acceptTerms">
+  I accept the <a href="/terms">terms</a>
+</fui-checkbox>
+
+<!-- Indeterminate (e.g. "select all" with partial selection) -->
+<fui-checkbox
+  [checked]="allSelected()"
+  [indeterminate]="someSelected() && !allSelected()"
+  (change)="toggleAll($event.checked)">
+  Select all
+</fui-checkbox>
+
+<!-- Label position and disabled -->
+<fui-checkbox labelPosition="before" disabled>Disabled option</fui-checkbox>
+```
+
+### Notes
+
+- **Accessibility:** Renders a native `<input type="checkbox">` under the hood, so keyboard (Space to toggle) and screen-reader support come for free. `aria-invalid`, `aria-required`, `aria-label`, `aria-labelledby`, and `aria-describedby` are honored.
+- **Integration:** Use standalone or inside a form. Does **not** need `fui-form-field` — the checkbox is self-labeling via projected content.
+- **Indeterminate vs checked:** `indeterminate` is a visual third state — it does not change the form value. Toggling the checkbox clears `indeterminate` and emits a normal `change` event.
+- **Readonly vs disabled:** `readonly` keeps the checkbox focusable and announced but blocks user changes. `disabled` removes it from the tab order and greys it out.
+- Emits `change: FuiCheckboxChange` (`{ source, checked }`) and `indeterminateChange: boolean`.
+
+---
+
+## chip
+
+A compact element for representing tags, filters, or selections, with optional leading icon. Chips can be made selectable (toggle) and/or removable, and come in several semantic color variants and two sizes.
+
+- **Import**: `import { FuiChipComponent } from 'formaui/components/chip'`
+- **Selector**: `fui-chip`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| variant | FuiChipVariant | 'primary' | no |
+| size | FuiChipSize | 'md' | no |
+| icon | string \| null | null | no |
+| disabled | boolean | false | no |
+| label | string | - | yes |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| removed | FuiChipRemoveEvent |
+| selectedChange | boolean |
+
+### Usage
+
+```html
+<!-- Basic chip -->
+<fui-chip label="Default" />
+
+<!-- With variant, size, and leading icon -->
+<fui-chip label="Active" variant="success" size="sm" icon="check" />
+
+<!-- Selectable (toggles on click/Enter/Space) -->
+<fui-chip label="Filter" [selectable]="true" [selected]="isActive" (selectedChange)="isActive = $event" />
+
+<!-- Removable -->
+<fui-chip label="Tag" [removable]="true" (removed)="onRemove($event)" />
+```
+
+### Notes
+
+- **Accessibility:** When `selectable`, the host gets `role="option"` with `aria-selected`/`aria-pressed` reflecting the toggle state. The host is focusable (`tabindex="0"`) when `selectable` or `removable`. The remove button carries an `aria-label` (default `Remove {label}`) and the decorative icons are `aria-hidden`.
+- **Inputs:** `label` is required. `variant` is one of `primary | secondary | success | warning | danger | info` (invalid values fall back to `primary`); `size` is `sm | md` (default `md`); `icon` sets an optional leading `fui-icon` name.
+- **Selection:** Clicking, Enter, or Space toggles a selectable chip and emits `selectedChange: boolean`. `selected` seeds the internal state. A `disabled` chip ignores all interaction.
+- **Removal:** When `removable` and not `disabled`, a remove button is shown; activating it emits `removed: FuiChipRemoveEvent` (`{ chip }`) and stops click propagation so it doesn't also toggle selection.
+- **i18n:** The remove button label comes from `FuiChipIntl.removeAriaLabel(label)`; override it to localize.
+
 ---
 
 ## data-table
 
+A feature-rich data grid for tabular data: column configuration, sticky columns, sorting, filtering, row selection, row highlighting, and badge-based label rendering. Generic over the row type `T`.
+
 - **Import**: `import { FuiAdvancedDataTableComponent } from 'formaui/components/data-table'`
 - **Selector**: `fui-advanced-data-table`
 
@@ -303,9 +500,10 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 | Name | Type | Default | Required |
 |------|------|---------|----------|
 | data | T[] | [] | no |
-| tableAriaLabel | string | undefined | undefined | no |
-| emptyMessage | string | undefined | undefined | no |
-| sort | { field: string; direction: 'ASC' | 'DESC' } | null | null | no |
+| density | AdvancedDataTableDensity | 'standard' | no |
+| tableAriaLabel | string \| undefined | undefined | no |
+| emptyMessage | string \| undefined | undefined | no |
+| sort | { field: string; direction: 'ASC' \| 'DESC' } \| null | null | no |
 | filters | ColumnFilter[] | [] | no |
 | config | AdvancedDataTableConfig | - | yes |
 
@@ -313,14 +511,64 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 
 | Name | Type |
 |------|------|
-| sortChange | { field: string; direction: 'ASC' | 'DESC' } | null |
+| sortChange | { field: string; direction: 'ASC' \| 'DESC' } \| null |
 | filtersChange | ColumnFilter[] |
 | rowDblClick | T |
 
+### Usage
+
+```html
+<!-- Minimal table -->
+<fui-advanced-data-table [config]="tableConfig" [data]="rows" />
+```
+
+```typescript
+tableConfig: AdvancedDataTableConfig = {
+  headerSticky: true,
+  areRowsSelectable: false,
+  headers: [
+    { field: 'id',    label: 'ID',    type: 'number', hasSort: true },
+    { field: 'name',  label: 'Name',  type: 'string', hasSort: true, hasFilter: true },
+    { field: 'email', label: 'Email', type: 'string', hasFilter: true },
+  ],
+};
+rows: User[] = [ /* ... */ ];
+```
+
+```html
+<!-- Full: sort, filters, double-click handler, custom trackBy -->
+<fui-advanced-data-table
+  [config]="tableConfig"
+  [data]="rows()"
+  [sort]="currentSort()"
+  [filters]="activeFilters()"
+  [trackBy]="trackById"
+  [enableRowHighlight]="true"
+  (sortChange)="currentSort.set($event)"
+  (filtersChange)="activeFilters.set($event)"
+  (rowDblClick)="openDetails($event)" />
+```
+
+```typescript
+// Track-by for performance with stable-keyed rows
+trackById = (_: number, row: User) => row.id;
+```
+
+### Notes
+
+- **Accessibility:** Renders a native `<table>` with `aria-label` from `[tableAriaLabel]` (default: `'Data table'`). Sort headers are button elements with ARIA sort state. A live region announces sort/filter changes.
+- **Integration:** Pass `config: AdvancedDataTableConfig` (required) and `data: T[]`. Column types drive cell rendering — `'label'` columns render a `fui-badge` using the per-column `labels` config.
+- **Sticky columns:** `stickyColumnStart: true` on consecutive leading columns pins them at the start; `stickyColumnEnd: true` on consecutive trailing columns pins them at the end. The first non-sticky column breaks the streak.
+- **Sort/filter:** State is fully controlled — the component emits `sortChange` and `filtersChange` but does not mutate `data`. Apply sort and filter server-side or client-side in the parent.
+- **Row selection:** Enable via `config.areRowsSelectable: true`. Selected indices are tracked internally; use `enableRowHighlight` separately for click-to-highlight without selection checkboxes.
+- Performance: pass a stable `[trackBy]` for large datasets — the default tracks by index, which invalidates rows when the array is reordered.
+
 ---
 
 ## date-picker
 
+A date input with calendar overlay. Supports single-date or date-range selection, min/max constraints, custom date filters, and localised formatting. Integrates with `fui-form-field` and Reactive Forms (including built-in `Validator` for min/max/filter errors).
+
 - **Import**: `import { FuiDatePickerComponent } from 'formaui/components/date-picker'`
 - **Selector**: `fui-date-picker`
 
@@ -328,11 +576,12 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| min | Date | null | null | no |
-| max | Date | null | null | no |
-| dateFilter | DateFilterFn | null | null | no |
-| startAt | Date | null | null | no |
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| min | Date \| null | null | no |
+| max | Date \| null | null | no |
+| dateFilter | DateFilterFn \| null | null | no |
+| startAt | Date \| null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
+| presets | DatePickerPreset[] | [] | no |
 
 #### Outputs
 
@@ -342,10 +591,81 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 | dateChange | DatePickerModelValue |
 | openedChange | boolean |
 
+### Usage
+
+```html
+<!-- Single date inside form-field -->
+<fui-form-field>
+  <fui-label>Birth date</fui-label>
+  <fui-date-picker placeholder="DD/MM/YYYY" [formControl]="birthDateControl" />
+  <fui-error>Birth date is required</fui-error>
+</fui-form-field>
+
+<!-- Min/max and custom filter (disable weekends) -->
+<fui-form-field>
+  <fui-label>Appointment</fui-label>
+  <fui-date-picker
+    [formControl]="appointmentControl"
+    [min]="today"
+    [max]="maxBookingDate"
+    [dateFilter]="isWeekday" />
+</fui-form-field>
+
+<!-- Range mode -->
+<fui-form-field>
+  <fui-label>Stay period</fui-label>
+  <fui-date-picker [range]="true" [formControl]="stayControl" />
+</fui-form-field>
+```
+
+```typescript
+// In the component class
+readonly today = new Date();
+readonly isWeekday = (d: Date): boolean => d.getDay() !== 0 && d.getDay() !== 6;
+```
+
+### Notes
+
+- **Accessibility:** The calendar panel is keyboard-navigable (Arrow keys across days, PageUp/Down across months, Home/End), Escape closes the panel, and Enter selects. The input supports typing with an applied input mask based on `format`.
+- **Integration:** Use inside `fui-form-field`. Implements `FuiFormFieldControl` and `Validator` — validation errors (`dateMin`, `dateMax`, `dateFilter`) are attached to the form control automatically and picked up by `ErrorStateMatcher`.
+- **Value shape:** single mode emits `Date | null`; range mode emits `{ start: Date | null; end: Date | null } | null`. Range auto-swaps if the user picks the end date before the start.
+- **Formatting:** `format` defaults to `'DD/MM/YYYY'`. The input mask matches the format; the panel is rendered by the internal `FuiCalendarComponent`. Change `firstDayOfWeek` to shift the week start (0 = Sunday, 1 = Monday — the default).
+- Uses the overlay CDK for positioning; the panel flips above the input if there is no room below.
+- Emits `dateChange`, `valueChange`, `openedChange`.
+
+### Sub-components
+
+#### FuiCalendarComponent
+
+- **Selector**: `fui-calendar`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| selected | Date \| null | null | no |
+| rangeStart | Date \| null | null | no |
+| rangeEnd | Date \| null | null | no |
+| min | Date \| null | null | no |
+| max | Date \| null | null | no |
+| dateFilter | DateFilterFn \| null | null | no |
+| startAt | Date \| null | null | no |
+| hoveredDate | Date \| null | null | no |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| dateSelected | Date |
+| dateHovered | Date \| null |
+| monthChanged | Date |
+
 ---
 
 ## divider
 
+A thin separator line for splitting content, either horizontally or vertically. Optional projected content renders as a centered (or aligned) label with the line drawn on either side.
+
 - **Import**: `import { FuiDividerComponent } from 'formaui/components/divider'`
 - **Selector**: `fui-divider`
 
@@ -356,10 +676,35 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 | orientation | FuiDividerOrientation | 'horizontal' | no |
 | textAlign | FuiDividerTextAlign | 'center' | no |
 
+### Usage
+
+```html
+<!-- Horizontal divider -->
+<fui-divider />
+
+<!-- Vertical divider -->
+<fui-divider orientation="vertical" />
+
+<!-- Inset (indented) divider -->
+<fui-divider [inset]="true" />
+
+<!-- With text label -->
+<fui-divider textAlign="start">OR</fui-divider>
+```
+
+### Notes
+
+- **Accessibility:** Always renders with `role="separator"` and `aria-orientation` set to the current orientation.
+- **Orientation:** `orientation` is `horizontal` (default) or `vertical`. The text label is only rendered for horizontal dividers that have projected content.
+- **Text label:** Project any content to add a label; `textAlign` (`start | center | end`, default `center`) positions it. Content presence is detected after render, so an empty divider stays a plain line.
+- **Inset:** `[inset]="true"` adds indentation, useful for dividers inside lists or padded containers.
+
 ---
 
 ## drawer
 
+A panel that slides in from an edge of the screen to present complementary content or actions. Supports left/right/top/bottom positions, overlay or push modes, an optional backdrop, and a built-in header with title and close button.
+
 - **Import**: `import { FuiDrawerComponent } from 'formaui/components/drawer'`
 - **Selector**: `fui-drawer`
 
@@ -374,8 +719,8 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 | closeOnBackdropClick | boolean | true | no |
 | closeOnEsc | boolean | true | no |
 | showCloseButton | boolean | true | no |
-| ariaLabel | string | null | null | no |
-| ariaLabelledBy | string | null | null | no |
+| ariaLabel | string \| null | null | no |
+| ariaLabelledBy | string \| null | null | no |
 
 #### Outputs
 
@@ -384,10 +729,224 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 | openedChange | boolean |
 | closed | void |
 
+### Usage
+
+```html
+<!-- Backdrop-driven overlay drawer with two-way open binding -->
+<fui-drawer [(opened)]="isOpen" position="right" mode="overlay" size="md" title="Filters" (closed)="onClosed()">
+  <p>Drawer body content goes here.</p>
+
+  <div drawerFooter>
+    <button fuiButton variant="secondary" (click)="isOpen = false">Cancel</button>
+    <button fuiButton (click)="apply()">Apply</button>
+  </div>
+</fui-drawer>
+
+<!-- Imperative control via template ref -->
+<fui-drawer #drawer position="left" [hasBackdrop]="false" ariaLabel="Navigation">
+  <nav>...</nav>
+</fui-drawer>
+<button fuiButton (click)="drawer.toggle()">Toggle</button>
+```
+
+### Notes
+
+- **Accessibility:** Renders as `role="dialog"` and sets `aria-modal="true"` while open. The visible `title` is exposed as `aria-label` unless `ariaLabel`/`ariaLabelledBy` are provided. Implements a focus trap (Tab/Shift+Tab cycle within the panel), focuses the first tabbable element on open, and restores focus to the previously focused element on close.
+- **Open state:** `opened` is an input with matching `openedChange` output (two-way `[(opened)]`). The component also exposes imperative `open()`, `close()`, and `toggle()` methods, and emits `closed` when dismissed.
+- **Content projection:** Default `<ng-content>` fills the body; project a footer via the `drawerFooter` attribute. The header (title + close button) renders automatically when `title` or `showCloseButton` is set.
+- **Dismissal:** `closeOnBackdropClick` (default `true`) closes on backdrop click and `closeOnEsc` (default `true`) closes on Escape. `hasBackdrop` toggles the backdrop element.
+- **Sizing:** `size` accepts named tokens `sm` (320px), `md` (480px, default), `lg` (640px), `full` (100%), or any custom CSS length string applied along the drawer's main axis.
+- **i18n:** The close button label comes from `FuiDrawerIntl.closeAriaLabel` ("Close drawer"), overridable via the injectable intl service.
+
+---
+
+## dropdown-menu
+
+A dropdown menu component that provides a list of options or actions. Designed to work with external triggers using the fuiDropdownMenuTrigger directive.
+
+- **Import**: `import { FuiDropdownMenuComponent } from 'formaui/components/dropdown-menu'`
+- **Selector**: `fui-dropdown-menu`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| position | FuiDropdownMenuPosition | 'bottom-start' | no |
+| size | FuiDropdownMenuSize | 'md' | no |
+| closeOnClickOutside | boolean | true | no |
+| disabled | boolean | false | no |
+| attachToBody | boolean | true | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| openChange | boolean |
+| itemSelected | Event |
+
+### Sub-components
+
+#### FuiDropdownMenuItemComponent
+
+- **Selector**: `fui-dropdown-menu-item`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| variant | DropdownMenuItemVariant | 'default' | no |
+| disabled | boolean | false | no |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| selected | Event |
+
+#### FuiDropdownMenuTriggerDirective
+
+- **Selector**: `[fuiDropdownMenuTrigger]`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| fuiDropdownMenuTriggerFor | FuiDropdownMenuComponent \| null | - | no |
+| menuTriggerData | unknown | - | no |
+
+---
+
+## dual-tier-navigation
+
+A two-tier sidebar navigation: a narrow vertical bar of top-level icon triggers, plus a flyout panel that reveals the selected item's nested submenu. Built from a single `MenuItem[]` data model and designed for app-level navigation with deep, expandable sub-trees.
+
+- **Import**: `import { FuiDualTierNavigationComponent } from 'formaui/components/dual-tier-navigation'`
+- **Selector**: `fui-dual-tier-navigation`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| items | MenuItem[] | [] | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| itemClick | MenuItem |
+
+### Usage
+
+```html
+<fui-dual-tier-navigation [items]="navItems" ariaLabel="Main navigation" (itemClick)="onItemClick($event)" />
+```
+
+```typescript
+import { MenuItem } from '@raintonic/formaui/core';
+
+navItems: MenuItem[] = [
+  {
+    label: 'Products',
+    icon: 'package',
+    items: [
+      { label: 'List', routerLink: '/products' },
+      {
+        label: 'Categories',
+        items: [{ label: 'Active', routerLink: '/categories/active' }],
+      },
+    ],
+  },
+  { label: 'Dashboard', icon: 'house', routerLink: '/dashboard' },
+  { label: 'Settings', icon: 'gear', command: () => openSettings() },
+];
+```
+
+### Notes
+
+- **Data-driven:** The whole structure is built from the `items: MenuItem[]` input — top-level entries become bar triggers and their `items` populate the flyout submenu. Items with `visible: false` are filtered out, and missing `id`s are auto-generated. The single public output is `itemClick`, which emits the activated `MenuItem`.
+- **Composition:** The package exports the trigger (`fui-dual-tier-nav-trigger`), submenu (`fui-dual-tier-nav-submenu`), submenu header (`fui-dual-tier-nav-submenu-header`), and submenu item (`fui-dual-tier-nav-submenu-item`). These are internal building blocks rendered by `fui-dual-tier-navigation` from the data model; the typical consumer only uses the top-level component.
+- **Accessibility:** Host is `role="navigation"` with a configurable `ariaLabel` (default "Dual tier navigation"). The bar and flyout use `role="menu"` / `role="menuitem"` semantics with `aria-haspopup`, `aria-expanded`, and `aria-controls` wiring between a trigger and its flyout.
+- **Keyboard navigation:** Triggers support Enter/Space/ArrowRight to open the flyout (or activate leaf items), ArrowUp/ArrowDown to move between triggers, Home/End to jump, and ArrowLeft/Escape to close. Inside the flyout, ArrowUp/ArrowDown/Home/End move between items, ArrowRight/Enter/Space expand a parent, and ArrowLeft collapses or closes the panel. Focus moves into the flyout on open and returns to the trigger on close.
+- **Item behavior:** Triggers and submenu items render as router links (`routerLink`, with `queryParams`/`fragment`/`target`), plain buttons that fire `command`, or expandable parents based on the `MenuItem` shape. `disabled` items are non-interactive, and submenu items reflect the active route via `routerLinkActive`. Nested submenus animate open/closed and can start expanded via `expanded: true`.
+
+### Sub-components
+
+#### DualTierNavSubmenuHeaderComponent
+
+- **Selector**: `fui-dual-tier-nav-submenu-header`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| title | string | - | yes |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| close | void |
+
+#### DualTierNavSubmenuItemComponent
+
+- **Selector**: `fui-dual-tier-nav-submenu-item`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| item | MenuItem | - | yes |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| clickItem | MenuItem |
+| toggleExpand | { item: MenuItem; sourceEl?: HTMLElement } |
+| keydown | KeyboardEvent |
+
+#### DualTierNavSubmenuComponent
+
+- **Selector**: `fui-dual-tier-nav-submenu`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| items | MenuItem[] | [] | no |
+| title | string | - | yes |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| itemClick | MenuItem |
+| closePanel | void |
+
+#### DualTierNavTriggerComponent
+
+- **Selector**: `fui-dual-tier-nav-trigger`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| item | MenuItem | - | yes |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| itemClick | MenuItem |
+| toggle | Event |
+| keydown | KeyboardEvent |
+
 ---
 
 ## empty-state
 
+A placeholder shown when a region has no content yet, such as an empty list, no search results, or a first-run screen. Displays an optional icon, title, and description, with projected slots for extra content and actions.
+
 - **Import**: `import { FuiEmptyStateComponent } from 'formaui/components/empty-state'`
 - **Selector**: `fui-empty-state`
 
@@ -395,10 +954,31 @@ A checkbox component with full Angular Reactive Forms support. Compatible with A
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| icon | string | null | null | no |
-| title | string | null | null | no |
-| description | string | null | null | no |
-| size | 'sm' | 'md' | 'lg' | 'md' | no |
+| icon | string \| null | null | no |
+| title | string \| null | null | no |
+| description | string \| null | null | no |
+| size | 'sm' \| 'md' \| 'lg' | 'md' | no |
+
+### Usage
+
+```html
+<!-- Icon, title, and description via inputs -->
+<fui-empty-state
+  icon="inbox"
+  title="No messages"
+  description="When you receive messages they will show up here."
+  size="md"
+>
+  <button fuiButton (click)="refresh()">Refresh</button>
+</fui-empty-state>
+```
+
+### Notes
+
+- **Accessibility:** The host has `role="status"`, so updates are announced politely by screen readers.
+- **Inputs:** `icon` (fui-icon name), `title`, and `description` are all optional (`null` by default) — render only the parts you need. `size` is `sm | md | lg` (default `md`).
+- **Icon sizing:** The icon size is derived from `size` — `sm` uses an `md` icon, while `md`/`lg` use an `lg` icon.
+- **Content projection:** Projected content (e.g. action buttons) is supported alongside the icon/title/description.
 
 ---
 
@@ -430,7 +1010,7 @@ A file upload component with drag-and-drop support, file previews, and validatio
 
 ## form-field
 
-A form field wrapper component that provides consistent styling and behavior for form controls. Follows Angular Material patterns with Carbon Design System styling.
+A wrapper component that provides consistent layout, labeling, validation, and accessibility for form controls. Works with any component implementing the `FuiFormFieldControl` interface (select, input, date-picker, etc.).
 
 - **Import**: `import { FuiFormFieldComponent } from 'formaui/components/form-field'`
 - **Selector**: `fui-form-field`
@@ -441,6 +1021,33 @@ A form field wrapper component that provides consistent styling and behavior for
 |------|------|---------|----------|
 | appearance | FormFieldAppearance | 'outline' | no |
 
+### Usage
+
+```html
+<!-- Basic form field with input -->
+<fui-form-field>
+  <fui-label>Email</fui-label>
+  <input fuiInput type="email" [formControl]="emailControl" />
+  <fui-hint>We'll never share your email</fui-hint>
+  <fui-error>Please enter a valid email</fui-error>
+</fui-form-field>
+
+<!-- Form field with prefix and suffix -->
+<fui-form-field>
+  <fui-label>Price</fui-label>
+  <span fuiPrefix>$</span>
+  <input fuiInput type="number" [formControl]="priceControl" />
+  <span fuiSuffix>.00</span>
+</fui-form-field>
+```
+
+### Notes
+
+- `fui-error` is shown only when the form control is in an error state
+- `fui-hint` is hidden when an error is displayed
+- Use `fuiPrefix` and `fuiSuffix` directives on any element for adornments
+- The form field automatically associates the label with the control for accessibility
+
 ### Sub-components
 
 #### FuiErrorComponent
@@ -500,7 +1107,7 @@ A wrapper component for Phosphor Icons with consistent sizing and styling. Provi
 
 ## input
 
-An input directive that integrates seamlessly with fui-form-field and Angular Forms. Follows Angular Material patterns with Carbon Design System styling.
+A directive that turns a native `<input>` or `<textarea>` into a FormaUI form control. Integrates with `fui-form-field` for label/hint/error UI and supports Reactive Forms and template-driven forms out of the box.
 
 - **Import**: `import { FuiInputDirective } from 'formaui/components/input'`
 - **Selector**: `input[fuiInput], textarea[fuiInput], select[fuiInput]`
@@ -510,21 +1117,61 @@ An input directive that integrates seamlessly with fui-form-field and Angular Fo
 | Name | Type | Default | Required |
 |------|------|---------|----------|
 | type | FuiInputType | 'text' | no |
-| maxlength | number | null | null | no |
-| minlength | number | null | null | no |
-| pattern | string | null | null | no |
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| maxlength | number \| null | null | no |
+| minlength | number \| null | null | no |
+| pattern | string \| null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
 
 #### Outputs
 
 | Name | Type |
 |------|------|
-| valueChange | string |
+| valueChange | string \| number \| null |
+
+### Usage
+
+```html
+<!-- Basic input inside form-field -->
+<fui-form-field>
+  <fui-label>Email</fui-label>
+  <input fuiInput type="email" [formControl]="emailControl" />
+  <fui-error>Please enter a valid email</fui-error>
+</fui-form-field>
+
+<!-- Textarea variant -->
+<fui-form-field>
+  <fui-label>Description</fui-label>
+  <textarea fuiInput rows="4" [formControl]="descControl"></textarea>
+  <fui-hint>Max 500 characters</fui-hint>
+</fui-form-field>
+
+<!-- Password with toggle button -->
+<fui-form-field>
+  <fui-label>Password</fui-label>
+  <input fuiInput [type]="showPassword() ? 'text' : 'password'" [formControl]="pwdControl" />
+  <button fuiSuffix fuiButton variant="tertiary" type="button" (click)="showPassword.set(!showPassword())">
+    <fui-icon [name]="showPassword() ? 'eye-slash' : 'eye'" />
+  </button>
+</fui-form-field>
+
+<!-- Standalone input with template-driven forms -->
+<input fuiInput type="search" [(ngModel)]="query" placeholder="Search..." />
+```
+
+### Notes
+
+- **Accessibility:** `aria-invalid`, `aria-required`, `aria-disabled`, and `aria-readonly` are set automatically from state. `aria-describedby` is wired by `fui-form-field` to link hint and error messages.
+- **Integration:** Designed to be wrapped by `fui-form-field`. Implements `FuiFormFieldControl<string>` and provides `FUI_FORM_FIELD_CONTROL`, so the form-field picks up focus, empty, disabled, and error state automatically.
+- **Supported types:** `text`, `email`, `password`, `number`, `tel`, `url`, `search`, `date`, `time`, `datetime-local`. The directive also accepts `textarea[fuiInput]` and `select[fuiInput]`.
+- **Error state:** driven by `ErrorStateMatcher` — the default matcher flags errors when the control is invalid and touched or the parent form is submitted. Provide a custom matcher via `[errorStateMatcher]`.
+- **Native constraints:** `maxlength`, `minlength`, and `pattern` inputs pass through to native attributes for built-in browser validation.
 
 ---
 
 ## list
 
+A vertical list container for displaying a collection of items. Supports plain (non-interactive) display, single- or multi-select listbox behaviour, optional row dividers, and full keyboard navigation. Items are projected as `fui-list-item` children.
+
 - **Import**: `import { FuiListComponent } from 'formaui/components/list'`
 - **Selector**: `fui-list`
 
@@ -540,6 +1187,38 @@ An input directive that integrates seamlessly with fui-form-field and Angular Fo
 |------|------|
 | selectionChange | FuiListSelectionChange |
 
+### Usage
+
+```html
+<!-- Plain list -->
+<fui-list>
+  <fui-list-item>Inbox</fui-list-item>
+  <fui-list-item>Drafts</fui-list-item>
+  <fui-list-item>Sent</fui-list-item>
+</fui-list>
+
+<!-- Single-select listbox with dividers -->
+<fui-list selectionMode="single" [dividers]="true" (selectionChange)="onChange($event)">
+  <fui-list-item [value]="'a'">Option A</fui-list-item>
+  <fui-list-item [value]="'b'">Option B</fui-list-item>
+  <fui-list-item [value]="'c'" [disabled]="true">Option C</fui-list-item>
+</fui-list>
+
+<!-- Multi-select -->
+<fui-list selectionMode="multi">
+  <fui-list-item [value]="1">One</fui-list-item>
+  <fui-list-item [value]="2">Two</fui-list-item>
+</fui-list>
+```
+
+### Notes
+
+- **Accessibility:** The container renders `role="listbox"` (with `aria-multiselectable` in `multi` mode) when `selectionMode` is not `none`, otherwise `role="list"`. Items render `role="option"` when selectable, otherwise `role="listitem"`, and expose `aria-selected`/`aria-disabled` accordingly.
+- **Keyboard:** Arrow Up/Down move focus across enabled items (wrapping), Home/End jump to first/last, and Enter/Space toggles selection. Disabled items are skipped.
+- **Selection:** Set `selectionMode` to `'none' | 'single' | 'multi'` (default `'none'`). `selectionChange` emits `{ source, value }` where `value` is the array of selected `value` inputs.
+- **Items:** Each `fui-list-item` takes a `value` (any type) and a `disabled` boolean input. Use `[interactive]="true"` on the list to make items focusable/hoverable without enabling selection.
+- **Theming:** `dividers` adds separators between items; interactive/selected/disabled states are styled via `fui-list--*` and `fui-list-item--*` classes driven by `--fui-*` custom properties.
+
 ### Sub-components
 
 #### FuiListItemComponent
@@ -555,63 +1234,6 @@ An input directive that integrates seamlessly with fui-form-field and Angular Fo
 
 ---
 
-## menu
-
-A dropdown menu component that provides a list of options or actions. Designed to work with external triggers using the fuiMenuTrigger directive.
-
-- **Import**: `import { FuiMenuComponent } from 'formaui/components/menu'`
-- **Selector**: `fui-menu`
-
-#### Inputs
-
-| Name | Type | Default | Required |
-|------|------|---------|----------|
-| position | FuiMenuPosition | 'bottom-start' | no |
-| size | FuiMenuSize | 'md' | no |
-| closeOnClickOutside | boolean | true | no |
-| closeOnEscape | boolean | true | no |
-| disabled | boolean | false | no |
-| attachToBody | boolean | true | no |
-
-#### Outputs
-
-| Name | Type |
-|------|------|
-| openChange | boolean |
-| itemSelected | Event |
-
-### Sub-components
-
-#### FuiMenuItemComponent
-
-- **Selector**: `fui-menu-item`
-
-##### Inputs
-
-| Name | Type | Default | Required |
-|------|------|---------|----------|
-| variant | MenuItemVariant | 'default' | no |
-| disabled | boolean | false | no |
-
-##### Outputs
-
-| Name | Type |
-|------|------|
-| selected | Event |
-
-#### FuiMenuTriggerDirective
-
-- **Selector**: `[fuiMenuTrigger]`
-
-##### Inputs
-
-| Name | Type | Default | Required |
-|------|------|---------|----------|
-| menuTriggerFor | FuiMenuComponent | null | - | no |
-| menuTriggerData | unknown | - | no |
-
----
-
 ## number-input
 
 A numeric input component with increment/decrement buttons, full Angular Reactive Forms support, and FormField integration.
@@ -623,20 +1245,20 @@ A numeric input component with increment/decrement buttons, full Angular Reactiv
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| min | number | null | null | no |
-| max | number | null | null | no |
-| precision | number | null | null | no |
+| min | number \| null | null | no |
+| max | number \| null | null | no |
+| precision | number \| null | null | no |
 | disabled | boolean | false | no |
 | readonly | boolean | false | no |
 | showButtons | boolean | true | no |
 | buttonLayout | NumberInputButtonLayout | 'horizontal' | no |
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
 
 #### Outputs
 
 | Name | Type |
 |------|------|
-| valueChange | number | null |
+| valueChange | number \| null |
 
 ---
 
@@ -664,7 +1286,7 @@ A pagination component that handles navigation through pages with: - Previous/Ne
 
 ## password-input
 
-A password input component with visibility toggle and optional strength meter. Integrates with fui-form-field and Angular Forms.
+A password input component with visibility toggle. Integrates with fui-form-field and Angular Forms.
 
 - **Import**: `import { FuiPasswordInputComponent } from 'formaui/components/password-input'`
 - **Selector**: `fui-password-input`
@@ -675,8 +1297,7 @@ A password input component with visibility toggle and optional strength meter. I
 |------|------|---------|----------|
 | disabled | boolean | false | no |
 | readonly | boolean | false | no |
-| showStrengthMeter | boolean | false | no |
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
 
 ---
 
@@ -736,13 +1357,15 @@ A progress bar component compatible with Angular Material's mat-progress-bar int
 | value | number | 0 | no |
 | bufferValue | number | 0 | no |
 | color | ProgressBarColor | 'primary' | no |
-| aria-label | string | null | null | no |
-| aria-labelledby | string | null | null | no |
+| aria-label | string \| null | null | no |
+| aria-labelledby | string \| null | null | no |
 
 ---
 
 ## radio
 
+Single-choice selection from a small set of options. Use `fui-radio-group` as the Reactive Forms control and `fui-radio-button` for each option.
+
 - **Import**: `import { FuiRadioButtonComponent } from 'formaui/components/radio'`
 - **Selector**: `fui-radio-button`
 
@@ -751,11 +1374,35 @@ A progress bar component compatible with Angular Material's mat-progress-bar int
 | Name | Type | Default | Required |
 |------|------|---------|----------|
 | disabled | boolean | false | no |
-| disableRipple | boolean | false | no |
-| aria-label | string | null | null | no |
-| aria-labelledby | string | null | null | no |
+| aria-label | string \| null | null | no |
+| aria-labelledby | string \| null | null | no |
 | value | unknown | - | yes |
 
+### Usage
+
+```html
+<!-- Vertical group with ngModel -->
+<fui-radio-group [(ngModel)]="plan" name="plan">
+  <fui-radio-button [value]="'free'">Free</fui-radio-button>
+  <fui-radio-button [value]="'pro'">Pro</fui-radio-button>
+  <fui-radio-button [value]="'enterprise'">Enterprise</fui-radio-button>
+</fui-radio-group>
+
+<!-- Reactive forms, horizontal layout, disabled option -->
+<fui-radio-group formControlName="shipping" orientation="horizontal" aria-label="Shipping method">
+  <fui-radio-button [value]="'standard'">Standard</fui-radio-button>
+  <fui-radio-button [value]="'express'">Express</fui-radio-button>
+  <fui-radio-button [value]="'overnight'" disabled>Overnight (unavailable)</fui-radio-button>
+</fui-radio-group>
+```
+
+### Notes
+
+- **Accessibility:** The group sets `role="radiogroup"` and provides keyboard navigation — Arrow Up/Left and Arrow Down/Right move selection between enabled radios and wrap around. Only the selected radio is in the tab order (roving tabindex), matching WAI-ARIA radio group semantics. Provide `aria-label` or `aria-labelledby` on the group for context.
+- **Integration:** `fui-radio-group` is the `ControlValueAccessor` — bind `formControl`, `formControlName`, or `ngModel` on the **group**, not on individual buttons. `name` is auto-generated if omitted and propagated to child radios.
+- **Value type:** `value` on each radio is typed `unknown` — use any primitive or object. Comparison is strict `===` by default.
+- Emits `change: FuiRadioChange` (`{ source, value }`) on the group.
+
 ### Sub-components
 
 #### FuiRadioGroupComponent
@@ -768,9 +1415,9 @@ A progress bar component compatible with Angular Material's mat-progress-bar int
 |------|------|---------|----------|
 | orientation | FuiRadioOrientation | 'vertical' | no |
 | disabled | boolean | false | no |
-| aria-label | string | null | null | no |
-| aria-labelledby | string | null | null | no |
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| aria-label | string \| null | null | no |
+| aria-labelledby | string \| null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
 
 ##### Outputs
 
@@ -782,7 +1429,7 @@ A progress bar component compatible with Angular Material's mat-progress-bar int
 
 ## select
 
-A select component designed to work seamlessly with fui-form-field. Similar to Angular Material's mat-select integration with mat-form-field. Provides full Reactive Forms support with validation and error handling.
+A dropdown select component for single or multiple selection. Designed to work inside `fui-form-field` with full Reactive Forms support, keyboard navigation, and type-ahead search.
 
 - **Import**: `import { FuiSelectComponent } from 'formaui/components/select'`
 - **Selector**: `fui-select`
@@ -791,7 +1438,7 @@ A select component designed to work seamlessly with fui-form-field. Similar to A
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
 
 #### Outputs
 
@@ -801,28 +1448,53 @@ A select component designed to work seamlessly with fui-form-field. Similar to A
 | selectionChange | FuiSelectChange |
 | openedChange | boolean |
 
+### Usage
+
+```html
+<!-- Basic select inside form-field -->
+<fui-form-field>
+  <fui-label>Country</fui-label>
+  <fui-select placeholder="Choose a country" [formControl]="countryControl">
+    <fui-option value="us">United States</fui-option>
+    <fui-option value="uk">United Kingdom</fui-option>
+    <fui-option value="de">Germany</fui-option>
+  </fui-select>
+  <fui-error>Country is required</fui-error>
+</fui-form-field>
+
+<!-- Multiple selection -->
+<fui-form-field>
+  <fui-label>Tags</fui-label>
+  <fui-select multiple [formControl]="tagsControl">
+    <fui-option value="angular">Angular</fui-option>
+    <fui-option value="react">React</fui-option>
+    <fui-option value="vue">Vue</fui-option>
+  </fui-select>
+</fui-form-field>
+```
+
+### Notes
+
+- Always wrap in `fui-form-field` for label, error, and hint support
+- Options are projected as `<fui-option>` child elements
+- Supports keyboard navigation: Arrow keys, Home/End, Enter/Space, Escape
+- Type-ahead search: start typing to jump to matching options
+- Use `compareWith` input for custom object comparison
+
 ### Sub-components
 
 #### FuiOptionComponent
 
 - **Selector**: `fui-option`
 
-##### Inputs
-
-| Name | Type | Default | Required |
-|------|------|---------|----------|
-| value | unknown | undefined | no |
-
-##### Outputs
-
-| Name | Type |
-|------|------|
-| selectionChange | void |
+No public inputs or outputs.
 
 ---
 
 ## side-panel
 
+A slide-in side panel overlay with optional backdrop, focus trapping, and keyboard dismiss. Renders from the right edge of the viewport with configurable width and top offset.
+
 - **Import**: `import { FuiSidePanelComponent } from 'formaui/components/side-panel'`
 - **Selector**: `fui-side-panel`
 
@@ -830,8 +1502,8 @@ A select component designed to work seamlessly with fui-form-field. Similar to A
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| ariaLabel | string | null | null | no |
-| ariaLabelledBy | string | null | null | no |
+| ariaLabel | string \| null | null | no |
+| ariaLabelledBy | string \| null | null | no |
 
 #### Outputs
 
@@ -841,33 +1513,53 @@ A select component designed to work seamlessly with fui-form-field. Similar to A
 
 ---
 
-## sidebar
+## sidebar-nav-menu
 
-A flexible sidebar component following Carbon Design System principles. Provides navigation with Angular Material-like APIs and responsive behavior.
+A standalone sidebar navigation menu component with recursive, multi-level submenus. Inspired by PrimeNG's TieredMenu model with a minimal, structural approach.
 
-- **Import**: `import { FuiSidebarComponent } from 'formaui/components/sidebar'`
-- **Selector**: `fui-sidebar`
+- **Import**: `import { FuiSidebarNavMenuComponent } from 'formaui/components/sidebar-nav-menu'`
+- **Selector**: `fui-sidebar-nav-menu`
 
 #### Inputs
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| mode | FuiSidebarMode | 'side' | no |
-| position | FuiSidebarPosition | 'start' | no |
-| navItems | FuiSidebarNavItem[] | [] | no |
+| items | MenuItem[] | [] | no |
 
 #### Outputs
 
 | Name | Type |
 |------|------|
-| openedChange | boolean |
-| navItemClick | FuiSidebarNavItem |
-| backdropClick | void |
+| itemClick | MenuItem |
+
+### Sub-components
+
+#### FuiSidebarNavSearchComponent
+
+- **Selector**: `fui-sidebar-nav-search`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| placeholder | string \| undefined | - | no |
+
+#### SidebarNavSubmenuComponent
+
+- **Selector**: `fui-sidebar-nav-submenu`
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| itemClick | MenuItem |
 
 ---
 
 ## skeleton
 
+A placeholder element that mimics the shape of content while it loads. Renders as a text line (optionally multiple lines), a circle, or a rectangle, with an optional shimmer animation.
+
 - **Import**: `import { FuiSkeletonComponent } from 'formaui/components/skeleton'`
 - **Selector**: `fui-skeleton`
 
@@ -876,9 +1568,33 @@ A flexible sidebar component following Carbon Design System principles. Provides
 | Name | Type | Default | Required |
 |------|------|---------|----------|
 | variant | FuiSkeletonVariant | 'text' | no |
-| width | string | null | null | no |
-| height | string | null | null | no |
-| borderRadius | string | null | null | no |
+| width | string \| null | null | no |
+| height | string \| null | null | no |
+| borderRadius | string \| null | null | no |
+
+### Usage
+
+```html
+<!-- Text placeholder (default) -->
+<fui-skeleton />
+
+<!-- Multiple text lines -->
+<fui-skeleton [lines]="3" />
+
+<!-- Avatar circle -->
+<fui-skeleton variant="circle" width="40px" height="40px" />
+
+<!-- Custom rectangle without animation -->
+<fui-skeleton variant="rect" width="100%" height="120px" borderRadius="8px" [animated]="false" />
+```
+
+### Notes
+
+- **Accessibility:** The host always exposes `role="status"`, `aria-busy="true"`, and `aria-label="Loading"` so assistive technology announces the loading state.
+- **Variants:** `variant` accepts `'text' | 'circle' | 'rect'` (default `'text'`). Each maps to a `fui-skeleton--*` class.
+- **Sizing:** `width`, `height`, and `borderRadius` accept any CSS length string and are applied inline only when set; otherwise the variant's default size is used.
+- **Lines:** `lines` (default `1`) renders the given number of text rows — relevant for the `text` variant.
+- **Animation:** `animated` (default `true`) toggles the shimmer effect via the `fui-skeleton--animated` class.
 
 ---
 
@@ -898,9 +1614,9 @@ A slider (range input) component with single and dual-thumb (range) support. Int
 | showTooltip | boolean | true | no |
 | formatLabel | SliderFormatLabelFn | (v: number) => String(v) | no |
 | disabled | boolean | false | no |
-| aria-label | string | null | null | no |
-| ariaLabelLow | string | null | null | no |
-| ariaLabelHigh | string | null | null | no |
+| aria-label | string \| null | null | no |
+| ariaLabelLow | string \| null | null | no |
+| ariaLabelHigh | string \| null | null | no |
 
 #### Outputs
 
@@ -914,6 +1630,8 @@ A slider (range input) component with single and dual-thumb (range) support. Int
 
 ## spinner
 
+A circular loading spinner with determinate and indeterminate modes. Supports an overlay mode that covers its parent container.
+
 - **Import**: `import { FuiSpinnerComponent } from 'formaui/components/spinner'`
 - **Selector**: `fui-spinner`
 
@@ -924,8 +1642,8 @@ A slider (range input) component with single and dual-thumb (range) support. Int
 | mode | FuiSpinnerMode | 'indeterminate' | no |
 | value | number | 0 | no |
 | size | FuiSpinnerSize | 'md' | no |
-| color | string | null | null | no |
-| aria-label | string | undefined | undefined | no |
+| color | string \| null | null | no |
+| aria-label | string \| undefined | undefined | no |
 
 ---
 
@@ -962,14 +1680,28 @@ A stepper component that guides users through a sequence of steps. Supports hori
 |------|------|---------|----------|
 | completed | boolean | false | no |
 | editable | boolean | true | no |
-| stepControl | AbstractControl | null | null | no |
+| stepControl | AbstractControl \| null | null | no |
 | optional | boolean | false | no |
+| disabled | boolean | false | no |
 | label | string | - | yes |
 
 ---
 
+## strength-meter
+
+A password strength meter that displays per-rule satisfaction bars and a rule checklist. Computes strength from a `value` input (the password string) and a `config` input controlling which rules apply.
+
+- **Import**: `import { FuiStrengthMeterComponent } from 'formaui/components/strength-meter'`
+- **Selector**: `fui-strength-meter`
+
+No public inputs or outputs.
+
+---
+
 ## tab
 
+Individual tab definition used inside `fui-tab-group`. Provides a label for the tab header and wraps its content in an `ng-template` for lazy rendering.
+
 - **Import**: `import { FuiTabComponent } from 'formaui/components/tab'`
 - **Selector**: `fui-tab`
 
@@ -993,32 +1725,10 @@ A stepper component that guides users through a sequence of steps. Supports hori
 
 ---
 
-## tag
-
-- **Import**: `import { FuiTagComponent } from 'formaui/components/tag'`
-- **Selector**: `fui-tag`
-
-#### Inputs
-
-| Name | Type | Default | Required |
-|------|------|---------|----------|
-| variant | FuiTagVariant | 'primary' | no |
-| size | FuiTagSize | 'md' | no |
-| icon | string | null | null | no |
-| disabled | boolean | false | no |
-| label | string | - | yes |
-
-#### Outputs
-
-| Name | Type |
-|------|------|
-| removed | FuiTagRemoveEvent |
-| selectedChange | boolean |
-
----
-
 ## time-picker
 
+A time input with a scrollable dropdown of selectable time options. Supports 12h/24h formats, optional seconds, a configurable minute step, and min/max constraints. Integrates with `fui-form-field` and Reactive Forms (including a built-in `Validator` for min/max errors). The dropdown is rendered by the internal `fui-time-list` component.
+
 - **Import**: `import { FuiTimePickerComponent } from 'formaui/components/time-picker'`
 - **Selector**: `fui-time-picker`
 
@@ -1027,7 +1737,7 @@ A stepper component that guides users through a sequence of steps. Supports hori
 | Name | Type | Default | Required |
 |------|------|---------|----------|
 | format | TimeFormat | '24h' | no |
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
 
 #### Outputs
 
@@ -1035,6 +1745,37 @@ A stepper component that guides users through a sequence of steps. Supports hori
 |------|------|
 | timeChange | string |
 
+### Usage
+
+```html
+<!-- Inside form-field with Reactive Forms -->
+<fui-form-field>
+  <fui-label>Start time</fui-label>
+  <fui-time-picker placeholder="HH:MM" [formControl]="startControl" />
+  <fui-error>Start time is required</fui-error>
+</fui-form-field>
+
+<!-- 12h format with seconds and a 5-minute step -->
+<fui-form-field>
+  <fui-label>Reminder</fui-label>
+  <fui-time-picker format="12h" [showSeconds]="true" [minuteStep]="5" [formControl]="reminderControl" />
+</fui-form-field>
+
+<!-- Min/max constraints -->
+<fui-form-field>
+  <fui-label>Appointment</fui-label>
+  <fui-time-picker min="09:00" max="17:00" [formControl]="apptControl" (timeChange)="onTime($event)" />
+</fui-form-field>
+```
+
+### Notes
+
+- **Accessibility:** The dropdown is keyboard-navigable (Arrow Up/Down across options skipping disabled ones, Home/End, Enter to select). ArrowDown/Enter open the panel from the input, Escape closes it. Focus moves into the panel on open and is restored to the input on close, and an `aria-live` region announces the active option.
+- **Integration:** Use inside `fui-form-field`. Implements `FuiFormFieldControl`, `ControlValueAccessor`, and `Validator` — `minTime`/`maxTime`/`timeInvalid` errors are attached to the form control automatically and picked up by `ErrorStateMatcher`.
+- **Value shape:** the model value is an ISO-style time string (e.g. `'14:30'` or `'14:30:00'`) or `null`. `timeChange` emits the same string when the value changes.
+- **Options:** `format` (`'12h' | '24h'`, default `'24h'`), `showSeconds` (default `false`), and `minuteStep` (default `15`) drive the generated option list. `min`/`max` accept ISO time strings and disable out-of-range options.
+- **States:** `disabled`, `readonly` (both boolean), and `errorStateMatcher` are supported; the host reflects open/disabled/focused/error/readonly via `fui-time-picker--*` classes. Manual typing is parsed and validated on blur, reverting to the previous value if it cannot be parsed.
+
 ### Sub-components
 
 #### FuiTimeListComponent
@@ -1045,7 +1786,7 @@ A stepper component that guides users through a sequence of steps. Supports hori
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| selectedValue | TimeValue | null | null | no |
+| selectedValue | TimeValue \| null | null | no |
 | format | TimeFormat | '24h' | no |
 | options | TimeOption[] | - | yes |
 
@@ -1059,6 +1800,8 @@ A stepper component that guides users through a sequence of steps. Supports hori
 
 ## toggle
 
+A switch-style control for boolean settings. Semantically distinct from `fui-checkbox`: use toggle for immediate on/off settings (notifications, dark mode), use checkbox for form selection (accept terms, pick items).
+
 - **Import**: `import { FuiToggleComponent } from 'formaui/components/toggle'`
 - **Selector**: `fui-toggle`
 
@@ -1071,11 +1814,11 @@ A stepper component that guides users through a sequence of steps. Supports hori
 | required | boolean | false | no |
 | labelPosition | FuiToggleLabelPosition | 'after' | no |
 | size | FuiToggleSize | 'md' | no |
-| name | string | null | null | no |
-| aria-label | string | null | null | no |
-| aria-labelledby | string | null | null | no |
-| aria-describedby | string | null | null | no |
-| errorStateMatcher | ErrorStateMatcher | null | null | no |
+| name | string \| null | null | no |
+| aria-label | string \| null | null | no |
+| aria-labelledby | string \| null | null | no |
+| aria-describedby | string \| null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
 
 #### Outputs
 
@@ -1083,6 +1826,113 @@ A stepper component that guides users through a sequence of steps. Supports hori
 |------|------|
 | change | FuiToggleChange |
 
+### Usage
+
+```html
+<!-- Basic toggle -->
+<fui-toggle [(ngModel)]="notifications">Email notifications</fui-toggle>
+
+<!-- Reactive forms with label before -->
+<fui-toggle formControlName="darkMode" labelPosition="before">
+  Dark mode
+</fui-toggle>
+
+<!-- Size variant and disabled -->
+<fui-toggle size="sm" disabled>Feature unavailable</fui-toggle>
+
+<!-- Listen to change events -->
+<fui-toggle
+  [checked]="autoSaveEnabled()"
+  (change)="onAutoSaveToggle($event.checked)">
+  Auto-save
+</fui-toggle>
+```
+
+### Notes
+
+- **Accessibility:** Native `<input type="checkbox">` under the hood with `role` styling — keyboard (Space to toggle), focus outlines, and `aria-invalid` / `aria-required` all honored. Provide an explicit `aria-label` when the toggle has no visible label.
+- **Integration:** Standalone; does not require `fui-form-field`. Use `[(ngModel)]`, `[formControl]`, or `formControlName` for two-way binding.
+- **vs Checkbox:** functionally similar (both boolean CVAs), but use toggle for "settings applied immediately on change" and checkbox for "part of a form the user submits". Toggle has no indeterminate state.
+- Emits `change: FuiToggleChange` (`{ source, checked }`) on user-driven toggles. Size options: `'sm' | 'md'`.
+
+---
+
+## toggle-group
+
+A selection control that renders as a row of connected toggle buttons. Like radio buttons but styled as a horizontal button group. Use `fui-toggle-group` as the Reactive Forms control and `fui-toggle-item` for each option.
+
+- **Import**: `import { FuiToggleGroupComponent } from 'formaui/components/toggle-group'`
+- **Selector**: `fui-toggle-group`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| disabled | boolean | false | no |
+| aria-label | string \| null | null | no |
+| aria-labelledby | string \| null | null | no |
+| errorStateMatcher | ErrorStateMatcher \| null | null | no |
+| size | FuiToggleGroupSize | 'md' | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| change | void |
+
+### Usage
+
+```html
+<!-- Basic usage with FormControl -->
+<fui-toggle-group [formControl]="status" aria-label="Filter by status">
+  <fui-toggle-item [value]="'all'">All</fui-toggle-item>
+  <fui-toggle-item [value]="'read'">Read</fui-toggle-item>
+  <fui-toggle-item [value]="'unread'">Unread</fui-toggle-item>
+</fui-toggle-group>
+
+<!-- With individual disabled items -->
+<fui-toggle-group [formControl]="plan" aria-label="Choose plan">
+  <fui-toggle-item [value]="'free'">Free</fui-toggle-item>
+  <fui-toggle-item [value]="'pro'">Pro</fui-toggle-item>
+  <fui-toggle-item [value]="'enterprise'" disabled>Enterprise</fui-toggle-item>
+</fui-toggle-group>
+
+<!-- With icons and badges inside items -->
+<fui-toggle-group [formControl]="view" aria-label="View">
+  <fui-toggle-item [value]="'grid'">
+    <fui-icon name="grid"></fui-icon>
+    Grid
+  </fui-toggle-item>
+  <fui-toggle-item [value]="'list'">
+    <fui-icon name="list"></fui-icon>
+    List
+  </fui-toggle-item>
+</fui-toggle-group>
+```
+
+### Notes
+
+- **Accessibility:** The group uses `role="radiogroup"` with each item using `role="radio"` + `aria-checked`. This matches the single-selection semantics: screen readers announce items as "1 of N" and the selection-follows-focus navigation is correct for a radio pattern. Keyboard navigation: Arrow Left/Right, Home, End, Enter, and Space. Only the selected item (or first if none) is in the tab order (roving tabindex). Provide `aria-label` or `aria-labelledby` on the group for context.
+- **Integration:** `fui-toggle-group` is the `ControlValueAccessor` — bind `formControl`, `formControlName`, or `ngModel` on the **group**, not on individual items. `name` is auto-generated if omitted and propagated to child items.
+- **Value type:** `value` on each item is typed `unknown` — use any primitive or object. Comparison is strict `===`.
+- **Single selection only:** Exactly one item is selected at a time. Cannot deselect all — the current value always stays selected (like radio).
+- Emits `change: FuiToggleGroupChange` (`{ source, value }`) on the group.
+
+### Sub-components
+
+#### FuiToggleItemComponent
+
+- **Selector**: `fui-toggle-item`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| disabled | boolean | false | no |
+| aria-label | string \| null | null | no |
+| aria-labelledby | string \| null | null | no |
+| value | unknown | - | yes |
+
 ---
 
 ## toolbar
@@ -1097,16 +1947,16 @@ A top navigation toolbar following Carbon Design System principles. Provides spa
 | Name | Type | Default | Required |
 |------|------|---------|----------|
 | menuItems | FuiToolbarMenuItem[] | [] | no |
-| userProfile | FuiToolbarUserProfile | null | null | no |
-| activeMenuItemId | string | number | '' | no |
-| ariaLabel | string | undefined | undefined | no |
-| userAriaLabel | string | undefined | undefined | no |
+| userProfile | FuiToolbarUserProfile \| null | null | no |
+| activeMenuItemId | string \| number | '' | no |
+| ariaLabel | string \| undefined | undefined | no |
+| userAriaLabel | string \| undefined | undefined | no |
 
 #### Outputs
 
 | Name | Type |
 |------|------|
-| menuItemClick | string | number |
+| menuItemClick | string \| number |
 | userProfileClick | void |
 | sidebarToggle | void |
 
@@ -1114,6 +1964,8 @@ A top navigation toolbar following Carbon Design System principles. Provides spa
 
 ## tooltip
 
+A contextual label attached to any element. Shows on hover, focus, click, or manual control. Built on the overlay CDK with collision detection and 12 position variants.
+
 - **Import**: `import { FuiTooltipComponent } from 'formaui/components/tooltip'`
 - **Selector**: `fui-tooltip`
 
@@ -1128,6 +1980,49 @@ A top navigation toolbar following Carbon Design System principles. Provides spa
 | arrow | boolean | - | yes |
 | tooltipId | string | - | yes |
 
+### Usage
+
+```html
+<!-- Basic tooltip on hover/focus -->
+<button fuiButton fuiTooltip="Delete user">
+  <fui-icon name="trash" />
+</button>
+
+<!-- Position, size, and show delay -->
+<button
+  fuiButton
+  fuiTooltip="Permanently removes the item"
+  fuiTooltipPosition="top-end"
+  fuiTooltipSize="lg"
+  [fuiTooltipShowDelay]="300">
+  Delete
+</button>
+
+<!-- Click trigger -->
+<span
+  fuiTooltip="Copied!"
+  fuiTooltipTrigger="click"
+  fuiTooltipPosition="bottom">
+  Click to copy
+</span>
+
+<!-- Manual control via a boolean input -->
+<div
+  fuiTooltip="Saved"
+  fuiTooltipTrigger="manual"
+  [fuiTooltipShow]="justSaved()">
+  Save button
+</div>
+```
+
+### Notes
+
+- **Accessibility:** The host element receives `aria-describedby` pointing at the tooltip id while visible. Hover trigger also fires on focus, so keyboard users see the same information. Escape hides the tooltip when focused on the trigger.
+- **Integration:** Pure attribute directive — no wrapper or parent required. Renders a `FuiTooltipComponent` via the CDK overlay, so it breaks out of clipping ancestors (`overflow: hidden`, transforms, etc.).
+- **Triggers:** `hover` (default, includes focus), `focus`, `click` (toggle), `manual` (bind `[fuiTooltipShow]`). Hover over the tooltip itself keeps it open while pointer is inside.
+- **Positions:** 12 variants — `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end`. The overlay auto-flips if the preferred position overflows the viewport.
+- Delays: `fuiTooltipShowDelay` defaults to 500ms; `fuiTooltipHideDelay` to 0. Set to 0/small values for snappier hover.
+
 ### Sub-components
 
 #### FuiTooltipDirective
@@ -1151,8 +2046,31 @@ A top navigation toolbar following Carbon Design System principles. Provides spa
 
 ---
 
+## topbar
+
+A responsive topbar navigation component with a two-row layout: the top row contains brand/actions and menu items; the bottom row is a content projection slot (`[fuiTopbarBottomRow]`) for tabs, search bars, or other secondary content.
+
+- **Import**: `import { FuiTopbarComponent } from 'formaui/components/topbar'`
+- **Selector**: `fui-topbar`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| items | MenuItem[] | [] | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| itemClick | MenuItem |
+
+---
+
 ## tree
 
+A hierarchical tree view that renders nested `FuiTreeNode<T>` data with expand/collapse, optional lazy child loading, keyboard navigation, and selection. Selection can be disabled, single, multi, or checkbox-based (with parent/child propagation and indeterminate states).
+
 - **Import**: `import { FuiTreeNodeComponent } from 'formaui/components/tree'`
 - **Selector**: `fui-tree-node`
 
@@ -1161,7 +2079,7 @@ A top navigation toolbar following Carbon Design System principles. Provides spa
 | Name | Type | Default | Required |
 |------|------|---------|----------|
 | selectionMode | FuiTreeSelectionMode | 'none' | no |
-| checkboxState | 'checked' | 'unchecked' | 'indeterminate' | 'unchecked' | no |
+| checkboxState | 'checked' \| 'unchecked' \| 'indeterminate' | 'unchecked' | no |
 | flatNode | FuiFlatTreeNode | - | yes |
 
 #### Outputs
@@ -1172,6 +2090,48 @@ A top navigation toolbar following Carbon Design System principles. Provides spa
 | select | void |
 | checkboxChange | void |
 
+### Usage
+
+```html
+<!-- Basic single-selection tree -->
+<fui-tree [nodes]="nodes" selectionMode="single" (nodeSelect)="onSelect($event)" />
+
+<!-- Checkbox selection with lazy loading and virtual scroll -->
+<fui-tree
+  [nodes]="nodes"
+  selectionMode="checkbox"
+  [loadChildren]="loadChildren"
+  [draggable]="true"
+  [virtualScroll]="true"
+  [virtualItemSize]="32"
+  [filter]="searchTerm()"
+  (nodeExpand)="onExpand($event)"
+  (nodeDrop)="onDrop($event)"
+/>
+```
+
+```typescript
+nodes: FuiTreeNode<MyData>[] = [
+  { data: { name: 'Root' }, expanded: true, children: [
+    { data: { name: 'Child A' } },
+    { data: { name: 'Child B' }, disabled: true },
+  ] },
+];
+
+// Lazy loading: called the first time an expandable node without children is opened
+loadChildren = (node: FuiTreeNode<MyData>) => this.api.getChildren(node);
+```
+
+### Notes
+
+- **Accessibility:** The host carries `role="tree"` and is focusable (`tabindex="0"`); each `fui-tree-node` carries `role="treeitem"` with `aria-level`, `aria-expanded`, and `aria-selected`. Keyboard navigation supports Arrow keys (up/down to move, right/left to expand/collapse or move to child/parent), Home/End, Enter/Space to select, and `*` to expand siblings at the current level.
+- **Selection:** Set `selectionMode` to `'none'` (default), `'single'`, `'multi'`, or `'checkbox'`. Checkbox mode propagates selection to descendants and computes `checked` / `unchecked` / `indeterminate` parent states. Selection state lives on the node objects (`node.selected`).
+- **Lazy loading:** Provide `loadChildren` returning an `Observable<FuiTreeNode<T>[]>`; children are fetched once on first expand and cached onto the node.
+- **Outputs:** `nodeSelect`, `nodeUnselect`, `nodeExpand`, `nodeCollapse`, `nodeDrop`, and `filterChange` emit `FuiTreeNodeEvent<T>` (or drag/filter payloads) carrying both the origin node and its flat representation.
+- **Filtering:** The `filter` input narrows visible nodes by matching node data (string, or its `name` / `label` field), auto-expanding ancestors of matches.
+- **Public methods:** `expandAll()`, `collapseAll()`, `selectNode(node)`, and `getSelectedNodes()` are available via a template reference or `ViewChild`.
+- **Custom rendering:** Pass a `nodeTemplate` `TemplateRef` to override the default node content. Provide `nodeIdPrefix` when a parent combobox (e.g. tree-select) needs stable node DOM ids for `aria-activedescendant`.
+
 ### Sub-components
 
 #### FuiTreeComponent
@@ -1183,17 +2143,21 @@ A top navigation toolbar following Carbon Design System principles. Provides spa
 | Name | Type | Default | Required |
 |------|------|---------|----------|
 | selectionMode | FuiTreeSelectionMode | 'none' | no |
+| nodeIdPrefix | string \| null | null | no |
 
 ##### Outputs
 
 | Name | Type |
 |------|------|
 | filterChange | string |
+| focusChange | string \| null |
 
 ---
 
 ## tree-select
 
+A combobox that opens a `fui-tree` in an overlay panel so users can pick one or more values from hierarchical data. Implements `ControlValueAccessor` and `FuiFormFieldControl`, so it integrates with Reactive Forms and `fui-form-field`.
+
 - **Import**: `import { FuiTreeSelectComponent } from 'formaui/components/tree-select'`
 - **Selector**: `fui-tree-select`
 
@@ -1201,12 +2165,41 @@ A top navigation toolbar following Carbon Design System principles. Provides spa
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| selectionMode | 'single' | 'multi' | 'checkbox' | 'single' | no |
+| selectionMode | 'single' \| 'multi' \| 'checkbox' | 'single' | no |
+
+### Usage
+
+```html
+<!-- Single selection -->
+<fui-tree-select [nodes]="nodes" selectionMode="single" placeholder="Pick a category" [formControl]="categoryControl" />
+
+<!-- Multi selection with search and a display field -->
+<fui-tree-select
+  [nodes]="nodes"
+  selectionMode="multi"
+  [showSearch]="true"
+  [displayField]="'name'"
+  placeholder="Pick categories"
+  [formControl]="categoriesControl"
+  (selectionChange)="onChange($event)"
+/>
+```
+
+### Notes
+
+- **Accessibility:** The host carries `role="combobox"` with `aria-expanded`, `aria-haspopup="tree"`, `aria-owns`, and `aria-activedescendant`, the last kept in sync with keyboard focus inside the embedded tree. Enter/Space opens the panel; Escape closes it.
+- **Forms integration:** Provides `NG_VALUE_ACCESSOR` and `FUI_FORM_FIELD_CONTROL`. In single mode the value is the selected node's `data`; in multi/checkbox mode it is an array of `data`. Wrap in `fui-form-field` for label, hint, and error support.
+- **Selection modes:** `selectionMode` accepts `'single'` (default), `'multi'`, or `'checkbox'`. Selecting in single mode closes the panel.
+- **Inputs:** `nodes` (required), `placeholder`, `showSearch`, `loadChildren` (lazy children), `nodeTemplate`, `displayField` (string key or function controlling the displayed label), plus `disabled` and `readonly`.
+- **Outputs:** `selectionChange` emits `FuiTreeSelectChange<T>` containing the selected node(s) and the component as `source`.
+- **Overlay:** Panel positioning, classes, scroll strategy, and trigger-matched min width come from the host `FuiPopupOverlayDirective` inputs (`positions`, `panelClass`, `backdropClass`, `scrollStrategy`, `minWidthFromTrigger`).
 
 ---
 
 ## tree-table
 
+A tabular component that renders hierarchical `FuiTreeTableNode<T>` data as rows, with one designated tree column showing indentation and expand/collapse toggles. Supports per-column sorting and filtering, optional lazy child loading, and row interaction events. Generic over the row type `T`.
+
 - **Import**: `import { FuiTreeTableComponent } from 'formaui/components/tree-table'`
 - **Selector**: `fui-tree-table`
 
@@ -1214,329 +2207,1215 @@ A top navigation toolbar following Carbon Design System principles. Provides spa
 
 | Name | Type | Default | Required |
 |------|------|---------|----------|
-| sort | { field: string; direction: 'ASC' | 'DESC' } | null | null | no |
+| sort | { field: string; direction: 'ASC' \| 'DESC' } \| null | null | no |
 | filters | FuiTreeTableColumnFilter[] | [] | no |
-| emptyMessage | string | undefined | undefined | no |
+| emptyMessage | string \| undefined | undefined | no |
 | config | FuiTreeTableConfig | - | yes |
 
 #### Outputs
 
 | Name | Type |
 |------|------|
-| sortChange | { field: string; direction: 'ASC' | 'DESC' } | null |
+| sortChange | { field: string; direction: 'ASC' \| 'DESC' } \| null |
 | filtersChange | FuiTreeTableColumnFilter[] |
 | rowDblClick | T |
 
+### Usage
+
+```html
+<!-- Minimal tree table -->
+<fui-tree-table [config]="tableConfig" [nodes]="nodes" />
+```
+
+```typescript
+tableConfig: FuiTreeTableConfig = {
+  headerSticky: true,
+  treeColumn: 'name',
+  indentPx: 24,
+  headers: [
+    { field: 'name', label: 'Name', type: 'string', hasSort: true },
+    { field: 'size', label: 'Size', type: 'number', hasSort: true, hasFilter: true },
+    { field: 'modified', label: 'Modified', type: 'date' },
+  ],
+};
+
+nodes: FuiTreeTableNode<FileRow>[] = [
+  { data: { name: 'src', size: 0 }, expanded: true, children: [
+    { data: { name: 'index.ts', size: 1200 }, leaf: true },
+  ] },
+];
+```
+
+```html
+<!-- Controlled sort/filter, row highlight, and interaction handlers -->
+<fui-tree-table
+  [config]="tableConfig"
+  [nodes]="nodes"
+  [sort]="currentSort()"
+  [filters]="activeFilters()"
+  [enableRowHighlight]="true"
+  (sortChange)="currentSort.set($event)"
+  (filtersChange)="activeFilters.set($event)"
+  (rowExpand)="onExpand($event)"
+  (rowDblClick)="openRow($event)"
+/>
+```
+
+### Notes
+
+- **Tree column:** `config.treeColumn` selects which column renders the indentation and expand/collapse toggle; it defaults to the first header's field. Indentation per level is controlled by `config.indentPx` (default 24).
+- **Configuration:** `config: FuiTreeTableConfig` (required) supplies `headers`, plus optional `headerSticky`, `areRowsSelectable`, `treeColumn`, and `indentPx`. Column `type` (`'string' | 'number' | 'boolean' | 'date' | 'label'`) describes cell data; cell values support dot-notation fields like `'address.city'`.
+- **Sort/filter:** State is fully controlled — `sortChange` cycles a column through ASC → DESC → none and emits the new sort; `filtersChange` emits `FuiTreeTableColumnFilter[]`. The component does not mutate `nodes`; apply ordering/filtering in the parent.
+- **Expansion:** `rowExpand` and `rowCollapse` emit `FuiTreeTableRowEvent<T>` (origin node plus flat row); expansion state is read from `node.expanded`. Provide `loadChildren` for lazy child loading.
+- **Empty state:** When `nodes` is empty, `emptyMessage` is shown (defaults to the `FuiTreeTableIntl.emptyMessage` value, `'No data available'`).
+- **Row interaction:** `rowDblClick` emits the row data `T`; set `enableRowHighlight` to enable click-to-highlight.
+
 ---
 
 ## Design Tokens
 
-### Primary
+### Radius
 
 | Token | Value |
 |-------|-------|
-| --fui-primary-10 | #fdfaff |
-| --fui-primary-20 | #f9f5ff |
-| --fui-primary-30 | #f1ebff |
-| --fui-primary-40 | #e4d4ff |
-| --fui-primary-50 | #7c4be0 |
-| --fui-primary-60 | #6833c8 |
-| --fui-primary-70 | #5522af |
-| --fui-primary-80 | #421a8c |
-| --fui-primary-90 | #2e1266 |
-| --fui-primary-100 | #1a0b3d |
-| --fui-primary-110 | #120923 |
-| --fui-primary | var(--fui-primary-50) |
-| --fui-primary-rgb | 124, 75, 224 |
-| --fui-primary-text-color | white |
-| --fui-primary-text | white |
-| --fui-primary-default | var(--fui-primary-50) |
-| --fui-primary-disable | var(--fui-primary-40) |
-| --fui-primary-bg | var(--fui-primary-20) |
-| --fui-primary-hover | var(--fui-primary-60) |
-| --fui-primary-highlights | var(--fui-primary-30) |
-
-### Secondary
+| --fui-radius-none | 0 |
+| --fui-radius-xs | 4px |
+| --fui-radius-sm | 8px |
+| --fui-radius-md | 10px |
+| --fui-radius-lg | 16px |
+| --fui-radius-xl | 24px |
+| --fui-radius-pill | 9999px |
+
+### Border
 
 | Token | Value |
 |-------|-------|
-| --fui-secondary-10 | #fbfcfe |
-| --fui-secondary-20 | #f8f9fd |
-| --fui-secondary-30 | #eeeff5 |
-| --fui-secondary-40 | #e6e7ed |
-| --fui-secondary-50 | #dfe0e6 |
-| --fui-secondary-60 | #d7d8de |
-| --fui-secondary-70 | #ccced3 |
-| --fui-secondary-80 | #b9bbc0 |
-| --fui-secondary-90 | #8c8d92 |
-| --fui-secondary-100 | #818288 |
-| --fui-secondary-110 | #636469 |
-| --fui-secondary-120 | #1f2024 |
-| --fui-secondary | var(--fui-secondary-60) |
-| --fui-secondary-default | var(--fui-secondary-60) |
-| --fui-secondary-hover | var(--fui-secondary-90) |
-| --fui-secondary-disable | var(--fui-secondary-30) |
-| --fui-secondary-bg | var(--fui-secondary-20) |
-| --fui-secondary-highlights | var(--fui-secondary-20) |
-
-### Danger
+| --fui-border-width-none | 0 |
+| --fui-border-width-sm | 1px |
+| --fui-border-width-md | 2px |
+| --fui-border-width-lg | 4px |
+| --fui-border-default | var(--fui-neutral-40) |
+| --fui-border-strong | var(--fui-neutral-60) |
+| --fui-border-primary | var(--fui-primary-60) |
+| --fui-border-subtle | var(--fui-neutral-30) |
+| --fui-border-disabled | var(--fui-neutral-30) |
+| --fui-border-accent | var(--fui-accent-60) |
+| --fui-border-error | var(--fui-error-40) |
+| --fui-border-success | var(--fui-success-40) |
+| --fui-border-warning | var(--fui-warning-40) |
+| --fui-border-info | var(--fui-info-40) |
+| --fui-border-default | var(--fui-neutral-40) |
+| --fui-border-strong | var(--fui-neutral-60) |
+| --fui-border-primary | var(--fui-primary-60) |
+| --fui-border-subtle | var(--fui-neutral-30) |
+| --fui-border-disabled | var(--fui-neutral-30) |
+| --fui-border-accent | var(--fui-accent-60) |
+| --fui-border-error | var(--fui-error-40) |
+| --fui-border-success | var(--fui-success-40) |
+| --fui-border-warning | var(--fui-warning-40) |
+| --fui-border-info | var(--fui-info-40) |
+
+### Z
 
 | Token | Value |
 |-------|-------|
-| --fui-danger-10 | #fffcfc |
-| --fui-danger-20 | #fff7f7 |
-| --fui-danger-30 | #feebec |
-| --fui-danger-40 | #ffdbdc |
-| --fui-danger-50 | #ffcdce |
-| --fui-danger-60 | #fdbdbe |
-| --fui-danger-70 | #f4a9aa |
-| --fui-danger-80 | #eb8e90 |
-| --fui-danger-90 | #e5484d |
-| --fui-danger-100 | #ce2c31 |
-| --fui-danger-110 | #821e2e |
-| --fui-danger | var(--fui-danger-60) |
+| --fui-z-base | 0 |
+| --fui-z-dropdown | 100 |
+| --fui-z-sticky | 200 |
+| --fui-z-fixed | 300 |
+| --fui-z-backdrop | 400 |
+| --fui-z-modal | 500 |
+| --fui-z-popover | 600 |
+| --fui-z-toast | 700 |
+| --fui-z-tooltip | 800 |
+
+### Bp
 
-### Success
+| Token | Value |
+|-------|-------|
+| --fui-bp-xs | 480px |
+| --fui-bp-sm | 640px |
+| --fui-bp-md | 768px |
+| --fui-bp-lg | 1024px |
+| --fui-bp-xl | 1280px |
+| --fui-bp-2xl | 1536px |
+
+### Grid
 
 | Token | Value |
 |-------|-------|
-| --fui-success-10 | #fbfefd |
-| --fui-success-20 | #f4fbf7 |
-| --fui-success-30 | #e6f7ed |
-| --fui-success-40 | #d6f1e3 |
-| --fui-success-50 | #c3e9d7 |
-| --fui-success-60 | #acdec8 |
-| --fui-success-70 | #8bceb6 |
-| --fui-success-80 | #56ba9f |
-| --fui-success-90 | #29a383 |
-| --fui-success-100 | #208368 |
-| --fui-success-110 | #1d3b31 |
-| --fui-success | var(--fui-success-60) |
+| --fui-grid-columns | 12 |
+| --fui-grid-gutter | var(--fui-spacing-7) |
 
-### Warning
+### Container
 
 | Token | Value |
 |-------|-------|
-| --fui-warning-10 | #fefdfb |
-| --fui-warning-20 | #fefbe9 |
-| --fui-warning-30 | #fff7c2 |
-| --fui-warning-40 | #ffee9c |
-| --fui-warning-50 | #fbe577 |
-| --fui-warning-60 | #f3d673 |
-| --fui-warning-70 | #e9c162 |
-| --fui-warning-80 | #ffc53d |
-| --fui-warning-90 | #e2a336 |
-| --fui-warning-100 | #ab6400 |
-| --fui-warning-110 | #4f3422 |
-| --fui-warning | var(--fui-warning-60) |
+| --fui-container-sm | 640px |
+| --fui-container-md | 768px |
+| --fui-container-lg | 1024px |
+| --fui-container-xl | 1280px |
+| --fui-container-2xl | 1536px |
 
-### Info
+### Tooltip
 
 | Token | Value |
 |-------|-------|
-| --fui-info-10 | #fbfdff |
-| --fui-info-20 | #f4faff |
-| --fui-info-30 | #e6f4fe |
-| --fui-info-40 | #d5efff |
-| --fui-info-50 | #c2e5ff |
-| --fui-info-60 | #acd8fc |
-| --fui-info-70 | #8ec8f6 |
-| --fui-info-80 | #5eb1ef |
-| --fui-info-90 | #0090ff |
-| --fui-info-100 | #0d74ce |
-| --fui-info-110 | #113264 |
-| --fui-info | var(--fui-info-60) |
+| --fui-tooltip-background | #334155 |
+| --fui-tooltip-text | #f8fafc |
 
-### Pink
+### Duration
 
 | Token | Value |
 |-------|-------|
-| --fui-pink-10 | #fffcfe |
-| --fui-pink-20 | #fef7fb |
-| --fui-pink-30 | #fee9f5 |
-| --fui-pink-40 | #fbdcef |
-| --fui-pink-50 | #f6cee7 |
-| --fui-pink-60 | #efbfdd |
-| --fui-pink-70 | #e7acd0 |
-| --fui-pink-80 | #dd93c2 |
-| --fui-pink-90 | #d6409f |
-| --fui-pink-100 | #c2298a |
-| --fui-pink-110 | #651249 |
+| --fui-duration-instant | 0ms |
+| --fui-duration-fast | 100ms |
+| --fui-duration-base | 200ms |
+| --fui-duration-moderate | 300ms |
+| --fui-duration-slow | 500ms |
+| --fui-duration-deliberate | 750ms |
 
-### Orange
+### Ease
 
 | Token | Value |
 |-------|-------|
-| --fui-orange-10 | #fefcfb |
-| --fui-orange-20 | #fff7ed |
-| --fui-orange-30 | #ffefd6 |
-| --fui-orange-40 | #ffdfb5 |
-| --fui-orange-50 | #ffd19a |
-| --fui-orange-60 | #ffc182 |
-| --fui-orange-70 | #f5ae73 |
-| --fui-orange-80 | #ec9455 |
-| --fui-orange-90 | #f76b15 |
-| --fui-orange-100 | #cc4e00 |
-| --fui-orange-110 | #582d1d |
-
-### Tomato
+| --fui-ease-linear | linear |
+| --fui-ease-in | cubic-bezier(0.4, 0, 1, 1) |
+| --fui-ease-out | cubic-bezier(0, 0, 0.2, 1) |
+| --fui-ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) |
+| --fui-ease-emphasized | cubic-bezier(0.2, 0, 0, 1) |
+| --fui-ease-bounce | cubic-bezier(0.34, 1.56, 0.64, 1) |
+
+### Icon
 
 | Token | Value |
 |-------|-------|
-| --fui-tomato-10 | #fffcfc |
-| --fui-tomato-20 | #fff8f7 |
-| --fui-tomato-30 | #feebe7 |
-| --fui-tomato-40 | #ffdcd3 |
-| --fui-tomato-50 | #ffcdc2 |
-| --fui-tomato-60 | #fdbdaf |
-| --fui-tomato-70 | #f5a898 |
-| --fui-tomato-80 | #ec8e7b |
-| --fui-tomato-90 | #e54d2e |
-| --fui-tomato-100 | #dd4425 |
-| --fui-tomato-110 | #d13415 |
-| --fui-tomato-120 | #5c271f |
-
-### White
+| --fui-icon-spin-duration | var(--fui-duration-base) |
+| --fui-icon-spin-timing | linear |
+| --fui-icon-pulse-duration | var(--fui-duration-slow) |
+| --fui-icon-pulse-timing | var(--fui-ease-emphasized) |
+| --fui-icon-xs | 0.75rem |
+| --fui-icon-sm | 1rem |
+| --fui-icon-md | 1.25rem |
+| --fui-icon-lg | 1.5rem |
+| --fui-icon-xl | 2rem |
+| --fui-icon-2xl | 3rem |
+
+### Transition
 
 | Token | Value |
 |-------|-------|
-| --fui-white | #ffffff |
-| --fui-white-5 | rgba(255, 255, 255, 0.05) |
-| --fui-white-10 | rgba(255, 255, 255, 0.1) |
-| --fui-white-15 | rgba(255, 255, 255, 0.15) |
-| --fui-white-20 | rgba(255, 255, 255, 0.2) |
-| --fui-white-30 | rgba(255, 255, 255, 0.3) |
-| --fui-white-40 | rgba(255, 255, 255, 0.4) |
-| --fui-white-50 | rgba(255, 255, 255, 0.5) |
-| --fui-white-60 | rgba(255, 255, 255, 0.6) |
-| --fui-white-70 | rgba(255, 255, 255, 0.7) |
-| --fui-white-80 | rgba(255, 255, 255, 0.8) |
-| --fui-white-90 | rgba(255, 255, 255, 0.9) |
-
-### Black
+| --fui-transition-color | color var(--fui-duration-fast) var(--fui-ease-out) |
+| --fui-transition-bg | background-color var(--fui-duration-fast) var(--fui-ease-out) |
+| --fui-transition-transform | transform var(--fui-duration-base) var(--fui-ease-out) |
+| --fui-transition-opacity | opacity var(--fui-duration-base) var(--fui-ease-out) |
+| --fui-transition-shadow | box-shadow var(--fui-duration-base) var(--fui-ease-out) |
+
+### Button
 
 | Token | Value |
 |-------|-------|
-| --fui-black | #000000 |
-| --fui-black-5 | rgba(0, 0, 0, 0.05) |
-| --fui-black-10 | rgba(0, 0, 0, 0.1) |
-| --fui-black-15 | rgba(0, 0, 0, 0.15) |
-| --fui-black-20 | rgba(0, 0, 0, 0.2) |
-| --fui-black-30 | rgba(0, 0, 0, 0.3) |
-| --fui-black-40 | rgba(0, 0, 0, 0.4) |
-| --fui-black-50 | rgba(0, 0, 0, 0.5) |
-| --fui-black-60 | rgba(0, 0, 0, 0.6) |
-| --fui-black-70 | rgba(0, 0, 0, 0.7) |
-| --fui-black-80 | rgba(0, 0, 0, 0.8) |
-| --fui-black-90 | rgba(0, 0, 0, 0.9) |
+| --fui-button-height-sm | 1.75rem |
+| --fui-button-height-md | 2.25rem |
+| --fui-button-height-lg | 2.75rem |
+| --fui-button-height-xl | 3.25rem |
+| --fui-button-height-2xl | 4rem |
 
-### Text
+### Input
 
 | Token | Value |
 |-------|-------|
-| --fui-text-disabled | var(--fui-secondary-100) |
-| --fui-text-primary | var(--fui-secondary-120) |
-| --fui-text-secondary | var(--fui-secondary-110) |
-| --fui-text-primary-disabled | var(--fui-text-disabled) |
+| --fui-input-height | 2.25rem |
 
-### Border
+### Density
 
 | Token | Value |
 |-------|-------|
-| --fui-border-color | var(--fui-secondary-50) |
-| --fui-border-color-strong | var(--fui-secondary-70) |
-| --fui-border-color-active | var(--fui-primary-default) |
+| --fui-density-scale | 1 |
 
-### Surface
+### Control
 
 | Token | Value |
 |-------|-------|
-| --fui-surface-bg | var(--fui-secondary-20) |
-| --fui-surface-card | var(--fui-white) |
-| --fui-surface-01 | var(--fui-secondary-10) |
-| --fui-surface-02 | var(--fui-secondary-20) |
-| --fui-surface-03 | var(--fui-secondary-30) |
-| --fui-surface-04 | var(--fui-secondary-40) |
-| --fui-surface-00 | var(--fui-surface-card) |
-| --fui-surface-05 | var(--fui-secondary-50) |
+| --fui-control-h-xs | 1.5rem |
+| --fui-control-h-sm | 2rem |
+| --fui-control-h-md | 2.5rem |
+| --fui-control-h-lg | 3rem |
+| --fui-control-h-xl | 3.5rem |
+| --fui-control-padding-sm | calc(var(--fui-spacing-2) * var(--fui-density-scale)) |
+| --fui-control-padding-md | calc(var(--fui-spacing-4) * var(--fui-density-scale)) |
+| --fui-control-padding-lg | calc(var(--fui-spacing-6) * var(--fui-density-scale)) |
 
-### Bg
+### Cell
 
 | Token | Value |
 |-------|-------|
-| --fui-bg | var(--fui-surface-bg) |
+| --fui-cell-padding-y | calc(var(--fui-spacing-4) * var(--fui-density-scale)) |
+| --fui-cell-padding-x | calc(var(--fui-spacing-6) * var(--fui-density-scale)) |
 
-### State
+### Spacing
 
 | Token | Value |
 |-------|-------|
-| --fui-state-error | var(--fui-danger-90) |
-| --fui-state-error-bg | var(--fui-danger-30) |
-| --fui-state-error-hover | var(--fui-danger-110) |
-| --fui-state-success | var(--fui-success-110) |
-| --fui-state-success-bg | var(--fui-success-30) |
-| --fui-state-success-hover | var(--fui-success-110) |
-| --fui-state-warning | var(--fui-warning-110) |
-| --fui-state-warning-bg | var(--fui-warning-30) |
-| --fui-state-warning-hover | var(--fui-warning-110) |
-| --fui-state-info | var(--fui-info-110) |
-| --fui-state-info-bg | var(--fui-info-30) |
-| --fui-state-info-hover | var(--fui-info-110) |
-
-### Destructive
+| --fui-spacing-0 | 0 |
+| --fui-spacing-1 | 0.125rem |
+| --fui-spacing-2 | 0.25rem |
+| --fui-spacing-3 | 0.375rem |
+| --fui-spacing-4 | 0.5rem |
+| --fui-spacing-5 | 0.625rem |
+| --fui-spacing-6 | 0.75rem |
+| --fui-spacing-7 | 1rem |
+| --fui-spacing-8 | 1.25rem |
+| --fui-spacing-9 | 1.5rem |
+| --fui-spacing-10 | 1.75rem |
+| --fui-spacing-11 | 2rem |
+| --fui-spacing-12 | 2.5rem |
+| --fui-spacing-13 | 3rem |
+
+### Font
 
 | Token | Value |
 |-------|-------|
-| --fui-destructive-default | var(--fui-danger-90) |
-| --fui-destructive-hover | var(--fui-danger-100) |
-| --fui-destructive-text | white |
+| --fui-font-sans | 'Geist', sans-serif |
+| --fui-font-mono | 'DM Mono', monospace |
 
-### Tertiary
+### Text
 
 | Token | Value |
 |-------|-------|
-| --fui-tertiary-text | var(--fui-text-primary) |
-| --fui-tertiary-hover-bg | var(--fui-surface-03) |
-| --fui-tertiary-violet-text | var(--fui-primary) |
-| --fui-tertiary-violet-hover-bg | var(--fui-primary-bg) |
+| --fui-text-xs | 0.6875rem |
+| --fui-text-sm | 0.75rem |
+| --fui-text-base | 0.875rem |
+| --fui-text-md | 1rem |
+| --fui-text-lg | 1.125rem |
+| --fui-text-xl | 1.25rem |
+| --fui-text-2xl | 1.5rem |
+| --fui-text-3xl | 1.875rem |
+| --fui-text-4xl | 2.25rem |
+| --fui-text-5xl | 3rem |
+| --fui-text-6xl | 3.75rem |
+| --fui-text-7xl | 4.5rem |
+| --fui-text-primary | var(--fui-neutral-110) |
+| --fui-text-secondary | var(--fui-neutral-80) |
+| --fui-text-disabled | var(--fui-neutral-60) |
+| --fui-text-tertiary | var(--fui-neutral-70) |
+| --fui-text-inverse | var(--fui-neutral-10) |
+| --fui-text-link | var(--fui-primary-70) |
+| --fui-text-link-hover | var(--fui-primary-80) |
+| --fui-text-error | var(--fui-error-90) |
+| --fui-text-success | var(--fui-success-90) |
+| --fui-text-warning | var(--fui-warning-90) |
+| --fui-text-info | var(--fui-info-90) |
+| --fui-text-on-fill | #ffffff |
+| --fui-text-primary | var(--fui-neutral-110) |
+| --fui-text-secondary | var(--fui-neutral-80) |
+| --fui-text-disabled | var(--fui-neutral-60) |
+| --fui-text-tertiary | var(--fui-neutral-70) |
+| --fui-text-inverse | var(--fui-neutral-10) |
+| --fui-text-link | var(--fui-primary-70) |
+| --fui-text-link-hover | var(--fui-primary-80) |
+| --fui-text-error | var(--fui-error-90) |
+| --fui-text-success | var(--fui-success-90) |
+| --fui-text-warning | var(--fui-warning-90) |
+| --fui-text-info | var(--fui-info-90) |
+| --fui-text-on-fill | #ffffff |
+
+### Weight
 
-### Field
+| Token | Value |
+|-------|-------|
+| --fui-weight-light | 300 |
+| --fui-weight-regular | 400 |
+| --fui-weight-medium | 500 |
+| --fui-weight-semibold | 600 |
+| --fui-weight-bold | 700 |
+
+### Leading
 
 | Token | Value |
 |-------|-------|
-| --fui-field-background | var(--fui-surface-00) |
-| --fui-field-background-hover | var(--fui-surface-01) |
-| --fui-field-background-disabled | var(--fui-surface-02) |
-| --fui-field-border-focus | var(--fui-primary-50) |
-| --fui-field-border-error | var(--fui-state-error) |
+| --fui-leading-tight | 1.2 |
+| --fui-leading-snug | 1.35 |
+| --fui-leading-normal | 1.5 |
+| --fui-leading-relaxed | 1.65 |
+| --fui-leading-loose | 2 |
 
-### Icon
+### Tracking
+
+| Token | Value |
+|-------|-------|
+| --fui-tracking-tight | -0.02em |
+| --fui-tracking-normal | 0 |
+| --fui-tracking-wide | 0.02em |
+
+### Primary
 
 | Token | Value |
 |-------|-------|
-| --fui-icon-primary | var(--fui-text-primary) |
-| --fui-icon-secondary | var(--fui-text-secondary) |
-| --fui-icon-tertiary | var(--fui-secondary-90) |
-| --fui-icon-on-color-disabled | var(--fui-text-disabled) |
+| --fui-primary-10 | #E7E0F7 |
+| --fui-primary-20 | #CEC2ED |
+| --fui-primary-30 | #B4A5E2 |
+| --fui-primary-40 | #9A89D6 |
+| --fui-primary-50 | #806FC8 |
+| --fui-primary-60 | #6657B8 |
+| --fui-primary-70 | #524898 |
+| --fui-primary-80 | #433E74 |
+| --fui-primary-90 | #333152 |
+| --fui-primary-100 | #222233 |
+| --fui-primary-110 | #101016 |
+| --fui-primary-bg | var(--fui-primary-60) |
+| --fui-primary-muted | var(--fui-primary-10) |
+| --fui-primary-bg-hover | var(--fui-primary-70) |
+| --fui-primary-bg-pressed | var(--fui-primary-80) |
+| --fui-primary-bg-disabled | var(--fui-primary-30) |
+| --fui-primary-bg-subtle | var(--fui-primary-20) |
+| --fui-primary-fg | var(--fui-primary-70) |
+| --fui-primary-fg-subtle | var(--fui-primary-80) |
+| --fui-primary-10 | #100F17 |
+| --fui-primary-20 | #25223A |
+| --fui-primary-30 | #383160 |
+| --fui-primary-40 | #4A3E89 |
+| --fui-primary-50 | #5B48B5 |
+| --fui-primary-60 | #7A68CB |
+| --fui-primary-70 | #8876D4 |
+| --fui-primary-80 | #9685DC |
+| --fui-primary-90 | #A494E3 |
+| --fui-primary-100 | #B3A4E9 |
+| --fui-primary-110 | #C2B5EF |
+| --fui-primary-bg | var(--fui-primary-60) |
+| --fui-primary-muted | var(--fui-primary-10) |
+| --fui-primary-bg-hover | var(--fui-primary-70) |
+| --fui-primary-bg-pressed | var(--fui-primary-80) |
+| --fui-primary-bg-disabled | var(--fui-primary-30) |
+| --fui-primary-bg-subtle | var(--fui-primary-20) |
+| --fui-primary-fg | var(--fui-primary-70) |
+| --fui-primary-fg-subtle | var(--fui-primary-80) |
+
+### Accent
 
-### Background
+| Token | Value |
+|-------|-------|
+| --fui-accent-10 | #F8F6F9 |
+| --fui-accent-20 | #F1ECF3 |
+| --fui-accent-30 | #E9DEED |
+| --fui-accent-40 | #E0CFE7 |
+| --fui-accent-50 | #D8C0E2 |
+| --fui-accent-60 | #D1B0DD |
+| --fui-accent-70 | #B883CE |
+| --fui-accent-80 | #9D4CBD |
+| --fui-accent-90 | #75328F |
+| --fui-accent-100 | #492258 |
+| --fui-accent-110 | #23142A |
+| --fui-accent-bg | var(--fui-accent-60) |
+| --fui-accent-hover | var(--fui-accent-80) |
+| --fui-accent-pressed | var(--fui-accent-80) |
+| --fui-accent-disabled | var(--fui-accent-30) |
+| --fui-accent-subtle | var(--fui-accent-20) |
+| --fui-accent-fg | var(--fui-accent-70) |
+| --fui-accent-fg-subtle | var(--fui-accent-80) |
+| --fui-accent-10 | #161018 |
+| --fui-accent-20 | #221726 |
+| --fui-accent-30 | #34213B |
+| --fui-accent-40 | #4C2B59 |
+| --fui-accent-50 | #6C3582 |
+| --fui-accent-60 | #A34FC4 |
+| --fui-accent-70 | #B982CE |
+| --fui-accent-80 | #CCAAD9 |
+| --fui-accent-90 | #DBCAE2 |
+| --fui-accent-100 | #E8E0EB |
+| --fui-accent-110 | #F3F0F4 |
+| --fui-accent-bg | var(--fui-accent-60) |
+| --fui-accent-hover | var(--fui-accent-80) |
+| --fui-accent-pressed | var(--fui-accent-80) |
+| --fui-accent-disabled | var(--fui-accent-30) |
+| --fui-accent-subtle | var(--fui-accent-20) |
+| --fui-accent-fg | var(--fui-accent-70) |
+| --fui-accent-fg-subtle | var(--fui-accent-80) |
+
+### Neutral
 
 | Token | Value |
 |-------|-------|
-| --fui-background-primary | var(--fui-surface-00) |
-| --fui-background-hover | var(--fui-surface-02) |
+| --fui-neutral-10 | #FCFCFD |
+| --fui-neutral-20 | #F5F7FB |
+| --fui-neutral-30 | #ECEFF5 |
+| --fui-neutral-40 | #DDE3EC |
+| --fui-neutral-50 | #C8D0DD |
+| --fui-neutral-60 | #A6B1C2 |
+| --fui-neutral-70 | #7F8B9E |
+| --fui-neutral-80 | #5F697C |
+| --fui-neutral-90 | #444C5D |
+| --fui-neutral-100 | #2A303B |
+| --fui-neutral-110 | #11151B |
+| --fui-neutral-10 | #0C0F14 |
+| --fui-neutral-20 | #131923 |
+| --fui-neutral-30 | #1B2330 |
+| --fui-neutral-40 | #263041 |
+| --fui-neutral-50 | #364255 |
+| --fui-neutral-60 | #4D5B72 |
+| --fui-neutral-70 | #687891 |
+| --fui-neutral-80 | #8B9AB1 |
+| --fui-neutral-90 | #B0BCD0 |
+| --fui-neutral-100 | #D8DFEA |
+| --fui-neutral-110 | #F4F7FB |
 
 ### Error
 
 | Token | Value |
 |-------|-------|
-| --fui-error | var(--fui-state-error) |
+| --fui-error-10 | #FFFBFA |
+| --fui-error-20 | #FED9D1 |
+| --fui-error-30 | #FDB5A9 |
+| --fui-error-40 | #FA9082 |
+| --fui-error-50 | #F56B5C |
+| --fui-error-60 | #F04438 |
+| --fui-error-70 | #EA2716 |
+| --fui-error-80 | #C52414 |
+| --fui-error-90 | #9F2112 |
+| --fui-error-100 | #791C0F |
+| --fui-error-110 | #55160C |
+| --fui-error-10 | #55160C |
+| --fui-error-20 | #841E10 |
+| --fui-error-30 | #B52412 |
+| --fui-error-40 | #E72612 |
+| --fui-error-50 | #F34839 |
+| --fui-error-60 | #F97066 |
+| --fui-error-70 | #FB8E83 |
+| --fui-error-80 | #FDABA0 |
+| --fui-error-90 | #FEC7BD |
+| --fui-error-100 | #FFE2DB |
+| --fui-error-110 | #FFFBFA |
+
+### Success
+
+| Token | Value |
+|-------|-------|
+| --fui-success-10 | #F6FEF9 |
+| --fui-success-20 | #C0F8D7 |
+| --fui-success-30 | #8BF1B8 |
+| --fui-success-40 | #56EA9C |
+| --fui-success-50 | #22E383 |
+| --fui-success-60 | #17B26A |
+| --fui-success-70 | #13995D |
+| --fui-success-80 | #0F804F |
+| --fui-success-90 | #0B6740 |
+| --fui-success-100 | #084D31 |
+| --fui-success-110 | #053321 |
+| --fui-success-10 | #053321 |
+| --fui-success-20 | #0B5939 |
+| --fui-success-30 | #147C4E |
+| --fui-success-40 | #1F9D63 |
+| --fui-success-50 | #2CBC76 |
+| --fui-success-60 | #47CD89 |
+| --fui-success-70 | #66DB9D |
+| --fui-success-80 | #87E7B2 |
+| --fui-success-90 | #AAF1C8 |
+| --fui-success-100 | #CFF8DF |
+| --fui-success-110 | #F6FEF9 |
+
+### Warning
+
+| Token | Value |
+|-------|-------|
+| --fui-warning-10 | #FFFCF5 |
+| --fui-warning-20 | #FFECC5 |
+| --fui-warning-30 | #FED995 |
+| --fui-warning-40 | #FCC366 |
+| --fui-warning-50 | #FAAB37 |
+| --fui-warning-60 | #F79009 |
+| --fui-warning-70 | #D4710A |
+| --fui-warning-80 | #B1570B |
+| --fui-warning-90 | #8F400C |
+| --fui-warning-100 | #6E2D0B |
+| --fui-warning-110 | #4E1D09 |
+| --fui-warning-10 | #4E1D09 |
+| --fui-warning-20 | #74310B |
+| --fui-warning-30 | #9C4A0B |
+| --fui-warning-40 | #C5680A |
+| --fui-warning-50 | #F08D07 |
+| --fui-warning-60 | #FDB022 |
+| --fui-warning-70 | #FEC14C |
+| --fui-warning-80 | #FED176 |
+| --fui-warning-90 | #FFE0A0 |
+| --fui-warning-100 | #FFEFCA |
+| --fui-warning-110 | #FFFCF5 |
+
+### Info
+
+| Token | Value |
+|-------|-------|
+| --fui-info-10 | #F5F9FF |
+| --fui-info-20 | #CCE1FF |
+| --fui-info-30 | #A4CBFE |
+| --fui-info-40 | #7CB6FD |
+| --fui-info-50 | #55A2FC |
+| --fui-info-60 | #2E90FA |
+| --fui-info-70 | #1077F3 |
+| --fui-info-80 | #1062CF |
+| --fui-info-90 | #124EA8 |
+| --fui-info-100 | #123C83 |
+| --fui-info-110 | #102C60 |
+| --fui-info-10 | #102C60 |
+| --fui-info-20 | #12418B |
+| --fui-info-30 | #1259B7 |
+| --fui-info-40 | #1075E7 |
+| --fui-info-50 | #2C94F7 |
+| --fui-info-60 | #53B1FD |
+| --fui-info-70 | #73BBFE |
+| --fui-info-80 | #93C8FE |
+| --fui-info-90 | #B4D6FF |
+| --fui-info-100 | #D4E7FF |
+| --fui-info-110 | #F5F9FF |
+
+### Pluvia
+
+| Token | Value |
+|-------|-------|
+| --fui-pluvia-teal-10 | #F9FCFC |
+| --fui-pluvia-teal-20 | #D1E8E9 |
+| --fui-pluvia-teal-30 | #A8D5D6 |
+| --fui-pluvia-teal-40 | #7FC2C5 |
+| --fui-pluvia-teal-50 | #54AFB4 |
+| --fui-pluvia-teal-60 | #3D8A90 |
+| --fui-pluvia-teal-70 | #37757B |
+| --fui-pluvia-teal-80 | #2F6066 |
+| --fui-pluvia-teal-90 | #284D52 |
+| --fui-pluvia-teal-100 | #203A3E |
+| --fui-pluvia-teal-110 | #17282B |
+| --fui-pluvia-teal-10 | #0A3733 |
+| --fui-pluvia-teal-20 | #105750 |
+| --fui-pluvia-teal-30 | #17776B |
+| --fui-pluvia-teal-40 | #1E9686 |
+| --fui-pluvia-teal-50 | #25B59F |
+| --fui-pluvia-teal-60 | #2ED3B7 |
+| --fui-pluvia-teal-70 | #53DEC5 |
+| --fui-pluvia-teal-80 | #7AE9D2 |
+| --fui-pluvia-teal-90 | #A2F1E0 |
+| --fui-pluvia-teal-100 | #CBF8EE |
+| --fui-pluvia-teal-110 | #F6FEFC |
+
+### Nimbus
+
+| Token | Value |
+|-------|-------|
+| --fui-nimbus-blue-10 | #F9FBFC |
+| --fui-nimbus-blue-20 | #D1E0E9 |
+| --fui-nimbus-blue-30 | #A8C3D6 |
+| --fui-nimbus-blue-40 | #7FA4C5 |
+| --fui-nimbus-blue-50 | #5482B4 |
+| --fui-nimbus-blue-60 | #3D6190 |
+| --fui-nimbus-blue-70 | #37537B |
+| --fui-nimbus-blue-80 | #2F4566 |
+| --fui-nimbus-blue-90 | #283852 |
+| --fui-nimbus-blue-100 | #202B3E |
+| --fui-nimbus-blue-110 | #171E2B |
+| --fui-nimbus-blue-10 | #040609 |
+| --fui-nimbus-blue-20 | #101824 |
+| --fui-nimbus-blue-30 | #1B2A3F |
+| --fui-nimbus-blue-40 | #273C5A |
+| --fui-nimbus-blue-50 | #324E75 |
+| --fui-nimbus-blue-60 | #3D6190 |
+| --fui-nimbus-blue-70 | #4879B6 |
+| --fui-nimbus-blue-80 | #6793C7 |
+| --fui-nimbus-blue-90 | #88ADD6 |
+| --fui-nimbus-blue-100 | #ABC7E4 |
+| --fui-nimbus-blue-110 | #CFE0F1 |
+
+### Gray
+
+| Token | Value |
+|-------|-------|
+| --fui-gray-cool-10 | #FCFCFD |
+| --fui-gray-cool-20 | #DCDDE8 |
+| --fui-gray-cool-30 | #BDBFD4 |
+| --fui-gray-cool-40 | #9CA1C0 |
+| --fui-gray-cool-50 | #7B84AD |
+| --fui-gray-cool-60 | #5D6A97 |
+| --fui-gray-cool-70 | #495682 |
+| --fui-gray-cool-80 | #37426C |
+| --fui-gray-cool-90 | #263054 |
+| --fui-gray-cool-100 | #181F3A |
+| --fui-gray-cool-110 | #0B0F1E |
+| --fui-gray-neutral-10 | #FCFCFD |
+| --fui-gray-neutral-20 | #DCDDE7 |
+| --fui-gray-neutral-30 | #BEC0CF |
+| --fui-gray-neutral-40 | #A1A5B6 |
+| --fui-gray-neutral-50 | #858B9C |
+| --fui-gray-neutral-60 | #6C727F |
+| --fui-gray-neutral-70 | #535C70 |
+| --fui-gray-neutral-80 | #3D485F |
+| --fui-gray-neutral-90 | #2A344B |
+| --fui-gray-neutral-100 | #192234 |
+| --fui-gray-neutral-110 | #0B101B |
+| --fui-gray-iron-10 | #FCFCFC |
+| --fui-gray-iron-20 | #E1E1E1 |
+| --fui-gray-iron-30 | #C5C5C7 |
+| --fui-gray-iron-40 | #A9A9AE |
+| --fui-gray-iron-50 | #8D8D95 |
+| --fui-gray-iron-60 | #71717B |
+| --fui-gray-iron-70 | #5E5E67 |
+| --fui-gray-iron-80 | #4B4B53 |
+| --fui-gray-iron-90 | #38383F |
+| --fui-gray-iron-100 | #25252B |
+| --fui-gray-iron-110 | #131316 |
+| --fui-gray-true-10 | #FCFCFC |
+| --fui-gray-true-20 | #E1E1E1 |
+| --fui-gray-true-30 | #C5C5C5 |
+| --fui-gray-true-40 | #AAAAAA |
+| --fui-gray-true-50 | #8E8E8E |
+| --fui-gray-true-60 | #737373 |
+| --fui-gray-true-70 | #5F5F5F |
+| --fui-gray-true-80 | #4B4B4B |
+| --fui-gray-true-90 | #373737 |
+| --fui-gray-true-100 | #232323 |
+| --fui-gray-true-110 | #0F0F0F |
+| --fui-gray-cool-10 | #0B0F1E |
+| --fui-gray-cool-20 | #1B2342 |
+| --fui-gray-cool-30 | #2D3963 |
+| --fui-gray-cool-40 | #425182 |
+| --fui-gray-cool-50 | #59699F |
+| --fui-gray-cool-60 | #7D89AF |
+| --fui-gray-cool-70 | #979FBE |
+| --fui-gray-cool-80 | #B1B5CD |
+| --fui-gray-cool-90 | #CACCDD |
+| --fui-gray-cool-100 | #E3E4ED |
+| --fui-gray-cool-110 | #FCFCFD |
+| --fui-gray-neutral-10 | #0B101B |
+| --fui-gray-neutral-20 | #1F2B41 |
+| --fui-gray-neutral-30 | #374764 |
+| --fui-gray-neutral-40 | #536583 |
+| --fui-gray-neutral-50 | #75849B |
+| --fui-gray-neutral-60 | #9DA4AE |
+| --fui-gray-neutral-70 | #AFB4BF |
+| --fui-gray-neutral-80 | #C1C5D0 |
+| --fui-gray-neutral-90 | #D4D6E0 |
+| --fui-gray-neutral-100 | #E8E8EF |
+| --fui-gray-neutral-110 | #FCFCFD |
+| --fui-gray-iron-10 | #131316 |
+| --fui-gray-iron-20 | #2E2E35 |
+| --fui-gray-iron-30 | #494954 |
+| --fui-gray-iron-40 | #646473 |
+| --fui-gray-iron-50 | #818190 |
+| --fui-gray-iron-60 | #A0A0AB |
+| --fui-gray-iron-70 | #B3B3BA |
+| --fui-gray-iron-80 | #C6C6CA |
+| --fui-gray-iron-90 | #D8D8DA |
+| --fui-gray-iron-100 | #EAEAEB |
+| --fui-gray-iron-110 | #FCFCFC |
+| --fui-gray-true-10 | #0F0F0F |
+| --fui-gray-true-20 | #2D2D2D |
+| --fui-gray-true-30 | #4A4A4A |
+| --fui-gray-true-40 | #686868 |
+| --fui-gray-true-50 | #858585 |
+| --fui-gray-true-60 | #A3A3A3 |
+| --fui-gray-true-70 | #B5B5B5 |
+| --fui-gray-true-80 | #C7C7C7 |
+| --fui-gray-true-90 | #D8D8D8 |
+| --fui-gray-true-100 | #EAEAEA |
+| --fui-gray-true-110 | #FCFCFC |
+
+### Moss
+
+| Token | Value |
+|-------|-------|
+| --fui-moss-10 | #FAFDF7 |
+| --fui-moss-20 | #DCF1C7 |
+| --fui-moss-30 | #BFE598 |
+| --fui-moss-40 | #A1D868 |
+| --fui-moss-50 | #84CB39 |
+| --fui-moss-60 | #669F2A |
+| --fui-moss-70 | #578724 |
+| --fui-moss-80 | #486F1E |
+| --fui-moss-90 | #385718 |
+| --fui-moss-100 | #294011 |
+| --fui-moss-110 | #1A280B |
+| --fui-moss-10 | #1A280B |
+| --fui-moss-20 | #304914 |
+| --fui-moss-30 | #456B1D |
+| --fui-moss-40 | #5B8C26 |
+| --fui-moss-50 | #71AE2F |
+| --fui-moss-60 | #86CB3C |
+| --fui-moss-70 | #9DD561 |
+| --fui-moss-80 | #B4E086 |
+| --fui-moss-90 | #CBEAAC |
+| --fui-moss-100 | #E2F3D1 |
+| --fui-moss-110 | #FAFDF7 |
+
+### Green
+
+| Token | Value |
+|-------|-------|
+| --fui-green-light-10 | #FAFEF5 |
+| --fui-green-light-20 | #E0F9C4 |
+| --fui-green-light-30 | #C4F294 |
+| --fui-green-light-40 | #A5EB64 |
+| --fui-green-light-50 | #85E336 |
+| --fui-green-light-60 | #66C61D |
+| --fui-green-light-70 | #54A51B |
+| --fui-green-light-80 | #448418 |
+| --fui-green-light-90 | #346514 |
+| --fui-green-light-100 | #244610 |
+| --fui-green-light-110 | #15290A |
+| --fui-green-10 | #F6FEF9 |
+| --fui-green-20 | #C0F8D7 |
+| --fui-green-30 | #8AF3B8 |
+| --fui-green-40 | #53ED9C |
+| --fui-green-50 | #1DE883 |
+| --fui-green-60 | #12B76A |
+| --fui-green-70 | #0F9D5D |
+| --fui-green-80 | #0D824F |
+| --fui-green-90 | #0A6840 |
+| --fui-green-100 | #084D31 |
+| --fui-green-110 | #053321 |
+| --fui-green-light-10 | #15290A |
+| --fui-green-light-20 | #295012 |
+| --fui-green-light-30 | #3E7719 |
+| --fui-green-light-40 | #54A01E |
+| --fui-green-light-50 | #6BCA22 |
+| --fui-green-light-60 | #85E13A |
+| --fui-green-light-70 | #9FE85E |
+| --fui-green-light-80 | #B8EF83 |
+| --fui-green-light-90 | #CFF5A8 |
+| --fui-green-light-100 | #E5FACE |
+| --fui-green-light-110 | #FAFEF5 |
+| --fui-green-10 | #053321 |
+| --fui-green-20 | #0A5737 |
+| --fui-green-30 | #117A4C |
+| --fui-green-40 | #199B60 |
+| --fui-green-50 | #22BB72 |
+| --fui-green-60 | #32D583 |
+| --fui-green-70 | #57E097 |
+| --fui-green-80 | #7CE9AD |
+| --fui-green-90 | #A4F2C5 |
+| --fui-green-100 | #CCF8DE |
+| --fui-green-110 | #F6FEF9 |
+
+### Cyan
+
+| Token | Value |
+|-------|-------|
+| --fui-cyan-10 | #F5FEFF |
+| --fui-cyan-20 | #BDF7FF |
+| --fui-cyan-30 | #86EEFE |
+| --fui-cyan-40 | #4FE2FC |
+| --fui-cyan-50 | #19D4FA |
+| --fui-cyan-60 | #06AED4 |
+| --fui-cyan-70 | #0992B5 |
+| --fui-cyan-80 | #0C7797 |
+| --fui-cyan-90 | #0D5F7B |
+| --fui-cyan-100 | #0C495F |
+| --fui-cyan-110 | #0B3445 |
+| --fui-cyan-10 | #0B3445 |
+| --fui-cyan-20 | #0F5068 |
+| --fui-cyan-30 | #116E8B |
+| --fui-cyan-40 | #138EB0 |
+| --fui-cyan-50 | #14B1D6 |
+| --fui-cyan-60 | #22CCEE |
+| --fui-cyan-70 | #4ADAF4 |
+| --fui-cyan-80 | #72E6F9 |
+| --fui-cyan-90 | #9DF0FC |
+| --fui-cyan-100 | #C8F8FE |
+| --fui-cyan-110 | #F5FEFF |
+
+### Blue
+
+| Token | Value |
+|-------|-------|
+| --fui-blue-10 | #F5FAFF |
+| --fui-blue-20 | #CCE5FF |
+| --fui-blue-30 | #A4D0FE |
+| --fui-blue-40 | #7CBBFD |
+| --fui-blue-50 | #55A6FC |
+| --fui-blue-60 | #2E90FA |
+| --fui-blue-70 | #1077F3 |
+| --fui-blue-80 | #1062CF |
+| --fui-blue-90 | #124EA8 |
+| --fui-blue-100 | #123C83 |
+| --fui-blue-110 | #102C60 |
+| --fui-blue-dark-10 | #F5F8FF |
+| --fui-blue-dark-20 | #CCDCFF |
+| --fui-blue-dark-30 | #A3C0FF |
+| --fui-blue-dark-40 | #7BA5FF |
+| --fui-blue-dark-50 | #528AFF |
+| --fui-blue-dark-60 | #2970FF |
+| --fui-blue-dark-70 | #0256FF |
+| --fui-blue-dark-80 | #0049DA |
+| --fui-blue-dark-90 | #003CB4 |
+| --fui-blue-dark-100 | #002F8D |
+| --fui-blue-dark-110 | #002266 |
+| --fui-blue-10 | #102C60 |
+| --fui-blue-20 | #12418B |
+| --fui-blue-30 | #1259B7 |
+| --fui-blue-40 | #1075E7 |
+| --fui-blue-50 | #2C94F7 |
+| --fui-blue-60 | #53B1FD |
+| --fui-blue-70 | #73BEFE |
+| --fui-blue-80 | #93CCFE |
+| --fui-blue-90 | #B4DBFF |
+| --fui-blue-100 | #D4EAFF |
+| --fui-blue-110 | #F5FAFF |
+| --fui-blue-dark-10 | #002266 |
+| --fui-blue-dark-20 | #003295 |
+| --fui-blue-dark-30 | #0041C4 |
+| --fui-blue-dark-40 | #0050F3 |
+| --fui-blue-dark-50 | #236CFF |
+| --fui-blue-dark-60 | #528BFF |
+| --fui-blue-dark-70 | #73A0FF |
+| --fui-blue-dark-80 | #93B5FF |
+| --fui-blue-dark-90 | #B4CBFF |
+| --fui-blue-dark-100 | #D4E1FF |
+| --fui-blue-dark-110 | #F5F8FF |
+
+### Indigo
+
+| Token | Value |
+|-------|-------|
+| --fui-indigo-10 | #F5F8FF |
+| --fui-indigo-20 | #D6E0FE |
+| --fui-indigo-30 | #B7C7FD |
+| --fui-indigo-40 | #99ACFB |
+| --fui-indigo-50 | #7D90F7 |
+| --fui-indigo-60 | #6172F3 |
+| --fui-indigo-70 | #4052E8 |
+| --fui-indigo-80 | #2436D8 |
+| --fui-indigo-90 | #2631AB |
+| --fui-indigo-100 | #242B82 |
+| --fui-indigo-110 | #1F235B |
+| --fui-indigo-10 | #1F235B |
+| --fui-indigo-20 | #252E88 |
+| --fui-indigo-30 | #2638BA |
+| --fui-indigo-40 | #324CE1 |
+| --fui-indigo-50 | #5771EF |
+| --fui-indigo-60 | #8098F9 |
+| --fui-indigo-70 | #97ADFB |
+| --fui-indigo-80 | #ADC0FD |
+| --fui-indigo-90 | #C5D4FE |
+| --fui-indigo-100 | #DDE6FF |
+| --fui-indigo-110 | #F5F8FF |
+
+### Purple
+
+| Token | Value |
+|-------|-------|
+| --fui-purple-10 | #FAFAFF |
+| --fui-purple-20 | #DAD9FF |
+| --fui-purple-30 | #BEB8FE |
+| --fui-purple-40 | #A598FC |
+| --fui-purple-50 | #8E79FA |
+| --fui-purple-60 | #7A5AF8 |
+| --fui-purple-70 | #5D33F0 |
+| --fui-purple-80 | #4717DF |
+| --fui-purple-90 | #3F17AF |
+| --fui-purple-100 | #341682 |
+| --fui-purple-110 | #271258 |
+| --fui-purple-10 | #271258 |
+| --fui-purple-20 | #37178B |
+| --fui-purple-30 | #4219C2 |
+| --fui-purple-40 | #5229EA |
+| --fui-purple-50 | #7458F4 |
+| --fui-purple-60 | #9B8AFB |
+| --fui-purple-70 | #ABA0FC |
+| --fui-purple-80 | #BCB6FE |
+| --fui-purple-90 | #CFCCFE |
+| --fui-purple-100 | #E4E3FF |
+| --fui-purple-110 | #FAFAFF |
+
+### Fuchsia
+
+| Token | Value |
+|-------|-------|
+| --fui-fuchsia-10 | #FEFAFF |
+| --fui-fuchsia-20 | #F6D3FE |
+| --fui-fuchsia-30 | #EEAEFD |
+| --fui-fuchsia-40 | #E68AFA |
+| --fui-fuchsia-50 | #DD66F6 |
+| --fui-fuchsia-60 | #D444F1 |
+| --fui-fuchsia-70 | #CB21E9 |
+| --fui-fuchsia-80 | #AE19C5 |
+| --fui-fuchsia-90 | #8C189B |
+| --fui-fuchsia-100 | #691573 |
+| --fui-fuchsia-110 | #47104C |
+| --fui-fuchsia-10 | #47104C |
+| --fui-fuchsia-20 | #74167E |
+| --fui-fuchsia-30 | #A118B3 |
+| --fui-fuchsia-40 | #CC1BE8 |
+| --fui-fuchsia-50 | #D948F3 |
+| --fui-fuchsia-60 | #E478FA |
+| --fui-fuchsia-70 | #E991FC |
+| --fui-fuchsia-80 | #EEABFD |
+| --fui-fuchsia-90 | #F3C5FE |
+| --fui-fuchsia-100 | #F9DFFF |
+| --fui-fuchsia-110 | #FEFAFF |
+
+### Pink
+
+| Token | Value |
+|-------|-------|
+| --fui-pink-10 | #FEF6FB |
+| --fui-pink-20 | #FAD3EC |
+| --fui-pink-30 | #F7B0DF |
+| --fui-pink-40 | #F48DD2 |
+| --fui-pink-50 | #F16AC6 |
+| --fui-pink-60 | #EE46BC |
+| --fui-pink-70 | #E721A6 |
+| --fui-pink-80 | #C41886 |
+| --fui-pink-90 | #9B1566 |
+| --fui-pink-100 | #731249 |
+| --fui-pink-110 | #4C0D2F |
+| --fui-pink-10 | #4C0D2F |
+| --fui-pink-20 | #7C124E |
+| --fui-pink-30 | #AF166F |
+| --fui-pink-40 | #E31893 |
+| --fui-pink-50 | #EF41AE |
+| --fui-pink-60 | #F670C7 |
+| --fui-pink-70 | #F78CD1 |
+| --fui-pink-80 | #F8A7DB |
+| --fui-pink-90 | #F9C2E5 |
+| --fui-pink-100 | #FBDCF0 |
+| --fui-pink-110 | #FEF6FB |
+
+### Rose
+
+| Token | Value |
+|-------|-------|
+| --fui-rose-10 | #FFF5F6 |
+| --fui-rose-20 | #FFCFD5 |
+| --fui-rose-30 | #FDA9B6 |
+| --fui-rose-40 | #FC859A |
+| --fui-rose-50 | #F96080 |
+| --fui-rose-60 | #F63D68 |
+| --fui-rose-70 | #F0184F |
+| --fui-rose-80 | #CD1046 |
+| --fui-rose-90 | #A2103D |
+| --fui-rose-100 | #790E32 |
+| --fui-rose-110 | #510B24 |
+| --fui-rose-10 | #510B24 |
+| --fui-rose-20 | #840E35 |
+| --fui-rose-30 | #B91043 |
+| --fui-rose-40 | #F10E4C |
+| --fui-rose-50 | #F83E6B |
+| --fui-rose-60 | #FD6F8E |
+| --fui-rose-70 | #FE8AA0 |
+| --fui-rose-80 | #FEA4B4 |
+| --fui-rose-90 | #FFBFC8 |
+| --fui-rose-100 | #FFDADE |
+| --fui-rose-110 | #FFF5F6 |
+
+### Orange
+
+| Token | Value |
+|-------|-------|
+| --fui-orange-dark-10 | #FFF9F5 |
+| --fui-orange-dark-20 | #FFDAC5 |
+| --fui-orange-dark-30 | #FFB995 |
+| --fui-orange-dark-40 | #FF9565 |
+| --fui-orange-dark-50 | #FF6E35 |
+| --fui-orange-dark-60 | #FF4405 |
+| --fui-orange-dark-70 | #DE3605 |
+| --fui-orange-dark-80 | #BA2C08 |
+| --fui-orange-dark-90 | #97220A |
+| --fui-orange-dark-100 | #751A0B |
+| --fui-orange-dark-110 | #55130A |
+| --fui-orange-10 | #FEFAF5 |
+| --fui-orange-20 | #FAE3CB |
+| --fui-orange-30 | #F7CAA1 |
+| --fui-orange-40 | #F4AC77 |
+| --fui-orange-50 | #F18C4B |
+| --fui-orange-60 | #EF6820 |
+| --fui-orange-70 | #D85314 |
+| --fui-orange-80 | #B54315 |
+| --fui-orange-90 | #923515 |
+| --fui-orange-100 | #722913 |
+| --fui-orange-110 | #521D10 |
+| --fui-orange-dark-10 | #55130A |
+| --fui-orange-dark-20 | #7D1D0B |
+| --fui-orange-dark-30 | #A6280B |
+| --fui-orange-dark-40 | #D13509 |
+| --fui-orange-dark-50 | #FA460A |
+| --fui-orange-dark-60 | #FF692E |
+| --fui-orange-dark-70 | #FF8A56 |
+| --fui-orange-dark-80 | #FFA87E |
+| --fui-orange-dark-90 | #FFC5A5 |
+| --fui-orange-dark-100 | #FFE0CD |
+| --fui-orange-dark-110 | #FFF9F5 |
+| --fui-orange-10 | #521D10 |
+| --fui-orange-20 | #792C14 |
+| --fui-orange-30 | #A13C16 |
+| --fui-orange-40 | #CB4E17 |
+| --fui-orange-50 | #EB6721 |
+| --fui-orange-60 | #F38744 |
+| --fui-orange-70 | #F4A368 |
+| --fui-orange-80 | #F6BC8C |
+| --fui-orange-90 | #F8D3B0 |
+| --fui-orange-100 | #FBE8D3 |
+| --fui-orange-110 | #FEFAF5 |
+
+### Yellow
+
+| Token | Value |
+|-------|-------|
+| --fui-yellow-10 | #FEFDF0 |
+| --fui-yellow-20 | #FBF5C0 |
+| --fui-yellow-30 | #F9E990 |
+| --fui-yellow-40 | #F8D95F |
+| --fui-yellow-50 | #F7C62E |
+| --fui-yellow-60 | #EAAA08 |
+| --fui-yellow-70 | #C9840A |
+| --fui-yellow-80 | #A9640B |
+| --fui-yellow-90 | #89490B |
+| --fui-yellow-100 | #6B320B |
+| --fui-yellow-110 | #4D2009 |
+| --fui-yellow-10 | #4D2009 |
+| --fui-yellow-20 | #70360B |
+| --fui-yellow-30 | #95510B |
+| --fui-yellow-40 | #BA730B |
+| --fui-yellow-50 | #E19C09 |
+| --fui-yellow-60 | #FAC515 |
+| --fui-yellow-70 | #F9D542 |
+| --fui-yellow-80 | #F9E26F |
+| --fui-yellow-90 | #FAED9B |
+| --fui-yellow-100 | #FCF6C6 |
+| --fui-yellow-110 | #FEFDF0 |
+
+### Alpha
+
+| Token | Value |
+|-------|-------|
+| --fui-alpha-0 | #1A1A1A00 |
+| --fui-alpha-20 | #1A1A1A0F |
+| --fui-alpha-30 | #1A1A1A1A |
+| --fui-alpha-40 | #1A1A1A33 |
+| --fui-alpha-50 | #1A1A1A4D |
+| --fui-alpha-60 | #1A1A1A66 |
+| --fui-alpha-70 | #1A1A1A80 |
+| --fui-alpha-80 | #1A1A1A99 |
+| --fui-alpha-90 | #1A1A1AB3 |
+| --fui-alpha-100 | #1A1A1AFF |
+| --fui-alpha-0 | #FFFFFF00 |
+| --fui-alpha-20 | #FFFFFF0F |
+| --fui-alpha-30 | #FFFFFF1A |
+| --fui-alpha-40 | #FFFFFF33 |
+| --fui-alpha-50 | #FFFFFF4D |
+| --fui-alpha-60 | #FFFFFF66 |
+| --fui-alpha-70 | #FFFFFF80 |
+| --fui-alpha-80 | #FFFFFF99 |
+| --fui-alpha-90 | #FFFFFFB3 |
+| --fui-alpha-100 | #FFFFFFFF |
+
+### Shadow
+
+| Token | Value |
+|-------|-------|
+| --fui-shadow-xs | 0 1px 2px rgba(0, 0, 0, 0.05) |
+| --fui-shadow-sm | 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) |
+| --fui-shadow-md | 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05) |
+| --fui-shadow-lg | 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05) |
+| --fui-shadow-xl | 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04) |
+| --fui-shadow-2xl | 0 25px 50px rgba(0, 0, 0, 0.15) |
+| --fui-shadow-inner | inset 0 2px 4px rgba(0, 0, 0, 0.05) |
+| --fui-shadow-xs | 0 1px 2px rgba(0, 0, 0, 0.4) |
+| --fui-shadow-sm | 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3) |
+| --fui-shadow-md | 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3) |
+| --fui-shadow-lg | 0 10px 15px rgba(0, 0, 0, 0.55), 0 4px 6px rgba(0, 0, 0, 0.35) |
+| --fui-shadow-xl | 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.35) |
+| --fui-shadow-2xl | 0 25px 50px rgba(0, 0, 0, 0.7) |
+| --fui-shadow-inner | inset 0 2px 4px rgba(0, 0, 0, 0.3) |
+
+### Bg
+
+| Token | Value |
+|-------|-------|
+| --fui-bg-default | var(--fui-neutral-10) |
+| --fui-bg-subtle | var(--fui-neutral-20) |
+| --fui-bg-muted | var(--fui-neutral-30) |
+| --fui-bg-inverse | var(--fui-neutral-110) |
+| --fui-bg-primary | var(--fui-primary-10) |
+| --fui-bg-error | var(--fui-error-20) |
+| --fui-bg-success | var(--fui-success-20) |
+| --fui-bg-warning | var(--fui-warning-20) |
+| --fui-bg-info | var(--fui-info-20) |
+| --fui-bg-disable | var(--fui-neutral-40) |
+| --fui-bg-default | var(--fui-neutral-10) |
+| --fui-bg-subtle | var(--fui-neutral-20) |
+| --fui-bg-muted | var(--fui-neutral-30) |
+| --fui-bg-inverse | var(--fui-neutral-110) |
+| --fui-bg-primary | var(--fui-primary-10) |
+| --fui-bg-error | var(--fui-error-20) |
+| --fui-bg-success | var(--fui-success-20) |
+| --fui-bg-warning | var(--fui-warning-20) |
+| --fui-bg-info | var(--fui-info-20) |
+| --fui-bg-disable | var(--fui-neutral-40) |
+
+### Fill
+
+| Token | Value |
+|-------|-------|
+| --fui-fill-error | var(--fui-error-60) |
+| --fui-fill-success | var(--fui-success-60) |
+| --fui-fill-warning | var(--fui-warning-60) |
+| --fui-fill-info | var(--fui-info-60) |
+| --fui-fill-error-hover | var(--fui-error-110) |
+| --fui-fill-success-hover | var(--fui-success-110) |
+| --fui-fill-warning-hover | var(--fui-warning-110) |
+| --fui-fill-info-hover | var(--fui-info-110) |
+| --fui-fill-error | var(--fui-error-60) |
+| --fui-fill-success | var(--fui-success-60) |
+| --fui-fill-warning | var(--fui-warning-60) |
+| --fui-fill-info | var(--fui-info-60) |
+| --fui-fill-error-hover | var(--fui-error-110) |
+| --fui-fill-success-hover | var(--fui-success-110) |
+| --fui-fill-warning-hover | var(--fui-warning-110) |
+| --fui-fill-info-hover | var(--fui-info-110) |
+
+### State
+
+| Token | Value |
+|-------|-------|
+| --fui-state-focus-ring | var(--fui-primary-50) |
+| --fui-state-selected-bg | var(--fui-primary-20) |
+| --fui-state-selected-fg | var(--fui-primary-80) |
+| --fui-state-overlay-hover | rgba(17, 21, 27, 0.06) |
+| --fui-state-overlay-pressed | rgba(17, 21, 27, 0.12) |
+| --fui-state-focus-ring-width | 2px |
+| --fui-state-focus-ring-offset | 2px |
+| --fui-state-disabled-opacity | 0.5 |
+| --fui-state-focus-ring | var(--fui-primary-50) |
+| --fui-state-selected-bg | var(--fui-primary-20) |
+| --fui-state-selected-fg | var(--fui-primary-80) |
+| --fui-state-overlay-hover | rgba(244, 247, 251, 0.08) |
+| --fui-state-overlay-pressed | rgba(244, 247, 251, 0.16) |
+| --fui-state-focus-ring-width | 2px |
+| --fui-state-focus-ring-offset | 2px |
+| --fui-state-disabled-opacity | 0.5 |
+
+### Field
+
+| Token | Value |
+|-------|-------|
+| --fui-field-bg | var(--fui-neutral-10) |
+| --fui-field-bg-disabled | var(--fui-neutral-20) |
+| --fui-field-border | var(--fui-neutral-40) |
+| --fui-field-border-hover | var(--fui-neutral-60) |
+| --fui-field-border-focus | var(--fui-primary-50) |
+| --fui-field-border-error | var(--fui-error-60) |
+| --fui-field-placeholder | var(--fui-neutral-70) |
+| --fui-field-bg | var(--fui-neutral-10) |
+| --fui-field-bg-disabled | var(--fui-neutral-20) |
+| --fui-field-border | var(--fui-neutral-40) |
+| --fui-field-border-hover | var(--fui-neutral-60) |
+| --fui-field-border-focus | var(--fui-primary-60) |
+| --fui-field-border-error | var(--fui-error-60) |
+| --fui-field-placeholder | var(--fui-neutral-70) |
 
 ### Card
 
 | Token | Value |
 |-------|-------|
-| --fui-card-padding | var(--fui-spacing-06) |
-| --fui-card-shadow | 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) |
-| --fui-card-shadow-hover | 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12) |
-| --fui-card-border-radius | var(--fui-border-radius-md) |
+| --fui-card-padding | var(--fui-spacing-7) |
+| --fui-card-shadow | var(--fui-shadow-sm) |
+| --fui-card-shadow-hover | var(--fui-shadow-lg) |
+| --fui-card-border-radius | var(--fui-radius-xl) |
+| --fui-card-padding | var(--fui-spacing-9) |
+| --fui-card-shadow | var(--fui-shadow-sm) |
+| --fui-card-shadow-hover | var(--fui-shadow-lg) |
+| --fui-card-border-radius | var(--fui-radius-md) |