codexly-ui 0.0.92 → 0.0.94

package/types/codexly-ui.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, AfterContentInit, OnDestroy, OnInit, QueryList, Signal, AfterViewInit, ElementRef, InjectionToken, OnChanges, SimpleChanges } from '@angular/core';
+import { TemplateRef, AfterContentInit, OnDestroy, OnInit, QueryList, Signal, AfterViewInit, ElementRef, InjectionToken, 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';
@@ -201,7 +201,9 @@ interface ClxCarouselConfig {
 }
 
 declare class ClxCarouselComponent implements AfterContentInit, OnDestroy {
-    readonly clxColor: _angular_core.InputSignal<ClxColorInput>;
+    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>;
@@ -359,9 +361,11 @@ interface ClxTreeExpandEvent {
 }
 
 declare class ClxTreeComponent {
+    private readonly _themeSvc;
     readonly nodes: _angular_core.InputSignal<ClxTreeNode[]>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxTreeSize>;
+    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>;
@@ -370,6 +374,7 @@ declare class ClxTreeComponent {
     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;
@@ -423,9 +428,11 @@ interface ClxFilterChangeEvent {
 }
 
 declare class ClxFilterPanelComponent {
+    private readonly _themeSvc;
     readonly fields: _angular_core.InputSignal<ClxFilterField[]>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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>;
@@ -506,9 +513,11 @@ declare class ClxTabDirective {
 }
 
 declare class ClxTabsComponent {
+    private readonly _themeSvc;
     readonly tabs: _angular_core.InputSignal<ClxTabItem[]>;
-    readonly clxColor: _angular_core.InputSignal<ClxColorInput>;
+    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>;
@@ -548,6 +557,7 @@ declare class ClxDrawerComponent {
     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>;
@@ -639,6 +649,7 @@ declare class ClxModalComponent {
     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>;
@@ -677,9 +688,11 @@ type PageItem = {
     id: string;
 };
 declare class ClxPaginationComponent {
+    private readonly _themeSvc;
     readonly totalItems: _angular_core.InputSignal<number>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxPaginationSize>;
+    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[]>;
@@ -690,6 +703,7 @@ declare class ClxPaginationComponent {
     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";
@@ -783,11 +797,13 @@ type ClxCardPadding = 'none' | 'sm' | 'md' | 'lg';
 type ClxCardShadow = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 declare class ClxCardComponent {
+    private readonly _themeSvc;
     readonly variant: _angular_core.InputSignal<ClxCardVariant>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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;
@@ -826,8 +842,10 @@ interface ClxStepperStep {
 }
 
 declare class ClxStepperComponent {
+    private readonly _themeSvc;
     readonly steps: _angular_core.InputSignal<ClxStepperStep[]>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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<{
@@ -855,13 +873,15 @@ 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>;
+    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>;
@@ -897,7 +917,9 @@ interface ClxListItem {
 }
 
 declare class ClxListComponent {
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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>;
@@ -918,7 +940,8 @@ declare class ClxListComponent {
 }
 
 interface ClxListContext {
-    color: Signal<ClxColorInput>;
+    color: Signal<ClxColorInput | undefined>;
+    resolvedColor: Signal<ClxColorInput>;
     variant: Signal<ClxListVariant>;
     size: Signal<ClxListSize>;
     numbered: Signal<boolean>;
@@ -937,12 +960,14 @@ declare const LIST_SIZE_MAP: Record<ClxListSize, {
 
 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>;
+    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>;
@@ -954,9 +979,11 @@ declare class ClxListItemComponent {
 }
 
 declare class ClxRatingComponent {
+    private readonly _themeSvc;
     readonly value: _angular_core.InputSignal<number>;
     readonly max: _angular_core.InputSignal<number>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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;
@@ -968,21 +995,29 @@ declare class ClxRatingComponent {
 }
 
 declare class ClxBadgeComponent {
+    private readonly _themeSvc;
     readonly variant: _angular_core.InputSignal<ClxBadgeVariant>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md">;
-    readonly shape: _angular_core.InputSignal<ClxShape>;
+    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 ClxButtonComponent {
+    private readonly _themeSvc;
     readonly variant: _angular_core.InputSignal<ClxButtonVariant>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<"xxs" | "xs" | "sm" | "md" | "lg">;
-    readonly shape: _angular_core.InputSignal<ClxShape>;
+    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>;
@@ -1036,9 +1071,11 @@ 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>;
+    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>;
@@ -1052,11 +1089,14 @@ 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>;
-    readonly size: _angular_core.InputSignal<ClxTagSize>;
+    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;
@@ -1074,10 +1114,12 @@ 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>;
+    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>;
@@ -1088,7 +1130,9 @@ type ClxTimelineMode = 'left' | 'alternate';
 type ClxTimelineSize = 'sm' | 'md' | 'lg';
 
 declare class ClxTimelineComponent {
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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>;
@@ -1108,7 +1152,8 @@ declare class ClxTimelineComponent {
 }
 
 interface ClxTimelineContext {
-    color: Signal<ClxColorInput>;
+    color: Signal<ClxColorInput | undefined>;
+    resolvedColor: Signal<ClxColorInput>;
     lineStyle: Signal<ClxTimelineLineStyle>;
     mode: Signal<ClxTimelineMode>;
     size: Signal<ClxTimelineSize>;
@@ -1173,9 +1218,12 @@ declare class ClxChartComponent implements AfterViewInit, OnDestroy {
 type ClxCheckboxVariant = 'solid' | 'outline';
 
 declare class ClxCheckboxComponent implements ControlValueAccessor {
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | undefined>;
+    protected readonly _size: _angular_core.Signal<"sm" | "md" | "lg">;
     readonly label: _angular_core.InputSignal<string>;
     /** Initial value when used without FormControl */
     readonly value: _angular_core.InputSignal<boolean>;
@@ -1220,12 +1268,15 @@ type ClxColorPickerFormat = 'hex' | 'rgb' | 'hsl';
 declare class ClxColorPickerComponent implements ControlValueAccessor {
     private static _seq;
     protected readonly _labelId: string;
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly size: _angular_core.InputSignal<ClxColorPickerSize>;
+    readonly size: _angular_core.InputSignal<ClxColorPickerSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxColorPickerSize>;
     readonly format: _angular_core.InputSignal<ClxColorPickerFormat>;
     readonly presets: _angular_core.InputSignal<string[]>;
-    readonly activeColor: _angular_core.InputSignal<ClxColorInput>;
+    readonly activeColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _activeColor: _angular_core.Signal<ClxColorInput>;
     readonly hint: _angular_core.InputSignal<string>;
     readonly errorMessage: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -1312,8 +1363,9 @@ declare class ClxDatepickerComponent implements ControlValueAccessor {
     origin: ElementRef;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxDatepickerSize>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly size: _angular_core.InputSignal<ClxDatepickerSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxDatepickerSize>;
     readonly status: _angular_core.InputSignal<ClxDatepickerStatus>;
     readonly statusMessage: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
@@ -1330,6 +1382,7 @@ declare class ClxDatepickerComponent implements ControlValueAccessor {
     protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
     protected readonly _showYearPicker: _angular_core.WritableSignal<boolean>;
     protected readonly _dayLabels: string[];
+    private readonly _themeSvc;
     private readonly _el;
     private readonly _sso;
     readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
@@ -1351,6 +1404,7 @@ declare class ClxDatepickerComponent implements ControlValueAccessor {
         iconColor: string;
     }>;
     protected readonly _overlayWidth: _angular_core.Signal<any>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
     protected readonly _labelClass: _angular_core.Signal<string>;
     protected readonly _hintClass: _angular_core.Signal<string>;
     protected readonly _statusMsgClass: _angular_core.Signal<string>;
@@ -1392,8 +1446,9 @@ declare class ClxTimepickerComponent implements ControlValueAccessor {
     origin: ElementRef;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxTimepickerSize>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly size: _angular_core.InputSignal<ClxTimepickerSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxTimepickerSize>;
     readonly status: _angular_core.InputSignal<ClxTimepickerStatus>;
     readonly statusMessage: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
@@ -1407,6 +1462,7 @@ declare class ClxTimepickerComponent implements ControlValueAccessor {
     protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
     protected readonly _hours: number[];
     protected readonly _minutes: number[];
+    private readonly _themeSvc;
     private readonly _el;
     private readonly _sso;
     readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
@@ -1427,6 +1483,7 @@ declare class ClxTimepickerComponent implements ControlValueAccessor {
         iconColor: string;
     }>;
     protected readonly _overlayWidth: _angular_core.Signal<any>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
     protected readonly _labelClass: _angular_core.Signal<string>;
     protected readonly _hintClass: _angular_core.Signal<string>;
     protected readonly _statusMsgClass: _angular_core.Signal<string>;
@@ -1477,10 +1534,13 @@ interface DatePreset {
     range: () => ClxDateRange;
 }
 declare class ClxDateRangePickerComponent implements ControlValueAccessor {
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxDateRangePickerSize>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    readonly size: _angular_core.InputSignal<ClxDateRangePickerSize | undefined>;
+    protected readonly _size: _angular_core.Signal<ClxDateRangePickerSize>;
     readonly status: _angular_core.InputSignal<ClxDateRangePickerStatus>;
     readonly statusMessage: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
@@ -1558,6 +1618,8 @@ declare class ClxDateRangePickerComponent implements ControlValueAccessor {
 
 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>;
@@ -1584,10 +1646,13 @@ interface ToolBtn {
     mark?: string;
 }
 declare class ClxEditorComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxEditorSize>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    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<"error" | "default" | "success">;
     readonly statusMessage: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
@@ -1664,10 +1729,12 @@ type ClxInputSize = 'sm' | 'md' | 'lg';
 type ClxInputType = 'text' | 'password' | 'email' | 'search' | 'tel' | 'url';
 
 declare class ClxInputComponent implements ControlValueAccessor {
+    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>;
+    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>;
@@ -1675,7 +1742,8 @@ declare class ClxInputComponent implements ControlValueAccessor {
     readonly suffixText: _angular_core.InputSignal<string>;
     readonly status: _angular_core.InputSignal<ClxInputStatus>;
     readonly statusMessage: _angular_core.InputSignal<string>;
-    readonly size: _angular_core.InputSignal<ClxInputSize>;
+    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) */
@@ -1739,8 +1807,9 @@ declare class ClxNumberComponent implements ControlValueAccessor {
     private static _seq;
     protected readonly _inputId: string;
     readonly variant: _angular_core.InputSignal<ClxNumberVariant>;
-    readonly size: _angular_core.InputSignal<ClxNumberSize>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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>;
@@ -1761,6 +1830,8 @@ declare class ClxNumberComponent implements ControlValueAccessor {
     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;
@@ -1796,7 +1867,9 @@ type ClxRadioVariant = 'solid' | 'outline';
 
 declare const CLX_RADIO_GROUP: InjectionToken<ClxRadioGroupComponent>;
 declare class ClxRadioGroupComponent implements ControlValueAccessor {
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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<"horizontal" | "vertical">;
@@ -1826,6 +1899,7 @@ declare class ClxRadioComponent {
     readonly variant: _angular_core.InputSignal<ClxRadioVariant | null>;
     readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | null>;
     private readonly _group;
+    private readonly _themeSvc;
     protected readonly _checked: _angular_core.Signal<boolean>;
     protected readonly _isDisabled: _angular_core.Signal<boolean>;
     private readonly _color;
@@ -1860,8 +1934,9 @@ declare class ClxSelectComponent implements ControlValueAccessor {
     readonly multiple: _angular_core.InputSignal<boolean>;
     readonly searchable: _angular_core.InputSignal<boolean>;
     readonly searchPlaceholder: _angular_core.InputSignal<string>;
-    readonly activeColor: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxSelectSize>;
+    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>;
@@ -1881,7 +1956,9 @@ declare class ClxSelectComponent implements ControlValueAccessor {
     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;
     readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
@@ -1938,11 +2015,14 @@ declare class ClxSelectComponent implements ControlValueAccessor {
 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>;
-    readonly size: _angular_core.InputSignal<ClxSliderSize>;
+    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>;
@@ -1991,8 +2071,11 @@ declare class ClxSliderComponent implements ControlValueAccessor {
 
 type ClxSwitchSize = 'xs' | 'sm' | 'md' | 'lg';
 declare class ClxSwitchComponent implements ControlValueAccessor {
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxSwitchSize>;
+    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>;
@@ -2045,8 +2128,9 @@ type ClxTextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare class ClxTextareaComponent implements ControlValueAccessor {
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
-    readonly size: _angular_core.InputSignal<ClxTextareaSize>;
+    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>;
@@ -2059,12 +2143,14 @@ declare class ClxTextareaComponent implements ControlValueAccessor {
     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>;
     protected readonly _sizeCfg: _angular_core.Signal<{
         textarea: string;
         label: string;
@@ -2112,12 +2198,15 @@ 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>;
-    readonly size: _angular_core.InputSignal<ClxUploadSize>;
+    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;
@@ -2185,7 +2274,9 @@ type ClxWizardOrientation = 'horizontal' | 'vertical';
 type ClxWizardStepStatus = 'pending' | 'active' | 'completed' | 'error';
 
 declare class ClxWizardComponent implements AfterContentInit {
-    readonly color: _angular_core.InputSignal<codexly_ui.ClxColorInput>;
+    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>;
@@ -2222,7 +2313,7 @@ declare class ClxWizardComponent implements AfterContentInit {
 declare class ClxAppLayoutComponent implements OnInit, OnDestroy {
     private readonly _zone;
     private readonly _document;
-    readonly activeColor: _angular_core.InputSignal<ClxColorInput>;
+    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>;
@@ -2257,10 +2348,11 @@ declare class ClxBrandComponent {
 }
 
 declare class ClxMenuItemComponent {
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string>;
     readonly active: _angular_core.InputSignal<boolean>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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[]>;
@@ -2280,9 +2372,11 @@ declare class ClxMenuItemComponent {
 }
 
 declare class ClxMenuComponent implements AfterContentInit, AfterViewInit {
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    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[]>;
@@ -2325,11 +2419,13 @@ declare class ClxProfileComponent {
     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>;
+    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;
+    protected readonly _color: _angular_core.Signal<ClxColorInput>;
     private readonly _sso;
     readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
     readonly _positions: ConnectedPosition[];
@@ -2396,13 +2492,16 @@ declare class ClxColumnDefDirective<T> {
 }
 
 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>;
+    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>;
@@ -2440,7 +2539,7 @@ declare class ClxTableComponent<T = any> {
     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; }; "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>;
+    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>;
 }
 
 /** Refleja st_variations + st_products (campos necesarios para la wishlist card) */
@@ -2486,15 +2585,15 @@ declare class ClxWishlistComponent {
     readonly onPageChange: _angular_core.OutputEmitterRef<ClxWishlistPageChangeEvent>;
     readonly onCheckoutAll: _angular_core.OutputEmitterRef<ClxWishlistItem[]>;
     readonly _skeletonItems: unknown[];
-    protected readonly _cardClass = "bg-white rounded-2xl shadow-sm transition-[box-shadow,transform] duration-300 overflow-hidden group hover:shadow-xl hover:-translate-y-0.5 flex flex-col sm:flex-row";
+    protected readonly _cardClass = "bg-clx-surface rounded-2xl shadow-sm transition-[box-shadow,transform] duration-300 overflow-hidden group hover:shadow-xl hover:-translate-y-0.5 flex flex-col sm:flex-row";
     protected readonly _imageContainerClass = "relative shrink-0 w-full aspect-square sm:aspect-auto sm:w-40 overflow-hidden rounded-t-2xl sm:rounded-t-none sm:rounded-l-2xl";
     protected readonly _imageClass = "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105";
     protected readonly _contentClass = "relative flex flex-col gap-2 flex-1 p-3 min-w-0";
     protected readonly _actionsClass = "mt-auto pt-2 flex flex-col gap-2";
     protected readonly _overlayClass = "absolute inset-0 bg-white/50 rounded-t-2xl sm:rounded-t-none sm:rounded-l-2xl";
-    protected readonly _titleClass = "font-semibold truncate text-base text-slate-900 pr-6";
-    protected readonly _descClass = "text-sm line-clamp-2 text-slate-500 mt-0.5";
-    protected readonly _priceClass = "text-lg font-bold text-slate-900";
+    protected readonly _titleClass = "font-semibold truncate text-base text-clx-text-label pr-6";
+    protected readonly _descClass = "text-sm line-clamp-2 text-clx-text-muted mt-0.5";
+    protected readonly _priceClass = "text-lg font-bold text-clx-text-label";
     protected readonly _filtered: _angular_core.Signal<ClxWishlistItem[]>;
     protected readonly _totalItems: _angular_core.Signal<number>;
     protected readonly _pagedItems: _angular_core.Signal<ClxWishlistItem[]>;
@@ -2582,6 +2681,56 @@ declare class ClxCartSummaryDrawer {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCartSummaryDrawer, "clx-cart-summary-drawer", never, {}, {}, never, never, true, never>;
 }
 
+interface ClxThemeConfig {
+    /** Default accent color for all components (buttons, inputs, checkboxes…) */
+    primaryColor: ClxColorInput;
+    /** Color used for destructive actions and error states */
+    dangerColor: ClxColorInput;
+    /** Color used for success confirmations */
+    successColor: ClxColorInput;
+    /** Color used for warnings */
+    warningColor: ClxColorInput;
+    /** Neutral color for surfaces, nav idle states */
+    neutralColor: ClxColorInput;
+    /** Default border-radius style applied to all components */
+    borderRadius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Default size for all form/interactive components */
+    defaultSize: Extract<ClxSize, 'sm' | 'md' | 'lg'>;
+    /** Default shape for buttons, badges, tags */
+    defaultShape: Extract<ClxShape, 'rounded' | 'pill'>;
+}
+declare const CLX_RADIUS_MAP: Record<ClxThemeConfig['borderRadius'], string>;
+/** Returns the Tailwind class for a form-control radius */
+declare function resolveRadius(r: ClxThemeConfig['borderRadius']): string;
+/** Returns the Tailwind class for a surface/container radius (card, panel, dropzone) */
+declare function resolveContainerRadius(r: ClxThemeConfig['borderRadius']): string;
+declare const CLX_THEME_DEFAULTS: ClxThemeConfig;
+declare const CLX_THEME_CONFIG: InjectionToken<ClxThemeConfig>;
+declare function provideCodexlyTheme(config: Partial<ClxThemeConfig>): Provider;
+
+declare const CLX_TEXT_LABEL = "text-clx-text-label";
+declare const CLX_TEXT_HINT = "text-clx-text-subtle";
+declare const CLX_TEXT_DISABLED = "text-clx-text-subtle";
+declare const CLX_TEXT_INPUT = "text-clx-text-label";
+declare const CLX_TEXT_TITLE = "text-clx-text-label";
+declare const CLX_TEXT_SUBTITLE = "text-clx-text-subtle";
+declare const CLX_TEXT_IDLE = "text-clx-text-subtle";
+declare const CLX_TEXT_BODY = "text-clx-text-muted";
+declare const CLX_TEXT_HEADING = "text-clx-text-label";
+declare const CLX_TEXT_OPTION = "text-clx-text-label";
+declare const CLX_BORDER_DEFAULT = "border-clx-border";
+declare const CLX_BORDER_MEDIUM = "border-clx-border";
+declare const CLX_BG_SURFACE = "bg-clx-surface";
+declare const CLX_BG_DISABLED = "bg-clx-surface-2";
+declare const CLX_BG_SECTION = "bg-clx-surface-2";
+declare const CLX_BG_ICON_WRAP = "bg-clx-surface-3";
+declare const CLX_BG_ADDON = "bg-clx-surface-3";
+declare const CLX_PLACEHOLDER = "placeholder:text-clx-text-subtle";
+declare const CLX_BORDER_DISABLED = "border-clx-border";
+declare const CLX_ADDON_BORDER = "border-clx-border";
+declare const CLX_ADDON_TEXT = "text-clx-text-muted";
+declare const CLX_OPTION_DISABLED = "text-clx-text-faint";
+
 declare const CLX_MODAL_DATA: InjectionToken<any>;
 declare const CLX_MODAL_REF: InjectionToken<ClxModalRef<any>>;
 interface ClxModalAnimConfig {
@@ -2728,6 +2877,26 @@ declare class ClxTooltipDirective {
     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;
+    private readonly _initial;
+    private readonly _mode;
+    private readonly _sysDark;
+    private readonly _config;
+    readonly mode: _angular_core.Signal<ClxThemeMode>;
+    readonly config: _angular_core.Signal<ClxThemeConfig>;
+    readonly isDark: _angular_core.Signal<boolean>;
+    constructor();
+    setMode(mode: ClxThemeMode): void;
+    setConfig(patch: Partial<ClxThemeConfig>): void;
+    toggle(): void;
+    private _loadMode;
+    private _getSystemDark;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ClxThemeService>;
+}
+
 declare class ClxAlertService {
     private readonly _overlay;
     private readonly _injector;
@@ -2814,17 +2983,20 @@ 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>;
-    readonly size: _angular_core.InputSignal<ClxProgressBarSize>;
+    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<"value" | "percent" | "fraction">;
     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-slate-600" | "text-sm text-slate-600">;
+    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>;
@@ -2865,22 +3037,24 @@ declare class ClxPageServerErrorComponent {
 }
 
 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>;
+    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-slate-600 mb-1" | "text-xl font-semibold text-slate-700 mb-2" | "text-base font-semibold text-slate-700 mb-1";
+    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_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_COLOR_HEX, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_RADIO_GROUP, 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, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, resolveColor };
-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, 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, 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_MAP, 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, 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 };