codexly-ui 0.6.11 → 0.6.12

package/assets/styles/_theme.css

@@ -6,6 +6,12 @@
 /* ── Font body variable (overridden dynamically by ClxThemeService) ───────── */
 :root {
   --clx-font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+
+  /* ── Font weight (overridden dynamically by ClxThemeService) ──
+     label:    field labels, secondary text, idle nav, badges
+     emphasis: titles, selected/active state, standout values (prices, counters) */
+  --clx-font-weight-label:    500;
+  --clx-font-weight-emphasis: 600;
 }
 
 /* ── Light theme (default) ────────────────────────────────────────────────── */

package/fesm2022/codexly-ui.mjs

@@ -378,6 +378,11 @@ const CLX_FONT_CATALOG = [
         googleUrl: 'https://fonts.googleapis.com/css2?family=Bungee&display=swap',
     },
 ];
+const CLX_FONT_WEIGHT_MAP = {
+    light: { label: 400, emphasis: 500 },
+    normal: { label: 500, emphasis: 600 },
+    bold: { label: 600, emphasis: 700 },
+};
 // ── Tailwind rounded classes per borderRadius token ───────────────────────────
 const CLX_RADIUS_MAP = {
     none: 'rounded-none',
@@ -417,6 +422,7 @@ const CLX_THEME_DEFAULTS = {
     defaultSize: 'md',
     defaultShape: 'rounded',
     fontFamily: 'DM Sans',
+    fontWeight: 'normal',
 };
 // ── Injection token ───────────────────────────────────────────────────────────
 const CLX_THEME_CONFIG = new InjectionToken('CLX_THEME_CONFIG', { factory: () => CLX_THEME_DEFAULTS });
@@ -545,12 +551,19 @@ 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 */ []));
+    /** Resolved style for clx-nav-group labels — falls back to neutralColor/xs/label */
+    sidebarGroupStyle = computed(() => this._resolveNavZoneStyle(this._config().sidebarGroup, this._config().neutralColor, 'xs', 'label'), ...(ngDevMode ? [{ debugName: "sidebarGroupStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for top-level clx-menu — falls back to primaryColor/sm/emphasis */
+    sidebarMenuStyle = computed(() => this._resolveNavZoneStyle(this._config().sidebarMenu, this._config().primaryColor, 'sm', 'emphasis'), ...(ngDevMode ? [{ debugName: "sidebarMenuStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for clx-menu-item — falls back to primaryColor/sm/label */
+    sidebarItemStyle = computed(() => this._resolveNavZoneStyle(this._config().sidebarItem, this._config().primaryColor, 'sm', 'label'), ...(ngDevMode ? [{ debugName: "sidebarItemStyle" }] : /* istanbul ignore next */ []));
+    _resolveNavZoneStyle(override, defaultColor, defaultSize, defaultWeight) {
+        return {
+            color: override?.color ?? defaultColor,
+            size: override?.size ?? defaultSize,
+            weight: override?.weight ?? defaultWeight,
+        };
+    }
     constructor() {
         effect(() => {
             if (!this._isBrowser)
@@ -570,6 +583,11 @@ class ClxThemeService {
                 return;
             this._applyFont(this._config().fontFamily ?? 'Roboto');
         });
+        effect(() => {
+            if (!this._isBrowser)
+                return;
+            this._applyFontWeight(this._config().fontWeight ?? 'normal');
+        });
         if (this._isBrowser) {
             const mq = window.matchMedia('(prefers-color-scheme: dark)');
             mq.addEventListener('change', e => this._sysDark.set(e.matches));
@@ -622,6 +640,13 @@ class ClxThemeService {
         link.href = option.googleUrl;
         document.documentElement.style.setProperty('--clx-font-body', `'${family}', ui-sans-serif, system-ui, sans-serif`);
     }
+    _applyFontWeight(intensity) {
+        const pair = CLX_FONT_WEIGHT_MAP[intensity];
+        if (!pair)
+            return;
+        document.documentElement.style.setProperty('--clx-font-weight-label', String(pair.label));
+        document.documentElement.style.setProperty('--clx-font-weight-emphasis', String(pair.emphasis));
+    }
     _loadMode() {
         if (!this._isBrowser)
             return 'system';
@@ -9537,10 +9562,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
 // ── Item geometry ──────────────────────────────────────────────────────────────
-const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium cursor-pointer select-none';
+const NAV_ITEM_BASE = 'flex items-center gap-3 w-full 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';
+// ── Nav zone size → Tailwind text-size class ─────────────────────────────────
+const NAV_ZONE_SIZE_CLASS = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+};
+// ── Nav weight token → CSS var-backed arbitrary Tailwind class ───────────────
+const NAV_ZONE_WEIGHT_CLASS = {
+    label: 'font-[var(--clx-font-weight-label)]',
+    emphasis: 'font-[var(--clx-font-weight-emphasis)]',
+};
+/** Resolves a nav zone's configured size + idle weight (its base, theme-configured weight). */
+function resolveNavZoneIdle(style) {
+    return `${NAV_ZONE_SIZE_CLASS[style.size]} ${NAV_ZONE_WEIGHT_CLASS[style.weight]}`;
+}
+/** Resolves a nav zone's configured size + the active/selected state's emphasis weight —
+ *  the selected item always reads one step heavier than its configured idle weight. */
+function resolveNavZoneActive(style) {
+    return `${NAV_ZONE_SIZE_CLASS[style.size]} ${NAV_ZONE_WEIGHT_CLASS.emphasis}`;
+}
 // ── Children container ─────────────────────────────────────────────────────────
 const NAV_CHILDREN_WRAPPER = 'grid transition-[grid-template-rows] duration-300 ease-in-out';
 const NAV_CHILDREN_INNER = 'overflow-hidden';
@@ -9550,8 +9595,14 @@ class ClxMenuComponent {
     _themeSvc = inject(ClxThemeService);
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.sidebarMenuColor(), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    /** Per-instance override — any field left unset falls back to the theme's sidebarMenu style */
+    style = input(undefined, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    _resolved = computed(() => {
+        const base = this._themeSvc.sidebarMenuStyle();
+        const o = this.style();
+        return { color: o?.color ?? base.color, size: o?.size ?? base.size, weight: o?.weight ?? base.weight };
+    }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this._resolved().color, ...(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 */ []));
@@ -9578,14 +9629,14 @@ class ClxMenuComponent {
     _iconCls = computed(() => resolveColor(this._color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _buttonCls(isActive) {
         const geom = this.collapsed() ? 'w-full py-3 px-0 justify-center' : NAV_ITEM_L1;
-        const base = `${NAV_ITEM_BASE} ${geom}`;
         const t = resolveColor(this._color());
         if (isActive) {
+            const base = `${NAV_ITEM_BASE} ${resolveNavZoneActive(this._resolved())} ${geom}`;
             if (this.collapsed())
-                return `${base} ${t.textSubtle} font-semibold`;
-            return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
+                return `${base} ${t.textSubtle}`;
+            return `${base} ${t.textSubtle} border-l-2 ${t.borderLight} !pl-[22px]`;
         }
-        return `${base} ${t.hoverBgMuted}`;
+        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${geom} ${t.hoverBgMuted}`;
     }
     NAV_CHILDREN_WRAPPER = NAV_CHILDREN_WRAPPER;
     NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;
@@ -9594,7 +9645,7 @@ class ClxMenuComponent {
         this._isExpanded.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
+    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 }, style: { classPropertyName: "style", publicName: "style", 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()"
@@ -9717,7 +9768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], 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: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", 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]
             }] } });
@@ -9727,32 +9778,38 @@ class ClxMenuItemComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Per-instance override — any field left unset falls back to the theme's sidebarItem style */
+    style = input(undefined, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
     nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
     routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
     itemClick = output();
-    _resolvedColor = computed(() => this.color() ?? this._themeSvc.sidebarItemColor(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
+    _resolved = computed(() => {
+        const base = this._themeSvc.sidebarItemStyle();
+        const o = this.style();
+        return { color: o?.color ?? base.color, size: o?.size ?? base.size, weight: o?.weight ?? base.weight };
+    }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
     _geom = computed(() => {
         if (this.collapsed())
             return 'w-full py-3 px-0 justify-center';
         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 */ []));
+    _iconCls = computed(() => resolveColor(this._resolved().color).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
-        const hover = resolveColor(this._resolvedColor()).hoverBgMuted;
-        return `${NAV_ITEM_BASE} ${this._geom()} ${hover}`;
+        const hover = resolveColor(this._resolved().color).hoverBgMuted;
+        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${this._geom()} ${hover}`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
-        const t = resolveColor(this._resolvedColor());
+        const t = resolveColor(this._resolved().color);
+        const typography = resolveNavZoneActive(this._resolved());
         if (this.collapsed()) {
-            return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold`;
+            return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle}`;
         }
-        return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
+        return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle} border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_activeCls" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (routerLink()) {
       <a
         [routerLink]="routerLink()"
@@ -9825,20 +9882,24 @@ 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 }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 class ClxNavGroupComponent {
+    _themeSvc = inject(ClxThemeService);
     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 */ []));
+    /** Per-instance override — any field left unset falls back to the theme's sidebarGroup style */
+    style = input(undefined, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    _resolved = computed(() => {
+        const base = this._themeSvc.sidebarGroupStyle();
+        const o = this.style();
+        return { color: o?.color ?? base.color, size: o?.size ?? base.size, weight: o?.weight ?? base.weight };
+    }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+    labelClass = computed(() => `${resolveColor(this._resolved().color).textSubtle} ${resolveNavZoneIdle(this._resolved())}`, ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    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 }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 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>
@@ -9853,7 +9914,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 select-none" [class]="labelClass()">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 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>
@@ -9864,7 +9925,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 }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
 
 class ClxProfileComponent {
     // ── Inputs ──────────────────────────────────────────────────────────────────
@@ -15596,5 +15657,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, 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_FONT_WEIGHT_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, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, 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