codexly-ui 0.0.93 → 0.0.95

package/fesm2022/codexly-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, effect, signal, ElementRef, PLATFORM_ID, Injectable, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, Directive, output, contentChildren, NgZone, model, untracked, forwardRef, viewChild, HostListener, ViewChildren, contentChild, Injector, ViewChild, ChangeDetectorRef, ContentChildren, Input, numberAttribute, booleanAttribute } from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, signal, computed, effect, Injectable, input, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, Directive, output, contentChildren, NgZone, model, untracked, forwardRef, viewChild, HostListener, ViewChildren, contentChild, Injector, ViewChild, ChangeDetectorRef, ContentChildren, Input, numberAttribute, booleanAttribute } from '@angular/core';
 import { isPlatformBrowser, CurrencyPipe, NgTemplateOutlet, DecimalPipe, NgStyle, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl, FormControl, ReactiveFormsModule, FormGroup, Validators } from '@angular/forms';
@@ -140,6 +140,15 @@ const CLX_COLOR_HEX = {
     neutral: '#737373', stone: '#78716c', white: '#ffffff',
     slate100: '#f1f5f9', slate200: '#e2e8f0', slate300: '#cbd5e1', slate400: '#94a3b8',
 };
+// ── Hex values at shade-100 (for soft backgrounds) ────────────────────────────
+const CLX_COLOR_HEX_100 = {
+    red: '#fee2e2', orange: '#ffedd5', amber: '#fef3c7', yellow: '#fef9c3',
+    lime: '#dcfce7', green: '#dcfce7', emerald: '#d1fae5', teal: '#ccfbf1',
+    cyan: '#cffafe', sky: '#e0f2fe', blue: '#dbeafe', indigo: '#e0e7ff',
+    violet: '#ede9fe', purple: '#f3e8ff', fuchsia: '#fae8ff', pink: '#fce7f3',
+    rose: '#ffe4e6', slate: '#f1f5f9', gray: '#f3f4f6', zinc: '#f4f4f5',
+    neutral: '#f5f5f5', stone: '#f5f5f4', white: '#ffffff',
+};
 
 const BADGE_SIZE_MAP = {
     xs: 'text-[10px] px-1.5 py-0.5',
@@ -203,16 +212,85 @@ function provideCodexlyTheme(config) {
     };
 }
 
+const STORAGE_KEY = 'clx-theme-mode';
+class ClxThemeService {
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _initial = inject(CLX_THEME_CONFIG);
+    _mode = signal(this._loadMode(), ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
+    _sysDark = signal(this._getSystemDark(), ...(ngDevMode ? [{ debugName: "_sysDark" }] : /* istanbul ignore next */ []));
+    _config = signal({ ...CLX_THEME_DEFAULTS, ...this._initial }, ...(ngDevMode ? [{ debugName: "_config" }] : /* istanbul ignore next */ []));
+    mode = this._mode.asReadonly();
+    config = this._config.asReadonly();
+    isDark = computed(() => {
+        const m = this._mode();
+        if (m === 'dark')
+            return true;
+        if (m === 'light')
+            return false;
+        return this._sysDark();
+    }, ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!this._isBrowser)
+                return;
+            document.documentElement.setAttribute('data-clx-theme', this.isDark() ? 'dark' : 'light');
+        });
+        effect(() => {
+            if (!this._isBrowser)
+                return;
+            const primaryColor = this._config().primaryColor;
+            if (!primaryColor)
+                return;
+            const { color } = parseColorInput(primaryColor);
+            const hex500 = CLX_COLOR_HEX[color] ?? CLX_COLOR_HEX.indigo;
+            const hex100 = CLX_COLOR_HEX_100[color] ?? CLX_COLOR_HEX_100.indigo;
+            document.documentElement.style.setProperty('--clx-primary', hex500);
+            document.documentElement.style.setProperty('--clx-primary-light', hex100);
+        });
+        if (this._isBrowser) {
+            const mq = window.matchMedia('(prefers-color-scheme: dark)');
+            mq.addEventListener('change', e => this._sysDark.set(e.matches));
+        }
+    }
+    setMode(mode) {
+        this._mode.set(mode);
+        if (this._isBrowser)
+            localStorage.setItem(STORAGE_KEY, mode);
+    }
+    setConfig(patch) {
+        this._config.update(c => ({ ...c, ...patch }));
+    }
+    toggle() {
+        this.setMode(this.isDark() ? 'light' : 'dark');
+    }
+    _loadMode() {
+        if (!this._isBrowser)
+            return 'system';
+        return localStorage.getItem(STORAGE_KEY) ?? 'system';
+    }
+    _getSystemDark() {
+        if (!this._isBrowser)
+            return false;
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class ClxBadgeComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     shape = input(undefined, ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     positioned = input(false, ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
-    _size = computed(() => this.size() ?? this._cfg.defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
-    _shape = computed(() => this.shape() ?? this._cfg.defaultShape, ...(ngDevMode ? [{ debugName: "_shape" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _size = computed(() => this.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _shape = computed(() => this.shape() ?? this._themeSvc.config().defaultShape, ...(ngDevMode ? [{ debugName: "_shape" }] : /* istanbul ignore next */ []));
     _hostClass = computed(() => {
         const t = resolveColor(this._color());
         const variant = this.variant();
@@ -220,7 +298,7 @@ class ClxBadgeComponent {
         const isCircle = sh === 'circle';
         const sizeClass = isCircle ? BADGE_CIRCLE_SIZE_MAP[this._size()] : BADGE_SIZE_MAP[this._size()];
         const shapeClass = sh === 'rounded'
-            ? resolveRadius(this._cfg.borderRadius)
+            ? resolveRadius(this._themeSvc.config().borderRadius)
             : BADGE_SHAPE_FIXED[sh];
         const posClass = this.positioned()
             ? 'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2'
@@ -658,11 +736,11 @@ const SPINNER_PULSE_SIZE_MAP = {
 };
 
 class ClxSpinnerComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     variant = input('spinner', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _spinnerClass = computed(() => {
         const size = SPINNER_SIZE_MAP[this.size()];
         if (this._color() === 'inherit')
@@ -740,14 +818,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class ClxButtonComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     shape = input(undefined, ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
-    _size = computed(() => this.size() ?? this._cfg.defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
-    _shape = computed(() => this.shape() ?? this._cfg.defaultShape, ...(ngDevMode ? [{ debugName: "_shape" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _size = computed(() => this.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _shape = computed(() => this.shape() ?? this._themeSvc.config().defaultShape, ...(ngDevMode ? [{ debugName: "_shape" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     block = input(false, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
@@ -818,7 +896,7 @@ class ClxButtonComponent {
             : BUTTON_SIZE_MAP[this._size()];
         const s = this._shape();
         const shapeClass = s === 'rounded'
-            ? resolveRadius(this._cfg.borderRadius)
+            ? resolveRadius(this._themeSvc.config().borderRadius)
             : BUTTON_SHAPE_FIXED[s];
         const overflowClass = (this.badge() !== undefined && this.badge() !== null) ? 'overflow-visible' : 'overflow-hidden';
         const base = BUTTON_BASE_CLASS.replace('overflow-hidden', overflowClass);
@@ -1140,12 +1218,12 @@ const TOOLTIP_SIZE_MAP = {
 };
 
 class ClxTooltipComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.neutralColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().neutralColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _hostClass = computed(() => {
         const t = resolveColor(this._color());
         return `${t.text} rounded-lg shadow-xl ${t.bg} ${TOOLTIP_SIZE_MAP[this.size()]}`;
@@ -1737,11 +1815,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
 class ClxRatingComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     max = input(5, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.warningColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().warningColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _hexColor = computed(() => {
         const { color } = parseColorInput(this._color());
         return CLX_COLOR_HEX[color] ?? '#f59e0b';
@@ -1808,9 +1886,9 @@ const CAROUSEL_ASPECT_RATIO_MAP = {
 };
 
 class ClxCarouselComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     clxColor = input(undefined, ...(ngDevMode ? [{ debugName: "clxColor" }] : /* istanbul ignore next */ []));
-    _clxColor = computed(() => this.clxColor() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_clxColor" }] : /* istanbul ignore next */ []));
+    _clxColor = computed(() => this.clxColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_clxColor" }] : /* istanbul ignore next */ []));
     autoPlay = input(false, ...(ngDevMode ? [{ debugName: "autoPlay" }] : /* istanbul ignore next */ []));
     interval = input(3000, ...(ngDevMode ? [{ debugName: "interval" }] : /* istanbul ignore next */ []));
     loop = input(true, ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
@@ -2062,11 +2140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { clxTabPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTabPanel", required: true }] }] } });
 
 class ClxTabsComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     clxColor = input(undefined, ...(ngDevMode ? [{ debugName: "clxColor" }] : /* istanbul ignore next */ []));
     activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-    _clxColor = computed(() => this.clxColor() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_clxColor" }] : /* istanbul ignore next */ []));
+    _clxColor = computed(() => this.clxColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_clxColor" }] : /* istanbul ignore next */ []));
     _panels = contentChildren(ClxTabDirective, ...(ngDevMode ? [{ debugName: "_panels" }] : /* istanbul ignore next */ []));
     _underlineClass = computed(() => resolveColor(this._clxColor()).bg, ...(ngDevMode ? [{ debugName: "_underlineClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2215,7 +2293,7 @@ class ClxNumberComponent {
     // ── Inputs ───────────────────────────────────────────────────────────────
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('0', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -2244,8 +2322,8 @@ class ClxNumberComponent {
     _isAtMin = computed(() => this.min() !== null && this._value() <= this.min(), ...(ngDevMode ? [{ debugName: "_isAtMin" }] : /* istanbul ignore next */ []));
     _isAtMax = computed(() => this.max() !== null && this._value() >= this.max(), ...(ngDevMode ? [{ debugName: "_isAtMax" }] : /* istanbul ignore next */ []));
     // ── Computed classes ─────────────────────────────────────────────────────
-    _cfg = inject(CLX_THEME_CONFIG);
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _themeSvc = inject(ClxThemeService);
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => NUMBER_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => `${this._sizeConfig().label} ${CLX_TEXT_LABEL} leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
     _hintClass = computed(() => `${this._sizeConfig().hint} ${CLX_TEXT_HINT}`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
@@ -2254,7 +2332,7 @@ class ClxNumberComponent {
         const focus = this._disabled() ? '' : resolveColor(this._color()).focusWithin;
         const border = this._disabled() ? `${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED}` : CLX_BORDER_DEFAULT;
         const cursor = this._disabled() ? 'cursor-not-allowed' : '';
-        return `flex items-stretch ${size.container} bg-clx-surface ${resolveRadius(this._cfg.borderRadius)} border ${border} ${focus} ${cursor} overflow-hidden transition-all duration-200`;
+        return `flex items-stretch ${size.container} bg-clx-surface ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${focus} ${cursor} overflow-hidden transition-all duration-200`;
     }, ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
     /** Colored prefix icon cell — matches the input accent color */
     _prefixCellCls = computed(() => {
@@ -2574,9 +2652,9 @@ const LIST_SIZE_MAP = {
 };
 
 class ClxListComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    resolvedColor = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
     variant = input('flat', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     numbered = input(false, ...(ngDevMode ? [{ debugName: "numbered" }] : /* istanbul ignore next */ []));
@@ -2615,14 +2693,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 class ClxListItemComponent {
     _ctx = inject(CLX_LIST_CONTEXT);
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     sublabel = input('', ...(ngDevMode ? [{ debugName: "sublabel" }] : /* istanbul ignore next */ []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     meta = input('', ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
     metaColor = input(undefined, ...(ngDevMode ? [{ debugName: "metaColor" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    _metaColor = computed(() => this.metaColor() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_metaColor" }] : /* istanbul ignore next */ []));
+    _metaColor = computed(() => this.metaColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_metaColor" }] : /* istanbul ignore next */ []));
     _index = this._ctx.registerItem();
     _iconClass = computed(() => resolveColor(this._ctx.resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconClass" }] : /* istanbul ignore next */ []));
     _hostClass = computed(() => {
@@ -2825,10 +2903,10 @@ const SIZE_MAP = {
     lg: { row: 'py-2 px-2', text: 'text-sm', icon: 'md', indent: 'pl-7' },
 };
 class ClxTreeComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     nodes = input.required(...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
@@ -2838,7 +2916,7 @@ class ClxTreeComponent {
     expandedIds = model([], ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
     selectChange = output();
     expandChange = output();
-    _treeSize = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_treeSize" }] : /* istanbul ignore next */ []));
+    _treeSize = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_treeSize" }] : /* istanbul ignore next */ []));
     _s = computed(() => SIZE_MAP[this._treeSize()], ...(ngDevMode ? [{ debugName: "_s" }] : /* istanbul ignore next */ []));
     _indentPx = computed(() => this._treeSize() === 'sm' ? 16 : this._treeSize() === 'lg' ? 24 : 20, ...(ngDevMode ? [{ debugName: "_indentPx" }] : /* istanbul ignore next */ []));
     _rootClass = computed(() => `select-none ${this.variant() === 'lines' ? 'divide-y divide-clx-border-soft' : ''}`, ...(ngDevMode ? [{ debugName: "_rootClass" }] : /* istanbul ignore next */ []));
@@ -3043,12 +3121,12 @@ const CHECKBOX_SIZE_MAP = {
 };
 
 class ClxCheckboxComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => this.size() ?? this._cfg.defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => this.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Initial value when used without FormControl */
     value = input(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -3192,15 +3270,15 @@ const SLIDER_SIZE_MAP = {
 };
 
 class ClxSliderComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     // ── Inputs ──────────────────────────────────────────────────────────────────
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     errorMessage = input('Valor fuera de rango', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     activeColor = input(undefined, ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
-    _activeColor = computed(() => this.activeColor() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
+    _activeColor = computed(() => this.activeColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
@@ -3497,9 +3575,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 const CLX_RADIO_GROUP = new InjectionToken('CLX_RADIO_GROUP');
 class ClxRadioGroupComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    resolvedColor = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
     variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
@@ -3585,12 +3663,12 @@ class ClxRadioComponent {
     variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _group = inject(CLX_RADIO_GROUP, { optional: true });
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     _checked = computed(() => this._group ? this._group._value() === this.value() : false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
     _isDisabled = computed(() => this._group?.isDisabled() ?? false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._group?.resolvedColor() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._group?.resolvedColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _variant = computed(() => this.variant() ?? this._group?.variant() ?? 'solid', ...(ngDevMode ? [{ debugName: "_variant" }] : /* istanbul ignore next */ []));
-    _size = computed(() => this.size() ?? this._group?.size() ?? this._cfg.defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => this.size() ?? this._group?.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => RADIO_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _ringClass = computed(() => {
         const base = `${this._sizeConfig().ring} rounded-full border-2 flex items-center justify-center transition-all duration-200`;
@@ -3695,14 +3773,14 @@ const TAG_SIZE_MAP = {
 const TAG_SHAPE_PILL = 'rounded-full';
 
 class ClxTagComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     variant = input('soft', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _tagSize = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_tagSize" }] : /* istanbul ignore next */ []));
+    _tagSize = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_tagSize" }] : /* istanbul ignore next */ []));
     shape = input('rounded', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     onRemove = output();
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => TAG_SIZE_MAP[this._tagSize()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _colorClass = computed(() => {
         const t = resolveColor(this._color());
@@ -3715,7 +3793,7 @@ class ClxTagComponent {
     }, ...(ngDevMode ? [{ debugName: "_colorClass" }] : /* istanbul ignore next */ []));
     _hostClass = computed(() => {
         const s = this._sizeConfig();
-        const shapeClass = this.shape() === 'pill' ? TAG_SHAPE_PILL : resolveRadius(this._cfg.borderRadius);
+        const shapeClass = this.shape() === 'pill' ? TAG_SHAPE_PILL : resolveRadius(this._themeSvc.config().borderRadius);
         return `inline-flex items-center font-medium leading-none ${s.gap} ${s.text} ${s.pad} ${shapeClass} ${this._colorClass()}`;
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _closeBtnColor = computed(() => this.variant() === 'solid' ? 'white' : this._color(), ...(ngDevMode ? [{ debugName: "_closeBtnColor" }] : /* istanbul ignore next */ []));
@@ -3825,13 +3903,13 @@ const INPUT_SIZE_MAP = {
 
 let _clxInputIdCounter = 0;
 class ClxInputComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     // ── Inputs ───────────────────────────────────────────────────────────────
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
     suffixIcon = input('', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
@@ -3840,7 +3918,7 @@ class ClxInputComponent {
     status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     /** Initial value for standalone use (without FormControl) */
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Disabled state for standalone use (without FormControl) */
@@ -3882,7 +3960,7 @@ class ClxInputComponent {
             : this.status() !== 'default'
                 ? this._statusCfg().ring.replace(/focus:/g, 'focus-within:')
                 : resolveColor(this._color()).focusWithin;
-        return `relative flex items-stretch ${resolveRadius(this._cfg.borderRadius)} border ${border} ${focusCls} overflow-hidden transition-all duration-200`;
+        return `relative flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${focusCls} overflow-hidden transition-all duration-200`;
     }, ...(ngDevMode ? [{ debugName: "_wrapperClass" }] : /* istanbul ignore next */ []));
     _inputClass = computed(() => {
         const size = this._sizeConfig();
@@ -3900,7 +3978,7 @@ class ClxInputComponent {
         const hasSuffix = this.type() === 'password' || this.status() !== 'default' || !!this.suffixIcon();
         const pl = size.padDefaultL;
         const pr = hasSuffix ? size.padRight : size.padDefaultR;
-        const base = `w-full ${resolveRadius(this._cfg.borderRadius)} border ${size.input} ${pl} ${pr} outline-none transition-all duration-200`;
+        const base = `w-full ${resolveRadius(this._themeSvc.config().borderRadius)} border ${size.input} ${pl} ${pr} outline-none transition-all duration-200`;
         if (this._disabled()) {
             return `${base} ${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED} cursor-not-allowed ${CLX_TEXT_DISABLED} ${CLX_PLACEHOLDER}`;
         }
@@ -4145,7 +4223,7 @@ class ClxSelectComponent {
     searchPlaceholder = input('Buscar...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
     activeColor = input(undefined, ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     errorMessage = input('Este campo es requerido', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -4171,9 +4249,9 @@ class ClxSelectComponent {
     _selectedVals = signal([], ...(ngDevMode ? [{ debugName: "_selectedVals" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     // ── DI ─────────────────────────────────────────────────────────────────────
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     _ngControl = inject(NgControl, { optional: true, self: true });
-    _activeColor = computed(() => this.activeColor() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
+    _activeColor = computed(() => this.activeColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
     _el = inject((ElementRef));
     _sso = inject(ScrollStrategyOptions);
     _scrollStrategy = this._sso.reposition();
@@ -4233,7 +4311,7 @@ class ClxSelectComponent {
     _hintClass = computed(() => `${this._sizeConfig().hint} ${CLX_TEXT_HINT}`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
     _triggerClass = computed(() => {
         const s = this._sizeConfig();
-        const base = `relative flex items-center ${resolveRadius(this._cfg.borderRadius)} border transition-all duration-200 outline-none w-full overflow-hidden`;
+        const base = `relative flex items-center ${resolveRadius(this._themeSvc.config().borderRadius)} border transition-all duration-200 outline-none w-full overflow-hidden`;
         if (this._disabled()) {
             return `${base} ${s.minH} ${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED} cursor-not-allowed opacity-60`;
         }
@@ -4646,11 +4724,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }] } });
 
 class ClxFilterPanelComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     showApply = input(false, ...(ngDevMode ? [{ debugName: "showApply" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     values = model({}, ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     filterChange = output();
     applyChange = output();
@@ -5329,12 +5407,12 @@ class ClxDrawerComponent {
     cancelClick = output();
     _modalRef = inject(CLX_MODAL_REF, { optional: true });
     _sizeToken = inject(CLX_DRAWER_SIZE, { optional: true });
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     _resolvedSize = computed(() => this.size() ?? this._sizeToken ?? 'md', ...(ngDevMode ? [{ debugName: "_resolvedSize" }] : /* istanbul ignore next */ []));
     _hostClass = computed(() => `${DRAWER_CONTAINER_CLASS} ${DRAWER_SIZE_MAP[this._resolvedSize()]}`, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _hasBuiltInButtons = computed(() => !!this.confirmButton(), ...(ngDevMode ? [{ debugName: "_hasBuiltInButtons" }] : /* istanbul ignore next */ []));
     _confirmText = computed(() => this.confirmButton()?.text ?? 'Aceptar', ...(ngDevMode ? [{ debugName: "_confirmText" }] : /* istanbul ignore next */ []));
-    _confirmColor = computed(() => this.confirmButton()?.color ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
+    _confirmColor = computed(() => this.confirmButton()?.color ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
     _confirmVariant = computed(() => this.confirmButton()?.variant ?? 'solid', ...(ngDevMode ? [{ debugName: "_confirmVariant" }] : /* istanbul ignore next */ []));
     _cancelText = computed(() => this.cancelButton()?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
     _cancelColor = computed(() => this.cancelButton()?.color ?? 'slate', ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
@@ -5474,12 +5552,12 @@ class ClxModalComponent {
     cancelClick = output();
     _modalRef = inject(CLX_MODAL_REF, { optional: true });
     _sizeToken = inject(CLX_MODAL_SIZE, { optional: true });
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     _resolvedSize = computed(() => this.size() ?? this._sizeToken ?? 'md', ...(ngDevMode ? [{ debugName: "_resolvedSize" }] : /* istanbul ignore next */ []));
     _hostClass = computed(() => `${MODAL_CONTAINER_CLASS} ${MODAL_SIZE_MAP[this._resolvedSize()]} max-h-[90vh]`, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _hasBuiltInButtons = computed(() => !!this.confirmButton(), ...(ngDevMode ? [{ debugName: "_hasBuiltInButtons" }] : /* istanbul ignore next */ []));
     _confirmText = computed(() => this.confirmButton()?.text ?? 'Aceptar', ...(ngDevMode ? [{ debugName: "_confirmText" }] : /* istanbul ignore next */ []));
-    _confirmColor = computed(() => this.confirmButton()?.color ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
+    _confirmColor = computed(() => this.confirmButton()?.color ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
     _confirmVariant = computed(() => this.confirmButton()?.variant ?? 'solid', ...(ngDevMode ? [{ debugName: "_confirmVariant" }] : /* istanbul ignore next */ []));
     _cancelText = computed(() => this.cancelButton()?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
     _cancelColor = computed(() => this.cancelButton()?.color ?? 'slate', ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
@@ -5645,11 +5723,11 @@ const PAGINATION_ELLIPSIS_CLASS = {
 const PAGINATION_DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 25, 50, 100];
 
 class ClxPaginationComponent {
-    _themeCfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     // ── Inputs ─────────────────────────────────────────────────────────────────
     totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeCfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     showPageSize = input(true, ...(ngDevMode ? [{ debugName: "showPageSize" }] : /* istanbul ignore next */ []));
     /** Opciones manuales. Si está vacío (default) se calculan automáticamente desde totalItems. */
@@ -5683,7 +5761,7 @@ class ClxPaginationComponent {
         });
     }
     // ── Computed: config por tamaño ────────────────────────────────────────────
-    _size = computed(() => (this.size() ?? this._themeCfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     _cfg = computed(() => PAGINATION_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_cfg" }] : /* istanbul ignore next */ []));
     // ── Computed: total de páginas ─────────────────────────────────────────────
     totalPages = computed(() => {
@@ -6448,13 +6526,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }] });
 
 class ClxCardComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
     shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     hover = input(false, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _headerSlot = contentChild(ClxCardHeaderDirective, ...(ngDevMode ? [{ debugName: "_headerSlot" }] : /* istanbul ignore next */ []));
     _bodySlot = contentChild(ClxCardBodyDirective, ...(ngDevMode ? [{ debugName: "_bodySlot" }] : /* istanbul ignore next */ []));
     _footerSlot = contentChild(ClxCardFooterDirective, ...(ngDevMode ? [{ debugName: "_footerSlot" }] : /* istanbul ignore next */ []));
@@ -6483,7 +6561,7 @@ class ClxCardComponent {
             const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : '';
             variantClass = `bg-clx-surface-2 border border-transparent ${shadowClass}`;
         }
-        return `flex flex-col ${resolveContainerRadius(this._cfg.borderRadius)} overflow-hidden w-full ${variantClass} ${hover}`.trim();
+        return `flex flex-col ${resolveContainerRadius(this._themeSvc.config().borderRadius)} overflow-hidden w-full ${variantClass} ${hover}`.trim();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -6546,10 +6624,10 @@ const STEPPER_SIZE_MAP = {
 };
 
 class ClxStepperComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _tokens = computed(() => STEPPER_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "_tokens" }] : /* istanbul ignore next */ []));
@@ -6747,7 +6825,7 @@ const AVATAR_ICON_SIZE_MAP = {
 };
 
 class ClxAvatarComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
     initials = input(null, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
     iconName = input(null, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
@@ -6755,7 +6833,7 @@ class ClxAvatarComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     alt = input('Avatar', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _contentType = computed(() => {
         if (this.src())
             return 'image';
@@ -6848,9 +6926,9 @@ const TIMELINE_SIZE_MAP = {
 };
 
 class ClxTimelineComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    resolvedColor = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
     lineStyle = input('dotted', ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
     mode = input('left', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -7247,16 +7325,16 @@ class ClxColorPickerComponent {
     // ── Unique label id ────────────────────────────────────────────────────────
     static _seq = 0;
     _labelId = `clx-cp-label-${++ClxColorPickerComponent._seq}`;
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     // ── Inputs ─────────────────────────────────────────────────────────────────
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('Selecciona un color', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     format = input('hex', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
     activeColor = input(undefined, ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
-    _activeColor = computed(() => this.activeColor() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
+    _activeColor = computed(() => this.activeColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     errorMessage = input('Este campo es requerido', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -7323,7 +7401,7 @@ class ClxColorPickerComponent {
     }, ...(ngDevMode ? [{ debugName: "_displayClass" }] : /* istanbul ignore next */ []));
     _triggerClass = computed(() => {
         const s = this._sizeConfig();
-        const base = `relative flex items-center ${resolveRadius(this._cfg.borderRadius)} border transition-all duration-200 outline-none w-full`;
+        const base = `relative flex items-center ${resolveRadius(this._themeSvc.config().borderRadius)} border transition-all duration-200 outline-none w-full`;
         if (this._disabled()) {
             return `${base} ${s.minH} ${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED} cursor-not-allowed opacity-60`;
         }
@@ -7867,7 +7945,7 @@ class ClxDatepickerComponent {
     placeholder = input('Selecciona una fecha', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -7884,7 +7962,7 @@ class ClxDatepickerComponent {
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
     _showYearPicker = signal(false, ...(ngDevMode ? [{ debugName: "_showYearPicker" }] : /* istanbul ignore next */ []));
     _dayLabels = DAY_LABELS$1;
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     _el = inject((ElementRef));
     _sso = inject(ScrollStrategyOptions);
     _scrollStrategy = this._sso.reposition();
@@ -7911,7 +7989,7 @@ class ClxDatepickerComponent {
         this._isOpen();
         return this._el.nativeElement.getBoundingClientRect().width;
     }, ...(ngDevMode ? [{ debugName: "_overlayWidth" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => `${this._sizeConfig().label} ${CLX_TEXT_LABEL} leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
     _hintClass = computed(() => `${this._sizeConfig().hint} ${CLX_TEXT_HINT}`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
     _statusMsgClass = computed(() => `${this._sizeConfig().hint} ${this._statusCfg().msgCls}`, ...(ngDevMode ? [{ debugName: "_statusMsgClass" }] : /* istanbul ignore next */ []));
@@ -7925,7 +8003,7 @@ class ClxDatepickerComponent {
         const focus = resolveColor(this._color()).focus;
         const border = this._disabled() ? `${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED}` : `${status.border} focus:outline-none ${focus}`;
         const cursor = this._disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';
-        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._cfg.borderRadius)} border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
+        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
     }, ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
     _displayClass = computed(() => {
         const hasValue = !!this._value();
@@ -8295,7 +8373,7 @@ class ClxTimepickerComponent {
     placeholder = input('Selecciona una hora', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -8313,7 +8391,7 @@ class ClxTimepickerComponent {
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
     _hours = HOURS;
     _minutes = MINUTES;
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     _el = inject((ElementRef));
     _sso = inject(ScrollStrategyOptions);
     _scrollStrategy = this._sso.reposition();
@@ -8329,7 +8407,7 @@ class ClxTimepickerComponent {
         this._isOpen();
         return this._el.nativeElement.getBoundingClientRect().width;
     }, ...(ngDevMode ? [{ debugName: "_overlayWidth" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => `${this._sizeConfig().label} ${CLX_TEXT_LABEL} leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
     _hintClass = computed(() => `${this._sizeConfig().hint} ${CLX_TEXT_HINT}`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
     _statusMsgClass = computed(() => `${this._sizeConfig().hint} ${this._statusCfg().msgCls}`, ...(ngDevMode ? [{ debugName: "_statusMsgClass" }] : /* istanbul ignore next */ []));
@@ -8343,7 +8421,7 @@ class ClxTimepickerComponent {
         const focus = resolveColor(this._color()).focus;
         const border = this._disabled() ? `${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED}` : `${status.border} focus:outline-none ${focus}`;
         const cursor = this._disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';
-        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._cfg.borderRadius)} border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
+        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
     }, ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
     _displayClass = computed(() => {
         const hasValue = !!this._value();
@@ -8631,13 +8709,13 @@ const DATE_PRESETS = [
     { label: 'Este año', range: () => { const y = new Date().getFullYear(); return { from: new Date(y, 0, 1), to: new Date(y, 11, 31) }; } },
 ];
 class ClxDateRangePickerComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('Selecciona un rango', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -8724,7 +8802,7 @@ class ClxDateRangePickerComponent {
         const focus = resolveColor(this._color()).focus;
         const border = this._disabled() ? 'border-gray-200 bg-gray-50' : `${status.border} focus:outline-none ${focus}`;
         const cursor = this._disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';
-        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._cfg.borderRadius)} border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
+        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
     }, ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
     _displayClass = computed(() => {
         const color = this._disabled() ? 'text-clx-text-faint' : this._hasValue() ? 'text-clx-text-label' : 'text-clx-text-faint';
@@ -9194,7 +9272,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 class ClxEditorLinkModalComponent {
     _modalRef = inject(CLX_MODAL_REF, { optional: true });
-    _primaryColor = inject(CLX_THEME_CONFIG).primaryColor;
+    _themeSvc = inject(ClxThemeService);
+    _primaryColor = computed(() => this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_primaryColor" }] : /* istanbul ignore next */ []));
     _form = new FormGroup({
         text: new FormControl('', { nonNullable: true }),
         url: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.pattern(/^https?:\/\/.+/)] }),
@@ -9216,7 +9295,7 @@ class ClxEditorLinkModalComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: ClxEditorLinkModalComponent, isStandalone: true, selector: "clx-editor-link-modal", ngImport: i0, template: `
     <clx-modal
       size="sm"
-      [confirmButton]="{ text: 'Insertar', color: _primaryColor }"
+      [confirmButton]="{ text: 'Insertar', color: _primaryColor() }"
       [cancelButton]="{ text: 'Cancelar', color: 'slate', variant: 'ghost' }"
       [showCancelButton]="true"
       (confirmClick)="_confirm()"
@@ -9255,7 +9334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     template: `
     <clx-modal
       size="sm"
-      [confirmButton]="{ text: 'Insertar', color: _primaryColor }"
+      [confirmButton]="{ text: 'Insertar', color: _primaryColor() }"
       [cancelButton]="{ text: 'Cancelar', color: 'slate', variant: 'ghost' }"
       [showCancelButton]="true"
       (confirmClick)="_confirm()"
@@ -9502,14 +9581,14 @@ const HEADING_OPTIONS = [
     { value: 'h3', label: 'H3' },
 ];
 class ClxEditorComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     // ── Inputs ───────────────────────────────────────────────────────────────
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('Escribe aquí...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _editorSize = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_editorSize" }] : /* istanbul ignore next */ []));
+    _editorSize = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_editorSize" }] : /* istanbul ignore next */ []));
     status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -9576,7 +9655,7 @@ class ClxEditorComponent {
     _sizeCfg = computed(() => EDITOR_SIZE_MAP[this._editorSize()], ...(ngDevMode ? [{ debugName: "_sizeCfg" }] : /* istanbul ignore next */ []));
     _shellClass = computed(() => {
         const statusCfg = INPUT_STATUS_MAP[this.status()];
-        const r = resolveContainerRadius(this._cfg.borderRadius);
+        const r = resolveContainerRadius(this._themeSvc.config().borderRadius);
         if (this._disabled()) {
             return `${r} border border-gray-200 bg-gray-50 overflow-hidden opacity-60 cursor-not-allowed`;
         }
@@ -10201,11 +10280,11 @@ const SWITCH_SIZE_MAP = {
 };
 
 class ClxSwitchComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     value = input(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -10369,7 +10448,7 @@ class ClxTextareaComponent {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -10383,7 +10462,7 @@ class ClxTextareaComponent {
     // ── Internal state ───────────────────────────────────────────────────────
     _taId = `clx-textarea-${++_clxTextareaIdCounter}`;
     _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cvaConnected = false;
     _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
@@ -10395,7 +10474,7 @@ class ClxTextareaComponent {
     _onChange = () => { };
     _onTouched = () => { };
     // ── Computed shortcuts ───────────────────────────────────────────────────
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _sizeCfg = computed(() => TEXTAREA_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeCfg" }] : /* istanbul ignore next */ []));
     _statusCfg = computed(() => INPUT_STATUS_MAP[this.status()], ...(ngDevMode ? [{ debugName: "_statusCfg" }] : /* istanbul ignore next */ []));
     // ── Classes ──────────────────────────────────────────────────────────────
@@ -10409,13 +10488,13 @@ class ClxTextareaComponent {
     _wrapperClass = computed(() => {
         const statusCfg = this._statusCfg();
         if (this._disabled()) {
-            return `flex items-stretch ${resolveRadius(this._cfg.borderRadius)} border ${CLX_BORDER_DISABLED} overflow-hidden transition-all duration-200`;
+            return `flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border ${CLX_BORDER_DISABLED} overflow-hidden transition-all duration-200`;
         }
         const focusCls = this.status() !== 'default'
             ? statusCfg.ring.replace(/focus:/g, 'focus-within:')
             : resolveColor(this._color()).focusWithin;
         const border = statusCfg.border;
-        return `flex items-stretch ${resolveRadius(this._cfg.borderRadius)} border ${border} ${focusCls} overflow-hidden transition-all duration-200`;
+        return `flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${focusCls} overflow-hidden transition-all duration-200`;
     }, ...(ngDevMode ? [{ debugName: "_wrapperClass" }] : /* istanbul ignore next */ []));
     /** Prefix icon cell — flex column, full height of the wrapper */
     _prefixCellCls = computed(() => {
@@ -10607,16 +10686,16 @@ const UPLOAD_SIZE_MAP = {
 };
 
 class ClxUploadComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     // ── Inputs ─────────────────────────────────────────────────────────────────
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
     /** Max file size in bytes. 0 = no limit. */
     maxFileSize = input(0, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _size = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     // ── Outputs ────────────────────────────────────────────────────────────────
     onUploadError = output();
@@ -10649,7 +10728,7 @@ class ClxUploadComponent {
     _zoneClass = computed(() => {
         const base = [
             'flex flex-col items-center justify-center text-center',
-            `w-full ${resolveContainerRadius(this._cfg.borderRadius)} border-2 border-dashed transition-all duration-200`,
+            `w-full ${resolveContainerRadius(this._themeSvc.config().borderRadius)} border-2 border-dashed transition-all duration-200`,
             this._sizeConfig().zone,
         ].join(' ');
         const t = resolveColor(this._color());
@@ -11027,10 +11106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], isValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValid", required: false }] }] } });
 
 class ClxWizardComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     // ── Inputs ─────────────────────────────────────────────────────────────────
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     linear = input(true, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
     prevLabel = input('Anterior', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
@@ -11624,7 +11703,7 @@ const NAV_CHILDREN_INNER = 'overflow-hidden';
 const NAV_CHILDREN_LIST = 'ml-6 py-1 space-y-0.5';
 
 class ClxMenuItemComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
@@ -11635,7 +11714,7 @@ class ClxMenuItemComponent {
     routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
     itemClick = output();
     _inheritedColor = signal(null, ...(ngDevMode ? [{ debugName: "_inheritedColor" }] : /* istanbul ignore next */ []));
-    _resolvedColor = computed(() => this._inheritedColor() ?? this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
+    _resolvedColor = computed(() => this._inheritedColor() ?? this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
     inheritColor(c) { this._inheritedColor.set(c); }
     _geom = computed(() => {
         if (this.collapsed())
@@ -11731,11 +11810,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 class ClxMenuComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
@@ -11967,8 +12046,8 @@ class ClxProfileComponent {
     // ── Outputs ─────────────────────────────────────────────────────────────────
     menuAction = output();
     signOut = output();
-    _cfg = inject(CLX_THEME_CONFIG);
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _themeSvc = inject(ClxThemeService);
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     // ── CDK Overlay ─────────────────────────────────────────────────────────────
     _sso = inject(ScrollStrategyOptions);
     _scrollStrategy = this._sso.reposition();
@@ -12244,7 +12323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }], headerCell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxHeaderCellDirective), { isSignal: true }] }], cell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCellDirective), { isSignal: true }] }] } });
 
 class ClxPageEmptyComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     icon = input('inbox', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     title = input('Sin resultados', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
@@ -12252,7 +12331,7 @@ class ClxPageEmptyComponent {
     ctaIcon = input('add', ...(ngDevMode ? [{ debugName: "ctaIcon" }] : /* istanbul ignore next */ []));
     ctaColor = input(undefined, ...(ngDevMode ? [{ debugName: "ctaColor" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _ctaColor = computed(() => this.ctaColor() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_ctaColor" }] : /* istanbul ignore next */ []));
+    _ctaColor = computed(() => this.ctaColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_ctaColor" }] : /* istanbul ignore next */ []));
     cta = output();
     _iconWrap() {
         const s = this.size();
@@ -12339,7 +12418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], ctaIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaIcon", required: false }] }], ctaColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], cta: [{ type: i0.Output, args: ["cta"] }] } });
 
 class ClxTableComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     // ── Inputs ─────────────────────────────────────────────────────────────────
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -12349,7 +12428,7 @@ class ClxTableComponent {
     searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
     pagination = input(true, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     emptyIcon = input('table_chart', ...(ngDevMode ? [{ debugName: "emptyIcon" }] : /* istanbul ignore next */ []));
     emptyTitle = input('', ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
     emptyDescription = input('', ...(ngDevMode ? [{ debugName: "emptyDescription" }] : /* istanbul ignore next */ []));
@@ -14218,59 +14297,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 args: [ClxAnimateDirective, { descendants: true }]
             }] } });
 
-const STORAGE_KEY = 'clx-theme-mode';
-class ClxThemeService {
-    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    _mode = signal(this._loadMode(), ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
-    _sysDark = signal(this._getSystemDark(), ...(ngDevMode ? [{ debugName: "_sysDark" }] : /* istanbul ignore next */ []));
-    mode = this._mode.asReadonly();
-    isDark = computed(() => {
-        const m = this._mode();
-        if (m === 'dark')
-            return true;
-        if (m === 'light')
-            return false;
-        return this._sysDark();
-    }, ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            if (!this._isBrowser)
-                return;
-            document.documentElement.setAttribute('data-clx-theme', this.isDark() ? 'dark' : 'light');
-        });
-        if (this._isBrowser) {
-            const mq = window.matchMedia('(prefers-color-scheme: dark)');
-            mq.addEventListener('change', e => this._sysDark.set(e.matches));
-        }
-    }
-    setMode(mode) {
-        this._mode.set(mode);
-        if (this._isBrowser) {
-            localStorage.setItem(STORAGE_KEY, mode);
-        }
-    }
-    toggle() {
-        this.setMode(this.isDark() ? 'light' : 'dark');
-    }
-    _loadMode() {
-        if (!this._isBrowser)
-            return 'system';
-        const stored = localStorage.getItem(STORAGE_KEY);
-        return stored ?? 'system';
-    }
-    _getSystemDark() {
-        if (!this._isBrowser)
-            return false;
-        return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxThemeService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxThemeService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
 class ClxAlertService {
     _overlay = inject(ClxNativeOverlayService);
     _injector = inject(Injector);
@@ -14492,11 +14518,11 @@ const PROGRESS_BAR_SIZE_MAP = {
 };
 
 class ClxProgressBarComponent {
-    _cfg = inject(CLX_THEME_CONFIG);
+    _themeSvc = inject(ClxThemeService);
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._cfg.primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -14508,7 +14534,7 @@ class ClxProgressBarComponent {
             return 0;
         return Math.min(100, Math.max(0, (this.value() / m) * 100));
     }, ...(ngDevMode ? [{ debugName: "_pct" }] : /* istanbul ignore next */ []));
-    _pbSize = computed(() => (this.size() ?? this._cfg.defaultSize), ...(ngDevMode ? [{ debugName: "_pbSize" }] : /* istanbul ignore next */ []));
+    _pbSize = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_pbSize" }] : /* istanbul ignore next */ []));
     _trackH = computed(() => PROGRESS_BAR_SIZE_MAP[this._pbSize()], ...(ngDevMode ? [{ debugName: "_trackH" }] : /* istanbul ignore next */ []));
     _labelCls = computed(() => {
         const size = this._pbSize();
@@ -14847,5 +14873,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
 //# sourceMappingURL=codexly-ui.mjs.map