npm - codexly-ui - Versions diffs - 0.1.22 → 0.1.24 - Mend

codexly-ui 0.1.22 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/assets/styles/_fonts.css +3 -84
package/assets/styles/_theme.css +11 -1
package/fesm2022/codexly-ui.mjs +442 -111
package/fesm2022/codexly-ui.mjs.map +1 -1
package/package.json +1 -1
package/types/codexly-ui.d.ts +57 -24
package/assets/fonts/roboto-bold-italic.ttf +0 -0
package/assets/fonts/roboto-bold.ttf +0 -0
package/assets/fonts/roboto-italic.ttf +0 -0
package/assets/fonts/roboto-light-italic.ttf +0 -0
package/assets/fonts/roboto-light.ttf +0 -0
package/assets/fonts/roboto-medium-italic.ttf +0 -0
package/assets/fonts/roboto-medium.ttf +0 -0
package/assets/fonts/roboto-regular.ttf +0 -0
package/assets/fonts/roboto-semibold-italic.ttf +0 -0
package/assets/fonts/roboto-semibold.ttf +0 -0

package/fesm2022/codexly-ui.mjs CHANGED Viewed

@@ -165,6 +165,163 @@ const BADGE_SHAPE_FIXED = {
     circle: 'rounded-full',
 };
+const CLX_FONT_CATALOG = [
+    {
+        label: 'Roboto',
+        value: 'Roboto',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Inter',
+        value: 'Inter',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Poppins',
+        value: 'Poppins',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Plus Jakarta Sans',
+        value: 'Plus Jakarta Sans',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Nunito',
+        value: 'Nunito',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'DM Sans',
+        value: 'DM Sans',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Geist',
+        value: 'Geist',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Lato',
+        value: 'Lato',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap',
+    },
+    {
+        label: 'Montserrat',
+        value: 'Montserrat',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Open Sans',
+        value: 'Open Sans',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Work Sans',
+        value: 'Work Sans',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Manrope',
+        value: 'Manrope',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Sora',
+        value: 'Sora',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Outfit',
+        value: 'Outfit',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Rubik',
+        value: 'Rubik',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Source Sans 3',
+        value: 'Source Sans 3',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Space Grotesk',
+        value: 'Space Grotesk',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap',
+    },
+    {
+        label: 'Merriweather',
+        value: 'Merriweather',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap',
+    },
+    {
+        label: 'Playfair Display',
+        value: 'Playfair Display',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
+    },
+    {
+        label: 'Lora',
+        value: 'Lora',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'PT Serif',
+        value: 'PT Serif',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+    },
+    {
+        label: 'Caveat',
+        value: 'Caveat',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap',
+    },
+    {
+        label: 'Dancing Script',
+        value: 'Dancing Script',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap',
+    },
+    {
+        label: 'Cinzel',
+        value: 'Cinzel',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap',
+    },
+    {
+        label: 'Berkshire Swash',
+        value: 'Berkshire Swash',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap',
+    },
+    {
+        label: 'JetBrains Mono',
+        value: 'JetBrains Mono',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap',
+    },
+    {
+        label: 'Orbitron',
+        value: 'Orbitron',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap',
+    },
+    {
+        label: 'UnifrakturMaguntia',
+        value: 'UnifrakturMaguntia',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap',
+    },
+    {
+        label: 'Pirata One',
+        value: 'Pirata One',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Pirata+One&display=swap',
+    },
+    {
+        label: 'Press Start 2P',
+        value: 'Press Start 2P',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
+    },
+    {
+        label: 'Bungee',
+        value: 'Bungee',
+        googleUrl: 'https://fonts.googleapis.com/css2?family=Bungee&display=swap',
+    },
+];
 // ── Tailwind rounded classes per borderRadius token ───────────────────────────
 const CLX_RADIUS_MAP = {
     none: 'rounded-none',
@@ -194,13 +351,16 @@ function resolveContainerRadius(r) {
 // ── Default theme ─────────────────────────────────────────────────────────────
 const CLX_THEME_DEFAULTS = {
     primaryColor: 'indigo',
+    secondaryColor: 'slate',
     dangerColor: 'red',
     successColor: 'green',
     warningColor: 'amber',
     neutralColor: 'slate',
+    textColor: 'slate',
     borderRadius: 'md',
     defaultSize: 'md',
     defaultShape: 'rounded',
+    fontFamily: 'Roboto',
 };
 // ── Injection token ───────────────────────────────────────────────────────────
 const CLX_THEME_CONFIG = new InjectionToken('CLX_THEME_CONFIG', { factory: () => CLX_THEME_DEFAULTS });
@@ -212,7 +372,107 @@ function provideCodexlyTheme(config) {
     };
 }
+// ── Full Tailwind v4 palette (hex), all colors × all shades ──────────────────
+// Source of truth: official Tailwind CSS v4 color values.
+const CLX_COLOR_PALETTE = {
+    red: {
+        50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171',
+        500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a',
+    },
+    orange: {
+        50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c',
+        500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407',
+    },
+    amber: {
+        50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24',
+        500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03',
+    },
+    yellow: {
+        50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15',
+        500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006',
+    },
+    lime: {
+        50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635',
+        500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05',
+    },
+    green: {
+        50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80',
+        500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16',
+    },
+    emerald: {
+        50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399',
+        500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22',
+    },
+    teal: {
+        50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf',
+        500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e',
+    },
+    cyan: {
+        50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee',
+        500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344',
+    },
+    sky: {
+        50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8',
+        500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49',
+    },
+    blue: {
+        50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa',
+        500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554',
+    },
+    indigo: {
+        50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8',
+        500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b',
+    },
+    violet: {
+        50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa',
+        500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065',
+    },
+    purple: {
+        50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc',
+        500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764',
+    },
+    fuchsia: {
+        50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9',
+        500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e',
+    },
+    pink: {
+        50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6',
+        500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724',
+    },
+    rose: {
+        50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185',
+        500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519',
+    },
+    slate: {
+        50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8',
+        500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617',
+    },
+    gray: {
+        50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af',
+        500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712',
+    },
+    zinc: {
+        50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa',
+        500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b',
+    },
+    neutral: {
+        50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3',
+        500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a',
+    },
+    stone: {
+        50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e',
+        500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09',
+    },
+    white: { 500: '#ffffff' },
+};
+/** Resolve a hex value for any Tailwind color + shade, with a safe fallback. */
+function resolvePaletteHex(color, shade) {
+    const entry = CLX_COLOR_PALETTE[color] ?? CLX_COLOR_PALETTE.indigo;
+    return entry[shade] ?? entry[500] ?? CLX_COLOR_PALETTE.indigo[500];
+}
 const STORAGE_KEY = 'clx-theme-mode';
+const FONT_LINK_ID = 'clx-google-font';
 class ClxThemeService {
     _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     _initial = inject(CLX_THEME_CONFIG);
@@ -229,6 +489,12 @@ class ClxThemeService {
             return false;
         return this._sysDark();
     }, ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    /** Color to apply to clx-nav-group labels — falls back to neutralColor */
+    sidebarGroupColor = computed(() => this._config().sidebarGroupColor ?? this._config().neutralColor, ...(ngDevMode ? [{ debugName: "sidebarGroupColor" }] : /* istanbul ignore next */ []));
+    /** Color to apply to top-level clx-menu — falls back to primaryColor */
+    sidebarMenuColor = computed(() => this._config().sidebarMenuColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "sidebarMenuColor" }] : /* istanbul ignore next */ []));
+    /** Color to apply to clx-menu-item — falls back to primaryColor */
+    sidebarItemColor = computed(() => this._config().sidebarItemColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "sidebarItemColor" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             if (!this._isBrowser)
@@ -238,14 +504,15 @@ class ClxThemeService {
         effect(() => {
             if (!this._isBrowser)
                 return;
-            const primaryColor = this._config().primaryColor;
-            if (!primaryColor)
+            const cfg = this._config();
+            this._applyColorVar('--clx-primary', '--clx-primary-light', cfg.primaryColor);
+            this._applyColorVar('--clx-secondary', '--clx-secondary-light', cfg.secondaryColor);
+            this._applyTextColor(cfg.textColor, this.isDark());
+        });
+        effect(() => {
+            if (!this._isBrowser)
                 return;
-            const { color } = parseColorInput(primaryColor);
-            const hex500 = CLX_COLOR_HEX[color] ?? CLX_COLOR_HEX.indigo;
-            const hex100 = CLX_COLOR_HEX_100[color] ?? CLX_COLOR_HEX_100.indigo;
-            document.documentElement.style.setProperty('--clx-primary', hex500);
-            document.documentElement.style.setProperty('--clx-primary-light', hex100);
+            this._applyFont(this._config().fontFamily ?? 'Roboto');
         });
         if (this._isBrowser) {
             const mq = window.matchMedia('(prefers-color-scheme: dark)');
@@ -263,6 +530,42 @@ class ClxThemeService {
     toggle() {
         this.setMode(this.isDark() ? 'light' : 'dark');
     }
+    _applyColorVar(varName, lightVarName, input) {
+        if (!input)
+            return;
+        const { color, shade } = parseColorInput(input);
+        document.documentElement.style.setProperty(varName, resolvePaletteHex(color, shade));
+        if (lightVarName) {
+            document.documentElement.style.setProperty(lightVarName, resolvePaletteHex(color, 100));
+        }
+    }
+    _applyTextColor(input, dark) {
+        if (!input)
+            return;
+        const { color } = parseColorInput(input);
+        const shades = dark
+            ? { text: 100, label: 300, muted: 400, subtle: 500, faint: 600 }
+            : { text: 900, label: 600, muted: 500, subtle: 400, faint: 300 };
+        document.documentElement.style.setProperty('--clx-text', resolvePaletteHex(color, shades.text));
+        document.documentElement.style.setProperty('--clx-text-label', resolvePaletteHex(color, shades.label));
+        document.documentElement.style.setProperty('--clx-text-muted', resolvePaletteHex(color, shades.muted));
+        document.documentElement.style.setProperty('--clx-text-subtle', resolvePaletteHex(color, shades.subtle));
+        document.documentElement.style.setProperty('--clx-text-faint', resolvePaletteHex(color, shades.faint));
+    }
+    _applyFont(family) {
+        const option = CLX_FONT_CATALOG.find(f => f.value === family);
+        if (!option)
+            return;
+        let link = document.getElementById(FONT_LINK_ID);
+        if (!link) {
+            link = document.createElement('link');
+            link.id = FONT_LINK_ID;
+            link.rel = 'stylesheet';
+            document.head.appendChild(link);
+        }
+        link.href = option.googleUrl;
+        document.documentElement.style.setProperty('--clx-font-body', `'${family}', ui-sans-serif, system-ui, sans-serif`);
+    }
     _loadMode() {
         if (!this._isBrowser)
             return 'system';
@@ -690,7 +993,7 @@ const PRODUCT_TAG_VARIANT = {
     'hot': 'solid',
 };
-const BUTTON_BASE_CLASS = 'relative overflow-hidden inline-flex items-center justify-center font-medium select-none transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
+const BUTTON_BASE_CLASS = 'relative overflow-hidden inline-flex items-center justify-center font-medium select-none transition-[color,background-color,border-color,box-shadow] duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
 const BUTTON_SIZE_MAP = {
     xxs: 'text-xs px-1.5 py-0.5 gap-0.5',
     xs: 'text-xs px-2 py-1 gap-1',
@@ -1483,7 +1786,7 @@ class ClxProductComponent {
     _buttonSize = computed(() => this._sm() ? 'sm' : 'md', ...(ngDevMode ? [{ debugName: "_buttonSize" }] : /* istanbul ignore next */ []));
     _skeletonW = computed(() => this._sm() ? 'sm:w-32' : 'sm:w-44', ...(ngDevMode ? [{ debugName: "_skeletonW" }] : /* istanbul ignore next */ []));
     _skeletonH = computed(() => this._sm() ? '160px' : '200px', ...(ngDevMode ? [{ debugName: "_skeletonH" }] : /* istanbul ignore next */ []));
-    _cardClass = computed(() => `bg-clx-surface rounded-2xl shadow-sm transition-all duration-300 overflow-hidden group hover:shadow-xl hover:-translate-y-0.5 ${this._h() ? 'flex flex-col sm:flex-row' : 'flex flex-col'}`, ...(ngDevMode ? [{ debugName: "_cardClass" }] : /* istanbul ignore next */ []));
+    _cardClass = computed(() => `bg-clx-surface rounded-2xl shadow-sm transition-[box-shadow,transform] duration-300 overflow-hidden group hover:shadow-xl hover:-translate-y-0.5 ${this._h() ? 'flex flex-col sm:flex-row' : 'flex flex-col'}`, ...(ngDevMode ? [{ debugName: "_cardClass" }] : /* istanbul ignore next */ []));
     _imageContainerClass = computed(() => this._h()
         ? `relative shrink-0 w-full aspect-square sm:aspect-auto ${this._sm() ? 'sm:w-32' : 'sm:w-44'} overflow-hidden rounded-t-2xl sm:rounded-t-none sm:rounded-l-2xl`
         : 'relative w-full aspect-square overflow-hidden rounded-t-2xl', ...(ngDevMode ? [{ debugName: "_imageContainerClass" }] : /* istanbul ignore next */ []));
@@ -2044,7 +2347,7 @@ class ClxCarouselComponent {
           @for (dot of _dotItems(); track dot.idx) {
             <button
               type="button"
-              class="rounded-full transition-all duration-300 focus:outline-none cursor-pointer"
+              class="rounded-full transition-[width,background-color] duration-300 focus:outline-none cursor-pointer"
               [class]="dot.cls"
               (click)="goTo(dot.idx)"
               [attr.aria-label]="'Slide ' + (dot.idx + 1)">
@@ -2110,7 +2413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           @for (dot of _dotItems(); track dot.idx) {
             <button
               type="button"
-              class="rounded-full transition-all duration-300 focus:outline-none cursor-pointer"
+              class="rounded-full transition-[width,background-color] duration-300 focus:outline-none cursor-pointer"
               [class]="dot.cls"
               (click)="goTo(dot.idx)"
               [attr.aria-label]="'Slide ' + (dot.idx + 1)">
@@ -2332,7 +2635,7 @@ class ClxNumberComponent {
         const focus = this._disabled() ? '' : resolveColor(this._color()).focusWithin;
         const border = this._disabled() ? `${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED}` : CLX_BORDER_DEFAULT;
         const cursor = this._disabled() ? 'cursor-not-allowed' : '';
-        return `flex items-stretch ${size.container} bg-clx-surface ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${focus} ${cursor} overflow-hidden transition-all duration-200`;
+        return `flex items-stretch ${size.container} bg-clx-surface ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${focus} ${cursor} overflow-hidden transition-[border-color,box-shadow] duration-200`;
     }, ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
     /** Colored prefix icon cell — matches the input accent color */
     _prefixCellCls = computed(() => {
@@ -2635,7 +2938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 const CLX_LIST_CONTEXT = new InjectionToken('CLX_LIST_CONTEXT');
 // ── Variant maps ──────────────────────────────────────────────────────────────
 const LIST_VARIANT_SHAPE = {
-    bordered: 'bg-white rounded-2xl overflow-hidden',
+    bordered: 'bg-clx-surface rounded-2xl overflow-hidden border border-clx-border',
     flat: 'bg-transparent',
     flush: 'bg-transparent',
 };
@@ -2872,7 +3175,7 @@ class ClxProductDetailComponent {
     specsLeft(specs) { return specs.slice(0, Math.ceil(specs.length / 2)); }
     specsRight(specs) { return specs.slice(Math.ceil(specs.length / 2)); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductDetailComponent, isStandalone: true, selector: "clx-product-detail", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_carousel", first: true, predicate: ClxCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 xl:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-3\">\n        <div class=\"relative\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track img) {\n              <ng-template clxSlide>\n                <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-cover\" loading=\"lazy\" />\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track img; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-all\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-5\">\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-2\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-xs text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ p.product_name }}</h1>\n          @if (v?.description) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ v!.description }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div class=\"py-4\">\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-4xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-lg text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n          @if (v && !v.in_stock) {\n            <p class=\"text-sm text-rose-500 font-medium mt-1\">Out of stock</p>\n          }\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"asColor(opt.value)\"\n                        shape=\"circle\" size=\"xs\" [iconOnly]=\"true\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        [clxTooltip]=\"opt.value\"\n                        [clxTooltipColor]=\"asColor(opt.value)\"\n                        clxTooltipPosition=\"top\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                </button>\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"clxColor()\" size=\"sm\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                  {{ opt.value }}\n                </button>\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\">Buy Now</button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\">Add to Cart</button>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n      <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n      <ng-template [clxTabPanel]=\"'general'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsLeft(p.product_specs); track spec.id) {\n              <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsRight(p.product_specs); track spec.id) {\n              <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n      <ng-template [clxTabPanel]=\"'specs'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsLeft(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsRight(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n      <ng-template [clxTabPanel]=\"'description'\">\n        <div class=\"space-y-5 max-w-3xl\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n\n    </clx-tabs>\n\n    <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <div class=\"pb-1 space-y-1\">\n            <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n            <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n          </div>\n        </div>\n        <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n        <div class=\"pt-2 space-y-2\">\n          <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n            Report abuse\n          </button>\n        </div>\n      </div>\n\n      <div class=\"lg:col-span-2 space-y-4\">\n        @for (review of p.reviews ?? []; track review.id) {\n          <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n            <div class=\"flex items-center gap-3 px-4 py-3\">\n              <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-clx-text-muted\">\n                  {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                </span>\n              </div>\n              <div class=\"flex-1 min-w-0\">\n                <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n              </div>\n              @if (review.is_verified) {\n                <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n              }\n            </div>\n            <div class=\"px-4 pb-4 space-y-2\">\n              <div class=\"flex items-center gap-2\">\n                <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                @if (review.title) {\n                  <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n\n  </div>\n}\n", 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: "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: ClxButtonGroupComponent, selector: "clx-button-group", inputs: ["label", "shape", "attached", "orientation"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "component", type: ClxCarouselComponent, selector: "clx-carousel", inputs: ["clxColor", "autoPlay", "interval", "loop", "aspectRatio", "transparent"] }, { kind: "directive", type: ClxCarouselDirective, selector: "[clxSlide]" }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }, { kind: "directive", type: ClxTabDirective, selector: "[clxTabPanel]", inputs: ["clxTabPanel"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxListComponent, selector: "clx-list", inputs: ["color", "variant", "size", "numbered"] }, { kind: "component", type: ClxListItemComponent, selector: "clx-list-item", inputs: ["label", "sublabel", "icon", "meta", "metaColor", "disabled"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductDetailComponent, isStandalone: true, selector: "clx-product-detail", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_carousel", first: true, predicate: ClxCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 xl:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-3\">\n        <div class=\"relative\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track img) {\n              <ng-template clxSlide>\n                <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-cover\" loading=\"lazy\" />\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track img; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-[border-color,opacity]\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-5\">\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-2\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-xs text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ p.product_name }}</h1>\n          @if (v?.description) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ v!.description }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div class=\"py-4\">\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-4xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-lg text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n          @if (v && !v.in_stock) {\n            <p class=\"text-sm text-rose-500 font-medium mt-1\">Out of stock</p>\n          }\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"asColor(opt.value)\"\n                        shape=\"circle\" size=\"xs\" [iconOnly]=\"true\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        [clxTooltip]=\"opt.value\"\n                        [clxTooltipColor]=\"asColor(opt.value)\"\n                        clxTooltipPosition=\"top\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                </button>\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"clxColor()\" size=\"sm\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                  {{ opt.value }}\n                </button>\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\">Buy Now</button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\">Add to Cart</button>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n      <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n      <ng-template [clxTabPanel]=\"'general'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsLeft(p.product_specs); track spec.id) {\n              <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsRight(p.product_specs); track spec.id) {\n              <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n      <ng-template [clxTabPanel]=\"'specs'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsLeft(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsRight(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n      <ng-template [clxTabPanel]=\"'description'\">\n        <div class=\"space-y-5 max-w-3xl\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n\n    </clx-tabs>\n\n    <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <div class=\"pb-1 space-y-1\">\n            <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n            <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n          </div>\n        </div>\n        <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n        <div class=\"pt-2 space-y-2\">\n          <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n            Report abuse\n          </button>\n        </div>\n      </div>\n\n      <div class=\"lg:col-span-2 space-y-4\">\n        @for (review of p.reviews ?? []; track review.id) {\n          <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n            <div class=\"flex items-center gap-3 px-4 py-3\">\n              <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-clx-text-muted\">\n                  {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                </span>\n              </div>\n              <div class=\"flex-1 min-w-0\">\n                <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n              </div>\n              @if (review.is_verified) {\n                <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n              }\n            </div>\n            <div class=\"px-4 pb-4 space-y-2\">\n              <div class=\"flex items-center gap-2\">\n                <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                @if (review.title) {\n                  <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n\n  </div>\n}\n", 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: "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: ClxButtonGroupComponent, selector: "clx-button-group", inputs: ["label", "shape", "attached", "orientation"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "component", type: ClxCarouselComponent, selector: "clx-carousel", inputs: ["clxColor", "autoPlay", "interval", "loop", "aspectRatio", "transparent"] }, { kind: "directive", type: ClxCarouselDirective, selector: "[clxSlide]" }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }, { kind: "directive", type: ClxTabDirective, selector: "[clxTabPanel]", inputs: ["clxTabPanel"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxListComponent, selector: "clx-list", inputs: ["color", "variant", "size", "numbered"] }, { kind: "component", type: ClxListItemComponent, selector: "clx-list-item", inputs: ["label", "sublabel", "icon", "meta", "metaColor", "disabled"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductDetailComponent, decorators: [{
             type: Component,
@@ -2894,7 +3197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         ClxTooltipDirective,
                         ClxListComponent,
                         ClxListItemComponent,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 xl:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-3\">\n        <div class=\"relative\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track img) {\n              <ng-template clxSlide>\n                <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-cover\" loading=\"lazy\" />\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track img; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-all\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-5\">\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-2\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-xs text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ p.product_name }}</h1>\n          @if (v?.description) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ v!.description }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div class=\"py-4\">\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-4xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-lg text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n          @if (v && !v.in_stock) {\n            <p class=\"text-sm text-rose-500 font-medium mt-1\">Out of stock</p>\n          }\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"asColor(opt.value)\"\n                        shape=\"circle\" size=\"xs\" [iconOnly]=\"true\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        [clxTooltip]=\"opt.value\"\n                        [clxTooltipColor]=\"asColor(opt.value)\"\n                        clxTooltipPosition=\"top\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                </button>\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"clxColor()\" size=\"sm\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                  {{ opt.value }}\n                </button>\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\">Buy Now</button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\">Add to Cart</button>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n      <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n      <ng-template [clxTabPanel]=\"'general'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsLeft(p.product_specs); track spec.id) {\n              <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsRight(p.product_specs); track spec.id) {\n              <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n      <ng-template [clxTabPanel]=\"'specs'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsLeft(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsRight(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n      <ng-template [clxTabPanel]=\"'description'\">\n        <div class=\"space-y-5 max-w-3xl\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n\n    </clx-tabs>\n\n    <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <div class=\"pb-1 space-y-1\">\n            <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n            <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n          </div>\n        </div>\n        <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n        <div class=\"pt-2 space-y-2\">\n          <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n            Report abuse\n          </button>\n        </div>\n      </div>\n\n      <div class=\"lg:col-span-2 space-y-4\">\n        @for (review of p.reviews ?? []; track review.id) {\n          <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n            <div class=\"flex items-center gap-3 px-4 py-3\">\n              <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-clx-text-muted\">\n                  {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                </span>\n              </div>\n              <div class=\"flex-1 min-w-0\">\n                <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n              </div>\n              @if (review.is_verified) {\n                <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n              }\n            </div>\n            <div class=\"px-4 pb-4 space-y-2\">\n              <div class=\"flex items-center gap-2\">\n                <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                @if (review.title) {\n                  <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n\n  </div>\n}\n" }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 xl:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-3\">\n        <div class=\"relative\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track img) {\n              <ng-template clxSlide>\n                <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-cover\" loading=\"lazy\" />\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track img; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-[border-color,opacity]\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-5\">\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-2\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-xs text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ p.product_name }}</h1>\n          @if (v?.description) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ v!.description }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div class=\"py-4\">\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-4xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-lg text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n          @if (v && !v.in_stock) {\n            <p class=\"text-sm text-rose-500 font-medium mt-1\">Out of stock</p>\n          }\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"asColor(opt.value)\"\n                        shape=\"circle\" size=\"xs\" [iconOnly]=\"true\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        [clxTooltip]=\"opt.value\"\n                        [clxTooltipColor]=\"asColor(opt.value)\"\n                        clxTooltipPosition=\"top\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                </button>\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"clxColor()\" size=\"sm\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                  {{ opt.value }}\n                </button>\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\">Buy Now</button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\">Add to Cart</button>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n      <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n      <ng-template [clxTabPanel]=\"'general'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsLeft(p.product_specs); track spec.id) {\n              <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsRight(p.product_specs); track spec.id) {\n              <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n      <ng-template [clxTabPanel]=\"'specs'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsLeft(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsRight(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n      <ng-template [clxTabPanel]=\"'description'\">\n        <div class=\"space-y-5 max-w-3xl\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n\n    </clx-tabs>\n\n    <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <div class=\"pb-1 space-y-1\">\n            <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n            <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n          </div>\n        </div>\n        <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n        <div class=\"pt-2 space-y-2\">\n          <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n            Report abuse\n          </button>\n        </div>\n      </div>\n\n      <div class=\"lg:col-span-2 space-y-4\">\n        @for (review of p.reviews ?? []; track review.id) {\n          <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n            <div class=\"flex items-center gap-3 px-4 py-3\">\n              <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-clx-text-muted\">\n                  {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                </span>\n              </div>\n              <div class=\"flex-1 min-w-0\">\n                <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n              </div>\n              @if (review.is_verified) {\n                <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n              }\n            </div>\n            <div class=\"px-4 pb-4 space-y-2\">\n              <div class=\"flex items-center gap-2\">\n                <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                @if (review.title) {\n                  <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], _carousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClxCarouselComponent), { isSignal: true }] }] } });
 const SIZE_MAP = {
@@ -3145,7 +3448,7 @@ class ClxCheckboxComponent {
     _onTouched = () => { };
     _sizeConfig = computed(() => CHECKBOX_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _boxClass = computed(() => {
-        const base = `${this._sizeConfig().box} flex items-center justify-center rounded border-2 transition-all duration-200`;
+        const base = `${this._sizeConfig().box} flex items-center justify-center rounded border-2 transition-colors duration-200`;
         if (this._disabled()) {
             return this._checked()
                 ? `${base} border-clx-border bg-clx-border text-white`
@@ -3318,7 +3621,7 @@ class ClxSliderComponent {
     _isInvalid = computed(() => this._wasTouched() && (this._ngControl?.control?.invalid ?? false), ...(ngDevMode ? [{ debugName: "_isInvalid" }] : /* istanbul ignore next */ []));
     _trackClass = computed(() => 'absolute inset-x-0 top-1/2 -translate-y-1/2 rounded-full bg-clx-border overflow-visible', ...(ngDevMode ? [{ debugName: "_trackClass" }] : /* istanbul ignore next */ []));
     _thumbClass = computed(() => {
-        const base = 'absolute top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full bg-clx-surface border-[3px] shadow-md transition-all duration-75 pointer-events-none z-10';
+        const base = 'absolute top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full bg-clx-surface border-[3px] shadow-md transition-[border-color,box-shadow,transform] duration-75 pointer-events-none z-10';
         const t = this._colorTokens();
         const border = this._disabled() ? 'border-clx-border' : t.border;
         const ring = this._isFocused() && !this._disabled()
@@ -3386,7 +3689,7 @@ class ClxSliderComponent {
         <!-- Filled track -->
         <div
-          class="absolute left-0 top-0 h-full rounded-full transition-all duration-75"
+          class="absolute left-0 top-0 h-full rounded-full transition-[width,background-color] duration-75"
           [class]="_disabled() ? 'bg-clx-border' : _colorTokens().bg"
           [style.width]="_pct() + '%'">
         </div>
@@ -3485,7 +3788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <!-- Filled track -->
         <div
-          class="absolute left-0 top-0 h-full rounded-full transition-all duration-75"
+          class="absolute left-0 top-0 h-full rounded-full transition-[width,background-color] duration-75"
           [class]="_disabled() ? 'bg-clx-border' : _colorTokens().bg"
           [style.width]="_pct() + '%'">
         </div>
@@ -3671,7 +3974,7 @@ class ClxRadioComponent {
     _size = computed(() => this.size() ?? this._group?.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => RADIO_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _ringClass = computed(() => {
-        const base = `${this._sizeConfig().ring} rounded-full border-2 flex items-center justify-center transition-all duration-200`;
+        const base = `${this._sizeConfig().ring} rounded-full border-2 flex items-center justify-center transition-colors duration-200`;
         if (this._isDisabled()) {
             return this._checked()
                 ? `${base} border-clx-border bg-clx-border`
@@ -3685,7 +3988,7 @@ class ClxRadioComponent {
         return `${base} ${t.bgSubtle} ${t.borderLight}`;
     }, ...(ngDevMode ? [{ debugName: "_ringClass" }] : /* istanbul ignore next */ []));
     _dotClass = computed(() => {
-        const base = `${this._sizeConfig().dot} rounded-full transition-all duration-200`;
+        const base = `${this._sizeConfig().dot} rounded-full transition-[transform,color,background-color] duration-200`;
         if (!this._checked())
             return `${base} scale-0`;
         if (this._isDisabled())
@@ -3841,7 +4144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 const INPUT_STATUS_MAP = {
     default: {
-        border: 'border-slate-200',
+        border: 'border-clx-border',
         ring: '',
         msgCls: '',
         iconName: '',
@@ -3960,7 +4263,7 @@ class ClxInputComponent {
             : this.status() !== 'default'
                 ? this._statusCfg().ring.replace(/focus:/g, 'focus-within:')
                 : resolveColor(this._color()).focusWithin;
-        return `relative flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${focusCls} overflow-hidden transition-all duration-200`;
+        return `relative flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${focusCls} overflow-hidden transition-[border-color,box-shadow] duration-200`;
     }, ...(ngDevMode ? [{ debugName: "_wrapperClass" }] : /* istanbul ignore next */ []));
     _inputClass = computed(() => {
         const size = this._sizeConfig();
@@ -3978,7 +4281,7 @@ class ClxInputComponent {
         const hasSuffix = this.type() === 'password' || this.status() !== 'default' || !!this.suffixIcon();
         const pl = size.padDefaultL;
         const pr = hasSuffix ? size.padRight : size.padDefaultR;
-        const base = `w-full ${resolveRadius(this._themeSvc.config().borderRadius)} border ${size.input} ${pl} ${pr} outline-none transition-all duration-200`;
+        const base = `w-full ${resolveRadius(this._themeSvc.config().borderRadius)} border ${size.input} ${pl} ${pr} outline-none transition-[border-color,box-shadow] duration-200`;
         if (this._disabled()) {
             return `${base} ${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED} cursor-not-allowed ${CLX_TEXT_DISABLED} ${CLX_PLACEHOLDER}`;
         }
@@ -4254,11 +4557,18 @@ class ClxSelectComponent {
     _activeColor = computed(() => this.activeColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
     _el = inject((ElementRef));
     _sso = inject(ScrollStrategyOptions);
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _loadedFonts = new Set();
     _scrollStrategy = this._sso.reposition();
     constructor() {
         this._searchQuery = toSignal(this._searchControl.valueChanges.pipe(startWith(''), map(v => v ?? '')), { initialValue: '' });
         if (this._ngControl)
             this._ngControl.valueAccessor = this;
+        effect(() => {
+            const family = this._displayFontFamily();
+            if (family)
+                this._loadPreviewFont(family);
+        });
         // Async autocomplete: debounce + switchMap sobre el search control
         this._searchControl.valueChanges.pipe(debounceTime(this.debounceMs()), distinctUntilChanged(), switchMap(query => {
             const q = query ?? '';
@@ -4306,12 +4616,16 @@ 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 */ []));
     _triggerClass = computed(() => {
         const s = this._sizeConfig();
-        const base = `relative flex items-center ${resolveRadius(this._themeSvc.config().borderRadius)} border transition-all duration-200 outline-none w-full overflow-hidden`;
+        const base = `relative flex items-center ${resolveRadius(this._themeSvc.config().borderRadius)} border transition-[border-color,box-shadow] duration-200 outline-none w-full overflow-hidden`;
         if (this._disabled()) {
             return `${base} ${s.minH} ${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED} cursor-not-allowed opacity-60`;
         }
@@ -4356,6 +4670,26 @@ class ClxSelectComponent {
         if (!this.async())
             this._searchControl.setValue('', { emitEvent: false });
         this._isOpen.set(true);
+        for (const opt of this.options()) {
+            if (opt.previewFontFamily)
+                this._loadPreviewFont(opt.previewFontFamily);
+        }
+    }
+    _loadPreviewFont(family) {
+        if (!this._isBrowser || this._loadedFonts.has(family))
+            return;
+        const option = CLX_FONT_CATALOG.find(f => f.value === family);
+        if (!option)
+            return;
+        this._loadedFonts.add(family);
+        const id = `clx-preview-font-${family.replace(/\s+/g, '-').toLowerCase()}`;
+        if (document.getElementById(id))
+            return;
+        const link = document.createElement('link');
+        link.id = id;
+        link.rel = 'stylesheet';
+        link.href = option.googleUrl;
+        document.head.appendChild(link);
     }
     _closePanel() {
         this._isOpen.set(false);
@@ -4465,7 +4799,7 @@ class ClxSelectComponent {
       <!-- Single mode: display value -->
       } @else {
-        <span [class]="_singleDisplayClass()">{{ _displayValue() }}</span>
+        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
       <!-- Right controls: clear + chevron -->
@@ -4545,7 +4879,7 @@ class ClxSelectComponent {
                 [disabled]="opt.disabled ?? false"
                 (mousedown)="$event.preventDefault()"
                 (click)="_selectOption(opt)">
-                <span class="flex-1 text-left truncate">{{ opt.label }}</span>
+                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
                 @if (_isSelected(opt.value)) {
                   <span clx-icon name="check" size="xs" class="shrink-0"></span>
                 }
@@ -4612,7 +4946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <!-- Single mode: display value -->
       } @else {
-        <span [class]="_singleDisplayClass()">{{ _displayValue() }}</span>
+        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
       <!-- Right controls: clear + chevron -->
@@ -4692,7 +5026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 [disabled]="opt.disabled ?? false"
                 (mousedown)="$event.preventDefault()"
                 (click)="_selectOption(opt)">
-                <span class="flex-1 text-left truncate">{{ opt.label }}</span>
+                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
                 @if (_isSelected(opt.value)) {
                   <span clx-icon name="check" size="xs" class="shrink-0"></span>
                 }
@@ -5137,6 +5471,7 @@ class ClxAlertComponent {
     _resolve = inject(CLX_ALERT_RESOLVE);
     _animate = inject(ClxAnimateService);
     _el = inject((ElementRef));
+    _themeSvc = inject(ClxThemeService);
     _zone;
     constructor() {
         const zone = inject(NgZone, { optional: true });
@@ -5144,17 +5479,36 @@ class ClxAlertComponent {
     }
     // ─── Resolved options ─────────────────────────────────────────────────────
     get _type() { return this._opts.type ?? 'info'; }
+    get _isConfirm() { return this._type === 'confirm'; }
     _icon = signal(ALERT_ICON_MAP[this._type], ...(ngDevMode ? [{ debugName: "_icon" }] : /* istanbul ignore next */ []));
-    _iconBg = signal(ALERT_ICON_BG_MAP[this._type], ...(ngDevMode ? [{ debugName: "_iconBg" }] : /* istanbul ignore next */ []));
-    _iconColor = signal(ALERT_ICON_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
-    _progressColor = signal(ALERT_PROGRESS_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _title = signal(this._opts.title ?? '', ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
     _message = signal(this._opts.message ?? '', ...(ngDevMode ? [{ debugName: "_message" }] : /* istanbul ignore next */ []));
     _showCancel = signal(this._opts.showCancelButton ?? this._opts.type === 'confirm', ...(ngDevMode ? [{ debugName: "_showCancel" }] : /* istanbul ignore next */ []));
+    _iconBg = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_ICON_BG_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).bgSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_iconBg" }] : /* istanbul ignore next */ []));
+    _iconColor = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_ICON_COLOR_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).textSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
+    _progressColor = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_PROGRESS_COLOR_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).bg;
+    }, ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _confirmText = signal(this._opts.confirmButton?.text ?? 'Aceptar', ...(ngDevMode ? [{ debugName: "_confirmText" }] : /* istanbul ignore next */ []));
-    _confirmColor = signal(this._opts.confirmButton?.color ?? ALERT_CONFIRM_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
+    _confirmColor = computed(() => {
+        if (this._opts.confirmButton?.color)
+            return this._opts.confirmButton.color;
+        if (this._isConfirm)
+            return this._themeSvc.config().primaryColor;
+        return ALERT_CONFIRM_COLOR_MAP[this._type];
+    }, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
     _cancelText = signal(this._opts.cancelButton?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
-    _cancelColor = signal(this._opts.cancelButton?.color ?? 'slate', ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
+    _cancelColor = computed(() => this._opts.cancelButton?.color ?? this._themeSvc.config().secondaryColor, ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
     _cancelVariant = signal(this._opts.cancelButton?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
     // ─── Timer state ─────────────────────────────────────────────────────────
     _timerTotal = signal(this._opts.timer ?? 0, ...(ngDevMode ? [{ debugName: "_timerTotal" }] : /* istanbul ignore next */ []));
@@ -5258,7 +5612,6 @@ class ClxAlertComponent {
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="dismiss()"
           >
             {{ _cancelText() }}
@@ -5270,7 +5623,6 @@ class ClxAlertComponent {
           [color]="_confirmColor()"
           variant="solid"
           size="md"
-          shape="pill"
           (click)="confirm()"
         >
           {{ _confirmText() }}
@@ -5330,7 +5682,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="dismiss()"
           >
             {{ _cancelText() }}
@@ -5342,7 +5693,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           [color]="_confirmColor()"
           variant="solid"
           size="md"
-          shape="pill"
           (click)="confirm()"
         >
           {{ _confirmText() }}
@@ -5371,7 +5721,7 @@ const MODAL_SIZE_MAP = {
     xl: 'w-full',
     full: 'w-full h-screen rounded-none',
 };
-const MODAL_CONTAINER_CLASS = 'flex flex-col bg-white rounded-2xl shadow-2xl overflow-hidden';
+const MODAL_CONTAINER_CLASS = 'flex flex-col bg-clx-surface rounded-2xl shadow-2xl overflow-hidden';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const CLX_MODAL_DATA = new InjectionToken('CLX_MODAL_DATA');
 const CLX_MODAL_SIZE = new InjectionToken('CLX_MODAL_SIZE');
@@ -5394,7 +5744,7 @@ const DRAWER_WIDTH_MAP = {
     md: '420px',
     lg: '560px',
 };
-const DRAWER_CONTAINER_CLASS = 'flex flex-col bg-white shadow-2xl overflow-hidden h-screen';
+const DRAWER_CONTAINER_CLASS = 'flex flex-col bg-clx-surface shadow-2xl overflow-hidden h-screen';
 const CLX_DRAWER_SIZE = new InjectionToken('CLX_DRAWER_SIZE');
 class ClxDrawerComponent {
@@ -5448,7 +5798,7 @@ class ClxDrawerComponent {
     </div>
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0 bg-clx-surface-2">
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
       @if (_hasBuiltInButtons()) {
         @if (showCancelButton()) {
           <button
@@ -5456,7 +5806,6 @@ class ClxDrawerComponent {
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
           </button>
@@ -5466,7 +5815,6 @@ class ClxDrawerComponent {
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
           size="md"
-          shape="pill"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
         </button>
@@ -5509,7 +5857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     </div>
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0 bg-clx-surface-2">
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
       @if (_hasBuiltInButtons()) {
         @if (showCancelButton()) {
           <button
@@ -5517,7 +5865,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
           </button>
@@ -5527,7 +5874,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
           size="md"
-          shape="pill"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
         </button>
@@ -5569,7 +5915,7 @@ class ClxModalComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxModalComponent, isStandalone: true, selector: "clx-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
     <!-- Header -->
     <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0 text-clx-text-label">
         <ng-content select="[clx-modal-title]" />
       </div>
       @if (showClose()) {
@@ -5593,7 +5939,7 @@ class ClxModalComponent {
     </div>
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0 bg-clx-surface-2">
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
       @if (_hasBuiltInButtons()) {
         @if (showCancelButton()) {
           <button
@@ -5601,7 +5947,6 @@ class ClxModalComponent {
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
           </button>
@@ -5611,7 +5956,6 @@ class ClxModalComponent {
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
           size="md"
-          shape="pill"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
         </button>
@@ -5630,7 +5974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     template: `
     <!-- Header -->
     <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0 text-clx-text-label">
         <ng-content select="[clx-modal-title]" />
       </div>
       @if (showClose()) {
@@ -5654,7 +5998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     </div>
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0 bg-clx-surface-2">
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
       @if (_hasBuiltInButtons()) {
         @if (showCancelButton()) {
           <button
@@ -5662,7 +6006,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
-            shape="pill"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
           </button>
@@ -5672,7 +6015,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
           size="md"
-          shape="pill"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
         </button>
@@ -7401,7 +7743,7 @@ class ClxColorPickerComponent {
     }, ...(ngDevMode ? [{ debugName: "_displayClass" }] : /* istanbul ignore next */ []));
     _triggerClass = computed(() => {
         const s = this._sizeConfig();
-        const base = `relative flex items-center ${resolveRadius(this._themeSvc.config().borderRadius)} border transition-all duration-200 outline-none w-full`;
+        const base = `relative flex items-center ${resolveRadius(this._themeSvc.config().borderRadius)} border transition-[border-color,box-shadow] duration-200 outline-none w-full`;
         if (this._disabled()) {
             return `${base} ${s.minH} ${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED} cursor-not-allowed opacity-60`;
         }
@@ -7714,7 +8056,7 @@ class ClxColorPickerComponent {
                 @for (swatch of presets(); track swatch) {
                   <button
                     type="button"
-                    class="w-6 h-6 rounded border border-black/10 transition-all duration-150 hover:scale-110 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-400"
+                    class="w-6 h-6 rounded border border-black/10 transition-[transform,box-shadow] duration-150 hover:scale-110 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-400"
                     [style.background-color]="swatch"
                     [title]="swatch"
                     (click)="_selectPreset(swatch)">
@@ -7881,7 +8223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 @for (swatch of presets(); track swatch) {
                   <button
                     type="button"
-                    class="w-6 h-6 rounded border border-black/10 transition-all duration-150 hover:scale-110 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-400"
+                    class="w-6 h-6 rounded border border-black/10 transition-[transform,box-shadow] duration-150 hover:scale-110 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-400"
                     [style.background-color]="swatch"
                     [title]="swatch"
                     (click)="_selectPreset(swatch)">
@@ -8003,7 +8345,7 @@ class ClxDatepickerComponent {
         const focus = resolveColor(this._color()).focus;
         const border = this._disabled() ? `${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED}` : `${status.border} focus:outline-none ${focus}`;
         const cursor = this._disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';
-        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
+        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${cursor} overflow-hidden transition-[border-color,box-shadow] duration-200 select-none`;
     }, ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
     _displayClass = computed(() => {
         const hasValue = !!this._value();
@@ -8421,7 +8763,7 @@ class ClxTimepickerComponent {
         const focus = resolveColor(this._color()).focus;
         const border = this._disabled() ? `${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED}` : `${status.border} focus:outline-none ${focus}`;
         const cursor = this._disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';
-        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
+        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${cursor} overflow-hidden transition-[border-color,box-shadow] duration-200 select-none`;
     }, ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
     _displayClass = computed(() => {
         const hasValue = !!this._value();
@@ -8802,7 +9144,7 @@ class ClxDateRangePickerComponent {
         const focus = resolveColor(this._color()).focus;
         const border = this._disabled() ? 'border-gray-200 bg-gray-50' : `${status.border} focus:outline-none ${focus}`;
         const cursor = this._disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';
-        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
+        return `relative flex items-stretch ${size.trigger} ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${cursor} overflow-hidden transition-[border-color,box-shadow] duration-200 select-none`;
     }, ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
     _displayClass = computed(() => {
         const color = this._disabled() ? 'text-clx-text-faint' : this._hasValue() ? 'text-clx-text-label' : 'text-clx-text-faint';
@@ -9662,7 +10004,7 @@ class ClxEditorComponent {
         const focus = this.status() !== 'default'
             ? statusCfg.ring.replace(/focus:/g, 'focus-within:')
             : resolveColor(this._color()).focusWithin;
-        return `${r} border ${statusCfg.border} ${focus} overflow-hidden bg-clx-surface transition-all duration-200`;
+        return `${r} border ${statusCfg.border} ${focus} overflow-hidden bg-clx-surface transition-[border-color,box-shadow] duration-200`;
     }, ...(ngDevMode ? [{ debugName: "_shellClass" }] : /* istanbul ignore next */ []));
     _toolbarClass = computed(() => `flex flex-wrap items-center gap-1 ${this._sizeCfg().toolbar} border-b border-clx-border-soft bg-clx-surface`, ...(ngDevMode ? [{ debugName: "_toolbarClass" }] : /* istanbul ignore next */ []));
     _bodyClass = computed(() => {
@@ -10302,11 +10644,11 @@ class ClxSwitchComponent {
     _onTouched = () => { };
     _sizeConfig = computed(() => SWITCH_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _trackClass = computed(() => {
-        const base = `${this._sizeConfig().track} relative rounded-full transition-all duration-200 flex-shrink-0`;
+        const base = `${this._sizeConfig().track} relative rounded-full transition-colors duration-200 flex-shrink-0`;
         return `${base} ${this._checked() ? resolveColor(this._color()).bg : 'bg-gray-300'}`;
     }, ...(ngDevMode ? [{ debugName: "_trackClass" }] : /* istanbul ignore next */ []));
     _thumbClass = computed(() => {
-        const base = `${this._sizeConfig().thumb} absolute top-[2px] left-[2px] bg-clx-surface rounded-full shadow-sm transition-all duration-200`;
+        const base = `${this._sizeConfig().thumb} absolute top-[2px] left-[2px] bg-clx-surface rounded-full shadow-sm transition-transform duration-200`;
         return this._checked() ? `${base} ${this._sizeConfig().translate}` : base;
     }, ...(ngDevMode ? [{ debugName: "_thumbClass" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => `${this._sizeConfig().label} text-clx-text-label leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
@@ -10488,13 +10830,13 @@ class ClxTextareaComponent {
     _wrapperClass = computed(() => {
         const statusCfg = this._statusCfg();
         if (this._disabled()) {
-            return `flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border ${CLX_BORDER_DISABLED} overflow-hidden transition-all duration-200`;
+            return `flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border ${CLX_BORDER_DISABLED} overflow-hidden transition-[border-color,box-shadow] duration-200`;
         }
         const focusCls = this.status() !== 'default'
             ? statusCfg.ring.replace(/focus:/g, 'focus-within:')
             : resolveColor(this._color()).focusWithin;
         const border = statusCfg.border;
-        return `flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${focusCls} overflow-hidden transition-all duration-200`;
+        return `flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border ${border} ${focusCls} overflow-hidden transition-[border-color,box-shadow] duration-200`;
     }, ...(ngDevMode ? [{ debugName: "_wrapperClass" }] : /* istanbul ignore next */ []));
     /** Prefix icon cell — flex column, full height of the wrapper */
     _prefixCellCls = computed(() => {
@@ -10728,7 +11070,7 @@ class ClxUploadComponent {
     _zoneClass = computed(() => {
         const base = [
             'flex flex-col items-center justify-center text-center',
-            `w-full ${resolveContainerRadius(this._themeSvc.config().borderRadius)} border-2 border-dashed transition-all duration-200`,
+            `w-full ${resolveContainerRadius(this._themeSvc.config().borderRadius)} border-2 border-dashed transition-colors duration-200`,
             this._sizeConfig().zone,
         ].join(' ');
         const t = resolveColor(this._color());
@@ -11209,7 +11551,7 @@ class ClxWizardComponent {
     }, ...(ngDevMode ? [{ debugName: "_rootClass" }] : /* istanbul ignore next */ []));
     // ── Circle (vertical) ─────────────────────────────────────────────────────
     _circleClass(i) {
-        const base = 'relative z-10 flex items-center justify-center w-9 h-9 rounded-full transition-all duration-200 shrink-0 focus:outline-none';
+        const base = 'relative z-10 flex items-center justify-center w-9 h-9 rounded-full transition-colors duration-200 shrink-0 focus:outline-none';
         const status = this._stepStatus(i);
         const color = this._color();
         const ptr = !this._isTabDisabled(i) ? 'cursor-pointer' : 'cursor-default';
@@ -11693,12 +12035,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 // ── Item geometry ──────────────────────────────────────────────────────────────
-const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium transition-colors duration-150 cursor-pointer select-none';
+const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium cursor-pointer select-none';
 const NAV_ITEM_L1 = 'px-6 py-3';
 const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
 const NAV_ITEM_IDLE = 'text-clx-text-subtle';
 // ── Children container ─────────────────────────────────────────────────────────
-const NAV_CHILDREN_WRAPPER = 'grid transition-all duration-300 ease-in-out';
+const NAV_CHILDREN_WRAPPER = 'grid transition-[grid-template-rows] duration-300 ease-in-out';
 const NAV_CHILDREN_INNER = 'overflow-hidden';
 const NAV_CHILDREN_LIST = 'ml-6 py-1 space-y-0.5';
@@ -11713,9 +12055,7 @@ class ClxMenuItemComponent {
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
     routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
     itemClick = output();
-    _inheritedColor = signal(null, ...(ngDevMode ? [{ debugName: "_inheritedColor" }] : /* istanbul ignore next */ []));
-    _resolvedColor = computed(() => this._inheritedColor() ?? this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
-    inheritColor(c) { this._inheritedColor.set(c); }
+    _resolvedColor = computed(() => this.color() ?? this._themeSvc.sidebarItemColor(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
     _geom = computed(() => {
         if (this.collapsed())
             return 'w-full py-3 px-0 justify-center';
@@ -11723,8 +12063,8 @@ class ClxMenuItemComponent {
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => resolveColor(this._resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
-        const t = resolveColor(this._resolvedColor());
-        return `${NAV_ITEM_BASE} ${this._geom()} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
+        const hover = resolveColor(this._resolvedColor()).hoverBgMuted;
+        return `${NAV_ITEM_BASE} ${this._geom()} ${hover}`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolvedColor());
@@ -11744,10 +12084,10 @@ class ClxMenuItemComponent {
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-clx-text-subtle'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </a>
     } @else {
@@ -11757,10 +12097,10 @@ class ClxMenuItemComponent {
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </button>
     }
@@ -11782,10 +12122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-clx-text-subtle'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </a>
     } @else {
@@ -11795,10 +12135,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </button>
     }
@@ -11814,14 +12154,13 @@ class ClxMenuComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.sidebarMenuColor(), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
     routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
     _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
     _rla;
-    _childItems;
     _destroyRef = inject(DestroyRef);
     constructor() {
         effect(() => { if (this.active())
@@ -11849,26 +12188,16 @@ class ClxMenuComponent {
                 return `${base} ${t.textSubtle} font-semibold`;
             return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
         }
-        return `${base} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
+        return `${base} ${t.hoverBgMuted}`;
     }
     NAV_CHILDREN_WRAPPER = NAV_CHILDREN_WRAPPER;
     NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;
     NAV_CHILDREN_LIST = NAV_CHILDREN_LIST;
-    ngAfterContentInit() {
-        this._syncChildren();
-        this._childItems.changes
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => this._syncChildren());
-    }
-    _syncChildren() {
-        const color = this._color();
-        this._childItems.forEach(c => c.inheritColor(color));
-    }
     _toggle() {
         this._isExpanded.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, queries: [{ propertyName: "_childItems", predicate: ClxMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
     @if (routerLink()) {
       <a
         [routerLink]="routerLink()"
@@ -11882,7 +12211,7 @@ class ClxMenuComponent {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -11902,7 +12231,7 @@ class ClxMenuComponent {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -11945,7 +12274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -11965,7 +12294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -11994,18 +12323,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], _rla: [{
                 type: ViewChild,
                 args: [RouterLinkActive]
-            }], _childItems: [{
-                type: ContentChildren,
-                args: [ClxMenuItemComponent, { descendants: true }]
             }] } });
 class ClxNavGroupComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    labelClass = computed(() => {
+        const c = this.color();
+        return c ? resolveColor(c).textSubtle : 'text-clx-text-subtle';
+    }, ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-clx-text-subtle select-none">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
         <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
@@ -12020,7 +12351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     standalone: true,
                     template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-clx-text-subtle select-none">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
         <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
@@ -12031,7 +12362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 class ClxProfileComponent {
     // ── Inputs ──────────────────────────────────────────────────────────────────
@@ -12252,7 +12583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 // ── Base classes ─────────────────────────────────────────────────────────────
 const TABLE_BASE_CLASS = 'w-full text-left border-collapse text-sm';
 const TABLE_HEADER_CELL_CLASS = 'px-4 py-3 font-semibold whitespace-nowrap';
-const TABLE_CELL_CLASS = 'px-4 py-3 border-b border-slate-100 text-slate-700';
+const TABLE_CELL_CLASS = 'px-4 py-3 border-b border-clx-border-soft text-clx-text-label';
 const TABLE_ROW_CLASS = '';
 // ── Alignment ────────────────────────────────────────────────────────────────
 const TABLE_ALIGN_MAP = {
@@ -14585,7 +14916,7 @@ class ClxProgressBarComponent {
       <!-- Fill -->
       <div
-        class="h-full rounded-full transition-all duration-500 ease-out"
+        class="h-full rounded-full transition-[width,background-color] duration-500 ease-out"
         [class]="_fillCls()"
         [style.width]="variant() === 'indeterminate' ? '40%' : _pct() + '%'">
       </div>
@@ -14620,7 +14951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <!-- Fill -->
       <div
-        class="h-full rounded-full transition-all duration-500 ease-out"
+        class="h-full rounded-full transition-[width,background-color] duration-500 ease-out"
         [class]="_fillCls()"
         [style.width]="variant() === 'indeterminate' ? '40%' : _pct() + '%'">
       </div>
@@ -14873,5 +15204,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map