codexly-ui 0.7.3 → 0.7.5

package/assets/styles/_safelist.css

@@ -12,8 +12,8 @@
    resolveColor().border by replacing "border-" with "border-t-" at runtime. */
 @source inline("{bg,text,border,border-t,hover:bg,hover:text,hover:border,focus:border,focus-within:border,focus-visible:ring}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}");
 
-/* hoverBgMuted: hover:bg-{c}-{s}/10 */
-@source inline("hover:bg-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}/10");
+/* hoverBgMuted / bgMuted: {hover:,}bg-{c}-{s}/10 */
+@source inline("{hover:bg,bg}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}/10");
 
 /* focus/focus-within ring: focus:ring-{c}-{s}/20, focus-within:ring-{c}-{s}/20 */
 @source inline("{focus:ring,focus-within:ring}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}/20");

package/fesm2022/codexly-ui.mjs

@@ -49,6 +49,7 @@ function resolveColor(input) {
         // ── New semantic tokens ─────────────────────────────────────────────────
         bg: `bg-${c}-${s}`,
         bgSubtle: `bg-${c}-${subtleS}`,
+        bgMuted: `bg-${c}-${s}/10`,
         text: textOn,
         textSubtle: `text-${c}-${s}`,
         border: `border-${c}-${s}`,
@@ -91,6 +92,7 @@ function resolveColor(input) {
 const WHITE_TOKENS = {
     bg: 'bg-white',
     bgSubtle: 'bg-white/10',
+    bgMuted: 'bg-white/10',
     text: 'text-gray-900',
     textSubtle: 'text-white',
     border: 'border-white',
@@ -9697,11 +9699,10 @@ class ClxMenuComponent {
         const geom = this.collapsed() ? NAV_ITEM_COLLAPSED : NAV_ITEM_L1;
         const t = resolveColor(this._color());
         const typography = resolveNavZoneTypography(this._resolved());
-        // Active state reuses the same light hover tint (just without the `hover:` pseudo-class)
-        // instead of the darker bgSubtle token, so selected and hovered read as the same shade.
-        const activeBg = t.hoverBgMuted.replace('hover:', '');
+        // Active state reuses the same light tint as hover (bgMuted) instead of the darker
+        // bgSubtle token, so selected and hovered read as the same shade.
         if (isActive) {
-            return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.textSubtle} ${activeBg} rounded-lg`;
+            return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.textSubtle} ${t.bgMuted} rounded-lg`;
         }
         return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.hoverBgMuted} rounded-lg`;
     }
@@ -9864,9 +9865,20 @@ class ClxMenuItemComponent {
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => resolveColor(this._resolved().color).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _typography = computed(() => resolveNavZoneTypography(this._resolved()), ...(ngDevMode ? [{ debugName: "_typography" }] : /* istanbul ignore next */ []));
-    _idleCls = computed(() => `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()}`, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* 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.
+    _idleCls = computed(() => {
+        if (!this.nested()) {
+            const hover = resolveColor(this._resolved().color).hoverBgMuted;
+            return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${hover} rounded-lg`;
+        }
+        return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()}`;
+    }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolved().color);
+        if (!this.nested()) {
+            return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${t.textSubtle} ${t.bgMuted} rounded-lg`;
+        }
         return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${t.textSubtle}`;
     }, ...(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 });