@juspay/svelte-ui-components 2.80.2 → 2.80.4

package/dist/FunnelChart/FunnelChart.svelte

@@ -4,6 +4,7 @@
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import { getColor } from '../_chart/colors';
   import { formatNumber, formatPercent } from '../_chart/format';
+  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
 
   // ── Props ──────────────────────────────────────────────────────
 
@@ -16,6 +17,7 @@
     showValueLabels = true,
     valueFormat,
     aspectRatio = 16 / 9,
+    radius = DEFAULT_CHART_CORNER_RADIUS,
     testId,
     classes,
     empty,
@@ -249,7 +251,7 @@
             width={stageColumnWidth}
             height={bh}
             fill={color}
-            rx={2}
+            rx={radius}
             aria-label="{stage.category}: {formatLabel(stage)}"
             onmouseenter={(event) => handleEnter(event, index)}
             onmousemove={trackMouse}

package/dist/FunnelChart/properties.d.ts

@@ -21,6 +21,13 @@ export type OptionalFunnelChartProperties = {
      * Defaults to a light-teal shared palette neutral.
      */
     connectorColor?: string;
+    /**
+     * Corner radius on each stage bar in pixels. Defaults to
+     * `DEFAULT_CHART_CORNER_RADIUS` (4), mirroring the design system's base
+     * `--radius` token. SVG `rx`/`ry` cannot read CSS `var()`, so pass this
+     * prop explicitly to track a changed `--radius` at runtime.
+     */
+    radius?: number;
     /**
      * Horizontal width (in SVG user units relative to total inner width) of each
      * trapezoidal slope connector. Larger values produce steeper visual drops between stages.

package/dist/Input/Input.svelte

@@ -47,7 +47,13 @@
     leftIconLabel = 'Leading action',
     rightIconLabel = 'Trailing action',
     mandatory = false,
-    forceError = false
+    forceError = false,
+    rows,
+    autoResize = false,
+    minRows,
+    maxRows,
+    resize = 'none',
+    showCount = false
   }: InputProperties = $props();
 
   export function focus() {
@@ -104,6 +110,38 @@
   const hasLeftIcon = $derived(typeof leftIcon === 'function');
   const hasRightIcon = $derived(typeof rightIcon === 'function');
 
+  const charCount = $derived(value?.length ?? 0);
+  const effectiveResize = $derived(autoResize ? 'none' : resize);
+
+  // Grow the textarea to fit its content between minRows and maxRows.
+  function adjustTextAreaHeight(): void {
+    const el = inputElement;
+    if (!el || !useTextArea || !autoResize) {
+      return;
+    }
+    el.style.height = 'auto';
+    const styles = window.getComputedStyle(el);
+    const lineHeight = parseFloat(styles.lineHeight) || 20;
+    const verticalPadding = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+    const border = parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth);
+    const lower = minRows ?? rows ?? 2;
+    const minHeight = lower * lineHeight + verticalPadding + border;
+    const maxHeight =
+      maxRows != null ? maxRows * lineHeight + verticalPadding + border : Number.POSITIVE_INFINITY;
+    const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+    el.style.height = `${nextHeight}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
+  }
+
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    // Re-run on every value change (and on mount) while auto-resize is enabled.
+    void value;
+    if (useTextArea && autoResize) {
+      adjustTextAreaHeight();
+    }
+  });
+
   function handleOnInput(event: Event) {
     if (inputElement === null) {
       return;
@@ -232,8 +270,11 @@
         onpaste={handleOnPaste}
         onclick={onClick}
         onkeydown={onKeyDown}
+        data-pw={testId}
         class:action-input={actionInput}
         style="--focus-border: {addFocusColor ? 1 : 0}px;"
+        style:resize={effectiveResize}
+        rows={rows ?? null}
         disabled={disable}
         bind:this={inputElement}
         maxlength={dataType === 'tel' ? null : maxLength}
@@ -321,6 +362,11 @@
       {infoMessage}
     </div>
   {/if}
+  {#if useTextArea && showCount && !actionInput}
+    <div class="input-char-count" class:at-limit={charCount >= maxLength}>
+      {charCount}/{maxLength}
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -466,6 +512,18 @@
     padding: var(--input-info-msg-padding);
   }
 
+  .input-char-count {
+    align-self: flex-end;
+    font-size: var(--input-char-count-size, 12px);
+    color: var(--input-char-count-color, #98a2b3);
+    margin: var(--input-char-count-margin, 4px 0 0);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .input-char-count.at-limit {
+    color: var(--input-char-count-limit-color, var(--input-error-msg-text-color, #fa1405));
+  }
+
   ::placeholder {
     color: var(--input-placeholder-color);
   }

package/dist/Input/properties.d.ts

@@ -22,6 +22,24 @@ export type OptionalInputProperties = {
     max?: number;
     actionInput?: boolean;
     useTextArea?: boolean;
+    /** Initial visible rows for the textarea (only applies when `useTextArea`). */
+    rows?: number;
+    /**
+     * Grow/shrink the textarea to fit its content between `minRows` and `maxRows`
+     * (only when `useTextArea`). Disables manual resizing while active.
+     */
+    autoResize?: boolean;
+    /** Lower bound (in rows) when `autoResize` is on. Defaults to `rows`. */
+    minRows?: number;
+    /** Upper bound (in rows) when `autoResize` is on; beyond this the textarea scrolls. */
+    maxRows?: number;
+    /**
+     * Manual resize-handle behaviour for the textarea. Defaults to `'none'` (unchanged from
+     * before); forced to `'none'` when `autoResize` is on.
+     */
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    /** Show a live `current / maxLength` character counter beneath the field. */
+    showCount?: boolean;
     autoComplete?: HTMLInputAttributes['autocomplete'];
     name?: string;
     textTransformers?: TextTransformer[];

package/dist/LineChart/LineChart.svelte

@@ -44,6 +44,8 @@
     xTickFormat,
     yTickFormat,
     aspectRatio = 16 / 9,
+    minHeight = 0,
+    maxHeight = Infinity,
     tooltipSnippet,
     empty,
     highlightedIndex = null,
@@ -352,7 +354,13 @@
       <Legend items={legendItems} position="top" />
     {/if}
 
-    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+    <ChartContainer
+      bind:width={chartWidth}
+      bind:height={chartHeight}
+      {aspectRatio}
+      {minHeight}
+      {maxHeight}
+    >
       {#if gradientFill || showArea}
         <defs>
           {#each lines as line, si (si)}

package/dist/LineChart/properties.d.ts

@@ -95,6 +95,10 @@ export type OptionalLineChartProperties = {
     yTickFormat?: (value: number | string) => string;
     /** Width-to-height ratio for the chart. */
     aspectRatio?: number;
+    /** Minimum chart height in pixels, regardless of computed aspect-ratio height. */
+    minHeight?: number;
+    /** Maximum chart height in pixels, regardless of computed aspect-ratio height. */
+    maxHeight?: number;
     /** Custom tooltip. Receives `{x, points: [{name, y, color, label?}]}`. */
     tooltipSnippet?: Snippet<[LineChartTooltipContext]>;
     /** Content rendered when all series are empty. */

package/dist/Pill/Pill.svelte

@@ -107,7 +107,7 @@
   .pill-text {
     overflow: hidden;
     text-overflow: var(--pill-text-overflow, ellipsis);
-    white-space: nowrap;
+    white-space: var(--pill-text-white-space, nowrap);
   }
 
   .pill-leading-icon {

package/dist/SankeyChart/SankeyChart.svelte

@@ -5,6 +5,7 @@
   import { computeSankeyLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
+  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
   // ── Props ──────────────────────────────────────────────────────
@@ -18,6 +19,7 @@
     showValues = false,
     showLabels = true,
     aspectRatio = 16 / 9,
+    radius = DEFAULT_CHART_CORNER_RADIUS,
     maxHeight = Infinity,
     valueFormat,
     tooltipSnippet,
@@ -343,8 +345,8 @@
             y={node.y}
             width={node.width}
             height={node.height}
-            rx={2}
-            ry={2}
+            rx={radius}
+            ry={radius}
             fill={color}
             onmouseenter={(e) => handleNodeEnter(e, node.id)}
             onmousemove={trackMouse}

package/dist/SankeyChart/properties.d.ts

@@ -41,6 +41,13 @@ export type OptionalSankeyChartProperties = {
     nodeWidth?: number;
     nodePadding?: number;
     iterations?: number;
+    /**
+     * Corner radius on each node rect in pixels. Defaults to
+     * `DEFAULT_CHART_CORNER_RADIUS` (4), mirroring the design system's base
+     * `--radius` token. SVG `rx`/`ry` cannot read CSS `var()`, so pass this
+     * prop explicitly to track a changed `--radius` at runtime.
+     */
+    radius?: number;
     showValues?: boolean;
     showLabels?: boolean;
     aspectRatio?: number;

package/dist/Select/Select.svelte

@@ -17,6 +17,7 @@
     optionIndicator,
     showSelectAll = false,
     selectAllLabel = 'Select all',
+    showSelectedTick = false,
     triggerSummary,
     testId,
     itemTestId,
@@ -443,6 +444,7 @@
             <div
               class="select-option"
               class:multi={multiple}
+              class:tickable={showSelectedTick && !multiple}
               class:selected={value.includes(row.item.id)}
               class:highlighted={index === highlightedIndex}
               role="option"
@@ -478,7 +480,11 @@
                   </span>
                 {/if}
               {/if}
-              {row.item.label}
+              <span class="select-option-label">{row.item.label}</span>
+              {#if showSelectedTick && !multiple && value.includes(row.item.id)}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                <span class="select-option-tick" aria-hidden="true">{@html checkmarkSvg}</span>
+              {/if}
             </div>
           {/if}
         {/each}
@@ -740,4 +746,31 @@
     background: var(--select-ghost-trigger-open-background, rgba(0, 0, 0, 0.06));
     box-shadow: none;
   }
+
+  /* Single-select right-edge tick (showSelectedTick) */
+  .select-option.tickable {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .select-option.tickable .select-option-label {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .select-option-tick {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--select-option-tick-size, 16px);
+    height: var(--select-option-tick-size, 16px);
+    color: var(--select-option-tick-color, #2563eb);
+  }
+
+  .select-option-tick :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
 </style>

package/dist/Select/properties.d.ts

@@ -40,6 +40,13 @@ export type OptionalSelectProperties = {
     showSelectAll?: boolean;
     /** Label for the `showSelectAll` row. Defaults to `'Select all'`. */
     selectAllLabel?: string;
+    /**
+     * Single-select only: when `true`, the currently selected option shows a
+     * checkmark at its right edge. No effect in `multiple` mode (which already
+     * renders a checkbox indicator). Themeable via `--select-option-tick-size`
+     * and `--select-option-tick-color`. Defaults to `false`.
+     */
+    showSelectedTick?: boolean;
     testId?: string;
     /** Fallback per-option test id prefix. Each option emits `data-pw="{itemTestId}-{id}"` when its own `item.testId` is not set. */
     itemTestId?: string;

package/dist/_chart/ChartTooltip.svelte

@@ -60,7 +60,7 @@
     display: inline-block;
     width: 8px;
     height: 8px;
-    border-radius: 2px;
+    border-radius: var(--chart-swatch-radius, 2px);
     flex-shrink: 0;
   }
 

package/dist/_chart/Legend.svelte

@@ -48,7 +48,7 @@
     display: inline-block;
     width: var(--chart-legend-swatch-size, 12px);
     height: var(--chart-legend-swatch-size, 12px);
-    border-radius: 2px;
+    border-radius: var(--chart-swatch-radius, 2px);
     flex-shrink: 0;
   }
 

package/dist/_chart/geometry.js

@@ -128,7 +128,7 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
                     nodeY.set(id, Math.max(0, weightedY - (nodeH.get(id) ?? 0) / 2));
                 }
             }
-            // Resolve overlaps
+            // Resolve overlaps: push down from the top.
             ids.sort((a, b) => (nodeY.get(a) ?? 0) - (nodeY.get(b) ?? 0));
             let y = 0;
             for (const id of ids) {
@@ -138,6 +138,37 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
                 }
                 y = (nodeY.get(id) ?? 0) + (nodeH.get(id) ?? 0) + nodePadding;
             }
+            // Resolve overlaps: pull back up from the bottom. The push-down pass
+            // above only ever grows a column's block downward, so a fan-out whose
+            // members share a weighted target centre drifts past the column's
+            // height budget column-to-column instead of staying level. Sweep from
+            // the last node up, clamping each node's bottom edge to the running
+            // boundary, mirroring d3-sankey's bidirectional resolveCollisions.
+            let bottomBoundary = height;
+            for (let index = ids.length - 1; index >= 0; index--) {
+                const id = ids[index];
+                const nodeBottom = (nodeY.get(id) ?? 0) + (nodeH.get(id) ?? 0);
+                if (nodeBottom > bottomBoundary) {
+                    nodeY.set(id, bottomBoundary - (nodeH.get(id) ?? 0));
+                }
+                bottomBoundary = (nodeY.get(id) ?? 0) - nodePadding;
+            }
+            // Re-centre the column's node group within [0, height]: once overlaps
+            // are resolved, anchor the block at the midpoint of its remaining
+            // slack rather than leaving it wherever the top-down/bottom-up sweeps
+            // happened to land it, so a cluster sharing a weighted centre reads as
+            // centred on that target instead of stacked toward one edge.
+            const firstId = ids[0];
+            const lastId = ids[ids.length - 1];
+            const groupTop = nodeY.get(firstId) ?? 0;
+            const groupBottom = (nodeY.get(lastId) ?? 0) + (nodeH.get(lastId) ?? 0);
+            const idealGroupTop = Math.max(0, (height - (groupBottom - groupTop)) / 2);
+            const recentreShift = idealGroupTop - groupTop;
+            if (recentreShift !== 0) {
+                for (const id of ids) {
+                    nodeY.set(id, (nodeY.get(id) ?? 0) + recentreShift);
+                }
+            }
         }
     }
     // Build computed nodes

package/dist/_chart/types.d.ts

@@ -1,5 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { BarChartDataPoint } from '../BarChart/properties';
+/**
+ * Corner radius (px) shared by every chart shape (bar/column rects, funnel
+ * stage bars, sankey nodes). Mirrors Lighthouse's `--radius` design token
+ * (0.25rem = 4px at the 16px root). SVG `rx`/`ry` attributes and the
+ * `roundedRectPath()` curve builder in `_chart/paths.ts` consume plain JS
+ * numbers, so this constant is the chart-layer equivalent of `var(--radius)`
+ * for surfaces CSS cannot reach. Consumers who need runtime sync to a
+ * *changed* `--radius` should pass the corresponding radius prop explicitly.
+ */
+export declare const DEFAULT_CHART_CORNER_RADIUS = 4;
 export type Margin = {
     top: number;
     right: number;

package/dist/_chart/types.js

@@ -1 +1,11 @@
-export {};
+// ── Shared constants ──────────────────────────────────────────
+/**
+ * Corner radius (px) shared by every chart shape (bar/column rects, funnel
+ * stage bars, sankey nodes). Mirrors Lighthouse's `--radius` design token
+ * (0.25rem = 4px at the 16px root). SVG `rx`/`ry` attributes and the
+ * `roundedRectPath()` curve builder in `_chart/paths.ts` consume plain JS
+ * numbers, so this constant is the chart-layer equivalent of `var(--radius)`
+ * for surfaces CSS cannot reach. Consumers who need runtime sync to a
+ * *changed* `--radius` should pass the corresponding radius prop explicitly.
+ */
+export const DEFAULT_CHART_CORNER_RADIUS = 4;

package/package.json

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