codexly-ui 0.0.93 → 0.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexly-ui",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/types/codexly-ui.d.ts

@@ -87,6 +87,7 @@ declare const CLX_COLOR_HEX: {
     slate300: string;
     slate400: string;
 };
+declare const CLX_COLOR_HEX_100: Record<ClxColor, string>;
 
 type ClxTrendDirection = 'up' | 'down' | 'neutral';
 interface ClxStatMetric {
@@ -105,7 +106,7 @@ 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">;
+    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>;
@@ -115,7 +116,7 @@ declare class ClxStatCardComponent {
     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-slate-400" | "text-green-500">;
+    protected readonly _trendTextClass: _angular_core.Signal<"text-green-500" | "text-red-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[]>;
@@ -201,7 +202,7 @@ interface ClxCarouselConfig {
 }
 
 declare class ClxCarouselComponent implements AfterContentInit, OnDestroy {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly clxColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _clxColor: _angular_core.Signal<ClxColorInput>;
     readonly autoPlay: _angular_core.InputSignal<boolean>;
@@ -361,7 +362,7 @@ interface ClxTreeExpandEvent {
 }
 
 declare class ClxTreeComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly nodes: _angular_core.InputSignal<ClxTreeNode[]>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
@@ -381,7 +382,7 @@ declare class ClxTreeComponent {
         icon: "xs" | "sm" | "md";
         indent: string;
     }>;
-    protected readonly _indentPx: _angular_core.Signal<16 | 24 | 20>;
+    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;
@@ -428,7 +429,7 @@ interface ClxFilterChangeEvent {
 }
 
 declare class ClxFilterPanelComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly fields: _angular_core.InputSignal<ClxFilterField[]>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly showApply: _angular_core.InputSignal<boolean>;
@@ -513,7 +514,7 @@ declare class ClxTabDirective {
 }
 
 declare class ClxTabsComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly tabs: _angular_core.InputSignal<ClxTabItem[]>;
     readonly clxColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly activeTab: _angular_core.ModelSignal<string>;
@@ -557,7 +558,7 @@ declare class ClxDrawerComponent {
     readonly cancelClick: _angular_core.OutputEmitterRef<void>;
     private readonly _modalRef;
     private readonly _sizeToken;
-    private readonly _cfg;
+    private readonly _themeSvc;
     protected readonly _resolvedSize: _angular_core.Signal<ClxDrawerSize>;
     protected readonly _hostClass: _angular_core.Signal<string>;
     protected readonly _hasBuiltInButtons: _angular_core.Signal<boolean>;
@@ -649,7 +650,7 @@ declare class ClxModalComponent {
     readonly cancelClick: _angular_core.OutputEmitterRef<void>;
     private readonly _modalRef;
     private readonly _sizeToken;
-    private readonly _cfg;
+    private readonly _themeSvc;
     protected readonly _resolvedSize: _angular_core.Signal<ClxModalSize>;
     protected readonly _hostClass: _angular_core.Signal<string>;
     protected readonly _hasBuiltInButtons: _angular_core.Signal<boolean>;
@@ -688,7 +689,7 @@ type PageItem = {
     id: string;
 };
 declare class ClxPaginationComponent {
-    private readonly _themeCfg;
+    private readonly _themeSvc;
     readonly totalItems: _angular_core.InputSignal<number>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
@@ -797,7 +798,7 @@ type ClxCardPadding = 'none' | 'sm' | 'md' | 'lg';
 type ClxCardShadow = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 declare class ClxCardComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly variant: _angular_core.InputSignal<ClxCardVariant>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly padding: _angular_core.InputSignal<ClxCardPadding>;
@@ -842,7 +843,7 @@ interface ClxStepperStep {
 }
 
 declare class ClxStepperComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly steps: _angular_core.InputSignal<ClxStepperStep[]>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
@@ -873,7 +874,7 @@ type ClxShape = 'rounded' | 'pill' | 'circle';
 type ClxAvatarContentType = 'image' | 'text' | 'icon';
 
 declare class ClxAvatarComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly src: _angular_core.InputSignal<string | null>;
     readonly initials: _angular_core.InputSignal<string | null>;
     readonly iconName: _angular_core.InputSignal<string | null>;
@@ -899,7 +900,7 @@ 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">;
+    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>;
@@ -917,7 +918,7 @@ interface ClxListItem {
 }
 
 declare class ClxListComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly resolvedColor: _angular_core.Signal<ClxColorInput>;
     readonly variant: _angular_core.InputSignal<ClxListVariant>;
@@ -960,7 +961,7 @@ declare const LIST_SIZE_MAP: Record<ClxListSize, {
 
 declare class ClxListItemComponent {
     protected readonly _ctx: ClxListContext;
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly sublabel: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string>;
@@ -979,7 +980,7 @@ declare class ClxListItemComponent {
 }
 
 declare class ClxRatingComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly value: _angular_core.InputSignal<number>;
     readonly max: _angular_core.InputSignal<number>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
@@ -995,7 +996,7 @@ declare class ClxRatingComponent {
 }
 
 declare class ClxBadgeComponent {
-    private readonly _cfg;
+    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>;
@@ -1010,7 +1011,7 @@ declare class ClxBadgeComponent {
 }
 
 declare class ClxButtonComponent {
-    private readonly _cfg;
+    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>;
@@ -1071,7 +1072,7 @@ type ClxSpinnerVariant = 'spinner' | 'dots' | 'pulse';
 type ClxSpinnerColor = ClxColorInput | 'inherit';
 
 declare class ClxSpinnerComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly size: _angular_core.InputSignal<ClxSize>;
     readonly color: _angular_core.InputSignal<ClxSpinnerColor | undefined>;
     readonly variant: _angular_core.InputSignal<ClxSpinnerVariant>;
@@ -1089,7 +1090,7 @@ type ClxTagSize = 'sm' | 'md';
 type ClxTagShape = 'rounded' | 'pill';
 
 declare class ClxTagComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly variant: _angular_core.InputSignal<ClxTagVariant>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly size: _angular_core.InputSignal<ClxTagSize | undefined>;
@@ -1114,7 +1115,7 @@ type ClxTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
 type ClxTooltipSize = 'sm' | 'md';
 
 declare class ClxTooltipComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly text: _angular_core.InputSignal<string>;
     readonly position: _angular_core.InputSignal<ClxTooltipPosition>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
@@ -1130,7 +1131,7 @@ type ClxTimelineMode = 'left' | 'alternate';
 type ClxTimelineSize = 'sm' | 'md' | 'lg';
 
 declare class ClxTimelineComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly resolvedColor: _angular_core.Signal<ClxColorInput>;
     readonly lineStyle: _angular_core.InputSignal<ClxTimelineLineStyle>;
@@ -1200,7 +1201,7 @@ interface ClxChartOptions {
 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>>;
+    data: _angular_core.InputSignal<ChartData<keyof chart_js.ChartTypeRegistry, (number | [number, number] | chart_js.Point | 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>;
@@ -1218,7 +1219,7 @@ declare class ClxChartComponent implements AfterViewInit, OnDestroy {
 type ClxCheckboxVariant = 'solid' | 'outline';
 
 declare class ClxCheckboxComponent implements ControlValueAccessor {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
     readonly variant: _angular_core.InputSignal<ClxCheckboxVariant>;
@@ -1268,7 +1269,7 @@ type ClxColorPickerFormat = 'hex' | 'rgb' | 'hsl';
 declare class ClxColorPickerComponent implements ControlValueAccessor {
     private static _seq;
     protected readonly _labelId: string;
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<ClxColorPickerSize | undefined>;
@@ -1382,7 +1383,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 _cfg;
+    private readonly _themeSvc;
     private readonly _el;
     private readonly _sso;
     readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
@@ -1462,7 +1463,7 @@ declare class ClxTimepickerComponent implements ControlValueAccessor {
     protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
     protected readonly _hours: number[];
     protected readonly _minutes: number[];
-    private readonly _cfg;
+    private readonly _themeSvc;
     private readonly _el;
     private readonly _sso;
     readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
@@ -1534,7 +1535,7 @@ interface DatePreset {
     range: () => ClxDateRange;
 }
 declare class ClxDateRangePickerComponent implements ControlValueAccessor {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
@@ -1618,7 +1619,8 @@ declare class ClxDateRangePickerComponent implements ControlValueAccessor {
 
 declare class ClxEditorLinkModalComponent {
     private readonly _modalRef;
-    protected readonly _primaryColor: codexly_ui.ClxColorInput;
+    private readonly _themeSvc;
+    protected readonly _primaryColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
     protected readonly _form: FormGroup<{
         text: FormControl<string>;
         url: FormControl<string>;
@@ -1645,14 +1647,14 @@ interface ToolBtn {
     mark?: string;
 }
 declare class ClxEditorComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     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<"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>;
@@ -1728,7 +1730,7 @@ type ClxInputSize = 'sm' | 'md' | 'lg';
 type ClxInputType = 'text' | 'password' | 'email' | 'search' | 'tel' | 'url';
 
 declare class ClxInputComponent implements ControlValueAccessor {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly type: _angular_core.InputSignal<ClxInputType>;
@@ -1829,7 +1831,7 @@ declare class ClxNumberComponent implements ControlValueAccessor {
     private _onTouched;
     protected readonly _isAtMin: _angular_core.Signal<boolean>;
     protected readonly _isAtMax: _angular_core.Signal<boolean>;
-    private readonly _cfg;
+    private readonly _themeSvc;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
     protected readonly _sizeConfig: _angular_core.Signal<{
         container: string;
@@ -1866,12 +1868,12 @@ type ClxRadioVariant = 'solid' | 'outline';
 
 declare const CLX_RADIO_GROUP: InjectionToken<ClxRadioGroupComponent>;
 declare class ClxRadioGroupComponent implements ControlValueAccessor {
-    private readonly _cfg;
+    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 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>;
@@ -1898,7 +1900,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 _cfg;
+    private readonly _themeSvc;
     protected readonly _checked: _angular_core.Signal<boolean>;
     protected readonly _isDisabled: _angular_core.Signal<boolean>;
     private readonly _color;
@@ -1955,7 +1957,7 @@ declare class ClxSelectComponent implements ControlValueAccessor {
     private readonly _wasTouched;
     private readonly _selectedVals;
     private readonly _cvaDisabled;
-    private readonly _cfg;
+    private readonly _themeSvc;
     private readonly _ngControl;
     protected readonly _activeColor: Signal<ClxColorInput>;
     private readonly _el;
@@ -2014,7 +2016,7 @@ declare class ClxSelectComponent implements ControlValueAccessor {
 type ClxSliderSize = 'sm' | 'md' | 'lg';
 
 declare class ClxSliderComponent implements ControlValueAccessor {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
     readonly errorMessage: _angular_core.InputSignal<string>;
@@ -2070,7 +2072,7 @@ declare class ClxSliderComponent implements ControlValueAccessor {
 
 type ClxSwitchSize = 'xs' | 'sm' | 'md' | 'lg';
 declare class ClxSwitchComponent implements ControlValueAccessor {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
     readonly size: _angular_core.InputSignal<ClxSwitchSize | undefined>;
@@ -2142,7 +2144,7 @@ declare class ClxTextareaComponent implements ControlValueAccessor {
     readonly disabled: _angular_core.InputSignal<boolean>;
     protected readonly _taId: string;
     readonly _value: _angular_core.WritableSignal<string>;
-    private readonly _cfg;
+    private readonly _themeSvc;
     private readonly _cvaDisabled;
     private _cvaConnected;
     protected readonly _disabled: _angular_core.Signal<boolean>;
@@ -2197,7 +2199,7 @@ type ClxUploadSize = 'sm' | 'md' | 'lg';
 type ClxUploadError = 'fileType' | 'fileSize';
 
 declare class ClxUploadComponent implements ControlValueAccessor {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly multiple: _angular_core.InputSignal<boolean>;
     readonly accept: _angular_core.InputSignal<string>;
     /** Max file size in bytes. 0 = no limit. */
@@ -2273,7 +2275,7 @@ type ClxWizardOrientation = 'horizontal' | 'vertical';
 type ClxWizardStepStatus = 'pending' | 'active' | 'completed' | 'error';
 
 declare class ClxWizardComponent implements AfterContentInit {
-    private readonly _cfg;
+    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>;
@@ -2347,7 +2349,7 @@ declare class ClxBrandComponent {
 }
 
 declare class ClxMenuItemComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string>;
     readonly active: _angular_core.InputSignal<boolean>;
@@ -2371,7 +2373,7 @@ declare class ClxMenuItemComponent {
 }
 
 declare class ClxMenuComponent implements AfterContentInit, AfterViewInit {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
@@ -2423,7 +2425,7 @@ declare class ClxProfileComponent {
     readonly signOutLabel: _angular_core.InputSignal<string>;
     readonly menuAction: _angular_core.OutputEmitterRef<string>;
     readonly signOut: _angular_core.OutputEmitterRef<void>;
-    private readonly _cfg;
+    private readonly _themeSvc;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
     private readonly _sso;
     readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
@@ -2491,7 +2493,7 @@ declare class ClxColumnDefDirective<T> {
 }
 
 declare class ClxTableComponent<T = any> {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly data: _angular_core.InputSignal<T[]>;
     readonly columns: _angular_core.InputSignal<ClxTableColumn<T>[]>;
     readonly loading: _angular_core.InputSignal<boolean>;
@@ -2879,12 +2881,16 @@ declare class ClxTooltipDirective {
 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;
@@ -2978,7 +2984,7 @@ type ClxProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
 type ClxProgressBarVariant = 'solid' | 'striped' | 'indeterminate';
 
 declare class ClxProgressBarComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly value: _angular_core.InputSignal<number>;
     readonly max: _angular_core.InputSignal<number>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
@@ -2987,7 +2993,7 @@ declare class ClxProgressBarComponent {
     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">;
+    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>;
@@ -3032,7 +3038,7 @@ declare class ClxPageServerErrorComponent {
 }
 
 declare class ClxPageEmptyComponent {
-    private readonly _cfg;
+    private readonly _themeSvc;
     readonly icon: _angular_core.InputSignal<string>;
     readonly title: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string>;
@@ -3051,5 +3057,5 @@ declare class ClxPageEmptyComponent {
     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_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 { 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_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 };