codexly-ui 0.7.5 → 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()) {