codexly-ui 0.6.17 → 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;
@@ -9882,15 +9881,12 @@ class ClxMenuItemComponent {
     _iconCls = computed(() => resolveColor(this._resolved().color).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
         const hover = resolveColor(this._resolved().color).hoverBgMuted;
-        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${this._geom()} ${hover}`;
+        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${this._geom()} ${hover} rounded-lg`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolved().color);
         const typography = resolveNavZoneActive(this._resolved());
-        if (this.collapsed()) {
-            return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle}`;
-        }
-        return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle} border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
+        return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle} ${t.bgSubtle} rounded-lg`;
     }, ...(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: `