codexly-ui 0.0.97 → 0.0.99

package/assets/styles/_fonts.css

@@ -1,84 +1,3 @@
-/* ── Roboto 300 Light ──────────────────────────────────────────────────────── */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('../fonts/roboto-light.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url('../fonts/roboto-light-italic.ttf') format('truetype');
-}
-
-/* ── Roboto 400 Regular ────────────────────────────────────────────────────── */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('../fonts/roboto-regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('../fonts/roboto-italic.ttf') format('truetype');
-}
-
-/* ── Roboto 500 Medium ─────────────────────────────────────────────────────── */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('../fonts/roboto-medium.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url('../fonts/roboto-medium-italic.ttf') format('truetype');
-}
-
-/* ── Roboto 600 SemiBold ───────────────────────────────────────────────────── */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('../fonts/roboto-semibold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url('../fonts/roboto-semibold-italic.ttf') format('truetype');
-}
-
-/* ── Roboto 700 Bold ───────────────────────────────────────────────────────── */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('../fonts/roboto-bold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url('../fonts/roboto-bold-italic.ttf') format('truetype');
-}
+/* Fonts are loaded dynamically by ClxThemeService via <link> injection.
+   Roboto is the default — preloaded here so the app renders before JS executes. */
+@import url('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');

package/assets/styles/_globals.css

@@ -1,3 +1,6 @@
+/* ── Global font ─────────────────────────────────────────────────────────── */
+*, *::before, *::after { font-family: var(--clx-font-body); }
+
 /* ── Backdrop base ───────────────────────────────────────────────────────── */
 .clx-modal-backdrop,
 .clx-alert-backdrop {

package/assets/styles/_theme.css

@@ -1,9 +1,13 @@
 /* ── Font registrations ───────────────────────────────────────────────────── */
 @theme {
-  --font-roboto: 'Roboto', ui-sans-serif, system-ui, sans-serif;
   --font-material-symbols-outlined: 'Material Symbols Outlined';
 }
 
+/* ── Font body variable (overridden dynamically by ClxThemeService) ───────── */
+:root {
+  --clx-font-body: 'Roboto', ui-sans-serif, system-ui, sans-serif;
+}
+
 /* ── Light theme (default) ────────────────────────────────────────────────── */
 :root {
   color-scheme: light;
@@ -34,6 +38,12 @@
   /* ── Scrollbar ── */
   --clx-scrollbar:       #cbd5e1; /* slate-300 */
   --clx-scrollbar-hover: #94a3b8; /* slate-400 */
+
+  /* ── Theme accents (overridden dynamically by ClxThemeService) ── */
+  --clx-secondary:        #64748b; /* slate-500 */
+  --clx-secondary-light:  #f1f5f9; /* slate-100 */
+  --clx-text-base:         #64748b; /* slate-500 */
+  --clx-text-base-light:   #f1f5f9; /* slate-100 */
 }
 
 /* ── Dark theme ───────────────────────────────────────────────────────────── */
@@ -83,4 +93,8 @@
   --color-clx-border-soft:   var(--clx-border-soft);
   --color-clx-primary:       var(--clx-primary);
   --color-clx-primary-light: var(--clx-primary-light);
+  --color-clx-secondary:       var(--clx-secondary);
+  --color-clx-secondary-light: var(--clx-secondary-light);
+  --color-clx-text-base:       var(--clx-text-base);
+  --color-clx-text-base-light: var(--clx-text-base-light);
 }

package/fesm2022/codexly-ui.mjs

@@ -165,6 +165,58 @@ 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:wght@300;400;500;600;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',
+    },
+];
 // ── Tailwind rounded classes per borderRadius token ───────────────────────────
 const CLX_RADIUS_MAP = {
     none: 'rounded-none',
@@ -194,13 +246,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 +267,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 +384,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 +399,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._applyColorVar('--clx-text-base', '--clx-text-base-light', cfg.textColor);
+        });
+        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 +425,29 @@ 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));
+        }
+    }
+    _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';
@@ -11722,9 +11907,10 @@ class ClxMenuItemComponent {
         return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => resolveColor(this._resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
+    _idleIconCls = computed(() => resolveColor(this._resolvedColor()).textMuted, ...(ngDevMode ? [{ debugName: "_idleIconCls" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
         const t = resolveColor(this._resolvedColor());
-        return `${NAV_ITEM_BASE} ${this._geom()} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
+        return `${NAV_ITEM_BASE} ${this._geom()} ${t.textMuted} ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolvedColor());
@@ -11744,7 +11930,7 @@ 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]="rla.isActive ? _iconCls() : _idleIconCls()"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11757,7 +11943,7 @@ 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]="active() ? _iconCls() : _idleIconCls()"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11782,7 +11968,7 @@ 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]="rla.isActive ? _iconCls() : _idleIconCls()"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11795,7 +11981,7 @@ 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]="active() ? _iconCls() : _idleIconCls()"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -12002,10 +12188,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 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 +12211,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 +12222,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 ──────────────────────────────────────────────────────────────────
@@ -14873,5 +15064,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