@raintonic/formaui 0.2.0

package/llms-full.txt

@@ -0,0 +1,1627 @@
+# FormaUI — Full API Reference
+
+> Angular 21 component library. Install: `npm install formaui`
+
+---
+
+## accordion
+
+Groups multiple `fui-expansion-panel` components. In single mode (default), only one panel can be expanded at a time. In multi mode, multiple panels can be expanded simultaneously.
+
+- **Import**: `import { FuiAccordionComponent } from 'formaui/components/accordion'`
+- **Selector**: `fui-accordion`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| multi | boolean | false | no |
+| displayMode | AccordionDisplayMode | 'default' | no |
+
+### Sub-components
+
+#### FuiExpansionPanelComponent
+
+- **Selector**: `fui-expansion-panel`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| expanded | boolean | false | no |
+| disabled | boolean | false | no |
+| hideToggle | boolean | false | no |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| expandedChange | boolean |
+| opened | void |
+| closed | void |
+| afterExpand | void |
+| afterCollapse | void |
+
+---
+
+## alert
+
+A flexible alert component for displaying informational messages, warnings, errors, and success notifications. Can be used inline in pages or as part of the notification system.
+
+- **Import**: `import { FuiAlertComponent } from 'formaui/components/alert'`
+- **Selector**: `fui-alert`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| variant | FuiAlertVariant | 'info' | no |
+| description | string | null | null | no |
+| icon | string | null | null | no |
+| title | string | - | yes |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| closed | void |
+
+---
+
+## 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.
+
+- **Import**: `import { FuiAutocompleteComponent } from 'formaui/components/autocomplete'`
+- **Selector**: `fui-autocomplete`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| errorStateMatcher | ErrorStateMatcher | null | null | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| valueChange | unknown |
+| selectionChange | FuiAutocompleteChange |
+| openedChange | boolean |
+| searchChange | string |
+| addNew | void |
+| refresh | void |
+
+---
+
+## avatar
+
+- **Import**: `import { FuiAvatarComponent } from 'formaui/components/avatar'`
+- **Selector**: `fui-avatar`
+
+#### Inputs
+
+| 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 |
+
+---
+
+## badge
+
+- **Import**: `import { FuiBadgeComponent } from 'formaui/components/badge'`
+- **Selector**: `fui-badge`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| icon | string | null | null | no |
+| customColor | string | null | null | no |
+| size | FuiBadgeSize | 'md' | no |
+| variant | FuiBadgeVariant | 'primary' | 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
+
+- **Import**: `import { FuiBreadcrumbComponent } from 'formaui/components/breadcrumb'`
+- **Selector**: `fui-breadcrumb`
+
+No public inputs or outputs.
+
+### Sub-components
+
+#### FuiBreadcrumbItemComponent
+
+- **Selector**: `fui-breadcrumb-item`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| routerLink | string | unknown[] | null | null | no |
+| disabled | boolean | false | no |
+
+---
+
+## button
+
+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]`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| variant | ButtonVariant | 'primary' | no |
+| size | ButtonSize | 'md' | no |
+| disabled | boolean | false | no |
+| fullWidth | boolean | false | no |
+| loading | boolean | false | no |
+| iconOnly | boolean | false | 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>
+
+<!-- Danger button for destructive actions -->
+<button fuiButton variant="danger">Delete</button>
+
+<!-- Loading state -->
+<button fuiButton [loading]="isLoading">Save</button>
+
+<!-- Icon-only button -->
+<button fuiButton variant="icon" 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="danger"` 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
+
+A container component that groups multiple buttons together, creating a unified visual element with connected borders. Follows Carbon Design System patterns.
+
+- **Import**: `import { FuiButtonGroupComponent } from 'formaui/components/button-group'`
+- **Selector**: `fui-button-group`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| 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.
+
+- **Import**: `import { FuiCardComponent } from 'formaui/components/card'`
+- **Selector**: `fui-card`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| variant | FuiCardVariant | 'outlined' | no |
+| padding | FuiCardPadding | 'lg' | no |
+
+### Sub-components
+
+#### FuiCardActionsComponent
+
+- **Selector**: `fui-card-actions`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| align | 'start' | 'center' | 'end' | 'end' | no |
+
+#### FuiCardHeaderComponent
+
+- **Selector**: `fui-card-header`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| title | string | - | no |
+| subtitle | string | - | no |
+
+---
+
+## checkbox
+
+A checkbox component with full Angular Reactive Forms support. Compatible with Angular Material's mat-checkbox interface.
+
+- **Import**: `import { FuiCheckboxComponent } from 'formaui/components/checkbox'`
+- **Selector**: `fui-checkbox`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| readonly | boolean | false | no |
+| checked | boolean | false | no |
+| disabled | boolean | false | no |
+| 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 |
+| disableRipple | boolean | false | no |
+| errorStateMatcher | ErrorStateMatcher | null | null | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| change | FuiCheckboxChange |
+| indeterminateChange | boolean |
+
+---
+
+## data-table
+
+- **Import**: `import { FuiAdvancedDataTableComponent } from 'formaui/components/data-table'`
+- **Selector**: `fui-advanced-data-table`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| data | T[] | [] | no |
+| sort | { field: string; direction: 'ASC' | 'DESC' } | null | null | no |
+| filters | ColumnFilter[] | [] | no |
+| config | AdvancedDataTableConfig | - | yes |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| sortChange | { field: string; direction: 'ASC' | 'DESC' } | null |
+| filtersChange | ColumnFilter[] |
+| rowDblClick | T |
+
+---
+
+## date-picker
+
+- **Import**: `import { FuiDatePickerComponent } from 'formaui/components/date-picker'`
+- **Selector**: `fui-date-picker`
+
+#### Inputs
+
+| 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 |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| valueChange | DatePickerModelValue |
+| dateChange | DatePickerModelValue |
+| openedChange | boolean |
+
+---
+
+## divider
+
+- **Import**: `import { FuiDividerComponent } from 'formaui/components/divider'`
+- **Selector**: `fui-divider`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| orientation | FuiDividerOrientation | 'horizontal' | no |
+| textAlign | FuiDividerTextAlign | 'center' | no |
+
+---
+
+## drawer
+
+- **Import**: `import { FuiDrawerComponent } from 'formaui/components/drawer'`
+- **Selector**: `fui-drawer`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| position | DrawerPosition | 'right' | no |
+| mode | DrawerMode | 'overlay' | no |
+| opened | boolean | false | no |
+| hasBackdrop | boolean | true | no |
+| closeOnBackdropClick | boolean | true | no |
+| closeOnEsc | boolean | true | no |
+| showCloseButton | boolean | true | no |
+| ariaLabel | string | null | null | no |
+| ariaLabelledBy | string | null | null | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| openedChange | boolean |
+| closed | void |
+
+---
+
+## dynamic-form
+
+A component that automatically renders forms based on a JSON configuration. It takes a FormGroup and a configuration object that specifies the form structure.
+
+- **Import**: `import { FuiDynamicFormRendererComponent } from 'formaui/components/dynamic-form'`
+- **Selector**: `fui-dynamic-form-renderer`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| formGroup | FormGroup | - | yes |
+| config | DynamicFormConfig | - | yes |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| autocompleteAction | DynamicFormAutocompleteEvent |
+| fileChange | DynamicFormFileEvent |
+
+---
+
+## empty-state
+
+- **Import**: `import { FuiEmptyStateComponent } from 'formaui/components/empty-state'`
+- **Selector**: `fui-empty-state`
+
+#### Inputs
+
+| 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 |
+
+---
+
+## file-upload
+
+A file upload component with drag-and-drop support, file previews, and validation.
+
+- **Import**: `import { FuiFileUploadComponent } from 'formaui/components/file-upload'`
+- **Selector**: `fui-file-upload`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| multiple | boolean | false | no |
+| disabled | boolean | false | no |
+| showPreview | boolean | true | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| filesSelected | FileUploadFile[] |
+| fileRemoved | FileUploadFile |
+| filesDropped | FileUploadFile[] |
+| validationErrors | FileUploadValidationError[] |
+
+---
+
+## form-field
+
+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`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| 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
+
+- **Selector**: `fui-error`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| key | string | - | no |
+
+#### FuiHintComponent
+
+- **Selector**: `fui-hint`
+
+No public inputs or outputs.
+
+#### FuiLabelComponent
+
+- **Selector**: `fui-label`
+
+No public inputs or outputs.
+
+#### FuiPrefixDirective
+
+- **Selector**: `[fuiPrefix]`
+
+No public inputs or outputs.
+
+#### FuiSuffixDirective
+
+- **Selector**: `[fuiSuffix]`
+
+No public inputs or outputs.
+
+---
+
+## icon
+
+A wrapper component for Phosphor Icons with consistent sizing and styling. Provides easy access to the complete Phosphor Icons library with theme integration.
+
+- **Import**: `import { FuiIconComponent } from 'formaui/components/icon'`
+- **Selector**: `fui-icon`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| size | FuiIconSize | 'md' | no |
+| weight | FuiIconWeight | 'regular' | no |
+| color | string | - | no |
+| ariaLabel | string | - | no |
+| name | string | - | yes |
+
+---
+
+## input
+
+An input directive that integrates seamlessly with fui-form-field and Angular Forms. Follows Angular Material patterns with Carbon Design System styling.
+
+- **Import**: `import { FuiInputDirective } from 'formaui/components/input'`
+- **Selector**: `input[fuiInput], textarea[fuiInput], select[fuiInput]`
+
+#### Inputs
+
+| 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 |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| valueChange | string |
+
+---
+
+## list
+
+- **Import**: `import { FuiListComponent } from 'formaui/components/list'`
+- **Selector**: `fui-list`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| selectionMode | FuiListSelectionMode | 'none' | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| selectionChange | FuiListSelectionChange |
+
+### Sub-components
+
+#### FuiListItemComponent
+
+- **Selector**: `fui-list-item`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| value | unknown | undefined | no |
+| disabled | boolean | false | no |
+
+---
+
+## 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.
+
+- **Import**: `import { FuiNumberInputComponent } from 'formaui/components/number-input'`
+- **Selector**: `fui-number-input`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| 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 |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| valueChange | number | null |
+
+---
+
+## paginator
+
+A pagination component that handles navigation through pages with: - Previous/Next navigation buttons (disabled at boundaries) - Page number buttons (at least 4 visible) - Ellipsis (...) for remaining pages when there are more than 4 pages - Emits page selection via output signal - Keyboard support for accessibility
+
+- **Import**: `import { FuiPaginatorComponent } from 'formaui/components/paginator'`
+- **Selector**: `fui-paginator`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| numberOfItems | number | - | yes |
+| pageSize | number | - | yes |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| pageSelected | number |
+
+---
+
+## password-input
+
+A password input component with visibility toggle and optional strength meter. Integrates with fui-form-field and Angular Forms.
+
+- **Import**: `import { FuiPasswordInputComponent } from 'formaui/components/password-input'`
+- **Selector**: `fui-password-input`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| disabled | boolean | false | no |
+| readonly | boolean | false | no |
+| showStrengthMeter | boolean | false | no |
+| errorStateMatcher | ErrorStateMatcher | null | null | no |
+
+---
+
+## popover
+
+Internal popover container component rendered inside the overlay. Provides a styled panel with optional arrow indicator.
+
+- **Import**: `import { FuiPopoverComponent } from 'formaui/components/popover'`
+- **Selector**: `fui-popover`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| position | PopoverPosition | 'bottom' | no |
+
+### Sub-components
+
+#### FuiPopoverTriggerDirective
+
+- **Selector**: `[fuiPopoverTrigger]`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| fuiPopoverPosition | PopoverPosition | 'bottom' | no |
+| fuiPopoverTriggerOn | PopoverTriggerMode | 'click' | no |
+| fuiPopoverShowDelay | number | 0 | no |
+| fuiPopoverHideDelay | number | 0 | no |
+| fuiPopoverHasArrow | boolean | true | no |
+| fuiPopoverCloseOnOutsideClick | boolean | true | no |
+| fuiPopoverDisabled | boolean | false | no |
+| fuiPopoverOpen | boolean | false | no |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| fuiPopoverOpened | void |
+| fuiPopoverClosed | void |
+
+---
+
+## progressbar
+
+A progress bar component compatible with Angular Material's mat-progress-bar interface.
+
+- **Import**: `import { FuiProgressbarComponent } from 'formaui/components/progressbar'`
+- **Selector**: `fui-progressbar`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| mode | ProgressBarMode | 'determinate' | no |
+| value | number | 0 | no |
+| bufferValue | number | 0 | no |
+| color | ProgressBarColor | 'primary' | no |
+| aria-label | string | null | null | no |
+| aria-labelledby | string | null | null | no |
+
+---
+
+## radio
+
+- **Import**: `import { FuiRadioButtonComponent } from 'formaui/components/radio'`
+- **Selector**: `fui-radio-button`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| disabled | boolean | false | no |
+| aria-label | string | null | null | no |
+| aria-labelledby | string | null | null | no |
+| value | unknown | - | yes |
+
+### Sub-components
+
+#### FuiRadioGroupComponent
+
+- **Selector**: `fui-radio-group`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| 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 |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| change | FuiRadioChange |
+
+---
+
+## select
+
+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`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| errorStateMatcher | ErrorStateMatcher | null | null | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| valueChange | unknown |
+| 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 |
+
+---
+
+## side-panel
+
+- **Import**: `import { FuiSidePanelComponent } from 'formaui/components/side-panel'`
+- **Selector**: `fui-side-panel`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| ariaLabel | string | null | null | no |
+| ariaLabelledBy | string | null | null | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| closed | void |
+
+---
+
+## sidebar
+
+A flexible sidebar component following Carbon Design System principles. Provides navigation with Angular Material-like APIs and responsive behavior.
+
+- **Import**: `import { FuiSidebarComponent } from 'formaui/components/sidebar'`
+- **Selector**: `fui-sidebar`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| mode | FuiSidebarMode | 'side' | no |
+| position | FuiSidebarPosition | 'start' | no |
+| navItems | FuiSidebarNavItem[] | [] | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| openedChange | boolean |
+| navItemClick | FuiSidebarNavItem |
+| backdropClick | void |
+
+---
+
+## skeleton
+
+- **Import**: `import { FuiSkeletonComponent } from 'formaui/components/skeleton'`
+- **Selector**: `fui-skeleton`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| variant | FuiSkeletonVariant | 'text' | no |
+| width | string | null | null | no |
+| height | string | null | null | no |
+| borderRadius | string | null | null | no |
+
+---
+
+## slider
+
+A slider (range input) component with single and dual-thumb (range) support. Integrates with Angular Reactive Forms via ControlValueAccessor.
+
+- **Import**: `import { FuiSliderComponent } from 'formaui/components/slider'`
+- **Selector**: `fui-slider`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| range | boolean | false | no |
+| showTicks | boolean | false | no |
+| 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 |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| valueChange | SliderValue |
+| dragStart | void |
+| dragEnd | void |
+
+---
+
+## spinner
+
+- **Import**: `import { FuiSpinnerComponent } from 'formaui/components/spinner'`
+- **Selector**: `fui-spinner`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| mode | FuiSpinnerMode | 'indeterminate' | no |
+| value | number | 0 | no |
+| size | FuiSpinnerSize | 'md' | no |
+| color | string | null | null | no |
+
+---
+
+## stepper
+
+A stepper component that guides users through a sequence of steps. Supports horizontal and vertical orientations, linear and non-linear navigation, step validation, and lazy content rendering.
+
+- **Import**: `import { FuiStepperComponent } from 'formaui/components/stepper'`
+- **Selector**: `fui-stepper`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| orientation | StepperOrientation | 'horizontal' | no |
+| linear | boolean | false | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| selectionChange | StepSelectionChange |
+| animationDone | void |
+
+### Sub-components
+
+#### FuiStepComponent
+
+- **Selector**: `fui-step`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| completed | boolean | false | no |
+| editable | boolean | true | no |
+| stepControl | AbstractControl | null | null | no |
+| optional | boolean | false | no |
+| label | string | - | yes |
+
+---
+
+## tab
+
+- **Import**: `import { FuiTabComponent } from 'formaui/components/tab'`
+- **Selector**: `fui-tab`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| label | string | - | yes |
+
+### Sub-components
+
+#### FuiTabGroupComponent
+
+- **Selector**: `fui-tab-group`
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| selectedTabChange | FuiTabComponent |
+
+---
+
+## 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
+
+- **Import**: `import { FuiTimePickerComponent } from 'formaui/components/time-picker'`
+- **Selector**: `fui-time-picker`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| format | TimeFormat | '24h' | no |
+| errorStateMatcher | ErrorStateMatcher | null | null | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| timeChange | string |
+
+### Sub-components
+
+#### FuiTimeListComponent
+
+- **Selector**: `fui-time-list`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| selectedValue | TimeValue | null | null | no |
+| format | TimeFormat | '24h' | no |
+| options | TimeOption[] | - | yes |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| optionSelected | TimeValue |
+
+---
+
+## toggle
+
+- **Import**: `import { FuiToggleComponent } from 'formaui/components/toggle'`
+- **Selector**: `fui-toggle`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| checked | boolean | false | no |
+| disabled | boolean | false | no |
+| 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 |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| change | FuiToggleChange |
+
+---
+
+## toolbar
+
+A top navigation toolbar following Carbon Design System principles. Provides space for logo, navigation menu items, and user profile area.
+
+- **Import**: `import { FuiToolbarComponent } from 'formaui/components/toolbar'`
+- **Selector**: `fui-toolbar`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| menuItems | FuiToolbarMenuItem[] | [] | no |
+| userProfile | FuiToolbarUserProfile | null | null | no |
+| activeMenuItemId | string | number | '' | no |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| menuItemClick | string | number |
+| userProfileClick | void |
+| sidebarToggle | void |
+
+---
+
+## tooltip
+
+- **Import**: `import { FuiTooltipComponent } from 'formaui/components/tooltip'`
+- **Selector**: `fui-tooltip`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| content | string | - | yes |
+| position | TooltipPosition | - | yes |
+| size | TooltipSize | - | yes |
+| maxWidth | string | - | yes |
+| arrow | boolean | - | yes |
+| tooltipId | string | - | yes |
+
+### Sub-components
+
+#### FuiTooltipDirective
+
+- **Selector**: `[fuiTooltip]`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| fuiTooltipPosition | TooltipPosition | 'top' | no |
+| fuiTooltipSize | TooltipSize | 'md' | no |
+| fuiTooltipTrigger | TooltipTrigger | 'hover' | no |
+| fuiTooltipShowDelay | number | 500 | no |
+| fuiTooltipHideDelay | number | 0 | no |
+| fuiTooltipDisabled | boolean | false | no |
+| fuiTooltipOffset | number | 8 | no |
+| fuiTooltipArrow | boolean | true | no |
+| fuiTooltipShow | boolean | false | no |
+| fuiTooltip | string | - | yes |
+
+---
+
+## tree
+
+- **Import**: `import { FuiTreeNodeComponent } from 'formaui/components/tree'`
+- **Selector**: `fui-tree-node`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| selectionMode | FuiTreeSelectionMode | 'none' | no |
+| checkboxState | 'checked' | 'unchecked' | 'indeterminate' | 'unchecked' | no |
+| flatNode | FuiFlatTreeNode | - | yes |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| toggle | void |
+| select | void |
+| checkboxChange | void |
+
+### Sub-components
+
+#### FuiTreeComponent
+
+- **Selector**: `fui-tree`
+
+##### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| selectionMode | FuiTreeSelectionMode | 'none' | no |
+
+##### Outputs
+
+| Name | Type |
+|------|------|
+| filterChange | string |
+
+---
+
+## tree-select
+
+- **Import**: `import { FuiTreeSelectComponent } from 'formaui/components/tree-select'`
+- **Selector**: `fui-tree-select`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| selectionMode | 'single' | 'multi' | 'checkbox' | 'single' | no |
+
+---
+
+## tree-table
+
+- **Import**: `import { FuiTreeTableComponent } from 'formaui/components/tree-table'`
+- **Selector**: `fui-tree-table`
+
+#### Inputs
+
+| Name | Type | Default | Required |
+|------|------|---------|----------|
+| sort | { field: string; direction: 'ASC' | 'DESC' } | null | null | no |
+| filters | FuiTreeTableColumnFilter[] | [] | no |
+| config | FuiTreeTableConfig | - | yes |
+
+#### Outputs
+
+| Name | Type |
+|------|------|
+| sortChange | { field: string; direction: 'ASC' | 'DESC' } | null |
+| filtersChange | FuiTreeTableColumnFilter[] |
+| rowDblClick | T |
+
+---
+
+## Design Tokens
+
+### Primary
+
+| 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
+
+| 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
+
+| 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) |
+
+### Success
+
+| 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) |
+
+### Warning
+
+| 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) |
+
+### Info
+
+| 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) |
+
+### Pink
+
+| 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 |
+
+### Orange
+
+| 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
+
+| 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
+
+| 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
+
+| 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) |
+
+### Text
+
+| 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) |
+
+### Border
+
+| 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) |
+
+### Surface
+
+| 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) |
+
+### Bg
+
+| Token | Value |
+|-------|-------|
+| --fui-bg | var(--fui-surface-bg) |
+
+### State
+
+| 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) |
+
+### Field
+
+| 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) |
+
+### Icon
+
+| 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) |
+
+### Background
+
+| Token | Value |
+|-------|-------|
+| --fui-background-primary | var(--fui-surface-00) |
+| --fui-background-hover | var(--fui-surface-02) |
+
+### Error
+
+| Token | Value |
+|-------|-------|
+| --fui-error | var(--fui-state-error) |
+
+### 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) |