codexly-ui 0.6.18 → 0.6.20

package/fesm2022/codexly-ui.mjs

@@ -9646,9 +9646,13 @@ 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';
+// Collapsed sidebar: same breathing room, centered icon, no text.
+const NAV_ITEM_COLLAPSED = 'w-[calc(100%-1rem)] mx-2 py-3 justify-center';
 const NAV_ITEM_IDLE = 'text-clx-text-subtle';
 // ── Nav zone size → Tailwind text-size class ─────────────────────────────────
 const NAV_ZONE_SIZE_CLASS = {
@@ -9712,15 +9716,12 @@ 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 geom = this.collapsed() ? NAV_ITEM_COLLAPSED : 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;
@@ -9876,7 +9877,7 @@ class ClxMenuItemComponent {
     }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
     _geom = computed(() => {
         if (this.collapsed())
-            return 'w-full py-3 px-0 justify-center';
+            return NAV_ITEM_COLLAPSED;
         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 */ []));