@life-cockpit/angular-ui-kit 1.0.0

package/types/life-cockpit-angular-ui-kit.d.ts

@@ -0,0 +1,3621 @@
+import * as _angular_core from '@angular/core';
+import { EventEmitter, ElementRef, OnInit, OnDestroy, AfterViewInit, QueryList, Signal, TemplateRef, AfterContentInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SafeHtml } from '@angular/platform-browser';
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const ColorPrimary50 = "#f0f8fa";
+declare const ColorPrimary100 = "#e0f1f4";
+declare const ColorPrimary200 = "#c1e3e9";
+declare const ColorPrimary300 = "#a3d5df";
+declare const ColorPrimary400 = "#84c7d4";
+declare const ColorPrimary500 = "#208497";
+declare const ColorPrimary600 = "#1a6a79";
+declare const ColorPrimary700 = "#144f5b";
+declare const ColorPrimary800 = "#0d353d";
+declare const ColorPrimary900 = "#071a1f";
+declare const ColorSecondary50 = "#f5f8f9";
+declare const ColorSecondary100 = "#ebf1f3";
+declare const ColorSecondary200 = "#d7e3e7";
+declare const ColorSecondary300 = "#c3d5db";
+declare const ColorSecondary400 = "#afc7cf";
+declare const ColorSecondary500 = "#7097af";
+declare const ColorSecondary600 = "#5a798c";
+declare const ColorSecondary700 = "#435b69";
+declare const ColorSecondary800 = "#2d3c46";
+declare const ColorSecondary900 = "#161e23";
+declare const ColorNeutral50 = "#f9fafb";
+declare const ColorNeutral100 = "#f3f4f6";
+declare const ColorNeutral200 = "#e5e7eb";
+declare const ColorNeutral300 = "#d1d5db";
+declare const ColorNeutral400 = "#9ca3af";
+declare const ColorNeutral500 = "#6b7280";
+declare const ColorNeutral600 = "#4b5563";
+declare const ColorNeutral700 = "#374151";
+declare const ColorNeutral800 = "#1f2937";
+declare const ColorNeutral900 = "#111827";
+declare const ColorSuccessDefault = "#8ea475";
+declare const ColorSuccessLight = "#cdd6c2";
+declare const ColorSuccessDark = "#5f7150";
+declare const ColorErrorDefault = "#9d0e0e";
+declare const ColorErrorLight = "#f7a1a1";
+declare const ColorErrorDark = "#6b0909";
+declare const ColorWarningDefault = "#e1a040";
+declare const ColorWarningLight = "#f1d3a7";
+declare const ColorWarningDark = "#9b6b2b";
+declare const ColorInfoDefault = "#3b6588";
+declare const ColorInfoLight = "#b8cee0";
+declare const ColorInfoDark = "#27445c";
+declare const ColorAccentOrange = "#df792e";
+declare const ColorAccentPurple = "#866aa0";
+declare const ColorAccentRed = "#9e3846";
+declare const ColorAccentRust = "#c6592e";
+declare const ColorAccentViolet = "#4e3f84";
+declare const Spacing0 = "0";
+declare const Spacing1 = "0.25rem";
+declare const Spacing2 = "0.5rem";
+declare const Spacing3 = "0.75rem";
+declare const Spacing4 = "1rem";
+declare const Spacing5 = "1.25rem";
+declare const Spacing6 = "1.5rem";
+declare const Spacing7 = "1.75rem";
+declare const Spacing8 = "2rem";
+declare const Spacing9 = "2.25rem";
+declare const Spacing10 = "2.5rem";
+declare const Spacing11 = "2.75rem";
+declare const Spacing12 = "3rem";
+declare const Spacing14 = "3.5rem";
+declare const Spacing16 = "4rem";
+declare const Spacing05 = "0.125rem";
+declare const Spacing15 = "0.375rem";
+declare const Spacing25 = "0.625rem";
+declare const Spacing35 = "0.875rem";
+declare const TypographyFontFamilyBase = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+declare const TypographyFontFamilyMono = "'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace";
+declare const TypographyFontSizeXs = "0.75rem";
+declare const TypographyFontSizeSm = "0.875rem";
+declare const TypographyFontSizeBase = "1rem";
+declare const TypographyFontSizeLg = "1.125rem";
+declare const TypographyFontSizeXl = "1.25rem";
+declare const TypographyFontSize2xl = "1.5rem";
+declare const TypographyFontSize3xl = "1.875rem";
+declare const TypographyFontSize4xl = "2.25rem";
+declare const TypographyFontSize5xl = "3rem";
+declare const TypographyFontSize6xl = "3.75rem";
+declare const TypographyFontWeightNormal = "400";
+declare const TypographyFontWeightMedium = "500";
+declare const TypographyFontWeightSemibold = "600";
+declare const TypographyFontWeightBold = "700";
+declare const TypographyLineHeightTight = "1.25";
+declare const TypographyLineHeightNormal = "1.5";
+declare const TypographyLineHeightRelaxed = "1.75";
+declare const Elevation1 = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+declare const Elevation2 = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+declare const Elevation3 = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+declare const Elevation4 = "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+declare const BorderRadiusNone = "0";
+declare const BorderRadiusSm = "0.25rem";
+declare const BorderRadiusMd = "0.5rem";
+declare const BorderRadiusLg = "0.75rem";
+declare const BorderRadiusXl = "1rem";
+declare const BorderRadius2xl = "1.5rem";
+declare const BorderRadiusFull = "9999px";
+declare const AnimationDurationFast = "150ms";
+declare const AnimationEasingEaseIn = "ease-in";
+declare const AnimationEasingEaseOut = "ease-out";
+declare const AnimationEasingEaseInOut = "ease-in-out";
+declare const SizeInteractiveXsHeight = "1.5rem";
+declare const SizeInteractiveXsPadding = "0.25rem 0.5rem";
+declare const SizeInteractiveXsFontSize = "0.75rem";
+declare const SizeInteractiveSmHeight = "2rem";
+declare const SizeInteractiveSmPadding = "0.375rem 0.75rem";
+declare const SizeInteractiveSmFontSize = "0.875rem";
+declare const SizeInteractiveMdHeight = "2.5rem";
+declare const SizeInteractiveMdPadding = "0.5rem 1rem";
+declare const SizeInteractiveMdFontSize = "1rem";
+declare const SizeInteractiveLgHeight = "2.75rem";
+declare const SizeInteractiveLgPadding = "0.625rem 1.25rem";
+declare const SizeInteractiveLgFontSize = "1.125rem";
+declare const SizeMinTouchWidth = "2.75rem";
+declare const SizeMinTouchHeight = "2.75rem";
+
+/**
+ * Theme Types
+ * Defines theme modes and configuration interfaces
+ */
+type ThemeMode = 'light' | 'dark';
+interface ThemeConfig {
+    mode: ThemeMode;
+    autoDetect?: boolean;
+}
+interface ThemeState {
+    currentMode: ThemeMode;
+    prefersDark: boolean;
+}
+
+/**
+ * Theme Service
+ * Currently only supports light theme (dark mode disabled)
+ */
+declare class ThemeService {
+    private readonly platformId;
+    private readonly isBrowser;
+    private readonly themeState;
+    readonly currentTheme: _angular_core.Signal<ThemeState>;
+    readonly isDark: _angular_core.WritableSignal<boolean>;
+    constructor();
+    /**
+     * Set the theme mode (currently only light is supported)
+     */
+    setTheme(mode: ThemeMode): void;
+    /**
+     * Toggle theme (disabled - always light)
+     */
+    toggleTheme(): void;
+    /**
+     * Reset to system preference (disabled - always light)
+     */
+    useSystemPreference(): void;
+    /**
+     * Apply light theme to document
+     */
+    private applyTheme;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+/**
+ * NavigationItem interface for sidenav navigation
+ *
+ * Represents a navigation item with icon, label, route, and optional role requirement.
+ * Can also represent a section header (group) when `isSection` is true.
+ */
+interface NavigationItem {
+    /**
+     * Unique identifier for the navigation item
+     */
+    id: string;
+    /**
+     * Icon name from lc-icons library (e.g., 'home', 'paint-brush')
+     */
+    icon: string;
+    /**
+     * Display label for the navigation item
+     */
+    label: string;
+    /**
+     * Angular route path (e.g., '/', '/trading')
+     */
+    route: string;
+    /**
+     * Optional required Cognito role (e.g., 'LC.Trader')
+     * If specified, item only visible to users with this role
+     */
+    requiredRole?: string;
+    /**
+     * Display order in sidebar (1 = first)
+     */
+    displayOrder: number;
+    /**
+     * Optional nested navigation items for multi-level navigation
+     */
+    children?: NavigationItem[];
+    /**
+     * When true, this item acts as a non-clickable section header/headline.
+     * Children are displayed beneath it with the label as a group title.
+     */
+    isSection?: boolean;
+}
+
+/**
+ * Accordion component for collapsible content sections.
+ *
+ * @example
+ * ```html
+ * <lc-accordion title="Section Title" [(expanded)]="isOpen">
+ *   <p>Collapsible content here</p>
+ * </lc-accordion>
+ * ```
+ */
+declare class AccordionComponent {
+    /** Title displayed in the accordion header */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Whether the accordion is expanded (two-way binding) */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    /** Visual variant */
+    readonly variant: _angular_core.InputSignal<"outlined" | "flat">;
+    /** Size of the header */
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /** Whether the accordion is disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Computed CSS classes */
+    protected accordionClasses: _angular_core.Signal<string>;
+    /** Toggle expanded state */
+    protected toggle(): void;
+    /** Handle keyboard events for accessibility */
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "lc-accordion", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
+}
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger' | 'warning' | 'info';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonType = 'button' | 'submit' | 'reset';
+declare class ButtonComponent {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    loading: boolean;
+    isLoading: boolean;
+    iconOnly: boolean;
+    fullWidth: boolean;
+    ariaLabel: string;
+    type: ButtonType;
+    readonly clicked: EventEmitter<void>;
+    readonly focused: EventEmitter<void>;
+    readonly blurred: EventEmitter<void>;
+    buttonElement: ElementRef<HTMLButtonElement>;
+    get isDisabled(): boolean;
+    handleClick(): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    focus(): void;
+    blur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "lc-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "clicked": "clicked"; "focused": "focused"; "blurred": "blurred"; }, never, ["[slot='icon-before']", "*", "[slot='icon-after']"], true, never>;
+}
+
+/**
+ * Card component for content grouping and hierarchy.
+ *
+ * @example
+ * ```html
+ * <lc-card title="Card Title" variant="elevated" padding="md">
+ *   <p>Card body content</p>
+ * </lc-card>
+ * ```
+ */
+declare class CardComponent {
+    /**
+     * Optional title rendered as a styled header.
+     * For complex headers (e.g. title + action button), use content projection instead.
+     */
+    title: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional subtitle rendered below the title.
+     */
+    subtitle: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Visual variant of the card
+     * - elevated: Box shadow (default)
+     * - outlined: Border only
+     * - flat: No shadow or border
+     * @default 'elevated'
+     */
+    variant: _angular_core.InputSignal<"outlined" | "flat" | "elevated">;
+    /**
+     * Padding inside the card
+     * @default 'md'
+     */
+    padding: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "none">;
+    /**
+     * Whether the card is clickable (hover effects, cursor pointer)
+     * @default false
+     */
+    clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the card is selected (if clickable)
+     * @default false
+     */
+    selected: _angular_core.InputSignal<boolean>;
+    /**
+     * Border radius size
+     * @default 'md'
+     */
+    borderRadius: _angular_core.InputSignal<"sm" | "md" | "lg" | "none" | "full">;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emitted when card is clicked (if clickable)
+     */
+    readonly cardClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /**
+     * Compute card CSS classes based on inputs
+     */
+    protected cardClasses: _angular_core.Signal<string>;
+    /**
+     * Compute ARIA role based on clickable state
+     */
+    protected role: _angular_core.Signal<"button" | "article">;
+    /**
+     * Handle card click events
+     */
+    protected handleClick(event: MouseEvent): void;
+    /**
+     * Handle keyboard events for accessibility
+     */
+    protected handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "lc-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[card-header]", "*", "[card-footer]"], true, never>;
+}
+
+type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
+declare class CheckboxComponent implements ControlValueAccessor {
+    readonly id: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly error: _angular_core.InputSignal<boolean>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly helpText: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<CheckboxSize>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
+    readonly checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly checked: _angular_core.WritableSignal<boolean>;
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly indeterminate: _angular_core.WritableSignal<boolean>;
+    readonly computedChecked: _angular_core.Signal<boolean>;
+    readonly computedDisabled: _angular_core.Signal<boolean>;
+    readonly computedIndeterminate: _angular_core.Signal<boolean>;
+    readonly labelClasses: _angular_core.Signal<string>;
+    writeValue(value: boolean | null): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleChange(event: Event): void;
+    handleBlur(): void;
+    private onChange;
+    private onTouched;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "lc-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "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; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+}
+
+type IconVariant = 'outline' | 'solid';
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Icon component - Heroicons wrapper for displaying SVG icons
+ *
+ * Features:
+ * - Signal-based reactive API
+ * - Support for outline and solid variants
+ * - Multiple size options (xs, sm, md, lg, xl)
+ * - Custom color support (CSS colors, variables, Tailwind classes)
+ * - Accessibility attributes (ARIA labels, decorative icons)
+ * - Dynamic SVG loading from Heroicons
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <lc-icon name="user" />
+ *
+ * <!-- With variant and size -->
+ * <lc-icon name="check" variant="solid" size="lg" />
+ *
+ * <!-- With custom color -->
+ * <lc-icon name="arrow-right" color="#FF5733" />
+ *
+ * <!-- With Tailwind color -->
+ * <lc-icon name="star" color="text-primary-500" />
+ *
+ * <!-- With accessibility label -->
+ * <lc-icon name="user" ariaLabel="User profile" />
+ *
+ * <!-- Decorative icon (hidden from screen readers) -->
+ * <lc-icon name="sparkles" [decorative]="true" />
+ * ```
+ */
+declare class IconComponent {
+    private readonly sanitizer;
+    private readonly http;
+    /**
+     * Icon name from Heroicons library
+     * @example "user", "check", "arrow-right"
+     */
+    readonly name: _angular_core.InputSignal<string>;
+    /**
+     * Icon variant (outline or solid)
+     * @default "outline"
+     */
+    readonly variant: _angular_core.InputSignal<IconVariant>;
+    /**
+     * Icon size
+     * - xs: 16px
+     * - sm: 20px
+     * - md: 24px (default)
+     * - lg: 32px
+     * - xl: 40px
+     * @default "md"
+     */
+    readonly size: _angular_core.InputSignal<IconSize>;
+    /**
+     * Icon color
+     * Can be:
+     * - CSS color: "#FF5733", "rgb(255, 87, 51)"
+     * - CSS variable: "var(--color-primary-500)"
+     * - Tailwind class: "text-primary-500"
+     * - "currentColor" (default - inherits from parent)
+     * @default "currentColor"
+     */
+    readonly color: _angular_core.InputSignal<string>;
+    /**
+     * Accessible label for screen readers
+     * Required if icon has semantic meaning
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether icon is purely decorative (hidden from screen readers)
+     * @default false
+     */
+    readonly decorative: _angular_core.InputSignal<boolean>;
+    /**
+     * SVG content loaded from Heroicons
+     * @internal
+     */
+    readonly svgContent: _angular_core.WritableSignal<SafeHtml>;
+    /**
+     * Alias map for non-Heroicon names (e.g. Material Design names)
+     * Maps alternative names to their Heroicon equivalents
+     * @internal
+     */
+    private readonly iconAliasMap;
+    /**
+     * Inline SVG map for common icons (fallback when HTTP loading not available)
+     * @internal
+     */
+    private readonly inlineSvgMap;
+    /**
+     * Computed path to SVG file
+     * @internal
+     */
+    readonly iconPath: _angular_core.Signal<string>;
+    /**
+     * Computed size in pixels
+     * @internal
+     */
+    readonly sizeInPixels: _angular_core.Signal<string>;
+    /**
+     * Computed CSS classes
+     * @internal
+     */
+    readonly computedClasses: _angular_core.Signal<string>;
+    /**
+     * Computed inline color style
+     * @internal
+     */
+    readonly colorStyle: _angular_core.Signal<string>;
+    constructor();
+    /**
+     * Process SVG string to add size, color, and accessibility attributes
+     * @private
+     */
+    private processSvgString;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "lc-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Logo Component
+ *
+ * Displays the Life-Cockpit logo or emblem.
+ *
+ * Usage:
+ * ```html
+ * <lc-logo variant="full" size="md"></lc-logo>
+ * <lc-logo variant="emblem" size="sm"></lc-logo>
+ * ```
+ */
+declare class LogoComponent {
+    /**
+     * Logo variant to display
+     * - 'full': Full logo with text
+     * - 'emblem': Just the emblem/icon
+     */
+    variant: 'full' | 'emblem';
+    /**
+     * Size of the logo
+     * - 'xs': 24px height
+     * - 'sm': 32px height
+     * - 'md': 48px height (default)
+     * - 'lg': 64px height
+     * - 'xl': 96px height
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Alt text for accessibility
+     */
+    alt: string;
+    /**
+     * Makes the logo appear clickable
+     */
+    clickable: boolean;
+    get logoSrc(): string;
+    get logoClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogoComponent, "lc-logo", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+interface MenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    variant?: 'default' | 'danger';
+    dividerAfter?: boolean;
+    disabled?: boolean;
+    metadata?: {
+        subtitle?: string;
+        badge?: string;
+    };
+}
+/**
+ * Menu Component - Dropdown menu for navigation and actions
+ *
+ * Features:
+ * - Customizable menu items with icons
+ * - Support for links and buttons
+ * - Dividers between menu sections
+ * - Optional subtitle/metadata for items
+ * - Danger variant for destructive actions
+ * - Click outside to close
+ * - Keyboard navigation (Escape to close)
+ * - OnPush change detection for performance
+ *
+ * @example
+ * ```html
+ * <lc-menu
+ *   [items]="menuItems"
+ *   [isOpen]="isMenuOpen"
+ *   (itemClick)="handleMenuClick($event)"
+ *   (closed)="isMenuOpen = false"
+ * >
+ *   <button trigger>Open Menu</button>
+ *   <div header>User Profile</div>
+ * </lc-menu>
+ * ```
+ */
+declare class MenuComponent {
+    /**
+     * Menu items to display
+     */
+    items: MenuItem[];
+    /**
+     * Whether the menu is open
+     */
+    isOpen: boolean;
+    /**
+     * Menu position relative to trigger
+     * @default 'bottom-right'
+     */
+    position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    /**
+     * Minimum width of menu dropdown
+     * @default '220px'
+     */
+    minWidth: string;
+    /**
+     * Emitted when a menu item is clicked
+     */
+    readonly itemClick: EventEmitter<MenuItem>;
+    /**
+     * Emitted when the menu should be closed (e.g., click outside, Escape key)
+     */
+    readonly closed: EventEmitter<void>;
+    private elementRef;
+    /**
+     * Handle menu item click
+     */
+    onItemClick(item: MenuItem, event: Event): void;
+    /**
+     * Close the menu
+     */
+    close(): void;
+    /**
+     * Handle click outside to close menu
+     */
+    onDocumentClick(event: MouseEvent): void;
+    /**
+     * Handle Escape key to close menu
+     */
+    onEscapeKey(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "lc-menu", never, { "items": { "alias": "items"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "position": { "alias": "position"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; }, { "itemClick": "itemClick"; "closed": "closed"; }, never, ["[trigger]", "[header]", "[footer]"], true, never>;
+}
+
+/**
+ * Text input component for form data entry.
+ *
+ * Implements ControlValueAccessor for seamless integration with Angular forms.
+ * Supports validation, icons, character count, and accessibility features.
+ *
+ * @example
+ * ```html
+ * <lc-input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   [(ngModel)]="email"
+ *   [error]="emailError"
+ * ></lc-input>
+ * ```
+ */
+declare class InputComponent implements ControlValueAccessor {
+    /**
+     * Input label (displayed above input)
+     */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Placeholder text
+     * @default ''
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Input type
+     * @default 'text'
+     */
+    readonly type: _angular_core.InputSignal<"number" | "text" | "email" | "password" | "tel" | "url">;
+    /**
+     * Size of the input
+     * @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg">;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the input is read-only
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the input is required
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * Error message to display (if validation fails)
+     */
+    readonly error: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Helper text to display below input
+     */
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Icon to display before input text (Heroicons name)
+     * @example 'envelope'
+     */
+    readonly iconBefore: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Icon to display after input text (Heroicons name)
+     * @example 'eye'
+     */
+    readonly iconAfter: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Maximum number of characters
+     */
+    readonly maxLength: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Whether to show character count
+     * @default false
+     */
+    readonly showCharCount: _angular_core.InputSignal<boolean>;
+    /**
+     * ARIA label for accessibility
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emitted when input value changes
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Emitted when input receives focus
+     */
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when input loses focus
+     */
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when Enter key is pressed
+     */
+    readonly enterPressed: _angular_core.OutputEmitterRef<void>;
+    readonly value: _angular_core.WritableSignal<string>;
+    readonly inputId: string;
+    private readonly inputElement;
+    private readonly _formDisabled;
+    private onChange;
+    private onTouched;
+    /**
+     * Computed disabled state from both input and form control
+     */
+    protected get isDisabled(): boolean;
+    /**
+     * Gets current character count
+     */
+    protected get charCount(): number;
+    /**
+     * Determines if error state should be shown
+     */
+    protected get hasError(): boolean;
+    /**
+     * Programmatically focus the input
+     */
+    focus(): void;
+    /**
+     * Programmatically select input text
+     */
+    select(): void;
+    /**
+     * Clear the input value
+     */
+    clear(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Handles input value changes
+     */
+    protected onInput(event: Event): void;
+    /**
+     * Handles input focus
+     */
+    protected onFocus(): void;
+    /**
+     * Handles input blur
+     */
+    protected onBlur(): void;
+    /**
+     * Handles keydown events
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "lc-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "iconBefore": { "alias": "iconBefore"; "required": false; "isSignal": true; }; "iconAfter": { "alias": "iconAfter"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCharCount": { "alias": "showCharCount"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "focused": "focused"; "blurred": "blurred"; "enterPressed": "enterPressed"; }, never, never, true, never>;
+}
+
+type RadioSize = 'xs' | 'sm' | 'md' | 'lg';
+declare class RadioComponent implements ControlValueAccessor, OnInit, OnDestroy {
+    readonly id: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly error: _angular_core.InputSignal<boolean>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly helpText: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<RadioSize>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
+    readonly checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    readonly checked: _angular_core.Signal<boolean>;
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly computedChecked: _angular_core.Signal<boolean>;
+    readonly computedDisabled: _angular_core.Signal<boolean>;
+    readonly labelClasses: _angular_core.Signal<string>;
+    private readonly cdr;
+    private readonly ngControl;
+    private formValue;
+    private valueChangeSub?;
+    private onChange;
+    private onTouched;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleChange(event: Event): void;
+    handleBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "lc-radio", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "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; }; }, { "checkedChange": "checkedChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Typography Component
+ *
+ * A flexible text component that provides consistent typography styling across the application.
+ * Supports semantic HTML elements (h1-h6, p, span), text alignment, color variants,
+ * font weights, text transforms, and line clamping.
+ *
+ * @example
+ * ```html
+ * <lc-typography variant="h1" align="center" color="primary">
+ *   Main Heading
+ * </lc-typography>
+ *
+ * <lc-typography variant="body1" gutterBottom>
+ *   Body text with bottom margin
+ * </lc-typography>
+ *
+ * <lc-typography variant="caption" color="secondary" lineClamp="2">
+ *   This is a caption that will be truncated after 2 lines...
+ * </lc-typography>
+ * ```
+ */
+declare class TypographyComponent {
+    /**
+     * Typography variant determining the HTML element and default styles
+     * - h1-h6: Heading elements with corresponding sizes
+     * - body1: Default paragraph text (16px)
+     * - body2: Smaller body text (14px)
+     * - subtitle1: Larger subtitle (18px)
+     * - subtitle2: Smaller subtitle (14px)
+     * - caption: Small helper text (12px)
+     * - overline: Uppercase accent text (10px)
+     * @default 'body1'
+     */
+    variant: _angular_core.InputSignal<"caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "subtitle1" | "subtitle2" | "overline">;
+    /**
+     * Text alignment
+     * @default 'left'
+     */
+    align: _angular_core.InputSignal<"center" | "left" | "right" | "justify">;
+    /**
+     * Text color using semantic color tokens
+     * @default 'primary'
+     */
+    color: _angular_core.InputSignal<"error" | "primary" | "secondary" | "warning" | "info" | "disabled" | "success">;
+    /**
+     * Font weight
+     * @default 'regular'
+     */
+    weight: _angular_core.InputSignal<"regular" | "medium" | "semibold" | "bold">;
+    /**
+     * Text transform
+     * @default 'none'
+     */
+    transform: _angular_core.InputSignal<"none" | "uppercase" | "lowercase" | "capitalize">;
+    /**
+     * Prevent text wrapping (applies ellipsis on overflow)
+     * @default false
+     */
+    noWrap: _angular_core.InputSignal<boolean>;
+    /**
+     * Limit text to a specific number of lines (1-6)
+     * Uses CSS line-clamp for multi-line truncation
+     * @default undefined
+     */
+    lineClamp: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Add bottom margin (1rem) for spacing between elements
+     * @default false
+     */
+    gutterBottom: _angular_core.InputSignal<boolean>;
+    /**
+     * Compute the HTML element tag based on variant
+     */
+    readonly elementTag: _angular_core.Signal<string>;
+    /**
+     * Compute all CSS classes based on inputs
+     */
+    readonly typographyClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TypographyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TypographyComponent, "lc-typography", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "weight": { "alias": "weight"; "required": false; "isSignal": true; }; "transform": { "alias": "transform"; "required": false; "isSignal": true; }; "noWrap": { "alias": "noWrap"; "required": false; "isSignal": true; }; "lineClamp": { "alias": "lineClamp"; "required": false; "isSignal": true; }; "gutterBottom": { "alias": "gutterBottom"; "required": false; "isSignal": true; }; }, {}, never, ["*", "*", "*", "*", "*", "*", "*", "*"], true, never>;
+}
+
+type DateValue = Date | string | null;
+/**
+ * DatePicker component for date selection with calendar.
+ *
+ * @example
+ * ```html
+ * <lc-datepicker
+ *   variant="outline"
+ *   size="md"
+ *   placeholder="Select a date"
+ *   [(ngModel)]="selectedDate"
+ * ></lc-datepicker>
+ * ```
+ */
+declare class DatepickerComponent implements ControlValueAccessor {
+    datepickerInput: ElementRef;
+    /**
+     * Visual variant of the datepicker
+     */
+    variant: 'outline' | 'filled';
+    /**
+     * Size of the datepicker
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Whether the datepicker is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the datepicker is in error state
+     */
+    error: boolean;
+    /**
+     * Whether the datepicker is required
+     */
+    required: boolean;
+    /**
+     * Whether the datepicker is readonly
+     */
+    readonly: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Helper text displayed below the datepicker
+     */
+    helperText: string;
+    /**
+     * Error message displayed when error is true
+     */
+    errorMessage: string;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel: string | undefined;
+    /**
+     * Date format string (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY')
+     */
+    format: string;
+    /**
+     * Minimum selectable date
+     */
+    minDate: Date | undefined;
+    /**
+     * Maximum selectable date
+     */
+    maxDate: Date | undefined;
+    /**
+     * Array of disabled dates
+     */
+    disabledDates: Date[];
+    /**
+     * Whether to disable weekends
+     */
+    disableWeekends: boolean;
+    /**
+     * Emitted when date selection changes
+     */
+    readonly dateChange: EventEmitter<Date | null>;
+    /**
+     * Emitted when calendar opens
+     */
+    readonly opened: EventEmitter<void>;
+    /**
+     * Emitted when calendar closes
+     */
+    readonly closed: EventEmitter<void>;
+    selectedDate: _angular_core.WritableSignal<Date | null>;
+    isOpen: _angular_core.WritableSignal<boolean>;
+    currentMonth: _angular_core.WritableSignal<number>;
+    currentYear: _angular_core.WritableSignal<number>;
+    inputValue: _angular_core.WritableSignal<string>;
+    formattedDate: _angular_core.Signal<string>;
+    weekDays: string[];
+    monthNames: string[];
+    currentMonthName: _angular_core.Signal<string>;
+    private elementRef;
+    private onChange;
+    private onTouched;
+    /**
+     * Toggle calendar open/closed
+     */
+    toggle(): void;
+    /**
+     * Open calendar
+     */
+    open(): void;
+    /**
+     * Close calendar
+     */
+    close(): void;
+    /**
+     * Select a date
+     */
+    selectDate(date: Date): void;
+    /**
+     * Clear selected date
+     */
+    clear(): void;
+    /**
+     * Check if a date is disabled
+     */
+    isDateDisabled(date: Date): boolean;
+    /**
+     * Check if date is today
+     */
+    isToday(date: Date): boolean;
+    /**
+     * Check if date is selected
+     */
+    isSelectedDate(date: Date): boolean;
+    /**
+     * Generate calendar days for current month
+     */
+    generateCalendarDays(): Date[];
+    /**
+     * Navigate to next month
+     */
+    nextMonth(): void;
+    /**
+     * Navigate to previous month
+     */
+    previousMonth(): void;
+    /**
+     * Navigate to today
+     */
+    goToToday(): void;
+    /**
+     * Handle input change (manual date entry)
+     */
+    onInputChange(value: string): void;
+    /**
+     * Handle keyboard navigation
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handle blur event
+     */
+    onBlur(): void;
+    /**
+     * Handle click outside
+     */
+    onClickOutside(): void;
+    writeValue(value: DateValue): void;
+    registerOnChange(fn: (value: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Get computed classes for the datepicker element
+     */
+    get datepickerClasses(): string;
+    /**
+     * Check if date is in current month
+     */
+    isCurrentMonth(date: Date): boolean;
+    /**
+     * Check if two dates are the same day
+     */
+    private isSameDate;
+    private formatDate;
+    private parseDate;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "lc-datepicker", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "format": { "alias": "format"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "disableWeekends": { "alias": "disableWeekends"; "required": false; }; }, { "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectOptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+type SelectValue = string | number | string[] | number[] | null;
+/**
+ * Select component for dropdown selection with single or multiple options.
+ *
+ * @example
+ * ```html
+ * <lc-select
+ *   [options]="options"
+ *   variant="outline"
+ *   size="md"
+ *   placeholder="Select an option"
+ *   [(ngModel)]="selectedValue"
+ * ></lc-select>
+ * ```
+ */
+declare class SelectComponent implements ControlValueAccessor {
+    selectTrigger: ElementRef;
+    /**
+     * Visual variant of the select
+     */
+    variant: 'outline' | 'filled';
+    /**
+     * Size of the select
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Whether the select is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the select is in error state
+     */
+    error: boolean;
+    /**
+     * Whether the select is required
+     */
+    required: boolean;
+    /**
+     * Whether the select is in loading state
+     */
+    loading: boolean;
+    /**
+     * Whether the select allows searching
+     */
+    searchable: boolean;
+    /**
+     * Whether multiple options can be selected
+     */
+    multiple: boolean;
+    /**
+     * Placeholder text when no option is selected
+     */
+    placeholder: string;
+    /**
+     * Helper text displayed below the select
+     */
+    helperText: string;
+    /**
+     * Error message displayed when error is true
+     */
+    errorMessage: string;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel: string | undefined;
+    /**
+     * Select options (flat list)
+     */
+    get options(): SelectOption[] | SelectOptionGroup[];
+    set options(v: SelectOption[] | SelectOptionGroup[]);
+    private _options;
+    /**
+     * Emitted when selection changes
+     */
+    readonly selectionChange: EventEmitter<SelectValue>;
+    /**
+     * Emitted when dropdown opens
+     */
+    readonly opened: EventEmitter<void>;
+    /**
+     * Emitted when dropdown closes
+     */
+    readonly closed: EventEmitter<void>;
+    value: _angular_core.WritableSignal<SelectValue>;
+    isOpen: _angular_core.WritableSignal<boolean>;
+    searchQuery: _angular_core.WritableSignal<string>;
+    highlightedIndex: _angular_core.WritableSignal<number>;
+    selectedLabel: _angular_core.Signal<string>;
+    displayValue: _angular_core.Signal<string>;
+    filteredOptions: _angular_core.Signal<SelectOption[]>;
+    private elementRef;
+    private onChange;
+    private onTouched;
+    /**
+     * Toggle dropdown open/closed
+     */
+    toggle(): void;
+    /**
+     * Open dropdown
+     */
+    open(): void;
+    /**
+     * Close dropdown
+     */
+    close(): void;
+    /**
+     * Select an option
+     */
+    selectOption(option: SelectOption): void;
+    /**
+     * Check if an option is selected
+     */
+    isSelected(option: SelectOption): boolean;
+    /**
+     * Clear selection
+     */
+    clear(): void;
+    /**
+     * Handle keyboard navigation
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handle blur event
+     */
+    onBlur(): void;
+    /**
+     * Handle click outside
+     */
+    onClickOutside(): void;
+    writeValue(value: SelectValue): void;
+    registerOnChange(fn: (value: SelectValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Get computed classes for the select element
+     */
+    get selectClasses(): string;
+    private findOptionByValue;
+    private flattenOptions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "lc-select", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "required": { "alias": "required"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "selectionChange": "selectionChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * Switch component for toggle functionality.
+ *
+ * @example
+ * ```html
+ * <lc-switch
+ *   variant="primary"
+ *   size="md"
+ *   label="Enable notifications"
+ *   [(ngModel)]="isEnabled"
+ * ></lc-switch>
+ * ```
+ */
+declare class SwitchComponent implements ControlValueAccessor {
+    /**
+     * Visual variant of the switch
+     */
+    variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * Size of the switch
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the switch is checked
+     */
+    checked: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the switch is required
+     */
+    required: boolean;
+    /**
+     * Whether the switch is in loading state
+     */
+    loading: boolean;
+    /**
+     * Label text
+     */
+    label: string;
+    /**
+     * Label position relative to switch
+     */
+    labelPosition: 'left' | 'right';
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel: string | undefined;
+    /**
+     * Emitted when checked state changes
+     */
+    readonly checkedChange: EventEmitter<boolean>;
+    private elementRef;
+    private onChange;
+    private onTouched;
+    /**
+     * Toggle the switch state
+     */
+    toggle(): void;
+    /**
+     * Handle click event
+     */
+    onClick(): void;
+    /**
+     * Handle keyboard navigation
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    writeValue(value: boolean | null | undefined): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Get computed classes for the switch element
+     */
+    get switchClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SwitchComponent, "lc-switch", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+}
+
+/**
+ * Textarea component for multi-line text input.
+ *
+ * @example
+ * ```html
+ * <lc-textarea
+ *   variant="outline"
+ *   size="md"
+ *   placeholder="Enter your message"
+ *   [(ngModel)]="message"
+ * ></lc-textarea>
+ * ```
+ */
+declare class TextareaComponent implements ControlValueAccessor, AfterViewInit {
+    private textareaElement;
+    /**
+     * Visual variant of the textarea
+     */
+    variant: 'outline' | 'filled';
+    /**
+     * Size of the textarea
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Whether the textarea is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the textarea is in error state
+     */
+    error: boolean;
+    /**
+     * Whether the textarea is required
+     */
+    required: boolean;
+    /**
+     * Whether the textarea is readonly
+     */
+    readonly: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Label text displayed above the textarea
+     */
+    label: string;
+    /**
+     * Helper text displayed below the textarea
+     */
+    helperText: string;
+    /**
+     * Error message displayed when error is true
+     */
+    errorMessage: string;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel: string | undefined;
+    /**
+     * Number of visible text rows
+     */
+    rows: number;
+    /**
+     * Maximum number of characters allowed
+     */
+    maxLength: number | undefined;
+    /**
+     * Whether to show character count
+     */
+    showCharacterCount: boolean;
+    /**
+     * Whether to automatically resize based on content
+     */
+    autoResize: boolean;
+    /**
+     * Minimum number of rows for auto-resize
+     */
+    minRows: number;
+    /**
+     * Maximum number of rows for auto-resize
+     */
+    maxRows: number | undefined;
+    /**
+     * Emitted when value changes
+     */
+    readonly valueChange: EventEmitter<string>;
+    value: _angular_core.WritableSignal<string>;
+    currentCharacterCount: _angular_core.Signal<number>;
+    characterCountText: _angular_core.Signal<string>;
+    isOverLimit: _angular_core.Signal<boolean>;
+    private elementRef;
+    private onChange;
+    private onTouched;
+    ngAfterViewInit(): void;
+    /**
+     * Handle input changes
+     */
+    onInput(value: string): void;
+    /**
+     * Handle blur event
+     */
+    onBlur(): void;
+    writeValue(value: string | null | undefined): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Get computed classes for the textarea element
+     */
+    get textareaClasses(): string;
+    private adjustHeight;
+    private calculateMinHeight;
+    private calculateMaxHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "lc-textarea", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "minRows": { "alias": "minRows"; "required": false; }; "maxRows": { "alias": "maxRows"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Password Input Component with Show/Hide Toggle and Strength Meter
+ *
+ * Per research.md Decision 7: Password Strength Indicator
+ *
+ * Features:
+ * - Show/Hide password toggle (eye icon)
+ * - Real-time password strength indicator (Weak/Fair/Good/Strong)
+ * - Visual strength meter bar with color coding
+ * - Validation feedback (length, uppercase, lowercase, digit, symbol)
+ * - Accessible ARIA attributes
+ * - Reactive Forms ControlValueAccessor implementation
+ *
+ * Strength Criteria:
+ * - Weak (0-25%): < 8 chars OR missing 3+ requirements
+ * - Fair (26-50%): 8+ chars, missing 2 requirements
+ * - Good (51-75%): 8+ chars, missing 1 requirement
+ * - Strong (76-100%): 8+ chars, all requirements met
+ *
+ * Requirements (Cognito password policy):
+ * - Minimum 8 characters
+ * - At least one uppercase letter (A-Z)
+ * - At least one lowercase letter (a-z)
+ * - At least one digit (0-9)
+ * - At least one symbol (!@#$%^&*()_+-=[]{}|;:,.<>?)
+ *
+ * Usage:
+ * ```html
+ * <lc-password-input
+ *   [formControl]="passwordControl"
+ *   label="Password"
+ *   placeholder="Enter your password"
+ *   [showStrengthMeter]="true"
+ * ></lc-password-input>
+ * ```
+ *
+ * User Story: US0 (User Registration)
+ */
+declare class PasswordInputComponent implements ControlValueAccessor {
+    label: string;
+    placeholder: string;
+    showStrengthMeter: boolean;
+    showRequirements: boolean;
+    disabled: boolean;
+    required: boolean;
+    error?: string;
+    readonly strengthChange: EventEmitter<PasswordStrength>;
+    value: string;
+    isPasswordVisible: boolean;
+    strength: PasswordStrength;
+    requirements: PasswordRequirement[];
+    private onChange;
+    private onTouched;
+    private cdr;
+    constructor();
+    /**
+     * ControlValueAccessor: Write value from form control
+     */
+    writeValue(value: string): void;
+    /**
+     * ControlValueAccessor: Register onChange callback
+     */
+    registerOnChange(fn: (value: string) => void): void;
+    /**
+     * ControlValueAccessor: Register onTouched callback
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * ControlValueAccessor: Set disabled state
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Toggle password visibility
+     */
+    togglePasswordVisibility(): void;
+    /**
+     * Handle input changes
+     */
+    onInput(event: Event): void;
+    /**
+     * Handle blur event
+     */
+    onBlur(): void;
+    /**
+     * Calculate password strength and update requirements
+     */
+    private updateStrength;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PasswordInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PasswordInputComponent, "lc-password-input", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "showStrengthMeter": { "alias": "showStrengthMeter"; "required": false; }; "showRequirements": { "alias": "showRequirements"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, { "strengthChange": "strengthChange"; }, never, never, true, never>;
+}
+/**
+ * Password strength information
+ */
+interface PasswordStrength {
+    score: number;
+    level: 'Weak' | 'Fair' | 'Good' | 'Strong';
+    percentage: number;
+}
+/**
+ * Individual password requirement
+ */
+interface PasswordRequirement {
+    label: string;
+    met: boolean;
+    icon: string;
+}
+
+/**
+ * Verification Code Input Component with 6 Separate Digit Inputs
+ *
+ * Per research.md Decision 8: Email Verification Code Format
+ *
+ * Features:
+ * - 6 separate input fields (one digit each)
+ * - Automatic focus advancement after entering digit
+ * - Backspace moves to previous input
+ * - Paste support (splits 6-digit code across inputs)
+ * - Accessible ARIA attributes
+ * - Reactive Forms ControlValueAccessor implementation
+ * - Auto-submit on complete (optional)
+ *
+ * Usage:
+ * ```html
+ * <lc-verification-code-input
+ *   [formControl]="codeControl"
+ *   label="Verification Code"
+ *   [autoSubmit]="true"
+ *   (complete)="onCodeComplete($event)"
+ * ></lc-verification-code-input>
+ * ```
+ *
+ * Cognito Email Format:
+ * - 6-digit numeric code (e.g., 123456)
+ * - Sent via email with click-to-verify link (?code=XXX)
+ * - Valid for 24 hours
+ *
+ * User Stories: US0 (Registration Email Verification), US2 (Password Reset)
+ */
+declare class VerificationCodeInputComponent implements ControlValueAccessor, AfterViewInit {
+    label: string;
+    length: number;
+    disabled: boolean;
+    required: boolean;
+    error?: string;
+    autoSubmit: boolean;
+    readonly complete: EventEmitter<string>;
+    digitInputs: QueryList<ElementRef<HTMLInputElement>>;
+    digits: string[];
+    private onChange;
+    private onTouched;
+    ngAfterViewInit(): void;
+    /**
+     * ControlValueAccessor: Write value from form control
+     */
+    writeValue(value: string): void;
+    /**
+     * ControlValueAccessor: Register onChange callback
+     */
+    registerOnChange(fn: (value: string) => void): void;
+    /**
+     * ControlValueAccessor: Register onTouched callback
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * ControlValueAccessor: Set disabled state
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Handle digit input
+     */
+    onDigitInput(event: Event, index: number): void;
+    /**
+     * Handle keydown events (backspace, arrow keys, paste)
+     */
+    onKeyDown(event: KeyboardEvent, index: number): void;
+    /**
+     * Handle paste event (split 6-digit code across inputs)
+     */
+    onPaste(event: ClipboardEvent): void;
+    /**
+     * Focus specific input by index
+     */
+    private focusInput;
+    /**
+     * Check if all digits entered
+     */
+    private isComplete;
+    /**
+     * Get complete verification code
+     */
+    private getCode;
+    /**
+     * Update form control value
+     */
+    private updateValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VerificationCodeInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VerificationCodeInputComponent, "lc-verification-code-input", never, { "label": { "alias": "label"; "required": false; }; "length": { "alias": "length"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; "autoSubmit": { "alias": "autoSubmit"; "required": false; }; }, { "complete": "complete"; }, never, never, true, never>;
+}
+
+/**
+ * Email input component with RFC 5322 validation.
+ *
+ * Extends the base input component with email-specific validation
+ * and provides visual feedback for valid/invalid email addresses.
+ *
+ * @example
+ * ```html
+ * <lc-email-input
+ *   label="Email Address"
+ *   placeholder="you@example.com"
+ *   [(ngModel)]="email"
+ *   [required]="true"
+ *   (validationChange)="handleValidation($event)"
+ * ></lc-email-input>
+ * ```
+ */
+declare class EmailInputComponent implements ControlValueAccessor {
+    /**
+     * Input label (displayed above input)
+     * @default 'Email'
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Placeholder text
+     * @default 'you@example.com'
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Size of the input
+     * @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg">;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the input is read-only
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the input is required
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * Custom error message (overrides validation error)
+     */
+    readonly error: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Helper text to display below input
+     */
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether to show validation feedback immediately
+     * @default false (validates on blur)
+     */
+    readonly validateOnInput: _angular_core.InputSignal<boolean>;
+    /**
+     * ARIA label for accessibility
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emitted when email value changes
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Emitted when validation state changes
+     */
+    readonly validationChange: _angular_core.OutputEmitterRef<{
+        valid: boolean;
+        error?: string;
+    }>;
+    /**
+     * Emitted when input receives focus
+     */
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when input loses focus
+     */
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when Enter key is pressed
+     */
+    readonly enterPressed: _angular_core.OutputEmitterRef<void>;
+    readonly value: _angular_core.WritableSignal<string>;
+    private readonly touched;
+    private readonly _formDisabled;
+    /**
+     * RFC 5322 compliant email regex (simplified but robust)
+     * Validates: local-part@domain
+     * - Local part: alphanumeric, dots, hyphens, underscores, plus signs
+     * - Domain: alphanumeric, dots, hyphens with valid TLD
+     */
+    private readonly EMAIL_REGEX;
+    private onChange;
+    private onTouched;
+    /**
+     * Computed validation state
+     */
+    protected readonly isValid: _angular_core.Signal<boolean>;
+    /**
+     * Computed error message
+     */
+    protected readonly validationError: _angular_core.Signal<string | undefined>;
+    /**
+     * Computed disabled state
+     */
+    protected get isDisabled(): boolean;
+    constructor();
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Public method to trigger validation
+     */
+    validate(): boolean;
+    /**
+     * Public method to reset validation state
+     */
+    resetValidation(): void;
+    /**
+     * Handles value changes from base input
+     */
+    protected onValueChange(newValue: string): void;
+    /**
+     * Handles focus events
+     */
+    protected onFocus(): void;
+    /**
+     * Handles blur events
+     */
+    protected onBlur(): void;
+    /**
+     * Handles Enter key press
+     */
+    protected onEnterPressed(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmailInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmailInputComponent, "lc-email-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "validateOnInput": { "alias": "validateOnInput"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "validationChange": "validationChange"; "focused": "focused"; "blurred": "blurred"; "enterPressed": "enterPressed"; }, never, never, true, never>;
+}
+
+type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+declare class ContainerComponent {
+    size: _angular_core.InputSignal<ContainerSize>;
+    noPadding: _angular_core.InputSignal<boolean>;
+    paddingY: _angular_core.InputSignal<boolean>;
+    get hostClasses(): string;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContainerComponent, "lc-container", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "noPadding": { "alias": "noPadding"; "required": false; "isSignal": true; }; "paddingY": { "alias": "paddingY"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type SectionSpacing = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type SectionBackground = 'none' | 'gray' | 'primary' | 'secondary';
+declare class SectionComponent {
+    spacing: _angular_core.InputSignal<SectionSpacing>;
+    background: _angular_core.InputSignal<SectionBackground>;
+    noPaddingX: _angular_core.InputSignal<boolean>;
+    noPaddingY: _angular_core.InputSignal<boolean>;
+    get hostClasses(): string;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionComponent, "lc-section", never, { "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "noPaddingX": { "alias": "noPaddingX"; "required": false; "isSignal": true; }; "noPaddingY": { "alias": "noPaddingY"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type SpacerSize = 'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare class SpacerComponent {
+    size: _angular_core.InputSignal<SpacerSize>;
+    get hostClasses(): string;
+    get ariaHidden(): string;
+    get tabIndex(): number;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpacerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpacerComponent, "lc-spacer", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type StackDirection = 'vertical' | 'horizontal';
+type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+declare class StackComponent {
+    direction: _angular_core.InputSignal<StackDirection>;
+    gap: _angular_core.InputSignal<StackGap>;
+    align: _angular_core.InputSignal<StackAlign>;
+    justify: _angular_core.InputSignal<StackJustify>;
+    wrap: _angular_core.InputSignal<boolean>;
+    fullWidth: _angular_core.InputSignal<boolean>;
+    get hostClasses(): string;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StackComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StackComponent, "lc-stack", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type AlertVariant = 'success' | 'error' | 'warning' | 'info';
+/**
+ * Alert component for inline notifications.
+ *
+ * @example
+ * ```html
+ * <lc-alert variant="success" title="Success!" [dismissible]="true">
+ *   Your changes have been saved.
+ * </lc-alert>
+ * ```
+ */
+declare class AlertComponent {
+    /**
+     * Visual variant of the alert
+     * @default 'info'
+     */
+    variant: _angular_core.InputSignal<AlertVariant>;
+    /**
+     * Alert title (optional)
+     */
+    title: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Alert message (alternative to content projection)
+     */
+    message: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Icon to display (defaults based on variant)
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether to show icon
+     * @default true
+     */
+    showIcon: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the alert can be dismissed
+     * @default false
+     */
+    dismissible: _angular_core.InputSignal<boolean>;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emitted when alert is dismissed
+     */
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Internal visibility state
+     */
+    protected visible: _angular_core.WritableSignal<boolean>;
+    /**
+     * Computed host classes
+     */
+    protected hostClasses: _angular_core.Signal<string>;
+    /**
+     * Computed container classes
+     */
+    protected containerClasses: _angular_core.Signal<string>;
+    /**
+     * Computed ARIA live region priority
+     */
+    protected ariaLive: _angular_core.Signal<"assertive" | "polite">;
+    /**
+     * Computed default icon based on variant
+     */
+    protected defaultIcon: _angular_core.Signal<string>;
+    /**
+     * Dismiss the alert
+     */
+    dismiss(): void;
+    /**
+     * Handle close button click
+     */
+    protected onCloseClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "lc-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Error severity levels
+ */
+type ErrorSeverity = 'error' | 'warning' | 'info';
+/**
+ * Error display component for authentication error messages.
+ *
+ * Automatically maps Cognito error codes to user-friendly messages
+ * and displays them with appropriate severity styling.
+ *
+ * @example
+ * ```html
+ * <!-- Display Cognito error -->
+ * <lc-error-display
+ *   [error]="cognitoError"
+ *   [dismissible]="true"
+ * ></lc-error-display>
+ *
+ * <!-- Display custom error -->
+ * <lc-error-display
+ *   message="Invalid credentials"
+ *   severity="error"
+ * ></lc-error-display>
+ * ```
+ */
+declare class ErrorDisplayComponent {
+    /**
+     * Error object (Cognito or generic Error)
+     */
+    readonly error: _angular_core.InputSignal<Error | {
+        code?: string;
+        message?: string;
+    } | null | undefined>;
+    /**
+     * Custom error message (overrides error.message)
+     */
+    readonly message: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Error severity level
+     * @default 'error'
+     */
+    readonly severity: _angular_core.InputSignal<ErrorSeverity>;
+    /**
+     * Title for the error display
+     */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the error can be dismissed
+     * @default true
+     */
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show icon
+     * @default true
+     */
+    readonly showIcon: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to automatically hide after a delay
+     * @default false
+     */
+    readonly autoDismiss: _angular_core.InputSignal<boolean>;
+    /**
+     * Auto-dismiss delay in milliseconds
+     * @default 5000
+     */
+    readonly autoDismissDelay: _angular_core.InputSignal<number>;
+    /**
+     * Internal visibility state
+     */
+    protected readonly visible: _angular_core.WritableSignal<boolean>;
+    /**
+     * Computed error message
+     */
+    protected readonly errorMessage: _angular_core.Signal<string | undefined>;
+    /**
+     * Computed alert variant based on severity
+     */
+    protected readonly alertVariant: _angular_core.Signal<AlertVariant>;
+    /**
+     * Computed title for the error
+     */
+    protected readonly errorTitle: _angular_core.Signal<string | undefined>;
+    /**
+     * Auto-dismiss timer
+     */
+    private autoDismissTimer?;
+    constructor();
+    /**
+     * Handle alert dismissed
+     */
+    protected onDismissed(): void;
+    /**
+     * Clear auto-dismiss timer
+     */
+    private clearAutoDismissTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ErrorDisplayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ErrorDisplayComponent, "lc-error-display", never, { "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "autoDismiss": { "alias": "autoDismiss"; "required": false; "isSignal": true; }; "autoDismissDelay": { "alias": "autoDismissDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastConfig {
+    message: string;
+    variant?: ToastVariant;
+    position?: ToastPosition;
+    duration?: number;
+    showCloseButton?: boolean;
+    action?: ToastAction;
+}
+interface Toast extends Required<Omit<ToastConfig, 'action'>> {
+    id: string;
+    action?: ToastAction;
+}
+/**
+ * Toast service for showing ephemeral notifications.
+ *
+ * @example
+ * ```typescript
+ * constructor(private toastService: ToastService) {}
+ *
+ * showSuccess() {
+ *   this.toastService.show({
+ *     message: 'Changes saved successfully!',
+ *     variant: 'success',
+ *     duration: 3000
+ *   });
+ * }
+ * ```
+ */
+declare class ToastService {
+    /**
+     * Public readonly signal for toasts
+     */
+    readonly toasts: Signal<readonly Toast[]>;
+    /**
+     * Internal signal for toast list
+     */
+    private readonly toastList;
+    private readonly MAX_TOASTS;
+    private toastIdCounter;
+    private activeTimeouts;
+    constructor();
+    /**
+     * Show a toast notification
+     */
+    show(config: ToastConfig): string;
+    /**
+     * Close a specific toast
+     */
+    close(id: string): void;
+    /**
+     * Close all toasts
+     */
+    closeAll(): void;
+    /**
+     * Generate unique toast ID
+     */
+    private generateId;
+    /**
+     * Remove a toast from the list
+     */
+    private removeToast;
+    /**
+     * Clear timeout for a toast
+     */
+    private clearTimeout;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ToastService>;
+}
+
+/**
+ * Toast component for displaying ephemeral notifications.
+ * Typically used via ToastService, not directly.
+ *
+ * @example
+ * ```typescript
+ * // Use via service
+ * constructor(private toastService: ToastService) {}
+ *
+ * showToast() {
+ *   this.toastService.show({
+ *     message: 'Success!',
+ *     variant: 'success'
+ *   });
+ * }
+ * ```
+ */
+declare class ToastComponent {
+    /**
+     * Toast data
+     */
+    toast: _angular_core.InputSignal<Toast>;
+    /**
+     * Emitted when toast is closed
+     */
+    readonly closed: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Computed host classes
+     */
+    protected hostClasses: _angular_core.Signal<string>;
+    /**
+     * Computed container classes
+     */
+    protected containerClasses: _angular_core.Signal<string>;
+    /**
+     * Computed ARIA role
+     */
+    protected ariaRole: _angular_core.Signal<"alert" | "status">;
+    /**
+     * Computed ARIA live region priority
+     */
+    protected ariaLive: _angular_core.Signal<"assertive" | "polite">;
+    /**
+     * Computed default icon based on variant
+     */
+    protected defaultIcon: _angular_core.Signal<string>;
+    /**
+     * Handle close button click
+     */
+    protected onCloseClick(event: Event): void;
+    /**
+     * Handle action button click
+     */
+    protected onActionClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastComponent, "lc-toast", never, { "toast": { "alias": "toast"; "required": true; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+}
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Modal dialog component for focused user interactions.
+ * Uses FocusTrap for accessibility.
+ *
+ * @example
+ * ```html
+ * <lc-modal [(open)]="isOpen" size="md" [closeOnBackdropClick]="true">
+ *   <div slot="header">
+ *     <h2>Modal Title</h2>
+ *   </div>
+ *   <div slot="body">
+ *     <p>Modal content goes here</p>
+ *   </div>
+ *   <div slot="footer">
+ *     <lc-button (click)="closeModal()">Close</lc-button>
+ *   </div>
+ * </lc-modal>
+ * ```
+ */
+declare class ModalComponent implements OnDestroy {
+    modalContent?: ElementRef<HTMLElement>;
+    /**
+     * Whether the modal is open (input from parent)
+     * @default false
+     */
+    open: _angular_core.InputSignal<boolean>;
+    /**
+     * Modal size
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<ModalSize>;
+    /**
+     * Whether clicking backdrop closes modal
+     * @default true
+     */
+    closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether pressing Escape closes modal
+     * @default true
+     */
+    closeOnEscape: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show close button in header
+     * @default true
+     */
+    showCloseButton: _angular_core.InputSignal<boolean>;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ARIA labelledby ID
+     */
+    ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ARIA describedby ID
+     */
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emitted when modal opens
+     */
+    readonly modalOpened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when modal closes
+     */
+    readonly modalClosed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Two-way binding for open state
+     */
+    readonly openChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Emitted when backdrop is clicked
+     */
+    readonly backdropClicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    /**
+     * Internal open state signal (protected for AOT)
+     */
+    protected _open: _angular_core.WritableSignal<boolean>;
+    /**
+     * Computed modal classes
+     */
+    protected modalClasses: _angular_core.Signal<string>;
+    private readonly focusTrapFactory;
+    private focusTrap?;
+    private originalOverflow?;
+    private escapeListener?;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Open the modal programmatically
+     */
+    openModal(): void;
+    /**
+     * Close the modal programmatically
+     */
+    closeModal(): void;
+    /**
+     * Handle backdrop click
+     */
+    protected onBackdropClick(event: MouseEvent): void;
+    /**
+     * Handle close button click
+     */
+    protected onCloseClick(event: Event): void;
+    /**
+     * Handle Escape key press
+     */
+    private handleEscapeKey;
+    /**
+     * Show the modal
+     */
+    private showModal;
+    /**
+     * Hide the modal
+     */
+    private hideModal;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent, "lc-modal", never, { "open": { "alias": "open"; "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; }; }, { "modalOpened": "modalOpened"; "modalClosed": "modalClosed"; "openChange": "openChange"; "backdropClicked": "backdropClicked"; }, never, ["[slot='header']", "[slot='body']", "*", "[slot='footer']"], true, never>;
+}
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Internal tooltip content component
+ */
+declare class TooltipContentComponent {
+    content: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipContentComponent, "lc-tooltip-content", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Tooltip directive for displaying contextual information.
+ * Uses Angular CDK Overlay for positioning.
+ *
+ * @example
+ * ```html
+ * <button lcTooltip="Click me!" tooltipPosition="top">
+ *   Hover or focus
+ * </button>
+ * ```
+ */
+declare class TooltipDirective implements OnDestroy {
+    /**
+     * Tooltip content text
+     */
+    lcTooltip: _angular_core.InputSignal<string>;
+    /**
+     * Tooltip position
+     * @default 'top'
+     */
+    tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
+    /**
+     * Show delay in milliseconds
+     * @default 0
+     */
+    tooltipShowDelay: _angular_core.InputSignal<number>;
+    /**
+     * Hide delay in milliseconds
+     * @default 0
+     */
+    tooltipHideDelay: _angular_core.InputSignal<number>;
+    /**
+     * Whether tooltip is disabled
+     * @default false
+     */
+    tooltipDisabled: _angular_core.InputSignal<boolean>;
+    private overlayRef?;
+    private tooltipRef?;
+    private showTimeout?;
+    private hideTimeout?;
+    private tooltipId?;
+    private readonly elementRef;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly renderer;
+    ngOnDestroy(): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onFocus(): void;
+    onBlur(): void;
+    /**
+     * Show tooltip programmatically
+     */
+    show(): void;
+    /**
+     * Hide tooltip programmatically
+     */
+    hide(): void;
+    /**
+     * Toggle tooltip visibility
+     */
+    toggle(): void;
+    private showWithDelay;
+    private hideWithDelay;
+    private createOverlay;
+    private getPositions;
+    private clearTimeouts;
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[lcTooltip]", never, { "lcTooltip": { "alias": "lcTooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipShowDelay": { "alias": "tooltipShowDelay"; "required": false; "isSignal": true; }; "tooltipHideDelay": { "alias": "tooltipHideDelay"; "required": false; "isSignal": true; }; "tooltipDisabled": { "alias": "tooltipDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface BreadcrumbItem {
+    label: string;
+    url?: string;
+}
+type BreadcrumbSize = 'sm' | 'md' | 'lg';
+declare class BreadcrumbsComponent {
+    items: _angular_core.WritableSignal<BreadcrumbItem[]>;
+    separator: _angular_core.WritableSignal<string>;
+    maxItems: _angular_core.WritableSignal<number>;
+    size: _angular_core.WritableSignal<BreadcrumbSize>;
+    ariaLabel: _angular_core.WritableSignal<string>;
+    breadcrumbClasses: _angular_core.Signal<string>;
+    visibleItems: _angular_core.Signal<BreadcrumbItem[]>;
+    set itemsInput(value: BreadcrumbItem[]);
+    set separatorInput(value: string);
+    set maxItemsInput(value: number);
+    set sizeInput(value: BreadcrumbSize);
+    set ariaLabelInput(value: string);
+    isLastItem(index: number): boolean;
+    isEllipsis(item: BreadcrumbItem): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbsComponent, "lc-breadcrumbs", never, { "itemsInput": { "alias": "itemsInput"; "required": false; }; "separatorInput": { "alias": "separatorInput"; "required": false; }; "maxItemsInput": { "alias": "maxItemsInput"; "required": false; }; "sizeInput": { "alias": "sizeInput"; "required": false; }; "ariaLabelInput": { "alias": "ariaLabelInput"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * AppHeaderComponent - Global application header for Life-Cockpit shell
+ *
+ * Features:
+ * - Clickable logo for home navigation
+ * - Optional title and subtitle display
+ * - User profile dropdown with avatar, name, email, optional Profile link, and Logout
+ * - Optional theme toggle button in header
+ * - Hamburger menu toggle for mobile sidebar
+ * - OnPush change detection for performance
+ *
+ * @example
+ * ```html
+ * <lc-header
+ *   [logo]="'/assets/logo.svg'"
+ *   [title]="'Life-Cockpit'"
+ *   [subtitle]="'User Profile'"
+ *   [userName]="'John Doe'"
+ *   [userEmail]="'user@example.com'"
+ *   [showHamburger]="true"
+ *   [showThemeButton]="true"
+ *   [showProfileMenuItem]="true"
+ *   (hamburgerClick)="toggleSidebar()"
+ *   (themeToggleClick)="toggleTheme()"
+ *   (profileClick)="navigateToProfile()"
+ *   (logoutClick)="handleLogout()"
+ * />
+ * ```
+ */
+declare class HeaderComponent {
+    /**
+     * Logo image source URL
+     */
+    logo: string;
+    /**
+     * Optional title to display next to logo
+     */
+    title: string;
+    /**
+     * Optional subtitle to display under title
+     */
+    subtitle: string;
+    /**
+     * User email to display in profile dropdown
+     */
+    userEmail: string;
+    /**
+     * User full name for avatar initials
+     * @example 'John Doe'
+     */
+    userName: string;
+    /**
+     * Whether to show hamburger menu icon (for mobile sidebar toggle)
+     */
+    showHamburger: boolean;
+    /**
+     * Whether to show theme toggle button in header
+     */
+    showThemeButton: boolean;
+    /**
+     * Whether to show the Profile menu item in the user dropdown
+     * @default true
+     */
+    showProfileMenuItem: boolean;
+    /**
+     * Emitted when hamburger menu icon is clicked
+     */
+    readonly hamburgerClick: EventEmitter<void>;
+    /**
+     * Emitted when theme toggle is clicked
+     */
+    readonly themeToggleClick: EventEmitter<void>;
+    /**
+     * Emitted when Logout is clicked in profile dropdown
+     */
+    readonly logoutClick: EventEmitter<void>;
+    /**
+     * Emitted when Profile menu item is clicked
+     */
+    readonly profileClick: EventEmitter<void>;
+    protected readonly themeService: ThemeService;
+    /**
+     * Get menu items for profile dropdown
+     */
+    protected readonly menuItems: _angular_core.Signal<MenuItem[]>;
+    /**
+     * Dropdown open state (using Angular signals)
+     */
+    private readonly dropdownOpen;
+    /**
+     * Get dropdown open state
+     */
+    isDropdownOpen(): boolean;
+    /**
+     * Toggle profile dropdown visibility
+     */
+    toggleDropdown(): void;
+    /**
+     * Close profile dropdown
+     */
+    closeDropdown(): void;
+    /**
+     * Handle hamburger click
+     */
+    onHamburgerClick(): void;
+    /**
+     * Handle theme button click (separate button, not in menu)
+     */
+    onThemeButtonClick(): void;
+    /**
+     * Handle logout click
+     */
+    onLogoutClick(): void;
+    /**
+     * Handle profile click
+     */
+    onProfileClick(): void;
+    /**
+     * Handle menu item click
+     */
+    onMenuItemClick(item: MenuItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderComponent, "lc-header", never, { "logo": { "alias": "logo"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "userEmail": { "alias": "userEmail"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "showHamburger": { "alias": "showHamburger"; "required": false; }; "showThemeButton": { "alias": "showThemeButton"; "required": false; }; "showProfileMenuItem": { "alias": "showProfileMenuItem"; "required": false; }; }, { "hamburgerClick": "hamburgerClick"; "themeToggleClick": "themeToggleClick"; "logoutClick": "logoutClick"; "profileClick": "profileClick"; }, never, never, true, never>;
+}
+
+type PaginationSize = 'sm' | 'md' | 'lg';
+/**
+ * Pagination component for navigating through pages of content.
+ *
+ * Features:
+ * - Configurable page size
+ * - Previous/Next navigation
+ * - Direct page number access
+ * - Ellipsis for large page ranges
+ * - Size variants (sm, md, lg)
+ * - Accessible with ARIA attributes
+ * - Optional item count display
+ *
+ * @example
+ * ```html
+ * <lc-pagination
+ *   [currentPageInput]="currentPage"
+ *   [totalItemsInput]="totalItems"
+ *   [pageSizeInput]="10"
+ *   (pageChange)="onPageChange($event)"
+ * ></lc-pagination>
+ * ```
+ */
+declare class PaginationComponent {
+    currentPage: _angular_core.WritableSignal<number>;
+    totalItems: _angular_core.WritableSignal<number>;
+    pageSize: _angular_core.WritableSignal<number>;
+    size: _angular_core.WritableSignal<PaginationSize>;
+    maxVisiblePages: _angular_core.WritableSignal<number>;
+    ariaLabel: _angular_core.WritableSignal<string>;
+    showInfo: _angular_core.WritableSignal<boolean>;
+    readonly pageChange: EventEmitter<number>;
+    totalPages: _angular_core.Signal<number>;
+    firstItemIndex: _angular_core.Signal<number>;
+    lastItemIndex: _angular_core.Signal<number>;
+    isFirstPage: _angular_core.Signal<boolean>;
+    isLastPage: _angular_core.Signal<boolean>;
+    paginationClasses: _angular_core.Signal<string>;
+    /**
+     * Calculate visible page numbers with ellipsis support
+     * Returns an array where -1 represents an ellipsis
+     */
+    visiblePages: _angular_core.Signal<number[]>;
+    set currentPageInput(value: number);
+    set totalItemsInput(value: number);
+    set pageSizeInput(value: number);
+    set sizeInput(value: PaginationSize);
+    set maxVisiblePagesInput(value: number);
+    set ariaLabelInput(value: string);
+    set showInfoInput(value: boolean);
+    goToPreviousPage(): void;
+    goToNextPage(): void;
+    goToPage(page: number): void;
+    isCurrentPage(page: number): boolean;
+    isEllipsis(page: number): boolean;
+    shouldRender(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PaginationComponent, "lc-pagination", never, { "currentPageInput": { "alias": "currentPageInput"; "required": false; }; "totalItemsInput": { "alias": "totalItemsInput"; "required": false; }; "pageSizeInput": { "alias": "pageSizeInput"; "required": false; }; "sizeInput": { "alias": "sizeInput"; "required": false; }; "maxVisiblePagesInput": { "alias": "maxVisiblePagesInput"; "required": false; }; "ariaLabelInput": { "alias": "ariaLabelInput"; "required": false; }; "showInfoInput": { "alias": "showInfoInput"; "required": false; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
+}
+
+type SidenavPosition = 'left' | 'right';
+type SidenavMode = 'drawer' | 'docked';
+/**
+ * Sidenav Component
+ *
+ * A navigation component that can work as either a drawer (overlay) or
+ * a docked (persistent) sidebar. Supports section headlines, collapsible
+ * groups, keyboard navigation, and accessibility features.
+ *
+ * @example Drawer mode (default — overlay that slides in)
+ * ```html
+ * <lc-sidenav
+ *   [isOpen]="isOpen"
+ *   mode="drawer"
+ *   (closed)="handleClose()">
+ * </lc-sidenav>
+ * ```
+ *
+ * @example Docked mode (persistent sidebar that stays open)
+ * ```html
+ * <lc-sidenav
+ *   [isOpen]="sidebarOpen"
+ *   mode="docked"
+ *   [items]="navItems"
+ *   (closed)="sidebarOpen = false">
+ * </lc-sidenav>
+ * ```
+ */
+declare class SidenavComponent {
+    /** Whether the sidenav is open */
+    isOpen: _angular_core.WritableSignal<boolean>;
+    /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
+    mode: _angular_core.WritableSignal<SidenavMode>;
+    /** Position of the sidenav (left or right) */
+    position: _angular_core.WritableSignal<SidenavPosition>;
+    /** Width of the sidenav drawer */
+    width: _angular_core.WritableSignal<string>;
+    /** ARIA label for the sidenav */
+    ariaLabel: _angular_core.WritableSignal<string>;
+    /** Whether to show the overlay backdrop */
+    hasOverlay: _angular_core.WritableSignal<boolean>;
+    /** Navigation items to display */
+    items: _angular_core.WritableSignal<NavigationItem[]>;
+    /** Current active route for highlighting */
+    activeRoute: _angular_core.WritableSignal<string>;
+    /** Track which parent items are expanded */
+    expandedItems: _angular_core.WritableSignal<Set<string>>;
+    /**
+     * Computed sorted navigation items by displayOrder
+     */
+    sortedItems: _angular_core.Signal<NavigationItem[]>;
+    /**
+     * Input setter for isOpen
+     */
+    set isOpenInput(value: boolean);
+    /**
+     * Input setter for mode
+     */
+    set modeInput(value: SidenavMode);
+    /**
+     * Input setter for position
+     */
+    set positionInput(value: SidenavPosition);
+    /**
+     * Input setter for width
+     */
+    set widthInput(value: string);
+    /**
+     * Input setter for ariaLabel
+     */
+    set ariaLabelInput(value: string);
+    /**
+     * Input setter for hasOverlay
+     */
+    set hasOverlayInput(value: boolean);
+    /**
+     * Input setter for navigation items
+     */
+    set itemsInput(value: NavigationItem[]);
+    /**
+     * Input setter for active route
+     */
+    set activeRouteInput(value: string);
+    /**
+     * Event emitted when the sidenav should close
+     */
+    readonly closed: EventEmitter<void>;
+    /**
+     * Event emitted when a navigation item is clicked
+     */
+    readonly itemClicked: EventEmitter<NavigationItem>;
+    /**
+     * Computed CSS classes for the sidenav
+     */
+    sidenavClasses: _angular_core.Signal<string>;
+    /**
+     * Computed inline styles for the sidenav
+     */
+    sidenavStyles: _angular_core.Signal<{
+        width: string;
+    }>;
+    /**
+     * Handle close action
+     */
+    handleClose(): void;
+    /**
+     * Handle navigation item click
+     */
+    handleItemClick(item: NavigationItem): void;
+    /**
+     * Check if an item is active
+     */
+    isItemActive(item: NavigationItem): boolean;
+    /**
+     * Check if a parent item has an active child
+     */
+    hasActiveChild(item: NavigationItem): boolean;
+    /**
+     * Toggle expansion of a parent item
+     */
+    toggleExpanded(item: NavigationItem): void;
+    /**
+     * Check if an item is expanded
+     */
+    isExpanded(item: NavigationItem): boolean;
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidenavComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidenavComponent, "lc-sidenav", never, { "isOpenInput": { "alias": "isOpenInput"; "required": false; }; "modeInput": { "alias": "modeInput"; "required": false; }; "positionInput": { "alias": "positionInput"; "required": false; }; "widthInput": { "alias": "widthInput"; "required": false; }; "ariaLabelInput": { "alias": "ariaLabelInput"; "required": false; }; "hasOverlayInput": { "alias": "hasOverlayInput"; "required": false; }; "itemsInput": { "alias": "itemsInput"; "required": false; }; "activeRouteInput": { "alias": "activeRouteInput"; "required": false; }; }, { "closed": "closed"; "itemClicked": "itemClicked"; }, never, ["*"], true, never>;
+}
+
+type TabOrientation = 'horizontal' | 'vertical';
+/**
+ * Individual tab component
+ */
+declare class TabComponent {
+    /**
+     * Tab label displayed in tab button
+     */
+    label: string;
+    /**
+     * Whether the tab is disabled
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Optional icon name (Heroicons)
+     */
+    icon?: string;
+    /**
+     * Unique ID for accessibility
+     */
+    readonly id: string;
+    /**
+     * Unique ID for the panel
+     */
+    readonly panelId: string;
+    /**
+     * Template reference for tab content
+     */
+    template: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "lc-tab", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Tabs component for organizing content into switchable views.
+ *
+ * @example
+ * ```html
+ * <lc-tabs>
+ *   <lc-tab label="Account">Account settings</lc-tab>
+ *   <lc-tab label="Privacy">Privacy settings</lc-tab>
+ *   <lc-tab label="Security">Security settings</lc-tab>
+ * </lc-tabs>
+ * ```
+ */
+declare class TabsComponent implements AfterContentInit {
+    /**
+     * Orientation input property
+     * @default 'horizontal'
+     */
+    set orientation(value: TabOrientation);
+    get orientation(): TabOrientation;
+    /**
+     * Currently selected tab index
+     * @default 0
+     */
+    readonly selectedIndex: _angular_core.WritableSignal<number>;
+    /**
+     * Emitted when selected tab changes
+     */
+    readonly selectedIndexChange: EventEmitter<number>;
+    /**
+     * Tab components
+     */
+    tabs: QueryList<TabComponent>;
+    /**
+     * Tab list for template access
+     */
+    readonly tabList: _angular_core.Signal<TabComponent[]>;
+    /**
+     * CSS classes for tab list
+     */
+    readonly tabListClasses: _angular_core.Signal<{
+        'lc-tabs__list': boolean;
+        'lc-tabs--horizontal': boolean;
+        'lc-tabs--vertical': boolean;
+    }>;
+    /**
+     * Orientation of tabs (internal signal)
+     * @default 'horizontal'
+     */
+    private readonly _orientation;
+    /**
+     * Track tab registration
+     */
+    private registeredTabs;
+    /**
+     * Set selected index input
+     */
+    set selectedIndexInput(value: number);
+    constructor();
+    ngAfterContentInit(): void;
+    /**
+     * Register a tab
+     */
+    registerTab(tab: {
+        label: string;
+        disabled: boolean;
+    }): void;
+    /**
+     * Select a tab by index
+     */
+    selectTab(index: number): void;
+    /**
+     * Check if tab is selected
+     */
+    isSelected(index: number): boolean;
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Get tabindex for tab button
+     */
+    getTabIndex(index: number): number;
+    /**
+     * Get next enabled tab index (with wrapping)
+     */
+    private getNextEnabledTab;
+    /**
+     * Get previous enabled tab index (with wrapping)
+     */
+    private getPreviousEnabledTab;
+    /**
+     * Get first enabled tab index
+     */
+    private getFirstEnabledTab;
+    /**
+     * Get last enabled tab index
+     */
+    private getLastEnabledTab;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "lc-tabs", never, { "orientation": { "alias": "orientation"; "required": false; }; "selectedIndexInput": { "alias": "selectedIndexInput"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; }, ["tabs"], never, true, never>;
+}
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+/**
+ * Avatar Component
+ *
+ * A circular user representation component displaying images or initials.
+ * Supports status indicators and multiple sizes.
+ *
+ * @example
+ * ```html
+ * <!-- With image -->
+ * <lc-avatar src="https://example.com/avatar.jpg" alt="John Doe" />
+ *
+ * <!-- With initials -->
+ * <lc-avatar name="John Doe" />
+ *
+ * <!-- With status indicator -->
+ * <lc-avatar name="Jane Smith" status="online" size="lg" />
+ * ```
+ */
+declare class AvatarComponent {
+    /** Image source URL */
+    src: _angular_core.InputSignal<string | undefined>;
+    /** Alt text for the image */
+    alt: _angular_core.InputSignal<string | undefined>;
+    /** Full name for generating initials */
+    name: _angular_core.InputSignal<string | undefined>;
+    /** Size of the avatar */
+    size: _angular_core.InputSignal<AvatarSize>;
+    /** Status indicator */
+    status: _angular_core.InputSignal<AvatarStatus | undefined>;
+    /**
+     * Computed initials from name
+     */
+    initials: _angular_core.Signal<string>;
+    /**
+     * Computed CSS classes for the avatar
+     */
+    avatarClasses: _angular_core.Signal<string>;
+    /**
+     * Get aria-label for accessibility
+     */
+    ariaLabel: _angular_core.Signal<string>;
+    /**
+     * Check if image should be displayed
+     */
+    showImage: _angular_core.Signal<boolean | "" | undefined>;
+    /** Track if image failed to load */
+    protected imageError: _angular_core.WritableSignal<boolean>;
+    /**
+     * Handle image load error
+     */
+    onImageError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "lc-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Badge Component
+ *
+ * A small count and labeling component used to display status, notifications, or counts.
+ *
+ * @example
+ * ```html
+ * <lc-badge variant="primary" size="md">New</lc-badge>
+ * <lc-badge variant="error" size="sm" [rounded]="true">5</lc-badge>
+ * ```
+ */
+declare class BadgeComponent {
+    /** Visual variant of the badge */
+    variant: _angular_core.InputSignal<BadgeVariant>;
+    /** Size of the badge */
+    size: _angular_core.InputSignal<BadgeSize>;
+    /** Whether the badge has fully rounded corners (pill shape) */
+    rounded: _angular_core.InputSignal<boolean>;
+    /**
+     * Computed CSS classes for the badge
+     */
+    badgeClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "lc-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type TrendDirection = 'up' | 'down' | 'flat';
+/**
+ * MetricCard Component
+ *
+ * Displays a single KPI value with label, trend arrow, and optional icon.
+ * Built on top of `lc-card` (outlined variant) for consistent card styling.
+ *
+ * @example
+ * ```html
+ * <lc-metric-card
+ *   label="Portfolio Equity"
+ *   value="$125,430"
+ *   trend="up"
+ *   trendValue="+2.4%"
+ *   icon="arrow-trending-up"
+ * ></lc-metric-card>
+ * ```
+ */
+declare class MetricCardComponent {
+    /** Label displayed above the value */
+    label: _angular_core.InputSignal<string>;
+    /** Formatted value to display */
+    value: _angular_core.InputSignal<string>;
+    /** Trend direction for arrow indicator */
+    trend: _angular_core.InputSignal<TrendDirection>;
+    /** Formatted trend value (e.g., "+2.4%") */
+    trendValue: _angular_core.InputSignal<string>;
+    /** Optional Heroicon name */
+    icon: _angular_core.InputSignal<string>;
+    /** Trend arrow character */
+    trendArrow: _angular_core.Signal<"↑" | "↓" | "→">;
+    /** Tailwind classes for trend color */
+    trendClasses: _angular_core.Signal<"text-green-600 dark:text-green-400" | "text-red-600 dark:text-red-400" | "text-gray-500 dark:text-gray-400">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCardComponent, "lc-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; "trendValue": { "alias": "trendValue"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface ToggleOption {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+}
+/**
+ * ToggleGroup Component
+ *
+ * Binary or multi-option toggle with active state styling.
+ * Uses Tailwind classes with dark mode support.
+ *
+ * @example
+ * ```html
+ * <lc-toggle-group
+ *   [options]="[{value:'1D',label:'1D'},{value:'1h',label:'1H'}]"
+ *   [(selected)]="interval"
+ * ></lc-toggle-group>
+ * ```
+ */
+declare class ToggleGroupComponent {
+    /** Available toggle options */
+    options: _angular_core.InputSignal<readonly ToggleOption[]>;
+    /** Currently selected value (two-way binding) */
+    selected: _angular_core.ModelSignal<string>;
+    /** Size variant */
+    size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /** Emitted when selection changes */
+    selectionChange: _angular_core.OutputEmitterRef<string>;
+    /** Computed size class */
+    sizeClass: _angular_core.Signal<string>;
+    /** Select an option */
+    select(option: ToggleOption): void;
+    /** Check if an option is active */
+    isActive(option: ToggleOption): boolean;
+    /** Get button classes */
+    getButtonClasses(option: ToggleOption): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleGroupComponent, "lc-toggle-group", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+/**
+ * Directive for providing a custom template to render each list item.
+ *
+ * @example
+ * ```html
+ * <lc-list [items]="runs()" (itemClick)="onRunClick($event)">
+ *   <ng-template lcListItem let-item>
+ *     <lc-badge [variant]="getStatusVariant(item.status)">{{ item.status }}</lc-badge>
+ *     <span>{{ item.symbol }}</span>
+ *     <span class="text-sm text-neutral-500">{{ item.date }}</span>
+ *   </ng-template>
+ * </lc-list>
+ * ```
+ */
+declare class ListItemTemplateDirective {
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListItemTemplateDirective, "[lcListItem]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * List orientation type
+ */
+type ListOrientation = 'vertical' | 'horizontal';
+/**
+ * List visual variant
+ *  - default: flat rows (original)
+ *  - card: each item rendered as a mini-card with border, radius and shadow on hover
+ */
+type ListVariant = 'default' | 'card';
+/**
+ * List item interface
+ */
+interface ListItem {
+    /** Item label text */
+    label: string;
+    /** Optional icon identifier */
+    icon?: string;
+    /** Optional action label */
+    action?: string;
+    /** Item identifier */
+    id?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Any additional data */
+    [key: string]: any;
+}
+/**
+ * List Component
+ *
+ * A flexible list component that supports vertical/horizontal layouts,
+ * icons, actions, and dividers.
+ *
+ * @example
+ * ```html
+ * <lc-list
+ *   [items]="listItems"
+ *   orientation="vertical"
+ *   [showDividers]="true"
+ *   (itemClick)="handleItemClick($event)"
+ *   (actionClick)="handleActionClick($event)"
+ * />
+ * ```
+ */
+declare class ListComponent {
+    /** Custom item template provided via lcListItem directive */
+    itemTemplate?: ListItemTemplateDirective;
+    /** Array of list items to display */
+    items: _angular_core.InputSignal<ListItem[]>;
+    /** Orientation of the list */
+    orientation: _angular_core.InputSignal<ListOrientation>;
+    /** Visual variant */
+    variant: _angular_core.InputSignal<ListVariant>;
+    /** Whether to show dividers between items */
+    showDividers: _angular_core.InputSignal<boolean>;
+    /** Event emitted when an item is clicked */
+    readonly itemClick: _angular_core.OutputEmitterRef<ListItem>;
+    /** Event emitted when an action button is clicked */
+    readonly actionClick: _angular_core.OutputEmitterRef<ListItem>;
+    /**
+     * Computed CSS classes for the list
+     */
+    listClasses: _angular_core.Signal<string>;
+    /**
+     * Get CSS classes for a list item
+     */
+    getItemClasses(item: ListItem): string;
+    /**
+     * Handle item click
+     */
+    onItemClick(item: ListItem): void;
+    /**
+     * Handle action button click
+     */
+    onActionClick(item: ListItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "lc-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showDividers": { "alias": "showDividers"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "actionClick": "actionClick"; }, ["itemTemplate"], never, true, never>;
+}
+
+type ChipVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+type ChipSize = 'sm' | 'md' | 'lg';
+/**
+ * Chip Component
+ *
+ * A pill-shaped removable tag component for displaying selections, filters, or tags.
+ * Supports icons, color variants, and optional delete functionality.
+ *
+ * @example
+ * ```html
+ * <lc-chip variant="primary" size="md" [removable]="true" (remove)="handleRemove()">
+ *   <span lcChipIcon>🏷️</span>
+ *   Tag Name
+ * </lc-chip>
+ * ```
+ */
+declare class ChipComponent {
+    /** Visual variant of the chip */
+    variant: _angular_core.InputSignal<ChipVariant>;
+    /** Size of the chip */
+    size: _angular_core.InputSignal<ChipSize>;
+    /** Icon name from Heroicons */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /** Whether the chip can be removed */
+    removable: _angular_core.InputSignal<boolean>;
+    /** Whether the chip is disabled */
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Emitted when the chip is removed */
+    readonly remove: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Computed CSS classes for the chip
+     */
+    chipClasses: _angular_core.Signal<string>;
+    /**
+     * Handle remove button click
+     */
+    onRemove(event: Event): void;
+    /**
+     * Handle keyboard navigation
+     */
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipComponent, "lc-chip", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "remove": "remove"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Directive for defining custom cell templates in the Table component.
+ *
+ * @example
+ * ```html
+ * <lc-table [columns]="columns" [data]="data">
+ *   <ng-template lcTableCell="status" let-row>
+ *     <lc-badge [variant]="row.status">{{ row.status }}</lc-badge>
+ *   </ng-template>
+ * </lc-table>
+ * ```
+ */
+declare class TableCellDirective {
+    /** The column key this template applies to */
+    columnKey: string;
+    template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableCellDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TableCellDirective, "[lcTableCell]", never, { "columnKey": { "alias": "lcTableCell"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+interface TableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+    /** Optional CSS class(es) applied to both th and td cells */
+    cssClass?: string;
+    /** Optional tooltip shown on hover over the column header */
+    tooltip?: string;
+}
+interface SortEvent {
+    column: string;
+    direction: 'asc' | 'desc';
+}
+type TableVariant = 'default' | 'striped' | 'bordered';
+type TableSize = 'sm' | 'md' | 'lg';
+/**
+ * Table Component
+ *
+ * A flexible, accessible data table component with sorting, variants, and responsive behavior.
+ *
+ * @example
+ * ```html
+ * <lc-table
+ *   [columns]="columns"
+ *   [data]="data"
+ *   variant="striped"
+ *   [hoverable]="true"
+ *   (sort)="onSort($event)">
+ * </lc-table>
+ *
+ * <!-- With custom cell templates -->
+ * <lc-table [columns]="columns" [data]="data">
+ *   <ng-template lcTableCell="status" let-row>
+ *     <lc-badge [variant]="row.status">{{ row.status }}</lc-badge>
+ *   </ng-template>
+ * </lc-table>
+ * ```
+ */
+declare class TableComponent {
+    /** Custom cell templates */
+    cellTemplates: QueryList<TableCellDirective>;
+    /** Array of column definitions */
+    columns: _angular_core.InputSignal<TableColumn[]>;
+    /** Array of data objects to display */
+    data: _angular_core.InputSignal<Record<string, unknown>[]>;
+    /** Visual variant of the table */
+    variant: _angular_core.InputSignal<TableVariant>;
+    /** Size of the table */
+    size: _angular_core.InputSignal<TableSize>;
+    /** Whether rows should highlight on hover */
+    hoverable: _angular_core.InputSignal<boolean>;
+    /** Whether table should be responsive (horizontal scroll on mobile) */
+    responsive: _angular_core.InputSignal<boolean>;
+    /** Text shown when data is empty */
+    emptyText: _angular_core.InputSignal<string>;
+    /** Emitted when a sortable column header is clicked */
+    readonly sort: _angular_core.OutputEmitterRef<SortEvent>;
+    /** Emitted when a row is clicked */
+    readonly rowClick: _angular_core.OutputEmitterRef<Record<string, unknown>>;
+    /**
+     * Computed CSS classes for the table element
+     */
+    tableClasses: _angular_core.Signal<string>;
+    /**
+     * Computed CSS classes for the wrapper element
+     */
+    wrapperClasses: _angular_core.Signal<string>;
+    /** Current sort state */
+    protected currentSort: _angular_core.WritableSignal<{
+        column: string;
+        direction: "asc" | "desc";
+    } | null>;
+    /**
+     * Handle click on a sortable column header
+     */
+    handleSort(columnKey: string): void;
+    /**
+     * Get sort state for a column
+     */
+    getSortState(columnKey: string): 'asc' | 'desc' | null;
+    /**
+     * Get aria-sort attribute value for a column
+     */
+    getAriaSort(columnKey: string): string | null;
+    /**
+     * Get CSS classes for a header cell
+     */
+    getHeaderClasses(column: TableColumn): string;
+    /**
+     * Get value from data object by column key
+     */
+    getCellValue(row: Record<string, unknown>, columnKey: string): unknown;
+    /**
+     * Get custom template for a column if it exists
+     */
+    getCellTemplate(columnKey: string): TableCellDirective | undefined;
+    /**
+     * Check if a column has a custom template
+     */
+    hasCustomTemplate(columnKey: string): boolean;
+    /**
+     * Handle row click
+     */
+    onRowClick(row: Record<string, unknown>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "lc-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "sort": "sort"; "rowClick": "rowClick"; }, ["cellTemplates"], never, true, never>;
+}
+
+/**
+ * Field Group component for displaying label-value pairs in a consistent format.
+ * Useful for read-only data displays like profile pages, detail views, etc.
+ *
+ * @example Basic usage
+ * ```html
+ * <lc-field-group label="Email" value="user@example.com"></lc-field-group>
+ * ```
+ *
+ * @example With icon
+ * ```html
+ * <lc-field-group
+ *   label="Language"
+ *   value="English (US)"
+ *   icon="globe-alt">
+ * </lc-field-group>
+ * ```
+ *
+ * @example With custom content via projection
+ * ```html
+ * <lc-field-group label="Status" icon="check-circle">
+ *   <span class="status-badge">Active</span>
+ * </lc-field-group>
+ * ```
+ */
+declare class FieldGroupComponent {
+    /**
+     * Label text displayed above the value
+     */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * Value text to display (optional if using content projection)
+     */
+    value: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional icon name from Heroicons
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Icon size
+     * @default 'sm'
+     */
+    iconSize: _angular_core.InputSignal<"xs" | "sm" | "md">;
+    /**
+     * Use compact styling with less padding
+     * @default false
+     */
+    compact: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FieldGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldGroupComponent, "lc-field-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface StepperStep {
+    readonly label: string;
+    readonly description?: string;
+    readonly optional?: boolean;
+}
+type StepState = 'pending' | 'active' | 'completed';
+/**
+ * Stepper Component
+ *
+ * Step-by-step wizard with numbered steps, active/completed/pending states.
+ * Emits events when user navigates between steps.
+ *
+ * @example
+ * ```html
+ * <lc-stepper
+ *   [steps]="steps"
+ *   [(activeStep)]="currentStep"
+ *   (stepChange)="onStep($event)"
+ * >
+ *   @if (currentStep === 0) {
+ *     <div class="step-content">Step 1 content</div>
+ *   }
+ *   @if (currentStep === 1) {
+ *     <div class="step-content">Step 2 content</div>
+ *   }
+ * </lc-stepper>
+ * ```
+ */
+declare class StepperComponent {
+    /** Step definitions */
+    steps: _angular_core.InputSignal<readonly StepperStep[]>;
+    /** Active step index (0-based, two-way binding) */
+    activeStep: _angular_core.ModelSignal<number>;
+    /** Whether completed steps can be clicked to navigate back */
+    linear: _angular_core.InputSignal<boolean>;
+    /** Orientation */
+    orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    /** Emitted when active step changes */
+    stepChange: _angular_core.OutputEmitterRef<number>;
+    /** Computed total step count */
+    totalSteps: _angular_core.Signal<number>;
+    /** Whether we're on the first step */
+    isFirstStep: _angular_core.Signal<boolean>;
+    /** Whether we're on the last step */
+    isLastStep: _angular_core.Signal<boolean>;
+    /** Get the state of a step */
+    getStepState(index: number): StepState;
+    /** Navigate to a specific step (only if completed or next) */
+    goToStep(index: number): void;
+    /** Go to next step */
+    next(): void;
+    /** Go to previous step */
+    previous(): void;
+    /** Get CSS classes for step indicator */
+    getStepClasses(index: number): string;
+    /** Get CSS classes for connector line */
+    getConnectorClasses(index: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepperComponent, "lc-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "activeStep": { "alias": "activeStep"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "activeStep": "activeStepChange"; "stepChange": "stepChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Configuration for a single filter in the FilterBar.
+ */
+interface FilterConfig {
+    /** Unique key for this filter */
+    readonly key: string;
+    /** Display label */
+    readonly label: string;
+    /** Filter type */
+    readonly type: 'select' | 'toggle' | 'search';
+    /** Available options for select/toggle types */
+    readonly options?: readonly FilterOption[];
+    /** Placeholder text (for search type) */
+    readonly placeholder?: string;
+}
+interface FilterOption {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+}
+interface FilterValues {
+    [key: string]: string;
+}
+/**
+ * FilterBar Component
+ *
+ * Composable filter bar that combines selects, toggle groups, and search
+ * in a responsive horizontal layout. Ideal for list pages.
+ *
+ * @example
+ * ```html
+ * <lc-filter-bar
+ *   [filters]="filterConfig"
+ *   [values]="currentFilters"
+ *   (valuesChange)="onFilterChange($event)"
+ * ></lc-filter-bar>
+ * ```
+ */
+declare class FilterBarComponent {
+    /** Filter configurations */
+    filters: _angular_core.InputSignal<readonly FilterConfig[]>;
+    /** Current filter values (two-way bindable) */
+    values: _angular_core.InputSignal<FilterValues>;
+    /** Size variant */
+    size: _angular_core.InputSignal<"sm" | "md">;
+    /** Emitted when any filter value changes */
+    valuesChange: _angular_core.OutputEmitterRef<FilterValues>;
+    /** Computed size class */
+    sizeClass: _angular_core.Signal<string>;
+    /** Get the current value for a filter key */
+    getValue(key: string): string;
+    /** Handle select / toggle change */
+    onFilterChange(key: string, value: string): void;
+    /** Handle search input */
+    onSearchInput(key: string, event: Event): void;
+    /** Check if a toggle option is active */
+    isToggleActive(key: string, optionValue: string): boolean;
+    /** Get toggle button classes */
+    getToggleClasses(key: string, option: FilterOption): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterBarComponent, "lc-filter-bar", never, { "filters": { "alias": "filters"; "required": true; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
+}
+
+type SpinnerSize = 'sm' | 'md' | 'lg';
+/**
+ * Spinner component for loading states.
+ *
+ * Displays a spinning indicator with an optional message.
+ * Supports three sizes and respects the design-system color tokens.
+ *
+ * @example
+ * ```html
+ * <!-- Simple spinner -->
+ * <lc-spinner />
+ *
+ * <!-- With message -->
+ * <lc-spinner message="Loading data..." />
+ *
+ * <!-- Large spinner -->
+ * <lc-spinner size="lg" message="Loading dashboard..." />
+ * ```
+ */
+declare class SpinnerComponent {
+    /**
+     * Size of the spinner
+     * @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<SpinnerSize>;
+    /**
+     * Optional loading message displayed below the spinner
+     */
+    readonly message: _angular_core.InputSignal<string | undefined>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpinnerComponent, "lc-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type SkeletonVariant = 'line' | 'circle' | 'rect';
+/**
+ * Skeleton loader component for placeholder loading states.
+ *
+ * Renders a shimmer-animated placeholder block. Use multiple instances
+ * to compose loading skeletons that match your page layout.
+ *
+ * @example
+ * ```html
+ * <!-- Text line (default) -->
+ * <lc-skeleton />
+ *
+ * <!-- Custom width/height -->
+ * <lc-skeleton width="200px" height="1.75rem" />
+ *
+ * <!-- Circle avatar placeholder -->
+ * <lc-skeleton variant="circle" width="40px" height="40px" />
+ *
+ * <!-- Full-width rectangle (e.g. chart area) -->
+ * <lc-skeleton variant="rect" width="100%" height="400px" borderRadius="0.5rem" />
+ * ```
+ */
+declare class SkeletonComponent {
+    /** Shape variant. */
+    readonly variant: _angular_core.InputSignal<SkeletonVariant>;
+    /** Width (CSS value). Defaults to '100%' for line/rect, '40px' for circle. */
+    readonly width: _angular_core.InputSignal<string | undefined>;
+    /** Height (CSS value). Defaults to '0.875rem' for line, '40px' for circle, '100px' for rect. */
+    readonly height: _angular_core.InputSignal<string | undefined>;
+    /** Border radius override (CSS value). */
+    readonly borderRadius: _angular_core.InputSignal<string | undefined>;
+    protected readonly variantClass: _angular_core.Signal<string>;
+    protected readonly styles: _angular_core.Signal<{
+        width: string;
+        height: string;
+        'border-radius': string;
+    }>;
+    get hostWidth(): string;
+    get hostFlexShrink(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonComponent, "lc-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+/**
+ * Empty-state component for "no data" placeholders.
+ *
+ * Supports a compact inline mode (inside cards) and a larger page-level mode.
+ * An optional icon, heading, description, and projected action slot are supported.
+ *
+ * @example
+ * ```html
+ * <!-- Inline / card-level (sm) -->
+ * <lc-empty-state
+ *   size="sm"
+ *   message="No signals generated for this asset yet." />
+ *
+ * <!-- Page-level with icon + action -->
+ * <lc-empty-state
+ *   icon="chart-bar"
+ *   heading="No Paper Trading Portfolios"
+ *   message="Portfolios are created automatically when strategies are promoted."
+ * >
+ *   <lc-button variant="primary">Get Started</lc-button>
+ * </lc-empty-state>
+ * ```
+ */
+declare class EmptyStateComponent {
+    /**
+     * Size variant
+     * - `sm`: compact inline (inside cards), no padding
+     * - `md`: standard centered block (default)
+     * - `lg`: large page-level with extra padding
+     * @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<EmptyStateSize>;
+    /**
+     * Heroicon name to display above the heading
+     */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Bold heading text
+     */
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Description text
+     */
+    readonly message: _angular_core.InputSignal<string | undefined>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyStateComponent, "lc-empty-state", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type DrawerPosition = 'left' | 'right';
+type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Drawer Component — a slide-out overlay panel for supplementary content.
+ *
+ * Unlike the Sidenav (which renders navigation items), the Drawer
+ * accepts arbitrary projected content via `<ng-content>`, making it
+ * ideal for settings panels, filters, detail views, etc.
+ *
+ * @example
+ * ```html
+ * <lc-drawer [open]="showPanel" position="right" size="md"
+ *            heading="Settings" (closed)="showPanel = false">
+ *   <p>Any content goes here</p>
+ * </lc-drawer>
+ * ```
+ */
+declare class DrawerComponent {
+    /** Whether the drawer is open. */
+    readonly open: _angular_core.InputSignal<boolean>;
+    /** Slide-in direction. */
+    readonly position: _angular_core.InputSignal<DrawerPosition>;
+    /** Predefined width (sm=320, md=400, lg=520, xl=640). */
+    readonly size: _angular_core.InputSignal<DrawerSize>;
+    /** Optional heading shown in the drawer header. */
+    readonly heading: _angular_core.InputSignal<string>;
+    /** Whether the overlay backdrop is shown. */
+    readonly hasOverlay: _angular_core.InputSignal<boolean>;
+    /** Whether clicking the overlay closes the drawer. */
+    readonly closeOnOverlayClick: _angular_core.InputSignal<boolean>;
+    /** Whether pressing Escape closes the drawer. */
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    /** ARIA label for assistive technology. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Emitted when the drawer should close. */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /** Internal visibility — drives the animation lifecycle. */
+    protected _visible: _angular_core.WritableSignal<boolean>;
+    protected _animating: _angular_core.WritableSignal<boolean>;
+    constructor();
+    /** Width token → CSS. */
+    protected get widthValue(): string;
+    protected get panelClasses(): string;
+    /** Handle backdrop click. */
+    protected onOverlayClick(): void;
+    /** Handle close action. */
+    protected close(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent, "lc-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "hasOverlay": { "alias": "hasOverlay"; "required": false; "isSignal": true; }; "closeOnOverlayClick": { "alias": "closeOnOverlayClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+export { AccordionComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AvatarComponent, BadgeComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, ChipComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ContainerComponent, DatepickerComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FieldGroupComponent, FilterBarComponent, HeaderComponent, IconComponent, InputComponent, ListComponent, ListItemTemplateDirective, LogoComponent, MenuComponent, MetricCardComponent, ModalComponent, PaginationComponent, PasswordInputComponent, RadioComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SpinnerComponent, StackComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TextareaComponent, ThemeService, ToastComponent, ToastService, ToggleGroupComponent, TooltipContentComponent, TooltipDirective, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent };
+export type { AlertVariant, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CheckboxSize, ChipSize, ChipVariant, ContainerSize, DateValue, DrawerPosition, DrawerSize, EmptyStateSize, ErrorSeverity, FilterConfig, FilterOption, FilterValues, IconSize, IconVariant, ListItem, ListOrientation, ListVariant, MenuItem, ModalSize, NavigationItem, PaginationSize, PasswordRequirement, PasswordStrength, RadioSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StepState, StepperStep, TabOrientation, TableColumn, TableSize, TableVariant, ThemeConfig, ThemeMode, ThemeState, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, TooltipPosition, TrendDirection };