codexly-ui 0.10.109 → 0.10.111

package/assets/styles/_globals.css

@@ -28,7 +28,7 @@
 ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
 ::-webkit-scrollbar-track { background-color: transparent; }
 ::-webkit-scrollbar-thumb {
-  background-color: var(--clx-primary-light);
+  background-color: var(--clx-scroll-light, var(--clx-primary-light));
   border-radius: 0.5rem;
 }
-::-webkit-scrollbar-thumb:hover { background-color: var(--clx-primary); }
+::-webkit-scrollbar-thumb:hover { background-color: var(--clx-scroll, var(--clx-primary)); }

package/fesm2022/codexly-ui.mjs

@@ -652,6 +652,7 @@ class ClxThemeService {
             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-scroll', '--clx-scroll-light', cfg.scrollColor ?? cfg.primaryColor);
             this._applyTextColor(cfg.textColor, this.isDark());
         });
         effect(() => {
@@ -10901,10 +10902,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); }
@@ -10950,15 +10947,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>
@@ -10968,6 +10963,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">
@@ -11026,15 +11024,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>
@@ -11044,6 +11040,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">