codexly-ui 0.7.4 → 0.8.0

package/fesm2022/codexly-ui.mjs

@@ -577,6 +577,14 @@ class ClxThemeService {
     cardTitleStyle = computed(() => ({
         weight: this._config().cardTitle?.weight ?? 600,
     }), ...(ngDevMode ? [{ debugName: "cardTitleStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for ClxListItemComponent's [clxContent] label — falls back to 600 */
+    listItemLabelStyle = computed(() => ({
+        weight: this._config().listItemLabel?.weight ?? 600,
+    }), ...(ngDevMode ? [{ debugName: "listItemLabelStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for ClxTimelineItemComponent's event title — falls back to 600 */
+    timelineTitleStyle = computed(() => ({
+        weight: this._config().timelineTitle?.weight ?? 600,
+    }), ...(ngDevMode ? [{ debugName: "timelineTitleStyle" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             if (!this._isBrowser)
@@ -591,6 +599,12 @@ class ClxThemeService {
             this._applyColorVar('--clx-secondary', '--clx-secondary-light', cfg.secondaryColor);
             this._applyTextColor(cfg.textColor, this.isDark());
         });
+        effect(() => {
+            if (!this._isBrowser)
+                return;
+            document.documentElement.style.setProperty('--clx-listitem-label-weight', String(this.listItemLabelStyle().weight));
+            document.documentElement.style.setProperty('--clx-timeline-title-weight', String(this.timelineTitleStyle().weight));
+        });
         effect(() => {
             if (!this._isBrowser)
                 return;
@@ -1552,7 +1566,7 @@ class ClxListItemComponent {
     }, ...(ngDevMode ? [{ debugName: "_numberClass" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => {
         const { label } = this._ctx.sizeTokens();
-        const weight = this.sublabel() ? 'font-semibold' : 'font-normal';
+        const weight = this.sublabel() ? `font-[${this._themeSvc.listItemLabelStyle().weight}]` : 'font-normal';
         return `${weight} text-clx-text-label truncate ${label}`;
     }, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
     _metaClass = computed(() => {
@@ -2151,7 +2165,7 @@ class ClxTimelineItemComponent {
 
     <div [class]="'flex-1 min-w-0 ' + _ctx.sizeTokens().contentPb">
       <div class="flex items-start justify-between gap-2">
-        <p [class]="'font-semibold text-clx-text-label leading-snug ' + _ctx.sizeTokens().title">
+        <p [class]="'font-(--clx-timeline-title-weight) text-clx-text-label leading-snug ' + _ctx.sizeTokens().title">
           {{ title() }}
         </p>
         @if (time()) {
@@ -2183,7 +2197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
     <div [class]="'flex-1 min-w-0 ' + _ctx.sizeTokens().contentPb">
       <div class="flex items-start justify-between gap-2">
-        <p [class]="'font-semibold text-clx-text-label leading-snug ' + _ctx.sizeTokens().title">
+        <p [class]="'font-(--clx-timeline-title-weight) text-clx-text-label leading-snug ' + _ctx.sizeTokens().title">
           {{ title() }}
         </p>
         @if (time()) {
@@ -9865,9 +9879,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 });