@juspay/svelte-ui-components 2.109.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/LineChart/LineChart.svelte

@@ -204,11 +204,25 @@
     series.map((s, si) => {
       const color = s.color ?? getColor(si);
       const points: Point[] = s.data.map((d) => ({ x: xScale(d.x), y: yScale(d.y) }));
+      const finitePoints = points.filter(
+        (point) => Number.isFinite(point.x) && Number.isFinite(point.y)
+      );
+      // Design-system contract: a series with a single data point renders as a
+      // flat line at that y across the full plot width (a lone dot reads as a
+      // glitch), while the point marker itself still renders at its true x.
+      const isSinglePoint = finitePoints.length === 1;
+      const pathPoints: Point[] = isSinglePoint
+        ? [
+            { x: 0, y: finitePoints[0].y },
+            { x: dims.innerWidth, y: finitePoints[0].y }
+          ]
+        : points;
       return {
         color,
         points,
-        path: linePath(points, curve),
-        areaD: areaPath(points, dims.innerHeight, curve),
+        dash: s.dash === true ? '6 4' : typeof s.dash === 'string' ? s.dash : null,
+        path: linePath(pathPoints, isSinglePoint ? 'linear' : curve),
+        areaD: areaPath(pathPoints, dims.innerHeight, isSinglePoint ? 'linear' : curve),
         hidden: hiddenSeries.has(si)
       };
     })
@@ -639,6 +653,7 @@
                 d={line.path}
                 stroke={line.color}
                 stroke-width={strokeWidth}
+                stroke-dasharray={line.dash}
                 fill="none"
               />
               {#if line.points.length === 1 && !showDots && Number.isFinite(line.points[0].x) && Number.isFinite(line.points[0].y)}

package/dist/LineChart/properties.d.ts

@@ -10,6 +10,12 @@ export type LineChartSeries = {
     name: string;
     data: LineChartDataPoint[];
     color?: string;
+    /**
+     * Dashed stroke for this series (e.g. a comparison/previous-period line).
+     * `true` uses the default `'6 4'` pattern; a string is passed through as a
+     * custom SVG `stroke-dasharray`. Omit for a solid line.
+     */
+    dash?: boolean | string;
 };
 export type LineChartTooltipContext = {
     x: number;

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.109.0",
+  "version": "2.111.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",