codexly-ui 0.1.22 → 0.1.23

package/fesm2022/codexly-ui.mjs

@@ -165,6 +165,163 @@ const BADGE_SHAPE_FIXED = {
     circle: 'rounded-full',
 };
 
+const CLX_FONT_CATALOG = [
+    {
+        label: 'Roboto',
+        value: 'Roboto',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Inter',
+        value: 'Inter',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Poppins',
+        value: 'Poppins',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Plus Jakarta Sans',
+        value: 'Plus Jakarta Sans',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Nunito',
+        value: 'Nunito',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'DM Sans',
+        value: 'DM Sans',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Geist',
+        value: 'Geist',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Lato',
+        value: 'Lato',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap',
+    },
+    {
+        label: 'Montserrat',
+        value: 'Montserrat',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Open Sans',
+        value: 'Open Sans',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Work Sans',
+        value: 'Work Sans',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Manrope',
+        value: 'Manrope',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Sora',
+        value: 'Sora',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Outfit',
+        value: 'Outfit',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Rubik',
+        value: 'Rubik',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Source Sans 3',
+        value: 'Source Sans 3',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Space Grotesk',
+        value: 'Space Grotesk',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Merriweather',
+        value: 'Merriweather',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap',
+    },
+    {
+        label: 'Playfair Display',
+        value: 'Playfair Display',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
+    },
+    {
+        label: 'Lora',
+        value: 'Lora',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'PT Serif',
+        value: 'PT Serif',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+    },
+    {
+        label: 'Caveat',
+        value: 'Caveat',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap',
+    },
+    {
+        label: 'Dancing Script',
+        value: 'Dancing Script',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap',
+    },
+    {
+        label: 'Cinzel',
+        value: 'Cinzel',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap',
+    },
+    {
+        label: 'Berkshire Swash',
+        value: 'Berkshire Swash',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap',
+    },
+    {
+        label: 'JetBrains Mono',
+        value: 'JetBrains Mono',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Orbitron',
+        value: 'Orbitron',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap',
+    },
+    {
+        label: 'UnifrakturMaguntia',
+        value: 'UnifrakturMaguntia',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap',
+    },
+    {
+        label: 'Pirata One',
+        value: 'Pirata One',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Pirata+One&display=swap',
+    },
+    {
+        label: 'Press Start 2P',
+        value: 'Press Start 2P',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
+    },
+    {
+        label: 'Bungee',
+        value: 'Bungee',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Bungee&display=swap',
+    },
+];
 // ── Tailwind rounded classes per borderRadius token ───────────────────────────
 const CLX_RADIUS_MAP = {
     none: 'rounded-none',
@@ -194,13 +351,16 @@ function resolveContainerRadius(r) {
 // ── Default theme ─────────────────────────────────────────────────────────────
 const CLX_THEME_DEFAULTS = {
     primaryColor: 'indigo',
+    secondaryColor: 'slate',
     dangerColor: 'red',
     successColor: 'green',
     warningColor: 'amber',
     neutralColor: 'slate',
+    textColor: 'slate',
     borderRadius: 'md',
     defaultSize: 'md',
     defaultShape: 'rounded',
+    fontFamily: 'Roboto',
 };
 // ── Injection token ───────────────────────────────────────────────────────────
 const CLX_THEME_CONFIG = new InjectionToken('CLX_THEME_CONFIG', { factory: () => CLX_THEME_DEFAULTS });
@@ -212,7 +372,107 @@ function provideCodexlyTheme(config) {
     };
 }
 
+// ── Full Tailwind v4 palette (hex), all colors × all shades ──────────────────
+// Source of truth: official Tailwind CSS v4 color values.
+const CLX_COLOR_PALETTE = {
+    red: {
+        50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171',
+        500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a',
+    },
+    orange: {
+        50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c',
+        500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407',
+    },
+    amber: {
+        50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24',
+        500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03',
+    },
+    yellow: {
+        50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15',
+        500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006',
+    },
+    lime: {
+        50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635',
+        500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05',
+    },
+    green: {
+        50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80',
+        500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16',
+    },
+    emerald: {
+        50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399',
+        500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22',
+    },
+    teal: {
+        50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf',
+        500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e',
+    },
+    cyan: {
+        50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee',
+        500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344',
+    },
+    sky: {
+        50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8',
+        500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49',
+    },
+    blue: {
+        50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa',
+        500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554',
+    },
+    indigo: {
+        50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8',
+        500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b',
+    },
+    violet: {
+        50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa',
+        500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065',
+    },
+    purple: {
+        50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc',
+        500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764',
+    },
+    fuchsia: {
+        50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9',
+        500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e',
+    },
+    pink: {
+        50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6',
+        500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724',
+    },
+    rose: {
+        50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185',
+        500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519',
+    },
+    slate: {
+        50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8',
+        500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617',
+    },
+    gray: {
+        50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af',
+        500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712',
+    },
+    zinc: {
+        50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa',
+        500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b',
+    },
+    neutral: {
+        50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3',
+        500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a',
+    },
+    stone: {
+        50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e',
+        500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09',
+    },
+    white: { 500: '#ffffff' },
+};
+/** Resolve a hex value for any Tailwind color + shade, with a safe fallback. */
+function resolvePaletteHex(color, shade) {
+    const entry = CLX_COLOR_PALETTE[color] ?? CLX_COLOR_PALETTE.indigo;
+    return entry[shade] ?? entry[500] ?? CLX_COLOR_PALETTE.indigo[500];
+}
+
 const STORAGE_KEY = 'clx-theme-mode';
+const FONT_LINK_ID = 'clx-google-font';
 class ClxThemeService {
     _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     _initial = inject(CLX_THEME_CONFIG);
@@ -229,6 +489,12 @@ class ClxThemeService {
             return false;
         return this._sysDark();
     }, ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    /** Color to apply to clx-nav-group labels — falls back to neutralColor */
+    sidebarGroupColor = computed(() => this._config().sidebarGroupColor ?? this._config().neutralColor, ...(ngDevMode ? [{ debugName: "sidebarGroupColor" }] : /* istanbul ignore next */ []));
+    /** Color to apply to top-level clx-menu — falls back to primaryColor */
+    sidebarMenuColor = computed(() => this._config().sidebarMenuColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "sidebarMenuColor" }] : /* istanbul ignore next */ []));
+    /** Color to apply to clx-menu-item — falls back to primaryColor */
+    sidebarItemColor = computed(() => this._config().sidebarItemColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "sidebarItemColor" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             if (!this._isBrowser)
@@ -238,14 +504,15 @@ class ClxThemeService {
         effect(() => {
             if (!this._isBrowser)
                 return;
-            const primaryColor = this._config().primaryColor;
-            if (!primaryColor)
+            const cfg = this._config();
+            this._applyColorVar('--clx-primary', '--clx-primary-light', cfg.primaryColor);
+            this._applyColorVar('--clx-secondary', '--clx-secondary-light', cfg.secondaryColor);
+            this._applyTextColor(cfg.textColor, this.isDark());
+        });
+        effect(() => {
+            if (!this._isBrowser)
                 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);
+            this._applyFont(this._config().fontFamily ?? 'Roboto');
         });
         if (this._isBrowser) {
             const mq = window.matchMedia('(prefers-color-scheme: dark)');
@@ -263,6 +530,42 @@ class ClxThemeService {
     toggle() {
         this.setMode(this.isDark() ? 'light' : 'dark');
     }
+    _applyColorVar(varName, lightVarName, input) {
+        if (!input)
+            return;
+        const { color, shade } = parseColorInput(input);
+        document.documentElement.style.setProperty(varName, resolvePaletteHex(color, shade));
+        if (lightVarName) {
+            document.documentElement.style.setProperty(lightVarName, resolvePaletteHex(color, 100));
+        }
+    }
+    _applyTextColor(input, dark) {
+        if (!input)
+            return;
+        const { color } = parseColorInput(input);
+        const shades = dark
+            ? { text: 100, label: 300, muted: 400, subtle: 500, faint: 600 }
+            : { text: 900, label: 600, muted: 500, subtle: 400, faint: 300 };
+        document.documentElement.style.setProperty('--clx-text', resolvePaletteHex(color, shades.text));
+        document.documentElement.style.setProperty('--clx-text-label', resolvePaletteHex(color, shades.label));
+        document.documentElement.style.setProperty('--clx-text-muted', resolvePaletteHex(color, shades.muted));
+        document.documentElement.style.setProperty('--clx-text-subtle', resolvePaletteHex(color, shades.subtle));
+        document.documentElement.style.setProperty('--clx-text-faint', resolvePaletteHex(color, shades.faint));
+    }
+    _applyFont(family) {
+        const option = CLX_FONT_CATALOG.find(f => f.value === family);
+        if (!option)
+            return;
+        let link = document.getElementById(FONT_LINK_ID);
+        if (!link) {
+            link = document.createElement('link');
+            link.id = FONT_LINK_ID;
+            link.rel = 'stylesheet';
+            document.head.appendChild(link);
+        }
+        link.href = option.googleUrl;
+        document.documentElement.style.setProperty('--clx-font-body', `'${family}', ui-sans-serif, system-ui, sans-serif`);
+    }
     _loadMode() {
         if (!this._isBrowser)
             return 'system';
@@ -2635,7 +2938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 const CLX_LIST_CONTEXT = new InjectionToken('CLX_LIST_CONTEXT');
 // ── Variant maps ──────────────────────────────────────────────────────────────
 const LIST_VARIANT_SHAPE = {
-    bordered: 'bg-white rounded-2xl overflow-hidden',
+    bordered: 'bg-clx-surface rounded-2xl overflow-hidden border border-clx-border',
     flat: 'bg-transparent',
     flush: 'bg-transparent',
 };
@@ -3841,7 +4144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 const INPUT_STATUS_MAP = {
     default: {
-        border: 'border-slate-200',
+        border: 'border-clx-border',
         ring: '',
         msgCls: '',
         iconName: '',
@@ -4254,11 +4557,18 @@ class ClxSelectComponent {
     _activeColor = computed(() => this.activeColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
     _el = inject((ElementRef));
     _sso = inject(ScrollStrategyOptions);
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _loadedFonts = new Set();
     _scrollStrategy = this._sso.reposition();
     constructor() {
         this._searchQuery = toSignal(this._searchControl.valueChanges.pipe(startWith(''), map(v => v ?? '')), { initialValue: '' });
         if (this._ngControl)
             this._ngControl.valueAccessor = this;
+        effect(() => {
+            const family = this._displayFontFamily();
+            if (family)
+                this._loadPreviewFont(family);
+        });
         // Async autocomplete: debounce + switchMap sobre el search control
         this._searchControl.valueChanges.pipe(debounceTime(this.debounceMs()), distinctUntilChanged(), switchMap(query => {
             const q = query ?? '';
@@ -4306,6 +4616,10 @@ class ClxSelectComponent {
         const sel = this._selectedOptions();
         return sel.length ? sel[0].label : this.placeholder();
     }, ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    _displayFontFamily = computed(() => {
+        const sel = this._selectedOptions();
+        return sel.length ? sel[0].previewFontFamily ?? null : null;
+    }, ...(ngDevMode ? [{ debugName: "_displayFontFamily" }] : /* istanbul ignore next */ []));
     _overlayWidth = computed(() => this._overlayWidthPx(), ...(ngDevMode ? [{ debugName: "_overlayWidth" }] : /* 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 */ []));
@@ -4356,6 +4670,26 @@ class ClxSelectComponent {
         if (!this.async())
             this._searchControl.setValue('', { emitEvent: false });
         this._isOpen.set(true);
+        for (const opt of this.options()) {
+            if (opt.previewFontFamily)
+                this._loadPreviewFont(opt.previewFontFamily);
+        }
+    }
+    _loadPreviewFont(family) {
+        if (!this._isBrowser || this._loadedFonts.has(family))
+            return;
+        const option = CLX_FONT_CATALOG.find(f => f.value === family);
+        if (!option)
+            return;
+        this._loadedFonts.add(family);
+        const id = `clx-preview-font-${family.replace(/\s+/g, '-').toLowerCase()}`;
+        if (document.getElementById(id))
+            return;
+        const link = document.createElement('link');
+        link.id = id;
+        link.rel = 'stylesheet';
+        link.href = option.googleUrl;
+        document.head.appendChild(link);
     }
     _closePanel() {
         this._isOpen.set(false);
@@ -4465,7 +4799,7 @@ class ClxSelectComponent {
 
       <!-- Single mode: display value -->
       } @else {
-        <span [class]="_singleDisplayClass()">{{ _displayValue() }}</span>
+        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
 
       <!-- Right controls: clear + chevron -->
@@ -4545,7 +4879,7 @@ class ClxSelectComponent {
                 [disabled]="opt.disabled ?? false"
                 (mousedown)="$event.preventDefault()"
                 (click)="_selectOption(opt)">
-                <span class="flex-1 text-left truncate">{{ opt.label }}</span>
+                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
                 @if (_isSelected(opt.value)) {
                   <span clx-icon name="check" size="xs" class="shrink-0"></span>
                 }
@@ -4612,7 +4946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
       <!-- Single mode: display value -->
       } @else {
-        <span [class]="_singleDisplayClass()">{{ _displayValue() }}</span>
+        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
 
       <!-- Right controls: clear + chevron -->
@@ -4692,7 +5026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 [disabled]="opt.disabled ?? false"
                 (mousedown)="$event.preventDefault()"
                 (click)="_selectOption(opt)">
-                <span class="flex-1 text-left truncate">{{ opt.label }}</span>
+                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
                 @if (_isSelected(opt.value)) {
                   <span clx-icon name="check" size="xs" class="shrink-0"></span>
                 }
@@ -5137,6 +5471,7 @@ class ClxAlertComponent {
     _resolve = inject(CLX_ALERT_RESOLVE);
     _animate = inject(ClxAnimateService);
     _el = inject((ElementRef));
+    _themeSvc = inject(ClxThemeService);
     _zone;
     constructor() {
         const zone = inject(NgZone, { optional: true });
@@ -5144,17 +5479,36 @@ class ClxAlertComponent {
     }
     // ─── Resolved options ─────────────────────────────────────────────────────
     get _type() { return this._opts.type ?? 'info'; }
+    get _isConfirm() { return this._type === 'confirm'; }
     _icon = signal(ALERT_ICON_MAP[this._type], ...(ngDevMode ? [{ debugName: "_icon" }] : /* istanbul ignore next */ []));
-    _iconBg = signal(ALERT_ICON_BG_MAP[this._type], ...(ngDevMode ? [{ debugName: "_iconBg" }] : /* istanbul ignore next */ []));
-    _iconColor = signal(ALERT_ICON_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
-    _progressColor = signal(ALERT_PROGRESS_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _title = signal(this._opts.title ?? '', ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
     _message = signal(this._opts.message ?? '', ...(ngDevMode ? [{ debugName: "_message" }] : /* istanbul ignore next */ []));
     _showCancel = signal(this._opts.showCancelButton ?? this._opts.type === 'confirm', ...(ngDevMode ? [{ debugName: "_showCancel" }] : /* istanbul ignore next */ []));
+    _iconBg = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_ICON_BG_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).bgSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_iconBg" }] : /* istanbul ignore next */ []));
+    _iconColor = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_ICON_COLOR_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).textSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
+    _progressColor = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_PROGRESS_COLOR_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).bg;
+    }, ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _confirmText = signal(this._opts.confirmButton?.text ?? 'Aceptar', ...(ngDevMode ? [{ debugName: "_confirmText" }] : /* istanbul ignore next */ []));
-    _confirmColor = signal(this._opts.confirmButton?.color ?? ALERT_CONFIRM_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
+    _confirmColor = computed(() => {
+        if (this._opts.confirmButton?.color)
+            return this._opts.confirmButton.color;
+        if (this._isConfirm)
+            return this._themeSvc.config().primaryColor;
+        return ALERT_CONFIRM_COLOR_MAP[this._type];
+    }, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
     _cancelText = signal(this._opts.cancelButton?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
-    _cancelColor = signal(this._opts.cancelButton?.color ?? 'slate', ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
+    _cancelColor = computed(() => this._opts.cancelButton?.color ?? this._themeSvc.config().secondaryColor, ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
     _cancelVariant = signal(this._opts.cancelButton?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
     // ─── Timer state ─────────────────────────────────────────────────────────
     _timerTotal = signal(this._opts.timer ?? 0, ...(ngDevMode ? [{ debugName: "_timerTotal" }] : /* istanbul ignore next */ []));
@@ -5258,7 +5612,6 @@ class ClxAlertComponent {
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="dismiss()"
           >
             {{ _cancelText() }}
@@ -5270,7 +5623,6 @@ class ClxAlertComponent {
           [color]="_confirmColor()"
           variant="solid"
           size="md"
-          shape="pill"
           (click)="confirm()"
         >
           {{ _confirmText() }}
@@ -5330,7 +5682,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="dismiss()"
           >
             {{ _cancelText() }}
@@ -5342,7 +5693,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           [color]="_confirmColor()"
           variant="solid"
           size="md"
-          shape="pill"
           (click)="confirm()"
         >
           {{ _confirmText() }}
@@ -5371,7 +5721,7 @@ const MODAL_SIZE_MAP = {
     xl: 'w-full',
     full: 'w-full h-screen rounded-none',
 };
-const MODAL_CONTAINER_CLASS = 'flex flex-col bg-white rounded-2xl shadow-2xl overflow-hidden';
+const MODAL_CONTAINER_CLASS = 'flex flex-col bg-clx-surface rounded-2xl shadow-2xl overflow-hidden';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const CLX_MODAL_DATA = new InjectionToken('CLX_MODAL_DATA');
 const CLX_MODAL_SIZE = new InjectionToken('CLX_MODAL_SIZE');
@@ -5394,7 +5744,7 @@ const DRAWER_WIDTH_MAP = {
     md: '420px',
     lg: '560px',
 };
-const DRAWER_CONTAINER_CLASS = 'flex flex-col bg-white shadow-2xl overflow-hidden h-screen';
+const DRAWER_CONTAINER_CLASS = 'flex flex-col bg-clx-surface shadow-2xl overflow-hidden h-screen';
 const CLX_DRAWER_SIZE = new InjectionToken('CLX_DRAWER_SIZE');
 
 class ClxDrawerComponent {
@@ -5448,7 +5798,7 @@ class ClxDrawerComponent {
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0 bg-clx-surface-2">
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
       @if (_hasBuiltInButtons()) {
         @if (showCancelButton()) {
           <button
@@ -5456,7 +5806,6 @@ class ClxDrawerComponent {
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
           </button>
@@ -5466,7 +5815,6 @@ class ClxDrawerComponent {
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
           size="md"
-          shape="pill"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
         </button>
@@ -5509,7 +5857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0 bg-clx-surface-2">
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
       @if (_hasBuiltInButtons()) {
         @if (showCancelButton()) {
           <button
@@ -5517,7 +5865,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
           </button>
@@ -5527,7 +5874,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
           size="md"
-          shape="pill"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
         </button>
@@ -5569,7 +5915,7 @@ class ClxModalComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxModalComponent, isStandalone: true, selector: "clx-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
     <!-- Header -->
     <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0 text-clx-text-label">
         <ng-content select="[clx-modal-title]" />
       </div>
       @if (showClose()) {
@@ -5593,7 +5939,7 @@ class ClxModalComponent {
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0 bg-clx-surface-2">
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
       @if (_hasBuiltInButtons()) {
         @if (showCancelButton()) {
           <button
@@ -5601,7 +5947,6 @@ class ClxModalComponent {
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
           </button>
@@ -5611,7 +5956,6 @@ class ClxModalComponent {
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
           size="md"
-          shape="pill"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
         </button>
@@ -5630,7 +5974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     template: `
     <!-- Header -->
     <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0 text-clx-text-label">
         <ng-content select="[clx-modal-title]" />
       </div>
       @if (showClose()) {
@@ -5654,7 +5998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0 bg-clx-surface-2">
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
       @if (_hasBuiltInButtons()) {
         @if (showCancelButton()) {
           <button
@@ -5662,7 +6006,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
           </button>
@@ -5672,7 +6015,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
           size="md"
-          shape="pill"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
         </button>
@@ -11693,7 +12035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
 // ── Item geometry ──────────────────────────────────────────────────────────────
-const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium transition-colors duration-150 cursor-pointer select-none';
+const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium cursor-pointer select-none';
 const NAV_ITEM_L1 = 'px-6 py-3';
 const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
 const NAV_ITEM_IDLE = 'text-clx-text-subtle';
@@ -11713,9 +12055,7 @@ class ClxMenuItemComponent {
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
     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._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
-    inheritColor(c) { this._inheritedColor.set(c); }
+    _resolvedColor = computed(() => this.color() ?? this._themeSvc.sidebarItemColor(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
     _geom = computed(() => {
         if (this.collapsed())
             return 'w-full py-3 px-0 justify-center';
@@ -11723,8 +12063,8 @@ class ClxMenuItemComponent {
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => resolveColor(this._resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
-        const t = resolveColor(this._resolvedColor());
-        return `${NAV_ITEM_BASE} ${this._geom()} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
+        const hover = resolveColor(this._resolvedColor()).hoverBgMuted;
+        return `${NAV_ITEM_BASE} ${this._geom()} ${hover}`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolvedColor());
@@ -11744,10 +12084,10 @@ class ClxMenuItemComponent {
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-clx-text-subtle'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </a>
     } @else {
@@ -11757,10 +12097,10 @@ class ClxMenuItemComponent {
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </button>
     }
@@ -11782,10 +12122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-clx-text-subtle'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </a>
     } @else {
@@ -11795,10 +12135,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </button>
     }
@@ -11814,14 +12154,13 @@ class ClxMenuComponent {
     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._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.sidebarMenuColor(), ...(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 */ []));
     routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
     _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
     _rla;
-    _childItems;
     _destroyRef = inject(DestroyRef);
     constructor() {
         effect(() => { if (this.active())
@@ -11849,26 +12188,16 @@ class ClxMenuComponent {
                 return `${base} ${t.textSubtle} font-semibold`;
             return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
         }
-        return `${base} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
+        return `${base} ${t.hoverBgMuted}`;
     }
     NAV_CHILDREN_WRAPPER = NAV_CHILDREN_WRAPPER;
     NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;
     NAV_CHILDREN_LIST = NAV_CHILDREN_LIST;
-    ngAfterContentInit() {
-        this._syncChildren();
-        this._childItems.changes
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => this._syncChildren());
-    }
-    _syncChildren() {
-        const color = this._color();
-        this._childItems.forEach(c => c.inheritColor(color));
-    }
     _toggle() {
         this._isExpanded.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, queries: [{ propertyName: "_childItems", predicate: ClxMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
     @if (routerLink()) {
       <a
         [routerLink]="routerLink()"
@@ -11882,7 +12211,7 @@ class ClxMenuComponent {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -11902,7 +12231,7 @@ class ClxMenuComponent {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -11945,7 +12274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -11965,7 +12294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -11994,18 +12323,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], _rla: [{
                 type: ViewChild,
                 args: [RouterLinkActive]
-            }], _childItems: [{
-                type: ContentChildren,
-                args: [ClxMenuItemComponent, { descendants: true }]
             }] } });
 
 class ClxNavGroupComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    labelClass = computed(() => {
+        const c = this.color();
+        return c ? resolveColor(c).textSubtle : 'text-clx-text-subtle';
+    }, ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-clx-text-subtle select-none">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
         <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
@@ -12020,7 +12351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     standalone: true,
                     template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-clx-text-subtle select-none">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
         <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
@@ -12031,7 +12362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class ClxProfileComponent {
     // ── Inputs ──────────────────────────────────────────────────────────────────
@@ -12252,7 +12583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 // ── Base classes ─────────────────────────────────────────────────────────────
 const TABLE_BASE_CLASS = 'w-full text-left border-collapse text-sm';
 const TABLE_HEADER_CELL_CLASS = 'px-4 py-3 font-semibold whitespace-nowrap';
-const TABLE_CELL_CLASS = 'px-4 py-3 border-b border-slate-100 text-slate-700';
+const TABLE_CELL_CLASS = 'px-4 py-3 border-b border-clx-border-soft text-clx-text-label';
 const TABLE_ROW_CLASS = '';
 // ── Alignment ────────────────────────────────────────────────────────────────
 const TABLE_ALIGN_MAP = {
@@ -14873,5 +15204,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_HEX_100, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map