@juspay/svelte-ui-components 2.108.1 → 2.110.0

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/Table/Table.svelte

@@ -49,6 +49,7 @@
     toolbarSlot,
     rowNumberColumn = false,
     rowNumberLabel = '#',
+    summaryRowIndex = null,
     headerTooltipIcon,
     headerTooltipPosition,
     usePortal = false
@@ -796,6 +797,8 @@
                   class="table-row"
                   class:table-row-clickable={isRowClickable}
                   class:table-row-selected={rowSelected}
+                  class:table-summary-row={summaryRowIndex !== null &&
+                    originalIndex === summaryRowIndex}
                   data-pw={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
                   onclick={isRowClickable
                     ? () => handleRowClick(rowIndex, row, originalIndex)
@@ -1253,6 +1256,17 @@
     background-color: var(--table-row-selected-background, #eff6ff);
   }
 
+  /* Summary/period-total row (summaryRowIndex): both the row and its cells,
+     since a themed --table-content-background would otherwise paint over a
+     row-level background. Falls back to the regular cell background. */
+  .table-summary-row {
+    background-color: var(--table-summary-row-background, var(--table-content-background));
+  }
+
+  .table-summary-row > .table-content {
+    background-color: var(--table-summary-row-background, var(--table-content-background));
+  }
+
   /* ── C2-1 Checkbox column ───────────────────────────────────────────────── */
   .table-checkbox-col {
     width: var(--table-checkbox-col-width, 44px);

package/dist/Table/properties.d.ts

@@ -396,6 +396,15 @@ export type OptionalTableProperties = {
     }]>;
     /** Prepends a sequential row-number column (1-based, pagination-aware). */
     rowNumberColumn?: boolean;
+    /**
+     * Index (into the consumer-supplied `rows`, pre-sort/pre-filter) of a
+     * summary/period-total row that renders with a distinct background — the
+     * DataGrid-parity `summaryRowIndex`. The row is matched by its original
+     * position, so it keeps its highlight through sort, search, and pagination.
+     * Background comes from `--table-summary-row-background` (falls back to the
+     * regular cell background when unset). Pass `null`/omit for no summary row.
+     */
+    summaryRowIndex?: number | null;
     /** Header label for the row-number column. Defaults to `'#'`. */
     rowNumberLabel?: string;
     /**

package/package.json

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