# Finx Design System (@wchfs/finx-design-system)

> Private Angular component library for financial services UIs: white-label
> theming via CSS custom properties (7 brands + dark mode), WCAG 2.1 AA
> components incl. hand-rolled accessible charts, tables and forms.

CRITICAL rules for AI agents:
- Use ONLY fx-* components from this package — never naked <button>/<input>/<select>/<table>.
- Use ONLY semantic tokens via var(--token-name) — never raw hex or px colors.
- NEVER guess component properties: consult ai/manifest/components.json (or this file's full variant) first.
- Import the owning NgModule listed per component; most components are not standalone.
- Bootstrap contract (install, theme CSS, fonts, icons, config service): docs/consuming.md in the repo, shipped as part of the package README surface.

## Components
- `<fx-brand-logo>` (BrandLogoComponent, import FxCommonModule)
- `<fx-breadcrumbs>` (BreadcrumbsComponent, import FxBreadcrumbsModule)
- `<fx-calendar>` (CalendarComponent, import CalendarModule)
- `<fx-chip-option-box>` (ChipOptionBoxComponent, import FxSelectModule)
- `<fx-datepicker-toggle>` (DatepickerToggleComponent, import CalendarModule)
- `<fx-area-chart>` (FxAreaChartComponent, import FxAreaChartModule)
- `<fx-badge>` (FxBadgeComponent, import FxBadgeModule)
- `<fx-banner>` (FxBannerComponent, import FxBannerModule)
- `<fx-bar-chart>` (FxBarChartComponent, import FxBarChartModule)
- `<button[fx-button], a[fx-button],' +
    'button[fx-flat-button], a[fx-flat-button],' +
    'button[fx-outline-button], a[fx-outline-button]>` (FxButtonComponent, import FxButtonModule)
- `<fx-button-group>` (FxButtonGroupComponent, import FxButtonWrapperModule)
- `<fx-button-group-item>` (FxButtonGroupItemComponent, import FxButtonWrapperModule)
- `<fx-button-group-wrapper>` (FxButtonGroupWrapperComponent, import FxButtonWrapperModule)
- `<fx-button-switcher>` (FxButtonSwitcherComponent, import FxButtonModule)
- `<fx-card>` (FxCardComponent, import FxCardModule)
- `<fx-checkbox-box>` (FxCheckboxBoxComponent, import FxCheckboxBoxModule)
- `<fx-checkbox-box-group>` (FxCheckboxBoxGroupComponent, import FxCheckboxBoxModule)
- `<fx-daily-overview-chart>` (FxDailyOverviewChartComponent, import FxDailyOverviewChartModule)
- `<fx-datepicker-box>` (FxDatepickerBoxComponent, import FxCalendarBoxModule)
- `<fx-error-banner>` (FxErrorBannerComponent, import FxBannerModule)
- `<fx-form-field-box>` (FxFormFieldBoxComponent, import FxFormFieldModule)
- `<fx-form-field-label>` (FxFormLabelComponent, import FxFormFieldModule)
- `<fx-icon>` (FxIconComponent, import FxIconModule)
- `<fx-info-banner>` (FxInfoBannerComponent, import FxBannerModule)
- `<fx-input-box>` (FxInputBoxComponent, import FxInputModule)
- `<fx-line-chart>` (FxLineChartComponent, import FxLineChartModule)
- `<fx-orders-status-bar>` (FxOrderStatusBarComponent, import FxOrderStatusBarModule)
- `<fx-pie-chart>` (FxPieChartComponent, import FxPieChartModule)
- `<fx-radar-chart>` (FxRadarChartComponent, import FxRadarChartModule)
- `<fx-radio-box>` (FxRadioBoxComponent, import FxRadioBoxModule)
- `<fx-radio-box-group>` (FxRadioBoxGroupComponent, import FxRadioBoxModule)
- `<fx-rangepicker-box>` (FxRangepickerBoxComponent, import FxCalendarBoxModule)
- `<fx-select-box>` (FxSelectBoxComponent, import FxSelectModule)
- `<fx-sidebar>` (FxSidebarComponent, import FxSidebarModule)
- `<fx-sidebar-menu>` (FxSidebarMenuComponent, import FxSidebarModule)
- `<fx-sidebar-menu-group>` (FxSidebarMenuGroupComponent, import FxSidebarModule)
- `<fx-sidebar-menu-item>` (FxSidebarMenuItemComponent, import FxSidebarModule)
- `<fx-snackbar-container>` (FxSnackbarContainerComponent, import FxSnackbarModule)
- `<fx-snackbar-item>` (FxSnackbarItemComponent)
- `<fx-stacked-bar-chart>` (FxStackedBarChartComponent, import FxStackedBarChartModule)
- `<fx-stacked-position-chart>` (FxStackedPositionChartComponent, import FxStackedPositionChartModule)
- `<fx-step[label]>` (FxStepComponent, import FxStepperModule)
- `<fx-stepper[activeStepIndex]>` (FxStepperComponent, import FxStepperModule)
- `<fx-success-banner>` (FxSuccessBannerComponent, import FxBannerModule)
- `<fx-switcher-box>` (FxSwitcherBoxComponent, import FxSwitcherBoxModule)
- `<fx-tab>` (FxTabComponent, import FxTabContainerModule)
- `<fx-tab-container>` (FxTabContainerComponent, import FxTabContainerModule)
- `<fx-tab-container-labels>` (FxTabContainerLabelsComponent)
- `<fx-tab-item>` (FxTabItemComponent, import FxTabPanelModule)
- `<fx-table-card-empty-state>` (FxTableCardEmptyStateComponent)
- `<fx-table>` (FxTableComponent, import FxTableModule): Main table component that renders a stateful data table.
- `<fx-table-filter-badge-list>` (FxTableFilterBadgeListComponent, import FxTableModule)
- `<fx-table-resize-overlay>` (FxTableResizeOverlayComponent)
- `<fx-table-search-empty-state>` (FxTableSearchEmptyStateComponent)
- `<fx-tab-panel>` (FxTabPanelComponent, import FxTabPanelModule)
- `<fx-textarea-box>` (FxTextareaBoxComponent, import FxTextareaBoxModule)
- `<fx-time-series-bar-chart>` (FxTimeSeriesBarChartComponent, import FxTimeSeriesBarChartModule)
- `<fx-toggle-button>` (FxToggleButtonComponent, import FxToggleButtonModule)
- `<fx-typeahead-box>` (FxTypeaheadBoxComponent, import FxTypeaheadBoxModule)
- `<fx-ui-state>` (FxUiStateComponent, import FxUiStateModule)
- `<fx-visual-stepper>` (FxVisualStepperComponent, import FxVisualStepperModule)
- `<fx-warning-banner>` (FxWarningBannerComponent, import FxBannerModule)
- `<fx-widget>` (FxWidgetComponent, import FxWidgetModule)
- `<fx-widget-toolbar>` (FxWidgetToolbarComponent, import FxWidgetModule)
- `<fx-header-bar-box>` (HeaderBarBoxComponent, import HeaderBarBoxModule)
- `<fx-input-box-floating-prefix>` (InputBoxFloatingPrefixComponent, import FxInputModule)
- `<fx-input-box-prefix>` (InputBoxPrefixComponent, import FxInputModule)
- `<fx-input-box-suffix>` (InputBoxSuffixComponent, import FxInputModule)
- `<fx-modal-actions>` (ModalActionsComponent, import FxModalModule)
- `<fx-modal-body>` (ModalBodyComponent, import FxModalModule)
- `<fx-modal-header>` (ModalHeaderComponent, import FxModalModule)
- `<fx-modal-validation-bar>` (ModalValidationBarComponent, import FxModalModule)
- `<fx-modal-wrapper>` (ModalWrapperComponent, import FxModalModule)
- `<fx-notification-banner>` (NotificationBannerComponent, import FxNotificationBannerModule)
- `<fx-select-option-box>` (SelectOptionBoxComponent, import FxSelectModule)
- `<fx-session-timeout>` (SessionTimeoutComponent, import FxSessionTimeoutModule)
- `<fx-timepicker-box>` (TimepickerComponent, import FxTimepickerModule)
- `<fx-tooltip>` (TooltipComponent, import FxTooltipModule)
- `<fx-week-picker-arrow>` (WeekPickerArrowComponent, import CalendarModule)
- `<fx-week-picker>` (WeekPickerComponent, import CalendarModule)
- `<fx-week-picker-day>` (WeekPickerDayComponent, import CalendarModule)

## Services
- BreadcrumbsService
- DocumentScrollService
- FxColorsRegistry
- FxConfigService
- FxIconRegistryService
- FxNotificationBannerService
- FxSnackbarService
- FxTabContainerService
- FxTabPanelHighlightService
- FxTabPanelStickService
- FxUserActivityService
- ModalService
- NavbarActionsService

## Patterns
The FinX pattern layer (composition catalogue + machine recipes) is licensed
separately — it is served by the finx-patterns MCP server (@wchfs/finx-mcp).
Call finx_handshake with this package's version, then list_patterns /
get_pattern / get_recipes. Families with recipes: fx-breadcrumbs, fx-card, fx-form-field-box, fx-modal, fx-notification-banner, fx-session-timeout, fx-snackbar, fx-spacing, fx-stepper, fx-tab-container, fx-table, fx-tooltip, fx-typeahead-box, fx-ui-state, fx-widget.

## Machine-readable API
- ai/manifest/components.json — full typed surface (inputs incl. signal inputs, outputs, slots, tokens, stories, usage rules)
- ai/llms-full.txt — this content expanded with every input/output/slot/token