@pecb-ui/components 1.1.2 → 1.2.0

package/index.d.ts

@@ -1,5 +1,3939 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, ChangeDetectorRef, TemplateRef, Type, OnInit, OnDestroy, AfterViewInit, QueryList, OnChanges } from '@angular/core';
+import * as i1 from '@angular/common';
+import * as _angular_platform_browser from '@angular/platform-browser';
+import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
+import { ControlValueAccessor } from '@angular/forms';
+import { Observable } from 'rxjs';
+
+type ButtonVariant = 'primary' | 'primary-outline' | 'primary-2' | 'primary-2-outline' | 'neutral' | 'neutral-outline' | 'secondary' | 'text' | 'text-muted' | 'text-brand' | 'destructive' | 'destructive-outline';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonIconStyle = 'none' | 'leading' | 'trailing' | 'icon-only';
+declare class ButtonComponent {
+    private readonly sanitizer;
+    id: _angular_core.InputSignal<string>;
+    /**
+     * The visual style variant of the button
+     */
+    variant: _angular_core.InputSignal<ButtonVariant>;
+    /**
+     * The size of the button
+     */
+    size: _angular_core.InputSignal<ButtonSize>;
+    /**
+     * Icon placement style
+     */
+    iconStyle: _angular_core.InputSignal<ButtonIconStyle>;
+    /**
+     * Icon to display (used with iconStyle)
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the button is disabled
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the button should take full width
+     */
+    fullWidth: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the button is in loading state
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Button type attribute
+     */
+    type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    /**
+     * Accessible label for the button (required for icon-only buttons)
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ID of element that labels this button
+     */
+    ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ID of element that describes this button
+     */
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Indicates the button controls an expandable element
+     */
+    ariaExpanded: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Indicates the pressed state for toggle buttons
+     */
+    ariaPressed: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Indicates the button opens a popup (menu, listbox, dialog, etc.)
+     */
+    ariaHasPopup: _angular_core.InputSignal<boolean | "dialog" | "menu" | "listbox" | "tree" | "grid" | undefined>;
+    /**
+     * ID of the element controlled by this button
+     */
+    ariaControls: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Event emitted when the button is clicked
+     */
+    clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    /**
+     * Host binding for the component's ID
+     */
+    get hostId(): null;
+    /**
+     * Get CSS classes for the button
+     */
+    get buttonClasses(): string[];
+    get showLeadingIcon(): boolean;
+    get showTrailingIcon(): boolean;
+    get isIconOnly(): boolean;
+    get loadingText(): string;
+    get isSvgIcon(): boolean;
+    get safeIconHtml(): SafeHtml;
+    onClick(event: MouseEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "pecb-button", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconStyle": { "alias": "iconStyle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; "ariaHasPopup": { "alias": "ariaHasPopup"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+type CardElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type CardRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
 /**
- * Generated bundle index. Do not edit.
+ * Semantic role for the card component
  */
-/// <amd-module name="@pecb-ui/components" />
-export * from './public-api';
+type CardRole = 'article' | 'region' | 'group' | 'listitem' | 'none';
+declare class CardComponent {
+    /**
+     * Unique ID for the card element
+     */
+    id: _angular_core.InputSignal<string>;
+    /**
+     * The elevation level (shadow depth) of the card
+     */
+    elevation: _angular_core.InputSignal<CardElevation>;
+    /**
+     * Whether the card should be hoverable with elevation change
+     */
+    hoverable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to add padding to the card
+     */
+    noPadding: _angular_core.InputSignal<boolean>;
+    /**
+     * Border-radius: predefined token ('xs'|'sm'|'md'|'lg'|'none'|'full')
+     * or any CSS value e.g. '20px', '50%'
+     */
+    radius: _angular_core.InputSignal<string>;
+    /**
+     * Semantic role for the card (article, region, group, listitem, or none)
+     * Use 'article' for self-contained content, 'region' for significant sections
+     */
+    role: _angular_core.InputSignal<CardRole>;
+    /**
+     * Accessible label for the card
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ID of element that labels this card
+     */
+    ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ID of element that describes this card
+     */
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Get CSS classes for the card
+     */
+    get cardClasses(): string[];
+    get borderRadiusStyle(): string;
+    get roleAttribute(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "pecb-card", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "noPadding": { "alias": "noPadding"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class CardHeaderComponent {
+    headingLevel: _angular_core.InputSignal<number | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardHeaderComponent, "pecb-card-header", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class CardBodyComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardBodyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardBodyComponent, "pecb-card-body", never, {}, {}, never, ["*"], true, never>;
+}
+declare class CardFooterComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardFooterComponent, "pecb-card-footer", never, {}, {}, never, ["*"], true, never>;
+}
+
+type StatusType = 'warning' | 'action' | 'success' | 'error' | 'different' | 'disabled' | 'neutral';
+type StatusVariant = 'accent' | 'filled' | 'outline' | 'custom';
+type StatusSize = 'sm' | 'md' | 'lg';
+declare class StatusComponent {
+    private readonly _id;
+    type: _angular_core.InputSignal<StatusType>;
+    variant: _angular_core.InputSignal<StatusVariant>;
+    size: _angular_core.InputSignal<StatusSize>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    text: _angular_core.InputSignal<string | undefined>;
+    customClass: _angular_core.InputSignal<string | undefined>;
+    get id(): string;
+    get statusClasses(): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusComponent, "pecb-status", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type PaginationSize = 'sm' | 'md' | 'lg';
+type PaginationVariant = 'full' | 'compact' | 'minimal' | 'centered';
+interface PageChangeEvent {
+    page: number;
+    pageSize: number;
+    startIndex: number;
+    endIndex: number;
+}
+declare class PaginationComponent {
+    private elementRef;
+    private cdr;
+    totalItems: _angular_core.InputSignal<number>;
+    pageSize: _angular_core.ModelSignal<number>;
+    currentPage: _angular_core.ModelSignal<number>;
+    pageSizeOptions: _angular_core.InputSignal<number[]>;
+    size: _angular_core.InputSignal<PaginationSize>;
+    variant: _angular_core.InputSignal<PaginationVariant>;
+    showPageSizeSelector: _angular_core.InputSignal<boolean>;
+    showItemsInfo: _angular_core.InputSignal<boolean>;
+    maxVisiblePages: _angular_core.InputSignal<number>;
+    disabled: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    pageChange: _angular_core.OutputEmitterRef<PageChangeEvent>;
+    pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    readonly totalPages: _angular_core.Signal<number>;
+    readonly visiblePages: _angular_core.Signal<(string | number)[]>;
+    isDropdownOpen: _angular_core.WritableSignal<boolean>;
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef);
+    onDocumentClick(event: MouseEvent): void;
+    get containerClasses(): string[];
+    get showPages(): boolean;
+    get showPageSize(): boolean;
+    get itemsInfoText(): string;
+    get startIndex(): number;
+    get endIndex(): number;
+    get canGoPrevious(): boolean;
+    get canGoNext(): boolean;
+    goToPage(page: number): void;
+    goToPrevious(): void;
+    goToNext(): void;
+    onPageSizeChange(newSize: number): void;
+    toggleDropdown(): void;
+    closeDropdown(): void;
+    isNumber(value: number | string): boolean;
+    trackByPage(index: number, page: number | string): number | string;
+    private emitPageChange;
+    private computeVisiblePages;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PaginationComponent, "pecb-pagination", never, { "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showPageSizeSelector": { "alias": "showPageSizeSelector"; "required": false; "isSignal": true; }; "showItemsInfo": { "alias": "showItemsInfo"; "required": false; "isSignal": true; }; "maxVisiblePages": { "alias": "maxVisiblePages"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "currentPage": "currentPageChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
+}
+
+type TableSize = 'sm' | 'md' | 'lg';
+type TableVariant = 'default' | 'striped' | 'bordered';
+/**
+ * Defines built-in column types
+ */
+type PecbTableColumnType = 'text' | 'link' | 'status' | 'action' | 'user' | 'custom';
+/**
+ * Defines built-in component names for columns
+ */
+type PecbTableColumnComponent = 'status' | 'action' | 'user';
+interface TableAction {
+    id: string;
+    icon: 'view' | 'edit' | 'delete' | 'download' | 'copy' | 'custom';
+    tooltip?: string;
+    customIcon?: string;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+    /** Whether to show a vertical divider before this action */
+    dividerBefore?: boolean;
+    /** Click handler for this specific action */
+    action?: (row: any, index: number) => void;
+}
+interface TableStatusConfig {
+    typeMap?: Record<string, string>;
+    variant?: 'accent' | 'filled' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+}
+interface TableUserConfig {
+    avatarKey?: string;
+    nameKey?: string;
+    secondaryKey?: string;
+}
+interface PecbTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    cellTemplate?: TemplateRef<any>;
+    headerTemplate?: TemplateRef<any>;
+    cssClass?: string;
+    type?: PecbTableColumnType;
+    component?: PecbTableColumnComponent;
+    dynamicComponent?: Type<any>;
+    componentInputs?: Record<string, any>;
+    componentInputsFn?: (row: any, value: any, index: number) => Record<string, any>;
+    actions?: TableAction[];
+    statusConfig?: TableStatusConfig;
+    userConfig?: TableUserConfig;
+}
+interface TableSortEvent {
+    column: string;
+    direction: 'asc' | 'desc' | null;
+}
+interface TableRowActionEvent {
+    action: string;
+    row: any;
+    index: number;
+}
+interface TableSelectionEvent {
+    selectedRows: any[];
+    selectedIndices: number[];
+}
+declare class TableComponent {
+    private sanitizer;
+    private cdr;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    /**
+     * Column definitions for the table
+     */
+    columns: _angular_core.InputSignal<PecbTableColumn[]>;
+    /**
+     * Data array to display in the table
+     */
+    data: _angular_core.InputSignal<any[]>;
+    /**
+     * Size variant of the table
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<TableSize>;
+    /**
+     * Visual variant of the table
+     * @default 'default'
+     */
+    variant: _angular_core.InputSignal<TableVariant>;
+    /**
+     * Whether to show the table header
+     * @default true
+     */
+    showHeader: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to enable row hover effect
+     * @default true
+     */
+    hoverable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show pagination
+     * @default true
+     */
+    showPagination: _angular_core.InputSignal<boolean>;
+    /**
+     * Total number of items for pagination
+     */
+    totalItems: _angular_core.InputSignal<number>;
+    /**
+     * Current page number (1-based)
+     * @default 1
+     */
+    currentPage: _angular_core.ModelSignal<number>;
+    /**
+     * Number of items per page
+     * @default 15
+     */
+    pageSize: _angular_core.ModelSignal<number>;
+    /**
+     * Available page size options
+     */
+    pageSizeOptions: _angular_core.InputSignal<number[]>;
+    /**
+     * Whether to show page size selector in pagination
+     * @default true
+     */
+    showPageSizeSelector: _angular_core.InputSignal<boolean>;
+    /**
+     * Pagination variant
+     * @default 'full'
+     */
+    paginationVariant: _angular_core.InputSignal<"full" | "compact" | "minimal" | "centered">;
+    /**
+     * Message to display when there is no data
+     */
+    emptyMessage: _angular_core.InputSignal<string>;
+    /**
+     * Whether to show loading state
+     * @default false
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to enable row selection
+     * @default false
+     */
+    selectable: _angular_core.InputSignal<boolean>;
+    /**
+     * Currently selected row indices
+     */
+    selectedIndices: _angular_core.ModelSignal<number[]>;
+    /**
+     * Whether the table has a fixed header
+     * @default false
+     */
+    stickyHeader: _angular_core.InputSignal<boolean>;
+    /**
+     * Maximum height of the table body (enables scrolling)
+     */
+    maxHeight: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Column key currently being sorted
+     */
+    sortColumn: _angular_core.ModelSignal<string | undefined>;
+    /**
+     * Current sort direction
+     */
+    sortDirection: _angular_core.ModelSignal<"desc" | "asc" | null>;
+    /**
+     * ARIA label for the table
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Emitted when a page change occurs
+     */
+    pageChange: _angular_core.OutputEmitterRef<PageChangeEvent>;
+    /**
+     * Emitted when page size changes
+     */
+    pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Emitted when a row is clicked
+     */
+    rowClick: _angular_core.OutputEmitterRef<{
+        row: any;
+        index: number;
+    }>;
+    /**
+     * Emitted when a row action is triggered
+     */
+    rowAction: _angular_core.OutputEmitterRef<TableRowActionEvent>;
+    /**
+     * Emitted when sorting changes
+     */
+    sortChange: _angular_core.OutputEmitterRef<TableSortEvent>;
+    /**
+     * Emitted when row selection changes
+     */
+    selectionChange: _angular_core.OutputEmitterRef<TableSelectionEvent>;
+    emptyTemplate?: TemplateRef<any>;
+    loadingTemplate?: TemplateRef<any>;
+    get containerClasses(): string;
+    get paginationClasses(): string;
+    get tableClasses(): string;
+    getCellValue(row: any, key: string): any;
+    getAlignmentClass(column: PecbTableColumn): string;
+    onRowClick(row: any, index: number): void;
+    onRowAction(action: string, row: any, index: number, event: Event): void;
+    onHeaderClick(column: PecbTableColumn): void;
+    toggleRowSelection(index: number): void;
+    toggleAllSelection(): void;
+    isRowSelected(index: number): boolean;
+    isAllSelected(): boolean;
+    isSomeSelected(): boolean;
+    onPageChange(event: PageChangeEvent): void;
+    onPageSizeChange(newSize: number): void;
+    getSortState(column: PecbTableColumn): 'asc' | 'desc' | 'none';
+    trackByIndex(index: number): number;
+    trackByKey(_: number, column: PecbTableColumn): string;
+    getColumnType(column: PecbTableColumn): string;
+    getStatusType(value: any, column: PecbTableColumn): any;
+    getStatusVariant(column: PecbTableColumn): any;
+    getStatusSize(column: PecbTableColumn): any;
+    getUserData(row: any, column: PecbTableColumn): {
+        avatar: string;
+        name: string;
+        secondary: string;
+    };
+    getActions(column: PecbTableColumn): TableAction[];
+    onActionClick(action: TableAction, row: any, index: number, event: Event): void;
+    getDynamicComponentInputs(row: any, column: PecbTableColumn, index: number): Record<string, any>;
+    hasDynamicComponent(column: PecbTableColumn): boolean;
+    getSafeIcon(iconSvg: string | undefined): SafeHtml;
+    /**
+     * Builds a safe href from a URL string, prepending https:// if missing
+     */
+    getLinkHref(value: string): string;
+    private emitSelectionChange;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "pecb-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "showPagination": { "alias": "showPagination"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showPageSizeSelector": { "alias": "showPageSizeSelector"; "required": false; "isSignal": true; }; "paginationVariant": { "alias": "paginationVariant"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectedIndices": { "alias": "selectedIndices"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "selectedIndices": "selectedIndicesChange"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "rowClick": "rowClick"; "rowAction": "rowAction"; "sortChange": "sortChange"; "selectionChange": "selectionChange"; }, ["emptyTemplate", "loadingTemplate"], never, true, never>;
+}
+
+type TabStyle = 'rounded' | 'line';
+type TabSize = 'sm' | 'md';
+declare class TabComponent {
+    id: _angular_core.InputSignal<string>;
+    tabStyle: _angular_core.InputSignal<TabStyle>;
+    size: _angular_core.InputSignal<TabSize>;
+    label: _angular_core.InputSignal<string>;
+    icon: _angular_core.InputSignal<number | undefined>;
+    active: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    closable: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    ariaControls: _angular_core.InputSignal<string | undefined>;
+    ariaSelected: _angular_core.InputSignal<boolean | undefined>;
+    clicked: _angular_core.OutputEmitterRef<string>;
+    closed: _angular_core.OutputEmitterRef<string>;
+    get tabClasses(): string[];
+    onClick(event: MouseEvent): void;
+    onClose(event: MouseEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "pecb-tab", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "tabStyle": { "alias": "tabStyle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; "ariaSelected": { "alias": "ariaSelected"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "closed": "closed"; }, never, never, true, never>;
+}
+
+type DatepickerSize = 'sm' | 'md' | 'lg' | 'xl';
+interface CalendarDay {
+    date: Date;
+    day: number;
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    isToday: boolean;
+}
+declare class DatepickerComponent implements ControlValueAccessor {
+    private readonly elementRef;
+    inputElement?: ElementRef<HTMLInputElement>;
+    /**
+     * Unique ID for the datepicker element
+     */
+    id: _angular_core.InputSignal<string>;
+    /**
+     * Label text to display above the input
+     */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * The size of the datepicker
+     */
+    size: _angular_core.InputSignal<DatepickerSize>;
+    /**
+     * Width of the datepicker (any valid CSS value, e.g. '300px', '50%', '100%')
+     * Defaults to 100% via CSS
+     */
+    width: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the field is required
+     */
+    required: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the datepicker is disabled
+     */
+    disabled: _angular_core.ModelSignal<boolean>;
+    /**
+     * Date format for display (default: MM/DD/YYYY)
+     */
+    dateFormat: _angular_core.InputSignal<string>;
+    /**
+     * Minimum selectable date
+     */
+    minDate: _angular_core.InputSignal<Date | undefined>;
+    /**
+     * Maximum selectable date
+     */
+    maxDate: _angular_core.InputSignal<Date | undefined>;
+    /**
+     * Event emitted when date is selected
+     */
+    dateChange: _angular_core.OutputEmitterRef<Date | null>;
+    /**
+     * Event emitted when calendar is opened
+     */
+    opened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Event emitted when calendar is closed
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
+    selectedDate: _angular_core.WritableSignal<Date | null>;
+    isCalendarOpen: _angular_core.WritableSignal<boolean>;
+    currentMonth: _angular_core.WritableSignal<Date>;
+    calendarDays: _angular_core.WritableSignal<CalendarDay[]>;
+    weekDays: string[];
+    monthNames: string[];
+    private onChange;
+    private onTouched;
+    constructor();
+    get wrapperClasses(): string[];
+    get displayValue(): string;
+    get monthYearDisplay(): string;
+    toggleCalendar(): void;
+    closeCalendar(): void;
+    previousMonth(): void;
+    nextMonth(): void;
+    selectDate(day: CalendarDay): void;
+    clearDate(event: MouseEvent): void;
+    onDocumentClick(event: MouseEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private generateCalendar;
+    private formatDate;
+    writeValue(value: Date | null): void;
+    registerOnChange(fn: (value: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "pecb-datepicker", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+type InputSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * A professional input component with floating label and multiple types.
+ * Fully accessible with WCAG 2.1 AA compliance and reactive forms support.
+ *
+ * @example
+ * ```html
+ * <pecb-input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   [(ngModel)]="email"
+ * ></pecb-input>
+ *
+ * <!-- With predefined icon -->
+ * <pecb-input
+ *   label="Email"
+ *   type="email"
+ *   icon="email"
+ *   iconPosition="left"
+ * ></pecb-input>
+ *
+ * <!-- With custom SVG icon -->
+ * <pecb-input
+ *   label="Phone"
+ *   type="tel"
+ *   [icon]="'<svg>...</svg>'"
+ *   iconPosition="left"
+ * ></pecb-input>
+ *
+ * <!-- With error state -->
+ * <pecb-input
+ *   label="Password"
+ *   type="password"
+ *   [error]="true"
+ *   errorMessage="Password is required"
+ * ></pecb-input>
+ * ```
+ *
+ * @publicApi
+ */
+declare class InputComponent implements ControlValueAccessor {
+    private readonly sanitizer;
+    inputElement?: ElementRef<HTMLInputElement>;
+    /**
+     * Unique ID for the input element
+     */
+    id: _angular_core.InputSignal<string>;
+    /**
+     * Input type
+     */
+    type: _angular_core.InputSignal<InputType>;
+    /**
+     * Label text to display
+     */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Placeholder text (shown when label is not present)
+     */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * The size of the input
+     */
+    size: _angular_core.InputSignal<InputSize>;
+    /**
+     * Width of the input wrapper — any valid CSS value e.g. '300px', '50%', '100%'
+     * Defaults to 100% (full width of parent)
+     */
+    width: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the field is required
+     */
+    required: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: _angular_core.ModelSignal<boolean>;
+    /**
+     * Whether the input is readonly
+     */
+    readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show error state
+     */
+    error: _angular_core.InputSignal<boolean>;
+    /**
+     * Error message to display
+     */
+    errorMessage: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Helper text to display below input
+     */
+    helperText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Icon to display - can be a predefined name ('email', 'search', 'user') or custom SVG string
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Icon position (left or right)
+     */
+    iconPosition: _angular_core.InputSignal<"left" | "right">;
+    /**
+     * Left icon name or HTML (deprecated - use icon with iconPosition instead)
+     */
+    leftIcon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Right icon name or HTML (deprecated - use icon with iconPosition instead)
+     */
+    rightIcon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether to show clear button
+     */
+    clearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Maximum length of input
+     */
+    maxLength: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Minimum value (for number type)
+     */
+    min: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Maximum value (for number type)
+     */
+    max: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Step value (for number type)
+     */
+    step: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Autocomplete attribute
+     */
+    autocomplete: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Show info icon next to the label
+     */
+    showInfoIcon: _angular_core.InputSignal<boolean>;
+    /**
+     * Event emitted when value changes
+     */
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Event emitted on blur
+     */
+    blurred: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Event emitted on focus
+     */
+    focused: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Event emitted when clear button is clicked
+     */
+    cleared: _angular_core.OutputEmitterRef<void>;
+    value: _angular_core.WritableSignal<string>;
+    isFocused: _angular_core.WritableSignal<boolean>;
+    showPassword: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    get inputType(): string;
+    get showClearButton(): boolean;
+    get showPasswordToggle(): boolean;
+    get computedLeftIcon(): string | undefined;
+    get computedRightIcon(): string | undefined;
+    onInput(event: Event): void;
+    onFocus(): void;
+    onBlur(): void;
+    clearValue(event: MouseEvent): void;
+    togglePasswordVisibility(event: MouseEvent): void;
+    focus(): void;
+    sanitizeIcon(icon: string | undefined): SafeHtml;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "pecb-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "cleared": "cleared"; }, never, never, true, never>;
+}
+
+type RadioVariant = 'dot' | 'filled';
+type RadioLabelPosition = 'right' | 'left';
+declare class RadioComponent implements ControlValueAccessor {
+    id: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    value: _angular_core.InputSignal<unknown>;
+    variant: _angular_core.InputSignal<RadioVariant>;
+    label: _angular_core.InputSignal<string | undefined>;
+    description: _angular_core.InputSignal<string | undefined>;
+    labelPosition: _angular_core.InputSignal<RadioLabelPosition>;
+    disabled: _angular_core.ModelSignal<boolean>;
+    selectionChange: _angular_core.OutputEmitterRef<unknown>;
+    checked: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    onRadioChange(event: Event): void;
+    onBlur(): void;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "pecb-radio", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+type CheckboxLabelPosition = 'right' | 'left';
+declare class CheckboxComponent implements ControlValueAccessor {
+    id: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    label: _angular_core.InputSignal<string | undefined>;
+    description: _angular_core.InputSignal<string | undefined>;
+    labelPosition: _angular_core.InputSignal<CheckboxLabelPosition>;
+    disabled: _angular_core.ModelSignal<boolean>;
+    checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    checked: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    onCheckboxChange(event: Event): void;
+    onBlur(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "pecb-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
+}
+
+type ToggleLabelPosition = 'right' | 'left';
+declare class ToggleComponent implements ControlValueAccessor {
+    id: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    label: _angular_core.InputSignal<string | undefined>;
+    description: _angular_core.InputSignal<string | undefined>;
+    labelPosition: _angular_core.InputSignal<ToggleLabelPosition>;
+    disabled: _angular_core.ModelSignal<boolean>;
+    toggleChange: _angular_core.OutputEmitterRef<boolean>;
+    checked: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    onToggleChange(event: Event): void;
+    onBlur(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleComponent, "pecb-toggle", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "toggleChange": "toggleChange"; }, never, never, true, never>;
+}
+
+interface DropdownOption {
+    label: string;
+    value: unknown;
+    disabled?: boolean;
+}
+type DropdownSize = 'sm' | 'md' | 'lg';
+declare class DropdownComponent implements ControlValueAccessor {
+    searchInput?: ElementRef<HTMLInputElement>;
+    private readonly elementRef;
+    id: _angular_core.InputSignal<string>;
+    label: _angular_core.InputSignal<string | undefined>;
+    size: _angular_core.InputSignal<DropdownSize>;
+    options: _angular_core.InputSignal<DropdownOption[]>;
+    multiple: _angular_core.InputSignal<boolean>;
+    searchable: _angular_core.InputSignal<boolean>;
+    maxHeight: _angular_core.InputSignal<number>;
+    disabled: _angular_core.ModelSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    error: _angular_core.InputSignal<boolean>;
+    errorMessage: _angular_core.InputSignal<string | undefined>;
+    helperText: _angular_core.InputSignal<string | undefined>;
+    selectionChange: _angular_core.OutputEmitterRef<unknown>;
+    isOpen: _angular_core.WritableSignal<boolean>;
+    searchQuery: _angular_core.WritableSignal<string>;
+    selectedValues: _angular_core.WritableSignal<unknown[]>;
+    focusedIndex: _angular_core.WritableSignal<number>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    get hasValue(): boolean;
+    get filteredOptions(): DropdownOption[];
+    get displayText(): string;
+    clearAll(event: MouseEvent): void;
+    toggleDropdown(): void;
+    selectOption(option: DropdownOption): void;
+    isSelected(option: DropdownOption): boolean;
+    onSearchInput(event: Event): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onDocumentClick(event: MouseEvent): void;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "pecb-dropdown", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+type RightModalSize = 'sm' | 'md' | 'lg';
+declare class RightModalComponent implements OnInit, OnDestroy, AfterViewInit {
+    id: _angular_core.InputSignal<string>;
+    isOpen: _angular_core.InputSignal<boolean>;
+    size: _angular_core.InputSignal<RightModalSize>;
+    closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    closeOnEscape: _angular_core.InputSignal<boolean>;
+    showCloseButton: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    closed: _angular_core.OutputEmitterRef<void>;
+    opened: _angular_core.OutputEmitterRef<void>;
+    modalPanel: ElementRef<HTMLElement>;
+    private cleanupFocusTrap;
+    private cleanupBodyScroll;
+    private previousActiveElement;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get modalClasses(): string[];
+    get panelClasses(): string[];
+    onBackdropClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    close(): void;
+    private onOpen;
+    private setupFocusTrap;
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RightModalComponent, "pecb-right-modal", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["[pecbRightModalHeader]", "[pecbRightModalContent]", "*", "[pecbRightModalFooter]"], true, never>;
+}
+declare class RightModalHeaderDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RightModalHeaderDirective, "[pecbRightModalHeader]", never, {}, {}, never, never, true, never>;
+}
+declare class RightModalContentDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RightModalContentDirective, "[pecbRightModalContent]", never, {}, {}, never, never, true, never>;
+}
+declare class RightModalFooterDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RightModalFooterDirective, "[pecbRightModalFooter]", never, {}, {}, never, never, true, never>;
+}
+
+interface SidebarMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    route?: string;
+    active?: boolean;
+    children?: SidebarMenuItem[];
+    expanded?: boolean;
+}
+interface SidebarSection {
+    id: string;
+    title?: string;
+    items: SidebarMenuItem[];
+}
+declare class SidebarComponent {
+    private readonly sanitizer;
+    sections: _angular_core.InputSignal<SidebarSection[]>;
+    showHeader: _angular_core.InputSignal<boolean>;
+    logoSrc: _angular_core.InputSignal<string | undefined>;
+    sidebarLogo: _angular_core.InputSignal<string | undefined>;
+    collapsedLogo: _angular_core.InputSignal<string | undefined>;
+    showFooter: _angular_core.InputSignal<boolean>;
+    collapsed: _angular_core.ModelSignal<boolean>;
+    itemClick: _angular_core.OutputEmitterRef<SidebarMenuItem>;
+    collapseChange: _angular_core.OutputEmitterRef<boolean>;
+    activePopupItem: _angular_core.WritableSignal<SidebarMenuItem | null>;
+    popupTopPosition: _angular_core.WritableSignal<number>;
+    onItemClick(item: SidebarMenuItem, event: Event): void;
+    closePopup(): void;
+    onPopupItemClick(child: SidebarMenuItem, event: Event): void;
+    toggleCollapse(): void;
+    getSafeIcon(icon: string): SafeHtml;
+    trackBySection(_index: number, section: SidebarSection): string;
+    trackByItem(_index: number, item: SidebarMenuItem): string;
+    hasActiveDescendant(item: SidebarMenuItem): boolean;
+    getItemClasses(item: SidebarMenuItem, isChild?: boolean, isNested?: boolean): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "pecb-sidebar", never, { "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "sidebarLogo": { "alias": "sidebarLogo"; "required": false; "isSignal": true; }; "collapsedLogo": { "alias": "collapsedLogo"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "itemClick": "itemClick"; "collapseChange": "collapseChange"; }, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
+}
+
+type ConfirmationIconType = 'success' | 'warning' | 'error' | 'info';
+declare class ConfirmationComponent implements OnDestroy, AfterViewInit {
+    id: _angular_core.InputSignal<string>;
+    /**
+     * Whether the dialog is visible. Manages its own state internally —
+     * no consumer binding required. Supports [(isOpen)] for controlled mode.
+     */
+    isOpen: _angular_core.ModelSignal<boolean>;
+    title: _angular_core.InputSignal<string>;
+    message: _angular_core.InputSignal<string>;
+    confirmText: _angular_core.InputSignal<string>;
+    cancelText: _angular_core.InputSignal<string>;
+    iconType: _angular_core.InputSignal<ConfirmationIconType>;
+    showCloseButton: _angular_core.InputSignal<boolean>;
+    closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    closeOnEscape: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    confirmed: _angular_core.OutputEmitterRef<void>;
+    cancelled: _angular_core.OutputEmitterRef<void>;
+    closed: _angular_core.OutputEmitterRef<void>;
+    dialogPanel: ElementRef<HTMLElement>;
+    private cleanupFocusTrap;
+    private cleanupBodyScroll;
+    private previousActiveElement;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get dialogClasses(): string[];
+    get iconContainerClass(): string;
+    get titleId(): string;
+    get messageId(): string;
+    onBackdropClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    onConfirm(): void;
+    onCancel(): void;
+    close(): void;
+    private onOpen;
+    private setupFocusTrap;
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfirmationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfirmationComponent, "pecb-confirmation", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "cancelText": { "alias": "cancelText"; "required": false; "isSignal": true; }; "iconType": { "alias": "iconType"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "confirmed": "confirmed"; "cancelled": "cancelled"; "closed": "closed"; }, never, never, true, never>;
+}
+
+declare class BottomSheetComponent implements OnDestroy, AfterViewInit {
+    id: _angular_core.InputSignal<string>;
+    /**
+     * Whether the sheet is visible. Manages its own state internally —
+     * no consumer binding required. Supports [(isOpen)] for controlled mode.
+     */
+    isOpen: _angular_core.ModelSignal<boolean>;
+    title: _angular_core.InputSignal<string>;
+    primaryText: _angular_core.InputSignal<string>;
+    secondaryText: _angular_core.InputSignal<string>;
+    showCloseButton: _angular_core.InputSignal<boolean>;
+    closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    closeOnEscape: _angular_core.InputSignal<boolean>;
+    primaryClicked: _angular_core.OutputEmitterRef<void>;
+    secondaryClicked: _angular_core.OutputEmitterRef<void>;
+    closed: _angular_core.OutputEmitterRef<void>;
+    sheetPanel: ElementRef<HTMLElement>;
+    private cleanupFocusTrap;
+    private cleanupBodyScroll;
+    private previousActiveElement;
+    constructor();
+    get titleId(): string;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onBackdropClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    close(): void;
+    private onOpen;
+    private setupFocusTrap;
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BottomSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BottomSheetComponent, "pecb-bottom-sheet", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "primaryText": { "alias": "primaryText"; "required": false; "isSignal": true; }; "secondaryText": { "alias": "secondaryText"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "primaryClicked": "primaryClicked"; "secondaryClicked": "secondaryClicked"; "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+type QuizType = 'Multiple Choice' | 'True/False' | 'Scenario' | 'Essay' | string;
+type AccordionVariant = 'basic' | 'actions';
+/**
+ * Large accordion item — used for exam questions / evaluation sections.
+ *
+ * Works standalone with no consumer state management needed:
+ * @example
+ * <pecb-accordion-item [number]="1" title="Question title">
+ *   Body content goes here.
+ * </pecb-accordion-item>
+ *
+ * Supports two-way binding for controlled state:
+ * @example
+ * <pecb-accordion-item [(isOpen)]="expanded" (editClicked)="onEdit()" (deleteClicked)="onDelete()">
+ *   Body content goes here.
+ * </pecb-accordion-item>
+ */
+declare class AccordionItemComponent {
+    /** Variant: 'basic' keeps full radius when open, 'actions' changes radius and adds body background */
+    variant: _angular_core.InputSignal<AccordionVariant>;
+    /** Number displayed in the left badge */
+    number: _angular_core.InputSignal<number>;
+    /** Show/hide the number badge */
+    showNumber: _angular_core.InputSignal<boolean>;
+    /** Small subtitle text (12px, muted colour) */
+    label: _angular_core.InputSignal<string>;
+    /** Primary title text (13px, medium weight) */
+    title: _angular_core.InputSignal<string>;
+    /** Quiz type badge — 'Multiple Choice' | 'True/False' | 'Scenario' | 'Essay'. Leave empty to hide. */
+    quizType: _angular_core.InputSignal<string>;
+    /**
+     * Whether the item is expanded. Manages its own state internally —
+     * no consumer binding required. Supports [(isOpen)] for controlled mode.
+     */
+    isOpen: _angular_core.ModelSignal<boolean>;
+    /** Show/hide the move icon button */
+    showMove: _angular_core.InputSignal<boolean>;
+    /** Show/hide the edit icon button */
+    showEdit: _angular_core.InputSignal<boolean>;
+    /** Show/hide the expand/collapse chevron button */
+    showToggleBtn: _angular_core.InputSignal<boolean>;
+    /** Show/hide the delete icon button */
+    showDelete: _angular_core.InputSignal<boolean>;
+    moveClicked: _angular_core.OutputEmitterRef<void>;
+    editClicked: _angular_core.OutputEmitterRef<void>;
+    deleteClicked: _angular_core.OutputEmitterRef<void>;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemComponent, "pecb-accordion-item", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "number": { "alias": "number"; "required": false; "isSignal": true; }; "showNumber": { "alias": "showNumber"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "quizType": { "alias": "quizType"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "showMove": { "alias": "showMove"; "required": false; "isSignal": true; }; "showEdit": { "alias": "showEdit"; "required": false; "isSignal": true; }; "showToggleBtn": { "alias": "showToggleBtn"; "required": false; "isSignal": true; }; "showDelete": { "alias": "showDelete"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "moveClicked": "moveClicked"; "editClicked": "editClicked"; "deleteClicked": "deleteClicked"; }, never, ["*"], true, never>;
+}
+/**
+ * Small accordion item — used for language / domain list rows.
+ *
+ * Works standalone with no consumer state management needed:
+ * @example
+ * <pecb-accordion-small label="English" parentId="519456">
+ *   <span pecbLeading>🇬🇧</span>
+ *   Body content here.
+ * </pecb-accordion-small>
+ *
+ * Supports two-way binding for controlled state:
+ * @example
+ * <pecb-accordion-small label="English" [(isActive)]="active">
+ *   <span pecbLeading>🇬🇧</span>
+ * </pecb-accordion-small>
+ */
+declare class AccordionSmallComponent {
+    /** Main label text */
+    label: _angular_core.InputSignal<string>;
+    /** Optional metadata value displayed next to the prefix — leave empty to hide */
+    parentId: _angular_core.InputSignal<string>;
+    /** Prefix text shown before the parentId value */
+    metaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Whether the item is expanded. Manages its own state internally —
+     * no consumer binding required. Supports [(isActive)] for controlled mode.
+     */
+    isActive: _angular_core.ModelSignal<boolean>;
+    /** Show/hide the toggle switch */
+    showToggle: _angular_core.InputSignal<boolean>;
+    /** Two-way bindable toggle switch value. Supports [(toggleValue)]. */
+    toggleValue: _angular_core.ModelSignal<boolean>;
+    /** Show/hide the download icon */
+    showDownload: _angular_core.InputSignal<boolean>;
+    /** Show/hide the save icon */
+    showSave: _angular_core.InputSignal<boolean>;
+    /** Show/hide the edit icon */
+    showEdit: _angular_core.InputSignal<boolean>;
+    /** Show/hide the delete icon */
+    showDelete: _angular_core.InputSignal<boolean>;
+    /** Show/hide the move icon */
+    showMove: _angular_core.InputSignal<boolean>;
+    downloadClicked: _angular_core.OutputEmitterRef<void>;
+    saveClicked: _angular_core.OutputEmitterRef<void>;
+    editClicked: _angular_core.OutputEmitterRef<void>;
+    deleteClicked: _angular_core.OutputEmitterRef<void>;
+    moveClicked: _angular_core.OutputEmitterRef<void>;
+    onHeaderClick(): void;
+    /** ngModel bridge for the toggle */
+    get toggleChecked(): boolean;
+    set toggleChecked(value: boolean);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionSmallComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionSmallComponent, "pecb-accordion-small", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "parentId": { "alias": "parentId"; "required": false; "isSignal": true; }; "metaLabel": { "alias": "metaLabel"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "toggleValue": { "alias": "toggleValue"; "required": false; "isSignal": true; }; "showDownload": { "alias": "showDownload"; "required": false; "isSignal": true; }; "showSave": { "alias": "showSave"; "required": false; "isSignal": true; }; "showEdit": { "alias": "showEdit"; "required": false; "isSignal": true; }; "showDelete": { "alias": "showDelete"; "required": false; "isSignal": true; }; "showMove": { "alias": "showMove"; "required": false; "isSignal": true; }; }, { "isActive": "isActiveChange"; "toggleValue": "toggleValueChange"; "downloadClicked": "downloadClicked"; "saveClicked": "saveClicked"; "editClicked": "editClicked"; "deleteClicked": "deleteClicked"; "moveClicked": "moveClicked"; }, never, ["[pecbLeading]", "*"], true, never>;
+}
+
+type ButtonGroupItemPosition = 'first' | 'middle' | 'last' | 'more';
+type ButtonGroupIconMode = 'both' | 'leading' | 'trailing' | 'none';
+declare class ButtonGroupItemComponent {
+    private sanitizer;
+    label: _angular_core.InputSignal<string>;
+    position: _angular_core.InputSignal<ButtonGroupItemPosition>;
+    /** Custom SVG string for the leading icon. When set, overrides the default chevron. */
+    leadingIconSvg: _angular_core.InputSignal<string>;
+    /** Custom SVG string for the trailing icon. When set, overrides the default chevron. */
+    trailingIconSvg: _angular_core.InputSignal<string>;
+    safeLeadingIconSvg: _angular_core.Signal<_angular_platform_browser.SafeHtml>;
+    safeTrailingIconSvg: _angular_core.Signal<_angular_platform_browser.SafeHtml>;
+    /**
+     * Whether this item is selected/active. Manages its own state internally —
+     * no consumer binding required. Supports [(selected)] for controlled mode.
+     */
+    selected: _angular_core.ModelSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    iconMode: _angular_core.InputSignal<ButtonGroupIconMode>;
+    clicked: _angular_core.OutputEmitterRef<void>;
+    onClick(): void;
+    get hostClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonGroupItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonGroupItemComponent, "pecb-button-group-item", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "leadingIconSvg": { "alias": "leadingIconSvg"; "required": false; "isSignal": true; }; "trailingIconSvg": { "alias": "trailingIconSvg"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconMode": { "alias": "iconMode"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "clicked": "clicked"; }, never, never, true, never>;
+}
+declare class ButtonGroupComponent {
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonGroupComponent, "pecb-button-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type TooltipPointerPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom';
+type TooltipTheme = 'dark' | 'light';
+declare class TooltipComponent {
+    title: _angular_core.InputSignal<string>;
+    message: _angular_core.InputSignal<string>;
+    pointerPosition: _angular_core.InputSignal<TooltipPointerPosition>;
+    theme: _angular_core.InputSignal<TooltipTheme>;
+    primaryCta: _angular_core.InputSignal<string | undefined>;
+    secondaryCta: _angular_core.InputSignal<string | undefined>;
+    showClose: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the tooltip is visible. Manages its own state internally —
+     * no consumer binding required. Supports [(visible)] for controlled mode.
+     */
+    visible: _angular_core.ModelSignal<boolean>;
+    closed: _angular_core.OutputEmitterRef<void>;
+    primaryCtaClick: _angular_core.OutputEmitterRef<void>;
+    secondaryCtaClick: _angular_core.OutputEmitterRef<void>;
+    close(): void;
+    get hasButtons(): boolean;
+    get pointerSide(): 'top' | 'bottom' | 'left' | 'right';
+    /** SVG fill for the outer (border) triangle layer */
+    get ptrBorderFill(): string;
+    /** SVG fill for the inner (body) triangle layer */
+    get ptrBodyFill(): string;
+    get hostClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "pecb-tooltip", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "pointerPosition": { "alias": "pointerPosition"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "primaryCta": { "alias": "primaryCta"; "required": false; "isSignal": true; }; "secondaryCta": { "alias": "secondaryCta"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "closed": "closed"; "primaryCtaClick": "primaryCtaClick"; "secondaryCtaClick": "secondaryCtaClick"; }, never, never, true, never>;
+}
+
+declare class TooltipDirective implements OnDestroy {
+    /** Tooltip body message */
+    pecbTooltip: _angular_core.InputSignal<string>;
+    /** Optional bold title above the message */
+    tooltipTitle: _angular_core.InputSignal<string>;
+    /** dark (default) or light */
+    tooltipTheme: _angular_core.InputSignal<TooltipTheme>;
+    /** Where the pointer arrow appears relative to the tooltip body */
+    tooltipPosition: _angular_core.InputSignal<TooltipPointerPosition>;
+    /** hover (default) or click */
+    tooltipTrigger: _angular_core.InputSignal<"click" | "hover">;
+    /** Optional primary CTA label (red link) */
+    tooltipPrimaryCta: _angular_core.InputSignal<string>;
+    /** Optional secondary CTA label (muted link) */
+    tooltipSecondaryCta: _angular_core.InputSignal<string>;
+    /** Emits when the primary CTA is clicked */
+    tooltipPrimaryCtaClick: _angular_core.OutputEmitterRef<void>;
+    /** Emits when the secondary CTA is clicked */
+    tooltipSecondaryCtaClick: _angular_core.OutputEmitterRef<void>;
+    private el;
+    private appRef;
+    private injector;
+    private ref?;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onClick(): void;
+    ngOnDestroy(): void;
+    /** Flip the side so the arrow points back toward the trigger element. */
+    private invertedPointerPosition;
+    private show;
+    private hide;
+    private position;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[pecbTooltip]", never, { "pecbTooltip": { "alias": "pecbTooltip"; "required": false; "isSignal": true; }; "tooltipTitle": { "alias": "tooltipTitle"; "required": false; "isSignal": true; }; "tooltipTheme": { "alias": "tooltipTheme"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipTrigger": { "alias": "tooltipTrigger"; "required": false; "isSignal": true; }; "tooltipPrimaryCta": { "alias": "tooltipPrimaryCta"; "required": false; "isSignal": true; }; "tooltipSecondaryCta": { "alias": "tooltipSecondaryCta"; "required": false; "isSignal": true; }; }, { "tooltipPrimaryCtaClick": "tooltipPrimaryCtaClick"; "tooltipSecondaryCtaClick": "tooltipSecondaryCtaClick"; }, never, never, true, never>;
+}
+
+type MessageItemStatus = 'default' | 'read' | 'typing' | 'unread' | 'warning';
+type MessageBubbleType = 'text' | 'document' | 'audio' | 'image';
+type MessageDirection = 'incoming' | 'outgoing';
+declare class MessageItemComponent {
+    /** Avatar image URL — if empty, falls back to initials */
+    avatarSrc: _angular_core.InputSignal<string>;
+    /** Explicit initials override — auto-derived from name when empty */
+    avatarInitials: _angular_core.InputSignal<string>;
+    /** Sender / contact display name */
+    name: _angular_core.InputSignal<string>;
+    /** Timestamp string, e.g. "12:30" */
+    time: _angular_core.InputSignal<string>;
+    /** Message preview text shown below the name */
+    preview: _angular_core.InputSignal<string>;
+    /** Visual state of the list item */
+    status: _angular_core.InputSignal<MessageItemStatus>;
+    /** Unread badge count — shown when status is "unread" */
+    unreadCount: _angular_core.InputSignal<number>;
+    /** Whether this item is currently selected / active */
+    selected: _angular_core.InputSignal<boolean>;
+    /** Emitted when the item is clicked */
+    itemClicked: _angular_core.OutputEmitterRef<void>;
+    initials: _angular_core.Signal<string>;
+    get hostClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MessageItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MessageItemComponent, "pecb-message-item", never, { "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "time": { "alias": "time"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "unreadCount": { "alias": "unreadCount"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; }, never, never, true, never>;
+}
+declare class MessageBubbleComponent {
+    /** Visual type of the message */
+    type: _angular_core.InputSignal<MessageBubbleType>;
+    /** Whether the message was sent by the current user or received */
+    direction: _angular_core.InputSignal<MessageDirection>;
+    /** Single text message string — alias for passing one item via messages */
+    text: _angular_core.InputSignal<string>;
+    /**
+     * Array of text strings to render as stacked bubbles.
+     * When provided, takes precedence over `text`.
+     */
+    messages: _angular_core.InputSignal<string[]>;
+    /** Sender display name (shown for incoming) */
+    senderName: _angular_core.InputSignal<string>;
+    /** Timestamp string, e.g. "4:59 PM" */
+    time: _angular_core.InputSignal<string>;
+    /** Show read-receipt checkmark below the bubble (outgoing only) */
+    showReadReceipt: _angular_core.InputSignal<boolean>;
+    /** Avatar image URL */
+    avatarSrc: _angular_core.InputSignal<string>;
+    /** Explicit initials override — auto-derived from senderName when empty */
+    avatarInitials: _angular_core.InputSignal<string>;
+    /** File name, e.g. "Filename.pdf" */
+    fileName: _angular_core.InputSignal<string>;
+    /** File metadata string, e.g. "1 page • PDF • 4MB" */
+    fileMeta: _angular_core.InputSignal<string>;
+    /** Thumbnail image URL for document / image types */
+    thumbnailSrc: _angular_core.InputSignal<string>;
+    /** Audio duration string, e.g. "0:30" */
+    audioDuration: _angular_core.InputSignal<string>;
+    /**
+     * Custom waveform bar heights (values 1–20).
+     * Defaults to a built-in decorative pattern when not supplied.
+     */
+    waveformData: _angular_core.InputSignal<number[]>;
+    /** Image URL for image-type messages */
+    imageSrc: _angular_core.InputSignal<string>;
+    /** Alt text for image */
+    imageAlt: _angular_core.InputSignal<string>;
+    /** Emitted when the download button is clicked (document type, incoming) */
+    downloadClicked: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when the play button is clicked (audio type) */
+    playClicked: _angular_core.OutputEmitterRef<void>;
+    initials: _angular_core.Signal<string>;
+    displayMessages: _angular_core.Signal<string[]>;
+    waveformBars: _angular_core.Signal<number[]>;
+    get hostClasses(): string;
+    get senderLabel(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MessageBubbleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MessageBubbleComponent, "pecb-message-bubble", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "senderName": { "alias": "senderName"; "required": false; "isSignal": true; }; "time": { "alias": "time"; "required": false; "isSignal": true; }; "showReadReceipt": { "alias": "showReadReceipt"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "fileName": { "alias": "fileName"; "required": false; "isSignal": true; }; "fileMeta": { "alias": "fileMeta"; "required": false; "isSignal": true; }; "thumbnailSrc": { "alias": "thumbnailSrc"; "required": false; "isSignal": true; }; "audioDuration": { "alias": "audioDuration"; "required": false; "isSignal": true; }; "waveformData": { "alias": "waveformData"; "required": false; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; }, { "downloadClicked": "downloadClicked"; "playClicked": "playClicked"; }, never, never, true, never>;
+}
+
+declare class FullscreenModalContentDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FullscreenModalContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FullscreenModalContentDirective, "[pecbFullscreenModalContent]", never, {}, {}, never, never, true, never>;
+}
+declare class FullscreenModalFooterDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FullscreenModalFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FullscreenModalFooterDirective, "[pecbFullscreenModalFooter]", never, {}, {}, never, never, true, never>;
+}
+declare class FullscreenModalComponent implements OnInit, OnDestroy, AfterViewInit {
+    /** Unique id forwarded to the dialog element */
+    id: _angular_core.InputSignal<string>;
+    /** Controls visibility */
+    isOpen: _angular_core.ModelSignal<boolean>;
+    /** Title rendered in the modal header */
+    title: _angular_core.InputSignal<string>;
+    /** Show or hide the built-in close (×) button */
+    showCloseButton: _angular_core.InputSignal<boolean>;
+    /** Close modal when clicking the backdrop */
+    closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    /** Close modal when pressing Escape */
+    closeOnEscape: _angular_core.InputSignal<boolean>;
+    /** Accessible label for the dialog (used when no visible title exists) */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID of the element that labels this dialog */
+    ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    /** ID of the element that describes this dialog */
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    /** Emitted when the modal has been closed */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when the modal has been opened */
+    opened: _angular_core.OutputEmitterRef<void>;
+    modalPanel: ElementRef<HTMLElement>;
+    private cleanupFocusTrap;
+    private cleanupBodyScroll;
+    private previousActiveElement;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onBackdropClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    close(): void;
+    /** Generated title id used for aria-labelledby when no override is given */
+    get titleId(): string;
+    get resolvedLabelledBy(): string | undefined;
+    private onOpen;
+    private setupFocusTrap;
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FullscreenModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FullscreenModalComponent, "pecb-fullscreen-modal", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "closed": "closed"; "opened": "opened"; }, never, ["[pecbFullscreenModalHeader]", "[pecbFullscreenModalContent]", "*", "[pecbFullscreenModalFooter]"], true, never>;
+}
+
+type StepperType = 'basic' | 'dot' | 'custom-icon' | 'navigation' | 'inline';
+type StepperSize = 'sm' | 'md';
+type StepperDirection = 'horizontal' | 'vertical';
+type StepState = 'finish' | 'process' | 'progress' | 'wait' | 'error';
+type StepperTailStyle = 'default' | 'bold';
+type StepOrder = 'first' | 'center' | 'last' | 'only';
+interface StepItem {
+    label: string;
+    description?: string;
+    icon?: string;
+    time?: string;
+    state?: StepState;
+}
+declare class StepperComponent {
+    id: _angular_core.InputSignal<string>;
+    type: _angular_core.InputSignal<StepperType>;
+    size: _angular_core.InputSignal<StepperSize>;
+    direction: _angular_core.InputSignal<StepperDirection>;
+    tailStyle: _angular_core.InputSignal<StepperTailStyle>;
+    steps: _angular_core.InputSignal<StepItem[]>;
+    currentStep: _angular_core.InputSignal<number>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    stepClicked: _angular_core.OutputEmitterRef<number>;
+    resolvedSteps: _angular_core.Signal<{
+        index: number;
+        resolvedState: StepState;
+        order: StepOrder;
+        label: string;
+        description?: string;
+        icon?: string;
+        time?: string;
+        state?: StepState;
+    }[]>;
+    get stepperClasses(): string[];
+    getStepClasses(step: {
+        resolvedState: StepState;
+        index: number;
+        order: StepOrder;
+    }): string[];
+    getConnectorClasses(step: {
+        resolvedState: StepState;
+    }): string[];
+    getLeftConnectorClasses(step: {
+        resolvedState: StepState;
+        index: number;
+    }): string[];
+    getRightConnectorClasses(step: {
+        resolvedState: StepState;
+    }): string[];
+    onStepClick(index: number): void;
+    onStepKeyDown(event: KeyboardEvent, index: number): void;
+    private computeState;
+    private computeOrder;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepperComponent, "pecb-stepper", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "tailStyle": { "alias": "tailStyle"; "required": false; "isSignal": true; }; "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "stepClicked": "stepClicked"; }, never, never, true, never>;
+}
+
+/**
+ * Predefined gap sizes mapped to the PECB spacing tokens.
+ *
+ * | Token | Value |
+ * |-------|-------|
+ * | none  | 0     |
+ * | xs    | 6px   |
+ * | sm    | 8px   |
+ * | md    | 16px  |
+ * | lg    | 20px  |
+ * | xl    | 24px  |
+ * | 2xl   | 32px  |
+ */
+type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Predefined padding sizes mapped to the PECB spacing tokens.
+ *
+ * | Token | Value |
+ * |-------|-------|
+ * | none  | 0     |
+ * | xs    | 6px   |
+ * | sm    | 8px   |
+ * | md    | 16px  |
+ * | lg    | 20px  |
+ * | xl    | 24px  |
+ * | 2xl   | 32px  |
+ */
+type GridPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Number of columns the grid can display.
+ * Use 'auto' for auto-fit behaviour based on minChildWidth.
+ */
+type GridColumns = 1 | 2 | 3 | 4 | 6 | 12 | 'auto';
+/**
+ * Horizontal alignment of grid items.
+ */
+type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * Vertical alignment of grid items.
+ */
+type GridVerticalAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/**
+ * Number of columns a single grid item can span.
+ */
+type GridItemSpan = 1 | 2 | 3 | 4 | 6 | 12 | 'full';
+/**
+ * Predefined spacer sizes.
+ *
+ * | Token | Value |
+ * |-------|-------|
+ * | xs    | 6px   |
+ * | sm    | 8px   |
+ * | md    | 16px  |
+ * | lg    | 20px  |
+ * | xl    | 24px  |
+ * | 2xl   | 32px  |
+ * | 3xl   | 40px  |
+ * | 4xl   | 48px  |
+ */
+type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+declare class GridComponent {
+    /** Unique element ID */
+    id: _angular_core.InputSignal<string>;
+    /** Number of columns (1-12 or 'auto' for auto-fit) */
+    columns: _angular_core.InputSignal<GridColumns>;
+    /**
+     * Minimum child width when columns='auto'.
+     * Accepts any CSS length value. Defaults to '200px'.
+     */
+    minChildWidth: _angular_core.InputSignal<string>;
+    /** Gap between all grid items (row and column). Overridden by rowGap / columnGap. */
+    gap: _angular_core.InputSignal<GridGap>;
+    /** Row gap — overrides `gap` for the vertical axis */
+    rowGap: _angular_core.InputSignal<GridGap | undefined>;
+    /** Column gap — overrides `gap` for the horizontal axis */
+    columnGap: _angular_core.InputSignal<GridGap | undefined>;
+    /** Padding inside the grid container */
+    padding: _angular_core.InputSignal<GridPadding>;
+    /** Horizontal alignment of items within their cells */
+    align: _angular_core.InputSignal<GridAlign>;
+    /** Vertical alignment of items within their cells */
+    verticalAlign: _angular_core.InputSignal<GridVerticalAlign>;
+    /** Accessible label for the grid region */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** CSS classes for the grid container */
+    gridClasses: _angular_core.Signal<string[]>;
+    /** Inline style for auto-fit min width */
+    gridStyle: _angular_core.Signal<{
+        '--pecb-grid-min-child-width': string;
+    } | {
+        '--pecb-grid-min-child-width'?: undefined;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridComponent, "pecb-grid", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "minChildWidth": { "alias": "minChildWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "rowGap": { "alias": "rowGap"; "required": false; "isSignal": true; }; "columnGap": { "alias": "columnGap"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "verticalAlign": { "alias": "verticalAlign"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class GridItemComponent {
+    /** Number of columns this item should span */
+    span: _angular_core.InputSignal<GridItemSpan>;
+    /** Number of columns to span on small screens (>=768px) */
+    spanSm: _angular_core.InputSignal<GridItemSpan | undefined>;
+    /** Number of columns to span on medium screens (>=1024px) */
+    spanMd: _angular_core.InputSignal<GridItemSpan | undefined>;
+    /** Number of columns to span on large screens (>=1280px) */
+    spanLg: _angular_core.InputSignal<GridItemSpan | undefined>;
+    /** Semantic role for the grid item */
+    role: _angular_core.InputSignal<string | null>;
+    /** CSS classes for the grid item */
+    itemClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridItemComponent, "pecb-grid-item", never, { "span": { "alias": "span"; "required": false; "isSignal": true; }; "spanSm": { "alias": "spanSm"; "required": false; "isSignal": true; }; "spanMd": { "alias": "spanMd"; "required": false; "isSignal": true; }; "spanLg": { "alias": "spanLg"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class SpacerComponent {
+    /** Vertical space size */
+    size: _angular_core.InputSignal<SpacerSize>;
+    /** Whether the spacer is horizontal (inline) instead of vertical */
+    inline: _angular_core.InputSignal<boolean>;
+    /** CSS classes for the spacer */
+    spacerClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpacerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpacerComponent, "pecb-spacer", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type DashboardGridLayout = '1' | '2' | '3' | '4' | 'sidebar-1col' | 'sidebar-2col' | 'sidebar-3col' | 'sidebar-4col' | 'custom';
+type DashboardGridGap = 'none' | 'sm' | 'md' | 'lg';
+declare class DashboardGridComponent {
+    id: _angular_core.InputSignal<string>;
+    layout: _angular_core.InputSignal<DashboardGridLayout>;
+    gap: _angular_core.InputSignal<DashboardGridGap>;
+    columns: _angular_core.InputSignal<string>;
+    minHeight: _angular_core.InputSignal<string>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    gridStyle: _angular_core.Signal<Record<string, string>>;
+    get gridClasses(): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardGridComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardGridComponent, "pecb-dashboard-grid", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type ProgressType = 'bar' | 'circle' | 'spinner';
+type ProgressBarSize = 'sm' | 'lg';
+type ProgressCircleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare class SpinnerComponent {
+    id: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<number>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    sizeValue: _angular_core.Signal<number>;
+    strokeWidth: _angular_core.Signal<number>;
+    radius: _angular_core.Signal<number>;
+    circumference: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpinnerComponent, "pecb-spinner", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class ProgressBarComponent {
+    id: _angular_core.InputSignal<string>;
+    value: _angular_core.InputSignal<number>;
+    size: _angular_core.InputSignal<ProgressBarSize>;
+    label: _angular_core.InputSignal<string>;
+    metadata: _angular_core.InputSignal<string>;
+    showPercentage: _angular_core.InputSignal<boolean>;
+    color: _angular_core.InputSignal<string>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    clampedValue: _angular_core.Signal<number>;
+    fillColor: _angular_core.Signal<string>;
+    get barClasses(): string[];
+    private getColorForProgress;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "pecb-progress-bar", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "metadata": { "alias": "metadata"; "required": false; "isSignal": true; }; "showPercentage": { "alias": "showPercentage"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class ProgressCircleComponent {
+    id: _angular_core.InputSignal<string>;
+    value: _angular_core.InputSignal<number>;
+    size: _angular_core.InputSignal<ProgressCircleSize>;
+    showPercentage: _angular_core.InputSignal<boolean>;
+    color: _angular_core.InputSignal<string>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    private readonly sizeMap;
+    private readonly fontSizeMap;
+    sizeValue: _angular_core.Signal<number>;
+    fontSize: _angular_core.Signal<number>;
+    strokeWidth: _angular_core.Signal<9 | 4 | 5 | 6 | 7>;
+    radius: _angular_core.Signal<number>;
+    circumference: _angular_core.Signal<number>;
+    clampedValue: _angular_core.Signal<number>;
+    dashOffset: _angular_core.Signal<number>;
+    fillColor: _angular_core.Signal<string>;
+    get circleClasses(): string[];
+    private getColorForProgress;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressCircleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressCircleComponent, "pecb-progress-circle", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showPercentage": { "alias": "showPercentage"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type CodeInputState = 'default' | 'error';
+type CodeInputDirection = 'horizontal' | 'vertical';
+declare class CodeInputComponent implements ControlValueAccessor {
+    cellInputs: QueryList<ElementRef<HTMLInputElement>>;
+    id: _angular_core.InputSignal<string>;
+    length: _angular_core.InputSignal<number>;
+    direction: _angular_core.InputSignal<CodeInputDirection>;
+    state: _angular_core.InputSignal<CodeInputState>;
+    errorMessage: _angular_core.InputSignal<string>;
+    showClearAll: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    completed: _angular_core.OutputEmitterRef<string>;
+    cleared: _angular_core.OutputEmitterRef<void>;
+    cells: _angular_core.WritableSignal<string[]>;
+    focusedIndex: _angular_core.WritableSignal<number>;
+    cellIndices: _angular_core.Signal<number[]>;
+    private onChange;
+    private onTouched;
+    constructor();
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    getCellClasses(index: number): string[];
+    onCellInput(event: Event, index: number): void;
+    onCellKeyDown(event: KeyboardEvent, index: number): void;
+    onCellPaste(event: ClipboardEvent, index: number): void;
+    onCellFocus(index: number): void;
+    onCellBlur(): void;
+    onClearAll(): void;
+    private initCells;
+    private focusCell;
+    private syncInputValues;
+    private emitValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeInputComponent, "pecb-code-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "showClearAll": { "alias": "showClearAll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "completed": "completed"; "cleared": "cleared"; }, never, never, true, never>;
+}
+
+/**
+ * Shadow type — soft (diffused) or hard (sharp, pronounced).
+ */
+type ShadowType = 'soft' | 'hard';
+/**
+ * Shadow Soft sizes — 8 levels of increasing depth.
+ *
+ * | Token     | Description              |
+ * |-----------|--------------------------|
+ * | xxsmall   | Barely visible lift      |
+ * | xsmall    | Subtle depth hint        |
+ * | small     | Light card shadow        |
+ * | medium    | Default card elevation   |
+ * | large     | Raised element           |
+ * | xlarge    | Floating panel           |
+ * | xxlarge   | Modal / overlay          |
+ * | xxxlarge  | Maximum depth            |
+ */
+type ShadowSoftSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+/**
+ * Shadow Hard sizes — 4 levels of increasing depth.
+ *
+ * | Token   | Description                |
+ * |---------|----------------------------|
+ * | xxsmall | Tight hard edge            |
+ * | xsmall  | Defined border shadow      |
+ * | small   | Prominent hard shadow      |
+ * | medium  | Maximum hard shadow depth  |
+ */
+type ShadowHardSize = 'xxsmall' | 'xsmall' | 'small' | 'medium';
+/**
+ * Combined shadow size (used when type is specified separately).
+ */
+type ShadowSize = ShadowSoftSize | ShadowHardSize;
+/**
+ * Blur intensity levels.
+ *
+ * | Token   | Value | Description            |
+ * |---------|-------|------------------------|
+ * | none    | 0     | No blur                |
+ * | xsmall  | 2px   | Barely noticeable      |
+ * | small   | 4px   | Slight softening       |
+ * | medium  | 8px   | Moderate blur          |
+ * | large   | 16px  | Heavy blur             |
+ * | xlarge  | 32px  | Near-opaque blur       |
+ */
+type BlurSize = 'none' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * Applies a shadow to the host element.
+ *
+ * @example
+ * ```html
+ * <!-- Soft shadow (default) -->
+ * <div pecbShadow="medium">Soft medium shadow</div>
+ *
+ * <!-- Specify type explicitly -->
+ * <div pecbShadow="small" shadowType="hard">Hard small shadow</div>
+ *
+ * <!-- Dynamic binding -->
+ * <div [pecbShadow]="currentSize" [shadowType]="currentType">Dynamic</div>
+ * ```
+ */
+declare class ShadowDirective implements OnInit, OnChanges {
+    /** Shadow size token */
+    pecbShadow: _angular_core.InputSignal<ShadowSize>;
+    /** Shadow type — 'soft' (default) or 'hard' */
+    shadowType: _angular_core.InputSignal<ShadowType>;
+    private el;
+    private renderer;
+    private currentClass;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    private applyClass;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShadowDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShadowDirective, "[pecbShadow]", never, { "pecbShadow": { "alias": "pecbShadow"; "required": false; "isSignal": true; }; "shadowType": { "alias": "shadowType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Applies a CSS blur filter to the host element.
+ *
+ * @example
+ * ```html
+ * <!-- Element blur -->
+ * <img pecbBlur="medium" src="photo.jpg" />
+ *
+ * <!-- Backdrop blur (glass-morphism) -->
+ * <div pecbBlur="small" [backdrop]="true">Frosted glass</div>
+ * ```
+ */
+declare class BlurDirective implements OnInit, OnChanges {
+    /** Blur size token */
+    pecbBlur: _angular_core.InputSignal<BlurSize>;
+    /** Apply as backdrop-filter instead of filter */
+    backdrop: _angular_core.InputSignal<boolean>;
+    private el;
+    private renderer;
+    private currentClass;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    private applyClass;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BlurDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BlurDirective, "[pecbBlur]", never, { "pecbBlur": { "alias": "pecbBlur"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Divider visual variants derived from the Figma design system.
+ *
+ * | Type                | Description                                        |
+ * |---------------------|----------------------------------------------------|
+ * | default             | Simple horizontal line                             |
+ * | with-icon           | Line with a centered icon (ng-content)             |
+ * | with-label          | Left-aligned label text, line fills remaining space|
+ * | with-title          | Centered title text over the line                  |
+ * | with-button         | Centered button over the line                      |
+ * | with-title-button   | Left title, line, right button                     |
+ */
+type DividerType = 'default' | 'with-icon' | 'with-label' | 'with-title' | 'with-button' | 'with-title-button';
+declare class DividerComponent {
+    /** Unique element ID */
+    id: _angular_core.InputSignal<string>;
+    /** Divider variant */
+    type: _angular_core.InputSignal<DividerType>;
+    /**
+     * Title text displayed on the divider.
+     * Used by 'with-label', 'with-title', and 'with-title-button' types.
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Button label text.
+     * Used by 'with-button' and 'with-title-button' types.
+     */
+    buttonLabel: _angular_core.InputSignal<string>;
+    /**
+     * Whether to show the icon inside the button.
+     * Defaults to true.
+     */
+    showButtonIcon: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show the default + icon for the 'with-icon' type
+     * when no content is projected via [dividerIcon].
+     * Defaults to true.
+     */
+    showDefaultIcon: _angular_core.InputSignal<boolean>;
+    /** Accessible label for the divider */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Emits when the button is clicked (for with-button and with-title-button types) */
+    buttonClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** CSS class for the host wrapper */
+    dividerClasses: _angular_core.Signal<string[]>;
+    onButtonClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DividerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DividerComponent, "pecb-divider", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "showButtonIcon": { "alias": "showButtonIcon"; "required": false; "isSignal": true; }; "showDefaultIcon": { "alias": "showDefaultIcon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; }, never, ["[dividerIcon]"], true, never>;
+}
+
+type CodeSnippetTheme = 'light' | 'dark';
+type CodeSnippetVariant = 'default' | 'filename' | 'filename-actions' | 'copy-banner' | 'gutter';
+declare class CodeSnippetComponent {
+    private readonly sanitizer;
+    id: _angular_core.InputSignal<string>;
+    code: _angular_core.InputSignal<string>;
+    highlightedCode: _angular_core.InputSignal<string>;
+    language: _angular_core.InputSignal<string>;
+    theme: _angular_core.InputSignal<CodeSnippetTheme>;
+    variant: _angular_core.InputSignal<CodeSnippetVariant>;
+    filename: _angular_core.InputSignal<string>;
+    showLineNumbers: _angular_core.InputSignal<boolean>;
+    showCopy: _angular_core.InputSignal<boolean>;
+    showFooter: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    copied: _angular_core.OutputEmitterRef<string>;
+    copyLabel: _angular_core.WritableSignal<string>;
+    codeLines: _angular_core.Signal<string[]>;
+    safeHighlightedCode: _angular_core.Signal<SafeHtml>;
+    useHighlighted: _angular_core.Signal<boolean>;
+    charCount: _angular_core.Signal<number>;
+    lineCount: _angular_core.Signal<number>;
+    get snippetClasses(): string[];
+    onCopy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeSnippetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeSnippetComponent, "pecb-code-snippet", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "code": { "alias": "code"; "required": false; "isSignal": true; }; "highlightedCode": { "alias": "highlightedCode"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "filename": { "alias": "filename"; "required": false; "isSignal": true; }; "showLineNumbers": { "alias": "showLineNumbers"; "required": false; "isSignal": true; }; "showCopy": { "alias": "showCopy"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "copied": "copied"; }, never, ["[codeActions]"], true, never>;
+}
+
+/**
+ * Common type definitions for PECB UI Components
+ * @module types
+ */
+/**
+ * Standard size variants used across components
+ */
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Standard component size mapping
+ */
+type ComponentSize = 'small' | 'medium' | 'large';
+/**
+ * Semantic color variants
+ */
+type ColorVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+/**
+ * Extended color variants including neutral options
+ */
+type ExtendedColorVariant = ColorVariant | 'neutral' | 'muted';
+/**
+ * Component state variants
+ */
+type StateVariant = 'default' | 'hover' | 'active' | 'focus' | 'disabled';
+/**
+ * Position options for overlays and popups
+ */
+type Position = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+/**
+ * Alignment options
+ */
+type Alignment = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * Direction options for layouts
+ */
+type Direction = 'horizontal' | 'vertical';
+/**
+ * Orientation alias for direction
+ */
+type Orientation = 'horizontal' | 'vertical';
+/**
+ * Spacing scale values
+ */
+type SpacingScale = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * Border radius scale values
+ */
+type RadiusScale = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Shadow elevation levels
+ */
+type ElevationLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Animation timing presets
+ */
+type AnimationTiming = 'instant' | 'fast' | 'normal' | 'slow';
+/**
+ * Breakpoint names
+ */
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * Form validation state
+ */
+type ValidationState = 'valid' | 'invalid' | 'pending' | 'pristine';
+/**
+ * Generic callback function type
+ */
+type Callback<T = void> = () => T;
+/**
+ * Generic event handler type
+ */
+type EventHandler<T = Event> = (event: T) => void;
+/**
+ * Make specific properties required
+ */
+type RequireProps<T, K extends keyof T> = T & Required<Pick<T, K>>;
+/**
+ * Make specific properties optional
+ */
+type OptionalProps<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * Extract non-nullable type
+ */
+type NonNullableProps<T> = {
+    [K in keyof T]: NonNullable<T[K]>;
+};
+
+/**
+ * Common interface for components that can be disabled
+ */
+interface Disableable {
+    /** Whether the component is disabled */
+    disabled: boolean;
+}
+/**
+ * Common interface for components with loading state
+ */
+interface Loadable {
+    /** Whether the component is in a loading state */
+    loading: boolean;
+}
+/**
+ * Common interface for components with size variants
+ */
+interface Sizeable {
+    /** The size of the component */
+    size: ComponentSize;
+}
+/**
+ * Common interface for components with color variants
+ */
+interface Colorable {
+    /** The color variant of the component */
+    variant: ColorVariant;
+}
+/**
+ * Common interface for focusable components
+ */
+interface Focusable {
+    /** Focus the component programmatically */
+    focus(): void;
+    /** Blur the component programmatically */
+    blur(): void;
+}
+/**
+ * Base interface for form control components
+ */
+interface FormControlBase extends Disableable {
+    /** Unique identifier for the control */
+    id: string;
+    /** Name attribute for form submission */
+    name: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Whether the field is readonly */
+    readonly: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Accessible label */
+    ariaLabel?: string;
+    /** ID of element that labels this control */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this control */
+    ariaDescribedBy?: string;
+}
+/**
+ * Interface for components with validation
+ */
+interface Validatable {
+    /** Current validation state */
+    validationState: ValidationState;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Success message to display */
+    successMessage?: string;
+    /** Helper text to display */
+    helperText?: string;
+}
+/**
+ * Interface for selectable items (dropdown, list, etc.)
+ */
+interface SelectableItem<T = unknown> {
+    /** Unique value for the item */
+    value: T;
+    /** Display label */
+    label: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Optional icon name */
+    icon?: string;
+    /** Optional description */
+    description?: string;
+    /** Optional group name for categorization */
+    group?: string;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Interface for components that support custom templates
+ */
+interface Templatable {
+    /** Custom template for rendering */
+    template?: TemplateRef<unknown>;
+}
+/**
+ * Interface for overlay components (modal, popover, tooltip)
+ */
+interface OverlayComponent {
+    /** Whether the overlay is currently visible */
+    isOpen: boolean;
+    /** Open the overlay */
+    open(): void;
+    /** Close the overlay */
+    close(): void;
+    /** Toggle the overlay state */
+    toggle(): void;
+}
+/**
+ * Interface for components with before/after close hooks
+ */
+interface ClosableWithHooks {
+    /** Called before the component closes. Return false to prevent closing */
+    beforeClose?: () => boolean | Promise<boolean>;
+    /** Called after the component closes */
+    afterClose?: () => void;
+}
+/**
+ * Interface for table column definition
+ */
+interface TableColumn<T = unknown> {
+    /** Unique column key */
+    key: string;
+    /** Column header label */
+    label: string;
+    /** Property path to access data (supports dot notation) */
+    field?: keyof T | string;
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Whether the column is filterable */
+    filterable?: boolean;
+    /** Column width (CSS value) */
+    width?: string;
+    /** Minimum column width */
+    minWidth?: string;
+    /** Maximum column width */
+    maxWidth?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Whether the column is visible */
+    visible?: boolean;
+    /** Whether the column is sticky */
+    sticky?: 'start' | 'end';
+    /** Custom cell template */
+    cellTemplate?: TemplateRef<unknown>;
+    /** Custom header template */
+    headerTemplate?: TemplateRef<unknown>;
+    /** Value formatter function */
+    formatter?: (value: unknown, row: T) => string;
+}
+/**
+ * Interface for pagination state
+ */
+interface PaginationState {
+    /** Current page (1-indexed) */
+    currentPage: number;
+    /** Number of items per page */
+    pageSize: number;
+    /** Total number of items */
+    totalItems: number;
+    /** Total number of pages (calculated) */
+    totalPages: number;
+}
+/**
+ * Interface for sort state
+ */
+interface SortState {
+    /** Column key to sort by */
+    column: string;
+    /** Sort direction */
+    direction: 'asc' | 'desc' | null;
+}
+/**
+ * Interface for filter state
+ */
+interface FilterState {
+    /** Column key to filter */
+    column: string;
+    /** Filter operator */
+    operator: 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'gt' | 'lt' | 'gte' | 'lte' | 'between' | 'in';
+    /** Filter value(s) */
+    value: unknown;
+}
+/**
+ * Interface for tree node structure
+ */
+interface TreeNode<T = unknown> {
+    /** Unique node identifier */
+    id: string | number;
+    /** Node data */
+    data: T;
+    /** Child nodes */
+    children?: TreeNode<T>[];
+    /** Whether the node is expanded */
+    expanded?: boolean;
+    /** Whether the node is selected */
+    selected?: boolean;
+    /** Whether the node is disabled */
+    disabled?: boolean;
+    /** Whether the node is a leaf (no children) */
+    leaf?: boolean;
+    /** Parent node ID */
+    parentId?: string | number;
+    /** Node level in the tree (0-indexed) */
+    level?: number;
+}
+/**
+ * Interface for breadcrumb item
+ */
+interface BreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** Navigation URL or route */
+    url?: string;
+    /** Route path array for routerLink */
+    routerLink?: string | string[];
+    /** Query parameters */
+    queryParams?: Record<string, string>;
+    /** Icon name */
+    icon?: string;
+    /** Icon color (CSS color value). Overrides the global iconColor. */
+    iconColor?: string;
+    /** Whether this is the active/current item */
+    active?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
+/**
+ * Interface for tab item
+ */
+interface TabItem {
+    /** Unique tab identifier */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Tab icon */
+    icon?: string;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Whether the tab is closable */
+    closable?: boolean;
+    /** Badge content */
+    badge?: string | number;
+    /** Content template */
+    content?: TemplateRef<unknown>;
+}
+/**
+ * Interface for menu item
+ */
+interface MenuItem {
+    /** Unique item identifier */
+    id?: string;
+    /** Display label */
+    label: string;
+    /** Icon name */
+    icon?: string;
+    /** Command to execute on click */
+    command?: () => void;
+    /** URL for navigation */
+    url?: string;
+    /** Router link */
+    routerLink?: string | string[];
+    /** Query parameters */
+    queryParams?: Record<string, string>;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether the item is visible */
+    visible?: boolean;
+    /** Child items for submenu */
+    items?: MenuItem[];
+    /** Whether this is a separator */
+    separator?: boolean;
+    /** Additional CSS class */
+    styleClass?: string;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Badge content */
+    badge?: string | number;
+    /** Badge color variant */
+    badgeVariant?: ColorVariant;
+}
+
+/**
+ * Separator style between breadcrumb items.
+ *
+ * | Type    | Description               |
+ * |---------|---------------------------|
+ * | slash   | Forward slash `/`         |
+ * | arrow   | Right chevron arrow `>`   |
+ * | custom  | Custom template separator |
+ */
+type BreadcrumbSeparator = 'slash' | 'arrow' | 'custom';
+declare class BreadcrumbsComponent {
+    private readonly registry;
+    private readonly sanitizer;
+    /** Unique element ID */
+    id: _angular_core.InputSignal<string>;
+    /** Array of breadcrumb items to display */
+    items: _angular_core.InputSignal<BreadcrumbItem[]>;
+    /** Separator style between items */
+    separator: _angular_core.InputSignal<BreadcrumbSeparator>;
+    /** Custom separator template (used when separator is 'custom') */
+    separatorTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    /**
+     * Global icon color (CSS color value).
+     * Applied to all icons unless overridden by the item's `iconColor`.
+     * When not set, icons inherit the text color (red for links, gray for current).
+     */
+    iconColor: _angular_core.InputSignal<string>;
+    /** Accessible label for the breadcrumb navigation */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Emits the clicked breadcrumb item */
+    itemClick: _angular_core.OutputEmitterRef<BreadcrumbItem>;
+    /** CSS classes for the host wrapper */
+    breadcrumbClasses: _angular_core.Signal<string[]>;
+    /** Whether an item is the last in the list (current page) */
+    isLastItem(index: number): boolean;
+    /** Resolve an icon name to a trusted SVG string */
+    getIconSvg(iconName: string | undefined): SafeHtml | null;
+    /** Resolve icon color: per-item iconColor > global iconColor > inherit */
+    getIconColor(item: BreadcrumbItem): string | null;
+    onItemClick(event: Event, item: BreadcrumbItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbsComponent, "pecb-breadcrumbs", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "separatorTemplate": { "alias": "separatorTemplate"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
+/**
+ * Search bar mode.
+ *
+ * | Mode     | Description                                        |
+ * |----------|----------------------------------------------------|
+ * | none     | No search bar                                      |
+ * | simple   | Compact search input only                          |
+ * | advanced | Search input with a toggle button for filter fields |
+ */
+type SearchMode = 'none' | 'simple' | 'advanced';
+/**
+ * A positioning layout component that enforces the PECB design system rules
+ * for buttons, tabs, search bars, and banners on any page.
+ *
+ * **Design rules (from Figma):**
+ * - Buttons are always on the **left**
+ * - Search bar is always on the **right**
+ * - When a banner exists, buttons go **above** it, search goes **below** it
+ * - When buttons + tabs coexist without a banner, a **divider** separates them
+ * - Tabs + search share the same row (tabs left, search right)
+ *
+ * **Content projection slots:**
+ * - `[toolbarButtons]` — action buttons (left side)
+ * - `[toolbarTabs]` — tab navigation (left side, below banner or after divider)
+ * - `[toolbarSearch]` — search bar (right side)
+ * - `[toolbarBanner]` — profile banner / header area
+ * - `[toolbarAdvancedSearch]` — expandable advanced filter fields
+ * - `[toolbarBackButton]` — go-back navigation (top-left, above everything)
+ *
+ * @example
+ * ```html
+ * <!-- Simple: buttons left, search right -->
+ * <pecb-general>
+ *   <ng-container toolbarButtons>
+ *     <button>Primary</button>
+ *   </ng-container>
+ *   <ng-container toolbarSearch>
+ *     <input placeholder="Search..." />
+ *   </ng-container>
+ * </pecb-general>
+ *
+ * <!-- With banner: buttons above, tabs+search below -->
+ * <pecb-general [hasBanner]="true" [hasTabs]="true">
+ *   <ng-container toolbarButtons>...</ng-container>
+ *   <ng-container toolbarBanner>...</ng-container>
+ *   <ng-container toolbarTabs>...</ng-container>
+ *   <ng-container toolbarSearch>...</ng-container>
+ * </pecb-general>
+ * ```
+ */
+declare class GeneralComponent {
+    /** Unique element ID */
+    id: _angular_core.InputSignal<string>;
+    /** Whether the toolbar has action buttons */
+    hasButtons: _angular_core.InputSignal<boolean>;
+    /** Whether the toolbar has tab navigation */
+    hasTabs: _angular_core.InputSignal<boolean>;
+    /** Whether the toolbar has a banner/profile header */
+    hasBanner: _angular_core.InputSignal<boolean>;
+    /** Whether the toolbar has a back button */
+    hasBackButton: _angular_core.InputSignal<boolean>;
+    /** Search bar mode: 'none', 'simple', or 'advanced' */
+    searchMode: _angular_core.InputSignal<SearchMode>;
+    /** Whether the advanced search panel is currently expanded */
+    advancedSearchOpen: _angular_core.InputSignal<boolean>;
+    /** Emits when the advanced search toggle is clicked */
+    advancedSearchToggle: _angular_core.OutputEmitterRef<boolean>;
+    /** Accessible label for the toolbar region */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Whether a search bar is present */
+    hasSearch: _angular_core.Signal<boolean>;
+    /**
+     * Whether to show a divider between buttons and tabs.
+     * Only when both exist AND there is no banner.
+     */
+    showDivider: _angular_core.Signal<boolean>;
+    /**
+     * Layout mode determines the overall structure.
+     *
+     * - 'flat': no banner — everything in stacked rows
+     * - 'banner': banner present — buttons above, tabs+search below
+     */
+    layoutMode: _angular_core.Signal<"flat" | "banner">;
+    onAdvancedSearchToggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GeneralComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GeneralComponent, "pecb-general", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "hasButtons": { "alias": "hasButtons"; "required": false; "isSignal": true; }; "hasTabs": { "alias": "hasTabs"; "required": false; "isSignal": true; }; "hasBanner": { "alias": "hasBanner"; "required": false; "isSignal": true; }; "hasBackButton": { "alias": "hasBackButton"; "required": false; "isSignal": true; }; "searchMode": { "alias": "searchMode"; "required": false; "isSignal": true; }; "advancedSearchOpen": { "alias": "advancedSearchOpen"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "advancedSearchToggle": "advancedSearchToggle"; }, never, ["[toolbarBackButton]", "[toolbarButtons]", "[toolbarBanner]", "[toolbarTabs]", "[toolbarSearch]", "[toolbarAdvancedSearch]"], true, never>;
+}
+
+/**
+ * PECB UI Components Module
+ *
+ * A professional Angular components library with TypeScript and SCSS.
+ * Import this module to use all PECB UI components in your application.
+ *
+ * @example
+ * ```typescript
+ * import { PecbComponentsModule } from '@pecb-ui/components';
+ *
+ * @NgModule({
+ *   imports: [PecbComponentsModule]
+ * })
+ * export class AppModule { }
+ * ```
+ */
+declare class PecbComponentsModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PecbComponentsModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<PecbComponentsModule, never, [typeof i1.CommonModule, typeof ButtonComponent, typeof CardComponent, typeof CardHeaderComponent, typeof CardBodyComponent, typeof CardFooterComponent, typeof StatusComponent, typeof PaginationComponent, typeof TableComponent, typeof TabComponent, typeof DatepickerComponent, typeof InputComponent, typeof RadioComponent, typeof CheckboxComponent, typeof ToggleComponent, typeof DropdownComponent, typeof RightModalComponent, typeof RightModalHeaderDirective, typeof RightModalContentDirective, typeof RightModalFooterDirective, typeof SidebarComponent, typeof ConfirmationComponent, typeof BottomSheetComponent, typeof AccordionItemComponent, typeof AccordionSmallComponent, typeof ButtonGroupComponent, typeof ButtonGroupItemComponent, typeof TooltipComponent, typeof TooltipDirective, typeof MessageItemComponent, typeof MessageBubbleComponent, typeof FullscreenModalComponent, typeof FullscreenModalContentDirective, typeof FullscreenModalFooterDirective, typeof StepperComponent, typeof GridComponent, typeof GridItemComponent, typeof SpacerComponent, typeof DashboardGridComponent, typeof SpinnerComponent, typeof ProgressBarComponent, typeof ProgressCircleComponent, typeof CodeInputComponent, typeof ShadowDirective, typeof BlurDirective, typeof DividerComponent, typeof CodeSnippetComponent, typeof BreadcrumbsComponent, typeof GeneralComponent], [typeof ButtonComponent, typeof CardComponent, typeof CardHeaderComponent, typeof CardBodyComponent, typeof CardFooterComponent, typeof StatusComponent, typeof PaginationComponent, typeof TableComponent, typeof TabComponent, typeof DatepickerComponent, typeof InputComponent, typeof RadioComponent, typeof CheckboxComponent, typeof ToggleComponent, typeof DropdownComponent, typeof RightModalComponent, typeof RightModalHeaderDirective, typeof RightModalContentDirective, typeof RightModalFooterDirective, typeof SidebarComponent, typeof ConfirmationComponent, typeof BottomSheetComponent, typeof AccordionItemComponent, typeof AccordionSmallComponent, typeof ButtonGroupComponent, typeof ButtonGroupItemComponent, typeof TooltipComponent, typeof TooltipDirective, typeof MessageItemComponent, typeof MessageBubbleComponent, typeof FullscreenModalComponent, typeof FullscreenModalContentDirective, typeof FullscreenModalFooterDirective, typeof StepperComponent, typeof GridComponent, typeof GridItemComponent, typeof SpacerComponent, typeof DashboardGridComponent, typeof SpinnerComponent, typeof ProgressBarComponent, typeof ProgressCircleComponent, typeof CodeInputComponent, typeof ShadowDirective, typeof BlurDirective, typeof DividerComponent, typeof CodeSnippetComponent, typeof BreadcrumbsComponent, typeof GeneralComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<PecbComponentsModule>;
+}
+
+type AlertType = 'info' | 'success' | 'warning' | 'error';
+type AlertVariant = 'banner' | 'filled';
+declare class AlertComponent {
+    type: _angular_core.InputSignal<AlertType>;
+    variant: _angular_core.InputSignal<AlertVariant>;
+    title: _angular_core.InputSignal<string>;
+    message: _angular_core.InputSignal<string>;
+    dismissible: _angular_core.InputSignal<boolean>;
+    primaryAction: _angular_core.InputSignal<string | undefined>;
+    secondaryAction: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the alert is visible. Manages its own state internally —
+     * no consumer binding required. Supports [(visible)] for controlled mode.
+     */
+    visible: _angular_core.ModelSignal<boolean>;
+    dismissed: _angular_core.OutputEmitterRef<void>;
+    primaryActionClick: _angular_core.OutputEmitterRef<void>;
+    secondaryActionClick: _angular_core.OutputEmitterRef<void>;
+    dismiss(): void;
+    get hasActions(): boolean;
+    get hostClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "pecb-alert", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; "isSignal": true; }; "secondaryAction": { "alias": "secondaryAction"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "dismissed": "dismissed"; "primaryActionClick": "primaryActionClick"; "secondaryActionClick": "secondaryActionClick"; }, never, never, true, never>;
+}
+
+type MetricsCardVariation = '1' | '2' | '3' | '4' | '5' | '6';
+type MetricsCardType = 'data+cta' | 'data-only';
+type MetricsCardOrientation = 'left-aligned' | 'center';
+type MetricsCardBadgeStatus = 'success' | 'warning' | 'error' | 'info';
+type MetricsCardIconBg = 'white' | 'pending' | 'success' | 'error' | 'info' | 'purple';
+declare class MetricsCardComponent {
+    private sanitizer;
+    /** Layout variation (1–6) matching the Figma design */
+    variation: _angular_core.InputSignal<MetricsCardVariation>;
+    /** Whether to render a CTA button/link */
+    type: _angular_core.InputSignal<MetricsCardType>;
+    /**
+     * Content alignment — only variation 6 supports 'center'.
+     * All others default to 'left-aligned'.
+     */
+    orientation: _angular_core.InputSignal<MetricsCardOrientation>;
+    /** Metric label/title text */
+    label: _angular_core.InputSignal<string>;
+    /** Main metric value displayed prominently */
+    value: _angular_core.InputSignal<string>;
+    /** Show or hide the badge */
+    hasBadge: _angular_core.InputSignal<boolean>;
+    /** Badge text (e.g. "10%", "Label", "Paid") */
+    badgeText: _angular_core.InputSignal<string>;
+    /** Badge color theme */
+    badgeStatus: _angular_core.InputSignal<MetricsCardBadgeStatus>;
+    /** Show or hide the description text next to the badge */
+    hasDescription: _angular_core.InputSignal<boolean>;
+    /** Description text shown next to the percentage badge */
+    description: _angular_core.InputSignal<string>;
+    /** CTA button label (used for both inline links and footer buttons) */
+    ctaText: _angular_core.InputSignal<string>;
+    /** Show or hide the icon (variations 2, 3, 4, 6) */
+    hasIcon: _angular_core.InputSignal<boolean>;
+    /** Custom SVG string for the icon — falls back to a refresh icon when empty */
+    iconSvg: _angular_core.InputSignal<string>;
+    /** Icon container background color (mainly variation 4) */
+    iconBg: _angular_core.InputSignal<MetricsCardIconBg>;
+    /** Date string shown on the right side of variation 1 */
+    date: _angular_core.InputSignal<string>;
+    /** Secondary metric text shown below the value in variation 5 */
+    subtext: _angular_core.InputSignal<string>;
+    /** Emitted when any CTA button or link is clicked */
+    ctaClicked: _angular_core.OutputEmitterRef<void>;
+    safeIconSvg: _angular_core.Signal<_angular_platform_browser.SafeHtml | null>;
+    get hostClasses(): string;
+    /** Footer CTA renders for variations 2, 3, 4 (left-aligned) and 6 (center) */
+    get showFooterCta(): boolean;
+    /** Inline CTA link renders for variations 1 and 5 */
+    get showInlineCta(): boolean;
+    /** Footer CTA arrow renders only for left-aligned variations (2, 3, 4) */
+    get showFooterArrow(): boolean;
+    /** Icon wrapper size class driven by variation */
+    get iconSizeClass(): string;
+    /** Icon background class driven by iconBg input */
+    get iconBgClass(): string;
+    onCtaClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricsCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricsCardComponent, "pecb-metrics-card", never, { "variation": { "alias": "variation"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "hasBadge": { "alias": "hasBadge"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "badgeStatus": { "alias": "badgeStatus"; "required": false; "isSignal": true; }; "hasDescription": { "alias": "hasDescription"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "ctaText": { "alias": "ctaText"; "required": false; "isSignal": true; }; "hasIcon": { "alias": "hasIcon"; "required": false; "isSignal": true; }; "iconSvg": { "alias": "iconSvg"; "required": false; "isSignal": true; }; "iconBg": { "alias": "iconBg"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "subtext": { "alias": "subtext"; "required": false; "isSignal": true; }; }, { "ctaClicked": "ctaClicked"; }, never, never, true, never>;
+}
+
+interface FloatButtonAction {
+    /** Unique identifier used for tracking and emitting click events */
+    id: string;
+    /** Label text displayed in the action button */
+    label: string;
+    /** Optional SVG string for the leading icon */
+    iconSvg?: string;
+    /**
+     * Whether to render the icon even when `iconSvg` is provided.
+     * Set to false to hide the icon for a specific item without removing the SVG string.
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Whether this item is rendered in the list.
+     * Use this to dynamically show/hide individual actions without changing the array.
+     * @default true
+     */
+    visible?: boolean;
+    /** Whether this action is disabled */
+    disabled?: boolean;
+    /**
+     * Per-item click handler. Called in addition to the global `actionClick` output.
+     * Use this when each action needs its own dedicated function.
+     * @example { id: 'audio', label: 'Audio', onClick: () => this.startRecording() }
+     */
+    onClick?: () => void;
+}
+type FloatButtonPosition = 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center';
+/**
+ * Individual action pill item rendered inside the float button list.
+ *
+ * @example
+ * <pecb-float-button-item label="Audio" [iconSvg]="micSvg" (itemClick)="onAudio()">
+ * </pecb-float-button-item>
+ */
+declare class FloatButtonItemComponent {
+    private sanitizer;
+    label: _angular_core.InputSignal<string>;
+    iconSvg: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    itemClick: _angular_core.OutputEmitterRef<void>;
+    safeIcon: _angular_core.Signal<SafeHtml>;
+    hostClasses: _angular_core.Signal<string>;
+    onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FloatButtonItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FloatButtonItemComponent, "pecb-float-button-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "iconSvg": { "alias": "iconSvg"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+/**
+ * Floating action button with an expandable list of 1–5 action items.
+ *
+ * Manages open/closed state internally — no consumer binding required.
+ * Supports `[(isOpen)]` for controlled mode.
+ *
+ * @example
+ * <!-- Uncontrolled -->
+ * <pecb-float-button [actions]="myActions" (actionClick)="onAction($event)">
+ * </pecb-float-button>
+ *
+ * @example
+ * <!-- Controlled -->
+ * <pecb-float-button [actions]="myActions" [(isOpen)]="menuOpen" (actionClick)="onAction($event)">
+ * </pecb-float-button>
+ */
+declare class FloatButtonComponent {
+    /**
+     * List of action items to display (1–5 items as per design spec).
+     * Items render in order, closest to the trigger first.
+     */
+    actions: _angular_core.InputSignal<FloatButtonAction[]>;
+    /**
+     * Whether the action list is open. Manages its own state internally —
+     * no consumer binding required. Supports [(isOpen)] for controlled mode.
+     */
+    isOpen: _angular_core.ModelSignal<boolean>;
+    /**
+     * Corner position when `fixed` is true.
+     * @default 'bottom-right'
+     */
+    position: _angular_core.InputSignal<FloatButtonPosition>;
+    /**
+     * When true, the component is positioned fixed to the viewport corner
+     * defined by `position`. When false, it is relative/inline.
+     * @default false
+     */
+    fixed: _angular_core.InputSignal<boolean>;
+    /** Accessible label for the trigger button */
+    triggerAriaLabel: _angular_core.InputSignal<string>;
+    /** Emits the action that was clicked */
+    actionClick: _angular_core.OutputEmitterRef<FloatButtonAction>;
+    /** Emits when the list opens */
+    opened: _angular_core.OutputEmitterRef<void>;
+    /** Emits when the list closes */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /** Filters hidden items then enforces the 1–5 item constraint */
+    visibleActions: _angular_core.Signal<FloatButtonAction[]>;
+    hostClasses: _angular_core.Signal<string>;
+    toggle(): void;
+    onActionClick(action: FloatButtonAction): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FloatButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FloatButtonComponent, "pecb-float-button", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "fixed": { "alias": "fixed"; "required": false; "isSignal": true; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "actionClick": "actionClick"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * The visual type of skeleton item to render.
+ *
+ * - `heading`   — Single short line mimicking a section title
+ * - `paragraph` — Multiple stacked lines mimicking body text
+ * - `input`     — Input field placeholder
+ * - `button`    — Button placeholder (combine with `shape` for circle/round)
+ * - `image`     — Square image/thumbnail placeholder with a photo icon
+ * - `avatar`    — User avatar placeholder (combine with `shape` for circle/square)
+ */
+type SkeletonType = 'heading' | 'paragraph' | 'input' | 'button' | 'image' | 'avatar';
+/** Size scale shared across input, button, and avatar types */
+type SkeletonSize = 'sm' | 'md' | 'lg';
+/**
+ * Shape variant.
+ * - Button types: `default` | `circle` | `round`
+ * - Avatar types: `circle` | `square`
+ */
+type SkeletonShape = 'default' | 'circle' | 'round' | 'square';
+/**
+ * `SkeletonComponent` renders a single animated placeholder that mirrors the
+ * shape of real content while data is loading.
+ *
+ * Compose multiple instances to build full-page skeleton layouts.
+ *
+ * @example
+ * <!-- Heading + paragraph block -->
+ * <pecb-skeleton type="heading" />
+ * <pecb-skeleton type="paragraph" [lines]="3" />
+ *
+ * @example
+ * <!-- Row with avatar and text -->
+ * <pecb-skeleton type="avatar" shape="circle" size="md" />
+ * <pecb-skeleton type="paragraph" [lines]="2" />
+ *
+ * @example
+ * <!-- Form fields -->
+ * <pecb-skeleton type="input" size="lg" />
+ * <pecb-skeleton type="button" size="md" />
+ * <pecb-skeleton type="button" shape="round" size="sm" />
+ */
+declare class SkeletonComponent {
+    /** Type of skeleton item to render */
+    type: _angular_core.InputSignal<SkeletonType>;
+    /**
+     * Size variant — applies to `input`, `button`, and `avatar` types.
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<SkeletonSize>;
+    /**
+     * Shape variant.
+     * - For `button`: `default` (rect) | `circle` | `round` (pill)
+     * - For `avatar`: `circle` | `square`
+     * @default 'default'
+     */
+    shape: _angular_core.InputSignal<SkeletonShape>;
+    /**
+     * Number of lines rendered for `paragraph` type.
+     * The last line is automatically shortened to ~60% width.
+     * @default 3
+     */
+    lines: _angular_core.InputSignal<number>;
+    /**
+     * Override the width with any valid CSS value (e.g. `'70%'`, `'200px'`).
+     * Applies to `heading`, `paragraph` lines, and `input` types.
+     */
+    width: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether to show the shimmer sweep animation.
+     * Set to `false` for a static placeholder.
+     * @default true
+     */
+    animated: _angular_core.InputSignal<boolean>;
+    /** @internal Line widths for paragraph type */
+    readonly paragraphLines: _angular_core.Signal<string[]>;
+    /** @internal Host CSS classes */
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonComponent, "pecb-skeleton", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "animated": { "alias": "animated"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface ColorPaletteItem {
+    /** Hex color value, e.g. "#A11E29" */
+    hex: string;
+    /** Optional accessible name for the swatch */
+    name?: string;
+}
+interface ColorPaletteGroup {
+    /** Section heading displayed above the swatches */
+    title: string;
+    /** List of colors in this group */
+    colors: ColorPaletteItem[];
+}
+declare const PECB_COLOR_PALETTE: ColorPaletteGroup[];
+/**
+ * Displays a color palette as a grid of labelled swatches grouped by category.
+ *
+ * Uses the full PECB design-system palette by default. Pass custom `groups` to
+ * render any set of colors.
+ *
+ * @example
+ * <!-- Default PECB palette -->
+ * <pecb-color-palette></pecb-color-palette>
+ *
+ * @example
+ * <!-- Custom groups -->
+ * <pecb-color-palette [groups]="myGroups"></pecb-color-palette>
+ */
+declare class ColorPaletteComponent {
+    /**
+     * Color groups to display. Each group has a title and a list of hex colors.
+     * Defaults to the full PECB design-system palette.
+     */
+    groups: _angular_core.InputSignal<ColorPaletteGroup[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPaletteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPaletteComponent, "pecb-color-palette", never, { "groups": { "alias": "groups"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type ProfileSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ProfileIndicator = 'none' | 'online' | 'offline';
+type ProfileBadge = 'none' | 'verified' | 'camera';
+declare class ProfileComponent {
+    src: _angular_core.InputSignal<string | undefined>;
+    initials: _angular_core.InputSignal<string | undefined>;
+    alt: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<ProfileSize>;
+    indicator: _angular_core.InputSignal<ProfileIndicator>;
+    badge: _angular_core.InputSignal<ProfileBadge>;
+    cameraClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    hostClass: _angular_core.Signal<string>;
+    showImage: _angular_core.Signal<boolean>;
+    showInitials: _angular_core.Signal<boolean>;
+    showIcon: _angular_core.Signal<boolean>;
+    imgSize: _angular_core.Signal<number>;
+    onCameraClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProfileComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProfileComponent, "pecb-profile", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "indicator": { "alias": "indicator"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, { "cameraClick": "cameraClick"; }, never, never, true, never>;
+}
+
+type ProfileGroupSize = 'sm' | 'md' | 'lg';
+interface ProfileGroupItem {
+    src?: string;
+    initials?: string;
+    alt?: string;
+}
+declare class ProfileGroupComponent {
+    avatars: _angular_core.InputSignal<ProfileGroupItem[]>;
+    size: _angular_core.InputSignal<ProfileGroupSize>;
+    max: _angular_core.InputSignal<number>;
+    hostClass: _angular_core.Signal<string>;
+    visible: _angular_core.Signal<ProfileGroupItem[]>;
+    overflow: _angular_core.Signal<number>;
+    overflowLabel: _angular_core.Signal<string>;
+    imgSize: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProfileGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProfileGroupComponent, "pecb-profile-group", never, { "avatars": { "alias": "avatars"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * One entry in the modular type scale table (Typefaces panel).
+ */
+interface TypographyScaleEntry {
+    /** Font size in pixels */
+    px: number;
+    /** Equivalent rem value displayed as a label, e.g. "3.812" */
+    rem: string;
+    /** Custom sample sentence. Defaults to the component's `scaleSampleText`. */
+    sample?: string;
+}
+/**
+ * One named text style in the font catalogue (Fonts panel).
+ */
+interface TypographyStyleEntry {
+    /** Display name, e.g. "Hero 1 bold", "Body 14", "Caption" */
+    name: string;
+    /** CSS font-size value, e.g. "64px" */
+    fontSize: string;
+    /** Numeric font-weight */
+    fontWeight: 400 | 500 | 700;
+    /** CSS line-height value, e.g. "1.2", "normal", "18px" */
+    lineHeight: string;
+    /** Optional CSS text-transform — use "uppercase" for caption styles */
+    textTransform?: 'uppercase';
+}
+/** Modular type scale used by the PECB design system (base 16 px, ratio 1.25). */
+declare const PECB_TYPE_SCALE: TypographyScaleEntry[];
+/** All named text styles defined in the PECB design system. */
+declare const PECB_FONT_STYLES: TypographyStyleEntry[];
+/**
+ * Displays the typography system as two visual sections:
+ *
+ * 1. **Type Scale** — A table showing "The quick brown fox…" rendered at every
+ *    step of the modular scale, with px and rem labels.
+ *
+ * 2. **Font Styles** — A catalogue of every named text style, each rendered in
+ *    its own visual treatment.
+ *
+ * Uses the full PECB design system by default; pass custom data via inputs to
+ * document any other type system.
+ *
+ * @example
+ * <!-- Default PECB typography -->
+ * <pecb-typography></pecb-typography>
+ *
+ * @example
+ * <!-- Scale only -->
+ * <pecb-typography [showStyles]="false"></pecb-typography>
+ *
+ * @example
+ * <!-- Custom data -->
+ * <pecb-typography [scaleEntries]="myScale" [styleEntries]="myStyles"></pecb-typography>
+ */
+declare class TypographyComponent {
+    /** Name of the typeface shown in the Fonts panel header. */
+    fontName: _angular_core.InputSignal<string>;
+    /**
+     * Type scale entries rendered in the Typefaces panel.
+     * Defaults to the PECB modular scale.
+     */
+    scaleEntries: _angular_core.InputSignal<TypographyScaleEntry[]>;
+    /**
+     * Named text styles rendered in the Fonts panel.
+     * Defaults to the full PECB font catalogue.
+     */
+    styleEntries: _angular_core.InputSignal<TypographyStyleEntry[]>;
+    /** Whether to render the Type Scale (Typefaces) panel. @default true */
+    showScale: _angular_core.InputSignal<boolean>;
+    /** Whether to render the Font Styles (Fonts) panel. @default true */
+    showStyles: _angular_core.InputSignal<boolean>;
+    /** Base value label shown in the type scale header. @default 16 */
+    scaleBaseValue: _angular_core.InputSignal<number>;
+    /** Ratio label shown in the type scale header. @default 1.25 */
+    scaleFactor: _angular_core.InputSignal<number>;
+    /** Sample sentence used in every scale row (overrideable per-entry via `sample`). */
+    scaleSampleText: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TypographyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TypographyComponent, "pecb-typography", never, { "fontName": { "alias": "fontName"; "required": false; "isSignal": true; }; "scaleEntries": { "alias": "scaleEntries"; "required": false; "isSignal": true; }; "styleEntries": { "alias": "styleEntries"; "required": false; "isSignal": true; }; "showScale": { "alias": "showScale"; "required": false; "isSignal": true; }; "showStyles": { "alias": "showStyles"; "required": false; "isSignal": true; }; "scaleBaseValue": { "alias": "scaleBaseValue"; "required": false; "isSignal": true; }; "scaleFactor": { "alias": "scaleFactor"; "required": false; "isSignal": true; }; "scaleSampleText": { "alias": "scaleSampleText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Notification types supported by the service
+ */
+type NotificationType = 'success' | 'error' | 'warning' | 'info';
+/**
+ * Notification position on screen
+ */
+type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+/**
+ * Notification configuration options
+ */
+interface NotificationConfig {
+    /** Notification message */
+    message: string;
+    /** Notification title (optional) */
+    title?: string;
+    /** Type of notification */
+    type: NotificationType;
+    /** Duration in milliseconds (0 for persistent) */
+    duration?: number;
+    /** Whether the notification can be dismissed */
+    dismissible?: boolean;
+    /** Position on screen */
+    position?: NotificationPosition;
+    /** Custom CSS class */
+    customClass?: string;
+    /** Unique identifier */
+    id?: string;
+}
+/**
+ * Notification object with all properties
+ */
+interface Notification extends Required<Omit<NotificationConfig, 'title' | 'customClass'>> {
+    title?: string;
+    customClass?: string;
+    timestamp: Date;
+}
+/**
+ * A stateless, injectable notification service for displaying toast notifications.
+ *
+ * This service provides a reactive way to manage notifications across the application.
+ * It uses RxJS Subjects to emit notification events that can be consumed by notification
+ * display components.
+ *
+ * @example
+ * ```typescript
+ * import { NotificationService } from '@pecb-ui/components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   constructor(private notificationService: NotificationService) {}
+ *
+ *   showSuccess(): void {
+ *     this.notificationService.success('Operation completed successfully!');
+ *   }
+ *
+ *   showError(): void {
+ *     this.notificationService.error('An error occurred', 'Error Title');
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+declare class NotificationService {
+    private readonly notificationSubject;
+    private readonly dismissSubject;
+    private readonly clearSubject;
+    /** Default duration for notifications in milliseconds */
+    private readonly defaultDuration;
+    /** Default position for notifications */
+    private readonly defaultPosition;
+    /**
+     * Observable stream of notifications
+     */
+    get notifications$(): Observable<Notification>;
+    /**
+     * Observable stream of dismissed notification IDs
+     */
+    get dismiss$(): Observable<string>;
+    /**
+     * Observable stream for clear all events
+     */
+    get clear$(): Observable<void>;
+    /**
+     * Show a success notification
+     * @param message - The notification message
+     * @param title - Optional title
+     * @param config - Optional additional configuration
+     */
+    success(message: string, title?: string, config?: Partial<NotificationConfig>): string;
+    /**
+     * Show an error notification
+     * @param message - The notification message
+     * @param title - Optional title
+     * @param config - Optional additional configuration
+     */
+    error(message: string, title?: string, config?: Partial<NotificationConfig>): string;
+    /**
+     * Show a warning notification
+     * @param message - The notification message
+     * @param title - Optional title
+     * @param config - Optional additional configuration
+     */
+    warning(message: string, title?: string, config?: Partial<NotificationConfig>): string;
+    /**
+     * Show an info notification
+     * @param message - The notification message
+     * @param title - Optional title
+     * @param config - Optional additional configuration
+     */
+    info(message: string, title?: string, config?: Partial<NotificationConfig>): string;
+    /**
+     * Show a notification with custom configuration
+     * @param config - Full notification configuration
+     * @returns The notification ID
+     */
+    show(config: NotificationConfig): string;
+    /**
+     * Dismiss a specific notification by ID
+     * @param id - The notification ID to dismiss
+     */
+    dismiss(id: string): void;
+    /**
+     * Clear all notifications
+     */
+    clearAll(): void;
+    /**
+     * Generate a unique notification ID
+     */
+    private generateId;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NotificationService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NotificationService>;
+}
+
+/**
+ * Available theme modes
+ */
+type ThemeMode = 'light' | 'dark' | 'system';
+/**
+ * Theme configuration interface
+ */
+interface ThemeConfig {
+    /** Current theme mode */
+    mode: ThemeMode;
+    /** Resolved theme (light or dark, never system) */
+    resolvedTheme: 'light' | 'dark';
+    /** CSS class to apply to the document */
+    cssClass: string;
+}
+/**
+ * Custom theme variables that can be overridden
+ */
+interface ThemeVariables {
+    /** Primary color */
+    primaryColor?: string;
+    /** Secondary color */
+    secondaryColor?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Text color */
+    textColor?: string;
+    /** Border radius */
+    borderRadius?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Custom CSS variables */
+    [key: string]: string | undefined;
+}
+/**
+ * A stateless, injectable theme service for managing application themes.
+ *
+ * This service provides reactive theme management with support for light/dark modes,
+ * system preference detection, and custom CSS variable overrides.
+ *
+ * @example
+ * ```typescript
+ * import { ThemeService } from '@pecb-ui/components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   constructor(private themeService: ThemeService) {}
+ *
+ *   toggleTheme(): void {
+ *     this.themeService.toggleTheme();
+ *   }
+ *
+ *   setDarkMode(): void {
+ *     this.themeService.setTheme('dark');
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+declare class ThemeService {
+    private readonly themeSubject;
+    private readonly isBrowser;
+    private mediaQuery;
+    constructor(platformId: object);
+    /**
+     * Observable stream of theme configuration changes
+     */
+    get theme$(): Observable<ThemeConfig>;
+    /**
+     * Get the current theme configuration
+     */
+    get currentTheme(): ThemeConfig;
+    /**
+     * Get the current theme mode
+     */
+    get currentMode(): ThemeMode;
+    /**
+     * Check if the current resolved theme is dark
+     */
+    get isDarkMode(): boolean;
+    /**
+     * Set the theme mode
+     * @param mode - The theme mode to set (light, dark, or system)
+     */
+    setTheme(mode: ThemeMode): void;
+    /**
+     * Toggle between light and dark themes
+     * If currently using system preference, switches to the opposite of the resolved theme
+     */
+    toggleTheme(): void;
+    /**
+     * Reset to system preference
+     */
+    useSystemTheme(): void;
+    /**
+     * Apply custom CSS variables to the document
+     * @param variables - Object containing CSS variable overrides
+     */
+    setCustomVariables(variables: ThemeVariables): void;
+    /**
+     * Remove custom CSS variables from the document
+     * @param variableNames - Array of variable names to remove
+     */
+    removeCustomVariables(variableNames: string[]): void;
+    /**
+     * Get the initial theme from storage or system preference
+     */
+    private getInitialTheme;
+    /**
+     * Create a theme configuration object
+     */
+    private createThemeConfig;
+    /**
+     * Resolve the actual theme from mode (handles 'system' mode)
+     */
+    private resolveTheme;
+    /**
+     * Get the system color scheme preference
+     */
+    private getSystemPreference;
+    /**
+     * Setup listener for system theme changes
+     */
+    private setupSystemThemeListener;
+    /**
+     * Apply the theme to the document
+     */
+    private applyTheme;
+    /**
+     * Persist theme preference to storage
+     */
+    private persistTheme;
+    /**
+     * Convert camelCase property name to CSS variable name
+     */
+    private toCssVariableName;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+/**
+ * Loading state for a specific operation
+ */
+interface LoadingState {
+    /** Unique identifier for the loading operation */
+    id: string;
+    /** Whether this operation is currently loading */
+    isLoading: boolean;
+    /** Optional message to display */
+    message?: string;
+    /** Optional progress percentage (0-100) */
+    progress?: number;
+}
+/**
+ * A stateless, injectable loading service for managing loading states.
+ *
+ * This service provides a centralized way to track loading states across
+ * the application, supporting multiple concurrent loading operations with
+ * individual tracking capabilities.
+ *
+ * @example
+ * ```typescript
+ * import { LoadingService } from '@pecb-ui/components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   isLoading$ = this.loadingService.isLoading$('my-operation');
+ *
+ *   constructor(private loadingService: LoadingService) {}
+ *
+ *   async loadData(): Promise<void> {
+ *     this.loadingService.start('my-operation', 'Loading data...');
+ *     try {
+ *       await this.fetchData();
+ *     } finally {
+ *       this.loadingService.stop('my-operation');
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+declare class LoadingService {
+    private readonly loadingStates;
+    private readonly statesSubject;
+    /** Default loading operation ID */
+    private readonly defaultId;
+    /**
+     * Observable of all loading states
+     */
+    get states$(): Observable<Map<string, LoadingState>>;
+    /**
+     * Observable that emits true when any loading operation is active
+     */
+    get isAnyLoading$(): Observable<boolean>;
+    /**
+     * Get observable for a specific loading operation
+     * @param id - The loading operation identifier
+     */
+    isLoading$(id?: string): Observable<boolean>;
+    /**
+     * Get observable for loading state with message
+     * @param id - The loading operation identifier
+     */
+    getState$(id?: string): Observable<LoadingState | undefined>;
+    /**
+     * Check if a specific operation is currently loading (synchronous)
+     * @param id - The loading operation identifier
+     */
+    isLoading(id?: string): boolean;
+    /**
+     * Check if any operation is currently loading (synchronous)
+     */
+    isAnyLoading(): boolean;
+    /**
+     * Start a loading operation
+     * @param id - The loading operation identifier
+     * @param message - Optional message to display
+     */
+    start(id?: string, message?: string): void;
+    /**
+     * Stop a loading operation
+     * @param id - The loading operation identifier
+     */
+    stop(id?: string): void;
+    /**
+     * Update progress for a loading operation
+     * @param id - The loading operation identifier
+     * @param progress - Progress percentage (0-100)
+     * @param message - Optional updated message
+     */
+    setProgress(id: string, progress: number, message?: string): void;
+    /**
+     * Update the message for a loading operation
+     * @param id - The loading operation identifier
+     * @param message - New message to display
+     */
+    setMessage(id: string, message: string): void;
+    /**
+     * Stop all loading operations
+     */
+    stopAll(): void;
+    /**
+     * Remove a loading state completely
+     * @param id - The loading operation identifier
+     */
+    remove(id: string): void;
+    /**
+     * Execute an async operation with automatic loading state management
+     * @param id - The loading operation identifier
+     * @param operation - The async operation to execute
+     * @param message - Optional loading message
+     * @returns The result of the operation
+     */
+    withLoading<T>(id: string, operation: () => Promise<T>, message?: string): Promise<T>;
+    /**
+     * Update a loading state
+     */
+    private updateState;
+    /**
+     * Emit current states to subscribers
+     */
+    private emitStates;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<LoadingService>;
+}
+
+/**
+ * String utility functions for PECB UI Components
+ * @module utils/string
+ */
+/**
+ * Convert a string to kebab-case
+ * @param str - The string to convert
+ * @returns The kebab-case string
+ *
+ * @example
+ * toKebabCase('myComponentName') // 'my-component-name'
+ * toKebabCase('MyComponentName') // 'my-component-name'
+ */
+declare function toKebabCase(str: string): string;
+/**
+ * Convert a string to camelCase
+ * @param str - The string to convert
+ * @returns The camelCase string
+ *
+ * @example
+ * toCamelCase('my-component-name') // 'myComponentName'
+ * toCamelCase('my_component_name') // 'myComponentName'
+ */
+declare function toCamelCase(str: string): string;
+/**
+ * Convert a string to PascalCase
+ * @param str - The string to convert
+ * @returns The PascalCase string
+ *
+ * @example
+ * toPascalCase('my-component-name') // 'MyComponentName'
+ */
+declare function toPascalCase(str: string): string;
+/**
+ * Convert a string to snake_case
+ * @param str - The string to convert
+ * @returns The snake_case string
+ *
+ * @example
+ * toSnakeCase('myComponentName') // 'my_component_name'
+ */
+declare function toSnakeCase(str: string): string;
+/**
+ * Capitalize the first letter of a string
+ * @param str - The string to capitalize
+ * @returns The capitalized string
+ *
+ * @example
+ * capitalize('hello world') // 'Hello world'
+ */
+declare function capitalize(str: string): string;
+/**
+ * Truncate a string to a specified length
+ * @param str - The string to truncate
+ * @param maxLength - Maximum length
+ * @param suffix - Suffix to append when truncated (default: '...')
+ * @returns The truncated string
+ *
+ * @example
+ * truncate('Hello World', 8) // 'Hello...'
+ * truncate('Hello World', 8, '…') // 'Hello W…'
+ */
+declare function truncate(str: string, maxLength: number, suffix?: string): string;
+/**
+ * Check if a string is empty or contains only whitespace
+ * @param str - The string to check
+ * @returns True if the string is empty or whitespace
+ *
+ * @example
+ * isBlank('') // true
+ * isBlank('  ') // true
+ * isBlank('hello') // false
+ */
+declare function isBlank(str: string | null | undefined): boolean;
+/**
+ * Check if a string is not empty and contains non-whitespace characters
+ * @param str - The string to check
+ * @returns True if the string is not empty
+ */
+declare function isNotBlank(str: string | null | undefined): str is string;
+/**
+ * Generate a slug from a string (URL-friendly)
+ * @param str - The string to convert
+ * @returns URL-friendly slug
+ *
+ * @example
+ * slugify('Hello World!') // 'hello-world'
+ * slugify('Café Latte') // 'cafe-latte'
+ */
+declare function slugify(str: string): string;
+/**
+ * Escape HTML special characters
+ * @param str - The string to escape
+ * @returns The escaped string
+ *
+ * @example
+ * escapeHtml('<script>alert("XSS")</script>') // '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'
+ */
+declare function escapeHtml(str: string): string;
+/**
+ * Strip HTML tags from a string
+ * @param str - The string containing HTML
+ * @returns The string without HTML tags
+ *
+ * @example
+ * stripHtml('<p>Hello <strong>World</strong></p>') // 'Hello World'
+ */
+declare function stripHtml(str: string): string;
+/**
+ * Generate initials from a name
+ * @param name - The name to extract initials from
+ * @param maxLength - Maximum number of initials (default: 2)
+ * @returns The initials in uppercase
+ *
+ * @example
+ * getInitials('John Doe') // 'JD'
+ * getInitials('John Michael Doe', 3) // 'JMD'
+ */
+declare function getInitials(name: string, maxLength?: number): string;
+/**
+ * Pluralize a word based on count
+ * @param count - The count to check
+ * @param singular - Singular form
+ * @param plural - Plural form (optional, defaults to singular + 's')
+ * @returns The appropriate form of the word
+ *
+ * @example
+ * pluralize(1, 'item') // 'item'
+ * pluralize(5, 'item') // 'items'
+ * pluralize(2, 'child', 'children') // 'children'
+ */
+declare function pluralize(count: number, singular: string, plural?: string): string;
+/**
+ * Format a number as a string with count and pluralized label
+ * @param count - The count
+ * @param singular - Singular form of the label
+ * @param plural - Plural form (optional)
+ * @returns Formatted string like "5 items"
+ *
+ * @example
+ * formatCount(1, 'item') // '1 item'
+ * formatCount(5, 'item') // '5 items'
+ */
+declare function formatCount(count: number, singular: string, plural?: string): string;
+
+/**
+ * DOM utility functions for PECB UI Components
+ * @module utils/dom
+ */
+/**
+ * Check if code is running in a browser environment
+ * @returns True if running in browser
+ */
+declare function isBrowser(): boolean;
+/**
+ * Generate a unique ID for DOM elements
+ * @param prefix - Optional prefix for the ID
+ * @returns A unique ID string
+ *
+ * @example
+ * generateUniqueId('btn') // 'btn-a1b2c3d4'
+ */
+declare function generateUniqueId(prefix?: string): string;
+/**
+ * Check if an element matches a CSS selector
+ * @param element - The element to check
+ * @param selector - The CSS selector
+ * @returns True if the element matches
+ */
+declare function matchesSelector(element: Element, selector: string): boolean;
+/**
+ * Find the closest ancestor matching a selector
+ * @param element - Starting element
+ * @param selector - CSS selector to match
+ * @returns The matching ancestor or null
+ */
+declare function closestElement<T extends Element>(element: Element, selector: string): T | null;
+/**
+ * Check if an element is visible in the viewport
+ * @param element - The element to check
+ * @param partial - Whether partial visibility counts
+ * @returns True if visible
+ */
+declare function isElementVisible(element: Element, partial?: boolean): boolean;
+/**
+ * Get all focusable elements within a container
+ * @param container - The container element
+ * @returns Array of focusable elements
+ */
+declare function getFocusableElements(container: Element): HTMLElement[];
+/**
+ * Trap focus within a container (useful for modals)
+ * @param container - The container to trap focus in
+ * @returns Cleanup function to remove the trap
+ */
+declare function trapFocus(container: HTMLElement): () => void;
+/**
+ * Scroll an element into view smoothly
+ * @param element - The element to scroll to
+ * @param options - Scroll options
+ */
+declare function scrollIntoView(element: Element, options?: ScrollIntoViewOptions): void;
+/**
+ * Get the scroll parent of an element
+ * @param element - The element to find scroll parent for
+ * @returns The scroll parent element
+ */
+declare function getScrollParent(element: Element): Element | null;
+/**
+ * Disable body scroll (useful for modals)
+ * @returns Cleanup function to re-enable scroll
+ */
+declare function disableBodyScroll(): () => void;
+/**
+ * Copy text to clipboard
+ * @param text - The text to copy
+ * @returns Promise that resolves when copied
+ */
+declare function copyToClipboard(text: string): Promise<void>;
+/**
+ * Check if an element has a specific CSS class
+ * @param element - The element to check
+ * @param className - The class name
+ * @returns True if the element has the class
+ */
+declare function hasClass(element: Element, className: string): boolean;
+/**
+ * Add CSS class(es) to an element
+ * @param element - The element to modify
+ * @param classNames - Class name(s) to add
+ */
+declare function addClass(element: Element, ...classNames: string[]): void;
+/**
+ * Remove CSS class(es) from an element
+ * @param element - The element to modify
+ * @param classNames - Class name(s) to remove
+ */
+declare function removeClass(element: Element, ...classNames: string[]): void;
+/**
+ * Toggle a CSS class on an element
+ * @param element - The element to modify
+ * @param className - The class name to toggle
+ * @param force - Optional force add (true) or remove (false)
+ * @returns True if the class is now present
+ */
+declare function toggleClass(element: Element, className: string, force?: boolean): boolean;
+/**
+ * Get computed CSS property value
+ * @param element - The element to check
+ * @param property - CSS property name
+ * @returns The computed value
+ */
+declare function getComputedStyleValue(element: Element, property: string): string;
+
+/**
+ * Accessibility utility functions for PECB UI Components
+ * Helps ensure WCAG 2.1 compliance
+ * @module utils/accessibility
+ */
+/**
+ * ARIA live region politeness levels
+ */
+type AriaLive = 'off' | 'polite' | 'assertive';
+/**
+ * ARIA roles commonly used in components
+ */
+type AriaRole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'combobox' | 'dialog' | 'grid' | 'gridcell' | 'link' | 'listbox' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'radiogroup' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tablist' | 'tabpanel' | 'textbox' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';
+/**
+ * Standard ARIA attributes interface for components
+ */
+interface AriaAttributes {
+    role?: AriaRole;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-expanded'?: boolean;
+    'aria-selected'?: boolean;
+    'aria-checked'?: boolean | 'mixed';
+    'aria-disabled'?: boolean;
+    'aria-hidden'?: boolean;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-readonly'?: boolean;
+    'aria-pressed'?: boolean | 'mixed';
+    'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+    'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    'aria-controls'?: string;
+    'aria-owns'?: string;
+    'aria-live'?: AriaLive;
+    'aria-atomic'?: boolean;
+    'aria-busy'?: boolean;
+    'aria-valuemin'?: number;
+    'aria-valuemax'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-activedescendant'?: string;
+    'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
+    'aria-multiselectable'?: boolean;
+    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+    'aria-level'?: number;
+    'aria-setsize'?: number;
+    'aria-posinset'?: number;
+    tabindex?: number;
+}
+/**
+ * Generate ARIA attributes for a button component
+ * @param options - Button accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getButtonAriaAttributes(options: {
+    label?: string;
+    pressed?: boolean;
+    expanded?: boolean;
+    disabled?: boolean;
+    controls?: string;
+    haspopup?: AriaAttributes['aria-haspopup'];
+    describedby?: string;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for a dialog/modal component
+ * @param options - Dialog accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getDialogAriaAttributes(options: {
+    labelledby?: string;
+    describedby?: string;
+    modal?: boolean;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for a form input
+ * @param options - Input accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getInputAriaAttributes(options: {
+    label?: string;
+    labelledby?: string;
+    describedby?: string;
+    invalid?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    errorId?: string;
+    helperId?: string;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for a progress bar
+ * @param options - Progress accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getProgressAriaAttributes(options: {
+    value: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    valueText?: string;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for a tab component
+ * @param options - Tab accessibility options
+ * @returns ARIA attributes for tab and tabpanel
+ */
+declare function getTabAriaAttributes(options: {
+    tabId: string;
+    panelId: string;
+    selected: boolean;
+    disabled?: boolean;
+}): {
+    tab: AriaAttributes;
+    panel: AriaAttributes;
+};
+/**
+ * Generate ARIA attributes for a listbox option
+ * @param options - Option accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getOptionAriaAttributes(options: {
+    selected: boolean;
+    disabled?: boolean;
+    setsize?: number;
+    posinset?: number;
+}): AriaAttributes;
+/**
+ * Generate linked IDs for label and input association
+ * @param baseName - Base name for generating IDs
+ * @returns Object with inputId, labelId, errorId, and helperId
+ */
+declare function generateLinkedIds(baseName?: string): {
+    inputId: string;
+    labelId: string;
+    errorId: string;
+    helperId: string;
+};
+/**
+ * Create a visually hidden element for screen readers
+ * @returns CSS styles for visually hidden content
+ */
+declare function getVisuallyHiddenStyles(): Record<string, string>;
+/**
+ * Check if the user has enabled reduced motion preference
+ * @returns True if user prefers reduced motion
+ */
+declare function prefersReducedMotion(): boolean;
+/**
+ * Check if the user has enabled high contrast mode
+ * @returns True if high contrast mode is enabled
+ */
+declare function prefersHighContrast(): boolean;
+/**
+ * Announce a message to screen readers using aria-live regions
+ * @param message - The message to announce
+ * @param politeness - The urgency level (polite or assertive)
+ */
+declare function announceToScreenReader(message: string, politeness?: 'polite' | 'assertive'): void;
+/**
+ * Get the appropriate aria-current value for navigation items
+ * @param isActive - Whether the item is active/current
+ * @param type - The type of current indicator
+ * @returns The aria-current value or undefined
+ */
+declare function getAriaCurrent(isActive: boolean, type?: 'page' | 'step' | 'location' | 'date' | 'time'): AriaAttributes['aria-current'];
+
+/**
+ * Error handling utility functions for PECB UI Components
+ * Provides standardized error handling patterns
+ * @module utils/error
+ */
+/**
+ * Error severity levels
+ */
+type ErrorSeverity = 'info' | 'warning' | 'error' | 'critical';
+/**
+ * Error categories for classification
+ */
+type ErrorCategory = 'validation' | 'network' | 'authentication' | 'authorization' | 'configuration' | 'runtime' | 'unknown';
+/**
+ * Standard error interface for PECB components
+ */
+interface PecbError {
+    /** Unique error code */
+    code: string;
+    /** Human-readable error message */
+    message: string;
+    /** Error severity level */
+    severity: ErrorSeverity;
+    /** Error category */
+    category: ErrorCategory;
+    /** Original error if wrapping another error */
+    originalError?: Error;
+    /** Additional context data */
+    context?: Record<string, unknown>;
+    /** Timestamp when error occurred */
+    timestamp: Date;
+    /** Suggested recovery action */
+    recoveryAction?: string;
+    /** Whether the error is recoverable */
+    recoverable: boolean;
+}
+/**
+ * Validation error details
+ */
+interface ValidationError {
+    /** Field name that failed validation */
+    field: string;
+    /** Validation rule that failed */
+    rule: string;
+    /** Error message */
+    message: string;
+    /** Expected value or format */
+    expected?: string;
+    /** Actual value received */
+    actual?: unknown;
+}
+/**
+ * Error factory options
+ */
+interface ErrorOptions {
+    code?: string;
+    severity?: ErrorSeverity;
+    category?: ErrorCategory;
+    context?: Record<string, unknown>;
+    recoveryAction?: string;
+    recoverable?: boolean;
+    originalError?: Error;
+}
+/**
+ * Create a standardized PECB error
+ * @param message - Error message
+ * @param options - Additional error options
+ * @returns A standardized PecbError object
+ *
+ * @example
+ * const error = createError('Invalid input', {
+ *   code: 'VALIDATION_001',
+ *   category: 'validation',
+ *   severity: 'warning',
+ *   recoverable: true
+ * });
+ */
+declare function createError(message: string, options?: ErrorOptions): PecbError;
+/**
+ * Create a validation error
+ * @param field - Field name that failed validation
+ * @param rule - Validation rule that failed
+ * @param message - Error message
+ * @returns A ValidationError object
+ *
+ * @example
+ * const error = createValidationError('email', 'format', 'Invalid email format');
+ */
+declare function createValidationError(field: string, rule: string, message: string, details?: {
+    expected?: string;
+    actual?: unknown;
+}): ValidationError;
+/**
+ * Wrap an unknown error in a PecbError
+ * @param error - The error to wrap
+ * @param options - Additional options
+ * @returns A standardized PecbError
+ *
+ * @example
+ * try {
+ *   await riskyOperation();
+ * } catch (e) {
+ *   const error = wrapError(e, { category: 'network' });
+ *   handleError(error);
+ * }
+ */
+declare function wrapError(error: unknown, options?: ErrorOptions): PecbError;
+/**
+ * Type guard to check if an object is a PecbError
+ * @param error - The object to check
+ * @returns True if the object is a PecbError
+ */
+declare function isPecbError(error: unknown): error is PecbError;
+/**
+ * Type guard to check if an error is recoverable
+ * @param error - The error to check
+ * @returns True if the error is recoverable
+ */
+declare function isRecoverableError(error: PecbError): boolean;
+/**
+ * Format an error for display to users
+ * @param error - The error to format
+ * @param includeCode - Whether to include the error code
+ * @returns Formatted error message
+ */
+declare function formatErrorMessage(error: PecbError, includeCode?: boolean): string;
+/**
+ * Format an error for logging
+ * @param error - The error to format
+ * @returns Formatted error string for logging
+ */
+declare function formatErrorForLog(error: PecbError): string;
+/**
+ * Create a network error
+ * @param message - Error message
+ * @param statusCode - HTTP status code if applicable
+ * @param originalError - Original error
+ * @returns A network category PecbError
+ */
+declare function createNetworkError(message: string, statusCode?: number, originalError?: Error): PecbError;
+/**
+ * Create an authentication error
+ * @param message - Error message
+ * @param originalError - Original error
+ * @returns An authentication category PecbError
+ */
+declare function createAuthError(message: string, originalError?: Error): PecbError;
+/**
+ * Create an authorization error
+ * @param message - Error message
+ * @param resource - The resource that access was denied to
+ * @returns An authorization category PecbError
+ */
+declare function createAuthorizationError(message: string, resource?: string): PecbError;
+/**
+ * Create a configuration error
+ * @param message - Error message
+ * @param configKey - The configuration key that is invalid
+ * @returns A configuration category PecbError
+ */
+declare function createConfigError(message: string, configKey?: string): PecbError;
+/**
+ * Error handler type
+ */
+type ErrorHandler = (error: PecbError) => void;
+/**
+ * Register an error handler for a category
+ * @param category - The error category to handle
+ * @param handler - The handler function
+ * @returns Cleanup function to unregister
+ */
+declare function registerErrorHandler(category: ErrorCategory, handler: ErrorHandler): () => void;
+/**
+ * Handle an error by invoking registered handlers
+ * @param error - The error to handle
+ */
+declare function handleError(error: PecbError): void;
+/**
+ * Try to execute an operation and return a result or error
+ * @param operation - The operation to execute
+ * @param errorOptions - Options for error wrapping
+ * @returns A tuple of [result, null] or [null, error]
+ */
+declare function tryAsync<T>(operation: () => Promise<T>, errorOptions?: ErrorOptions): Promise<[T, null] | [null, PecbError]>;
+/**
+ * Synchronous version of tryAsync
+ * @param operation - The operation to execute
+ * @param errorOptions - Options for error wrapping
+ * @returns A tuple of [result, null] or [null, error]
+ */
+declare function trySync<T>(operation: () => T, errorOptions?: ErrorOptions): [T, null] | [null, PecbError];
+
+/**
+ * All available icon names in the PECB icon library.
+ * Use with `<pecb-icon name="icon-name">` for built-in icons.
+ */
+type IconName = 'activity' | 'add-square-01' | 'add-square-02' | 'add-square-03' | 'add-square-04' | 'alarm-01' | 'alarm-02' | 'alarm-03' | 'alarm-04' | 'alarm-05' | 'alarm-06' | 'alarm-check' | 'alarm-minus' | 'alarm-off' | 'alarm-plus' | 'alert-circle' | 'alert-square' | 'alert-triangle' | 'align-center' | 'align-down-01' | 'align-down-02' | 'align-horizontal-center-01' | 'align-horizontal-center-02' | 'align-horizontal-center-03' | 'align-justify' | 'align-left' | 'align-left-01' | 'align-left-02' | 'align-right' | 'align-right-01' | 'align-right-02' | 'align-up-01' | 'align-up-02' | 'align-vertical-center-01' | 'align-vertical-center-02' | 'align-vertical-center-03' | 'annotation' | 'annotation-alert' | 'annotation-check' | 'annotation-information' | 'annotation-plus' | 'annotation-typing' | 'annotation-x' | 'atom' | 'attatchment-01' | 'attatchment-02' | 'audio-settings-01' | 'audio-settings-02' | 'bag-01' | 'bag-02' | 'bag-03' | 'bag-04' | 'bag-05' | 'bank' | 'bank-note-01' | 'bank-note-02' | 'bank-note-03' | 'bank-note-04' | 'bank-note-05' | 'bank-note-06' | 'bar-chart-01' | 'bar-chart-02' | 'bar-chart-03' | 'bar-chart-04' | 'bar-chart-05' | 'bar-chart-square-01' | 'bar-chart-square-02' | 'bar-chart-square-03' | 'bar-chart-square-down-01' | 'bar-chart-square-down-02' | 'bar-chart-square-up-01' | 'bar-group-01' | 'bar-group-02' | 'bar-group-03' | 'battery-01' | 'battery-02' | 'battery-03' | 'battery-04' | 'battery-empty' | 'battery-fill-01' | 'battery-fill-02' | 'battery-fill-04' | 'bell-01' | 'bell-02' | 'bell-03' | 'bell-04' | 'bell-off-01' | 'bell-off-02' | 'bell-ringing-01' | 'bell-ringing-02' | 'bell-ringing-03' | 'bell-ringing-04' | 'bezier-01' | 'bezier-02' | 'bluetooth-01' | 'bluetooth-02' | 'bold-01' | 'bold-02' | 'book-01' | 'book-02' | 'book-03' | 'book-04' | 'book-05' | 'book-06' | 'box' | 'brackets' | 'brackets-check' | 'brackets-minus' | 'brackets-plus' | 'brackets-slash' | 'brackets-typing' | 'calculator-01' | 'calculator-02' | 'calendar-01' | 'calendar-02' | 'calendar-03' | 'calendar-04' | 'calendar-05' | 'calendar-06' | 'calendar-07' | 'calendar-check' | 'calendar-minus' | 'calendar-number' | 'calendar-plus' | 'camera-01' | 'camera-02' | 'camera-lens' | 'camera-off' | 'cancel-left' | 'cancel-right' | 'car' | 'card-01' | 'card-02' | 'card-add' | 'card-check' | 'card-down' | 'card-edit' | 'card-lock' | 'card-minus' | 'card-number' | 'card-shield' | 'card-up' | 'card-x' | 'cart' | 'center' | 'chart-breakout-circle' | 'chart-breakout-square' | 'check-01' | 'check-02' | 'check-broken' | 'check-contained' | 'check-square-broken' | 'check-square-contained' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chromecast' | 'circle' | 'clock-01' | 'clock-backward' | 'clock-check' | 'clock-forward' | 'clock-plus' | 'cloud-01' | 'cloud-02' | 'cloud-03' | 'cloud-04' | 'cloud-lightning' | 'cloud-rain' | 'cloud-snow' | 'cloud-sun' | 'code-01' | 'code-02' | 'code-03' | 'code-04' | 'coin-broken' | 'coin-hand' | 'coin-number' | 'coin-unbroken' | 'coins' | 'coins-rotate' | 'color-picker' | 'color-swatch-01' | 'color-swatch-02' | 'colors-01' | 'colors-02' | 'column-horizontal-01' | 'column-horizontal-02' | 'column-horizontal-03' | 'column-vertical-01' | 'column-vertical-02' | 'column-vertical-03' | 'compare' | 'compass' | 'component' | 'computer' | 'contrast' | 'copy-left' | 'copy-right' | 'crop-01' | 'crop-02' | 'currency-bath' | 'currency-bitcoin' | 'currency-cent' | 'currency-coin-bath' | 'currency-coin-bitcoin' | 'currency-coin-cent' | 'currency-coin-dollar' | 'currency-coin-euro' | 'currency-coin-pound' | 'currency-coin-rubel' | 'currency-coin-rupee' | 'currency-coin-yen' | 'currency-dollar' | 'currency-euro' | 'currency-pound' | 'currency-rubel' | 'currency-rupee' | 'currency-yen' | 'cursor-01' | 'cursor-02' | 'cursor-03' | 'cursor-04' | 'cursor-05' | 'cursor-06' | 'cursor-grab' | 'cursor-grabbed' | 'cursor-pointer' | 'dash' | 'data-01' | 'data-02' | 'data-03' | 'data-04' | 'delete' | 'delivery' | 'diamond' | 'disc' | 'discount-circle' | 'discount-square' | 'discount-star-01' | 'discount-star-02' | 'discount-star-03' | 'divider' | 'dot-horizontal' | 'dot-vertical' | 'download' | 'download-01' | 'download-02' | 'drop' | 'edit-01' | 'edit-02' | 'edit-03' | 'edit-04' | 'edit-contained' | 'email' | 'embed' | 'equals' | 'equals-not' | 'eraser-01' | 'eraser-02' | 'expand' | 'expand-02' | 'eye-closed' | 'eye-open' | 'face-id-01' | 'face-id-02' | 'fast-backward' | 'fast-forward' | 'favourite' | 'feather-01' | 'feather-02' | 'file' | 'file-01' | 'file-02' | 'file-03' | 'file-04' | 'file-05' | 'file-06' | 'file-attach-01' | 'file-attach-02' | 'file-attach-03' | 'file-branch' | 'file-check-01' | 'file-check-02' | 'file-code' | 'file-down-01' | 'file-down-02' | 'file-edit-01' | 'file-edit-02' | 'file-eye-01' | 'file-eye-02' | 'file-lock-01' | 'file-lock-02' | 'file-lock-03' | 'file-minus-01' | 'file-minus-02' | 'file-multiple' | 'file-none' | 'file-plus-01' | 'file-plus-02' | 'file-question-01' | 'file-question-02' | 'file-return-01' | 'file-return-02' | 'file-search-01' | 'file-search-02' | 'file-shield-01' | 'file-shield-02' | 'file-shield-03' | 'file-shred' | 'file-up-01' | 'file-up-02' | 'file-x-02' | 'filter' | 'fingerpint-01' | 'fingerpint-02' | 'flame-01' | 'flash-off' | 'flash-on' | 'flex-align-bottom-01' | 'flex-align-center-01' | 'flex-align-left-01' | 'flex-align-right-01' | 'flex-align-spaced-01' | 'flex-align-top-01' | 'flex-columns' | 'flip-01' | 'flip-02' | 'flip-left' | 'flip-right' | 'folder' | 'folder-code' | 'folder-down-01' | 'folder-down-02' | 'folder-minus-01' | 'folder-open-01' | 'folder-open-02' | 'folder-open-03' | 'folder-plus-01' | 'folder-plus-02' | 'folder-search-01' | 'folder-search-02' | 'folder-shield' | 'folder-up-01' | 'folder-up-02' | 'folder-x-01' | 'folder-x-02' | 'gear' | 'gift-01' | 'gift-02' | 'git-branch-01' | 'git-branch-02' | 'git-branch-03' | 'git-branch-04' | 'git-branch-05' | 'glasses-01' | 'glasses-02' | 'globe' | 'globe-01' | 'globe-02' | 'globe-03' | 'globe-04' | 'globe-05' | 'graduation-cap-01' | 'graduation-cap-02' | 'grid-01' | 'grid-02' | 'grid-03' | 'grid-04-filled' | 'hash-01' | 'hash-02' | 'header-01' | 'header-02' | 'headphones' | 'heart' | 'help' | 'help-circle-contained' | 'help-square-contained' | 'hexagon' | 'home-01' | 'home-02' | 'home-03' | 'home-04' | 'home-05' | 'horizontal-chart-01' | 'horizontal-chart-02' | 'horizontal-chart-03' | 'hourglass-01' | 'hourglass-02' | 'hourglass-03' | 'image' | 'image-01' | 'image-02' | 'image-03' | 'image-04' | 'image-add' | 'image-avatar' | 'image-check' | 'image-down' | 'image-focus' | 'image-indent-left' | 'image-indent-right' | 'image-minus' | 'image-no-borders' | 'image-question' | 'image-up' | 'image-x' | 'inbox-01' | 'inbox-02' | 'indent-decrease' | 'indent-increase' | 'indent-left' | 'indent-right' | 'info-square-01-contained' | 'info-square-02-contained-filled' | 'information-circle-contained' | 'intersect' | 'iphone-02' | 'italics-01' | 'italics-02' | 'key-01' | 'key-02' | 'keyboard' | 'laptop-01' | 'laptop-02' | 'layers-01' | 'layers-02' | 'layers-03' | 'layers-04' | 'layers-05' | 'layout-01' | 'layout-02' | 'layout-03' | 'layout-04' | 'layout-bottom' | 'layout-grid-01' | 'layout-left' | 'layout-right' | 'layout-scale' | 'layout-top' | 'letter-spacing-01' | 'letter-spacing-02' | 'letter-spacing-03' | 'lightbulb-01' | 'lightbulb-02' | 'lightbulb-03' | 'lightning-01' | 'lightning-02' | 'lightning-circle-contained' | 'lightning-filled' | 'lightning-square-contained' | 'line-chart-down-01' | 'line-chart-down-02' | 'line-chart-up-01' | 'line-chart-up-02' | 'line-height' | 'link' | 'link-angled' | 'link-broken' | 'link-external' | 'list' | 'list-numbers' | 'loader-01' | 'loader-02' | 'lock-01' | 'lock-02' | 'lock-03' | 'lock-04' | 'lock-open-01' | 'lock-open-02' | 'lock-open-03' | 'lock-open-04' | 'logout-01' | 'logout-02' | 'logout-03' | 'logout-04' | 'luggage-01' | 'luggage-02' | 'luggage-03' | 'luggage-04' | 'mail-01' | 'mail-02' | 'mail-03' | 'mail-04' | 'mail-05' | 'map-01' | 'map-02' | 'map-03' | 'map-04' | 'marker-01' | 'marker-02' | 'marker-03' | 'marker-04' | 'marker-05' | 'marker-06' | 'maximise-01' | 'maximise-02' | 'media-strip-01' | 'media-strip-02' | 'menu-01' | 'menu-02' | 'menu-03' | 'menu-04' | 'menu-05' | 'message-alert-circle' | 'message-alert-plus' | 'message-chat-01' | 'message-circle' | 'message-notify-circle' | 'message-notify-square' | 'message-square' | 'message-square-information' | 'message-square-plus' | 'message-square-typing' | 'message-square-x' | 'message-text-01' | 'message-text-02' | 'message-typing' | 'message-x' | 'microphone-01' | 'microphone-02' | 'microphone-off-01' | 'microphone-off-02' | 'minimise-01' | 'minimise-02' | 'minus-circle-contained' | 'minus-square-contained' | 'moon-01' | 'moon-02' | 'mouse' | 'move' | 'note-01' | 'note-02' | 'notification-box' | 'notification-bubble' | 'notification-square-01' | 'notification-square-02' | 'octagon' | 'overlap' | 'package-01' | 'package-02' | 'package-check' | 'package-minus' | 'package-plus' | 'package-x' | 'paint-bucket-01' | 'paint-bucket-02' | 'palette' | 'paperclip' | 'paperclip-01' | 'paperclip-02' | 'passport' | 'password-01' | 'password-02' | 'pause-01' | 'pause-02' | 'pause-03' | 'pen-tool-01' | 'pen-tool-02' | 'pen-tool-03' | 'pen-tool-04' | 'pencil-01' | 'pencil-02' | 'pencil-03' | 'pentagon' | 'percent-01' | 'percent-02' | 'percent-03' | 'perspective' | 'phone' | 'phone-call-01' | 'phone-call-02' | 'phone-down' | 'phone-incoming-01' | 'phone-incoming-02' | 'phone-off' | 'phone-outgoing-01' | 'phone-outgoing-02' | 'phone-up' | 'phone-x' | 'pie-chart-01' | 'pie-chart-02' | 'pie-chart-03' | 'plane' | 'play-01' | 'play-02' | 'play-03' | 'plug-01' | 'plus-01' | 'plus-02' | 'plus-03' | 'pointer-01' | 'pointer-02' | 'power' | 'presentation-01' | 'presentation-02' | 'presentation-03' | 'progress' | 'quote' | 'receipt' | 'receipt-lines' | 'refresh-01' | 'rss' | 'ruler' | 'save-01' | 'save-02' | 'scale-01' | 'scale-02' | 'scale-03' | 'scan' | 'scissors-01' | 'scissors-02' | 'scissors-03' | 'scissors-04' | 'search-01' | 'search-02' | 'send-01' | 'send-02' | 'send-03' | 'server-01' | 'server-02' | 'server-03' | 'server-04' | 'server-05' | 'server-06' | 'server-down' | 'server-up' | 'settings' | 'share' | 'shield-01' | 'shield-02' | 'shield-check' | 'shield-plus' | 'shuffle' | 'signal' | 'skew' | 'skip-back' | 'skip-forward' | 'slash-01-backward' | 'slash-01-forward' | 'slash-02-forward' | 'smiley-happy' | 'smiley-happy-plus' | 'smiley-neutral' | 'smiley-sad' | 'smiley-wink' | 'snowflake' | 'sort-horizontal' | 'sort-vertical-01' | 'sort-vertical-02' | 'space-height' | 'space-horizontal' | 'space-vertical' | 'space-width' | 'speaker' | 'square' | 'star-01' | 'star-02' | 'stars' | 'stop-01' | 'stop-02' | 'stopwatch-01' | 'stopwatch-02' | 'stopwatch-03' | 'stopwatch-04' | 'stopwatch-05' | 'stopwatch-off' | 'stopwatch-snooze' | 'sun-01' | 'sun-02' | 'sun-03' | 'sun-down' | 'sun-up' | 'superscript' | 'table' | 'tag' | 'target-01' | 'target-02' | 'target-03' | 'target-04' | 'temperature-01' | 'temperature-02' | 'temperature-03' | 'temperature-04' | 'terminal' | 'text-input-01' | 'text-input-02' | 'thumb-down' | 'thumb-up' | 'ticket-01' | 'ticket-02' | 'toggle-right' | 'toogle-left' | 'train' | 'transform' | 'trash-01' | 'trash-02' | 'trash-03' | 'trash-04' | 'trend-down-01' | 'trend-down-02' | 'trend-up-01' | 'trend-up-02' | 'triangle' | 'truck' | 'tv' | 'type-01' | 'type-02' | 'type-03' | 'type-strike-01' | 'type-strike-02' | 'umbrella' | 'umbrella-01' | 'umbrella-02' | 'underline-01' | 'underline-02' | 'union' | 'upload-01' | 'upload-02' | 'upload-03' | 'upload-04' | 'user-profile-01' | 'user-profile-02' | 'user-profile-03' | 'user-profile-add-01' | 'user-profile-add-02' | 'user-profile-check' | 'user-profile-circle' | 'user-profile-down' | 'user-profile-group' | 'user-profile-left' | 'user-profile-minus' | 'user-profile-right' | 'user-profile-square' | 'user-profile-star' | 'user-profile-up' | 'user-profile-x' | 'users-profiles-01' | 'users-profiles-02' | 'users-profiles-03' | 'users-profiles-check' | 'users-profiles-down' | 'users-profiles-left' | 'users-profiles-minus' | 'users-profiles-plus' | 'users-profiles-right' | 'users-profiles-up' | 'users-profiles-x' | 'variant' | 'video-off' | 'video-on' | 'volume-01' | 'volume-02' | 'volume-03' | 'volume-04' | 'volume-05' | 'volume-06' | 'volume-07' | 'wallert-04' | 'wallet-01' | 'wallet-02' | 'wallet-03' | 'watch-01' | 'watch-02' | 'waveform' | 'webcam' | 'wifi-off' | 'wifi-on' | 'wind-01' | 'wind-02' | 'wind-03' | 'wrench' | 'x-01' | 'x-02' | 'x-03' | 'x-circle-contained' | 'x-square-contained' | 'youtube' | 'zoom-in' | 'zoom-out' | 'custom-warning-xs-neutral';
+
+/**
+ * Custom icon names — self-contained icons with built-in background and color.
+ *
+ * Naming: `custom-{state}-{size}-{style}`
+ *
+ * | State            | Description                        |
+ * |------------------|------------------------------------|
+ * | check            | Checkmark / completed              |
+ * | certificate      | Certificate / credential           |
+ * | view             | Eye / visibility                   |
+ * | add              | Plus / create                      |
+ * | delete           | Trash / remove                     |
+ * | download         | Download arrow                     |
+ * | upload           | Upload arrow                       |
+ * | time             | Clock / duration                   |
+ * | slide            | Presentation / slideshow           |
+ * | tools            | Wrench / settings                  |
+ * | doc              | Document / file                    |
+ * | info             | Information circle                 |
+ * | warning          | Warning triangle                   |
+ * | not-applicable   | N/A / disabled                     |
+ *
+ * Sizes: xs (24), sm (32), md (40), lg (48), xl (56), 2xl (64)
+ * Styles: active (colored), neutral (gray)
+ */
+type CustomIconName = 'custom-add-2xl-active' | 'custom-add-2xl-neutral' | 'custom-add-lg-active' | 'custom-add-lg-neutral' | 'custom-add-md-active' | 'custom-add-md-neutral' | 'custom-add-sm-active' | 'custom-add-sm-neutral' | 'custom-add-xl-active' | 'custom-add-xl-neutral' | 'custom-add-xs-active' | 'custom-add-xs-neutral' | 'custom-certificate-2xl-active' | 'custom-certificate-2xl-neutral' | 'custom-certificate-lg-active' | 'custom-certificate-lg-neutral' | 'custom-certificate-md-active' | 'custom-certificate-md-neutral' | 'custom-certificate-sm-active' | 'custom-certificate-sm-neutral' | 'custom-certificate-xl-active' | 'custom-certificate-xl-neutral' | 'custom-certificate-xs-active' | 'custom-certificate-xs-neutral' | 'custom-check-2xl-active' | 'custom-check-2xl-neutral' | 'custom-check-lg-active' | 'custom-check-lg-neutral' | 'custom-check-md-active' | 'custom-check-md-neutral' | 'custom-check-sm-active' | 'custom-check-sm-neutral' | 'custom-check-xl-active' | 'custom-check-xl-neutral' | 'custom-check-xs-active' | 'custom-check-xs-neutral' | 'custom-delete-2xl-active' | 'custom-delete-2xl-neutral' | 'custom-delete-lg-active' | 'custom-delete-lg-neutral' | 'custom-delete-md-active' | 'custom-delete-md-neutral' | 'custom-delete-sm-active' | 'custom-delete-sm-neutral' | 'custom-delete-xl-active' | 'custom-delete-xl-neutral' | 'custom-delete-xs-active' | 'custom-delete-xs-neutral' | 'custom-doc-2xl-active' | 'custom-doc-2xl-neutral' | 'custom-doc-lg-active' | 'custom-doc-lg-neutral' | 'custom-doc-md-active' | 'custom-doc-md-neutral' | 'custom-doc-sm-active' | 'custom-doc-sm-neutral' | 'custom-doc-xl-active' | 'custom-doc-xl-neutral' | 'custom-doc-xs-active' | 'custom-doc-xs-neutral' | 'custom-download-2xl-active' | 'custom-download-2xl-neutral' | 'custom-download-lg-active' | 'custom-download-lg-neutral' | 'custom-download-md-active' | 'custom-download-md-neutral' | 'custom-download-sm-active' | 'custom-download-sm-neutral' | 'custom-download-xl-active' | 'custom-download-xl-neutral' | 'custom-download-xs-active' | 'custom-download-xs-neutral' | 'custom-info-2xl-active' | 'custom-info-2xl-neutral' | 'custom-info-lg-active' | 'custom-info-lg-neutral' | 'custom-info-md-active' | 'custom-info-md-neutral' | 'custom-info-sm-active' | 'custom-info-sm-neutral' | 'custom-info-xl-active' | 'custom-info-xl-neutral' | 'custom-info-xs-active' | 'custom-info-xs-neutral' | 'custom-not-applicable-2xl-active' | 'custom-not-applicable-2xl-neutral' | 'custom-not-applicable-lg-active' | 'custom-not-applicable-lg-neutral' | 'custom-not-applicable-md-active' | 'custom-not-applicable-md-neutral' | 'custom-not-applicable-sm-active' | 'custom-not-applicable-sm-neutral' | 'custom-not-applicable-xl-active' | 'custom-not-applicable-xl-neutral' | 'custom-not-applicable-xs-active' | 'custom-not-applicable-xs-neutral' | 'custom-slide-2xl-active' | 'custom-slide-2xl-neutral' | 'custom-slide-lg-active' | 'custom-slide-lg-neutral' | 'custom-slide-md-active' | 'custom-slide-md-neutral' | 'custom-slide-sm-active' | 'custom-slide-sm-neutral' | 'custom-slide-xl-active' | 'custom-slide-xl-neutral' | 'custom-slide-xs-active' | 'custom-slide-xs-neutral' | 'custom-time-2xl-active' | 'custom-time-2xl-neutral' | 'custom-time-lg-active' | 'custom-time-lg-neutral' | 'custom-time-md-active' | 'custom-time-md-neutral' | 'custom-time-sm-active' | 'custom-time-sm-neutral' | 'custom-time-xl-active' | 'custom-time-xl-neutral' | 'custom-time-xs-active' | 'custom-time-xs-neutral' | 'custom-tools-2xl-active' | 'custom-tools-2xl-neutral' | 'custom-tools-lg-active' | 'custom-tools-lg-neutral' | 'custom-tools-md-active' | 'custom-tools-md-neutral' | 'custom-tools-sm-active' | 'custom-tools-sm-neutral' | 'custom-tools-xl-active' | 'custom-tools-xl-neutral' | 'custom-tools-xs-active' | 'custom-tools-xs-neutral' | 'custom-upload-2xl-active' | 'custom-upload-2xl-neutral' | 'custom-upload-lg-active' | 'custom-upload-lg-neutral' | 'custom-upload-md-active' | 'custom-upload-md-neutral' | 'custom-upload-sm-active' | 'custom-upload-sm-neutral' | 'custom-upload-xl-active' | 'custom-upload-xl-neutral' | 'custom-upload-xs-active' | 'custom-upload-xs-neutral' | 'custom-view-2xl-active' | 'custom-view-2xl-neutral' | 'custom-view-lg-active' | 'custom-view-lg-neutral' | 'custom-view-md-active' | 'custom-view-md-neutral' | 'custom-view-sm-active' | 'custom-view-sm-neutral' | 'custom-view-xl-active' | 'custom-view-xl-neutral' | 'custom-view-xs-active' | 'custom-view-xs-neutral' | 'custom-warning' | 'custom-warning-2xl-active' | 'custom-warning-2xl-neutral' | 'custom-warning-lg-active' | 'custom-warning-lg-neutral' | 'custom-warning-md-active' | 'custom-warning-md-neutral' | 'custom-warning-sm-active' | 'custom-warning-sm-neutral' | 'custom-warning-xl-active' | 'custom-warning-xl-neutral' | 'custom-warning-xs-active';
+
+/** Container size. The inner icon is always 50 % of the container. */
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Background colour of the icon container.
+ * Each variant also sets a matching `color` so SVGs using `currentColor` inherit
+ * the correct stroke/fill automatically.
+ */
+type IconColor = 'none' | 'primary' | 'gray' | 'white' | 'error' | 'warning' | 'success';
+/** Border-radius shape of the container. */
+type IconShape = 'round' | 'square';
+/**
+ * A coloured icon container that wraps any SVG icon.
+ *
+ * Supports three ways to provide an icon:
+ *
+ * 1. **By name** — pass a registered `IconName` via `[name]`.
+ *    The component looks up the SVG from the `IconRegistry`.
+ * 2. **By SVG string** — pass an inline SVG string via `[svgIcon]`.
+ * 3. **By content projection** — project an `<svg>` element as child content.
+ *
+ * Priority: `name` > `svgIcon` > content projection.
+ *
+ * @example
+ * <!-- By name (requires icon to be registered in IconRegistry) -->
+ * <pecb-icon name="check-01" color="success" size="md"></pecb-icon>
+ *
+ * @example
+ * <!-- SVG string input -->
+ * <pecb-icon [svgIcon]="alertSvg" color="error" size="md" shape="round">
+ * </pecb-icon>
+ *
+ * @example
+ * <!-- Content projection -->
+ * <pecb-icon color="success" size="lg" shape="square">
+ *   <svg width="24" height="24" ...>...</svg>
+ * </pecb-icon>
+ */
+declare class IconComponent {
+    private readonly sanitizer;
+    private readonly registry;
+    /**
+     * Registered icon name. When provided, the SVG is resolved from the
+     * `IconRegistry`. Takes highest priority.
+     */
+    name: _angular_core.InputSignal<IconName | CustomIconName | undefined>;
+    /**
+     * Inline SVG string to render inside the container.
+     * When provided, this takes precedence over projected content.
+     */
+    svgIcon: _angular_core.InputSignal<string>;
+    /**
+     * Container (and colour) size.
+     * @default 'md' → 40 × 40 px container, 20 × 20 px icon
+     */
+    size: _angular_core.InputSignal<IconSize>;
+    /**
+     * Background colour variant.
+     * Also applies the matching foreground colour so `currentColor` SVGs are
+     * correctly tinted without any extra configuration.
+     * @default 'primary'
+     */
+    color: _angular_core.InputSignal<IconColor>;
+    /**
+     * Container shape.
+     * - `round`  — fully circular (border-radius 50 %)
+     * - `square` — softly rounded rectangle (border-radius 8 px)
+     * @default 'round'
+     */
+    shape: _angular_core.InputSignal<IconShape>;
+    /**
+     * Accessible label for the icon. When provided the container receives
+     * `role="img"` and `aria-label`. When omitted the icon is treated as
+     * decorative (`aria-hidden="true"`).
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    hostClasses: _angular_core.Signal<string>;
+    /** Inner icon dimension in px (= container ÷ 2). */
+    innerSize: _angular_core.Signal<number>;
+    /** Resolved SVG string: name lookup → svgIcon input → empty. */
+    resolvedSvg: _angular_core.Signal<string>;
+    safeIcon: _angular_core.Signal<SafeHtml>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "pecb-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "svgIcon": { "alias": "svgIcon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { AccordionItemComponent, AccordionSmallComponent, AlertComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, FloatButtonComponent, FloatButtonItemComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, GeneralComponent, GridComponent, GridItemComponent, IconComponent, InputComponent, LoadingService, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, NotificationService, PECB_COLOR_PALETTE, PECB_FONT_STYLES, PECB_TYPE_SCALE, PaginationComponent, PecbComponentsModule, ProfileComponent, ProfileGroupComponent, ProgressBarComponent, ProgressCircleComponent, RadioComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SpacerComponent, SpinnerComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, ThemeService, ToggleComponent, TooltipComponent, TooltipDirective, TypographyComponent, addClass, announceToScreenReader, capitalize, closestElement, copyToClipboard, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, formatCount, formatErrorForLog, formatErrorMessage, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
+export type { AccordionVariant, AlertType, AlertVariant, Alignment, AnimationTiming, AriaAttributes, AriaLive, AriaRole, BlurSize, BreadcrumbItem, BreadcrumbSeparator, Breakpoint, ButtonGroupIconMode, ButtonGroupItemPosition, ButtonIconStyle, ButtonSize, ButtonVariant, Callback, CardElevation, CardRadius, CardRole, CheckboxLabelPosition, ClosableWithHooks, CodeInputDirection, CodeInputState, CodeSnippetTheme, CodeSnippetVariant, ColorPaletteGroup, ColorPaletteItem, ColorVariant, Colorable, ComponentSize, ConfirmationIconType, DashboardGridGap, DashboardGridLayout, DatepickerSize, Direction, Disableable, DividerType, DropdownOption, DropdownSize, ElevationLevel, ErrorCategory, ErrorHandler, ErrorOptions, ErrorSeverity, EventHandler, ExtendedColorVariant, FilterState, FloatButtonAction, FloatButtonPosition, Focusable, FormControlBase, GridAlign, GridColumns, GridGap, GridItemSpan, GridPadding, GridVerticalAlign, IconColor, IconShape, IconSize, InputSize, InputType, Loadable, LoadingState, MenuItem, MessageBubbleType, MessageDirection, MessageItemStatus, MetricsCardBadgeStatus, MetricsCardIconBg, MetricsCardOrientation, MetricsCardType, MetricsCardVariation, NonNullableProps, Notification, NotificationConfig, NotificationPosition, NotificationType, OptionalProps, Orientation, OverlayComponent, PageChangeEvent, PaginationSize, PaginationState, PaginationVariant, PecbError, PecbTableColumn, PecbTableColumnComponent, PecbTableColumnType, Position, ProfileBadge, ProfileGroupItem, ProfileGroupSize, ProfileIndicator, ProfileSize, ProgressBarSize, ProgressCircleSize, ProgressType, QuizType, RadioLabelPosition, RadioVariant, RadiusScale, RequireProps, RightModalSize, SearchMode, SelectableItem, ShadowHardSize, ShadowSize, ShadowSoftSize, ShadowType, SidebarMenuItem, SidebarSection, Size, Sizeable, SkeletonShape, SkeletonSize, SkeletonType, SortState, SpacerSize, SpacingScale, StateVariant, StatusSize, StatusType, StatusVariant, StepItem, StepOrder, StepState, StepperDirection, StepperSize, StepperTailStyle, StepperType, TabItem, TabSize, TabStyle, TableAction, TableColumn, TableRowActionEvent, TableSelectionEvent, TableSize, TableSortEvent, TableStatusConfig, TableUserConfig, TableVariant, Templatable, ThemeConfig, ThemeMode, ThemeVariables, ToggleLabelPosition, TooltipPointerPosition, TooltipTheme, TreeNode, TypographyScaleEntry, TypographyStyleEntry, Validatable, ValidationError, ValidationState };