codexly-ui 0.7.1 → 0.7.3

package/fesm2022/codexly-ui.mjs

@@ -9697,8 +9697,11 @@ class ClxMenuComponent {
         const geom = this.collapsed() ? NAV_ITEM_COLLAPSED : NAV_ITEM_L1;
         const t = resolveColor(this._color());
         const typography = resolveNavZoneTypography(this._resolved());
+        // Active state reuses the same light hover tint (just without the `hover:` pseudo-class)
+        // instead of the darker bgSubtle token, so selected and hovered read as the same shade.
+        const activeBg = t.hoverBgMuted.replace('hover:', '');
         if (isActive) {
-            return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.textSubtle} ${t.bgSubtle} rounded-lg`;
+            return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.textSubtle} ${activeBg} rounded-lg`;
         }
         return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.hoverBgMuted} rounded-lg`;
     }
@@ -9728,7 +9731,7 @@ class ClxMenuComponent {
             clx-icon
             name="expand_more"
             size="sm"
-            [class]="'shrink-0 transition-transform duration-300 ' + _iconCls()"
+            [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
             [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
           </span>
         }
@@ -9748,7 +9751,7 @@ class ClxMenuComponent {
             clx-icon
             name="expand_more"
             size="sm"
-            [class]="'shrink-0 transition-transform duration-300 ' + _iconCls()"
+            [class]="'shrink-0 transition-transform duration-300 ' + (active() ? '' : 'text-clx-text-subtle')"
             [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
           </span>
         }
@@ -9791,7 +9794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             clx-icon
             name="expand_more"
             size="sm"
-            [class]="'shrink-0 transition-transform duration-300 ' + _iconCls()"
+            [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
             [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
           </span>
         }
@@ -9811,7 +9814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             clx-icon
             name="expand_more"
             size="sm"
-            [class]="'shrink-0 transition-transform duration-300 ' + _iconCls()"
+            [class]="'shrink-0 transition-transform duration-300 ' + (active() ? '' : 'text-clx-text-subtle')"
             [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
           </span>
         }
@@ -9861,13 +9864,10 @@ class ClxMenuItemComponent {
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => resolveColor(this._resolved().color).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _typography = computed(() => resolveNavZoneTypography(this._resolved()), ...(ngDevMode ? [{ debugName: "_typography" }] : /* istanbul ignore next */ []));
-    _idleCls = computed(() => {
-        const hover = resolveColor(this._resolved().color).hoverBgMuted;
-        return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${hover} rounded-lg`;
-    }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
+    _idleCls = computed(() => `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()}`, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolved().color);
-        return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${t.textSubtle} ${t.bgSubtle} rounded-lg`;
+        return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${t.textSubtle}`;
     }, ...(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 }, 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: `