codexly-ui 0.7.2 → 0.7.4

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,8 +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 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} ${t.bgSubtle} rounded-lg`;
+            return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.textSubtle} ${t.bgMuted} rounded-lg`;
         }
         return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.hoverBgMuted} rounded-lg`;
     }
@@ -9861,13 +9865,10 @@ 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(() => {
-        const hover = resolveColor(this._resolved().color).hoverBgMuted;
-        return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${hover} rounded-lg`;
-    }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
+    _idleCls = computed(() => `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()}`, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolved().color);
-        return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${t.textSubtle} ${t.bgSubtle} 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 });
     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: `