codexly-ui 0.10.110 → 0.10.112

package/fesm2022/codexly-ui.mjs

@@ -10585,6 +10585,11 @@ class ClxMenuItemComponent {
         return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => resolveColor(this._resolved().color).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
+    // Idle-state label color: a neutral gray by default (matches every other sidebar item), but
+    // respects an explicit [style] color override — e.g. clx-profile's "Cerrar sesión" passing
+    // { color: 'red' } expects the label to actually read red, not fall back to gray like the
+    // icon-only styling used to leave it.
+    _idleLabelCls = computed(() => this.style()?.color ? resolveColor(this._resolved().color).textSubtle : 'text-clx-text-subtle', ...(ngDevMode ? [{ debugName: "_idleLabelCls" }] : /* istanbul ignore next */ []));
     _typography = computed(() => resolveNavZoneTypography(this._resolved()), ...(ngDevMode ? [{ debugName: "_typography" }] : /* istanbul ignore next */ []));
     // Nested items (children under a clx-menu module) stay flat — only the label/icon color
     // changes. Top-level items (e.g. Dashboard) get the same hover/active pill as clx-menu.
@@ -10618,7 +10623,7 @@ class ClxMenuItemComponent {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : _idleLabelCls()">{{ label() }}</span>
         }
       </a>
     } @else {
@@ -10631,7 +10636,7 @@ class ClxMenuItemComponent {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : _idleLabelCls()">{{ label() }}</span>
           <!-- Only rendered in button mode (no routerLink) — that's the only mode any consumer
                uses this slot with today; adding it to the <a> branch too would duplicate the same
                ng-content selector across two mutually-exclusive branches, which silently fails to
@@ -10661,7 +10666,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" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : _idleLabelCls()">{{ label() }}</span>
         }
       </a>
     } @else {
@@ -10674,7 +10679,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" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : _idleLabelCls()">{{ label() }}</span>
           <!-- Only rendered in button mode (no routerLink) — that's the only mode any consumer
                uses this slot with today; adding it to the <a> branch too would duplicate the same
                ng-content selector across two mutually-exclusive branches, which silently fails to
@@ -10902,10 +10907,6 @@ class ClxProfileComponent {
         const t = resolveColor(this._color());
         return `focus-visible:${t.ringBase}`;
     }, ...(ngDevMode ? [{ debugName: "_ringClass" }] : /* istanbul ignore next */ []));
-    _avatarRingClass = computed(() => {
-        const t = resolveColor(this._color());
-        return `border-2 ${t.borderLight}`;
-    }, ...(ngDevMode ? [{ debugName: "_avatarRingClass" }] : /* istanbul ignore next */ []));
     // ── Methods ──────────────────────────────────────────────────────────────────
     _toggle() { this._isOpen.update(v => !v); }
     _close() { this._isOpen.set(false); }
@@ -10951,15 +10952,13 @@ class ClxProfileComponent {
 
       <div class="w-72 bg-clx-surface rounded-2xl shadow-xl border border-clx-border-soft overflow-hidden mt-2">
 
-        <!-- Header: avatar ring + name + role badge, subtle surface (not a solid color block) -->
-        <div class="px-4 pt-5 pb-4 flex items-center gap-3 bg-clx-surface-2">
-          <div class="rounded-full p-0.5" [class]="_avatarRingClass()">
-            <clx-avatar
-              [initials]="_initials()"
-              [src]="avatarSrc()"
-              [color]="_color()"
-              size="md" />
-          </div>
+        <!-- Header: avatar + name + role badge -->
+        <div class="px-4 pt-4 pb-3 flex items-center gap-3">
+          <clx-avatar
+            [initials]="_initials()"
+            [src]="avatarSrc()"
+            [color]="_color()"
+            size="md" />
           <div class="flex-1 min-w-0">
             <p class="text-sm font-semibold text-clx-text-label truncate">{{ fullName() }}</p>
             <p class="text-xs text-clx-text-muted truncate">{{ username() }}</p>
@@ -10969,6 +10968,9 @@ class ClxProfileComponent {
           </div>
         </div>
 
+        <!-- Divider -->
+        <div class="border-t border-clx-border-soft"></div>
+
         <!-- Menu items -->
         @if (menuItems().length) {
           <div class="py-1.5">
@@ -11027,15 +11029,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
       <div class="w-72 bg-clx-surface rounded-2xl shadow-xl border border-clx-border-soft overflow-hidden mt-2">
 
-        <!-- Header: avatar ring + name + role badge, subtle surface (not a solid color block) -->
-        <div class="px-4 pt-5 pb-4 flex items-center gap-3 bg-clx-surface-2">
-          <div class="rounded-full p-0.5" [class]="_avatarRingClass()">
-            <clx-avatar
-              [initials]="_initials()"
-              [src]="avatarSrc()"
-              [color]="_color()"
-              size="md" />
-          </div>
+        <!-- Header: avatar + name + role badge -->
+        <div class="px-4 pt-4 pb-3 flex items-center gap-3">
+          <clx-avatar
+            [initials]="_initials()"
+            [src]="avatarSrc()"
+            [color]="_color()"
+            size="md" />
           <div class="flex-1 min-w-0">
             <p class="text-sm font-semibold text-clx-text-label truncate">{{ fullName() }}</p>
             <p class="text-xs text-clx-text-muted truncate">{{ username() }}</p>
@@ -11045,6 +11045,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           </div>
         </div>
 
+        <!-- Divider -->
+        <div class="border-t border-clx-border-soft"></div>
+
         <!-- Menu items -->
         @if (menuItems().length) {
           <div class="py-1.5">