codexly-ui 0.6.18 → 0.6.19

package/fesm2022/codexly-ui.mjs

@@ -9646,9 +9646,11 @@ 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 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_BASE = 'flex items-center gap-3 cursor-pointer select-none';
+// mx-3 (instead of full-bleed) so the idle-hover/active pill has breathing room from the
+// sidebar edges instead of touching them — width is `w-[calc(100%-...)]`, not `w-full`.
+const NAV_ITEM_L1 = 'w-[calc(100%-1.5rem)] mx-3 px-4 py-3';
+const NAV_ITEM_L2 = 'w-[calc(100%-1.5rem)] mx-3 pl-3 pr-3 py-2';
 const NAV_ITEM_IDLE = 'text-clx-text-subtle';
 // ── Nav zone size → Tailwind text-size class ─────────────────────────────────
 const NAV_ZONE_SIZE_CLASS = {
@@ -9715,12 +9717,9 @@ class ClxMenuComponent {
         const geom = this.collapsed() ? 'w-full py-3 px-0 justify-center' : NAV_ITEM_L1;
         const t = resolveColor(this._color());
         if (isActive) {
-            const base = `${NAV_ITEM_BASE} ${resolveNavZoneActive(this._resolved())} ${geom}`;
-            if (this.collapsed())
-                return `${base} ${t.textSubtle}`;
-            return `${base} ${t.textSubtle} border-l-2 ${t.borderLight} !pl-[22px]`;
+            return `${NAV_ITEM_BASE} ${resolveNavZoneActive(this._resolved())} ${geom} ${t.textSubtle} ${t.bgSubtle} rounded-lg`;
         }
-        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${geom} ${t.hoverBgMuted}`;
+        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${geom} ${t.hoverBgMuted} rounded-lg`;
     }
     NAV_CHILDREN_WRAPPER = NAV_CHILDREN_WRAPPER;
     NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;