codexly-ui 0.10.106 → 0.10.108

package/fesm2022/codexly-ui.mjs

@@ -999,8 +999,12 @@ class ClxButtonComponent {
         if (!textOverride)
             return cls;
         // Strip any text-* class the variant branch above already added, then apply the override —
-        // avoids two text-* classes of equal CSS specificity racing on source order.
-        return cls.replace(/(?:^|\s)text-\S+/g, '').trim() + ` ${resolveColor(textOverride).text}`;
+        // avoids two text-* classes of equal CSS specificity racing on source order. Uses the literal
+        // text-{color}-{shade} class (not resolveColor().text, which ignores the chosen color and
+        // auto-picks white/dark-800 for contrast against a background — the override IS the user's
+        // explicit color choice, not a background to contrast against).
+        const { color: oc, shade: os } = parseColorInput(textOverride);
+        return cls.replace(/(?:^|\s)text-\S+/g, '').trim() + ` text-${oc}-${os}`;
     }, ...(ngDevMode ? [{ debugName: "_colorClass" }] : /* istanbul ignore next */ []));
     /** Auto-applies primaryButtonTextColor/secondaryButtonTextColor from the theme when this
      *  button's own resolved color IS the theme's primaryColor/secondaryColor and no explicit
@@ -10582,7 +10586,9 @@ class ClxMenuItemComponent {
         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}`;
+        // Nested (child) items stay flat with no active pill background, so the selected state needs
+        // its own visual cue — bold on top of the theme's configured size/weight.
+        return `${NAV_ITEM_BASE} ${this._typography()} font-semibold ${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: `