codexly-ui 0.15.11 → 0.15.13

package/fesm2022/codexly-ui.mjs

@@ -15964,9 +15964,11 @@ class ClxStatCardComponent {
         // actually fit the grid's default rowHeight (92px × h).
         const sizing = `${radius} shadow-md p-3 w-full h-full justify-center overflow-hidden min-w-[200px]`;
         // banner is a solid gradient fill in the chosen color (no border, no surface bg — it IS the
-        // color) so it reads as a distinct "announcement" card rather than another bordered tile.
+        // color) so it reads as a distinct "announcement" card rather than another bordered tile. Kept
+        // light/close together (400→500, not the base shade down to -2 steps) so it reads as a tint
+        // rather than a saturated block.
         const surface = this.layout() === 'banner'
-            ? `bg-gradient-to-br ${resolveColor(this.color()).bgBase.replace('bg-', 'from-')} ${resolveColor(this.color()).bgDark.replace('bg-', 'to-')}`
+            ? `bg-gradient-to-br from-${parseColorInput(this.color()).color}-400 to-${parseColorInput(this.color()).color}-500`
             : `bg-clx-surface border ${resolveColor(this.color()).borderLight}`;
         // horizontal, bar and corner each stack a full-width row above another (flex-col) — corner's
         // top row (badge/icon) and bottom row (value/title) never share space either; vertical and
@@ -16081,6 +16083,7 @@ class ClxStatCardComponent {
           </span>
           @if (_hasTrend()) {
             <span clx-badge
+                  size="xs"
                   [color]="_trendColor()"
                   variant="light"
                   shape="pill"
@@ -16168,6 +16171,7 @@ class ClxStatCardComponent {
       <div class="w-full flex items-start justify-between">
         @if (_hasTrend()) {
           <span clx-badge
+                size="xs"
                 [color]="_trendColor()"
                 variant="light"
                 shape="pill"
@@ -16193,6 +16197,7 @@ class ClxStatCardComponent {
       <div class="flex flex-col justify-between flex-1 min-w-0 gap-1">
         @if (_hasTrend()) {
           <span clx-badge
+                size="xs"
                 [color]="_trendColor()"
                 variant="light"
                 shape="pill"
@@ -16243,6 +16248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           </span>
           @if (_hasTrend()) {
             <span clx-badge
+                  size="xs"
                   [color]="_trendColor()"
                   variant="light"
                   shape="pill"
@@ -16330,6 +16336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <div class="w-full flex items-start justify-between">
         @if (_hasTrend()) {
           <span clx-badge
+                size="xs"
                 [color]="_trendColor()"
                 variant="light"
                 shape="pill"
@@ -16355,6 +16362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <div class="flex flex-col justify-between flex-1 min-w-0 gap-1">
         @if (_hasTrend()) {
           <span clx-badge
+                size="xs"
                 [color]="_trendColor()"
                 variant="light"
                 shape="pill"