@juspay/svelte-ui-components 2.110.0 → 2.111.0

package/dist/DeltaIndicator/DeltaIndicator.svelte

@@ -44,6 +44,10 @@
         ><path d="M22 7L13.5 15.5L8.5 10.5L2 17" /><path d="M16 7H22V13" /></svg
       >
     </span>
+  {:else if !hideArrow}
+    <!-- Neutral/no-change glyph (design-system "— 0%" treatment): an em dash in
+         place of the trend arrow, so a flat delta still reads as a stated state. -->
+    <span class="delta-indicator-dash" aria-hidden="true">—</span>
   {/if}
   <span class="delta-indicator-text">{text}</span>
 </span>
@@ -85,6 +89,11 @@
     flex-shrink: 0;
   }
 
+  .delta-indicator-dash {
+    color: inherit;
+    flex-shrink: 0;
+  }
+
   .delta-indicator-arrow svg {
     width: 100%;
     height: 100%;

package/dist/StatCard/StatCard.svelte

@@ -177,12 +177,29 @@
             >
               {row.value}
             </div>
+            {#if typeof row.comparisonValue === 'string' && row.comparisonValue.length > 0}
+              <div
+                class="statcard-comparison-value"
+                data-pw={typeof testId === 'string' ? `${testId}-comparison-${rowIndex}` : null}
+              >
+                / {row.comparisonValue}
+              </div>
+            {/if}
             {#if typeof row.change === 'number'}
               <DeltaIndicator
                 value={row.change}
                 invertColors={row.invertChangeColors ?? false}
                 testId={testId ? `${testId}-delta-${rowIndex}` : null}
               />
+            {:else if row.change === null}
+              <!-- Comparison expected but not computable — a stated "N/A" beats
+                   silently rendering nothing (design-system trend states). -->
+              <div
+                class="statcard-delta statcard-delta-na"
+                data-pw={typeof testId === 'string' ? `${testId}-delta-na-${rowIndex}` : null}
+              >
+                N/A
+              </div>
             {/if}
             {#if typeof row.additionalContent === 'string' && row.additionalContent.length > 0}
               <div class="statcard-row-additional">{row.additionalContent}</div>
@@ -392,6 +409,20 @@
     color: var(--statcard-delta-negative-color, #dc2626);
   }
 
+  .statcard-delta-na {
+    color: var(--statcard-delta-na-color, var(--statcard-delta-color, #6b7280));
+  }
+
+  /* Inline comparison denominator ("₹60k / ₹10L") — a muted, slightly smaller
+     companion to the metric value, baseline-aligned by the value row. */
+  .statcard-comparison-value {
+    font-size: var(--statcard-comparison-font-size, 16px);
+    font-weight: var(--statcard-comparison-font-weight, 700);
+    color: var(--statcard-comparison-color, #c7c7c7);
+    line-height: var(--statcard-comparison-line-height, 1.4);
+    white-space: nowrap;
+  }
+
   .statcard-subtitle {
     order: var(--statcard-subtitle-order, 0);
     font-size: var(--statcard-subtitle-font-size, 12px);

package/dist/StatCard/properties.d.ts

@@ -30,8 +30,17 @@ export type StatCardRow = {
     value: string;
     /** Optional row-level heading label. */
     heading?: string;
-    /** Numeric change for the delta indicator. */
-    change?: number;
+    /**
+     * Comparison-period value rendered inline after the metric as "/ <value>"
+     * (e.g. "₹60k / ₹10L") in a muted denominator style. Omit to hide.
+     */
+    comparisonValue?: string;
+    /**
+     * Numeric change for the delta indicator. A number renders the delta
+     * (0 renders the neutral "— 0%" treatment); `null` means a comparison was
+     * expected but not computable and renders "N/A"; `undefined` renders nothing.
+     */
+    change?: number | null;
     /** Invert delta colors for lower-is-better metrics on this row. */
     invertChangeColors?: boolean;
     /** Additional descriptive text rendered after the delta. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.110.0",
+  "version": "2.111.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",