codexly-ui 0.1.20 → 0.1.22

package/fesm2022/codexly-ui.mjs

@@ -7,7 +7,7 @@ import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
 import * as i1$1 from '@angular/cdk/overlay';
 import { ScrollStrategyOptions, OverlayModule } from '@angular/cdk/overlay';
-import { ScrollingModule } from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import { Chart, LineController, BarController, PieController, DoughnutController, RadarController, PolarAreaController, CategoryScale, LinearScale, RadialLinearScale, BarElement, LineElement, PointElement, ArcElement, Filler, Tooltip, Legend } from 'chart.js';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
@@ -165,163 +165,6 @@ 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',
@@ -351,16 +194,13 @@ 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 });
@@ -372,107 +212,7 @@ 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);
@@ -489,12 +229,6 @@ 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)
@@ -504,15 +238,14 @@ class ClxThemeService {
         effect(() => {
             if (!this._isBrowser)
                 return;
-            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)
+            const primaryColor = this._config().primaryColor;
+            if (!primaryColor)
                 return;
-            this._applyFont(this._config().fontFamily ?? 'Roboto');
+            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)');
@@ -530,42 +263,6 @@ 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';
@@ -2938,7 +2635,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-clx-surface rounded-2xl overflow-hidden border border-clx-border',
+    bordered: 'bg-white rounded-2xl overflow-hidden',
     flat: 'bg-transparent',
     flush: 'bg-transparent',
 };
@@ -4144,7 +3841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 const INPUT_STATUS_MAP = {
     default: {
-        border: 'border-clx-border',
+        border: 'border-slate-200',
         ring: '',
         msgCls: '',
         iconName: '',
@@ -4557,18 +4254,11 @@ 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 ?? '';
@@ -4616,10 +4306,6 @@ 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 */ []));
@@ -4670,26 +4356,6 @@ 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);
@@ -4761,145 +4427,145 @@ class ClxSelectComponent {
         this._cvaDisabled.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxSelectComponent, isStandalone: true, selector: "clx-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, async: { classPropertyName: "async", publicName: "async", isSignal: true, isRequired: false, transformFunction: null }, loadOptions: { classPropertyName: "loadOptions", publicName: "loadOptions", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5 w-full" }, ngImport: i0, template: `
-    @if (label()) {
-      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
-    }
-
-    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
-    <div
-      #origin="cdkOverlayOrigin"
-      cdkOverlayOrigin
-      [class]="_triggerClass()"
-      [attr.tabindex]="_disabled() ? null : '0'"
-      role="combobox"
-      [attr.aria-labelledby]="label() ? _labelId : null"
-      [attr.aria-expanded]="_isOpen()"
-      aria-haspopup="listbox"
-      (click)="!_disabled() && _togglePanel()"
-      (keydown)="_onTriggerKeydown($event)">
-
-      <!-- Multi mode: tag chips -->
-      @if (multiple()) {
-        <div [class]="_tagContainerClass()">
-          @for (opt of _selectedOptions(); track opt.value) {
-            <span
-              clx-tag
-              variant="soft"
-              [color]="_activeColor()"
-              [size]="_sizeConfig().tagSize"
-              (onRemove)="_deselect(opt.value)">
-              {{ opt.label }}
-            </span>
-          }
-          @if (!_selectedOptions().length) {
-            <span [class]="_placeholderClass()">{{ placeholder() }}</span>
-          }
-        </div>
-
-      <!-- Single mode: display value -->
-      } @else {
-        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
-      }
-
-      <!-- Right controls: clear + chevron -->
-      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
-        @if (_hasValue() && !_disabled() && multiple()) {
-          <button
-            clx-button
-            variant="ghost"
-            [color]="_activeColor()"
-            shape="circle"
-            [size]="_sizeConfig().btnSize"
-            icon="close"
-            [iconOnly]="true"
-            (mousedown)="$event.preventDefault()"
-            (click)="$event.stopPropagation(); _clearAll()">
-          </button>
-        }
-        <button
-          clx-button
-          variant="ghost"
-          [color]="_activeColor()"
-          shape="circle"
-          [size]="_sizeConfig().btnSize"
-          icon="keyboard_arrow_down"
-          [iconOnly]="true"
-          [class]="_chevronBtnClass()"
-          (mousedown)="$event.preventDefault()">
-        </button>
-      </div>
-    </div>
-
-    <!-- ── Overlay panel ───────────────────────────────────────────────────── -->
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="_isOpen()"
-      [cdkConnectedOverlayPositions]="_positions"
-      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
-      [cdkConnectedOverlayWidth]="_overlayWidth()"
-      [cdkConnectedOverlayPush]="true"
-      (overlayOutsideClick)="_closePanel()"
-      (overlayKeydown)="_onOverlayKeydown($event)">
-
-      <div [class]="_panelClass()" role="listbox">
-
-        <!-- Search / Autocomplete input -->
-        @if (searchable() || async()) {
-          <div class="p-2 border-b border-clx-border-soft" (click)="$event.stopPropagation()">
-            <clx-input
-              [formControl]="_searchControl"
-              [placeholder]="async() ? 'Buscar...' : searchPlaceholder()"
-              [color]="_activeColor()"
-              [suffixIcon]="async() && _asyncLoading() ? '' : 'search'"
-              size="sm">
-            </clx-input>
-          </div>
-        }
-
-        <!-- Options list -->
-        <div class="overflow-y-auto max-h-60 p-1 space-y-0.5">
-          @if (async() && _asyncLoading()) {
-            <div class="flex items-center justify-center py-6 gap-2 text-sm text-clx-text-subtle">
-              <clx-spinner size="sm" [color]="_activeColor()" />
-              Buscando...
-            </div>
-          } @else if (_showAsyncPlaceholder()) {
-            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">
-              Escribe {{ minChars() === 1 ? 'al menos 1 carácter' : 'al menos ' + minChars() + ' caracteres' }}
-            </div>
-          } @else if (_filteredOptions().length === 0) {
-            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
-          } @else {
-            @for (opt of _filteredOptions(); track opt.value) {
-              <button
-                type="button"
-                [class]="_optionClass(opt)"
-                [disabled]="opt.disabled ?? false"
-                (mousedown)="$event.preventDefault()"
-                (click)="_selectOption(opt)">
-                <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>
-                }
-              </button>
-            }
-          }
-        </div>
-
-      </div>
-    </ng-template>
-
-    <!-- ── Bottom message ─────────────────────────────────────────────────── -->
-    @if (_isInvalid()) {
-      <p class="text-xs text-red-500 flex items-center gap-1">
-        <span clx-icon name="error" size="xs"></span>
-        {{ errorMessage() }}
-      </p>
-    } @else if (hint()) {
-      <p [class]="_hintClass()">{{ hint() }}</p>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxSelectComponent, isStandalone: true, selector: "clx-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, async: { classPropertyName: "async", publicName: "async", isSignal: true, isRequired: false, transformFunction: null }, loadOptions: { classPropertyName: "loadOptions", publicName: "loadOptions", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5 w-full" }, ngImport: i0, template: `
+    @if (label()) {
+      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
+    }
+
+    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
+    <div
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      [class]="_triggerClass()"
+      [attr.tabindex]="_disabled() ? null : '0'"
+      role="combobox"
+      [attr.aria-labelledby]="label() ? _labelId : null"
+      [attr.aria-expanded]="_isOpen()"
+      aria-haspopup="listbox"
+      (click)="!_disabled() && _togglePanel()"
+      (keydown)="_onTriggerKeydown($event)">
+
+      <!-- Multi mode: tag chips -->
+      @if (multiple()) {
+        <div [class]="_tagContainerClass()">
+          @for (opt of _selectedOptions(); track opt.value) {
+            <span
+              clx-tag
+              variant="soft"
+              [color]="_activeColor()"
+              [size]="_sizeConfig().tagSize"
+              (onRemove)="_deselect(opt.value)">
+              {{ opt.label }}
+            </span>
+          }
+          @if (!_selectedOptions().length) {
+            <span [class]="_placeholderClass()">{{ placeholder() }}</span>
+          }
+        </div>
+
+      <!-- Single mode: display value -->
+      } @else {
+        <span [class]="_singleDisplayClass()">{{ _displayValue() }}</span>
+      }
+
+      <!-- Right controls: clear + chevron -->
+      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+        @if (_hasValue() && !_disabled() && multiple()) {
+          <button
+            clx-button
+            variant="ghost"
+            [color]="_activeColor()"
+            shape="circle"
+            [size]="_sizeConfig().btnSize"
+            icon="close"
+            [iconOnly]="true"
+            (mousedown)="$event.preventDefault()"
+            (click)="$event.stopPropagation(); _clearAll()">
+          </button>
+        }
+        <button
+          clx-button
+          variant="ghost"
+          [color]="_activeColor()"
+          shape="circle"
+          [size]="_sizeConfig().btnSize"
+          icon="keyboard_arrow_down"
+          [iconOnly]="true"
+          [class]="_chevronBtnClass()"
+          (mousedown)="$event.preventDefault()">
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Overlay panel ───────────────────────────────────────────────────── -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayWidth]="_overlayWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_closePanel()"
+      (overlayKeydown)="_onOverlayKeydown($event)">
+
+      <div [class]="_panelClass()" role="listbox">
+
+        <!-- Search / Autocomplete input -->
+        @if (searchable() || async()) {
+          <div class="p-2 border-b border-clx-border-soft" (click)="$event.stopPropagation()">
+            <clx-input
+              [formControl]="_searchControl"
+              [placeholder]="async() ? 'Buscar...' : searchPlaceholder()"
+              [color]="_activeColor()"
+              [suffixIcon]="async() && _asyncLoading() ? '' : 'search'"
+              size="sm">
+            </clx-input>
+          </div>
+        }
+
+        <!-- Options list -->
+        <div class="overflow-y-auto max-h-60 p-1 space-y-0.5">
+          @if (async() && _asyncLoading()) {
+            <div class="flex items-center justify-center py-6 gap-2 text-sm text-clx-text-subtle">
+              <clx-spinner size="sm" [color]="_activeColor()" />
+              Buscando...
+            </div>
+          } @else if (_showAsyncPlaceholder()) {
+            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">
+              Escribe {{ minChars() === 1 ? 'al menos 1 carácter' : 'al menos ' + minChars() + ' caracteres' }}
+            </div>
+          } @else if (_filteredOptions().length === 0) {
+            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
+          } @else {
+            @for (opt of _filteredOptions(); track opt.value) {
+              <button
+                type="button"
+                [class]="_optionClass(opt)"
+                [disabled]="opt.disabled ?? false"
+                (mousedown)="$event.preventDefault()"
+                (click)="_selectOption(opt)">
+                <span class="flex-1 text-left truncate">{{ opt.label }}</span>
+                @if (_isSelected(opt.value)) {
+                  <span clx-icon name="check" size="xs" class="shrink-0"></span>
+                }
+              </button>
+            }
+          }
+        </div>
+
+      </div>
+    </ng-template>
+
+    <!-- ── Bottom message ─────────────────────────────────────────────────── -->
+    @if (_isInvalid()) {
+      <p class="text-xs text-red-500 flex items-center gap-1">
+        <span clx-icon name="error" size="xs"></span>
+        {{ errorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ClxTagComponent, selector: "span[clx-tag]", inputs: ["variant", "color", "size", "shape"], outputs: ["onRemove"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSpinnerComponent, selector: "clx-spinner", inputs: ["size", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSelectComponent, decorators: [{
@@ -4908,145 +4574,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-select',
                     standalone: true,
                     imports: [OverlayModule, ReactiveFormsModule, ClxTagComponent, ClxIconComponent, ClxButtonComponent, ClxInputComponent, ClxSpinnerComponent],
-                    template: `
-    @if (label()) {
-      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
-    }
-
-    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
-    <div
-      #origin="cdkOverlayOrigin"
-      cdkOverlayOrigin
-      [class]="_triggerClass()"
-      [attr.tabindex]="_disabled() ? null : '0'"
-      role="combobox"
-      [attr.aria-labelledby]="label() ? _labelId : null"
-      [attr.aria-expanded]="_isOpen()"
-      aria-haspopup="listbox"
-      (click)="!_disabled() && _togglePanel()"
-      (keydown)="_onTriggerKeydown($event)">
-
-      <!-- Multi mode: tag chips -->
-      @if (multiple()) {
-        <div [class]="_tagContainerClass()">
-          @for (opt of _selectedOptions(); track opt.value) {
-            <span
-              clx-tag
-              variant="soft"
-              [color]="_activeColor()"
-              [size]="_sizeConfig().tagSize"
-              (onRemove)="_deselect(opt.value)">
-              {{ opt.label }}
-            </span>
-          }
-          @if (!_selectedOptions().length) {
-            <span [class]="_placeholderClass()">{{ placeholder() }}</span>
-          }
-        </div>
-
-      <!-- Single mode: display value -->
-      } @else {
-        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
-      }
-
-      <!-- Right controls: clear + chevron -->
-      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
-        @if (_hasValue() && !_disabled() && multiple()) {
-          <button
-            clx-button
-            variant="ghost"
-            [color]="_activeColor()"
-            shape="circle"
-            [size]="_sizeConfig().btnSize"
-            icon="close"
-            [iconOnly]="true"
-            (mousedown)="$event.preventDefault()"
-            (click)="$event.stopPropagation(); _clearAll()">
-          </button>
-        }
-        <button
-          clx-button
-          variant="ghost"
-          [color]="_activeColor()"
-          shape="circle"
-          [size]="_sizeConfig().btnSize"
-          icon="keyboard_arrow_down"
-          [iconOnly]="true"
-          [class]="_chevronBtnClass()"
-          (mousedown)="$event.preventDefault()">
-        </button>
-      </div>
-    </div>
-
-    <!-- ── Overlay panel ───────────────────────────────────────────────────── -->
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="_isOpen()"
-      [cdkConnectedOverlayPositions]="_positions"
-      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
-      [cdkConnectedOverlayWidth]="_overlayWidth()"
-      [cdkConnectedOverlayPush]="true"
-      (overlayOutsideClick)="_closePanel()"
-      (overlayKeydown)="_onOverlayKeydown($event)">
-
-      <div [class]="_panelClass()" role="listbox">
-
-        <!-- Search / Autocomplete input -->
-        @if (searchable() || async()) {
-          <div class="p-2 border-b border-clx-border-soft" (click)="$event.stopPropagation()">
-            <clx-input
-              [formControl]="_searchControl"
-              [placeholder]="async() ? 'Buscar...' : searchPlaceholder()"
-              [color]="_activeColor()"
-              [suffixIcon]="async() && _asyncLoading() ? '' : 'search'"
-              size="sm">
-            </clx-input>
-          </div>
-        }
-
-        <!-- Options list -->
-        <div class="overflow-y-auto max-h-60 p-1 space-y-0.5">
-          @if (async() && _asyncLoading()) {
-            <div class="flex items-center justify-center py-6 gap-2 text-sm text-clx-text-subtle">
-              <clx-spinner size="sm" [color]="_activeColor()" />
-              Buscando...
-            </div>
-          } @else if (_showAsyncPlaceholder()) {
-            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">
-              Escribe {{ minChars() === 1 ? 'al menos 1 carácter' : 'al menos ' + minChars() + ' caracteres' }}
-            </div>
-          } @else if (_filteredOptions().length === 0) {
-            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
-          } @else {
-            @for (opt of _filteredOptions(); track opt.value) {
-              <button
-                type="button"
-                [class]="_optionClass(opt)"
-                [disabled]="opt.disabled ?? false"
-                (mousedown)="$event.preventDefault()"
-                (click)="_selectOption(opt)">
-                <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>
-                }
-              </button>
-            }
-          }
-        </div>
-
-      </div>
-    </ng-template>
-
-    <!-- ── Bottom message ─────────────────────────────────────────────────── -->
-    @if (_isInvalid()) {
-      <p class="text-xs text-red-500 flex items-center gap-1">
-        <span clx-icon name="error" size="xs"></span>
-        {{ errorMessage() }}
-      </p>
-    } @else if (hint()) {
-      <p [class]="_hintClass()">{{ hint() }}</p>
-    }
+                    template: `
+    @if (label()) {
+      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
+    }
+
+    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
+    <div
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      [class]="_triggerClass()"
+      [attr.tabindex]="_disabled() ? null : '0'"
+      role="combobox"
+      [attr.aria-labelledby]="label() ? _labelId : null"
+      [attr.aria-expanded]="_isOpen()"
+      aria-haspopup="listbox"
+      (click)="!_disabled() && _togglePanel()"
+      (keydown)="_onTriggerKeydown($event)">
+
+      <!-- Multi mode: tag chips -->
+      @if (multiple()) {
+        <div [class]="_tagContainerClass()">
+          @for (opt of _selectedOptions(); track opt.value) {
+            <span
+              clx-tag
+              variant="soft"
+              [color]="_activeColor()"
+              [size]="_sizeConfig().tagSize"
+              (onRemove)="_deselect(opt.value)">
+              {{ opt.label }}
+            </span>
+          }
+          @if (!_selectedOptions().length) {
+            <span [class]="_placeholderClass()">{{ placeholder() }}</span>
+          }
+        </div>
+
+      <!-- Single mode: display value -->
+      } @else {
+        <span [class]="_singleDisplayClass()">{{ _displayValue() }}</span>
+      }
+
+      <!-- Right controls: clear + chevron -->
+      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+        @if (_hasValue() && !_disabled() && multiple()) {
+          <button
+            clx-button
+            variant="ghost"
+            [color]="_activeColor()"
+            shape="circle"
+            [size]="_sizeConfig().btnSize"
+            icon="close"
+            [iconOnly]="true"
+            (mousedown)="$event.preventDefault()"
+            (click)="$event.stopPropagation(); _clearAll()">
+          </button>
+        }
+        <button
+          clx-button
+          variant="ghost"
+          [color]="_activeColor()"
+          shape="circle"
+          [size]="_sizeConfig().btnSize"
+          icon="keyboard_arrow_down"
+          [iconOnly]="true"
+          [class]="_chevronBtnClass()"
+          (mousedown)="$event.preventDefault()">
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Overlay panel ───────────────────────────────────────────────────── -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayWidth]="_overlayWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_closePanel()"
+      (overlayKeydown)="_onOverlayKeydown($event)">
+
+      <div [class]="_panelClass()" role="listbox">
+
+        <!-- Search / Autocomplete input -->
+        @if (searchable() || async()) {
+          <div class="p-2 border-b border-clx-border-soft" (click)="$event.stopPropagation()">
+            <clx-input
+              [formControl]="_searchControl"
+              [placeholder]="async() ? 'Buscar...' : searchPlaceholder()"
+              [color]="_activeColor()"
+              [suffixIcon]="async() && _asyncLoading() ? '' : 'search'"
+              size="sm">
+            </clx-input>
+          </div>
+        }
+
+        <!-- Options list -->
+        <div class="overflow-y-auto max-h-60 p-1 space-y-0.5">
+          @if (async() && _asyncLoading()) {
+            <div class="flex items-center justify-center py-6 gap-2 text-sm text-clx-text-subtle">
+              <clx-spinner size="sm" [color]="_activeColor()" />
+              Buscando...
+            </div>
+          } @else if (_showAsyncPlaceholder()) {
+            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">
+              Escribe {{ minChars() === 1 ? 'al menos 1 carácter' : 'al menos ' + minChars() + ' caracteres' }}
+            </div>
+          } @else if (_filteredOptions().length === 0) {
+            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
+          } @else {
+            @for (opt of _filteredOptions(); track opt.value) {
+              <button
+                type="button"
+                [class]="_optionClass(opt)"
+                [disabled]="opt.disabled ?? false"
+                (mousedown)="$event.preventDefault()"
+                (click)="_selectOption(opt)">
+                <span class="flex-1 text-left truncate">{{ opt.label }}</span>
+                @if (_isSelected(opt.value)) {
+                  <span clx-icon name="check" size="xs" class="shrink-0"></span>
+                }
+              </button>
+            }
+          }
+        </div>
+
+      </div>
+    </ng-template>
+
+    <!-- ── Bottom message ─────────────────────────────────────────────────── -->
+    @if (_isInvalid()) {
+      <p class="text-xs text-red-500 flex items-center gap-1">
+        <span clx-icon name="error" size="xs"></span>
+        {{ errorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5471,7 +5137,6 @@ class ClxAlertComponent {
     _resolve = inject(CLX_ALERT_RESOLVE);
     _animate = inject(ClxAnimateService);
     _el = inject((ElementRef));
-    _themeSvc = inject(ClxThemeService);
     _zone;
     constructor() {
         const zone = inject(NgZone, { optional: true });
@@ -5479,36 +5144,17 @@ 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 = 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 */ []));
+    _confirmColor = signal(this._opts.confirmButton?.color ?? 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 = computed(() => this._opts.cancelButton?.color ?? this._themeSvc.config().secondaryColor, ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
+    _cancelColor = signal(this._opts.cancelButton?.color ?? 'slate', ...(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 */ []));
@@ -5575,142 +5221,146 @@ class ClxAlertComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAlertComponent, isStandalone: true, selector: "clx-alert", ngImport: i0, template: `
-    <!-- Dialog card -->
-    <div
-      #card
-      class="clx-alert-card relative w-full max-w-sm mx-auto bg-clx-surface rounded-3xl shadow-2xl overflow-hidden flex flex-col items-center text-center px-8 pt-8 pb-6 gap-4"
-    >
-      <!-- Icon circle -->
-      <div class="w-20 h-20 rounded-full flex items-center justify-center shrink-0"
-           [class]="_iconBg()">
-        <span clx-icon [name]="_icon()" size="xl" [class]="_iconColor()"></span>
-      </div>
-
-      <!-- Title -->
-      @if (_title()) {
-        <h2
-          class="text-lg font-bold text-clx-text-label leading-snug"
-          [innerHTML]="_title()">
-        </h2>
-      }
-
-      <!-- Message -->
-      @if (_message()) {
-        <p
-          class="text-sm text-clx-text-subtle leading-relaxed"
-          [innerHTML]="_message()">
-        </p>
-      }
-
-      <!-- Buttons -->
-      <div class="flex items-center justify-center gap-3 w-full mt-1">
-
-        @if (_showCancel()) {
-          <button
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="dismiss()"
-          >
-            {{ _cancelText() }}
-          </button>
-        }
-
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          variant="solid"
-          size="md"
-          (click)="confirm()"
-        >
-          {{ _confirmText() }}
-        </button>
-
-      </div>
-
-      <!-- Timer progress bar -->
-      @if (_timerTotal() > 0) {
-        <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
-          <div
-            class="h-full transition-none rounded-b-3xl"
-            [class]="_progressColor()"
-            [ngStyle]="{ width: _progressPct() + '%' }">
-          </div>
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAlertComponent, isStandalone: true, selector: "clx-alert", ngImport: i0, template: `
+    <!-- Dialog card -->
+    <div
+      #card
+      class="clx-alert-card relative w-full max-w-sm mx-auto bg-clx-surface rounded-3xl shadow-2xl overflow-hidden flex flex-col items-center text-center px-8 pt-8 pb-6 gap-4"
+    >
+      <!-- Icon circle -->
+      <div class="w-20 h-20 rounded-full flex items-center justify-center shrink-0"
+           [class]="_iconBg()">
+        <span clx-icon [name]="_icon()" size="xl" [class]="_iconColor()"></span>
+      </div>
+
+      <!-- Title -->
+      @if (_title()) {
+        <h2
+          class="text-lg font-bold text-clx-text-label leading-snug"
+          [innerHTML]="_title()">
+        </h2>
+      }
+
+      <!-- Message -->
+      @if (_message()) {
+        <p
+          class="text-sm text-clx-text-subtle leading-relaxed"
+          [innerHTML]="_message()">
+        </p>
+      }
+
+      <!-- Buttons -->
+      <div class="flex items-center justify-center gap-3 w-full mt-1">
+
+        @if (_showCancel()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            shape="pill"
+            (click)="dismiss()"
+          >
+            {{ _cancelText() }}
+          </button>
+        }
+
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          variant="solid"
+          size="md"
+          shape="pill"
+          (click)="confirm()"
+        >
+          {{ _confirmText() }}
+        </button>
+
+      </div>
+
+      <!-- Timer progress bar -->
+      @if (_timerTotal() > 0) {
+        <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
+          <div
+            class="h-full transition-none rounded-b-3xl"
+            [class]="_progressColor()"
+            [ngStyle]="{ width: _progressPct() + '%' }">
+          </div>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: ["clx-alert{display:flex;align-items:center;justify-content:center;width:100%}.clx-alert-card{will-change:transform,opacity}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clx-alert', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <!-- Dialog card -->
-    <div
-      #card
-      class="clx-alert-card relative w-full max-w-sm mx-auto bg-clx-surface rounded-3xl shadow-2xl overflow-hidden flex flex-col items-center text-center px-8 pt-8 pb-6 gap-4"
-    >
-      <!-- Icon circle -->
-      <div class="w-20 h-20 rounded-full flex items-center justify-center shrink-0"
-           [class]="_iconBg()">
-        <span clx-icon [name]="_icon()" size="xl" [class]="_iconColor()"></span>
-      </div>
-
-      <!-- Title -->
-      @if (_title()) {
-        <h2
-          class="text-lg font-bold text-clx-text-label leading-snug"
-          [innerHTML]="_title()">
-        </h2>
-      }
-
-      <!-- Message -->
-      @if (_message()) {
-        <p
-          class="text-sm text-clx-text-subtle leading-relaxed"
-          [innerHTML]="_message()">
-        </p>
-      }
-
-      <!-- Buttons -->
-      <div class="flex items-center justify-center gap-3 w-full mt-1">
-
-        @if (_showCancel()) {
-          <button
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="dismiss()"
-          >
-            {{ _cancelText() }}
-          </button>
-        }
-
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          variant="solid"
-          size="md"
-          (click)="confirm()"
-        >
-          {{ _confirmText() }}
-        </button>
-
-      </div>
-
-      <!-- Timer progress bar -->
-      @if (_timerTotal() > 0) {
-        <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
-          <div
-            class="h-full transition-none rounded-b-3xl"
-            [class]="_progressColor()"
-            [ngStyle]="{ width: _progressPct() + '%' }">
-          </div>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'clx-alert', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <!-- Dialog card -->
+    <div
+      #card
+      class="clx-alert-card relative w-full max-w-sm mx-auto bg-clx-surface rounded-3xl shadow-2xl overflow-hidden flex flex-col items-center text-center px-8 pt-8 pb-6 gap-4"
+    >
+      <!-- Icon circle -->
+      <div class="w-20 h-20 rounded-full flex items-center justify-center shrink-0"
+           [class]="_iconBg()">
+        <span clx-icon [name]="_icon()" size="xl" [class]="_iconColor()"></span>
+      </div>
+
+      <!-- Title -->
+      @if (_title()) {
+        <h2
+          class="text-lg font-bold text-clx-text-label leading-snug"
+          [innerHTML]="_title()">
+        </h2>
+      }
+
+      <!-- Message -->
+      @if (_message()) {
+        <p
+          class="text-sm text-clx-text-subtle leading-relaxed"
+          [innerHTML]="_message()">
+        </p>
+      }
+
+      <!-- Buttons -->
+      <div class="flex items-center justify-center gap-3 w-full mt-1">
+
+        @if (_showCancel()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            shape="pill"
+            (click)="dismiss()"
+          >
+            {{ _cancelText() }}
+          </button>
+        }
+
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          variant="solid"
+          size="md"
+          shape="pill"
+          (click)="confirm()"
+        >
+          {{ _confirmText() }}
+        </button>
+
+      </div>
+
+      <!-- Timer progress bar -->
+      @if (_timerTotal() > 0) {
+        <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
+          <div
+            class="h-full transition-none rounded-b-3xl"
+            [class]="_progressColor()"
+            [ngStyle]="{ width: _progressPct() + '%' }">
+          </div>
+        </div>
+      }
+    </div>
   `, styles: ["clx-alert{display:flex;align-items:center;justify-content:center;width:100%}.clx-alert-card{will-change:transform,opacity}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -5721,7 +5371,7 @@ const MODAL_SIZE_MAP = {
     xl: 'w-full',
     full: 'w-full h-screen rounded-none',
 };
-const MODAL_CONTAINER_CLASS = 'flex flex-col bg-clx-surface rounded-2xl shadow-2xl overflow-hidden';
+const MODAL_CONTAINER_CLASS = 'flex flex-col bg-white 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');
@@ -5744,7 +5394,7 @@ const DRAWER_WIDTH_MAP = {
     md: '420px',
     lg: '560px',
 };
-const DRAWER_CONTAINER_CLASS = 'flex flex-col bg-clx-surface shadow-2xl overflow-hidden h-screen';
+const DRAWER_CONTAINER_CLASS = 'flex flex-col bg-white shadow-2xl overflow-hidden h-screen';
 const CLX_DRAWER_SIZE = new InjectionToken('CLX_DRAWER_SIZE');
 
 class ClxDrawerComponent {
@@ -5771,57 +5421,59 @@ class ClxDrawerComponent {
         this._modalRef?.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxDrawerComponent, isStandalone: true, selector: "clx-drawer", 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">
-        <ng-content select="[clx-drawer-title]" />
-      </div>
-      @if (showClose()) {
-        <button
-          clx-button
-          variant="ghost"
-          color="zinc"
-          shape="circle"
-          size="sm"
-          icon="close"
-          [iconOnly]="true"
-          class="shrink-0 -mr-1"
-          (click)="_close()">
-        </button>
-      }
-    </div>
-
-    <!-- Body -->
-    <div class="flex-1 overflow-y-auto px-6 py-5">
-      <ng-content />
-    </div>
-
-    <!-- Footer -->
-    <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
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="cancelClick.emit()">
-            {{ _cancelText() }}
-          </button>
-        }
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          [variant]="_confirmVariant()"
-          size="md"
-          (click)="confirmClick.emit()">
-          {{ _confirmText() }}
-        </button>
-      } @else {
-        <ng-content select="[clx-drawer-footer]" />
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxDrawerComponent, isStandalone: true, selector: "clx-drawer", 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">
+        <ng-content select="[clx-drawer-title]" />
+      </div>
+      @if (showClose()) {
+        <button
+          clx-button
+          variant="ghost"
+          color="zinc"
+          shape="circle"
+          size="sm"
+          icon="close"
+          [iconOnly]="true"
+          class="shrink-0 -mr-1"
+          (click)="_close()">
+        </button>
+      }
+    </div>
+
+    <!-- Body -->
+    <div class="flex-1 overflow-y-auto px-6 py-5">
+      <ng-content />
+    </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">
+      @if (_hasBuiltInButtons()) {
+        @if (showCancelButton()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            shape="pill"
+            (click)="cancelClick.emit()">
+            {{ _cancelText() }}
+          </button>
+        }
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          [variant]="_confirmVariant()"
+          size="md"
+          shape="pill"
+          (click)="confirmClick.emit()">
+          {{ _confirmText() }}
+        </button>
+      } @else {
+        <ng-content select="[clx-drawer-footer]" />
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDrawerComponent, decorators: [{
@@ -5830,57 +5482,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-drawer',
                     standalone: true,
                     imports: [ClxButtonComponent],
-                    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">
-        <ng-content select="[clx-drawer-title]" />
-      </div>
-      @if (showClose()) {
-        <button
-          clx-button
-          variant="ghost"
-          color="zinc"
-          shape="circle"
-          size="sm"
-          icon="close"
-          [iconOnly]="true"
-          class="shrink-0 -mr-1"
-          (click)="_close()">
-        </button>
-      }
-    </div>
-
-    <!-- Body -->
-    <div class="flex-1 overflow-y-auto px-6 py-5">
-      <ng-content />
-    </div>
-
-    <!-- Footer -->
-    <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
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="cancelClick.emit()">
-            {{ _cancelText() }}
-          </button>
-        }
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          [variant]="_confirmVariant()"
-          size="md"
-          (click)="confirmClick.emit()">
-          {{ _confirmText() }}
-        </button>
-      } @else {
-        <ng-content select="[clx-drawer-footer]" />
-      }
-    </div>
+                    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">
+        <ng-content select="[clx-drawer-title]" />
+      </div>
+      @if (showClose()) {
+        <button
+          clx-button
+          variant="ghost"
+          color="zinc"
+          shape="circle"
+          size="sm"
+          icon="close"
+          [iconOnly]="true"
+          class="shrink-0 -mr-1"
+          (click)="_close()">
+        </button>
+      }
+    </div>
+
+    <!-- Body -->
+    <div class="flex-1 overflow-y-auto px-6 py-5">
+      <ng-content />
+    </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">
+      @if (_hasBuiltInButtons()) {
+        @if (showCancelButton()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            shape="pill"
+            (click)="cancelClick.emit()">
+            {{ _cancelText() }}
+          </button>
+        }
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          [variant]="_confirmVariant()"
+          size="md"
+          shape="pill"
+          (click)="confirmClick.emit()">
+          {{ _confirmText() }}
+        </button>
+      } @else {
+        <ng-content select="[clx-drawer-footer]" />
+      }
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5895,133 +5549,137 @@ class ClxModalComponent {
     cancelButton = input(undefined, ...(ngDevMode ? [{ debugName: "cancelButton" }] : /* istanbul ignore next */ []));
     showCancelButton = input(false, ...(ngDevMode ? [{ debugName: "showCancelButton" }] : /* istanbul ignore next */ []));
     confirmClick = output();
-    cancelClick = output();
-    _modalRef = inject(CLX_MODAL_REF, { optional: true });
-    _sizeToken = inject(CLX_MODAL_SIZE, { optional: true });
-    _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._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 */ []));
-    _cancelVariant = computed(() => this.cancelButton()?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
-    _close() {
-        this._modalRef?.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 text-clx-text-label">
-        <ng-content select="[clx-modal-title]" />
-      </div>
-      @if (showClose()) {
-        <button
-          clx-button
-          variant="ghost"
-          color="zinc"
-          shape="circle"
-          size="md"
-          icon="close"
-          [iconOnly]="true"
-          class="shrink-0 -mr-1"
-          (click)="_close()">
-        </button>
-      }
-    </div>
-
-    <!-- Body -->
-    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
-      <ng-content />
-    </div>
-
-    <!-- Footer -->
-    <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
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="cancelClick.emit()">
-            {{ _cancelText() }}
-          </button>
-        }
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          [variant]="_confirmVariant()"
-          size="md"
-          (click)="confirmClick.emit()">
-          {{ _confirmText() }}
-        </button>
-      } @else {
-        <ng-content select="[clx-modal-footer]" />
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clx-modal',
-                    standalone: true,
-                    imports: [ClxButtonComponent, ScrollingModule],
-                    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 text-clx-text-label">
-        <ng-content select="[clx-modal-title]" />
-      </div>
-      @if (showClose()) {
-        <button
-          clx-button
-          variant="ghost"
-          color="zinc"
-          shape="circle"
-          size="md"
-          icon="close"
-          [iconOnly]="true"
-          class="shrink-0 -mr-1"
-          (click)="_close()">
-        </button>
-      }
-    </div>
-
-    <!-- Body -->
-    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
-      <ng-content />
-    </div>
-
-    <!-- Footer -->
-    <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
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="cancelClick.emit()">
-            {{ _cancelText() }}
-          </button>
-        }
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          [variant]="_confirmVariant()"
-          size="md"
-          (click)="confirmClick.emit()">
-          {{ _confirmText() }}
-        </button>
-      } @else {
-        <ng-content select="[clx-modal-footer]" />
-      }
-    </div>
+    cancelClick = output();
+    _modalRef = inject(CLX_MODAL_REF, { optional: true });
+    _sizeToken = inject(CLX_MODAL_SIZE, { optional: true });
+    _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._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 */ []));
+    _cancelVariant = computed(() => this.cancelButton()?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
+    _close() {
+        this._modalRef?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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">
+        <ng-content select="[clx-modal-title]" />
+      </div>
+      @if (showClose()) {
+        <button
+          clx-button
+          variant="ghost"
+          color="zinc"
+          shape="circle"
+          size="md"
+          icon="close"
+          [iconOnly]="true"
+          class="shrink-0 -mr-1"
+          (click)="_close()">
+        </button>
+      }
+    </div>
+
+    <!-- Body -->
+    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
+      <ng-content />
+    </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">
+      @if (_hasBuiltInButtons()) {
+        @if (showCancelButton()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            shape="pill"
+            (click)="cancelClick.emit()">
+            {{ _cancelText() }}
+          </button>
+        }
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          [variant]="_confirmVariant()"
+          size="md"
+          shape="pill"
+          (click)="confirmClick.emit()">
+          {{ _confirmText() }}
+        </button>
+      } @else {
+        <ng-content select="[clx-modal-footer]" />
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-modal',
+                    standalone: true,
+                    imports: [ClxButtonComponent, ScrollingModule],
+                    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">
+        <ng-content select="[clx-modal-title]" />
+      </div>
+      @if (showClose()) {
+        <button
+          clx-button
+          variant="ghost"
+          color="zinc"
+          shape="circle"
+          size="md"
+          icon="close"
+          [iconOnly]="true"
+          class="shrink-0 -mr-1"
+          (click)="_close()">
+        </button>
+      }
+    </div>
+
+    <!-- Body -->
+    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
+      <ng-content />
+    </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">
+      @if (_hasBuiltInButtons()) {
+        @if (showCancelButton()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            shape="pill"
+            (click)="cancelClick.emit()">
+            {{ _cancelText() }}
+          </button>
+        }
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          [variant]="_confirmVariant()"
+          size="md"
+          shape="pill"
+          (click)="confirmClick.emit()">
+          {{ _confirmText() }}
+        </button>
+      } @else {
+        <ng-content select="[clx-modal-footer]" />
+      }
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11778,9 +11436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }] } });
 
 class ClxAppLayoutComponent {
-    _zone = inject(NgZone);
-    _document = inject(DOCUMENT);
-    _el = inject(ElementRef);
+    _zone;
+    _document;
     activeColor = input(undefined, ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
     _sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : /* istanbul ignore next */ []));
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
@@ -11788,31 +11445,38 @@ class ClxAppLayoutComponent {
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
     collapsedChange = output();
     expandedChange = output();
+    constructor() {
+        const zone = inject(NgZone, { optional: true });
+        this._zone = zone ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+        this._document = inject(DOCUMENT);
+    }
     _showBackdrop = computed(() => this._sidebarOpen() && this._isMobile(), ...(ngDevMode ? [{ debugName: "_showBackdrop" }] : /* istanbul ignore next */ []));
     _isExpanded = computed(() => !this.collapsed() || this._hovered(), ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
     _sidebarCls = computed(() => {
-        const mobile = this._isMobile();
-        const open = this._sidebarOpen();
-        const collapsed = this.collapsed();
+        const isDesktopCollapsed = this.collapsed() && !this._isMobile();
         const hovered = this._hovered();
-        const base = 'flex flex-col bg-clx-surface border-r border-clx-border overflow-hidden shrink-0';
-        if (mobile) {
-            // Mobile: fixed overlay, slides in/out — no width transition needed
-            const visible = open ? 'translate-x-0' : '-translate-x-full';
-            return `fixed inset-y-0 left-0 z-30 w-72 ${base} transition-transform duration-300 ease-in-out ${visible}`;
-        }
-        // Desktop: in-flow (relative), width-only transition — no fixed, no transform
-        const width = collapsed && !hovered ? 'w-20' : 'w-72';
-        const shadow = collapsed && hovered ? 'shadow-2xl' : '';
-        return `relative z-30 ${width} ${base} transition-[width] duration-300 ease-in-out ${shadow}`;
+        let width;
+        if (isDesktopCollapsed && hovered) {
+            width = 'w-72';
+        }
+        else if (isDesktopCollapsed) {
+            width = 'w-20';
+        }
+        else {
+            width = 'w-72';
+        }
+        const isOverlay = isDesktopCollapsed && hovered;
+        return [
+            `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
+            'bg-clx-surface border-r border-clx-border overflow-hidden shrink-0',
+            'transition-[width,transform] duration-300 ease-in-out',
+            isOverlay ? 'shadow-2xl' : '',
+            'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
+            (!this._isMobile() || this._sidebarOpen()) ? 'translate-x-0' : '-translate-x-full',
+        ].join(' ');
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : /* istanbul ignore next */ []));
     _mql;
     _mqlListener;
-    _resizeTimer = null;
-    _resizeListener;
-    _mouseEnterFn;
-    _mouseLeaveFn;
-    _sidebarEl = null;
     ngOnInit() {
         const win = this._document.defaultView;
         if (!win)
@@ -11835,58 +11499,9 @@ class ClxAppLayoutComponent {
             });
         };
         this._mql.addEventListener('change', this._mqlListener);
-        this._zone.runOutsideAngular(() => {
-            // Suppress all transitions during resize
-            this._resizeListener = () => {
-                this._document.documentElement.classList.add('clx-resizing');
-                if (this._resizeTimer !== null)
-                    clearTimeout(this._resizeTimer);
-                this._resizeTimer = setTimeout(() => {
-                    this._document.documentElement.classList.remove('clx-resizing');
-                    this._resizeTimer = null;
-                }, 150);
-            };
-            win.addEventListener('resize', this._resizeListener, { passive: true });
-            // Sidebar hover outside NgZone — only enters zone when state actually changes
-            this._mouseEnterFn = () => {
-                if (!this.collapsed() || this._isMobile())
-                    return;
-                if (!this._hovered()) {
-                    this._zone.run(() => {
-                        this._hovered.set(true);
-                        this.expandedChange.emit(true);
-                    });
-                }
-            };
-            this._mouseLeaveFn = () => {
-                if (this._hovered()) {
-                    this._zone.run(() => {
-                        this._hovered.set(false);
-                        this.expandedChange.emit(false);
-                    });
-                }
-            };
-            // Attach after a tick so the aside is rendered
-            setTimeout(() => {
-                const host = this._el.nativeElement;
-                this._sidebarEl = host.querySelector('aside');
-                if (this._sidebarEl) {
-                    this._sidebarEl.addEventListener('mouseenter', this._mouseEnterFn, { passive: true });
-                    this._sidebarEl.addEventListener('mouseleave', this._mouseLeaveFn, { passive: true });
-                }
-            }, 0);
-        });
     }
     ngOnDestroy() {
         this._mql?.removeEventListener('change', this._mqlListener);
-        const win = this._document.defaultView;
-        win?.removeEventListener('resize', this._resizeListener);
-        if (this._resizeTimer !== null)
-            clearTimeout(this._resizeTimer);
-        if (this._sidebarEl) {
-            this._sidebarEl.removeEventListener('mouseenter', this._mouseEnterFn);
-            this._sidebarEl.removeEventListener('mouseleave', this._mouseLeaveFn);
-        }
     }
     _toggleCollapsed() {
         const next = !this.collapsed();
@@ -11894,122 +11509,144 @@ class ClxAppLayoutComponent {
         this._hovered.set(false);
         this.collapsedChange.emit(next);
     }
+    _onSidebarEnter() {
+        if (this.collapsed() && !this._isMobile()) {
+            this._hovered.set(true);
+            this.expandedChange.emit(true);
+        }
+    }
+    _onSidebarLeave() {
+        if (this._hovered()) {
+            this._hovered.set(false);
+            this.expandedChange.emit(false);
+        }
+    }
     toggleSidebar() { this._sidebarOpen.update(v => !v); }
     openSidebar() { this._sidebarOpen.set(true); }
     closeSidebar() { this._sidebarOpen.set(false); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
-    <!-- Mobile backdrop -->
-    @if (_showBackdrop()) {
-      <div
-        class="fixed inset-0 z-20 bg-slate-900/60"
-        aria-hidden="true"
-        (click)="closeSidebar()">
-      </div>
-    }
-
-    <!-- Sidebar -->
-    <aside
-      [class]="_sidebarCls()"
-      aria-label="Navegación principal">
-
-      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
-        <ng-content select="clx-brand"></ng-content>
-      </div>
-
-      <div class="flex flex-col flex-1 min-h-0 overflow-y-auto">
-        <ng-content select="[clx-sidebar]"></ng-content>
-      </div>
-    </aside>
-
-    <!-- Right panel -->
-    <div class="flex-1 flex flex-col overflow-hidden min-w-0" style="contain:layout paint">
-
-      <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
-        <button
-          type="button"
-          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
-          (click)="_toggleCollapsed()">
-          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
-        </button>
-        <button
-          type="button"
-          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
-          (click)="toggleSidebar()">
-          <span clx-icon name="menu" size="sm"></span>
-        </button>
-
-        <ng-content select="[clx-header]"></ng-content>
-      </header>
-
-      <main class="flex-1 overflow-y-auto bg-clx-bg" style="contain:layout paint">
-        <ng-content></ng-content>
-      </main>
-
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
+    <!-- Mobile backdrop -->
+    @if (_showBackdrop()) {
+      <div
+        class="fixed inset-0 z-20 bg-slate-900/60"
+        aria-hidden="true"
+        (click)="closeSidebar()">
+      </div>
+    }
+
+    <!-- Sidebar -->
+    <aside
+      [class]="_sidebarCls()"
+      (mouseenter)="_onSidebarEnter()"
+      (mouseleave)="_onSidebarLeave()"
+      aria-label="Navegación principal">
+
+      <!-- Brand slot -->
+      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+        <ng-content select="clx-brand"></ng-content>
+      </div>
+
+      <div class="flex flex-col flex-1 min-h-0">
+        <ng-content select="[clx-sidebar]"></ng-content>
+      </div>
+    </aside>
+
+    <!-- Right panel -->
+    <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+
+      <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
+        <!-- Toggle button desktop -->
+        <button
+          type="button"
+          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
+          (click)="_toggleCollapsed()">
+          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
+        </button>
+        <!-- Toggle button mobile -->
+        <button
+          type="button"
+          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
+          (click)="toggleSidebar()">
+          <span clx-icon name="menu" size="sm"></span>
+        </button>
+
+        <ng-content select="[clx-header]"></ng-content>
+      </header>
+
+      <main cdkScrollable class="flex-1 overflow-y-auto bg-clx-bg">
+        <ng-content></ng-content>
+      </main>
+
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAppLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-app-layout',
                     standalone: true,
-                    imports: [ClxIconComponent],
-                    template: `
-    <!-- Mobile backdrop -->
-    @if (_showBackdrop()) {
-      <div
-        class="fixed inset-0 z-20 bg-slate-900/60"
-        aria-hidden="true"
-        (click)="closeSidebar()">
-      </div>
-    }
-
-    <!-- Sidebar -->
-    <aside
-      [class]="_sidebarCls()"
-      aria-label="Navegación principal">
-
-      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
-        <ng-content select="clx-brand"></ng-content>
-      </div>
-
-      <div class="flex flex-col flex-1 min-h-0 overflow-y-auto">
-        <ng-content select="[clx-sidebar]"></ng-content>
-      </div>
-    </aside>
-
-    <!-- Right panel -->
-    <div class="flex-1 flex flex-col overflow-hidden min-w-0" style="contain:layout paint">
-
-      <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
-        <button
-          type="button"
-          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
-          (click)="_toggleCollapsed()">
-          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
-        </button>
-        <button
-          type="button"
-          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
-          (click)="toggleSidebar()">
-          <span clx-icon name="menu" size="sm"></span>
-        </button>
-
-        <ng-content select="[clx-header]"></ng-content>
-      </header>
-
-      <main class="flex-1 overflow-y-auto bg-clx-bg" style="contain:layout paint">
-        <ng-content></ng-content>
-      </main>
-
-    </div>
+                    imports: [ClxIconComponent, CdkScrollable],
+                    template: `
+    <!-- Mobile backdrop -->
+    @if (_showBackdrop()) {
+      <div
+        class="fixed inset-0 z-20 bg-slate-900/60"
+        aria-hidden="true"
+        (click)="closeSidebar()">
+      </div>
+    }
+
+    <!-- Sidebar -->
+    <aside
+      [class]="_sidebarCls()"
+      (mouseenter)="_onSidebarEnter()"
+      (mouseleave)="_onSidebarLeave()"
+      aria-label="Navegación principal">
+
+      <!-- Brand slot -->
+      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+        <ng-content select="clx-brand"></ng-content>
+      </div>
+
+      <div class="flex flex-col flex-1 min-h-0">
+        <ng-content select="[clx-sidebar]"></ng-content>
+      </div>
+    </aside>
+
+    <!-- Right panel -->
+    <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+
+      <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
+        <!-- Toggle button desktop -->
+        <button
+          type="button"
+          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
+          (click)="_toggleCollapsed()">
+          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
+        </button>
+        <!-- Toggle button mobile -->
+        <button
+          type="button"
+          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
+          (click)="toggleSidebar()">
+          <span clx-icon name="menu" size="sm"></span>
+        </button>
+
+        <ng-content select="[clx-header]"></ng-content>
+      </header>
+
+      <main cdkScrollable class="flex-1 overflow-y-auto bg-clx-bg">
+        <ng-content></ng-content>
+      </main>
+
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'flex h-screen overflow-hidden' },
                 }]
-        }], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 class ClxBrandComponent {
     logo = input.required(...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
@@ -12056,7 +11693,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 cursor-pointer select-none';
+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_L1 = 'px-6 py-3';
 const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
 const NAV_ITEM_IDLE = 'text-clx-text-subtle';
@@ -12076,7 +11713,9 @@ class ClxMenuItemComponent {
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
     routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
     itemClick = output();
-    _resolvedColor = computed(() => this.color() ?? this._themeSvc.sidebarItemColor(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
+    _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); }
     _geom = computed(() => {
         if (this.collapsed())
             return 'w-full py-3 px-0 justify-center';
@@ -12084,8 +11723,8 @@ class ClxMenuItemComponent {
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => resolveColor(this._resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
-        const hover = resolveColor(this._resolvedColor()).hoverBgMuted;
-        return `${NAV_ITEM_BASE} ${this._geom()} ${hover}`;
+        const t = resolveColor(this._resolvedColor());
+        return `${NAV_ITEM_BASE} ${this._geom()} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolvedColor());
@@ -12095,36 +11734,36 @@ class ClxMenuItemComponent {
         return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_activeCls" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", 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 } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    @if (routerLink()) {
-      <a
-        [routerLink]="routerLink()"
-        routerLinkActive
-        #rla="routerLinkActive"
-        [routerLinkActiveOptions]="routerLinkActiveOptions()"
-        [class]="rla.isActive ? _activeCls() : _idleCls()"
-        [title]="collapsed() ? label() : ''">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-        }
-      </a>
-    } @else {
-      <button
-        type="button"
-        [class]="active() ? _activeCls() : _idleCls()"
-        [title]="collapsed() ? label() : ''"
-        (click)="itemClick.emit()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-        }
-      </button>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", 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 } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    @if (routerLink()) {
+      <a
+        [routerLink]="routerLink()"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+        [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>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate">{{ label() }}</span>
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [class]="active() ? _activeCls() : _idleCls()"
+        [title]="collapsed() ? label() : ''"
+        (click)="itemClick.emit()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate">{{ label() }}</span>
+        }
+      </button>
+    }
   `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuItemComponent, decorators: [{
@@ -12133,36 +11772,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-menu-item',
                     standalone: true,
                     imports: [ClxIconComponent, RouterLink, RouterLinkActive],
-                    template: `
-    @if (routerLink()) {
-      <a
-        [routerLink]="routerLink()"
-        routerLinkActive
-        #rla="routerLinkActive"
-        [routerLinkActiveOptions]="routerLinkActiveOptions()"
-        [class]="rla.isActive ? _activeCls() : _idleCls()"
-        [title]="collapsed() ? label() : ''">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-        }
-      </a>
-    } @else {
-      <button
-        type="button"
-        [class]="active() ? _activeCls() : _idleCls()"
-        [title]="collapsed() ? label() : ''"
-        (click)="itemClick.emit()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-        }
-      </button>
-    }
+                    template: `
+    @if (routerLink()) {
+      <a
+        [routerLink]="routerLink()"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+        [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>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate">{{ label() }}</span>
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [class]="active() ? _activeCls() : _idleCls()"
+        [title]="collapsed() ? label() : ''"
+        (click)="itemClick.emit()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate">{{ label() }}</span>
+        }
+      </button>
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -12175,13 +11814,14 @@ 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.sidebarMenuColor(), ...(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 */ []));
     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())
@@ -12209,70 +11849,80 @@ class ClxMenuComponent {
                 return `${base} ${t.textSubtle} font-semibold`;
             return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
         }
-        return `${base} ${t.hoverBgMuted}`;
+        return `${base} ${NAV_ITEM_IDLE} ${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" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
-    @if (routerLink()) {
-      <a
-        [routerLink]="routerLink()"
-        routerLinkActive
-        #rla="routerLinkActive"
-        [routerLinkActiveOptions]="routerLinkActiveOptions()"
-        [class]="_buttonCls(rla.isActive)"
-        [title]="collapsed() ? label() : ''"
-        (click)="$event.preventDefault(); !collapsed() && _toggle()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            class="shrink-0 transition-transform duration-300"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
-        }
-      </a>
-    } @else {
-      <button
-        type="button"
-        [class]="_buttonCls(active())"
-        [title]="collapsed() ? label() : ''"
-        (click)="!collapsed() && _toggle()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            class="shrink-0 transition-transform duration-300"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
-        }
-      </button>
-    }
-
-    <div
-      [class]="NAV_CHILDREN_WRAPPER"
-      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
-      <div [class]="NAV_CHILDREN_INNER">
-        <div [class]="NAV_CHILDREN_LIST">
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </div>
+    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: `
+    @if (routerLink()) {
+      <a
+        [routerLink]="routerLink()"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+        [class]="_buttonCls(rla.isActive)"
+        [title]="collapsed() ? label() : ''"
+        (click)="$event.preventDefault(); !collapsed() && _toggle()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span
+            clx-icon
+            name="expand_more"
+            size="sm"
+            class="shrink-0 transition-transform duration-300"
+            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+          </span>
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [class]="_buttonCls(active())"
+        [title]="collapsed() ? label() : ''"
+        (click)="!collapsed() && _toggle()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span
+            clx-icon
+            name="expand_more"
+            size="sm"
+            class="shrink-0 transition-transform duration-300"
+            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+          </span>
+        }
+      </button>
+    }
+
+    <div
+      [class]="NAV_CHILDREN_WRAPPER"
+      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
+      <div [class]="NAV_CHILDREN_INNER">
+        <div [class]="NAV_CHILDREN_LIST">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuComponent, decorators: [{
@@ -12281,61 +11931,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-menu',
                     standalone: true,
                     imports: [ClxIconComponent, RouterLink, RouterLinkActive],
-                    template: `
-    @if (routerLink()) {
-      <a
-        [routerLink]="routerLink()"
-        routerLinkActive
-        #rla="routerLinkActive"
-        [routerLinkActiveOptions]="routerLinkActiveOptions()"
-        [class]="_buttonCls(rla.isActive)"
-        [title]="collapsed() ? label() : ''"
-        (click)="$event.preventDefault(); !collapsed() && _toggle()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            class="shrink-0 transition-transform duration-300"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
-        }
-      </a>
-    } @else {
-      <button
-        type="button"
-        [class]="_buttonCls(active())"
-        [title]="collapsed() ? label() : ''"
-        (click)="!collapsed() && _toggle()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            class="shrink-0 transition-transform duration-300"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
-        }
-      </button>
-    }
-
-    <div
-      [class]="NAV_CHILDREN_WRAPPER"
-      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
-      <div [class]="NAV_CHILDREN_INNER">
-        <div [class]="NAV_CHILDREN_LIST">
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </div>
+                    template: `
+    @if (routerLink()) {
+      <a
+        [routerLink]="routerLink()"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+        [class]="_buttonCls(rla.isActive)"
+        [title]="collapsed() ? label() : ''"
+        (click)="$event.preventDefault(); !collapsed() && _toggle()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span
+            clx-icon
+            name="expand_more"
+            size="sm"
+            class="shrink-0 transition-transform duration-300"
+            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+          </span>
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [class]="_buttonCls(active())"
+        [title]="collapsed() ? label() : ''"
+        (click)="!collapsed() && _toggle()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span
+            clx-icon
+            name="expand_more"
+            size="sm"
+            class="shrink-0 transition-transform duration-300"
+            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+          </span>
+        }
+      </button>
+    }
+
+    <div
+      [class]="NAV_CHILDREN_WRAPPER"
+      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
+      <div [class]="NAV_CHILDREN_INNER">
+        <div [class]="NAV_CHILDREN_LIST">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -12344,25 +11994,23 @@ 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 }, 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 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>
-      </span>
-    }
+    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: `
+    @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>
+    } @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>
+      </span>
+    }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNavGroupComponent, decorators: [{
@@ -12370,20 +12018,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{
                     selector: 'clx-nav-group',
                     standalone: true,
-                    template: `
-    @if (!collapsed()) {
-      <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>
-      </span>
-    }
+                    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>
+    } @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>
+      </span>
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     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 }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", 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 }] }] } });
 
 class ClxProfileComponent {
     // ── Inputs ──────────────────────────────────────────────────────────────────
@@ -12604,7 +12252,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-clx-border-soft text-clx-text-label';
+const TABLE_CELL_CLASS = 'px-4 py-3 border-b border-slate-100 text-slate-700';
 const TABLE_ROW_CLASS = '';
 // ── Alignment ────────────────────────────────────────────────────────────────
 const TABLE_ALIGN_MAP = {
@@ -12864,25 +12512,20 @@ class ClxTableComponent {
     _isSelected(item) {
         return this.selectedItems().some(s => s === item);
     }
-    _headerCellClassMap = computed(() => {
-        const map = new Map();
-        for (const col of this.columns()) {
-            const align = TABLE_ALIGN_MAP[col.align || 'left'];
-            const cursor = col.sortable ? 'cursor-pointer select-none' : '';
-            const extra = col.headerClass || '';
-            map.set(col.key, `${TABLE_HEADER_CELL_CLASS} ${align} ${cursor} ${extra}`.trim());
-        }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "_headerCellClassMap" }] : /* istanbul ignore next */ []));
-    _dataCellClassMap = computed(() => {
-        const map = new Map();
-        for (const col of this.columns()) {
-            const align = TABLE_ALIGN_MAP[col.align || 'left'];
-            const extra = col.cellClass || '';
-            map.set(col.key, `${TABLE_CELL_CLASS} ${align} ${extra}`.trim());
-        }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "_dataCellClassMap" }] : /* istanbul ignore next */ []));
+    _getAlignClass(align) {
+        return TABLE_ALIGN_MAP[align];
+    }
+    _getHeaderCellClass(col) {
+        const align = this._getAlignClass(col.align || 'left');
+        const cursor = col.sortable ? 'cursor-pointer select-none' : '';
+        const extra = col.headerClass || '';
+        return `${TABLE_HEADER_CELL_CLASS} ${align} ${cursor} ${extra}`.trim();
+    }
+    _getDataCellClass(col) {
+        const align = this._getAlignClass(col.align || 'left');
+        const extra = col.cellClass || '';
+        return `${TABLE_CELL_CLASS} ${align} ${extra}`.trim();
+    }
     _getCellValue(item, key) {
         return item[key];
     }
@@ -12924,143 +12567,143 @@ class ClxTableComponent {
         this.selectionChange.emit({ selected: this.selectedItems(), allSelected: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableComponent, isStandalone: true, selector: "clx-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, singleSelect: { classPropertyName: "singleSelect", publicName: "singleSelect", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, _currentPage: { classPropertyName: "_currentPage", publicName: "_currentPage", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortKey: "sortKeyChange", sortDir: "sortDirChange", pageIndex: "pageIndexChange", pageSize: "pageSizeChange", _currentPage: "_currentPageChange", searchQuery: "searchQueryChange", selectedItems: "selectedItemsChange", sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "_columnDefs", predicate: ClxColumnDefDirective, isSignal: true }], ngImport: i0, template: `
-    <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
-    @if (searchable() && !loading() && _filteredData().length > 0) {
-      <div class="mb-3 max-w-80 min-w-40">
-        <clx-input
-          placeholder="Buscar..."
-          size="sm"
-          suffixIcon="search"
-          [color]="_color()"
-          [(ngModel)]="searchQuery">
-        </clx-input>
-      </div>
-    }
-
-    @if (loading()) {
-      <!-- ── Loading State ───────────────────────────────────────────────── -->
-      <div class="space-y-3">
-        @for (row of [1, 2, 3, 4, 5]; track row) {
-          <div class="flex items-center gap-4">
-            @if (selectable()) {
-              <clx-skeleton variant="circular" size="xs"></clx-skeleton>
-            }
-            @for (col of columns(); track col.key) {
-              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
-            }
-          </div>
-        }
-      </div>
-    } @else if (_filteredData().length === 0) {
-      <!-- ── Empty State ─────────────────────────────────────────────────── -->
-      <div class="py-10">
-        <clx-page-empty
-          size="sm"
-          [icon]="emptyIcon()"
-          [title]="_emptyTitle()"
-          [description]="_emptyDescription()" />
-      </div>
-    } @else {
-      <!-- ── Tabla ───────────────────────────────────────────────────────── -->
-      <div class="overflow-x-auto">
-        <table [class]="_tableClass()">
-          <thead>
-            <tr [class]="_headerClass()">
-              @if (selectable()) {
-                <th [class]="_headerCellClass()"
-                    [class.rounded-tl-lg]="true"
-                    [class.rounded-bl-lg]="true"
-                    class="w-10 text-center">
-                  @if (!singleSelect()) {
-                    <clx-checkbox
-                      [color]="_color()"
-                      [ngModel]="_allSelected()"
-                      (ngModelChange)="_handleSelectAll($event)">
-                    </clx-checkbox>
-                  }
-                </th>
-              }
-
-              @for (col of columns(); track col.key; let first = $first; let last = $last) {
-                <th
-                  [class]="_headerCellClassMap().get(col.key)"
-                  [class.rounded-tl-lg]="first && !selectable()"
-                  [class.rounded-bl-lg]="first && !selectable()"
-                  [class.rounded-tr-lg]="last"
-                  [class.rounded-br-lg]="last"
-                  [style.width]="col.width"
-                  (click)="col.sortable && _handleSort(col.key)">
-                  <div class="flex items-center gap-1.5"
-                       [class.justify-end]="col.align === 'right'"
-                       [class.justify-center]="col.align === 'center'">
-                    @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
-                      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
-                    } @else {
-                      <span>{{ col.header || col.key }}</span>
-                    }
-                    @if (col.sortable) {
-                      <span class="opacity-50">
-                        @if (sortKey() === col.key && sortDir() === 'asc') {
-                          <span clx-icon name="arrow_upward" size="xs"></span>
-                        } @else if (sortKey() === col.key && sortDir() === 'desc') {
-                          <span clx-icon name="arrow_downward" size="xs"></span>
-                        } @else {
-                          <span clx-icon name="swap_vert" size="xs"></span>
-                        }
-                      </span>
-                    }
-                  </div>
-                </th>
-              }
-            </tr>
-          </thead>
-
-          <tbody>
-            @for (item of _paginatedData(); track i; let i = $index) {
-              <tr [class]="_rowClass()">
-                @if (selectable()) {
-                  <td [class]="_cellClass()" class="text-center">
-                    <clx-checkbox
-                      [color]="_color()"
-                      [ngModel]="_isSelected(item)"
-                      (ngModelChange)="_handleSelectItem(item, $event)">
-                    </clx-checkbox>
-                  </td>
-                }
-
-                @for (col of columns(); track col.key) {
-                  <td [class]="_dataCellClassMap().get(col.key)">
-                    @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
-                      <ng-container
-                        [ngTemplateOutlet]="tpl"
-                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
-                      </ng-container>
-                    } @else {
-                      {{ _getCellValue(item, col.key) }}
-                    }
-                  </td>
-                }
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-
-      <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
-      @if (pagination()) {
-        <div class="border-t border-clx-border-soft pt-3">
-          <clx-pagination
-            size="sm"
-            [totalItems]="_totalItems()"
-            [color]="_color()"
-            [(currentPage)]="_currentPage"
-            [(pageSize)]="pageSize"
-            (pageChange)="_onPaginationPageChange($event.page)">
-          </clx-pagination>
-      </div>
-      }
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableComponent, isStandalone: true, selector: "clx-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, singleSelect: { classPropertyName: "singleSelect", publicName: "singleSelect", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, _currentPage: { classPropertyName: "_currentPage", publicName: "_currentPage", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortKey: "sortKeyChange", sortDir: "sortDirChange", pageIndex: "pageIndexChange", pageSize: "pageSizeChange", _currentPage: "_currentPageChange", searchQuery: "searchQueryChange", selectedItems: "selectedItemsChange", sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "_columnDefs", predicate: ClxColumnDefDirective, isSignal: true }], ngImport: i0, template: `
+    <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
+    @if (searchable() && !loading() && _filteredData().length > 0) {
+      <div class="mb-3 max-w-80 min-w-40">
+        <clx-input
+          placeholder="Buscar..."
+          size="sm"
+          suffixIcon="search"
+          [color]="_color()"
+          [(ngModel)]="searchQuery">
+        </clx-input>
+      </div>
+    }
+
+    @if (loading()) {
+      <!-- ── Loading State ───────────────────────────────────────────────── -->
+      <div class="space-y-3">
+        @for (row of [1, 2, 3, 4, 5]; track row) {
+          <div class="flex items-center gap-4">
+            @if (selectable()) {
+              <clx-skeleton variant="circular" size="xs"></clx-skeleton>
+            }
+            @for (col of columns(); track col.key) {
+              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
+            }
+          </div>
+        }
+      </div>
+    } @else if (_filteredData().length === 0) {
+      <!-- ── Empty State ─────────────────────────────────────────────────── -->
+      <div class="py-10">
+        <clx-page-empty
+          size="sm"
+          [icon]="emptyIcon()"
+          [title]="_emptyTitle()"
+          [description]="_emptyDescription()" />
+      </div>
+    } @else {
+      <!-- ── Tabla ───────────────────────────────────────────────────────── -->
+      <div class="overflow-x-auto">
+        <table [class]="_tableClass()">
+          <thead>
+            <tr [class]="_headerClass()">
+              @if (selectable()) {
+                <th [class]="_headerCellClass()"
+                    [class.rounded-tl-lg]="true"
+                    [class.rounded-bl-lg]="true"
+                    class="w-10 text-center">
+                  @if (!singleSelect()) {
+                    <clx-checkbox
+                      [color]="_color()"
+                      [ngModel]="_allSelected()"
+                      (ngModelChange)="_handleSelectAll($event)">
+                    </clx-checkbox>
+                  }
+                </th>
+              }
+
+              @for (col of columns(); track col.key; let first = $first; let last = $last) {
+                <th
+                  [class]="_getHeaderCellClass(col)"
+                  [class.rounded-tl-lg]="first && !selectable()"
+                  [class.rounded-bl-lg]="first && !selectable()"
+                  [class.rounded-tr-lg]="last"
+                  [class.rounded-br-lg]="last"
+                  [style.width]="col.width"
+                  (click)="col.sortable && _handleSort(col.key)">
+                  <div class="flex items-center gap-1.5"
+                       [class.justify-end]="col.align === 'right'"
+                       [class.justify-center]="col.align === 'center'">
+                    @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
+                      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+                    } @else {
+                      <span>{{ col.header || col.key }}</span>
+                    }
+                    @if (col.sortable) {
+                      <span class="opacity-50">
+                        @if (sortKey() === col.key && sortDir() === 'asc') {
+                          <span clx-icon name="arrow_upward" size="xs"></span>
+                        } @else if (sortKey() === col.key && sortDir() === 'desc') {
+                          <span clx-icon name="arrow_downward" size="xs"></span>
+                        } @else {
+                          <span clx-icon name="swap_vert" size="xs"></span>
+                        }
+                      </span>
+                    }
+                  </div>
+                </th>
+              }
+            </tr>
+          </thead>
+
+          <tbody>
+            @for (item of _paginatedData(); track i; let i = $index) {
+              <tr [class]="_rowClass()">
+                @if (selectable()) {
+                  <td [class]="_cellClass()" class="text-center">
+                    <clx-checkbox
+                      [color]="_color()"
+                      [ngModel]="_isSelected(item)"
+                      (ngModelChange)="_handleSelectItem(item, $event)">
+                    </clx-checkbox>
+                  </td>
+                }
+
+                @for (col of columns(); track col.key) {
+                  <td [class]="_getDataCellClass(col)">
+                    @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
+                      </ng-container>
+                    } @else {
+                      {{ _getCellValue(item, col.key) }}
+                    }
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+
+      <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
+      @if (pagination()) {
+        <div class="border-t border-clx-border-soft pt-3">
+          <clx-pagination
+            size="sm"
+            [totalItems]="_totalItems()"
+            [color]="_color()"
+            [(currentPage)]="_currentPage"
+            [(pageSize)]="pageSize"
+            (pageChange)="_onPaginationPageChange($event.page)">
+          </clx-pagination>
+      </div>
+      }
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "title", "description", "ctaLabel", "ctaIcon", "ctaColor", "size"], outputs: ["cta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableComponent, decorators: [{
@@ -13078,143 +12721,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         ClxPaginationComponent,
                         ClxPageEmptyComponent,
                     ],
-                    template: `
-    <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
-    @if (searchable() && !loading() && _filteredData().length > 0) {
-      <div class="mb-3 max-w-80 min-w-40">
-        <clx-input
-          placeholder="Buscar..."
-          size="sm"
-          suffixIcon="search"
-          [color]="_color()"
-          [(ngModel)]="searchQuery">
-        </clx-input>
-      </div>
-    }
-
-    @if (loading()) {
-      <!-- ── Loading State ───────────────────────────────────────────────── -->
-      <div class="space-y-3">
-        @for (row of [1, 2, 3, 4, 5]; track row) {
-          <div class="flex items-center gap-4">
-            @if (selectable()) {
-              <clx-skeleton variant="circular" size="xs"></clx-skeleton>
-            }
-            @for (col of columns(); track col.key) {
-              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
-            }
-          </div>
-        }
-      </div>
-    } @else if (_filteredData().length === 0) {
-      <!-- ── Empty State ─────────────────────────────────────────────────── -->
-      <div class="py-10">
-        <clx-page-empty
-          size="sm"
-          [icon]="emptyIcon()"
-          [title]="_emptyTitle()"
-          [description]="_emptyDescription()" />
-      </div>
-    } @else {
-      <!-- ── Tabla ───────────────────────────────────────────────────────── -->
-      <div class="overflow-x-auto">
-        <table [class]="_tableClass()">
-          <thead>
-            <tr [class]="_headerClass()">
-              @if (selectable()) {
-                <th [class]="_headerCellClass()"
-                    [class.rounded-tl-lg]="true"
-                    [class.rounded-bl-lg]="true"
-                    class="w-10 text-center">
-                  @if (!singleSelect()) {
-                    <clx-checkbox
-                      [color]="_color()"
-                      [ngModel]="_allSelected()"
-                      (ngModelChange)="_handleSelectAll($event)">
-                    </clx-checkbox>
-                  }
-                </th>
-              }
-
-              @for (col of columns(); track col.key; let first = $first; let last = $last) {
-                <th
-                  [class]="_headerCellClassMap().get(col.key)"
-                  [class.rounded-tl-lg]="first && !selectable()"
-                  [class.rounded-bl-lg]="first && !selectable()"
-                  [class.rounded-tr-lg]="last"
-                  [class.rounded-br-lg]="last"
-                  [style.width]="col.width"
-                  (click)="col.sortable && _handleSort(col.key)">
-                  <div class="flex items-center gap-1.5"
-                       [class.justify-end]="col.align === 'right'"
-                       [class.justify-center]="col.align === 'center'">
-                    @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
-                      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
-                    } @else {
-                      <span>{{ col.header || col.key }}</span>
-                    }
-                    @if (col.sortable) {
-                      <span class="opacity-50">
-                        @if (sortKey() === col.key && sortDir() === 'asc') {
-                          <span clx-icon name="arrow_upward" size="xs"></span>
-                        } @else if (sortKey() === col.key && sortDir() === 'desc') {
-                          <span clx-icon name="arrow_downward" size="xs"></span>
-                        } @else {
-                          <span clx-icon name="swap_vert" size="xs"></span>
-                        }
-                      </span>
-                    }
-                  </div>
-                </th>
-              }
-            </tr>
-          </thead>
-
-          <tbody>
-            @for (item of _paginatedData(); track i; let i = $index) {
-              <tr [class]="_rowClass()">
-                @if (selectable()) {
-                  <td [class]="_cellClass()" class="text-center">
-                    <clx-checkbox
-                      [color]="_color()"
-                      [ngModel]="_isSelected(item)"
-                      (ngModelChange)="_handleSelectItem(item, $event)">
-                    </clx-checkbox>
-                  </td>
-                }
-
-                @for (col of columns(); track col.key) {
-                  <td [class]="_dataCellClassMap().get(col.key)">
-                    @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
-                      <ng-container
-                        [ngTemplateOutlet]="tpl"
-                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
-                      </ng-container>
-                    } @else {
-                      {{ _getCellValue(item, col.key) }}
-                    }
-                  </td>
-                }
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-
-      <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
-      @if (pagination()) {
-        <div class="border-t border-clx-border-soft pt-3">
-          <clx-pagination
-            size="sm"
-            [totalItems]="_totalItems()"
-            [color]="_color()"
-            [(currentPage)]="_currentPage"
-            [(pageSize)]="pageSize"
-            (pageChange)="_onPaginationPageChange($event.page)">
-          </clx-pagination>
-      </div>
-      }
-    }
+                    template: `
+    <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
+    @if (searchable() && !loading() && _filteredData().length > 0) {
+      <div class="mb-3 max-w-80 min-w-40">
+        <clx-input
+          placeholder="Buscar..."
+          size="sm"
+          suffixIcon="search"
+          [color]="_color()"
+          [(ngModel)]="searchQuery">
+        </clx-input>
+      </div>
+    }
+
+    @if (loading()) {
+      <!-- ── Loading State ───────────────────────────────────────────────── -->
+      <div class="space-y-3">
+        @for (row of [1, 2, 3, 4, 5]; track row) {
+          <div class="flex items-center gap-4">
+            @if (selectable()) {
+              <clx-skeleton variant="circular" size="xs"></clx-skeleton>
+            }
+            @for (col of columns(); track col.key) {
+              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
+            }
+          </div>
+        }
+      </div>
+    } @else if (_filteredData().length === 0) {
+      <!-- ── Empty State ─────────────────────────────────────────────────── -->
+      <div class="py-10">
+        <clx-page-empty
+          size="sm"
+          [icon]="emptyIcon()"
+          [title]="_emptyTitle()"
+          [description]="_emptyDescription()" />
+      </div>
+    } @else {
+      <!-- ── Tabla ───────────────────────────────────────────────────────── -->
+      <div class="overflow-x-auto">
+        <table [class]="_tableClass()">
+          <thead>
+            <tr [class]="_headerClass()">
+              @if (selectable()) {
+                <th [class]="_headerCellClass()"
+                    [class.rounded-tl-lg]="true"
+                    [class.rounded-bl-lg]="true"
+                    class="w-10 text-center">
+                  @if (!singleSelect()) {
+                    <clx-checkbox
+                      [color]="_color()"
+                      [ngModel]="_allSelected()"
+                      (ngModelChange)="_handleSelectAll($event)">
+                    </clx-checkbox>
+                  }
+                </th>
+              }
+
+              @for (col of columns(); track col.key; let first = $first; let last = $last) {
+                <th
+                  [class]="_getHeaderCellClass(col)"
+                  [class.rounded-tl-lg]="first && !selectable()"
+                  [class.rounded-bl-lg]="first && !selectable()"
+                  [class.rounded-tr-lg]="last"
+                  [class.rounded-br-lg]="last"
+                  [style.width]="col.width"
+                  (click)="col.sortable && _handleSort(col.key)">
+                  <div class="flex items-center gap-1.5"
+                       [class.justify-end]="col.align === 'right'"
+                       [class.justify-center]="col.align === 'center'">
+                    @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
+                      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+                    } @else {
+                      <span>{{ col.header || col.key }}</span>
+                    }
+                    @if (col.sortable) {
+                      <span class="opacity-50">
+                        @if (sortKey() === col.key && sortDir() === 'asc') {
+                          <span clx-icon name="arrow_upward" size="xs"></span>
+                        } @else if (sortKey() === col.key && sortDir() === 'desc') {
+                          <span clx-icon name="arrow_downward" size="xs"></span>
+                        } @else {
+                          <span clx-icon name="swap_vert" size="xs"></span>
+                        }
+                      </span>
+                    }
+                  </div>
+                </th>
+              }
+            </tr>
+          </thead>
+
+          <tbody>
+            @for (item of _paginatedData(); track i; let i = $index) {
+              <tr [class]="_rowClass()">
+                @if (selectable()) {
+                  <td [class]="_cellClass()" class="text-center">
+                    <clx-checkbox
+                      [color]="_color()"
+                      [ngModel]="_isSelected(item)"
+                      (ngModelChange)="_handleSelectItem(item, $event)">
+                    </clx-checkbox>
+                  </td>
+                }
+
+                @for (col of columns(); track col.key) {
+                  <td [class]="_getDataCellClass(col)">
+                    @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
+                      </ng-container>
+                    } @else {
+                      {{ _getCellValue(item, col.key) }}
+                    }
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+
+      <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
+      @if (pagination()) {
+        <div class="border-t border-clx-border-soft pt-3">
+          <clx-pagination
+            size="sm"
+            [totalItems]="_totalItems()"
+            [color]="_color()"
+            [(currentPage)]="_currentPage"
+            [(pageSize)]="pageSize"
+            (pageChange)="_onPaginationPageChange($event.page)">
+          </clx-pagination>
+      </div>
+      }
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -15230,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_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { 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