codexly-ui 0.1.24 → 0.2.1

package/types/codexly-ui.d.ts

@@ -1,14 +1,13 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, AfterContentInit, OnDestroy, OnInit, QueryList, Signal, AfterViewInit, ElementRef, InjectionToken, Provider, OnChanges, SimpleChanges } from '@angular/core';
+import { Signal, InjectionToken, ElementRef, AfterViewInit, OnDestroy, AfterContentInit, OnInit, QueryList, TemplateRef, Provider, OnChanges, SimpleChanges } from '@angular/core';
 import * as codexly_ui from 'codexly-ui';
-import { FormControl, ControlValueAccessor, FormGroup } from '@angular/forms';
-import * as node_modules_chart_js_dist_types_utils from 'node_modules/chart.js/dist/types/utils';
-import * as chart_js from 'chart.js';
-import { ChartType, ChartData, ChartOptions } from 'chart.js';
+import { ControlValueAccessor, FormControl, FormGroup } from '@angular/forms';
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 import { ConnectedPosition } from '@angular/cdk/overlay';
 import { Observable } from 'rxjs';
 
+type ClxSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 type ClxColor = 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'white';
 type ClxShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 type ClxColorInput = ClxColor | `${ClxColor}-${ClxShade}`;
@@ -89,1151 +88,902 @@ declare const CLX_COLOR_HEX: {
 };
 declare const CLX_COLOR_HEX_100: Record<ClxColor, string>;
 
-type ClxTrendDirection = 'up' | 'down' | 'neutral';
-interface ClxStatMetric {
-    icon: string;
-    title: string;
-    value: string | number;
-    trend: string | number;
-    trendDirection: ClxTrendDirection;
+declare class ClxIconComponent {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<ClxSize>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | null>;
+    readonly fill: _angular_core.InputSignal<boolean>;
+    protected readonly _colorClass: _angular_core.Signal<string>;
+    protected readonly _fontSize: _angular_core.Signal<string>;
+    protected readonly _fontVariation: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxIconComponent, "span[clx-icon]", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-interface SparkPoint {
+
+type ClxShape = 'rounded' | 'pill' | 'circle';
+
+type ClxButtonVariant = 'solid' | 'light' | 'outline' | 'ghost' | 'link';
+type ClxButtonColor = ClxColorInput;
+interface ClxRippleItem {
+    id: number;
     x: number;
     y: number;
+    diameter: number;
 }
 
-declare class ClxStatCardComponent {
-    readonly metric: _angular_core.InputSignal<ClxStatMetric>;
-    readonly chartData: _angular_core.InputSignal<number[]>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly layout: _angular_core.InputSignal<"vertical" | "horizontal" | "bar">;
+declare class ClxButtonComponent {
+    private readonly _themeSvc;
+    readonly variant: _angular_core.InputSignal<ClxButtonVariant>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly size: _angular_core.InputSignal<"xxs" | "xs" | "sm" | "md" | "lg" | undefined>;
+    readonly shape: _angular_core.InputSignal<ClxShape | undefined>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    protected readonly _size: _angular_core.Signal<"xxs" | "xs" | "sm" | "md" | "lg">;
+    protected readonly _shape: _angular_core.Signal<ClxShape>;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly block: _angular_core.InputSignal<boolean>;
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    readonly iconPosition: _angular_core.InputSignal<"left" | "right">;
+    readonly iconOnly: _angular_core.InputSignal<boolean>;
+    readonly badge: _angular_core.InputSignal<string | number | undefined>;
+    readonly badgeColor: _angular_core.InputSignal<ClxColorInput>;
+    protected readonly _ripples: _angular_core.WritableSignal<ClxRippleItem[]>;
+    private _nextId;
+    private readonly _el;
+    protected readonly _inactive: _angular_core.Signal<boolean>;
+    protected readonly _badgeClass: _angular_core.Signal<string>;
+    protected readonly _colorClass: _angular_core.Signal<string>;
+    protected readonly _rippleColor: _angular_core.Signal<string>;
+    protected readonly _spinnerColor: _angular_core.Signal<"white" | "inherit">;
+    protected readonly _iconSize: _angular_core.Signal<ClxSize>;
     protected readonly _hostClass: _angular_core.Signal<string>;
-    protected readonly _barHeights: _angular_core.Signal<number[]>;
-    protected readonly _iconBg: _angular_core.Signal<string>;
-    protected readonly _iconBgSubtle: _angular_core.Signal<string>;
-    protected readonly _iconTextBase: _angular_core.Signal<string>;
-    protected readonly _lineColor: _angular_core.Signal<string>;
-    protected readonly _gradId: _angular_core.Signal<string>;
-    protected readonly _trendColor: _angular_core.Signal<"red" | "green" | "slate">;
-    protected readonly _trendArrowIcon: _angular_core.Signal<"arrow_upward" | "arrow_downward" | "remove">;
-    protected readonly _trendTextClass: _angular_core.Signal<"text-red-500" | "text-green-500" | "text-slate-400">;
-    protected readonly _trendIcon: _angular_core.Signal<"remove" | "arrow_outward" | "south_east">;
-    protected readonly _formattedValue: _angular_core.Signal<string>;
-    protected readonly _points: _angular_core.Signal<SparkPoint[]>;
-    protected readonly _linePath: _angular_core.Signal<string>;
-    protected readonly _fillPath: _angular_core.Signal<string>;
-    constructor();
-    private _buildPath;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxStatCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxStatCardComponent, "clx-stat-card", never, { "metric": { "alias": "metric"; "required": true; "isSignal": true; }; "chartData": { "alias": "chartData"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    protected _onRipple(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxButtonComponent, "button[clx-button], a[clx-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type ClxProductLayout = 'vertical' | 'horizontal';
-type ClxProductSize = 'sm' | 'md';
-/** Refleja st_variations + st_products (campos necesarios para la card) */
-interface ClxProduct {
-    id: string;
-    sku: string;
-    name: string;
-    description?: string;
-    sale_price?: number;
-    product_id: string;
-    product_name: string;
-    trademark: string;
-    product_sale_price: number;
-    discount_price?: number;
-    has_discount: boolean;
-    discount_percentage?: number;
-    tags: string[];
-    main_image?: string;
-    in_stock: boolean;
+type ClxButtonGroupShape = 'flat' | 'circular';
+
+declare class ClxButtonGroupComponent {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly shape: _angular_core.InputSignal<ClxButtonGroupShape>;
+    readonly attached: _angular_core.InputSignal<boolean>;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    protected readonly _groupClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxButtonGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxButtonGroupComponent, "clx-button-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "attached": { "alias": "attached"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 type ClxBadgeVariant = 'solid' | 'light' | 'outline';
 
-type ClxProductTag = 'new' | 'sale' | 'out-of-stock' | 'featured' | 'limited' | 'hot';
-
-declare class ClxProductComponent {
-    readonly product: _angular_core.InputSignal<ClxProduct | null>;
-    readonly loading: _angular_core.InputSignal<boolean>;
-    readonly priority: _angular_core.InputSignal<boolean>;
-    readonly layout: _angular_core.InputSignal<ClxProductLayout>;
-    readonly size: _angular_core.InputSignal<ClxProductSize>;
-    readonly clxColor: _angular_core.InputSignal<ClxColorInput>;
-    readonly addToCart: _angular_core.OutputEmitterRef<ClxProduct>;
-    readonly addToWishlist: _angular_core.OutputEmitterRef<ClxProduct>;
-    protected readonly PRODUCT_TAG_LABEL: Record<ClxProductTag, string>;
-    protected readonly PRODUCT_TAG_COLOR: Record<ClxProductTag, codexly_ui.ClxColor>;
-    protected readonly PRODUCT_TAG_VARIANT: Record<ClxProductTag, codexly_ui.ClxBadgeVariant>;
-    protected readonly _h: _angular_core.Signal<boolean>;
-    protected readonly _sm: _angular_core.Signal<boolean>;
-    protected readonly _tags: _angular_core.Signal<ClxProductTag[]>;
-    protected readonly _disabled: _angular_core.Signal<boolean>;
-    protected readonly _price: _angular_core.Signal<number>;
-    protected readonly _buttonSize: _angular_core.Signal<"sm" | "md">;
-    protected readonly _skeletonW: _angular_core.Signal<"sm:w-32" | "sm:w-44">;
-    protected readonly _skeletonH: _angular_core.Signal<"160px" | "200px">;
-    protected readonly _cardClass: _angular_core.Signal<string>;
-    protected readonly _imageContainerClass: _angular_core.Signal<string>;
-    protected readonly _contentClass: _angular_core.Signal<string>;
-    protected readonly _actionsClass: _angular_core.Signal<"flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-3" | "flex items-center gap-2 mt-3">;
-    protected readonly _overlayClass: _angular_core.Signal<string>;
-    protected readonly _titleClass: _angular_core.Signal<string>;
-    protected readonly _descClass: _angular_core.Signal<string>;
-    protected readonly _priceClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProductComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductComponent, "clx-product", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "priority": { "alias": "priority"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "addToWishlist": "addToWishlist"; }, never, never, true, never>;
+declare class ClxBadgeComponent {
+    private readonly _themeSvc;
+    readonly variant: _angular_core.InputSignal<ClxBadgeVariant>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | undefined>;
+    readonly shape: _angular_core.InputSignal<ClxShape | undefined>;
+    readonly positioned: _angular_core.InputSignal<boolean>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    protected readonly _size: _angular_core.Signal<"xs" | "sm" | "md">;
+    protected readonly _shape: _angular_core.Signal<ClxShape>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxBadgeComponent, "span[clx-badge]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "positioned": { "alias": "positioned"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class ClxCarouselDirective {
-    readonly templateRef: TemplateRef<unknown>;
-    constructor(templateRef: TemplateRef<unknown>);
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCarouselDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCarouselDirective, "[clxSlide]", never, {}, {}, never, never, true, never>;
-}
+type ClxAvatarContentType = 'image' | 'text' | 'icon';
 
-type ClxCarouselAspectRatio = '16/9' | '4/3' | '1/1' | '3/2' | 'auto';
-interface ClxCarouselConfig {
-    clxColor: ClxColor;
-    autoPlay: boolean;
-    interval: number;
-    loop: boolean;
-    aspectRatio: ClxCarouselAspectRatio;
+declare class ClxAvatarComponent {
+    private readonly _themeSvc;
+    readonly src: _angular_core.InputSignal<string | null>;
+    readonly initials: _angular_core.InputSignal<string | null>;
+    readonly iconName: _angular_core.InputSignal<string | null>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly size: _angular_core.InputSignal<ClxSize>;
+    readonly shape: _angular_core.InputSignal<ClxShape>;
+    readonly alt: _angular_core.InputSignal<string>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    protected readonly _contentType: _angular_core.Signal<ClxAvatarContentType>;
+    protected readonly _initials: _angular_core.Signal<string>;
+    protected readonly _iconSize: _angular_core.Signal<ClxSize>;
+    protected readonly _shapeClass: _angular_core.Signal<"rounded-full" | "rounded-xl">;
+    protected readonly _colorClass: _angular_core.Signal<string>;
+    protected readonly _textClass: _angular_core.Signal<string>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxAvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxAvatarComponent, "clx-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class ClxCarouselComponent implements AfterContentInit, OnDestroy {
+type ClxTagVariant = 'solid' | 'soft' | 'outline';
+type ClxTagSize = 'sm' | 'md';
+type ClxTagShape = 'rounded' | 'pill';
+
+declare class ClxTagComponent {
     private readonly _themeSvc;
-    readonly clxColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _clxColor: _angular_core.Signal<ClxColorInput>;
-    readonly autoPlay: _angular_core.InputSignal<boolean>;
-    readonly interval: _angular_core.InputSignal<number>;
-    readonly loop: _angular_core.InputSignal<boolean>;
-    readonly aspectRatio: _angular_core.InputSignal<ClxCarouselAspectRatio>;
-    readonly transparent: _angular_core.InputSignal<boolean>;
-    readonly currentPageIndex: _angular_core.WritableSignal<number>;
-    protected readonly _slides: _angular_core.Signal<readonly ClxCarouselDirective[]>;
-    private _autoPlayTimer;
-    private _touchStartX;
-    private readonly _zone;
-    protected readonly _aspectClass: _angular_core.Signal<string>;
-    protected readonly _viewportClass: _angular_core.Signal<string>;
-    protected readonly _dotItems: _angular_core.Signal<{
-        idx: number;
-        cls: string;
-    }[]>;
-    constructor();
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
-    next(): void;
-    prev(): void;
-    goTo(index: number): void;
-    protected _onTouchStart(e: TouchEvent): void;
-    protected _onTouchEnd(e: TouchEvent): void;
-    private _startTimer;
-    private _clearTimer;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCarouselComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCarouselComponent, "clx-carousel", never, { "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "autoPlay": { "alias": "autoPlay"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; }, {}, ["_slides"], never, true, never>;
+    readonly variant: _angular_core.InputSignal<ClxTagVariant>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly size: _angular_core.InputSignal<ClxTagSize | undefined>;
+    protected readonly _tagSize: _angular_core.Signal<ClxTagSize>;
+    readonly shape: _angular_core.InputSignal<ClxTagShape>;
+    readonly onRemove: _angular_core.OutputEmitterRef<void>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    protected readonly _sizeConfig: _angular_core.Signal<{
+        pad: string;
+        text: string;
+        gap: string;
+        btnSize: Extract<codexly_ui.ClxSize, "xxs">;
+    }>;
+    protected readonly _colorClass: _angular_core.Signal<string>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    protected readonly _closeBtnColor: _angular_core.Signal<ClxColorInput>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTagComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTagComponent, "span[clx-tag]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; }, { "onRemove": "onRemove"; }, never, ["*"], true, never>;
 }
 
-interface ClxTabItem {
-    id: string;
-    label: string;
-    icon?: string;
-    disabled?: boolean;
-}
+type ClxCardVariant = 'elevated' | 'outlined' | 'flat';
+type ClxCardPadding = 'none' | 'sm' | 'md' | 'lg';
+type ClxCardShadow = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
-/** st_spec_options */
-interface ClxSpecOption {
-    id: string;
-    spec_type_id: string;
-    value: string;
-}
-/** st_spec_types + sus opciones */
-interface ClxSpecType {
-    id: string;
-    name: string;
-    icon?: string;
-    input_type: 'color' | 'text';
-    options: ClxSpecOption[];
-}
-/** st_variations — una variación sellable con sus imágenes y specs seleccionadas */
-interface ClxVariation {
-    id: string;
-    sku: string;
-    name: string;
-    description?: string;
-    sale_price?: number;
-    sort_order: number;
-    images: string[];
-    in_stock: boolean;
-    specs: Record<string, string>;
-}
-/** st_product_spec_types + st_product_spec_options — fila de ficha técnica */
-interface ClxProductSpec {
-    id: string;
-    name: string;
-    icon?: string;
-    value: string;
-    sort_order?: number;
-}
-/** st_product_descriptions — bloque de texto narrativo */
-interface ClxProductDescription {
-    id: string;
-    title?: string;
-    body: string;
-    sort_order: number;
+declare class ClxCardComponent {
+    private readonly _themeSvc;
+    readonly variant: _angular_core.InputSignal<ClxCardVariant>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly padding: _angular_core.InputSignal<ClxCardPadding>;
+    readonly shadow: _angular_core.InputSignal<ClxCardShadow | undefined>;
+    readonly hover: _angular_core.InputSignal<boolean>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    private readonly _headerSlot;
+    private readonly _bodySlot;
+    private readonly _footerSlot;
+    protected readonly _hasHeader: _angular_core.Signal<boolean>;
+    protected readonly _hasBody: _angular_core.Signal<boolean>;
+    protected readonly _hasFooter: _angular_core.Signal<boolean>;
+    protected readonly _bodyClass: _angular_core.Signal<string>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCardComponent, "clx-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; }, {}, ["_headerSlot", "_bodySlot", "_footerSlot"], ["[clxCardHeader]", "[clxCardBody]", "*", "[clxCardFooter]"], true, never>;
 }
-/** st_reviews */
-interface ClxReview {
-    id: string;
-    author_name: string;
-    rating: number;
-    title?: string;
-    body?: string;
-    is_verified: boolean;
-    helpful: number;
-    not_helpful: number;
-    created_at: string;
+
+declare class ClxCardHeaderDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCardHeaderDirective, "[clxCardHeader]", never, {}, {}, never, never, true, never>;
 }
-/** Payload completo para clx-product-detail — un producto con todas sus variaciones */
-interface ClxProductDetailData {
-    product_id: string;
-    product_name: string;
-    trademark: string;
-    product_sale_price: number;
-    discount_price?: number;
-    has_discount: boolean;
-    discount_percentage?: number;
-    has_warranty: boolean;
-    warranty_period?: number;
-    tags: string[];
-    currency: string;
-    rating: number;
-    review_count: number;
-    spec_types: ClxSpecType[];
-    variations: ClxVariation[];
-    product_specs: ClxProductSpec[];
-    descriptions: ClxProductDescription[];
-    reviews?: ClxReview[];
+
+declare class ClxCardBodyDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardBodyDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCardBodyDirective, "[clxCardBody]", never, {}, {}, never, never, true, never>;
 }
 
-declare class ClxProductDetailComponent {
-    readonly product: _angular_core.InputSignal<ClxProductDetailData | null>;
-    readonly clxColor: _angular_core.InputSignal<ClxColorInput>;
-    readonly loading: _angular_core.InputSignal<boolean>;
-    readonly currency: _angular_core.InputSignal<string>;
-    readonly _carousel: _angular_core.Signal<ClxCarouselComponent | undefined>;
-    readonly quantity: _angular_core.WritableSignal<number>;
-    readonly activeTab: _angular_core.WritableSignal<string>;
-    readonly selectedSpecs: _angular_core.WritableSignal<Record<string, string>>;
-    readonly tabItems: ClxTabItem[];
-    constructor();
-    readonly activeVariation: _angular_core.Signal<ClxVariation | null>;
-    readonly finalPrice: _angular_core.Signal<number>;
-    readonly discount: _angular_core.Signal<number>;
-    isOptionAvailable(specTypeId: string, specOptionId: string): boolean;
-    selectSpec(specTypeId: string, specOptionId: string): void;
-    isSpecSelected(specTypeId: string, specOptionId: string): boolean;
-    selectedOptionLabel(specType: ClxSpecType): string;
-    asColor(value: string): ClxColorInput;
-    specsLeft<T>(specs: T[]): T[];
-    specsRight<T>(specs: T[]): T[];
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProductDetailComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductDetailComponent, "clx-product-detail", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+declare class ClxCardFooterDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCardFooterDirective, "[clxCardFooter]", never, {}, {}, never, never, true, never>;
 }
 
-type ClxTreeSize = 'sm' | 'md' | 'lg';
-type ClxTreeVariant = 'default' | 'lines';
-interface ClxTreeNode {
-    id: string | number;
+type ClxListVariant = 'bordered' | 'flat' | 'flush';
+type ClxListSize = 'sm' | 'md' | 'lg';
+interface ClxListItem {
     label: string;
+    sublabel?: string;
     icon?: string;
-    children?: ClxTreeNode[];
+    meta?: string;
+    metaColor?: string;
     disabled?: boolean;
-    data?: unknown;
-}
-interface ClxTreeSelectEvent {
-    node: ClxTreeNode;
-    selected: boolean;
-}
-interface ClxTreeExpandEvent {
-    node: ClxTreeNode;
-    expanded: boolean;
 }
 
-declare class ClxTreeComponent {
+declare class ClxListComponent {
     private readonly _themeSvc;
-    readonly nodes: _angular_core.InputSignal<ClxTreeNode[]>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxTreeSize | undefined>;
-    readonly variant: _angular_core.InputSignal<ClxTreeVariant>;
-    readonly selectable: _angular_core.InputSignal<boolean>;
-    readonly multiSelect: _angular_core.InputSignal<boolean>;
-    readonly expandAll: _angular_core.InputSignal<boolean>;
-    readonly selectedIds: _angular_core.ModelSignal<(string | number)[]>;
-    readonly expandedIds: _angular_core.ModelSignal<(string | number)[]>;
-    readonly selectChange: _angular_core.OutputEmitterRef<ClxTreeSelectEvent>;
-    readonly expandChange: _angular_core.OutputEmitterRef<ClxTreeExpandEvent>;
-    protected readonly _treeSize: _angular_core.Signal<ClxTreeSize>;
-    protected readonly _s: _angular_core.Signal<{
-        row: string;
-        text: string;
-        icon: "xs" | "sm" | "md";
-        indent: string;
+    readonly resolvedColor: _angular_core.Signal<ClxColorInput>;
+    readonly variant: _angular_core.InputSignal<ClxListVariant>;
+    readonly size: _angular_core.InputSignal<ClxListSize>;
+    readonly numbered: _angular_core.InputSignal<boolean>;
+    _itemCounter: number;
+    readonly sizeTokens: _angular_core.Signal<{
+        item: string;
+        iconSize: codexly_ui.ClxSize;
+        label: string;
+        sublabel: string;
+        meta: string;
+        number: string;
     }>;
-    protected readonly _indentPx: _angular_core.Signal<16 | 24 | 20>;
-    protected readonly _rootClass: _angular_core.Signal<string>;
-    protected _isExpanded(id: string | number): boolean;
-    protected _isSelected(id: string | number): boolean;
-    protected _rowClass(node: ClxTreeNode, selected: boolean): string;
-    protected _iconClass(selected: boolean): string;
-    protected _labelClass(node: ClxTreeNode, selected: boolean): string;
-    protected _badgeClass(selected: boolean): string;
-    protected _lineClass(): string;
-    protected _toggleExpand(node: ClxTreeNode): void;
-    protected _onRowClick(node: ClxTreeNode): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTreeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTreeComponent, "clx-tree", never, { "nodes": { "alias": "nodes"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "multiSelect": { "alias": "multiSelect"; "required": false; "isSignal": true; }; "expandAll": { "alias": "expandAll"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "selectedIds": "selectedIdsChange"; "expandedIds": "expandedIdsChange"; "selectChange": "selectChange"; "expandChange": "expandChange"; }, never, never, true, never>;
+    readonly dividerClass: _angular_core.Signal<string>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    registerItem(): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxListComponent, "clx-list", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "numbered": { "alias": "numbered"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type ClxFilterFieldType = 'checkbox' | 'radio' | 'range' | 'select' | 'date-range';
-interface ClxFilterOption {
-    value: string | number;
-    label: string;
-    count?: number;
+interface ClxListContext {
+    color: Signal<ClxColorInput | undefined>;
+    resolvedColor: Signal<ClxColorInput>;
+    variant: Signal<ClxListVariant>;
+    size: Signal<ClxListSize>;
+    numbered: Signal<boolean>;
+    sizeTokens: Signal<(typeof LIST_SIZE_MAP)[ClxListSize]>;
+    dividerClass: Signal<string>;
+    registerItem: () => number;
 }
-interface ClxFilterField {
-    key: string;
+declare const LIST_SIZE_MAP: Record<ClxListSize, {
+    item: string;
+    iconSize: ClxSize;
     label: string;
-    type: ClxFilterFieldType;
-    options?: ClxFilterOption[];
-    min?: number;
-    max?: number;
-    step?: number;
-    unit?: string;
-    collapsed?: boolean;
+    sublabel: string;
+    meta: string;
+    number: string;
+}>;
+
+declare class ClxListItemComponent {
+    protected readonly _ctx: ClxListContext;
+    private readonly _themeSvc;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly sublabel: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly meta: _angular_core.InputSignal<string>;
+    readonly metaColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    private readonly _metaColor;
+    protected readonly _index: number;
+    protected readonly _iconClass: _angular_core.Signal<string>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    protected readonly _numberClass: _angular_core.Signal<string>;
+    protected readonly _labelClass: _angular_core.Signal<string>;
+    protected readonly _metaClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxListItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxListItemComponent, "clx-list-item", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "metaColor": { "alias": "metaColor"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["[clxLead]", "[clxContent]", "[clxTrail]", "*"], true, never>;
 }
-type ClxFilterValue = (string | number)[] | string | number | {
-    min: number;
-    max: number;
-} | {
-    from: Date;
-    to: Date;
-} | null;
-type ClxFilterValues = Record<string, ClxFilterValue>;
-interface ClxFilterChangeEvent {
-    key: string;
-    value: ClxFilterValue;
-    all: ClxFilterValues;
+
+type ClxSkeletonVariant = 'text' | 'circular' | 'rectangular';
+
+declare class ClxSkeletonComponent {
+    readonly variant: _angular_core.InputSignal<ClxSkeletonVariant>;
+    readonly size: _angular_core.InputSignal<ClxSize>;
+    readonly width: _angular_core.InputSignal<string | null>;
+    readonly height: _angular_core.InputSignal<string | null>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    protected readonly _hostWidth: _angular_core.Signal<string | null>;
+    protected readonly _hostHeight: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSkeletonComponent, "clx-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class ClxFilterPanelComponent {
-    private readonly _themeSvc;
-    readonly fields: _angular_core.InputSignal<ClxFilterField[]>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly showApply: _angular_core.InputSignal<boolean>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly values: _angular_core.ModelSignal<ClxFilterValues>;
-    readonly filterChange: _angular_core.OutputEmitterRef<ClxFilterChangeEvent>;
-    readonly applyChange: _angular_core.OutputEmitterRef<ClxFilterValues>;
-    private readonly _collapsed;
-    protected readonly _activeCount: _angular_core.Signal<number>;
-    protected _isCollapsed(key: string): boolean;
-    protected _toggleField(key: string): void;
-    protected _hasValue(key: string): boolean;
-    protected _getValue(key: string): ClxFilterValue;
-    protected _getRangeValue(field: ClxFilterField): {
-        min: number;
-        max: number;
-    };
-    protected _isChecked(key: string, val: string | number): boolean;
-    protected _valueLabel(field: ClxFilterField): string;
-    protected _toggleCheck(key: string, val: string | number, checked: boolean): void;
-    protected _setRange(key: string, min: number, max: number, field: ClxFilterField): void;
-    protected _set(key: string, value: ClxFilterValue): void;
-    protected _reset(): void;
-    protected _apply(): void;
-    protected _badgeCls(): string;
-    protected _fieldBadgeCls(): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxFilterPanelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxFilterPanelComponent, "clx-filter-panel", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showApply": { "alias": "showApply"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "filterChange": "filterChange"; "applyChange": "applyChange"; }, never, never, true, never>;
+type ClxSpinnerVariant = 'spinner' | 'dots' | 'pulse';
+type ClxSpinnerColor = ClxColorInput | 'inherit';
+
+declare class ClxSpinnerComponent {
+    private readonly _themeSvc;
+    readonly size: _angular_core.InputSignal<ClxSize>;
+    readonly color: _angular_core.InputSignal<ClxSpinnerColor | undefined>;
+    readonly variant: _angular_core.InputSignal<ClxSpinnerVariant>;
+    protected readonly _color: _angular_core.Signal<ClxSpinnerColor>;
+    protected readonly _spinnerClass: _angular_core.Signal<string>;
+    protected readonly _dotClass: _angular_core.Signal<string>;
+    protected readonly _pulseWrapperClass: _angular_core.Signal<string>;
+    protected readonly _pulseColorClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSpinnerComponent, "clx-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type ClxButtonVariant = 'solid' | 'light' | 'outline' | 'ghost' | 'link';
-type ClxButtonColor = ClxColorInput;
-interface ClxRippleItem {
-    id: number;
-    x: number;
-    y: number;
-    diameter: number;
+type ClxProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
+type ClxProgressBarVariant = 'solid' | 'striped' | 'indeterminate';
+
+declare class ClxProgressBarComponent {
+    private readonly _themeSvc;
+    readonly value: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    readonly size: _angular_core.InputSignal<ClxProgressBarSize | undefined>;
+    readonly variant: _angular_core.InputSignal<ClxProgressBarVariant>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly showValue: _angular_core.InputSignal<boolean>;
+    readonly valueFormat: _angular_core.InputSignal<"percent" | "fraction" | "value">;
+    protected readonly _pct: _angular_core.Signal<number>;
+    protected readonly _pbSize: _angular_core.Signal<ClxProgressBarSize>;
+    protected readonly _trackH: _angular_core.Signal<string>;
+    protected readonly _labelCls: _angular_core.Signal<"text-xs text-clx-text-label" | "text-sm text-clx-text-label">;
+    protected readonly _displayValue: _angular_core.Signal<string>;
+    protected readonly _fillCls: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProgressBarComponent, "clx-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class ClxAlertComponent implements OnInit, OnDestroy {
-    private readonly _opts;
-    private readonly _resolve;
-    private readonly _animate;
-    private readonly _el;
+declare class ClxRatingComponent {
     private readonly _themeSvc;
-    private readonly _zone;
-    constructor();
-    private get _type();
-    private get _isConfirm();
-    protected readonly _icon: _angular_core.WritableSignal<string>;
-    protected readonly _title: _angular_core.WritableSignal<string>;
-    protected readonly _message: _angular_core.WritableSignal<string>;
-    protected readonly _showCancel: _angular_core.WritableSignal<boolean>;
-    protected readonly _iconBg: _angular_core.Signal<string>;
-    protected readonly _iconColor: _angular_core.Signal<string>;
-    protected readonly _progressColor: _angular_core.Signal<string>;
-    protected readonly _confirmText: _angular_core.WritableSignal<string>;
-    protected readonly _confirmColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
-    protected readonly _cancelText: _angular_core.WritableSignal<string>;
-    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
-    protected readonly _cancelVariant: _angular_core.WritableSignal<ClxButtonVariant>;
-    protected readonly _timerTotal: _angular_core.WritableSignal<number>;
-    protected readonly _progressPct: _angular_core.WritableSignal<number>;
-    private _timerHandle;
-    private _destroyed;
-    private get _card();
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    confirm(): void;
-    dismiss(): void;
-    private _close;
-    private _startTimer;
-    private _stopTimer;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxAlertComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxAlertComponent, "clx-alert", never, {}, {}, never, never, true, never>;
+    readonly value: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    protected readonly _hexColor: _angular_core.Signal<string>;
+    protected readonly _stars: _angular_core.Signal<{
+        idx: number;
+        icon: string;
+        fill: boolean;
+    }[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxRatingComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxRatingComponent, "clx-rating", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class ClxTabDirective {
-    readonly templateRef: TemplateRef<unknown>;
-    readonly clxTabPanel: _angular_core.InputSignal<string>;
-    constructor(templateRef: TemplateRef<unknown>);
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTabDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxTabDirective, "[clxTabPanel]", never, { "clxTabPanel": { "alias": "clxTabPanel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+type ClxStepperStatus = 'completed' | 'active' | 'pending' | 'error';
+type ClxStepperOrientation = 'horizontal' | 'vertical';
+type ClxStepperSize = 'sm' | 'md' | 'lg';
+interface ClxStepperStep {
+    label: string;
+    description?: string;
+    icon?: string;
+    status: ClxStepperStatus;
 }
 
-declare class ClxTabsComponent {
+declare class ClxStepperComponent {
     private readonly _themeSvc;
-    readonly tabs: _angular_core.InputSignal<ClxTabItem[]>;
-    readonly clxColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly activeTab: _angular_core.ModelSignal<string>;
-    protected readonly _clxColor: _angular_core.Signal<ClxColorInput>;
-    protected readonly _panels: _angular_core.Signal<readonly ClxTabDirective[]>;
-    protected readonly _underlineClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTabsComponent, "clx-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["_panels"], never, true, never>;
+    readonly steps: _angular_core.InputSignal<ClxStepperStep[]>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    readonly orientation: _angular_core.InputSignal<ClxStepperOrientation>;
+    readonly size: _angular_core.InputSignal<ClxStepperSize>;
+    protected readonly _tokens: _angular_core.Signal<{
+        circle: string;
+        iconSize: codexly_ui.ClxSize;
+        label: string;
+        desc: string;
+        connector: string;
+    }>;
+    protected readonly _hostClass: _angular_core.Signal<"flex flex-row items-start w-full" | "flex flex-col w-full">;
+    protected readonly _stepWrapClass: _angular_core.Signal<"flex flex-col items-center flex-1 min-w-0" | "flex flex-row gap-3">;
+    protected readonly _axisClass: _angular_core.Signal<"flex flex-row items-center w-full" | "flex flex-col items-center shrink-0">;
+    protected readonly _labelWrapClass: _angular_core.Signal<"flex flex-col items-center text-center mt-2 px-1" | "flex flex-col justify-center pb-6 min-w-0">;
+    protected _circleClass(status: ClxStepperStep['status']): string;
+    protected _connectorClass(status: ClxStepperStep['status']): string;
+    protected _labelClass(status: ClxStepperStep['status']): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxStepperComponent, "clx-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type ClxDrawerSize = 'sm' | 'md' | 'lg';
-interface ClxDrawerButtonOptions {
-    text: string;
-    color?: ClxButtonColor;
-    variant?: ClxButtonVariant;
-}
-interface ClxDrawerConfig<D = unknown> {
-    /** Width preset. Default: 'md' */
-    size?: ClxDrawerSize;
-    /** Show the dark backdrop. Default: false */
-    hasBackdrop?: boolean;
-    /** Prevent closing on backdrop click / Escape. Default: false */
-    disableClose?: boolean;
-    /** Extra CSS classes added to the overlay pane */
-    panelClass?: string | string[];
-    /** Data injected into the opened component via CLX_MODAL_DATA token */
-    data?: D;
-}
-interface ClxDrawerRef<R = unknown> {
-    close(result?: R): void;
-    afterClosed(): Promise<R | undefined>;
-}
+type ClxTimelineLineStyle = 'dotted' | 'solid' | 'none';
+type ClxTimelineMode = 'left' | 'alternate';
+type ClxTimelineSize = 'sm' | 'md' | 'lg';
 
-declare class ClxDrawerComponent {
-    readonly size: _angular_core.InputSignal<ClxDrawerSize | null>;
-    readonly showClose: _angular_core.InputSignal<boolean>;
-    readonly confirmButton: _angular_core.InputSignal<ClxDrawerButtonOptions | undefined>;
-    readonly cancelButton: _angular_core.InputSignal<ClxDrawerButtonOptions | undefined>;
-    readonly showCancelButton: _angular_core.InputSignal<boolean>;
-    readonly confirmClick: _angular_core.OutputEmitterRef<void>;
-    readonly cancelClick: _angular_core.OutputEmitterRef<void>;
-    private readonly _modalRef;
-    private readonly _sizeToken;
+declare class ClxTimelineComponent {
     private readonly _themeSvc;
-    protected readonly _resolvedSize: _angular_core.Signal<ClxDrawerSize>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly resolvedColor: _angular_core.Signal<ClxColorInput>;
+    readonly lineStyle: _angular_core.InputSignal<ClxTimelineLineStyle>;
+    readonly mode: _angular_core.InputSignal<ClxTimelineMode>;
+    readonly size: _angular_core.InputSignal<ClxTimelineSize>;
+    readonly sizeTokens: _angular_core.Signal<{
+        dot: string;
+        iconSize: codexly_ui.ClxSize;
+        item: string;
+        gap: string;
+        title: string;
+        desc: string;
+        time: string;
+        contentPb: string;
+    }>;
     protected readonly _hostClass: _angular_core.Signal<string>;
-    protected readonly _hasBuiltInButtons: _angular_core.Signal<boolean>;
-    protected readonly _confirmText: _angular_core.Signal<string>;
-    protected readonly _confirmColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
-    protected readonly _confirmVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
-    protected readonly _cancelText: _angular_core.Signal<string>;
-    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
-    protected readonly _cancelVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
-    protected _close(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxDrawerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxDrawerComponent, "clx-drawer", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "confirmButton": { "alias": "confirmButton"; "required": false; "isSignal": true; }; "cancelButton": { "alias": "cancelButton"; "required": false; "isSignal": true; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; "isSignal": true; }; }, { "confirmClick": "confirmClick"; "cancelClick": "cancelClick"; }, never, ["[clx-drawer-title]", "*", "[clx-drawer-footer]"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTimelineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTimelineComponent, "clx-timeline", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "lineStyle": { "alias": "lineStyle"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type ClxAnimateAttentionSeeker = 'bounce' | 'flash' | 'pulse' | 'rubberBand' | 'shakeX' | 'shakeY' | 'headShake' | 'swing' | 'tada' | 'wobble' | 'jello' | 'heartBeat';
-type ClxAnimateBackEntrance = 'backInDown' | 'backInLeft' | 'backInRight' | 'backInUp';
-type ClxAnimateBackExit = 'backOutDown' | 'backOutLeft' | 'backOutRight' | 'backOutUp';
-type ClxAnimateBouncingEntrance = 'bounceIn' | 'bounceInDown' | 'bounceInLeft' | 'bounceInRight' | 'bounceInUp';
-type ClxAnimateBouncingExit = 'bounceOut' | 'bounceOutDown' | 'bounceOutLeft' | 'bounceOutRight' | 'bounceOutUp';
-type ClxAnimateFadingEntrance = 'fadeIn' | 'fadeInDown' | 'fadeInDownBig' | 'fadeInLeft' | 'fadeInLeftBig' | 'fadeInRight' | 'fadeInRightBig' | 'fadeInUp' | 'fadeInUpBig' | 'fadeInTopLeft' | 'fadeInTopRight' | 'fadeInBottomLeft' | 'fadeInBottomRight';
-type ClxAnimateFadingExit = 'fadeOut' | 'fadeOutDown' | 'fadeOutDownBig' | 'fadeOutLeft' | 'fadeOutLeftBig' | 'fadeOutRight' | 'fadeOutRightBig' | 'fadeOutUp' | 'fadeOutUpBig' | 'fadeOutTopLeft' | 'fadeOutTopRight' | 'fadeOutBottomRight' | 'fadeOutBottomLeft';
-type ClxAnimateFlipper = 'flip' | 'flipInX' | 'flipInY' | 'flipOutX' | 'flipOutY';
-type ClxAnimateLightspeed = 'lightSpeedInRight' | 'lightSpeedInLeft' | 'lightSpeedOutRight' | 'lightSpeedOutLeft';
-type ClxAnimateRotatingEntrance = 'rotateIn' | 'rotateInDownLeft' | 'rotateInDownRight' | 'rotateInUpLeft' | 'rotateInUpRight';
-type ClxAnimateRotatingExit = 'rotateOut' | 'rotateOutDownLeft' | 'rotateOutDownRight' | 'rotateOutUpLeft' | 'rotateOutUpRight';
-type ClxAnimateSpecial = 'hinge' | 'jackInTheBox' | 'rollIn' | 'rollOut';
-type ClxAnimateZoomingEntrance = 'zoomIn' | 'zoomInDown' | 'zoomInLeft' | 'zoomInRight' | 'zoomInUp';
-type ClxAnimateZoomingExit = 'zoomOut' | 'zoomOutDown' | 'zoomOutLeft' | 'zoomOutRight' | 'zoomOutUp';
-type ClxAnimateSlidingEntrance = 'slideInDown' | 'slideInLeft' | 'slideInRight' | 'slideInUp';
-type ClxAnimateSlidingExit = 'slideOutDown' | 'slideOutLeft' | 'slideOutRight' | 'slideOutUp';
-type ClxAnimateName = ClxAnimateAttentionSeeker | ClxAnimateBackEntrance | ClxAnimateBackExit | ClxAnimateBouncingEntrance | ClxAnimateBouncingExit | ClxAnimateFadingEntrance | ClxAnimateFadingExit | ClxAnimateFlipper | ClxAnimateLightspeed | ClxAnimateRotatingEntrance | ClxAnimateRotatingExit | ClxAnimateSpecial | ClxAnimateZoomingEntrance | ClxAnimateZoomingExit | ClxAnimateSlidingEntrance | ClxAnimateSlidingExit;
-type ClxAnimateTrigger = 'click' | 'hover' | 'hoverLeave' | 'onEnter' | 'onLeave' | 'manual';
-interface ClxAnimateConfig {
-    animation: ClxAnimateName;
-    trigger?: ClxAnimateTrigger;
-    duration?: number;
-    delay?: number;
-    repeat?: number | 'infinite';
-    easing?: string;
-    fillMode?: 'none' | 'forwards' | 'backwards' | 'both';
-    once?: boolean;
-    threshold?: number;
-}
-type ClxAnimateDefaults = Partial<Pick<ClxAnimateConfig, 'duration' | 'delay' | 'repeat' | 'easing' | 'fillMode' | 'once' | 'threshold'>>;
-interface ClxAnimateEvent {
-    element: HTMLElement;
-    animation: ClxAnimateName;
-    timestamp: number;
+interface ClxTimelineContext {
+    color: Signal<ClxColorInput | undefined>;
+    resolvedColor: Signal<ClxColorInput>;
+    lineStyle: Signal<ClxTimelineLineStyle>;
+    mode: Signal<ClxTimelineMode>;
+    size: Signal<ClxTimelineSize>;
+    sizeTokens: Signal<(typeof TIMELINE_SIZE_MAP)[ClxTimelineSize]>;
 }
+declare const TIMELINE_SIZE_MAP: Record<ClxTimelineSize, {
+    dot: string;
+    iconSize: ClxSize;
+    item: string;
+    gap: string;
+    title: string;
+    desc: string;
+    time: string;
+    contentPb: string;
+}>;
 
-type ClxModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-interface ClxModalButtonOptions {
-    text: string;
-    color?: ClxButtonColor;
-    variant?: ClxButtonVariant;
-}
-interface ClxModalConfig<D = unknown> {
-    /** Width preset. Default: 'md' */
-    size?: ClxModalSize;
-    /** Show the dark backdrop. Default: true */
-    hasBackdrop?: boolean;
-    /** Prevent closing on backdrop click / Escape. Default: false */
-    disableClose?: boolean;
-    /** Extra CSS classes added to the overlay pane */
-    panelClass?: string | string[];
-    /** Data injected into the opened component via CLX_MODAL_DATA token */
-    data?: D;
-    /** Entrance animation name. Default: 'fadeInDown' */
-    animationIn?: ClxAnimateName;
-    /** Exit animation name. Default: 'fadeOutUp' */
-    animationOut?: ClxAnimateName;
-    /** Animation duration in ms. Default: 300 */
-    animationDuration?: number;
-}
-interface ClxModalRef<R = unknown> {
-    /** Closes the modal and emits the result */
-    close(result?: R): void;
-    /** Promise that resolves with the result when the modal closes */
-    afterClosed(): Promise<R | undefined>;
+declare class ClxTimelineItemComponent {
+    protected readonly _ctx: ClxTimelineContext;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | null>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly time: _angular_core.InputSignal<string>;
+    readonly last: _angular_core.InputSignal<boolean>;
+    protected readonly _resolvedColor: _angular_core.Signal<codexly_ui.ClxColorTokens>;
+    protected readonly _iconClass: _angular_core.Signal<string>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    protected readonly _dotClass: _angular_core.Signal<string>;
+    protected readonly _lineClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTimelineItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTimelineItemComponent, "clx-timeline-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "time": { "alias": "time"; "required": false; "isSignal": true; }; "last": { "alias": "last"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class ClxModalComponent {
-    readonly size: _angular_core.InputSignal<ClxModalSize | null>;
-    readonly showClose: _angular_core.InputSignal<boolean>;
-    readonly confirmButton: _angular_core.InputSignal<ClxModalButtonOptions | undefined>;
-    readonly cancelButton: _angular_core.InputSignal<ClxModalButtonOptions | undefined>;
-    readonly showCancelButton: _angular_core.InputSignal<boolean>;
-    readonly confirmClick: _angular_core.OutputEmitterRef<void>;
-    readonly cancelClick: _angular_core.OutputEmitterRef<void>;
-    private readonly _modalRef;
-    private readonly _sizeToken;
+type ClxTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+type ClxTooltipSize = 'sm' | 'md';
+
+declare class ClxTooltipComponent {
     private readonly _themeSvc;
-    protected readonly _resolvedSize: _angular_core.Signal<ClxModalSize>;
+    readonly text: _angular_core.InputSignal<string>;
+    readonly position: _angular_core.InputSignal<ClxTooltipPosition>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly size: _angular_core.InputSignal<ClxTooltipSize>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
     protected readonly _hostClass: _angular_core.Signal<string>;
-    protected readonly _hasBuiltInButtons: _angular_core.Signal<boolean>;
-    protected readonly _confirmText: _angular_core.Signal<string>;
-    protected readonly _confirmColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
-    protected readonly _confirmVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
-    protected readonly _cancelText: _angular_core.Signal<string>;
-    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
-    protected readonly _cancelVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
-    protected _close(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxModalComponent, "clx-modal", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "confirmButton": { "alias": "confirmButton"; "required": false; "isSignal": true; }; "cancelButton": { "alias": "cancelButton"; "required": false; "isSignal": true; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; "isSignal": true; }; }, { "confirmClick": "confirmClick"; "cancelClick": "cancelClick"; }, never, ["[clx-modal-title]", "*", "[clx-modal-footer]"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTooltipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTooltipComponent, "clx-tooltip", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type ClxPaginationSize = 'sm' | 'md' | 'lg';
-interface ClxPageChangeEvent {
-    page: number;
-    pageSize: number;
-}
-interface ClxPageSizeChangeEvent {
-    pageSize: number;
+declare class ClxTooltipDirective {
+    readonly clxTooltip: _angular_core.InputSignal<string>;
+    readonly clxTooltipPosition: _angular_core.InputSignal<ClxTooltipPosition>;
+    readonly clxTooltipColor: _angular_core.InputSignal<ClxColorInput>;
+    readonly clxTooltipSize: _angular_core.InputSignal<ClxTooltipSize>;
+    readonly clxTooltipDelay: _angular_core.InputSignal<number>;
+    private readonly _el;
+    private readonly _renderer;
+    private readonly _appRef;
+    private readonly _injector;
+    private readonly _animate;
+    private readonly _platformId;
+    private readonly _destroyRef;
+    private _ref;
+    private _pendingRef;
+    private _showTimer;
+    private _hideTimer;
+    private _tooltipId;
+    private _abort;
+    private _destroyed;
+    constructor();
+    private _scheduleShow;
+    private _scheduleHide;
+    private _show;
+    private _hide;
+    private _resolvePosition;
+    private _placeAt;
+    private _destroyBubble;
+    private _forceDestroyBubble;
+    private _clearShow;
+    private _clearHide;
+    private _clearTimers;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxTooltipDirective, "[clxTooltip]", never, { "clxTooltip": { "alias": "clxTooltip"; "required": true; "isSignal": true; }; "clxTooltipPosition": { "alias": "clxTooltipPosition"; "required": false; "isSignal": true; }; "clxTooltipColor": { "alias": "clxTooltipColor"; "required": false; "isSignal": true; }; "clxTooltipSize": { "alias": "clxTooltipSize"; "required": false; "isSignal": true; }; "clxTooltipDelay": { "alias": "clxTooltipDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type ClxSelectSize = 'sm' | 'md' | 'lg';
-interface ClxSelectOption {
-    value: string | number;
-    label: string;
-    disabled?: boolean;
-    /** Renders the option label using this font family, for font-picker selects */
-    previewFontFamily?: string;
-}
+type ClxInputStatus = 'default' | 'error' | 'success';
+type ClxInputSize = 'sm' | 'md' | 'lg';
+type ClxInputType = 'text' | 'password' | 'email' | 'search' | 'tel' | 'url';
 
-type PageItem = {
-    type: 'page';
-    page: number;
-} | {
-    type: 'ellipsis';
-    id: string;
-};
-declare class ClxPaginationComponent {
+declare class ClxInputComponent implements ControlValueAccessor {
     private readonly _themeSvc;
-    readonly totalItems: _angular_core.InputSignal<number>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly type: _angular_core.InputSignal<ClxInputType>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxPaginationSize | undefined>;
-    readonly showPageSize: _angular_core.InputSignal<boolean>;
-    /** Opciones manuales. Si está vacío (default) se calculan automáticamente desde totalItems. */
-    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
-    readonly currentPage: _angular_core.ModelSignal<number>;
-    readonly pageSize: _angular_core.ModelSignal<number>;
-    readonly pageChange: _angular_core.OutputEmitterRef<ClxPageChangeEvent>;
-    readonly sizeChange: _angular_core.OutputEmitterRef<ClxPageSizeChangeEvent>;
-    private readonly _destroyRef;
-    protected readonly _pageSizeCtrl: FormControl<number | null>;
-    constructor();
-    protected readonly _size: _angular_core.Signal<ClxPaginationSize>;
-    protected readonly _cfg: _angular_core.Signal<{
-        btnSize: "xs" | "sm" | "md" | "lg";
-        selectSize: "sm" | "md" | "lg";
-        text: string;
-        gap: string;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly prefixIcon: _angular_core.InputSignal<string>;
+    readonly suffixIcon: _angular_core.InputSignal<string>;
+    readonly prefixText: _angular_core.InputSignal<string>;
+    readonly suffixText: _angular_core.InputSignal<string>;
+    readonly status: _angular_core.InputSignal<ClxInputStatus>;
+    readonly statusMessage: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<ClxInputSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxInputSize>;
+    /** Initial value for standalone use (without FormControl) */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Disabled state for standalone use (without FormControl) */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly autocomplete: _angular_core.InputSignal<string | null>;
+    protected readonly _inputId: string;
+    protected readonly _showPassword: _angular_core.WritableSignal<boolean>;
+    readonly _value: _angular_core.WritableSignal<string>;
+    private readonly _cvaDisabled;
+    private _cvaConnected;
+    protected readonly _disabled: _angular_core.Signal<boolean>;
+    private readonly _valueEffect;
+    private _onChange;
+    private _onTouched;
+    protected readonly _inputType: _angular_core.Signal<ClxInputType>;
+    protected readonly _autocomplete: _angular_core.Signal<string>;
+    protected readonly _sizeConfig: _angular_core.Signal<{
+        input: string;
+        label: string;
+        hint: string;
+        iconSize: "xs" | "sm" | "md";
+        iconLeft: string;
+        iconRight: string;
+        padLeft: string;
+        padRight: string;
+        padDefaultL: string;
+        padDefaultR: string;
     }>;
-    readonly totalPages: _angular_core.Signal<number>;
-    private readonly _rangeStart;
-    private readonly _rangeEnd;
-    protected readonly _infoText: _angular_core.Signal<string>;
-    protected readonly _pageSizeOptions: _angular_core.Signal<ClxSelectOption[]>;
-    protected readonly _pageItems: _angular_core.Signal<PageItem[]>;
-    protected readonly _wrapClass: _angular_core.Signal<string>;
-    protected readonly _infoClass: _angular_core.Signal<string>;
-    protected readonly _ellipsisClass: _angular_core.Signal<string>;
-    protected _goTo(page: number): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPaginationComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPaginationComponent, "clx-pagination", never, { "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showPageSize": { "alias": "showPageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "pageChange": "pageChange"; "sizeChange": "sizeChange"; }, never, never, true, never>;
+    protected readonly _statusCfg: _angular_core.Signal<{
+        border: string;
+        ring: string;
+        msgCls: string;
+        iconName: string;
+        iconColor: string;
+    }>;
+    /** True whenever the wrapper must be a flex container (prefix icon/text or suffix text) */
+    private readonly _isFlexMode;
+    protected readonly _labelClass: _angular_core.Signal<string>;
+    protected readonly _hintClass: _angular_core.Signal<string>;
+    protected readonly _wrapperClass: _angular_core.Signal<string>;
+    protected readonly _inputClass: _angular_core.Signal<string>;
+    /** Colored prefix icon cell — matches the input accent color */
+    protected readonly _prefixIconCellCls: _angular_core.Signal<string>;
+    protected readonly _suffixIconWrapCls: _angular_core.Signal<string>;
+    protected readonly _statusMsgClass: _angular_core.Signal<string>;
+    writeValue(val: string): void;
+    registerOnChange(fn: (v: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    protected _handleInput(event: Event): void;
+    protected _handleBlur(): void;
+    protected _togglePassword(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxInputComponent, "clx-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "prefixText": { "alias": "prefixText"; "required": false; "isSignal": true; }; "suffixText": { "alias": "suffixText"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusMessage": { "alias": "statusMessage"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type ClxToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left';
-type ClxToastType = ClxColor;
-interface ClxToastAction {
-    label: string;
-    onClick: () => void;
-}
-interface ClxToastOptions {
-    type?: ClxToastType;
-    message: string;
-    title?: string;
-    icon?: string;
-    position?: ClxToastPosition;
-    duration?: number;
-    showProgress?: boolean;
-    pauseOnHover?: boolean;
-    animationIn?: ClxAnimateName;
-    animationOut?: ClxAnimateName;
-    animationDuration?: number;
-    action?: ClxToastAction;
-}
-interface ClxToastEntry extends Required<Omit<ClxToastOptions, 'title' | 'action' | 'icon'>> {
-    id: string;
-    title?: string;
-    icon?: string;
-    action?: ClxToastAction;
-    removing: boolean;
-}
-
-declare class ClxToastComponent implements OnInit, OnDestroy {
-    readonly entry: _angular_core.InputSignal<ClxToastEntry>;
-    readonly dismiss: _angular_core.OutputEmitterRef<string>;
-    private readonly _animate;
-    private readonly _el;
-    private readonly _zone;
-    constructor();
-    protected readonly _progressPct: _angular_core.WritableSignal<number>;
-    private _timerHandle;
-    private _paused;
-    private _elapsed;
-    private _destroyed;
-    protected readonly _icon: _angular_core.Signal<string>;
-    protected readonly _borderClass: _angular_core.Signal<string>;
-    protected readonly _colorClass: _angular_core.Signal<string>;
-    protected readonly _progressColor: _angular_core.Signal<string>;
-    protected readonly _buttonColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
-    private get _card();
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    protected _onMouseEnter(): void;
-    protected _onMouseLeave(): void;
-    protected _onAction(): void;
-    playExitAnimation(): Promise<void>;
-    private _startTimer;
-    private _stopTimer;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxToastComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxToastComponent, "clx-toast", never, { "entry": { "alias": "entry"; "required": true; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
-}
-
-declare class ClxToastContainerComponent {
-    readonly entries: _angular_core.ModelSignal<ClxToastEntry[]>;
-    readonly position: _angular_core.ModelSignal<ClxToastPosition>;
-    toastRefs: QueryList<ClxToastComponent>;
-    protected readonly _positionClass: _angular_core.Signal<string>;
-    requestDismiss(id: string): Promise<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxToastContainerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxToastContainerComponent, "clx-toast-container", never, { "entries": { "alias": "entries"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "entries": "entriesChange"; "position": "positionChange"; }, never, never, true, never>;
-}
-
-type ClxCardVariant = 'elevated' | 'outlined' | 'flat';
-type ClxCardPadding = 'none' | 'sm' | 'md' | 'lg';
-type ClxCardShadow = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ClxTextareaStatus = 'default' | 'error' | 'success';
+type ClxTextareaSize = 'sm' | 'md' | 'lg';
+type ClxTextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 
-declare class ClxCardComponent {
-    private readonly _themeSvc;
-    readonly variant: _angular_core.InputSignal<ClxCardVariant>;
+declare class ClxTextareaComponent implements ControlValueAccessor {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly padding: _angular_core.InputSignal<ClxCardPadding>;
-    readonly shadow: _angular_core.InputSignal<ClxCardShadow | undefined>;
-    readonly hover: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<ClxTextareaSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxTextareaSize>;
+    readonly status: _angular_core.InputSignal<ClxTextareaStatus>;
+    readonly statusMessage: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly prefixIcon: _angular_core.InputSignal<string>;
+    readonly suffixIcon: _angular_core.InputSignal<string>;
+    readonly resize: _angular_core.InputSignal<ClxTextareaResize>;
+    readonly rows: _angular_core.InputSignal<number>;
+    readonly maxLength: _angular_core.InputSignal<number>;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly _taId: string;
+    readonly _value: _angular_core.WritableSignal<string>;
+    private readonly _themeSvc;
+    private readonly _cvaDisabled;
+    private _cvaConnected;
+    protected readonly _disabled: _angular_core.Signal<boolean>;
+    private readonly _valueEffect;
+    private _onChange;
+    private _onTouched;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    private readonly _headerSlot;
-    private readonly _bodySlot;
-    private readonly _footerSlot;
-    protected readonly _hasHeader: _angular_core.Signal<boolean>;
-    protected readonly _hasBody: _angular_core.Signal<boolean>;
-    protected readonly _hasFooter: _angular_core.Signal<boolean>;
-    protected readonly _bodyClass: _angular_core.Signal<string>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCardComponent, "clx-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; }, {}, ["_headerSlot", "_bodySlot", "_footerSlot"], ["[clxCardHeader]", "[clxCardBody]", "*", "[clxCardFooter]"], true, never>;
-}
-
-declare class ClxCardHeaderDirective {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardHeaderDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCardHeaderDirective, "[clxCardHeader]", never, {}, {}, never, never, true, never>;
-}
-
-declare class ClxCardBodyDirective {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardBodyDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCardBodyDirective, "[clxCardBody]", never, {}, {}, never, never, true, never>;
-}
-
-declare class ClxCardFooterDirective {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardFooterDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCardFooterDirective, "[clxCardFooter]", never, {}, {}, never, never, true, never>;
+    protected readonly _sizeCfg: _angular_core.Signal<{
+        textarea: string;
+        label: string;
+        hint: string;
+        iconSize: "xs" | "sm" | "md";
+        iconRight: string;
+        padDefaultL: string;
+        padDefaultR: string;
+        padRight: string;
+    }>;
+    protected readonly _statusCfg: _angular_core.Signal<{
+        border: string;
+        ring: string;
+        msgCls: string;
+        iconName: string;
+        iconColor: string;
+    }>;
+    protected readonly _labelClass: _angular_core.Signal<string>;
+    protected readonly _hintClass: _angular_core.Signal<string>;
+    /**
+     * Outer flex wrapper — owns the border, border-radius and focus ring.
+     * The border sits here (not on the textarea) so the prefix cell blends in
+     * seamlessly, exactly like clx-input does in flex mode.
+     */
+    protected readonly _wrapperClass: _angular_core.Signal<string>;
+    /** Prefix icon cell — flex column, full height of the wrapper */
+    protected readonly _prefixCellCls: _angular_core.Signal<string>;
+    /** Textarea itself — no border (border lives on the wrapper), fills flex-1 */
+    protected readonly _textareaClass: _angular_core.Signal<string>;
+    /** Suffix icon — absolute inside the inner relative wrapper */
+    protected readonly _suffixIconWrapCls: _angular_core.Signal<string>;
+    protected readonly _statusMsgClass: _angular_core.Signal<string>;
+    protected readonly _counterClass: _angular_core.Signal<string>;
+    writeValue(val: string): void;
+    registerOnChange(fn: (v: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    protected _handleInput(event: Event): void;
+    protected _handleBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTextareaComponent, "clx-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusMessage": { "alias": "statusMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type ClxStepperStatus = 'completed' | 'active' | 'pending' | 'error';
-type ClxStepperOrientation = 'horizontal' | 'vertical';
-type ClxStepperSize = 'sm' | 'md' | 'lg';
-interface ClxStepperStep {
-    label: string;
-    description?: string;
-    icon?: string;
-    status: ClxStepperStatus;
-}
+type ClxNumberVariant = 'default' | 'stepper';
+type ClxNumberSize = 'sm' | 'md' | 'lg';
 
-declare class ClxStepperComponent {
-    private readonly _themeSvc;
-    readonly steps: _angular_core.InputSignal<ClxStepperStep[]>;
+declare class ClxNumberComponent implements ControlValueAccessor {
+    private static _seq;
+    protected readonly _inputId: string;
+    readonly variant: _angular_core.InputSignal<ClxNumberVariant>;
+    readonly size: _angular_core.InputSignal<ClxNumberSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxNumberSize>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly prefixIcon: _angular_core.InputSignal<string>;
+    readonly min: _angular_core.InputSignal<number | null>;
+    readonly max: _angular_core.InputSignal<number | null>;
+    readonly step: _angular_core.InputSignal<number>;
+    /** Initial value for standalone use (without FormControl) */
+    readonly value: _angular_core.InputSignal<number>;
+    /** Disabled state for standalone use (without FormControl) */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly _value: _angular_core.WritableSignal<number>;
+    private readonly _cvaDisabled;
+    private _cvaConnected;
+    protected readonly _disabled: _angular_core.Signal<boolean>;
+    private readonly _valueEffect;
+    private _onChange;
+    private _onTouched;
+    protected readonly _isAtMin: _angular_core.Signal<boolean>;
+    protected readonly _isAtMax: _angular_core.Signal<boolean>;
+    private readonly _themeSvc;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly orientation: _angular_core.InputSignal<ClxStepperOrientation>;
-    readonly size: _angular_core.InputSignal<ClxStepperSize>;
-    protected readonly _tokens: _angular_core.Signal<{
-        circle: string;
-        iconSize: codexly_ui.ClxSize;
+    protected readonly _sizeConfig: _angular_core.Signal<{
+        container: string;
+        inputText: string;
+        iconSize: Extract<codexly_ui.ClxSize, "xs" | "sm" | "md">;
+        btnSize: "sm" | "md";
+        stepperCell: string;
         label: string;
-        desc: string;
-        connector: string;
+        hint: string;
     }>;
-    protected readonly _hostClass: _angular_core.Signal<"flex flex-row items-start w-full" | "flex flex-col w-full">;
-    protected readonly _stepWrapClass: _angular_core.Signal<"flex flex-col items-center flex-1 min-w-0" | "flex flex-row gap-3">;
-    protected readonly _axisClass: _angular_core.Signal<"flex flex-row items-center w-full" | "flex flex-col items-center shrink-0">;
-    protected readonly _labelWrapClass: _angular_core.Signal<"flex flex-col items-center text-center mt-2 px-1" | "flex flex-col justify-center pb-6 min-w-0">;
-    protected _circleClass(status: ClxStepperStep['status']): string;
-    protected _connectorClass(status: ClxStepperStep['status']): string;
-    protected _labelClass(status: ClxStepperStep['status']): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxStepperComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxStepperComponent, "clx-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    protected readonly _labelClass: _angular_core.Signal<string>;
+    protected readonly _hintClass: _angular_core.Signal<string>;
+    protected readonly _containerClass: _angular_core.Signal<string>;
+    /** Colored prefix icon cell — matches the input accent color */
+    protected readonly _prefixCellCls: _angular_core.Signal<string>;
+    /** Full class for the native input — must include structural classes since [class] replaces static ones */
+    protected readonly _inputClass: _angular_core.Signal<string>;
+    protected readonly _stepperWrapClass: _angular_core.Signal<string>;
+    protected readonly _stepperValueCls: _angular_core.Signal<string>;
+    writeValue(val: number): void;
+    registerOnChange(fn: (v: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    protected _handleInput(event: Event): void;
+    protected _handleBlur(): void;
+    protected _decrement(): void;
+    protected _increment(): void;
+    private _applyValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxNumberComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxNumberComponent, "clx-number", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type ClxSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-type ClxShape = 'rounded' | 'pill' | 'circle';
-
-type ClxAvatarContentType = 'image' | 'text' | 'icon';
-
-declare class ClxAvatarComponent {
-    private readonly _themeSvc;
-    readonly src: _angular_core.InputSignal<string | null>;
-    readonly initials: _angular_core.InputSignal<string | null>;
-    readonly iconName: _angular_core.InputSignal<string | null>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<ClxSize>;
-    readonly shape: _angular_core.InputSignal<ClxShape>;
-    readonly alt: _angular_core.InputSignal<string>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _contentType: _angular_core.Signal<ClxAvatarContentType>;
-    protected readonly _initials: _angular_core.Signal<string>;
-    protected readonly _iconSize: _angular_core.Signal<ClxSize>;
-    protected readonly _shapeClass: _angular_core.Signal<"rounded-full" | "rounded-xl">;
-    protected readonly _colorClass: _angular_core.Signal<string>;
-    protected readonly _textClass: _angular_core.Signal<string>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxAvatarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxAvatarComponent, "clx-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-type ClxButtonGroupShape = 'flat' | 'circular';
-
-declare class ClxButtonGroupComponent {
-    readonly label: _angular_core.InputSignal<string>;
-    readonly shape: _angular_core.InputSignal<ClxButtonGroupShape>;
-    readonly attached: _angular_core.InputSignal<boolean>;
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
-    protected readonly _groupClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxButtonGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxButtonGroupComponent, "clx-button-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "attached": { "alias": "attached"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-type ClxListVariant = 'bordered' | 'flat' | 'flush';
-type ClxListSize = 'sm' | 'md' | 'lg';
-interface ClxListItem {
+type ClxSelectSize = 'sm' | 'md' | 'lg';
+interface ClxSelectOption {
+    value: string | number;
     label: string;
-    sublabel?: string;
-    icon?: string;
-    meta?: string;
-    metaColor?: string;
     disabled?: boolean;
+    /** Renders the option label using this font family, for font-picker selects */
+    previewFontFamily?: string;
 }
 
-declare class ClxListComponent {
+declare class ClxSelectComponent implements ControlValueAccessor {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly options: _angular_core.InputSignal<ClxSelectOption[]>;
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    readonly searchable: _angular_core.InputSignal<boolean>;
+    readonly searchPlaceholder: _angular_core.InputSignal<string>;
+    readonly activeColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly size: _angular_core.InputSignal<ClxSelectSize | undefined>;
+    protected readonly _size: Signal<ClxSelectSize>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly async: _angular_core.InputSignal<boolean>;
+    readonly loadOptions: _angular_core.InputSignal<((query: string) => Observable<ClxSelectOption[]>) | null>;
+    readonly debounceMs: _angular_core.InputSignal<number>;
+    readonly minChars: _angular_core.InputSignal<number>;
+    private static _seq;
+    protected readonly _labelId: string;
+    protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly _overlayWidthPx: _angular_core.WritableSignal<number>;
+    protected readonly _searchControl: FormControl<string | null>;
+    protected readonly _searchQuery: Signal<string>;
+    protected readonly _asyncOptions: _angular_core.WritableSignal<ClxSelectOption[]>;
+    protected readonly _asyncLoading: _angular_core.WritableSignal<boolean>;
+    protected readonly _asyncQuery: _angular_core.WritableSignal<string>;
+    private readonly _wasTouched;
+    private readonly _selectedVals;
+    private readonly _cvaDisabled;
     private readonly _themeSvc;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly resolvedColor: _angular_core.Signal<ClxColorInput>;
-    readonly variant: _angular_core.InputSignal<ClxListVariant>;
-    readonly size: _angular_core.InputSignal<ClxListSize>;
-    readonly numbered: _angular_core.InputSignal<boolean>;
-    _itemCounter: number;
-    readonly sizeTokens: _angular_core.Signal<{
-        item: string;
-        iconSize: codexly_ui.ClxSize;
+    private readonly _ngControl;
+    protected readonly _activeColor: Signal<ClxColorInput>;
+    private readonly _el;
+    private readonly _sso;
+    private readonly _isBrowser;
+    private readonly _loadedFonts;
+    readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
+    constructor();
+    private _onChange;
+    private _onTouched;
+    readonly _positions: ConnectedPosition[];
+    protected readonly _disabled: Signal<boolean>;
+    protected readonly _sizeConfig: Signal<{
+        minH: string;
+        text: string;
         label: string;
-        sublabel: string;
-        meta: string;
-        number: string;
+        hint: string;
+        px: string;
+        py: string;
+        gap: string;
+        tagSize: "sm" | "md";
+        btnSize: "xs" | "sm";
     }>;
-    readonly dividerClass: _angular_core.Signal<string>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    registerItem(): number;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxListComponent, "clx-list", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "numbered": { "alias": "numbered"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    protected readonly _hasValue: Signal<boolean>;
+    protected readonly _isInvalid: Signal<boolean>;
+    protected readonly _selectedOptions: Signal<ClxSelectOption[]>;
+    protected readonly _filteredOptions: Signal<ClxSelectOption[]>;
+    protected readonly _showAsyncPlaceholder: Signal<boolean>;
+    protected readonly _displayValue: Signal<string>;
+    protected readonly _displayFontFamily: Signal<string | null>;
+    protected readonly _overlayWidth: Signal<number>;
+    protected readonly _labelClass: Signal<string>;
+    protected readonly _hintClass: Signal<string>;
+    protected readonly _triggerClass: Signal<string>;
+    protected readonly _singleDisplayClass: Signal<string>;
+    protected readonly _tagContainerClass: Signal<string>;
+    protected readonly _placeholderClass: Signal<string>;
+    protected readonly _chevronBtnClass: Signal<"transition-transform duration-200 rotate-180" | "transition-transform duration-200">;
+    protected readonly _panelClass: Signal<string>;
+    protected _isSelected(value: string | number): boolean;
+    protected _optionClass(opt: ClxSelectOption): string;
+    protected _togglePanel(): void;
+    private _openPanel;
+    private _loadPreviewFont;
+    protected _closePanel(): void;
+    protected _selectOption(opt: ClxSelectOption): void;
+    protected _deselect(value: string | number): void;
+    protected _clearAll(): void;
+    protected _onTriggerKeydown(event: KeyboardEvent): void;
+    protected _onOverlayKeydown(event: KeyboardEvent): void;
+    onEscape(): void;
+    writeValue(val: string | number | (string | number)[] | null): void;
+    registerOnChange(fn: (v: string | number | (string | number)[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSelectComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSelectComponent, "clx-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "activeColor": { "alias": "activeColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "async": { "alias": "async"; "required": false; "isSignal": true; }; "loadOptions": { "alias": "loadOptions"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-interface ClxListContext {
-    color: Signal<ClxColorInput | undefined>;
-    resolvedColor: Signal<ClxColorInput>;
-    variant: Signal<ClxListVariant>;
-    size: Signal<ClxListSize>;
-    numbered: Signal<boolean>;
-    sizeTokens: Signal<(typeof LIST_SIZE_MAP)[ClxListSize]>;
-    dividerClass: Signal<string>;
-    registerItem: () => number;
-}
-declare const LIST_SIZE_MAP: Record<ClxListSize, {
-    item: string;
-    iconSize: ClxSize;
-    label: string;
-    sublabel: string;
-    meta: string;
-    number: string;
-}>;
+type ClxCheckboxVariant = 'solid' | 'outline';
 
-declare class ClxListItemComponent {
-    protected readonly _ctx: ClxListContext;
+declare class ClxCheckboxComponent implements ControlValueAccessor {
     private readonly _themeSvc;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    readonly variant: _angular_core.InputSignal<ClxCheckboxVariant>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | undefined>;
+    protected readonly _size: _angular_core.Signal<"sm" | "md" | "lg">;
     readonly label: _angular_core.InputSignal<string>;
-    readonly sublabel: _angular_core.InputSignal<string>;
-    readonly icon: _angular_core.InputSignal<string>;
-    readonly meta: _angular_core.InputSignal<string>;
-    readonly metaColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Initial value when used without FormControl */
+    readonly value: _angular_core.InputSignal<boolean>;
+    /** Disabled state when used without FormControl */
     readonly disabled: _angular_core.InputSignal<boolean>;
-    private readonly _metaColor;
-    protected readonly _index: number;
-    protected readonly _iconClass: _angular_core.Signal<string>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    protected readonly _numberClass: _angular_core.Signal<string>;
+    readonly _checked: _angular_core.WritableSignal<boolean>;
+    private readonly _cvaDisabled;
+    private _cvaConnected;
+    protected readonly _disabled: _angular_core.Signal<boolean>;
+    private readonly _valueEffect;
+    private _onChange;
+    private _onTouched;
+    protected readonly _sizeConfig: _angular_core.Signal<{
+        readonly box: "w-4 h-4";
+        readonly icon: "xs";
+        readonly label: "text-xs";
+    } | {
+        readonly box: "w-5 h-5";
+        readonly icon: "xs";
+        readonly label: "text-sm";
+    } | {
+        readonly box: "w-6 h-6";
+        readonly icon: "sm";
+        readonly label: "text-base";
+    }>;
+    protected readonly _boxClass: _angular_core.Signal<string>;
     protected readonly _labelClass: _angular_core.Signal<string>;
-    protected readonly _metaClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxListItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxListItemComponent, "clx-list-item", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "metaColor": { "alias": "metaColor"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["[clxLead]", "[clxContent]", "[clxTrail]", "*"], true, never>;
+    writeValue(val: boolean): void;
+    registerOnChange(fn: (v: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    protected _toggle(): void;
+    protected _onSpace(event: Event): void;
+    protected _handleBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCheckboxComponent, "clx-checkbox", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class ClxRatingComponent {
-    private readonly _themeSvc;
-    readonly value: _angular_core.InputSignal<number>;
-    readonly max: _angular_core.InputSignal<number>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _hexColor: _angular_core.Signal<string>;
-    protected readonly _stars: _angular_core.Signal<{
-        idx: number;
-        icon: string;
-        fill: boolean;
-    }[]>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxRatingComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxRatingComponent, "clx-rating", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
+type ClxRadioVariant = 'solid' | 'outline';
 
-declare class ClxBadgeComponent {
+declare class ClxRadioComponent {
+    /** Value this radio represents — compared against the group's selected value */
+    readonly value: _angular_core.InputSignal<unknown>;
+    readonly label: _angular_core.InputSignal<string>;
+    /** Per-radio overrides — falls back to the group's value if null */
+    readonly color: _angular_core.InputSignal<ClxColorInput | null>;
+    readonly variant: _angular_core.InputSignal<ClxRadioVariant | null>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | null>;
+    private readonly _group;
     private readonly _themeSvc;
-    readonly variant: _angular_core.InputSignal<ClxBadgeVariant>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "xs" | undefined>;
-    readonly shape: _angular_core.InputSignal<ClxShape | undefined>;
-    readonly positioned: _angular_core.InputSignal<boolean>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _size: _angular_core.Signal<"sm" | "md" | "xs">;
-    protected readonly _shape: _angular_core.Signal<ClxShape>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxBadgeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxBadgeComponent, "span[clx-badge]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "positioned": { "alias": "positioned"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-declare class ClxButtonComponent {
-    private readonly _themeSvc;
-    readonly variant: _angular_core.InputSignal<ClxButtonVariant>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xxs" | "xs" | undefined>;
-    readonly shape: _angular_core.InputSignal<ClxShape | undefined>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _size: _angular_core.Signal<"sm" | "md" | "lg" | "xxs" | "xs">;
-    protected readonly _shape: _angular_core.Signal<ClxShape>;
-    readonly loading: _angular_core.InputSignal<boolean>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly block: _angular_core.InputSignal<boolean>;
-    readonly icon: _angular_core.InputSignal<string | undefined>;
-    readonly iconPosition: _angular_core.InputSignal<"left" | "right">;
-    readonly iconOnly: _angular_core.InputSignal<boolean>;
-    readonly badge: _angular_core.InputSignal<string | number | undefined>;
-    readonly badgeColor: _angular_core.InputSignal<ClxColorInput>;
-    protected readonly _ripples: _angular_core.WritableSignal<ClxRippleItem[]>;
-    private _nextId;
-    private readonly _el;
-    protected readonly _inactive: _angular_core.Signal<boolean>;
-    protected readonly _badgeClass: _angular_core.Signal<string>;
-    protected readonly _colorClass: _angular_core.Signal<string>;
-    protected readonly _rippleColor: _angular_core.Signal<string>;
-    protected readonly _spinnerColor: _angular_core.Signal<"white" | "inherit">;
-    protected readonly _iconSize: _angular_core.Signal<ClxSize>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    protected _onRipple(event: Event): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxButtonComponent, "button[clx-button], a[clx-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-declare class ClxIconComponent {
-    readonly name: _angular_core.InputSignal<string>;
-    readonly size: _angular_core.InputSignal<ClxSize>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | null>;
-    readonly fill: _angular_core.InputSignal<boolean>;
-    protected readonly _colorClass: _angular_core.Signal<string>;
-    protected readonly _fontSize: _angular_core.Signal<string>;
-    protected readonly _fontVariation: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxIconComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxIconComponent, "span[clx-icon]", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-type ClxSkeletonVariant = 'text' | 'circular' | 'rectangular';
-
-declare class ClxSkeletonComponent {
-    readonly variant: _angular_core.InputSignal<ClxSkeletonVariant>;
-    readonly size: _angular_core.InputSignal<ClxSize>;
-    readonly width: _angular_core.InputSignal<string | null>;
-    readonly height: _angular_core.InputSignal<string | null>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    protected readonly _hostWidth: _angular_core.Signal<string | null>;
-    protected readonly _hostHeight: _angular_core.Signal<string | null>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSkeletonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSkeletonComponent, "clx-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-type ClxSpinnerVariant = 'spinner' | 'dots' | 'pulse';
-type ClxSpinnerColor = ClxColorInput | 'inherit';
-
-declare class ClxSpinnerComponent {
-    private readonly _themeSvc;
-    readonly size: _angular_core.InputSignal<ClxSize>;
-    readonly color: _angular_core.InputSignal<ClxSpinnerColor | undefined>;
-    readonly variant: _angular_core.InputSignal<ClxSpinnerVariant>;
-    protected readonly _color: _angular_core.Signal<ClxSpinnerColor>;
-    protected readonly _spinnerClass: _angular_core.Signal<string>;
-    protected readonly _dotClass: _angular_core.Signal<string>;
-    protected readonly _pulseWrapperClass: _angular_core.Signal<string>;
-    protected readonly _pulseColorClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSpinnerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSpinnerComponent, "clx-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-type ClxTagVariant = 'solid' | 'soft' | 'outline';
-type ClxTagSize = 'sm' | 'md';
-type ClxTagShape = 'rounded' | 'pill';
-
-declare class ClxTagComponent {
-    private readonly _themeSvc;
-    readonly variant: _angular_core.InputSignal<ClxTagVariant>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<ClxTagSize | undefined>;
-    protected readonly _tagSize: _angular_core.Signal<ClxTagSize>;
-    readonly shape: _angular_core.InputSignal<ClxTagShape>;
-    readonly onRemove: _angular_core.OutputEmitterRef<void>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    protected readonly _checked: _angular_core.Signal<boolean>;
+    protected readonly _isDisabled: _angular_core.Signal<boolean>;
+    private readonly _color;
+    private readonly _variant;
+    private readonly _size;
     protected readonly _sizeConfig: _angular_core.Signal<{
-        pad: string;
-        text: string;
-        gap: string;
-        btnSize: Extract<codexly_ui.ClxSize, "xxs">;
+        readonly ring: "w-4 h-4";
+        readonly dot: "w-1.5 h-1.5";
+        readonly label: "text-xs";
+    } | {
+        readonly ring: "w-5 h-5";
+        readonly dot: "w-2 h-2";
+        readonly label: "text-sm";
+    } | {
+        readonly ring: "w-6 h-6";
+        readonly dot: "w-2.5 h-2.5";
+        readonly label: "text-base";
     }>;
-    protected readonly _colorClass: _angular_core.Signal<string>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    protected readonly _closeBtnColor: _angular_core.Signal<ClxColorInput>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTagComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTagComponent, "span[clx-tag]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; }, { "onRemove": "onRemove"; }, never, ["*"], true, never>;
-}
-
-type ClxTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-type ClxTooltipSize = 'sm' | 'md';
-
-declare class ClxTooltipComponent {
-    private readonly _themeSvc;
-    readonly text: _angular_core.InputSignal<string>;
-    readonly position: _angular_core.InputSignal<ClxTooltipPosition>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<ClxTooltipSize>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTooltipComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTooltipComponent, "clx-tooltip", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    protected readonly _ringClass: _angular_core.Signal<string>;
+    protected readonly _dotClass: _angular_core.Signal<string>;
+    protected readonly _labelClass: _angular_core.Signal<string>;
+    protected _select(): void;
+    protected _onSpace(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxRadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxRadioComponent, "clx-radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type ClxTimelineLineStyle = 'dotted' | 'solid' | 'none';
-type ClxTimelineMode = 'left' | 'alternate';
-type ClxTimelineSize = 'sm' | 'md' | 'lg';
-
-declare class ClxTimelineComponent {
+declare const CLX_RADIO_GROUP: InjectionToken<ClxRadioGroupComponent>;
+declare class ClxRadioGroupComponent implements ControlValueAccessor {
     private readonly _themeSvc;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly resolvedColor: _angular_core.Signal<ClxColorInput>;
-    readonly lineStyle: _angular_core.InputSignal<ClxTimelineLineStyle>;
-    readonly mode: _angular_core.InputSignal<ClxTimelineMode>;
-    readonly size: _angular_core.InputSignal<ClxTimelineSize>;
-    readonly sizeTokens: _angular_core.Signal<{
-        dot: string;
-        iconSize: codexly_ui.ClxSize;
-        item: string;
-        gap: string;
-        title: string;
-        desc: string;
-        time: string;
-        contentPb: string;
-    }>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTimelineComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTimelineComponent, "clx-timeline", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "lineStyle": { "alias": "lineStyle"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-interface ClxTimelineContext {
-    color: Signal<ClxColorInput | undefined>;
-    resolvedColor: Signal<ClxColorInput>;
-    lineStyle: Signal<ClxTimelineLineStyle>;
-    mode: Signal<ClxTimelineMode>;
-    size: Signal<ClxTimelineSize>;
-    sizeTokens: Signal<(typeof TIMELINE_SIZE_MAP)[ClxTimelineSize]>;
-}
-declare const TIMELINE_SIZE_MAP: Record<ClxTimelineSize, {
-    dot: string;
-    iconSize: ClxSize;
-    item: string;
-    gap: string;
-    title: string;
-    desc: string;
-    time: string;
-    contentPb: string;
-}>;
-
-declare class ClxTimelineItemComponent {
-    protected readonly _ctx: ClxTimelineContext;
-    readonly icon: _angular_core.InputSignal<string>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | null>;
-    readonly title: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
-    readonly time: _angular_core.InputSignal<string>;
-    readonly last: _angular_core.InputSignal<boolean>;
-    protected readonly _resolvedColor: _angular_core.Signal<codexly_ui.ClxColorTokens>;
-    protected readonly _iconClass: _angular_core.Signal<string>;
-    protected readonly _hostClass: _angular_core.Signal<string>;
-    protected readonly _dotClass: _angular_core.Signal<string>;
-    protected readonly _lineClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTimelineItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTimelineItemComponent, "clx-timeline-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "time": { "alias": "time"; "required": false; "isSignal": true; }; "last": { "alias": "last"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-type ClxChartType = Extract<ChartType, 'line' | 'bar' | 'pie' | 'doughnut' | 'radar' | 'polarArea'>;
-interface ClxChartOptions {
-    type: ClxChartType;
-    data: ChartData;
-    options?: ChartOptions;
-    height?: number | string;
-    loading?: boolean;
-    ariaLabel?: string;
-}
-
-declare class ClxChartComponent implements AfterViewInit, OnDestroy {
-    canvasRef: ElementRef<HTMLCanvasElement>;
-    type: _angular_core.InputSignal<ClxChartType>;
-    data: _angular_core.InputSignal<ChartData<keyof chart_js.ChartTypeRegistry, (number | chart_js.Point | [number, number] | chart_js.BubbleDataPoint | null)[], unknown>>;
-    options: _angular_core.InputSignal<node_modules_chart_js_dist_types_utils._DeepPartialObject<chart_js.CoreChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.ElementChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.PluginChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.DatasetChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.ScaleChartOptions<keyof chart_js.ChartTypeRegistry>>>;
-    height: _angular_core.InputSignal<string | number>;
-    ariaLabel: _angular_core.InputSignal<string | undefined>;
-    loading: _angular_core.InputSignal<boolean>;
-    private _chart?;
-    private _injector;
-    _hostHeight: _angular_core.Signal<string | number>;
-    ngAfterViewInit(): void;
-    private _createChart;
-    ngOnDestroy(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxChartComponent, "clx-chart", never, { "type": { "alias": "type"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    readonly variant: _angular_core.InputSignal<ClxRadioVariant>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly direction: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Current selected value — readable by child clx-radio via injection */
+    readonly _value: _angular_core.WritableSignal<unknown>;
+    private readonly _cvaDisabled;
+    /** Merged disabled state (input + CVA) — readable by child clx-radio */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    private _onChange;
+    private _onTouched;
+    select(value: unknown): void;
+    writeValue(val: unknown): void;
+    registerOnChange(fn: (v: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxRadioGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxRadioGroupComponent, "clx-radio-group", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type ClxCheckboxVariant = 'solid' | 'outline';
-
-declare class ClxCheckboxComponent implements ControlValueAccessor {
+type ClxSwitchSize = 'xs' | 'sm' | 'md' | 'lg';
+declare class ClxSwitchComponent implements ControlValueAccessor {
     private readonly _themeSvc;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly variant: _angular_core.InputSignal<ClxCheckboxVariant>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | undefined>;
-    protected readonly _size: _angular_core.Signal<"sm" | "md" | "lg">;
+    readonly size: _angular_core.InputSignal<ClxSwitchSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxSwitchSize>;
     readonly label: _angular_core.InputSignal<string>;
-    /** Initial value when used without FormControl */
     readonly value: _angular_core.InputSignal<boolean>;
-    /** Disabled state when used without FormControl */
     readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly changed: _angular_core.OutputEmitterRef<boolean>;
     readonly _checked: _angular_core.WritableSignal<boolean>;
     private readonly _cvaDisabled;
     private _cvaConnected;
@@ -1242,29 +992,157 @@ declare class ClxCheckboxComponent implements ControlValueAccessor {
     private _onChange;
     private _onTouched;
     protected readonly _sizeConfig: _angular_core.Signal<{
-        readonly box: "w-4 h-4";
-        readonly icon: "xs";
+        readonly track: "w-7 h-4";
+        readonly thumb: "w-3 h-3";
+        readonly translate: "translate-x-3";
         readonly label: "text-xs";
     } | {
-        readonly box: "w-5 h-5";
-        readonly icon: "xs";
+        readonly track: "w-9 h-5";
+        readonly thumb: "w-4 h-4";
+        readonly translate: "translate-x-4";
+        readonly label: "text-xs";
+    } | {
+        readonly track: "w-12 h-6";
+        readonly thumb: "w-5 h-5";
+        readonly translate: "translate-x-6";
         readonly label: "text-sm";
     } | {
-        readonly box: "w-6 h-6";
-        readonly icon: "sm";
+        readonly track: "w-14 h-7";
+        readonly thumb: "w-6 h-6";
+        readonly translate: "translate-x-7";
         readonly label: "text-base";
     }>;
-    protected readonly _boxClass: _angular_core.Signal<string>;
+    protected readonly _trackClass: _angular_core.Signal<string>;
+    protected readonly _thumbClass: _angular_core.Signal<string>;
     protected readonly _labelClass: _angular_core.Signal<string>;
     writeValue(val: boolean): void;
     registerOnChange(fn: (v: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(disabled: boolean): void;
-    protected _toggle(): void;
-    protected _onSpace(event: Event): void;
+    protected _handleChange(event: Event): void;
     protected _handleBlur(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCheckboxComponent, "clx-checkbox", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSwitchComponent, "label[clx-switch]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "changed": "changed"; }, never, never, true, never>;
+}
+
+type ClxSliderSize = 'sm' | 'md' | 'lg';
+
+declare class ClxSliderComponent implements ControlValueAccessor {
+    private readonly _themeSvc;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly activeColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _activeColor: _angular_core.Signal<ClxColorInput>;
+    readonly size: _angular_core.InputSignal<ClxSliderSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxSliderSize>;
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly step: _angular_core.InputSignal<number>;
+    readonly showTooltip: _angular_core.InputSignal<boolean>;
+    readonly showMinMax: _angular_core.InputSignal<boolean>;
+    readonly marks: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    private readonly _ngControl;
+    private readonly _rangeInput;
+    constructor();
+    protected readonly _currentValue: _angular_core.WritableSignal<number>;
+    protected readonly _cvaDisabled: _angular_core.WritableSignal<boolean>;
+    protected readonly _isFocused: _angular_core.WritableSignal<boolean>;
+    protected readonly _isActive: _angular_core.WritableSignal<boolean>;
+    protected readonly _wasTouched: _angular_core.WritableSignal<boolean>;
+    protected readonly _disabled: _angular_core.Signal<boolean>;
+    protected readonly _sizeConfig: _angular_core.Signal<{
+        trackPx: string;
+        thumbPx: string;
+        thumbRing: string;
+        label: string;
+        hint: string;
+        markW: string;
+        markH: string;
+        wrapperH: string;
+        tooltipBottom: string;
+    }>;
+    protected readonly _colorTokens: _angular_core.Signal<codexly_ui.ClxColorTokens>;
+    protected readonly _pct: _angular_core.Signal<number>;
+    protected readonly _isInvalid: _angular_core.Signal<boolean>;
+    protected readonly _trackClass: _angular_core.Signal<string>;
+    protected readonly _thumbClass: _angular_core.Signal<string>;
+    protected readonly _tickPositions: _angular_core.Signal<number[]>;
+    protected _tooltipArrowColor(): string;
+    protected _onInput(event: Event): void;
+    protected _onBlur(): void;
+    private _onChange;
+    protected _onTouched: () => void;
+    writeValue(val: number | null): void;
+    registerOnChange(fn: (v: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSliderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSliderComponent, "clx-slider", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "activeColor": { "alias": "activeColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "showMinMax": { "alias": "showMinMax"; "required": false; "isSignal": true; }; "marks": { "alias": "marks"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type ClxUploadSize = 'sm' | 'md' | 'lg';
+type ClxUploadError = 'fileType' | 'fileSize';
+
+declare class ClxUploadComponent implements ControlValueAccessor {
+    private readonly _themeSvc;
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    readonly accept: _angular_core.InputSignal<string>;
+    /** Max file size in bytes. 0 = no limit. */
+    readonly maxFileSize: _angular_core.InputSignal<number>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    readonly size: _angular_core.InputSignal<ClxUploadSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxUploadSize>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly onUploadError: _angular_core.OutputEmitterRef<{
+        file: File;
+        error: ClxUploadError;
+    }>;
+    readonly onUploadSuccess: _angular_core.OutputEmitterRef<File[]>;
+    readonly _files: _angular_core.WritableSignal<File[]>;
+    readonly _isDragging: _angular_core.WritableSignal<boolean>;
+    readonly _errorKey: _angular_core.WritableSignal<ClxUploadError | null>;
+    private readonly _ngControl;
+    private readonly _cvaDisabled;
+    private _cvaConnected;
+    private _onChange;
+    private _onTouched;
+    protected readonly _fileInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    constructor();
+    protected readonly _disabled: _angular_core.Signal<boolean>;
+    protected readonly _sizeConfig: _angular_core.Signal<{
+        zone: string;
+        icon: "sm" | "md" | "lg" | "xl";
+        title: string;
+        hint: string;
+    }>;
+    protected readonly _isError: _angular_core.Signal<boolean>;
+    protected readonly _fileItemClass: _angular_core.Signal<string>;
+    protected readonly _fileIconClass: _angular_core.Signal<string>;
+    protected readonly _zoneClass: _angular_core.Signal<string>;
+    protected readonly _iconClass: _angular_core.Signal<string>;
+    protected readonly _linkClass: _angular_core.Signal<string>;
+    protected readonly _buttonText: _angular_core.Signal<"Seleccionar archivos" | "Seleccionar archivo">;
+    protected readonly _hintText: _angular_core.Signal<string>;
+    protected readonly _errorMessage: _angular_core.Signal<string | null>;
+    private readonly _multipleEffect;
+    writeValue(value: File | File[] | null): void;
+    registerOnChange(fn: (v: File | File[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    protected _onInputChange(event: Event): void;
+    protected _onDragOver(event: DragEvent): void;
+    protected _onDragLeave(): void;
+    protected _onDrop(event: DragEvent): void;
+    protected _removeFile(file: File): void;
+    private _addFiles;
+    private _isAccepted;
+    private _emit;
+    protected _formatSize(bytes: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxUploadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxUploadComponent, "clx-upload", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onUploadError": "onUploadError"; "onUploadSuccess": "onUploadSuccess"; }, never, ["[clx-label]"], true, never>;
 }
 
 type ClxColorPickerSize = 'sm' | 'md' | 'lg';
@@ -1621,21 +1499,6 @@ declare class ClxDateRangePickerComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxDateRangePickerComponent, "clx-date-range-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusMessage": { "alias": "statusMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class ClxEditorLinkModalComponent {
-    private readonly _modalRef;
-    private readonly _themeSvc;
-    protected readonly _primaryColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
-    protected readonly _form: FormGroup<{
-        text: FormControl<string>;
-        url: FormControl<string>;
-    }>;
-    protected readonly _urlInvalid: _angular_core.WritableSignal<boolean>;
-    protected _confirm(): void;
-    protected _cancel(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxEditorLinkModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxEditorLinkModalComponent, "clx-editor-link-modal", never, {}, {}, never, never, true, never>;
-}
-
 type ClxEditorSize = 'sm' | 'md' | 'lg';
 interface ClxEditorToolbarGroup {
     /** Internal IDs of buttons to include in this group */
@@ -1658,7 +1521,7 @@ declare class ClxEditorComponent implements AfterViewInit, OnDestroy, ControlVal
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
     readonly size: _angular_core.InputSignal<ClxEditorSize | undefined>;
     protected readonly _editorSize: _angular_core.Signal<ClxEditorSize>;
-    readonly status: _angular_core.InputSignal<"default" | "error" | "success">;
+    readonly status: _angular_core.InputSignal<"error" | "default" | "success">;
     readonly statusMessage: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -1729,724 +1592,734 @@ declare class ClxEditorComponent implements AfterViewInit, OnDestroy, ControlVal
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxEditorComponent, "clx-editor", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusMessage": { "alias": "statusMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type ClxInputStatus = 'default' | 'error' | 'success';
-type ClxInputSize = 'sm' | 'md' | 'lg';
-type ClxInputType = 'text' | 'password' | 'email' | 'search' | 'tel' | 'url';
-
-declare class ClxInputComponent implements ControlValueAccessor {
+declare class ClxEditorLinkModalComponent {
+    private readonly _modalRef;
     private readonly _themeSvc;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly placeholder: _angular_core.InputSignal<string>;
-    readonly type: _angular_core.InputSignal<ClxInputType>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly hint: _angular_core.InputSignal<string>;
-    readonly prefixIcon: _angular_core.InputSignal<string>;
-    readonly suffixIcon: _angular_core.InputSignal<string>;
-    readonly prefixText: _angular_core.InputSignal<string>;
-    readonly suffixText: _angular_core.InputSignal<string>;
-    readonly status: _angular_core.InputSignal<ClxInputStatus>;
-    readonly statusMessage: _angular_core.InputSignal<string>;
-    readonly size: _angular_core.InputSignal<ClxInputSize | undefined>;
-    protected readonly _size: _angular_core.Signal<ClxInputSize>;
-    /** Initial value for standalone use (without FormControl) */
-    readonly value: _angular_core.InputSignal<string>;
-    /** Disabled state for standalone use (without FormControl) */
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly autocomplete: _angular_core.InputSignal<string | null>;
-    protected readonly _inputId: string;
-    protected readonly _showPassword: _angular_core.WritableSignal<boolean>;
-    readonly _value: _angular_core.WritableSignal<string>;
-    private readonly _cvaDisabled;
-    private _cvaConnected;
-    protected readonly _disabled: _angular_core.Signal<boolean>;
-    private readonly _valueEffect;
-    private _onChange;
-    private _onTouched;
-    protected readonly _inputType: _angular_core.Signal<ClxInputType>;
-    protected readonly _autocomplete: _angular_core.Signal<string>;
-    protected readonly _sizeConfig: _angular_core.Signal<{
-        input: string;
-        label: string;
-        hint: string;
-        iconSize: "xs" | "sm" | "md";
-        iconLeft: string;
-        iconRight: string;
-        padLeft: string;
-        padRight: string;
-        padDefaultL: string;
-        padDefaultR: string;
-    }>;
-    protected readonly _statusCfg: _angular_core.Signal<{
-        border: string;
-        ring: string;
-        msgCls: string;
-        iconName: string;
-        iconColor: string;
+    protected readonly _primaryColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    protected readonly _form: FormGroup<{
+        text: FormControl<string>;
+        url: FormControl<string>;
     }>;
-    /** True whenever the wrapper must be a flex container (prefix icon/text or suffix text) */
-    private readonly _isFlexMode;
-    protected readonly _labelClass: _angular_core.Signal<string>;
-    protected readonly _hintClass: _angular_core.Signal<string>;
-    protected readonly _wrapperClass: _angular_core.Signal<string>;
-    protected readonly _inputClass: _angular_core.Signal<string>;
-    /** Colored prefix icon cell — matches the input accent color */
-    protected readonly _prefixIconCellCls: _angular_core.Signal<string>;
-    protected readonly _suffixIconWrapCls: _angular_core.Signal<string>;
-    protected readonly _statusMsgClass: _angular_core.Signal<string>;
-    writeValue(val: string): void;
-    registerOnChange(fn: (v: string) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(disabled: boolean): void;
-    protected _handleInput(event: Event): void;
-    protected _handleBlur(): void;
-    protected _togglePassword(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxInputComponent, "clx-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "prefixText": { "alias": "prefixText"; "required": false; "isSignal": true; }; "suffixText": { "alias": "suffixText"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusMessage": { "alias": "statusMessage"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    protected readonly _urlInvalid: _angular_core.WritableSignal<boolean>;
+    protected _confirm(): void;
+    protected _cancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxEditorLinkModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxEditorLinkModalComponent, "clx-editor-link-modal", never, {}, {}, never, never, true, never>;
 }
 
-type ClxNumberVariant = 'default' | 'stepper';
-type ClxNumberSize = 'sm' | 'md' | 'lg';
-
-declare class ClxNumberComponent implements ControlValueAccessor {
-    private static _seq;
-    protected readonly _inputId: string;
-    readonly variant: _angular_core.InputSignal<ClxNumberVariant>;
-    readonly size: _angular_core.InputSignal<ClxNumberSize | undefined>;
-    protected readonly _size: _angular_core.Signal<ClxNumberSize>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+declare class ClxStepComponent {
     readonly label: _angular_core.InputSignal<string>;
-    readonly placeholder: _angular_core.InputSignal<string>;
-    readonly hint: _angular_core.InputSignal<string>;
-    readonly prefixIcon: _angular_core.InputSignal<string>;
-    readonly min: _angular_core.InputSignal<number | null>;
-    readonly max: _angular_core.InputSignal<number | null>;
-    readonly step: _angular_core.InputSignal<number>;
-    /** Initial value for standalone use (without FormControl) */
-    readonly value: _angular_core.InputSignal<number>;
-    /** Disabled state for standalone use (without FormControl) */
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly _value: _angular_core.WritableSignal<number>;
-    private readonly _cvaDisabled;
-    private _cvaConnected;
-    protected readonly _disabled: _angular_core.Signal<boolean>;
-    private readonly _valueEffect;
-    private _onChange;
-    private _onTouched;
-    protected readonly _isAtMin: _angular_core.Signal<boolean>;
-    protected readonly _isAtMax: _angular_core.Signal<boolean>;
-    private readonly _themeSvc;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _sizeConfig: _angular_core.Signal<{
-        container: string;
-        inputText: string;
-        iconSize: Extract<codexly_ui.ClxSize, "xs" | "sm" | "md">;
-        btnSize: "sm" | "md";
-        stepperCell: string;
-        label: string;
-        hint: string;
-    }>;
-    protected readonly _labelClass: _angular_core.Signal<string>;
-    protected readonly _hintClass: _angular_core.Signal<string>;
-    protected readonly _containerClass: _angular_core.Signal<string>;
-    /** Colored prefix icon cell — matches the input accent color */
-    protected readonly _prefixCellCls: _angular_core.Signal<string>;
-    /** Full class for the native input — must include structural classes since [class] replaces static ones */
-    protected readonly _inputClass: _angular_core.Signal<string>;
-    protected readonly _stepperWrapClass: _angular_core.Signal<string>;
-    protected readonly _stepperValueCls: _angular_core.Signal<string>;
-    writeValue(val: number): void;
-    registerOnChange(fn: (v: number) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(disabled: boolean): void;
-    protected _handleInput(event: Event): void;
-    protected _handleBlur(): void;
-    protected _decrement(): void;
-    protected _increment(): void;
-    private _applyValue;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxNumberComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxNumberComponent, "clx-number", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Bind to a form's valid state or a custom signal to gate the Next button */
+    readonly isValid: _angular_core.InputSignal<boolean>;
+    /** Exposed so the parent wizard can toggle visibility imperatively */
+    readonly nativeEl: HTMLElement;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxStepComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxStepComponent, "clx-step", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type ClxRadioVariant = 'solid' | 'outline';
+type ClxWizardColor = ClxColorInput;
+type ClxWizardOrientation = 'horizontal' | 'vertical';
+type ClxWizardStepStatus = 'pending' | 'active' | 'completed' | 'error';
 
-declare const CLX_RADIO_GROUP: InjectionToken<ClxRadioGroupComponent>;
-declare class ClxRadioGroupComponent implements ControlValueAccessor {
-    private readonly _themeSvc;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly resolvedColor: _angular_core.Signal<ClxColorInput>;
-    readonly variant: _angular_core.InputSignal<ClxRadioVariant>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
-    readonly direction: _angular_core.InputSignal<"vertical" | "horizontal">;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    /** Current selected value — readable by child clx-radio via injection */
-    readonly _value: _angular_core.WritableSignal<unknown>;
-    private readonly _cvaDisabled;
-    /** Merged disabled state (input + CVA) — readable by child clx-radio */
-    readonly isDisabled: _angular_core.Signal<boolean>;
-    private _onChange;
-    private _onTouched;
-    select(value: unknown): void;
-    writeValue(val: unknown): void;
-    registerOnChange(fn: (v: unknown) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(disabled: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxRadioGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxRadioGroupComponent, "clx-radio-group", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+interface ClxTabItem {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
 }
 
-declare class ClxRadioComponent {
-    /** Value this radio represents — compared against the group's selected value */
-    readonly value: _angular_core.InputSignal<unknown>;
-    readonly label: _angular_core.InputSignal<string>;
-    /** Per-radio overrides — falls back to the group's value if null */
-    readonly color: _angular_core.InputSignal<ClxColorInput | null>;
-    readonly variant: _angular_core.InputSignal<ClxRadioVariant | null>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | null>;
-    private readonly _group;
+declare class ClxWizardComponent implements AfterContentInit {
     private readonly _themeSvc;
-    protected readonly _checked: _angular_core.Signal<boolean>;
-    protected readonly _isDisabled: _angular_core.Signal<boolean>;
-    private readonly _color;
-    private readonly _variant;
-    private readonly _size;
-    protected readonly _sizeConfig: _angular_core.Signal<{
-        readonly ring: "w-4 h-4";
-        readonly dot: "w-1.5 h-1.5";
-        readonly label: "text-xs";
-    } | {
-        readonly ring: "w-5 h-5";
-        readonly dot: "w-2 h-2";
-        readonly label: "text-sm";
-    } | {
-        readonly ring: "w-6 h-6";
-        readonly dot: "w-2.5 h-2.5";
-        readonly label: "text-base";
-    }>;
-    protected readonly _ringClass: _angular_core.Signal<string>;
-    protected readonly _dotClass: _angular_core.Signal<string>;
-    protected readonly _labelClass: _angular_core.Signal<string>;
-    protected _select(): void;
-    protected _onSpace(event: Event): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxRadioComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxRadioComponent, "clx-radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    readonly color: _angular_core.InputSignal<codexly_ui.ClxColorInput | undefined>;
+    protected readonly _color: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    readonly orientation: _angular_core.InputSignal<ClxWizardOrientation>;
+    readonly linear: _angular_core.InputSignal<boolean>;
+    readonly prevLabel: _angular_core.InputSignal<string>;
+    readonly nextLabel: _angular_core.InputSignal<string>;
+    readonly finishLabel: _angular_core.InputSignal<string>;
+    readonly stepChange: _angular_core.OutputEmitterRef<number>;
+    readonly finish: _angular_core.OutputEmitterRef<void>;
+    private readonly _destroyRef;
+    private _stepQuery;
+    protected _steps: ClxStepComponent[];
+    protected readonly _currentIndex: _angular_core.WritableSignal<number>;
+    ngAfterContentInit(): void;
+    private _syncActiveAttrs;
+    protected readonly _lastIndex: _angular_core.Signal<number>;
+    protected readonly _currentStepValid: _angular_core.Signal<boolean>;
+    protected readonly _connectorFillColor: _angular_core.Signal<string>;
+    protected readonly _currentIndexStr: _angular_core.Signal<string>;
+    protected readonly _tabItems: _angular_core.Signal<ClxTabItem[]>;
+    protected _onTabChange(id: string): void;
+    protected _stepStatus(i: number): 'active' | 'completed' | 'pending' | 'error';
+    protected _isTabDisabled(i: number): boolean;
+    protected _onCircleClick(i: number): void;
+    next(): void;
+    prev(): void;
+    goTo(index: number): void;
+    private _goTo;
+    protected _onFinish(): void;
+    protected readonly _rootClass: _angular_core.Signal<string>;
+    protected _circleClass(i: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxWizardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxWizardComponent, "clx-wizard", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "finishLabel": { "alias": "finishLabel"; "required": false; "isSignal": true; }; }, { "stepChange": "stepChange"; "finish": "finish"; }, ["_stepQuery"], ["*", "[clx-wizard-footer-start]"], true, never>;
 }
 
-declare class ClxSelectComponent implements ControlValueAccessor {
-    readonly label: _angular_core.InputSignal<string>;
-    readonly placeholder: _angular_core.InputSignal<string>;
-    readonly options: _angular_core.InputSignal<ClxSelectOption[]>;
-    readonly multiple: _angular_core.InputSignal<boolean>;
-    readonly searchable: _angular_core.InputSignal<boolean>;
-    readonly searchPlaceholder: _angular_core.InputSignal<string>;
+declare class ClxAppLayoutComponent implements OnInit, OnDestroy {
+    private readonly _zone;
+    private readonly _document;
     readonly activeColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<ClxSelectSize | undefined>;
-    protected readonly _size: Signal<ClxSelectSize>;
-    readonly hint: _angular_core.InputSignal<string>;
-    readonly errorMessage: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly async: _angular_core.InputSignal<boolean>;
-    readonly loadOptions: _angular_core.InputSignal<((query: string) => Observable<ClxSelectOption[]>) | null>;
-    readonly debounceMs: _angular_core.InputSignal<number>;
-    readonly minChars: _angular_core.InputSignal<number>;
-    private static _seq;
-    protected readonly _labelId: string;
-    protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
-    protected readonly _overlayWidthPx: _angular_core.WritableSignal<number>;
-    protected readonly _searchControl: FormControl<string | null>;
-    protected readonly _searchQuery: Signal<string>;
-    protected readonly _asyncOptions: _angular_core.WritableSignal<ClxSelectOption[]>;
-    protected readonly _asyncLoading: _angular_core.WritableSignal<boolean>;
-    protected readonly _asyncQuery: _angular_core.WritableSignal<string>;
-    private readonly _wasTouched;
-    private readonly _selectedVals;
-    private readonly _cvaDisabled;
-    private readonly _themeSvc;
-    private readonly _ngControl;
-    protected readonly _activeColor: Signal<ClxColorInput>;
-    private readonly _el;
-    private readonly _sso;
-    private readonly _isBrowser;
-    private readonly _loadedFonts;
-    readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
+    readonly _sidebarOpen: _angular_core.WritableSignal<boolean>;
+    readonly collapsed: _angular_core.WritableSignal<boolean>;
+    readonly _hovered: _angular_core.WritableSignal<boolean>;
+    private readonly _isMobile;
+    readonly collapsedChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
     constructor();
-    private _onChange;
-    private _onTouched;
-    readonly _positions: ConnectedPosition[];
-    protected readonly _disabled: Signal<boolean>;
-    protected readonly _sizeConfig: Signal<{
-        minH: string;
-        text: string;
-        label: string;
-        hint: string;
-        px: string;
-        py: string;
-        gap: string;
-        tagSize: "sm" | "md";
-        btnSize: "xs" | "sm";
-    }>;
-    protected readonly _hasValue: Signal<boolean>;
-    protected readonly _isInvalid: Signal<boolean>;
-    protected readonly _selectedOptions: Signal<ClxSelectOption[]>;
-    protected readonly _filteredOptions: Signal<ClxSelectOption[]>;
-    protected readonly _showAsyncPlaceholder: Signal<boolean>;
-    protected readonly _displayValue: Signal<string>;
-    protected readonly _displayFontFamily: Signal<string | null>;
-    protected readonly _overlayWidth: Signal<number>;
-    protected readonly _labelClass: Signal<string>;
-    protected readonly _hintClass: Signal<string>;
-    protected readonly _triggerClass: Signal<string>;
-    protected readonly _singleDisplayClass: Signal<string>;
-    protected readonly _tagContainerClass: Signal<string>;
-    protected readonly _placeholderClass: Signal<string>;
-    protected readonly _chevronBtnClass: Signal<"transition-transform duration-200 rotate-180" | "transition-transform duration-200">;
-    protected readonly _panelClass: Signal<string>;
-    protected _isSelected(value: string | number): boolean;
-    protected _optionClass(opt: ClxSelectOption): string;
-    protected _togglePanel(): void;
-    private _openPanel;
-    private _loadPreviewFont;
-    protected _closePanel(): void;
-    protected _selectOption(opt: ClxSelectOption): void;
-    protected _deselect(value: string | number): void;
-    protected _clearAll(): void;
-    protected _onTriggerKeydown(event: KeyboardEvent): void;
-    protected _onOverlayKeydown(event: KeyboardEvent): void;
-    onEscape(): void;
-    writeValue(val: string | number | (string | number)[] | null): void;
-    registerOnChange(fn: (v: string | number | (string | number)[] | null) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(disabled: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSelectComponent, "clx-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "activeColor": { "alias": "activeColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "async": { "alias": "async"; "required": false; "isSignal": true; }; "loadOptions": { "alias": "loadOptions"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    protected readonly _showBackdrop: _angular_core.Signal<boolean>;
+    readonly _isExpanded: _angular_core.Signal<boolean>;
+    protected readonly _sidebarCls: _angular_core.Signal<string>;
+    private _mql;
+    private _mqlListener;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    _toggleCollapsed(): void;
+    _onSidebarEnter(): void;
+    _onSidebarLeave(): void;
+    toggleSidebar(): void;
+    openSidebar(): void;
+    closeSidebar(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxAppLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxAppLayoutComponent, "clx-app-layout", never, { "activeColor": { "alias": "activeColor"; "required": false; "isSignal": true; }; }, { "collapsedChange": "collapsedChange"; "expandedChange": "expandedChange"; }, never, ["clx-brand", "[clx-sidebar]", "[clx-header]", "*"], true, never>;
 }
 
-type ClxSliderSize = 'sm' | 'md' | 'lg';
+declare class ClxBrandComponent {
+    readonly logo: _angular_core.InputSignal<string>;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly collapsed: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxBrandComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxBrandComponent, "clx-brand", never, { "logo": { "alias": "logo"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
 
-declare class ClxSliderComponent implements ControlValueAccessor {
+declare class ClxMenuComponent implements AfterViewInit {
     private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
-    readonly hint: _angular_core.InputSignal<string>;
-    readonly errorMessage: _angular_core.InputSignal<string>;
-    readonly activeColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _activeColor: _angular_core.Signal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxSliderSize | undefined>;
-    protected readonly _size: _angular_core.Signal<ClxSliderSize>;
-    readonly min: _angular_core.InputSignal<number>;
-    readonly max: _angular_core.InputSignal<number>;
-    readonly step: _angular_core.InputSignal<number>;
-    readonly showTooltip: _angular_core.InputSignal<boolean>;
-    readonly showMinMax: _angular_core.InputSignal<boolean>;
-    readonly marks: _angular_core.InputSignal<boolean>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    private readonly _ngControl;
-    private readonly _rangeInput;
-    constructor();
-    protected readonly _currentValue: _angular_core.WritableSignal<number>;
-    protected readonly _cvaDisabled: _angular_core.WritableSignal<boolean>;
-    protected readonly _isFocused: _angular_core.WritableSignal<boolean>;
-    protected readonly _isActive: _angular_core.WritableSignal<boolean>;
-    protected readonly _wasTouched: _angular_core.WritableSignal<boolean>;
-    protected readonly _disabled: _angular_core.Signal<boolean>;
-    protected readonly _sizeConfig: _angular_core.Signal<{
-        trackPx: string;
-        thumbPx: string;
-        thumbRing: string;
-        label: string;
-        hint: string;
-        markW: string;
-        markH: string;
-        wrapperH: string;
-        tooltipBottom: string;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    readonly collapsed: _angular_core.InputSignal<boolean>;
+    readonly active: _angular_core.InputSignal<boolean>;
+    readonly routerLink: _angular_core.InputSignal<string | any[]>;
+    readonly routerLinkActiveOptions: _angular_core.InputSignal<{
+        exact: boolean;
     }>;
-    protected readonly _colorTokens: _angular_core.Signal<codexly_ui.ClxColorTokens>;
-    protected readonly _pct: _angular_core.Signal<number>;
-    protected readonly _isInvalid: _angular_core.Signal<boolean>;
-    protected readonly _trackClass: _angular_core.Signal<string>;
-    protected readonly _thumbClass: _angular_core.Signal<string>;
-    protected readonly _tickPositions: _angular_core.Signal<number[]>;
-    protected _tooltipArrowColor(): string;
-    protected _onInput(event: Event): void;
-    protected _onBlur(): void;
-    private _onChange;
-    protected _onTouched: () => void;
-    writeValue(val: number | null): void;
-    registerOnChange(fn: (v: number) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(disabled: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSliderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSliderComponent, "clx-slider", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "activeColor": { "alias": "activeColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "showMinMax": { "alias": "showMinMax"; "required": false; "isSignal": true; }; "marks": { "alias": "marks"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    readonly _isExpanded: _angular_core.WritableSignal<boolean>;
+    private readonly _rla?;
+    private readonly _destroyRef;
+    constructor();
+    ngAfterViewInit(): void;
+    protected readonly _iconCls: _angular_core.Signal<string>;
+    protected _buttonCls(isActive: boolean): string;
+    protected readonly NAV_CHILDREN_WRAPPER = "grid transition-[grid-template-rows] duration-300 ease-in-out";
+    protected readonly NAV_CHILDREN_INNER = "overflow-hidden";
+    protected readonly NAV_CHILDREN_LIST = "ml-6 py-1 space-y-0.5";
+    protected _toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxMenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxMenuComponent, "clx-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type ClxSwitchSize = 'xs' | 'sm' | 'md' | 'lg';
-declare class ClxSwitchComponent implements ControlValueAccessor {
+declare class ClxMenuItemComponent {
     private readonly _themeSvc;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxSwitchSize | undefined>;
-    protected readonly _size: _angular_core.Signal<ClxSwitchSize>;
     readonly label: _angular_core.InputSignal<string>;
-    readonly value: _angular_core.InputSignal<boolean>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly changed: _angular_core.OutputEmitterRef<boolean>;
-    readonly _checked: _angular_core.WritableSignal<boolean>;
-    private readonly _cvaDisabled;
-    private _cvaConnected;
-    protected readonly _disabled: _angular_core.Signal<boolean>;
-    private readonly _valueEffect;
-    private _onChange;
-    private _onTouched;
-    protected readonly _sizeConfig: _angular_core.Signal<{
-        readonly track: "w-7 h-4";
-        readonly thumb: "w-3 h-3";
-        readonly translate: "translate-x-3";
-        readonly label: "text-xs";
-    } | {
-        readonly track: "w-9 h-5";
-        readonly thumb: "w-4 h-4";
-        readonly translate: "translate-x-4";
-        readonly label: "text-xs";
-    } | {
-        readonly track: "w-12 h-6";
-        readonly thumb: "w-5 h-5";
-        readonly translate: "translate-x-6";
-        readonly label: "text-sm";
-    } | {
-        readonly track: "w-14 h-7";
-        readonly thumb: "w-6 h-6";
-        readonly translate: "translate-x-7";
-        readonly label: "text-base";
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly active: _angular_core.InputSignal<boolean>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly nested: _angular_core.InputSignal<boolean>;
+    readonly collapsed: _angular_core.InputSignal<boolean>;
+    readonly routerLink: _angular_core.InputSignal<string | any[]>;
+    readonly routerLinkActiveOptions: _angular_core.InputSignal<{
+        exact: boolean;
     }>;
-    protected readonly _trackClass: _angular_core.Signal<string>;
-    protected readonly _thumbClass: _angular_core.Signal<string>;
-    protected readonly _labelClass: _angular_core.Signal<string>;
-    writeValue(val: boolean): void;
-    registerOnChange(fn: (v: boolean) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(disabled: boolean): void;
-    protected _handleChange(event: Event): void;
-    protected _handleBlur(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSwitchComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxSwitchComponent, "label[clx-switch]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "changed": "changed"; }, never, never, true, never>;
+    readonly itemClick: _angular_core.OutputEmitterRef<void>;
+    private readonly _resolvedColor;
+    private readonly _geom;
+    protected readonly _iconCls: _angular_core.Signal<string>;
+    protected readonly _idleCls: _angular_core.Signal<string>;
+    protected readonly _activeCls: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxMenuItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxMenuItemComponent, "clx-menu-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "nested": { "alias": "nested"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
-type ClxTextareaStatus = 'default' | 'error' | 'success';
-type ClxTextareaSize = 'sm' | 'md' | 'lg';
-type ClxTextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
-
-declare class ClxTextareaComponent implements ControlValueAccessor {
+declare class ClxNavGroupComponent {
     readonly label: _angular_core.InputSignal<string>;
-    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly collapsed: _angular_core.InputSignal<boolean>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<ClxTextareaSize | undefined>;
-    protected readonly _size: _angular_core.Signal<ClxTextareaSize>;
-    readonly status: _angular_core.InputSignal<ClxTextareaStatus>;
-    readonly statusMessage: _angular_core.InputSignal<string>;
-    readonly hint: _angular_core.InputSignal<string>;
-    readonly prefixIcon: _angular_core.InputSignal<string>;
-    readonly suffixIcon: _angular_core.InputSignal<string>;
-    readonly resize: _angular_core.InputSignal<ClxTextareaResize>;
-    readonly rows: _angular_core.InputSignal<number>;
-    readonly maxLength: _angular_core.InputSignal<number>;
-    readonly value: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    protected readonly _taId: string;
-    readonly _value: _angular_core.WritableSignal<string>;
+    readonly labelClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxNavGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxNavGroupComponent, "clx-nav-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface ClxProfileMenuItem {
+    label: string;
+    icon: string;
+    action: string;
+}
+declare class ClxProfileComponent {
+    readonly firstName: _angular_core.InputSignal<string>;
+    readonly lastName: _angular_core.InputSignal<string>;
+    readonly username: _angular_core.InputSignal<string>;
+    readonly role: _angular_core.InputSignal<string>;
+    readonly avatarSrc: _angular_core.InputSignal<string | null>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly menuItems: _angular_core.InputSignal<ClxProfileMenuItem[]>;
+    readonly signOutLabel: _angular_core.InputSignal<string>;
+    readonly menuAction: _angular_core.OutputEmitterRef<string>;
+    readonly signOut: _angular_core.OutputEmitterRef<void>;
     private readonly _themeSvc;
-    private readonly _cvaDisabled;
-    private _cvaConnected;
-    protected readonly _disabled: _angular_core.Signal<boolean>;
-    private readonly _valueEffect;
-    private _onChange;
-    private _onTouched;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _sizeCfg: _angular_core.Signal<{
-        textarea: string;
-        label: string;
-        hint: string;
-        iconSize: "xs" | "sm" | "md";
-        iconRight: string;
-        padDefaultL: string;
-        padDefaultR: string;
-        padRight: string;
-    }>;
-    protected readonly _statusCfg: _angular_core.Signal<{
-        border: string;
-        ring: string;
-        msgCls: string;
-        iconName: string;
-        iconColor: string;
-    }>;
-    protected readonly _labelClass: _angular_core.Signal<string>;
-    protected readonly _hintClass: _angular_core.Signal<string>;
+    private readonly _sso;
+    readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
+    readonly _positions: ConnectedPosition[];
+    protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
+    readonly fullName: _angular_core.Signal<string>;
+    protected readonly _initials: _angular_core.Signal<string>;
+    protected readonly _ringClass: _angular_core.Signal<string>;
+    protected readonly _headerBgClass: _angular_core.Signal<string>;
+    protected _toggle(): void;
+    protected _close(): void;
+    protected _onKeydown(event: KeyboardEvent): void;
+    protected _onAction(action: string): void;
+    protected _onSignOut(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProfileComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProfileComponent, "clx-profile", never, { "firstName": { "alias": "firstName"; "required": false; "isSignal": true; }; "lastName": { "alias": "lastName"; "required": false; "isSignal": true; }; "username": { "alias": "username"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "signOutLabel": { "alias": "signOutLabel"; "required": false; "isSignal": true; }; }, { "menuAction": "menuAction"; "signOut": "signOut"; }, never, never, true, never>;
+}
+
+type ClxAnimateAttentionSeeker = 'bounce' | 'flash' | 'pulse' | 'rubberBand' | 'shakeX' | 'shakeY' | 'headShake' | 'swing' | 'tada' | 'wobble' | 'jello' | 'heartBeat';
+type ClxAnimateBackEntrance = 'backInDown' | 'backInLeft' | 'backInRight' | 'backInUp';
+type ClxAnimateBackExit = 'backOutDown' | 'backOutLeft' | 'backOutRight' | 'backOutUp';
+type ClxAnimateBouncingEntrance = 'bounceIn' | 'bounceInDown' | 'bounceInLeft' | 'bounceInRight' | 'bounceInUp';
+type ClxAnimateBouncingExit = 'bounceOut' | 'bounceOutDown' | 'bounceOutLeft' | 'bounceOutRight' | 'bounceOutUp';
+type ClxAnimateFadingEntrance = 'fadeIn' | 'fadeInDown' | 'fadeInDownBig' | 'fadeInLeft' | 'fadeInLeftBig' | 'fadeInRight' | 'fadeInRightBig' | 'fadeInUp' | 'fadeInUpBig' | 'fadeInTopLeft' | 'fadeInTopRight' | 'fadeInBottomLeft' | 'fadeInBottomRight';
+type ClxAnimateFadingExit = 'fadeOut' | 'fadeOutDown' | 'fadeOutDownBig' | 'fadeOutLeft' | 'fadeOutLeftBig' | 'fadeOutRight' | 'fadeOutRightBig' | 'fadeOutUp' | 'fadeOutUpBig' | 'fadeOutTopLeft' | 'fadeOutTopRight' | 'fadeOutBottomRight' | 'fadeOutBottomLeft';
+type ClxAnimateFlipper = 'flip' | 'flipInX' | 'flipInY' | 'flipOutX' | 'flipOutY';
+type ClxAnimateLightspeed = 'lightSpeedInRight' | 'lightSpeedInLeft' | 'lightSpeedOutRight' | 'lightSpeedOutLeft';
+type ClxAnimateRotatingEntrance = 'rotateIn' | 'rotateInDownLeft' | 'rotateInDownRight' | 'rotateInUpLeft' | 'rotateInUpRight';
+type ClxAnimateRotatingExit = 'rotateOut' | 'rotateOutDownLeft' | 'rotateOutDownRight' | 'rotateOutUpLeft' | 'rotateOutUpRight';
+type ClxAnimateSpecial = 'hinge' | 'jackInTheBox' | 'rollIn' | 'rollOut';
+type ClxAnimateZoomingEntrance = 'zoomIn' | 'zoomInDown' | 'zoomInLeft' | 'zoomInRight' | 'zoomInUp';
+type ClxAnimateZoomingExit = 'zoomOut' | 'zoomOutDown' | 'zoomOutLeft' | 'zoomOutRight' | 'zoomOutUp';
+type ClxAnimateSlidingEntrance = 'slideInDown' | 'slideInLeft' | 'slideInRight' | 'slideInUp';
+type ClxAnimateSlidingExit = 'slideOutDown' | 'slideOutLeft' | 'slideOutRight' | 'slideOutUp';
+type ClxAnimateName = ClxAnimateAttentionSeeker | ClxAnimateBackEntrance | ClxAnimateBackExit | ClxAnimateBouncingEntrance | ClxAnimateBouncingExit | ClxAnimateFadingEntrance | ClxAnimateFadingExit | ClxAnimateFlipper | ClxAnimateLightspeed | ClxAnimateRotatingEntrance | ClxAnimateRotatingExit | ClxAnimateSpecial | ClxAnimateZoomingEntrance | ClxAnimateZoomingExit | ClxAnimateSlidingEntrance | ClxAnimateSlidingExit;
+type ClxAnimateTrigger = 'click' | 'hover' | 'hoverLeave' | 'onEnter' | 'onLeave' | 'manual';
+interface ClxAnimateConfig {
+    animation: ClxAnimateName;
+    trigger?: ClxAnimateTrigger;
+    duration?: number;
+    delay?: number;
+    repeat?: number | 'infinite';
+    easing?: string;
+    fillMode?: 'none' | 'forwards' | 'backwards' | 'both';
+    once?: boolean;
+    threshold?: number;
+}
+type ClxAnimateDefaults = Partial<Pick<ClxAnimateConfig, 'duration' | 'delay' | 'repeat' | 'easing' | 'fillMode' | 'once' | 'threshold'>>;
+interface ClxAnimateEvent {
+    element: HTMLElement;
+    animation: ClxAnimateName;
+    timestamp: number;
+}
+
+type ClxModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+interface ClxModalButtonOptions {
+    text: string;
+    color?: ClxButtonColor;
+    variant?: ClxButtonVariant;
+}
+interface ClxModalConfig<D = unknown> {
+    /** Width preset. Default: 'md' */
+    size?: ClxModalSize;
+    /** Show the dark backdrop. Default: true */
+    hasBackdrop?: boolean;
+    /** Prevent closing on backdrop click / Escape. Default: false */
+    disableClose?: boolean;
+    /** Extra CSS classes added to the overlay pane */
+    panelClass?: string | string[];
+    /** Data injected into the opened component via CLX_MODAL_DATA token */
+    data?: D;
+    /** Entrance animation name. Default: 'fadeInDown' */
+    animationIn?: ClxAnimateName;
+    /** Exit animation name. Default: 'fadeOutUp' */
+    animationOut?: ClxAnimateName;
+    /** Animation duration in ms. Default: 300 */
+    animationDuration?: number;
+}
+interface ClxModalRef<R = unknown> {
+    /** Closes the modal and emits the result */
+    close(result?: R): void;
+    /** Promise that resolves with the result when the modal closes */
+    afterClosed(): Promise<R | undefined>;
+}
+
+declare class ClxModalComponent {
+    readonly size: _angular_core.InputSignal<ClxModalSize | null>;
+    readonly showClose: _angular_core.InputSignal<boolean>;
+    readonly confirmButton: _angular_core.InputSignal<ClxModalButtonOptions | undefined>;
+    readonly cancelButton: _angular_core.InputSignal<ClxModalButtonOptions | undefined>;
+    readonly showCancelButton: _angular_core.InputSignal<boolean>;
+    readonly confirmClick: _angular_core.OutputEmitterRef<void>;
+    readonly cancelClick: _angular_core.OutputEmitterRef<void>;
+    private readonly _modalRef;
+    private readonly _sizeToken;
+    private readonly _themeSvc;
+    protected readonly _resolvedSize: _angular_core.Signal<ClxModalSize>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    protected readonly _hasBuiltInButtons: _angular_core.Signal<boolean>;
+    protected readonly _confirmText: _angular_core.Signal<string>;
+    protected readonly _confirmColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    protected readonly _confirmVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
+    protected readonly _cancelText: _angular_core.Signal<string>;
+    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    protected readonly _cancelVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
+    protected _close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxModalComponent, "clx-modal", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "confirmButton": { "alias": "confirmButton"; "required": false; "isSignal": true; }; "cancelButton": { "alias": "cancelButton"; "required": false; "isSignal": true; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; "isSignal": true; }; }, { "confirmClick": "confirmClick"; "cancelClick": "cancelClick"; }, never, ["[clx-modal-title]", "*", "[clx-modal-footer]"], true, never>;
+}
+
+type ClxDrawerSize = 'sm' | 'md' | 'lg';
+interface ClxDrawerButtonOptions {
+    text: string;
+    color?: ClxButtonColor;
+    variant?: ClxButtonVariant;
+}
+interface ClxDrawerConfig<D = unknown> {
+    /** Width preset. Default: 'md' */
+    size?: ClxDrawerSize;
+    /** Show the dark backdrop. Default: false */
+    hasBackdrop?: boolean;
+    /** Prevent closing on backdrop click / Escape. Default: false */
+    disableClose?: boolean;
+    /** Extra CSS classes added to the overlay pane */
+    panelClass?: string | string[];
+    /** Data injected into the opened component via CLX_MODAL_DATA token */
+    data?: D;
+}
+interface ClxDrawerRef<R = unknown> {
+    close(result?: R): void;
+    afterClosed(): Promise<R | undefined>;
+}
+
+declare class ClxDrawerComponent {
+    readonly size: _angular_core.InputSignal<ClxDrawerSize | null>;
+    readonly showClose: _angular_core.InputSignal<boolean>;
+    readonly confirmButton: _angular_core.InputSignal<ClxDrawerButtonOptions | undefined>;
+    readonly cancelButton: _angular_core.InputSignal<ClxDrawerButtonOptions | undefined>;
+    readonly showCancelButton: _angular_core.InputSignal<boolean>;
+    readonly confirmClick: _angular_core.OutputEmitterRef<void>;
+    readonly cancelClick: _angular_core.OutputEmitterRef<void>;
+    private readonly _modalRef;
+    private readonly _sizeToken;
+    private readonly _themeSvc;
+    protected readonly _resolvedSize: _angular_core.Signal<ClxDrawerSize>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    protected readonly _hasBuiltInButtons: _angular_core.Signal<boolean>;
+    protected readonly _confirmText: _angular_core.Signal<string>;
+    protected readonly _confirmColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    protected readonly _confirmVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
+    protected readonly _cancelText: _angular_core.Signal<string>;
+    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    protected readonly _cancelVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
+    protected _close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxDrawerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxDrawerComponent, "clx-drawer", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "confirmButton": { "alias": "confirmButton"; "required": false; "isSignal": true; }; "cancelButton": { "alias": "cancelButton"; "required": false; "isSignal": true; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; "isSignal": true; }; }, { "confirmClick": "confirmClick"; "cancelClick": "cancelClick"; }, never, ["[clx-drawer-title]", "*", "[clx-drawer-footer]"], true, never>;
+}
+
+declare class ClxAlertComponent implements OnInit, OnDestroy {
+    private readonly _opts;
+    private readonly _resolve;
+    private readonly _animate;
+    private readonly _el;
+    private readonly _themeSvc;
+    private readonly _zone;
+    constructor();
+    private get _type();
+    private get _isConfirm();
+    protected readonly _icon: _angular_core.WritableSignal<string>;
+    protected readonly _title: _angular_core.WritableSignal<string>;
+    protected readonly _message: _angular_core.WritableSignal<string>;
+    protected readonly _showCancel: _angular_core.WritableSignal<boolean>;
+    protected readonly _iconBg: _angular_core.Signal<string>;
+    protected readonly _iconColor: _angular_core.Signal<string>;
+    protected readonly _progressColor: _angular_core.Signal<string>;
+    protected readonly _confirmText: _angular_core.WritableSignal<string>;
+    protected readonly _confirmColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    protected readonly _cancelText: _angular_core.WritableSignal<string>;
+    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    protected readonly _cancelVariant: _angular_core.WritableSignal<ClxButtonVariant>;
+    protected readonly _timerTotal: _angular_core.WritableSignal<number>;
+    protected readonly _progressPct: _angular_core.WritableSignal<number>;
+    private _timerHandle;
+    private _destroyed;
+    private get _card();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    confirm(): void;
+    dismiss(): void;
+    private _close;
+    private _startTimer;
+    private _stopTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxAlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxAlertComponent, "clx-alert", never, {}, {}, never, never, true, never>;
+}
+
+type ClxAlertType = 'success' | 'danger' | 'warning' | 'info' | 'confirm';
+type ClxAlertResult = boolean;
+interface ClxAlertButtonOptions {
+    text: string;
+    color?: ClxButtonColor;
+    variant?: ClxButtonVariant;
+}
+interface ClxAlertOptions {
+    /** Alert type — drives icon, color and defaults. */
+    type?: ClxAlertType;
+    /** Dialog title. Supports safe HTML string. */
+    title?: string;
+    /** Body message. Supports safe HTML string. */
+    message?: string;
+    /** Show a cancel / secondary button. Default: false (true for 'confirm'). */
+    showCancelButton?: boolean;
+    /** Confirm button config. */
+    confirmButton?: ClxAlertButtonOptions;
+    /** Cancel button config. */
+    cancelButton?: ClxAlertButtonOptions;
+    /** animate.css entrance animation name. Default: 'zoomIn' */
+    animationIn?: ClxAnimateName;
+    /** animate.css exit animation name. Default: 'zoomOut' */
+    animationOut?: ClxAnimateName;
+    /** Duration of entrance/exit animations in ms. Default: 400 */
+    animationDuration?: number;
     /**
-     * Outer flex wrapper — owns the border, border-radius and focus ring.
-     * The border sits here (not on the textarea) so the prefix cell blends in
-     * seamlessly, exactly like clx-input does in flex mode.
+     * Auto-close timer in milliseconds.
+     * When set, a progress bar counts down and the dialog closes automatically
+     * resolving to `false`.
      */
-    protected readonly _wrapperClass: _angular_core.Signal<string>;
-    /** Prefix icon cell — flex column, full height of the wrapper */
-    protected readonly _prefixCellCls: _angular_core.Signal<string>;
-    /** Textarea itself — no border (border lives on the wrapper), fills flex-1 */
-    protected readonly _textareaClass: _angular_core.Signal<string>;
-    /** Suffix icon — absolute inside the inner relative wrapper */
-    protected readonly _suffixIconWrapCls: _angular_core.Signal<string>;
-    protected readonly _statusMsgClass: _angular_core.Signal<string>;
-    protected readonly _counterClass: _angular_core.Signal<string>;
-    writeValue(val: string): void;
-    registerOnChange(fn: (v: string) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(disabled: boolean): void;
-    protected _handleInput(event: Event): void;
-    protected _handleBlur(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTextareaComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTextareaComponent, "clx-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusMessage": { "alias": "statusMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    timer?: number;
+    /** Show backdrop blur. Default: true */
+    backdrop?: boolean;
+    /** Prevent closing on backdrop click. Default: false */
+    disableClose?: boolean;
 }
 
-type ClxUploadSize = 'sm' | 'md' | 'lg';
-type ClxUploadError = 'fileType' | 'fileSize';
+type ClxToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left';
+type ClxToastType = ClxColor;
+interface ClxToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ClxToastOptions {
+    type?: ClxToastType;
+    message: string;
+    title?: string;
+    icon?: string;
+    position?: ClxToastPosition;
+    duration?: number;
+    showProgress?: boolean;
+    pauseOnHover?: boolean;
+    animationIn?: ClxAnimateName;
+    animationOut?: ClxAnimateName;
+    animationDuration?: number;
+    action?: ClxToastAction;
+}
+interface ClxToastEntry extends Required<Omit<ClxToastOptions, 'title' | 'action' | 'icon'>> {
+    id: string;
+    title?: string;
+    icon?: string;
+    action?: ClxToastAction;
+    removing: boolean;
+}
 
-declare class ClxUploadComponent implements ControlValueAccessor {
-    private readonly _themeSvc;
-    readonly multiple: _angular_core.InputSignal<boolean>;
-    readonly accept: _angular_core.InputSignal<string>;
-    /** Max file size in bytes. 0 = no limit. */
-    readonly maxFileSize: _angular_core.InputSignal<number>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxUploadSize | undefined>;
-    protected readonly _size: _angular_core.Signal<ClxUploadSize>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly onUploadError: _angular_core.OutputEmitterRef<{
-        file: File;
-        error: ClxUploadError;
-    }>;
-    readonly onUploadSuccess: _angular_core.OutputEmitterRef<File[]>;
-    readonly _files: _angular_core.WritableSignal<File[]>;
-    readonly _isDragging: _angular_core.WritableSignal<boolean>;
-    readonly _errorKey: _angular_core.WritableSignal<ClxUploadError | null>;
-    private readonly _ngControl;
-    private readonly _cvaDisabled;
-    private _cvaConnected;
-    private _onChange;
-    private _onTouched;
-    protected readonly _fileInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+declare class ClxToastComponent implements OnInit, OnDestroy {
+    readonly entry: _angular_core.InputSignal<ClxToastEntry>;
+    readonly dismiss: _angular_core.OutputEmitterRef<string>;
+    private readonly _animate;
+    private readonly _el;
+    private readonly _zone;
     constructor();
-    protected readonly _disabled: _angular_core.Signal<boolean>;
-    protected readonly _sizeConfig: _angular_core.Signal<{
-        zone: string;
-        icon: "sm" | "md" | "lg" | "xl";
-        title: string;
-        hint: string;
-    }>;
-    protected readonly _isError: _angular_core.Signal<boolean>;
-    protected readonly _fileItemClass: _angular_core.Signal<string>;
-    protected readonly _fileIconClass: _angular_core.Signal<string>;
-    protected readonly _zoneClass: _angular_core.Signal<string>;
-    protected readonly _iconClass: _angular_core.Signal<string>;
-    protected readonly _linkClass: _angular_core.Signal<string>;
-    protected readonly _buttonText: _angular_core.Signal<"Seleccionar archivos" | "Seleccionar archivo">;
-    protected readonly _hintText: _angular_core.Signal<string>;
-    protected readonly _errorMessage: _angular_core.Signal<string | null>;
-    private readonly _multipleEffect;
-    writeValue(value: File | File[] | null): void;
-    registerOnChange(fn: (v: File | File[] | null) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(disabled: boolean): void;
-    protected _onInputChange(event: Event): void;
-    protected _onDragOver(event: DragEvent): void;
-    protected _onDragLeave(): void;
-    protected _onDrop(event: DragEvent): void;
-    protected _removeFile(file: File): void;
-    private _addFiles;
-    private _isAccepted;
-    private _emit;
-    protected _formatSize(bytes: number): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxUploadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxUploadComponent, "clx-upload", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onUploadError": "onUploadError"; "onUploadSuccess": "onUploadSuccess"; }, never, ["[clx-label]"], true, never>;
+    protected readonly _progressPct: _angular_core.WritableSignal<number>;
+    private _timerHandle;
+    private _paused;
+    private _elapsed;
+    private _destroyed;
+    protected readonly _icon: _angular_core.Signal<string>;
+    protected readonly _borderClass: _angular_core.Signal<string>;
+    protected readonly _colorClass: _angular_core.Signal<string>;
+    protected readonly _progressColor: _angular_core.Signal<string>;
+    protected readonly _buttonColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    private get _card();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected _onMouseEnter(): void;
+    protected _onMouseLeave(): void;
+    protected _onAction(): void;
+    playExitAnimation(): Promise<void>;
+    private _startTimer;
+    private _stopTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxToastComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxToastComponent, "clx-toast", never, { "entry": { "alias": "entry"; "required": true; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
 }
 
-declare class ClxStepComponent {
-    readonly label: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
-    readonly icon: _angular_core.InputSignal<string>;
-    /** Bind to a form's valid state or a custom signal to gate the Next button */
-    readonly isValid: _angular_core.InputSignal<boolean>;
-    /** Exposed so the parent wizard can toggle visibility imperatively */
-    readonly nativeEl: HTMLElement;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxStepComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxStepComponent, "clx-step", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+declare class ClxToastContainerComponent {
+    readonly entries: _angular_core.ModelSignal<ClxToastEntry[]>;
+    readonly position: _angular_core.ModelSignal<ClxToastPosition>;
+    toastRefs: QueryList<ClxToastComponent>;
+    protected readonly _positionClass: _angular_core.Signal<string>;
+    requestDismiss(id: string): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxToastContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxToastContainerComponent, "clx-toast-container", never, { "entries": { "alias": "entries"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "entries": "entriesChange"; "position": "positionChange"; }, never, never, true, never>;
 }
 
-type ClxWizardColor = ClxColorInput;
-type ClxWizardOrientation = 'horizontal' | 'vertical';
-type ClxWizardStepStatus = 'pending' | 'active' | 'completed' | 'error';
+declare class ClxTabDirective {
+    readonly templateRef: TemplateRef<unknown>;
+    readonly clxTabPanel: _angular_core.InputSignal<string>;
+    constructor(templateRef: TemplateRef<unknown>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTabDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxTabDirective, "[clxTabPanel]", never, { "clxTabPanel": { "alias": "clxTabPanel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
 
-declare class ClxWizardComponent implements AfterContentInit {
+declare class ClxTabsComponent {
     private readonly _themeSvc;
-    readonly color: _angular_core.InputSignal<codexly_ui.ClxColorInput | undefined>;
-    protected readonly _color: _angular_core.Signal<codexly_ui.ClxColorInput>;
-    readonly orientation: _angular_core.InputSignal<ClxWizardOrientation>;
-    readonly linear: _angular_core.InputSignal<boolean>;
-    readonly prevLabel: _angular_core.InputSignal<string>;
-    readonly nextLabel: _angular_core.InputSignal<string>;
-    readonly finishLabel: _angular_core.InputSignal<string>;
-    readonly stepChange: _angular_core.OutputEmitterRef<number>;
-    readonly finish: _angular_core.OutputEmitterRef<void>;
-    private readonly _destroyRef;
-    private _stepQuery;
-    protected _steps: ClxStepComponent[];
-    protected readonly _currentIndex: _angular_core.WritableSignal<number>;
-    ngAfterContentInit(): void;
-    private _syncActiveAttrs;
-    protected readonly _lastIndex: _angular_core.Signal<number>;
-    protected readonly _currentStepValid: _angular_core.Signal<boolean>;
-    protected readonly _connectorFillColor: _angular_core.Signal<string>;
-    protected readonly _currentIndexStr: _angular_core.Signal<string>;
-    protected readonly _tabItems: _angular_core.Signal<ClxTabItem[]>;
-    protected _onTabChange(id: string): void;
-    protected _stepStatus(i: number): 'active' | 'completed' | 'pending' | 'error';
-    protected _isTabDisabled(i: number): boolean;
-    protected _onCircleClick(i: number): void;
-    next(): void;
-    prev(): void;
-    goTo(index: number): void;
-    private _goTo;
-    protected _onFinish(): void;
-    protected readonly _rootClass: _angular_core.Signal<string>;
-    protected _circleClass(i: number): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxWizardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxWizardComponent, "clx-wizard", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "finishLabel": { "alias": "finishLabel"; "required": false; "isSignal": true; }; }, { "stepChange": "stepChange"; "finish": "finish"; }, ["_stepQuery"], ["*", "[clx-wizard-footer-start]"], true, never>;
+    readonly tabs: _angular_core.InputSignal<ClxTabItem[]>;
+    readonly clxColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly activeTab: _angular_core.ModelSignal<string>;
+    protected readonly _clxColor: _angular_core.Signal<ClxColorInput>;
+    protected readonly _panels: _angular_core.Signal<readonly ClxTabDirective[]>;
+    protected readonly _underlineClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTabsComponent, "clx-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["_panels"], never, true, never>;
 }
 
-declare class ClxAppLayoutComponent implements OnInit, OnDestroy {
-    private readonly _zone;
-    private readonly _document;
-    readonly activeColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly _sidebarOpen: _angular_core.WritableSignal<boolean>;
-    readonly collapsed: _angular_core.WritableSignal<boolean>;
-    readonly _hovered: _angular_core.WritableSignal<boolean>;
-    private readonly _isMobile;
-    readonly collapsedChange: _angular_core.OutputEmitterRef<boolean>;
-    readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
-    constructor();
-    protected readonly _showBackdrop: _angular_core.Signal<boolean>;
-    readonly _isExpanded: _angular_core.Signal<boolean>;
-    protected readonly _sidebarCls: _angular_core.Signal<string>;
-    private _mql;
-    private _mqlListener;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    _toggleCollapsed(): void;
-    _onSidebarEnter(): void;
-    _onSidebarLeave(): void;
-    toggleSidebar(): void;
-    openSidebar(): void;
-    closeSidebar(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxAppLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxAppLayoutComponent, "clx-app-layout", never, { "activeColor": { "alias": "activeColor"; "required": false; "isSignal": true; }; }, { "collapsedChange": "collapsedChange"; "expandedChange": "expandedChange"; }, never, ["clx-brand", "[clx-sidebar]", "[clx-header]", "*"], true, never>;
+type ClxTreeSize = 'sm' | 'md' | 'lg';
+type ClxTreeVariant = 'default' | 'lines';
+interface ClxTreeNode {
+    id: string | number;
+    label: string;
+    icon?: string;
+    children?: ClxTreeNode[];
+    disabled?: boolean;
+    data?: unknown;
 }
-
-declare class ClxBrandComponent {
-    readonly logo: _angular_core.InputSignal<string>;
-    readonly name: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
-    readonly collapsed: _angular_core.InputSignal<boolean>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxBrandComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxBrandComponent, "clx-brand", never, { "logo": { "alias": "logo"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+interface ClxTreeSelectEvent {
+    node: ClxTreeNode;
+    selected: boolean;
+}
+interface ClxTreeExpandEvent {
+    node: ClxTreeNode;
+    expanded: boolean;
 }
 
-declare class ClxMenuItemComponent {
+declare class ClxTreeComponent {
     private readonly _themeSvc;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly icon: _angular_core.InputSignal<string>;
-    readonly active: _angular_core.InputSignal<boolean>;
+    readonly nodes: _angular_core.InputSignal<ClxTreeNode[]>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly nested: _angular_core.InputSignal<boolean>;
-    readonly collapsed: _angular_core.InputSignal<boolean>;
-    readonly routerLink: _angular_core.InputSignal<string | any[]>;
-    readonly routerLinkActiveOptions: _angular_core.InputSignal<{
-        exact: boolean;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    readonly size: _angular_core.InputSignal<ClxTreeSize | undefined>;
+    readonly variant: _angular_core.InputSignal<ClxTreeVariant>;
+    readonly selectable: _angular_core.InputSignal<boolean>;
+    readonly multiSelect: _angular_core.InputSignal<boolean>;
+    readonly expandAll: _angular_core.InputSignal<boolean>;
+    readonly selectedIds: _angular_core.ModelSignal<(string | number)[]>;
+    readonly expandedIds: _angular_core.ModelSignal<(string | number)[]>;
+    readonly selectChange: _angular_core.OutputEmitterRef<ClxTreeSelectEvent>;
+    readonly expandChange: _angular_core.OutputEmitterRef<ClxTreeExpandEvent>;
+    protected readonly _treeSize: _angular_core.Signal<ClxTreeSize>;
+    protected readonly _s: _angular_core.Signal<{
+        row: string;
+        text: string;
+        icon: "xs" | "sm" | "md";
+        indent: string;
     }>;
-    readonly itemClick: _angular_core.OutputEmitterRef<void>;
-    private readonly _resolvedColor;
-    private readonly _geom;
-    protected readonly _iconCls: _angular_core.Signal<string>;
-    protected readonly _idleCls: _angular_core.Signal<string>;
-    protected readonly _activeCls: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxMenuItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxMenuItemComponent, "clx-menu-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "nested": { "alias": "nested"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+    protected readonly _indentPx: _angular_core.Signal<16 | 20 | 24>;
+    protected readonly _rootClass: _angular_core.Signal<string>;
+    protected _isExpanded(id: string | number): boolean;
+    protected _isSelected(id: string | number): boolean;
+    protected _rowClass(node: ClxTreeNode, selected: boolean): string;
+    protected _iconClass(selected: boolean): string;
+    protected _labelClass(node: ClxTreeNode, selected: boolean): string;
+    protected _badgeClass(selected: boolean): string;
+    protected _lineClass(): string;
+    protected _toggleExpand(node: ClxTreeNode): void;
+    protected _onRowClick(node: ClxTreeNode): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTreeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTreeComponent, "clx-tree", never, { "nodes": { "alias": "nodes"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "multiSelect": { "alias": "multiSelect"; "required": false; "isSignal": true; }; "expandAll": { "alias": "expandAll"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "selectedIds": "selectedIdsChange"; "expandedIds": "expandedIdsChange"; "selectChange": "selectChange"; "expandChange": "expandChange"; }, never, never, true, never>;
 }
 
-declare class ClxMenuComponent implements AfterViewInit {
+type ClxPaginationSize = 'sm' | 'md' | 'lg';
+interface ClxPageChangeEvent {
+    page: number;
+    pageSize: number;
+}
+interface ClxPageSizeChangeEvent {
+    pageSize: number;
+}
+
+type PageItem = {
+    type: 'page';
+    page: number;
+} | {
+    type: 'ellipsis';
+    id: string;
+};
+declare class ClxPaginationComponent {
     private readonly _themeSvc;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly icon: _angular_core.InputSignal<string>;
+    readonly totalItems: _angular_core.InputSignal<number>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly collapsed: _angular_core.InputSignal<boolean>;
-    readonly active: _angular_core.InputSignal<boolean>;
-    readonly routerLink: _angular_core.InputSignal<string | any[]>;
-    readonly routerLinkActiveOptions: _angular_core.InputSignal<{
-        exact: boolean;
-    }>;
-    readonly _isExpanded: _angular_core.WritableSignal<boolean>;
-    private readonly _rla?;
+    readonly size: _angular_core.InputSignal<ClxPaginationSize | undefined>;
+    readonly showPageSize: _angular_core.InputSignal<boolean>;
+    /** Opciones manuales. Si está vacío (default) se calculan automáticamente desde totalItems. */
+    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly currentPage: _angular_core.ModelSignal<number>;
+    readonly pageSize: _angular_core.ModelSignal<number>;
+    readonly pageChange: _angular_core.OutputEmitterRef<ClxPageChangeEvent>;
+    readonly sizeChange: _angular_core.OutputEmitterRef<ClxPageSizeChangeEvent>;
     private readonly _destroyRef;
+    protected readonly _pageSizeCtrl: FormControl<number | null>;
     constructor();
-    ngAfterViewInit(): void;
-    protected readonly _iconCls: _angular_core.Signal<string>;
-    protected _buttonCls(isActive: boolean): string;
-    protected readonly NAV_CHILDREN_WRAPPER = "grid transition-[grid-template-rows] duration-300 ease-in-out";
-    protected readonly NAV_CHILDREN_INNER = "overflow-hidden";
-    protected readonly NAV_CHILDREN_LIST = "ml-6 py-1 space-y-0.5";
-    protected _toggle(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxMenuComponent, "clx-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    protected readonly _size: _angular_core.Signal<ClxPaginationSize>;
+    protected readonly _cfg: _angular_core.Signal<{
+        btnSize: "xs" | "sm" | "md" | "lg";
+        selectSize: "sm" | "md" | "lg";
+        text: string;
+        gap: string;
+    }>;
+    readonly totalPages: _angular_core.Signal<number>;
+    private readonly _rangeStart;
+    private readonly _rangeEnd;
+    protected readonly _infoText: _angular_core.Signal<string>;
+    protected readonly _pageSizeOptions: _angular_core.Signal<ClxSelectOption[]>;
+    protected readonly _pageItems: _angular_core.Signal<PageItem[]>;
+    protected readonly _wrapClass: _angular_core.Signal<string>;
+    protected readonly _infoClass: _angular_core.Signal<string>;
+    protected readonly _ellipsisClass: _angular_core.Signal<string>;
+    protected _goTo(page: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPaginationComponent, "clx-pagination", never, { "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showPageSize": { "alias": "showPageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "pageChange": "pageChange"; "sizeChange": "sizeChange"; }, never, never, true, never>;
 }
 
-declare class ClxNavGroupComponent {
-    readonly label: _angular_core.InputSignal<string>;
-    readonly collapsed: _angular_core.InputSignal<boolean>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly labelClass: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxNavGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxNavGroupComponent, "clx-nav-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+type ClxFilterFieldType = 'checkbox' | 'radio' | 'range' | 'select' | 'date-range';
+interface ClxFilterOption {
+    value: string | number;
+    label: string;
+    count?: number;
 }
-
-interface ClxProfileMenuItem {
+interface ClxFilterField {
+    key: string;
     label: string;
-    icon: string;
-    action: string;
+    type: ClxFilterFieldType;
+    options?: ClxFilterOption[];
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    collapsed?: boolean;
 }
-declare class ClxProfileComponent {
-    readonly firstName: _angular_core.InputSignal<string>;
-    readonly lastName: _angular_core.InputSignal<string>;
-    readonly username: _angular_core.InputSignal<string>;
-    readonly role: _angular_core.InputSignal<string>;
-    readonly avatarSrc: _angular_core.InputSignal<string | null>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly menuItems: _angular_core.InputSignal<ClxProfileMenuItem[]>;
-    readonly signOutLabel: _angular_core.InputSignal<string>;
-    readonly menuAction: _angular_core.OutputEmitterRef<string>;
-    readonly signOut: _angular_core.OutputEmitterRef<void>;
+type ClxFilterValue = (string | number)[] | string | number | {
+    min: number;
+    max: number;
+} | {
+    from: Date;
+    to: Date;
+} | null;
+type ClxFilterValues = Record<string, ClxFilterValue>;
+interface ClxFilterChangeEvent {
+    key: string;
+    value: ClxFilterValue;
+    all: ClxFilterValues;
+}
+
+declare class ClxFilterPanelComponent {
     private readonly _themeSvc;
+    readonly fields: _angular_core.InputSignal<ClxFilterField[]>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly showApply: _angular_core.InputSignal<boolean>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    private readonly _sso;
-    readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
-    readonly _positions: ConnectedPosition[];
-    protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
-    readonly fullName: _angular_core.Signal<string>;
-    protected readonly _initials: _angular_core.Signal<string>;
-    protected readonly _ringClass: _angular_core.Signal<string>;
-    protected readonly _headerBgClass: _angular_core.Signal<string>;
-    protected _toggle(): void;
-    protected _close(): void;
-    protected _onKeydown(event: KeyboardEvent): void;
-    protected _onAction(action: string): void;
-    protected _onSignOut(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProfileComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProfileComponent, "clx-profile", never, { "firstName": { "alias": "firstName"; "required": false; "isSignal": true; }; "lastName": { "alias": "lastName"; "required": false; "isSignal": true; }; "username": { "alias": "username"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "signOutLabel": { "alias": "signOutLabel"; "required": false; "isSignal": true; }; }, { "menuAction": "menuAction"; "signOut": "signOut"; }, never, never, true, never>;
+    readonly values: _angular_core.ModelSignal<ClxFilterValues>;
+    readonly filterChange: _angular_core.OutputEmitterRef<ClxFilterChangeEvent>;
+    readonly applyChange: _angular_core.OutputEmitterRef<ClxFilterValues>;
+    private readonly _collapsed;
+    protected readonly _activeCount: _angular_core.Signal<number>;
+    protected _isCollapsed(key: string): boolean;
+    protected _toggleField(key: string): void;
+    protected _hasValue(key: string): boolean;
+    protected _getValue(key: string): ClxFilterValue;
+    protected _getRangeValue(field: ClxFilterField): {
+        min: number;
+        max: number;
+    };
+    protected _isChecked(key: string, val: string | number): boolean;
+    protected _valueLabel(field: ClxFilterField): string;
+    protected _toggleCheck(key: string, val: string | number, checked: boolean): void;
+    protected _setRange(key: string, min: number, max: number, field: ClxFilterField): void;
+    protected _set(key: string, value: ClxFilterValue): void;
+    protected _reset(): void;
+    protected _apply(): void;
+    protected _badgeCls(): string;
+    protected _fieldBadgeCls(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxFilterPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxFilterPanelComponent, "clx-filter-panel", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showApply": { "alias": "showApply"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "filterChange": "filterChange"; "applyChange": "applyChange"; }, never, never, true, never>;
+}
+
+declare class ClxCarouselDirective {
+    readonly templateRef: TemplateRef<unknown>;
+    constructor(templateRef: TemplateRef<unknown>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCarouselDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCarouselDirective, "[clxSlide]", never, {}, {}, never, never, true, never>;
+}
+
+type ClxCarouselAspectRatio = '16/9' | '4/3' | '1/1' | '3/2' | 'auto';
+interface ClxCarouselConfig {
+    clxColor: ClxColor;
+    autoPlay: boolean;
+    interval: number;
+    loop: boolean;
+    aspectRatio: ClxCarouselAspectRatio;
+}
+
+declare class ClxCarouselComponent implements AfterContentInit, OnDestroy {
+    private readonly _themeSvc;
+    readonly clxColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _clxColor: _angular_core.Signal<ClxColorInput>;
+    readonly autoPlay: _angular_core.InputSignal<boolean>;
+    readonly interval: _angular_core.InputSignal<number>;
+    readonly loop: _angular_core.InputSignal<boolean>;
+    readonly aspectRatio: _angular_core.InputSignal<ClxCarouselAspectRatio>;
+    readonly transparent: _angular_core.InputSignal<boolean>;
+    readonly currentPageIndex: _angular_core.WritableSignal<number>;
+    protected readonly _slides: _angular_core.Signal<readonly ClxCarouselDirective[]>;
+    private _autoPlayTimer;
+    private _touchStartX;
+    private readonly _zone;
+    protected readonly _aspectClass: _angular_core.Signal<string>;
+    protected readonly _viewportClass: _angular_core.Signal<string>;
+    protected readonly _dotItems: _angular_core.Signal<{
+        idx: number;
+        cls: string;
+    }[]>;
+    constructor();
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    next(): void;
+    prev(): void;
+    goTo(index: number): void;
+    protected _onTouchStart(e: TouchEvent): void;
+    protected _onTouchEnd(e: TouchEvent): void;
+    private _startTimer;
+    private _clearTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCarouselComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCarouselComponent, "clx-carousel", never, { "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "autoPlay": { "alias": "autoPlay"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; }, {}, ["_slides"], never, true, never>;
 }
 
 interface ClxTableColumn<T = any> {
@@ -2489,63 +2362,310 @@ declare class ClxCellDirective<T> {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCellDirective<any>, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCellDirective<any>, "ng-template[clxCell]", never, {}, {}, never, never, true, never>;
 }
-declare class ClxColumnDefDirective<T> {
-    name: string;
-    readonly headerCell: _angular_core.Signal<ClxHeaderCellDirective<any> | undefined>;
-    readonly cell: _angular_core.Signal<ClxCellDirective<any> | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxColumnDefDirective<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxColumnDefDirective<any>, "[clxColumn]", never, { "name": { "alias": "clxColumn"; "required": false; }; }, {}, ["headerCell", "cell"], never, true, never>;
+declare class ClxColumnDefDirective<T> {
+    name: string;
+    readonly headerCell: _angular_core.Signal<ClxHeaderCellDirective<any> | undefined>;
+    readonly cell: _angular_core.Signal<ClxCellDirective<any> | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxColumnDefDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxColumnDefDirective<any>, "[clxColumn]", never, { "name": { "alias": "clxColumn"; "required": false; }; }, {}, ["headerCell", "cell"], never, true, never>;
+}
+
+declare class ClxTableComponent<T = any> {
+    private readonly _themeSvc;
+    readonly data: _angular_core.InputSignal<T[]>;
+    readonly columns: _angular_core.InputSignal<ClxTableColumn<T>[]>;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly selectable: _angular_core.InputSignal<boolean>;
+    readonly singleSelect: _angular_core.InputSignal<boolean>;
+    readonly searchable: _angular_core.InputSignal<boolean>;
+    readonly pagination: _angular_core.InputSignal<boolean>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    readonly emptyIcon: _angular_core.InputSignal<string>;
+    readonly emptyTitle: _angular_core.InputSignal<string>;
+    readonly emptyDescription: _angular_core.InputSignal<string>;
+    readonly sortKey: _angular_core.ModelSignal<string | null>;
+    readonly sortDir: _angular_core.ModelSignal<ClxTableSort | null>;
+    readonly pageIndex: _angular_core.ModelSignal<number>;
+    readonly pageSize: _angular_core.ModelSignal<number>;
+    readonly _currentPage: _angular_core.ModelSignal<number>;
+    readonly searchQuery: _angular_core.ModelSignal<string>;
+    readonly selectedItems: _angular_core.ModelSignal<T[]>;
+    readonly sortChange: _angular_core.OutputEmitterRef<ClxTableSortEvent>;
+    readonly pageChange: _angular_core.OutputEmitterRef<ClxTablePageEvent>;
+    readonly selectionChange: _angular_core.OutputEmitterRef<ClxTableSelectionEvent<T>>;
+    private readonly _columnDefs;
+    protected _onPaginationPageChange(page: number): void;
+    protected readonly _tableClass: _angular_core.Signal<string>;
+    protected readonly _headerClass: _angular_core.Signal<string>;
+    protected readonly _headerCellClass: _angular_core.Signal<string>;
+    protected readonly _cellClass: _angular_core.Signal<string>;
+    protected readonly _rowClass: _angular_core.Signal<string>;
+    private readonly _columnDefMap;
+    protected _getColumnDef(key: string): ClxColumnDefDirective<T> | undefined;
+    protected readonly _filteredData: _angular_core.Signal<T[]>;
+    protected readonly _paginatedData: _angular_core.Signal<T[]>;
+    protected readonly _totalItems: _angular_core.Signal<number>;
+    protected readonly _emptyTitle: _angular_core.Signal<string>;
+    protected readonly _emptyDescription: _angular_core.Signal<string>;
+    protected readonly _allSelected: _angular_core.Signal<boolean>;
+    protected _isSelected(item: T): boolean;
+    protected _getAlignClass(align: 'left' | 'center' | 'right'): string;
+    protected _getHeaderCellClass(col: ClxTableColumn<T>): string;
+    protected _getDataCellClass(col: ClxTableColumn<T>): string;
+    protected _getCellValue(item: T, key: string): unknown;
+    protected _handleSort(key: string): void;
+    protected _handleSelectAll(checked: boolean): void;
+    protected _handleSelectItem(item: T, checked: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTableComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTableComponent<any>, "clx-table", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "singleSelect": { "alias": "singleSelect"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "emptyTitle": { "alias": "emptyTitle"; "required": false; "isSignal": true; }; "emptyDescription": { "alias": "emptyDescription"; "required": false; "isSignal": true; }; "sortKey": { "alias": "sortKey"; "required": false; "isSignal": true; }; "sortDir": { "alias": "sortDir"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "_currentPage": { "alias": "_currentPage"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": false; "isSignal": true; }; }, { "sortKey": "sortKeyChange"; "sortDir": "sortDirChange"; "pageIndex": "pageIndexChange"; "pageSize": "pageSizeChange"; "_currentPage": "_currentPageChange"; "searchQuery": "searchQueryChange"; "selectedItems": "selectedItemsChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "selectionChange": "selectionChange"; }, ["_columnDefs"], never, true, never>;
+}
+
+declare class ClxPageNotFoundComponent {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly backLabel: _angular_core.InputSignal<string>;
+    readonly back: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPageNotFoundComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPageNotFoundComponent, "clx-page-not-found", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; }, { "back": "back"; }, never, never, true, never>;
+}
+
+declare class ClxPageUnauthorizedComponent {
+    readonly code: _angular_core.InputSignal<number>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly loginLabel: _angular_core.InputSignal<string>;
+    readonly backLabel: _angular_core.InputSignal<string>;
+    readonly login: _angular_core.OutputEmitterRef<void>;
+    readonly back: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPageUnauthorizedComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPageUnauthorizedComponent, "clx-page-unauthorized", never, { "code": { "alias": "code"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "loginLabel": { "alias": "loginLabel"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; }, { "login": "login"; "back": "back"; }, never, never, true, never>;
+}
+
+declare class ClxPageServerErrorComponent {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly retryLabel: _angular_core.InputSignal<string>;
+    readonly backLabel: _angular_core.InputSignal<string>;
+    readonly errorId: _angular_core.InputSignal<string>;
+    readonly retry: _angular_core.OutputEmitterRef<void>;
+    readonly back: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPageServerErrorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPageServerErrorComponent, "clx-page-server-error", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "errorId": { "alias": "errorId"; "required": false; "isSignal": true; }; }, { "retry": "retry"; "back": "back"; }, never, never, true, never>;
+}
+
+declare class ClxPageEmptyComponent {
+    private readonly _themeSvc;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly ctaLabel: _angular_core.InputSignal<string>;
+    readonly ctaIcon: _angular_core.InputSignal<string>;
+    readonly ctaColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    protected readonly _ctaColor: _angular_core.Signal<ClxColorInput>;
+    readonly cta: _angular_core.OutputEmitterRef<void>;
+    protected _iconWrap(): string;
+    protected _iconSize(): 'sm' | 'md' | 'lg' | 'xl';
+    protected _titleCls(): "text-sm font-semibold text-clx-text-label mb-1" | "text-xl font-semibold text-clx-text-label mb-2" | "text-base font-semibold text-clx-text-label mb-1";
+    protected _descCls(): string;
+    protected _ctaCls(): "mt-3" | "mt-5";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPageEmptyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPageEmptyComponent, "clx-page-empty", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; "ctaIcon": { "alias": "ctaIcon"; "required": false; "isSignal": true; }; "ctaColor": { "alias": "ctaColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "cta": "cta"; }, never, never, true, never>;
+}
+
+type ClxTrendDirection = 'up' | 'down' | 'neutral';
+interface ClxStatMetric {
+    icon: string;
+    title: string;
+    value: string | number;
+    trend: string | number;
+    trendDirection: ClxTrendDirection;
+}
+interface SparkPoint {
+    x: number;
+    y: number;
+}
+
+declare class ClxStatCardComponent {
+    readonly metric: _angular_core.InputSignal<ClxStatMetric>;
+    readonly chartData: _angular_core.InputSignal<number[]>;
+    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    readonly layout: _angular_core.InputSignal<"horizontal" | "vertical" | "bar">;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    protected readonly _barHeights: _angular_core.Signal<number[]>;
+    protected readonly _iconBg: _angular_core.Signal<string>;
+    protected readonly _iconBgSubtle: _angular_core.Signal<string>;
+    protected readonly _iconTextBase: _angular_core.Signal<string>;
+    protected readonly _lineColor: _angular_core.Signal<string>;
+    protected readonly _gradId: _angular_core.Signal<string>;
+    protected readonly _trendColor: _angular_core.Signal<"red" | "green" | "slate">;
+    protected readonly _trendArrowIcon: _angular_core.Signal<"arrow_upward" | "arrow_downward" | "remove">;
+    protected readonly _trendTextClass: _angular_core.Signal<"text-red-500" | "text-green-500" | "text-slate-400">;
+    protected readonly _trendIcon: _angular_core.Signal<"remove" | "arrow_outward" | "south_east">;
+    protected readonly _formattedValue: _angular_core.Signal<string>;
+    protected readonly _points: _angular_core.Signal<SparkPoint[]>;
+    protected readonly _linePath: _angular_core.Signal<string>;
+    protected readonly _fillPath: _angular_core.Signal<string>;
+    constructor();
+    private _buildPath;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxStatCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxStatCardComponent, "clx-stat-card", never, { "metric": { "alias": "metric"; "required": true; "isSignal": true; }; "chartData": { "alias": "chartData"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type ClxProductLayout = 'vertical' | 'horizontal';
+type ClxProductSize = 'sm' | 'md';
+/** Refleja st_variations + st_products (campos necesarios para la card) */
+interface ClxProduct {
+    id: string;
+    sku: string;
+    name: string;
+    description?: string;
+    sale_price?: number;
+    product_id: string;
+    product_name: string;
+    trademark: string;
+    product_sale_price: number;
+    discount_price?: number;
+    has_discount: boolean;
+    discount_percentage?: number;
+    tags: string[];
+    main_image?: string;
+    in_stock: boolean;
+}
+
+type ClxProductTag = 'new' | 'sale' | 'out-of-stock' | 'featured' | 'limited' | 'hot';
+
+declare class ClxProductComponent {
+    readonly product: _angular_core.InputSignal<ClxProduct | null>;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly priority: _angular_core.InputSignal<boolean>;
+    readonly layout: _angular_core.InputSignal<ClxProductLayout>;
+    readonly size: _angular_core.InputSignal<ClxProductSize>;
+    readonly clxColor: _angular_core.InputSignal<ClxColorInput>;
+    readonly addToCart: _angular_core.OutputEmitterRef<ClxProduct>;
+    readonly addToWishlist: _angular_core.OutputEmitterRef<ClxProduct>;
+    protected readonly PRODUCT_TAG_LABEL: Record<ClxProductTag, string>;
+    protected readonly PRODUCT_TAG_COLOR: Record<ClxProductTag, codexly_ui.ClxColor>;
+    protected readonly PRODUCT_TAG_VARIANT: Record<ClxProductTag, codexly_ui.ClxBadgeVariant>;
+    protected readonly _h: _angular_core.Signal<boolean>;
+    protected readonly _sm: _angular_core.Signal<boolean>;
+    protected readonly _tags: _angular_core.Signal<ClxProductTag[]>;
+    protected readonly _disabled: _angular_core.Signal<boolean>;
+    protected readonly _price: _angular_core.Signal<number>;
+    protected readonly _buttonSize: _angular_core.Signal<"sm" | "md">;
+    protected readonly _skeletonW: _angular_core.Signal<"sm:w-32" | "sm:w-44">;
+    protected readonly _skeletonH: _angular_core.Signal<"160px" | "200px">;
+    protected readonly _cardClass: _angular_core.Signal<string>;
+    protected readonly _imageContainerClass: _angular_core.Signal<string>;
+    protected readonly _contentClass: _angular_core.Signal<string>;
+    protected readonly _actionsClass: _angular_core.Signal<"flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-3" | "flex items-center gap-2 mt-3">;
+    protected readonly _overlayClass: _angular_core.Signal<string>;
+    protected readonly _titleClass: _angular_core.Signal<string>;
+    protected readonly _descClass: _angular_core.Signal<string>;
+    protected readonly _priceClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProductComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductComponent, "clx-product", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "priority": { "alias": "priority"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "addToWishlist": "addToWishlist"; }, never, never, true, never>;
+}
+
+/** st_spec_options */
+interface ClxSpecOption {
+    id: string;
+    spec_type_id: string;
+    value: string;
+}
+/** st_spec_types + sus opciones */
+interface ClxSpecType {
+    id: string;
+    name: string;
+    icon?: string;
+    input_type: 'color' | 'text';
+    options: ClxSpecOption[];
+}
+/** st_variations — una variación sellable con sus imágenes y specs seleccionadas */
+interface ClxVariation {
+    id: string;
+    sku: string;
+    name: string;
+    description?: string;
+    sale_price?: number;
+    sort_order: number;
+    images: string[];
+    in_stock: boolean;
+    specs: Record<string, string>;
+}
+/** st_product_spec_types + st_product_spec_options — fila de ficha técnica */
+interface ClxProductSpec {
+    id: string;
+    name: string;
+    icon?: string;
+    value: string;
+    sort_order?: number;
+}
+/** st_product_descriptions — bloque de texto narrativo */
+interface ClxProductDescription {
+    id: string;
+    title?: string;
+    body: string;
+    sort_order: number;
+}
+/** st_reviews */
+interface ClxReview {
+    id: string;
+    author_name: string;
+    rating: number;
+    title?: string;
+    body?: string;
+    is_verified: boolean;
+    helpful: number;
+    not_helpful: number;
+    created_at: string;
+}
+/** Payload completo para clx-product-detail — un producto con todas sus variaciones */
+interface ClxProductDetailData {
+    product_id: string;
+    product_name: string;
+    trademark: string;
+    product_sale_price: number;
+    discount_price?: number;
+    has_discount: boolean;
+    discount_percentage?: number;
+    has_warranty: boolean;
+    warranty_period?: number;
+    tags: string[];
+    currency: string;
+    rating: number;
+    review_count: number;
+    spec_types: ClxSpecType[];
+    variations: ClxVariation[];
+    product_specs: ClxProductSpec[];
+    descriptions: ClxProductDescription[];
+    reviews?: ClxReview[];
 }
 
-declare class ClxTableComponent<T = any> {
-    private readonly _themeSvc;
-    readonly data: _angular_core.InputSignal<T[]>;
-    readonly columns: _angular_core.InputSignal<ClxTableColumn<T>[]>;
+declare class ClxProductDetailComponent {
+    readonly product: _angular_core.InputSignal<ClxProductDetailData | null>;
+    readonly clxColor: _angular_core.InputSignal<ClxColorInput>;
     readonly loading: _angular_core.InputSignal<boolean>;
-    readonly selectable: _angular_core.InputSignal<boolean>;
-    readonly singleSelect: _angular_core.InputSignal<boolean>;
-    readonly searchable: _angular_core.InputSignal<boolean>;
-    readonly pagination: _angular_core.InputSignal<boolean>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly emptyIcon: _angular_core.InputSignal<string>;
-    readonly emptyTitle: _angular_core.InputSignal<string>;
-    readonly emptyDescription: _angular_core.InputSignal<string>;
-    readonly sortKey: _angular_core.ModelSignal<string | null>;
-    readonly sortDir: _angular_core.ModelSignal<ClxTableSort | null>;
-    readonly pageIndex: _angular_core.ModelSignal<number>;
-    readonly pageSize: _angular_core.ModelSignal<number>;
-    readonly _currentPage: _angular_core.ModelSignal<number>;
-    readonly searchQuery: _angular_core.ModelSignal<string>;
-    readonly selectedItems: _angular_core.ModelSignal<T[]>;
-    readonly sortChange: _angular_core.OutputEmitterRef<ClxTableSortEvent>;
-    readonly pageChange: _angular_core.OutputEmitterRef<ClxTablePageEvent>;
-    readonly selectionChange: _angular_core.OutputEmitterRef<ClxTableSelectionEvent<T>>;
-    private readonly _columnDefs;
-    protected _onPaginationPageChange(page: number): void;
-    protected readonly _tableClass: _angular_core.Signal<string>;
-    protected readonly _headerClass: _angular_core.Signal<string>;
-    protected readonly _headerCellClass: _angular_core.Signal<string>;
-    protected readonly _cellClass: _angular_core.Signal<string>;
-    protected readonly _rowClass: _angular_core.Signal<string>;
-    private readonly _columnDefMap;
-    protected _getColumnDef(key: string): ClxColumnDefDirective<T> | undefined;
-    protected readonly _filteredData: _angular_core.Signal<T[]>;
-    protected readonly _paginatedData: _angular_core.Signal<T[]>;
-    protected readonly _totalItems: _angular_core.Signal<number>;
-    protected readonly _emptyTitle: _angular_core.Signal<string>;
-    protected readonly _emptyDescription: _angular_core.Signal<string>;
-    protected readonly _allSelected: _angular_core.Signal<boolean>;
-    protected _isSelected(item: T): boolean;
-    protected _getAlignClass(align: 'left' | 'center' | 'right'): string;
-    protected _getHeaderCellClass(col: ClxTableColumn<T>): string;
-    protected _getDataCellClass(col: ClxTableColumn<T>): string;
-    protected _getCellValue(item: T, key: string): unknown;
-    protected _handleSort(key: string): void;
-    protected _handleSelectAll(checked: boolean): void;
-    protected _handleSelectItem(item: T, checked: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTableComponent<any>, "clx-table", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "singleSelect": { "alias": "singleSelect"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "emptyTitle": { "alias": "emptyTitle"; "required": false; "isSignal": true; }; "emptyDescription": { "alias": "emptyDescription"; "required": false; "isSignal": true; }; "sortKey": { "alias": "sortKey"; "required": false; "isSignal": true; }; "sortDir": { "alias": "sortDir"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "_currentPage": { "alias": "_currentPage"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": false; "isSignal": true; }; }, { "sortKey": "sortKeyChange"; "sortDir": "sortDirChange"; "pageIndex": "pageIndexChange"; "pageSize": "pageSizeChange"; "_currentPage": "_currentPageChange"; "searchQuery": "searchQueryChange"; "selectedItems": "selectedItemsChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "selectionChange": "selectionChange"; }, ["_columnDefs"], never, true, never>;
+    readonly currency: _angular_core.InputSignal<string>;
+    readonly _carousel: _angular_core.Signal<ClxCarouselComponent | undefined>;
+    readonly quantity: _angular_core.WritableSignal<number>;
+    readonly activeTab: _angular_core.WritableSignal<string>;
+    readonly selectedSpecs: _angular_core.WritableSignal<Record<string, string>>;
+    readonly tabItems: ClxTabItem[];
+    constructor();
+    readonly activeVariation: _angular_core.Signal<ClxVariation | null>;
+    readonly finalPrice: _angular_core.Signal<number>;
+    readonly discount: _angular_core.Signal<number>;
+    isOptionAvailable(specTypeId: string, specOptionId: string): boolean;
+    selectSpec(specTypeId: string, specOptionId: string): void;
+    isSpecSelected(specTypeId: string, specOptionId: string): boolean;
+    selectedOptionLabel(specType: ClxSpecType): string;
+    asColor(value: string): ClxColorInput;
+    specsLeft<T>(specs: T[]): T[];
+    specsRight<T>(specs: T[]): T[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProductDetailComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductDetailComponent, "clx-product-detail", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Refleja st_variations + st_products (campos necesarios para la wishlist card) */
@@ -2765,44 +2885,6 @@ interface ClxModalAnimConfig {
 }
 declare const CLX_MODAL_ANIM_CONFIG: InjectionToken<ClxModalAnimConfig>;
 
-type ClxAlertType = 'success' | 'danger' | 'warning' | 'info' | 'confirm';
-type ClxAlertResult = boolean;
-interface ClxAlertButtonOptions {
-    text: string;
-    color?: ClxButtonColor;
-    variant?: ClxButtonVariant;
-}
-interface ClxAlertOptions {
-    /** Alert type — drives icon, color and defaults. */
-    type?: ClxAlertType;
-    /** Dialog title. Supports safe HTML string. */
-    title?: string;
-    /** Body message. Supports safe HTML string. */
-    message?: string;
-    /** Show a cancel / secondary button. Default: false (true for 'confirm'). */
-    showCancelButton?: boolean;
-    /** Confirm button config. */
-    confirmButton?: ClxAlertButtonOptions;
-    /** Cancel button config. */
-    cancelButton?: ClxAlertButtonOptions;
-    /** animate.css entrance animation name. Default: 'zoomIn' */
-    animationIn?: ClxAnimateName;
-    /** animate.css exit animation name. Default: 'zoomOut' */
-    animationOut?: ClxAnimateName;
-    /** Duration of entrance/exit animations in ms. Default: 400 */
-    animationDuration?: number;
-    /**
-     * Auto-close timer in milliseconds.
-     * When set, a progress bar counts down and the dialog closes automatically
-     * resolving to `false`.
-     */
-    timer?: number;
-    /** Show backdrop blur. Default: true */
-    backdrop?: boolean;
-    /** Prevent closing on backdrop click. Default: false */
-    disableClose?: boolean;
-}
-
 declare const CLX_ALERT_OPTIONS: InjectionToken<ClxAlertOptions>;
 declare const CLX_ALERT_RESOLVE: InjectionToken<(result: ClxAlertResult) => void>;
 
@@ -2815,7 +2897,7 @@ declare class ClxAnimateDirective implements OnInit, OnChanges {
     readonly delay: _angular_core.InputSignalWithTransform<number, number>;
     readonly repeat: _angular_core.InputSignal<number | "infinite" | undefined>;
     readonly easing: _angular_core.InputSignal<string | undefined>;
-    readonly fillMode: _angular_core.InputSignal<"none" | "both" | "forwards" | "backwards" | undefined>;
+    readonly fillMode: _angular_core.InputSignal<"none" | "forwards" | "backwards" | "both" | undefined>;
     readonly once: _angular_core.InputSignalWithTransform<boolean, boolean>;
     readonly threshold: _angular_core.InputSignalWithTransform<number, number>;
     readonly animationStart: _angular_core.OutputEmitterRef<void>;
@@ -2866,42 +2948,6 @@ declare class ClxAnimateGroupDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxAnimateGroupDirective, "[clxAnimateGroup]", ["clxAnimateGroup"], { "stagger": { "alias": "stagger"; "required": false; "isSignal": true; }; }, {}, ["children"], never, true, never>;
 }
 
-declare class ClxTooltipDirective {
-    readonly clxTooltip: _angular_core.InputSignal<string>;
-    readonly clxTooltipPosition: _angular_core.InputSignal<ClxTooltipPosition>;
-    readonly clxTooltipColor: _angular_core.InputSignal<ClxColorInput>;
-    readonly clxTooltipSize: _angular_core.InputSignal<ClxTooltipSize>;
-    readonly clxTooltipDelay: _angular_core.InputSignal<number>;
-    private readonly _el;
-    private readonly _renderer;
-    private readonly _appRef;
-    private readonly _injector;
-    private readonly _animate;
-    private readonly _platformId;
-    private readonly _destroyRef;
-    private _ref;
-    private _pendingRef;
-    private _showTimer;
-    private _hideTimer;
-    private _tooltipId;
-    private _abort;
-    private _destroyed;
-    constructor();
-    private _scheduleShow;
-    private _scheduleHide;
-    private _show;
-    private _hide;
-    private _resolvePosition;
-    private _placeAt;
-    private _destroyBubble;
-    private _forceDestroyBubble;
-    private _clearShow;
-    private _clearHide;
-    private _clearTimers;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTooltipDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxTooltipDirective, "[clxTooltip]", never, { "clxTooltip": { "alias": "clxTooltip"; "required": true; "isSignal": true; }; "clxTooltipPosition": { "alias": "clxTooltipPosition"; "required": false; "isSignal": true; }; "clxTooltipColor": { "alias": "clxTooltipColor"; "required": false; "isSignal": true; }; "clxTooltipSize": { "alias": "clxTooltipSize"; "required": false; "isSignal": true; }; "clxTooltipDelay": { "alias": "clxTooltipDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 type ClxThemeMode = 'light' | 'dark' | 'system';
 declare class ClxThemeService {
     private readonly _isBrowser;
@@ -3013,82 +3059,5 @@ declare class ClxToastService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ClxToastService>;
 }
 
-type ClxProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
-type ClxProgressBarVariant = 'solid' | 'striped' | 'indeterminate';
-
-declare class ClxProgressBarComponent {
-    private readonly _themeSvc;
-    readonly value: _angular_core.InputSignal<number>;
-    readonly max: _angular_core.InputSignal<number>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxProgressBarSize | undefined>;
-    readonly variant: _angular_core.InputSignal<ClxProgressBarVariant>;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly showValue: _angular_core.InputSignal<boolean>;
-    readonly valueFormat: _angular_core.InputSignal<"percent" | "fraction" | "value">;
-    protected readonly _pct: _angular_core.Signal<number>;
-    protected readonly _pbSize: _angular_core.Signal<ClxProgressBarSize>;
-    protected readonly _trackH: _angular_core.Signal<string>;
-    protected readonly _labelCls: _angular_core.Signal<"text-xs text-clx-text-label" | "text-sm text-clx-text-label">;
-    protected readonly _displayValue: _angular_core.Signal<string>;
-    protected readonly _fillCls: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProgressBarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProgressBarComponent, "clx-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-declare class ClxPageNotFoundComponent {
-    readonly title: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
-    readonly backLabel: _angular_core.InputSignal<string>;
-    readonly back: _angular_core.OutputEmitterRef<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPageNotFoundComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPageNotFoundComponent, "clx-page-not-found", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; }, { "back": "back"; }, never, never, true, never>;
-}
-
-declare class ClxPageUnauthorizedComponent {
-    readonly code: _angular_core.InputSignal<number>;
-    readonly title: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
-    readonly loginLabel: _angular_core.InputSignal<string>;
-    readonly backLabel: _angular_core.InputSignal<string>;
-    readonly login: _angular_core.OutputEmitterRef<void>;
-    readonly back: _angular_core.OutputEmitterRef<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPageUnauthorizedComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPageUnauthorizedComponent, "clx-page-unauthorized", never, { "code": { "alias": "code"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "loginLabel": { "alias": "loginLabel"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; }, { "login": "login"; "back": "back"; }, never, never, true, never>;
-}
-
-declare class ClxPageServerErrorComponent {
-    readonly title: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
-    readonly retryLabel: _angular_core.InputSignal<string>;
-    readonly backLabel: _angular_core.InputSignal<string>;
-    readonly errorId: _angular_core.InputSignal<string>;
-    readonly retry: _angular_core.OutputEmitterRef<void>;
-    readonly back: _angular_core.OutputEmitterRef<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPageServerErrorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPageServerErrorComponent, "clx-page-server-error", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "errorId": { "alias": "errorId"; "required": false; "isSignal": true; }; }, { "retry": "retry"; "back": "back"; }, never, never, true, never>;
-}
-
-declare class ClxPageEmptyComponent {
-    private readonly _themeSvc;
-    readonly icon: _angular_core.InputSignal<string>;
-    readonly title: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
-    readonly ctaLabel: _angular_core.InputSignal<string>;
-    readonly ctaIcon: _angular_core.InputSignal<string>;
-    readonly ctaColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
-    protected readonly _ctaColor: _angular_core.Signal<ClxColorInput>;
-    readonly cta: _angular_core.OutputEmitterRef<void>;
-    protected _iconWrap(): string;
-    protected _iconSize(): 'sm' | 'md' | 'lg' | 'xl';
-    protected _titleCls(): "text-sm font-semibold text-clx-text-label mb-1" | "text-xl font-semibold text-clx-text-label mb-2" | "text-base font-semibold text-clx-text-label mb-1";
-    protected _descCls(): string;
-    protected _ctaCls(): "mt-3" | "mt-5";
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxPageEmptyComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxPageEmptyComponent, "clx-page-empty", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; "ctaIcon": { "alias": "ctaIcon"; "required": false; "isSignal": true; }; "ctaColor": { "alias": "ctaColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "cta": "cta"; }, never, never, true, never>;
-}
-
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
-export type { ClxAlertButtonOptions, ClxAlertOptions, ClxAlertResult, ClxAlertType, ClxAnimateAttentionSeeker, ClxAnimateBackEntrance, ClxAnimateBackExit, ClxAnimateBouncingEntrance, ClxAnimateBouncingExit, ClxAnimateConfig, ClxAnimateDefaults, ClxAnimateEvent, ClxAnimateFadingEntrance, ClxAnimateFadingExit, ClxAnimateFlipper, ClxAnimateLightspeed, ClxAnimateName, ClxAnimateRotatingEntrance, ClxAnimateRotatingExit, ClxAnimateSlidingEntrance, ClxAnimateSlidingExit, ClxAnimateSpecial, ClxAnimateTrigger, ClxAnimateZoomingEntrance, ClxAnimateZoomingExit, ClxAvatarContentType, ClxBadgeVariant, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardPadding, ClxCardShadow, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxChartOptions, ClxChartType, ClxCheckboxVariant, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNumberSize, ClxNumberVariant, ClxPageChangeEvent, ClxPageSizeChangeEvent, ClxPaginationSize, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableSort, ClxTableSortEvent, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, ClxTimepickerSize, ClxTimepickerStatus, ClxToastAction, ClxToastEntry, ClxToastOptions, ClxToastPosition, ClxToastType, ClxTooltipPosition, ClxTooltipSize, ClxTreeExpandEvent, ClxTreeNode, ClxTreeSelectEvent, ClxTreeSize, ClxTreeVariant, ClxTrendDirection, ClxUploadError, ClxUploadSize, ClxVariation, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, SparkPoint };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export type { ClxAlertButtonOptions, ClxAlertOptions, ClxAlertResult, ClxAlertType, ClxAnimateAttentionSeeker, ClxAnimateBackEntrance, ClxAnimateBackExit, ClxAnimateBouncingEntrance, ClxAnimateBouncingExit, ClxAnimateConfig, ClxAnimateDefaults, ClxAnimateEvent, ClxAnimateFadingEntrance, ClxAnimateFadingExit, ClxAnimateFlipper, ClxAnimateLightspeed, ClxAnimateName, ClxAnimateRotatingEntrance, ClxAnimateRotatingExit, ClxAnimateSlidingEntrance, ClxAnimateSlidingExit, ClxAnimateSpecial, ClxAnimateTrigger, ClxAnimateZoomingEntrance, ClxAnimateZoomingExit, ClxAvatarContentType, ClxBadgeVariant, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardPadding, ClxCardShadow, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxCheckboxVariant, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNumberSize, ClxNumberVariant, ClxPageChangeEvent, ClxPageSizeChangeEvent, ClxPaginationSize, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableSort, ClxTableSortEvent, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, ClxTimepickerSize, ClxTimepickerStatus, ClxToastAction, ClxToastEntry, ClxToastOptions, ClxToastPosition, ClxToastType, ClxTooltipPosition, ClxTooltipSize, ClxTreeExpandEvent, ClxTreeNode, ClxTreeSelectEvent, ClxTreeSize, ClxTreeVariant, ClxTrendDirection, ClxUploadError, ClxUploadSize, ClxVariation, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, SparkPoint };