@juspay/svelte-ui-components 2.80.5 → 2.80.7

package/dist/BarChart/BarChart.svelte

@@ -18,7 +18,7 @@
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath } from '../_chart/paths';
   import type { LegendItem, BarRect } from '../_chart/types';
-  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
+  import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import { SvelteMap } from 'svelte/reactivity';
 
   // ── Per-instance uid prefix for <defs> ids (A1-3) ─────────────
@@ -55,6 +55,8 @@
     barPadding = 0.2,
     barRadius = DEFAULT_CHART_CORNER_RADIUS,
     aspectRatio = 16 / 9,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
+    minHeight = 0,
     xAxisLabel,
     yAxisLabel,
     yDomain,
@@ -108,7 +110,17 @@
 
   let format = $derived(valueFormat ?? formatNumber);
   let isVertical = $derived(orientation === 'vertical');
-  let dims = $derived(computeChartDimensions(chartWidth, chartHeight));
+  // When an axis is hidden its gutter (Y = 50px for tick labels, X = 40px) is dead
+  // space that squeezes the plot into the centre. Collapse the tick-label gutter but
+  // keep a symmetric breathing-room inset so the edge bars (and their value labels)
+  // don't sit flush against the container edges.
+  let dims = $derived(
+    computeChartDimensions(chartWidth, chartHeight, {
+      left: showYAxis ? 50 : 28,
+      right: 28,
+      bottom: showXAxis ? 40 : 8
+    })
+  );
 
   let isMulti = $derived(Array.isArray(series) && series.length > 0);
 
@@ -606,7 +618,13 @@
         : ''}
     >
       <div style={scrollable ? `min-width: ${minScrollWidth}px;` : ''}>
-        <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+        <ChartContainer
+          bind:width={chartWidth}
+          bind:height={chartHeight}
+          {aspectRatio}
+          {maxHeight}
+          {minHeight}
+        >
           <!-- A1-2 / A1-3: SVG <defs> for pattern and gradient fills -->
           {#if defsEntries.length > 0}
             <defs>
@@ -817,7 +835,8 @@
   }
   .bar-value {
     fill: var(--barchart-value-color, #333);
-    font-size: var(--barchart-value-font-size, 11px);
+    font-size: var(--barchart-value-font-size, 14px);
+    font-weight: var(--barchart-value-font-weight, 600);
     font-family: var(--chart-font-family, inherit);
     pointer-events: none;
   }

package/dist/BarChart/properties.d.ts

@@ -84,6 +84,14 @@ export type OptionalBarChartProperties = {
      */
     barRadius?: number;
     aspectRatio?: number;
+    /**
+     * Upper bound (px) on the rendered chart height. The chart height is derived from
+     * its width via `aspectRatio`; on wide or scrollable surfaces that can balloon the
+     * chart. Cap it here to keep the chart compact (defaults to `Infinity` = uncapped).
+     */
+    maxHeight?: number;
+    /** Lower bound (px) on the rendered chart height (defaults to `0`). */
+    minHeight?: number;
     xAxisLabel?: string;
     yAxisLabel?: string;
     yDomain?: [number, number];

package/dist/Button/Button.svelte

@@ -213,6 +213,11 @@
     gap: var(--button-content-gap, 16px);
     visibility: var(--button-visibility, visible);
     box-shadow: var(--button-box-shadow, none);
+
+    /* A button label should never soft-wrap onto a second line as the label text
+       changes (e.g. "Select" -> "Select (1)") — that jitters the layout around it.
+       Consumers that genuinely want multi-line buttons opt back in via the var. */
+    white-space: var(--button-white-space, nowrap);
   }
 
   .button-el.disabled,

package/dist/DeltaIndicator/DeltaIndicator.svelte

@@ -68,6 +68,14 @@
     color: var(--delta-indicator-neutral-color, #8a8a8a);
   }
 
+  /* The tone color is set on the wrapper; the text span must inherit it explicitly.
+     A consumer's global `span { color }` rule (higher weight than inheritance) would
+     otherwise repaint just the number a neutral text color — leaving only the arrow
+     tinted and making up/down deltas read as colorless. */
+  .delta-indicator-text {
+    color: inherit;
+  }
+
   .delta-indicator-arrow {
     display: inline-flex;
     width: var(--delta-indicator-arrow-size, 9px);

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -14,7 +14,7 @@
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath, linePath } from '../_chart/paths';
   import type { LegendItem, TooltipData, LinearScale, BandScale, Point } from '../_chart/types';
-  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
+  import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
 
   // ── Per-instance uid for SVG <defs> ids ────────────────────────
   const uid = Math.random().toString(36).slice(2, 9);
@@ -31,6 +31,8 @@
     barRadius = DEFAULT_CHART_CORNER_RADIUS,
     barPadding = 0.25,
     aspectRatio = 16 / 9,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
+    minHeight = 0,
     minBarHeight = 2,
     margin,
     tooltipPortal = false,
@@ -341,7 +343,13 @@
       <Legend items={legendItems} position="top" />
     {/if}
 
-    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+    <ChartContainer
+      bind:width={chartWidth}
+      bind:height={chartHeight}
+      {aspectRatio}
+      {maxHeight}
+      {minHeight}
+    >
       <g transform="translate({dims.margin.left}, {dims.margin.top})">
         <!-- Left Y-axis (index 0) -->
         <Axis

package/dist/DualAxisBarChart/properties.d.ts

@@ -91,6 +91,13 @@ export type OptionalDualAxisBarChartProperties = {
      * Passed to `ChartContainer`'s ResizeObserver sizing. Default `16/9`.
      */
     aspectRatio?: number;
+    /**
+     * Upper bound (px) on the rendered chart height, so the aspect-ratio-derived height
+     * can't balloon on wide surfaces. Defaults to `Infinity` (uncapped).
+     */
+    maxHeight?: number;
+    /** Lower bound (px) on the rendered chart height (defaults to `0`). */
+    minHeight?: number;
     /**
      * Custom tooltip content. Receives a `DualAxisTooltipContext` and replaces the
      * default multi-series tooltip.

package/dist/FunnelChart/FunnelChart.svelte

@@ -4,7 +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';
+  import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
 
   // ── Props ──────────────────────────────────────────────────────
 
@@ -17,6 +17,8 @@
     showValueLabels = true,
     valueFormat,
     aspectRatio = 16 / 9,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
+    minHeight = 0,
     radius = DEFAULT_CHART_CORNER_RADIUS,
     testId,
     classes,
@@ -219,7 +221,13 @@
   {#if isEmpty && typeof empty === 'function'}
     <div class="chart-empty">{@render empty()}</div>
   {:else}
-    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+    <ChartContainer
+      bind:width={chartWidth}
+      bind:height={chartHeight}
+      {aspectRatio}
+      {maxHeight}
+      {minHeight}
+    >
       <g transform="translate({MARGIN_LEFT}, {MARGIN_TOP})">
         <!-- Stage bars and category labels -->
         {#each data as stage, index (index)}

package/dist/FunnelChart/properties.d.ts

@@ -55,6 +55,13 @@ export type OptionalFunnelChartProperties = {
      * Passed directly to `ChartContainer`. Default is `16 / 9`.
      */
     aspectRatio?: number;
+    /**
+     * Upper bound (px) on the rendered chart height, so the aspect-ratio-derived height
+     * can't balloon on wide surfaces. Defaults to `Infinity` (uncapped).
+     */
+    maxHeight?: number;
+    /** Lower bound (px) on the rendered chart height (defaults to `0`). */
+    minHeight?: number;
     /** Value for the `data-pw` attribute on the chart root element. */
     testId?: string;
     /** CSS class string applied to the chart root element. Useful for CSS-variable theming. */

package/dist/Icon/Icon.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Img from '../Img/Img.svelte';
   import type { IconProperties } from './properties';
 
   let { icon, svg, text, onclick, onkeydown, classes }: IconProperties = $props();
@@ -9,7 +10,9 @@
     <!-- eslint-disable svelte/no-at-html-tags -->
     <span class="icon-svg">{@html svg}</span>
   {:else if icon}
-    <img src={icon} alt="" />
+    <!-- Inline the SVG so currentColor strokes/fills inherit the surrounding text
+         colour; non-SVG URLs fall back to the plain <img> render automatically. -->
+    <Img inlineSvg src={icon} alt="" fallback="" />
   {/if}
   {#if typeof text === 'string' && text.length > 0}
     <div class="icon-text">{text}</div>
@@ -24,7 +27,10 @@
     align-items: center;
     cursor: pointer;
   }
-  .icon-container img {
+  /* Direct child only: the @html branch's svg lives inside .icon-svg and keeps
+     its own 100% sizing rule below. */
+  .icon-container > :global(img),
+  .icon-container > :global(svg) {
     height: var(--icon-height, 20px);
     width: var(--icon-width, 20px);
     padding: var(--icon-padding, 4px);

package/dist/LineChart/LineChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { LineChartProperties, LineChartTooltipContext } from './properties';
+  import { DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import type { ChartHighlightAPI } from '../_chart/highlight';
   import { onMount } from 'svelte';
   import ChartContainer from '../_chart/ChartContainer.svelte';
@@ -45,7 +46,7 @@
     yTickFormat,
     aspectRatio = 16 / 9,
     minHeight = 0,
-    maxHeight = Infinity,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
     tooltipSnippet,
     empty,
     highlightedIndex = null,

package/dist/Menu/Menu.svelte

@@ -13,6 +13,7 @@
     onopen,
     onclose,
     classes,
+    selectedValue = null,
     role: menuRole = 'menu',
     ariaLabel: menuAriaLabel,
     id: menuId
@@ -43,12 +44,20 @@
     }
   }
 
-  function openMenu(startIndex: number = 0) {
+  function openMenu(startIndex: number | null = null) {
     open = true;
-    focusedIndex = startIndex;
+    // With a known selection, opening focuses the selected option (listbox
+    // convention) instead of always parking the focus highlight on item 0.
+    const selectedItem =
+      selectedValue != null
+        ? (items.find((item) => item.value === selectedValue && item.disabled !== true) ?? null)
+        : null;
+    const initialIndex =
+      startIndex ?? (selectedItem !== null ? getSelectableIndex(selectedItem) : 0);
+    focusedIndex = initialIndex;
     onopen?.();
     tick().then(() => {
-      focusItem(startIndex);
+      focusItem(initialIndex);
     });
   }
 
@@ -232,12 +241,17 @@
             class="menu-item"
             class:menu-item-danger={item.danger === true}
             class:menu-item-disabled={item.disabled === true}
+            class:menu-item-selected={selectedValue != null && item.value === selectedValue}
             role={itemRole}
             id={item.id}
             tabindex={item.disabled === true || menuRole === 'listbox' ? -1 : 0}
             aria-disabled={item.disabled === true ? 'true' : null}
-            aria-selected={menuRole === 'listbox' && focusedIndex === getSelectableIndex(item)
-              ? true
+            aria-selected={menuRole === 'listbox'
+              ? selectedValue != null
+                ? item.value === selectedValue
+                : focusedIndex === getSelectableIndex(item)
+                  ? true
+                  : null
               : null}
             onclick={() => selectItem(item)}
             onfocus={() => {
@@ -249,7 +263,10 @@
           >
             {#if typeof item.icon === 'string'}
               <span class="menu-item-icon">
-                <Img src={item.icon} alt="" />
+                <!-- Inline the SVG so currentColor strokes/fills inherit the item's
+                     text colour (danger items tint their icon red, dark theme works);
+                     non-SVG URLs fall back to the plain <img> render automatically. -->
+                <Img inlineSvg src={item.icon} alt="" fallback="" />
               </span>
             {/if}
             <span class="menu-item-label">{item.label}</span>
@@ -315,6 +332,13 @@
     outline: var(--menu-item-focus-outline, none);
   }
 
+  /* True selection (selectedValue match) — distinct from transient focus so the
+     highlight follows the chosen option, not wherever keyboard focus landed. */
+  .menu-item-selected {
+    background-color: var(--menu-item-selected-background-color, transparent);
+    color: var(--menu-item-selected-color, inherit);
+  }
+
   .menu-item-danger {
     color: var(--menu-item-danger-color, #dc3545);
   }
@@ -347,7 +371,8 @@
     flex-shrink: 0;
   }
 
-  .menu-item-icon :global(img) {
+  .menu-item-icon :global(img),
+  .menu-item-icon :global(svg) {
     width: 100%;
     height: 100%;
   }

package/dist/Menu/properties.d.ts

@@ -17,6 +17,11 @@ export type OptionalMenuProperties = {
     testId?: string;
     trigger?: Snippet;
     classes?: string;
+    /** Value of the currently selected item. When set, opening the menu focuses the
+     * selected option instead of the first item, the matching item gets the
+     * `menu-item-selected` class (stylable via --menu-item-selected-*), and
+     * listbox aria-selected reflects the real selection. */
+    selectedValue?: string | null;
     role?: 'menu' | 'listbox';
     ariaLabel?: string;
     id?: string;

package/dist/Modal/Modal.svelte

@@ -5,6 +5,7 @@
   import OverlayAnimation from '../Animations/OverlayAnimation.svelte';
   import { createDebouncer } from '../utils';
   import Button from '../Button/Button.svelte';
+  import Img from '../Img/Img.svelte';
 
   let overlayDiv: HTMLDivElement | null = $state(null);
   let backPressed = $state(false);
@@ -162,7 +163,15 @@
                   tabindex="0"
                   data-pw={leftImageTestId}
                 >
-                  <img class="header-left-img" src={header.leftImage} alt="" />
+                  <!-- Inline SVGs so currentColor icons inherit the header text
+                       colour; non-SVG URLs fall back to a plain <img>. -->
+                  <Img
+                    inlineSvg
+                    src={header.leftImage}
+                    alt=""
+                    fallback=""
+                    classes="header-left-img"
+                  />
                 </div>
               {/if}
               {#if typeof header.text === 'string' && header.text.length > 0}
@@ -178,7 +187,13 @@
                   onkeydown={handleRightImageKeyDown}
                   data-pw={header.buttonTestId}
                 >
-                  <img class="header-right-img" src={header.rightImage} alt="" />
+                  <Img
+                    inlineSvg
+                    src={header.rightImage}
+                    alt=""
+                    fallback=""
+                    classes="header-right-img"
+                  />
                 </div>
               {/if}
             </div>
@@ -409,19 +424,22 @@
     letter-spacing: var(--modal-header-text-letter-spacing);
   }
 
-  .header-left-img,
-  .header-right-img {
+  /* The header images render through the Img component (inline svg or img), so
+     these classes ride on Img's element — match them via :global under the
+     scoped .header to keep the sizing contract. */
+  .header :global(.header-left-img),
+  .header :global(.header-right-img) {
     padding-top: var(--header-img-top-padding, 5px);
     cursor: pointer;
   }
 
-  .header-left-img {
+  .header :global(.header-left-img) {
     margin: var(--header-left-image-margin, 0px 18px 0px 0px);
     width: var(--header-left-image-width, 25px);
     height: var(--header-left-image-height, 25px);
   }
 
-  .header-right-img {
+  .header :global(.header-right-img) {
     width: var(--header-right-image-width, 25px);
     height: var(--header-right-image-height, 25px);
     padding: var(--header-right-image-padding);

package/dist/PieChart/PieChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import type { PieChartProperties } from './properties';
   import ChartContainer from '../_chart/ChartContainer.svelte';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
@@ -23,6 +24,8 @@
     showLegend = false,
     startAngle = -Math.PI / 2,
     aspectRatio,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
+    minHeight = 0,
     valueFormat,
     tooltipSnippet,
     center,
@@ -221,6 +224,8 @@
       bind:width={chartWidth}
       bind:height={chartHeight}
       aspectRatio={effectiveAspectRatio}
+      {maxHeight}
+      {minHeight}
     >
       <g transform="translate({cx}, {cy})">
         {#each slices as slice (slice.index)}

package/dist/PieChart/properties.d.ts

@@ -18,6 +18,13 @@ export type OptionalPieChartProperties = {
     showLegend?: boolean;
     startAngle?: number;
     aspectRatio?: number;
+    /**
+     * Upper bound (px) on the rendered chart height, so the aspect-ratio-derived height
+     * can't balloon on wide surfaces. Defaults to `Infinity` (uncapped).
+     */
+    maxHeight?: number;
+    /** Lower bound (px) on the rendered chart height (defaults to `0`). */
+    minHeight?: number;
     valueFormat?: (value: number) => string;
     tooltipSnippet?: Snippet<[PieChartSlice, number]>;
     center?: Snippet;

package/dist/SankeyChart/SankeyChart.svelte

@@ -5,7 +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 { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
   // ── Props ──────────────────────────────────────────────────────
@@ -20,7 +20,7 @@
     showLabels = true,
     aspectRatio = 16 / 9,
     radius = DEFAULT_CHART_CORNER_RADIUS,
-    maxHeight = Infinity,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
     valueFormat,
     tooltipSnippet,
     empty,
@@ -52,11 +52,39 @@
   let format = $derived(valueFormat ?? formatNumber);
   let isEmpty = $derived(nodes.length === 0);
   const MARGIN = 40;
+  const LABEL_CHAR_PX = 7.2; // ≈ 0.6em at the 12px default label size
+
+  // Final-column labels render to the RIGHT of their node; the bare 40px margin is
+  // nowhere near enough for real funnel labels ("PARTIALLY_FAILED (1,234)"), so they
+  // used to run past the svg edge and clip. Reserve a capped gutter sized from the
+  // sink-node labels (sinks are what land in the final column) and lay the diagram
+  // out in the remaining width instead.
+  let lastColumnLabelGutter = $derived.by(() => {
+    if (!showLabels || nodes.length === 0 || chartWidth <= 0) {
+      return 0;
+    }
+    const sourceIds = new Set(links.map((link) => link.source));
+    const sinkLabels = nodes
+      .filter((node) => !sourceIds.has(node.id))
+      .map((node) => node.label ?? node.id);
+    if (sinkLabels.length === 0) {
+      return 0;
+    }
+    const longestChars =
+      Math.max(...sinkLabels.map((label) => label.length)) + (showValues ? 9 : 0);
+    const wanted = longestChars * LABEL_CHAR_PX + 10 + dataLabelOffsetX;
+    // Cap the reservation so labels can never squeeze the diagram below 3/4 width,
+    // and floor at 0 — a negative dataLabelOffsetX must not inflate the plot
+    // past the right margin.
+    return Math.max(0, Math.min(chartWidth * 0.25, wanted));
+  });
+
+  let plotWidth = $derived(Math.max(0, chartWidth - MARGIN * 2 - lastColumnLabelGutter));
   let layout = $derived(
     computeSankeyLayout(
       nodes,
       links,
-      Math.max(0, chartWidth - MARGIN * 2),
+      plotWidth,
       Math.max(0, chartHeight - MARGIN * 2),
       nodeWidth,
       nodePadding,
@@ -87,21 +115,31 @@
     layout.nodes.length > 0 ? Math.max(...layout.nodes.map((n) => n.column)) + 1 : 0
   );
   let colWidth = $derived(
-    columnCount <= 1
-      ? Math.max(0, chartWidth - MARGIN * 2)
-      : (Math.max(0, chartWidth - MARGIN * 2) - nodeWidth) / (columnCount - 1)
+    columnCount <= 1 ? plotWidth : (plotWidth - nodeWidth) / (columnCount - 1)
   );
 
   // Node labels render alongside their bar; long labels used to overflow into the
   // next column and collide. Clip each to the horizontal room its column actually
   // has and append an ellipsis (the full text stays available via the node tooltip).
-  const LABEL_CHAR_PX = 7.2; // ≈ 0.6em at the 12px default label size
+  // The final column's room is the reserved right gutter (plus the margin), NOT
+  // colWidth — budgeting it at colWidth is what used to let edge labels clip.
+  // Column headers are centred over columns that narrow as the label gutter and
+  // column count grow; untruncated they collide into one unreadable run. Clip to
+  // the column pitch with an ellipsis — the full text stays on the <title>.
+  const truncateColumnLabel = (text: string): string => {
+    const maxChars = Math.floor(Math.max(0, colWidth - 6) / LABEL_CHAR_PX);
+    if (maxChars < 3) {
+      return '';
+    }
+    return text.length > maxChars ? text.slice(0, maxChars - 1) + '…' : text;
+  };
+
   const truncateLabel = (text: string, column: number): string => {
     const available =
       column === 0
         ? MARGIN + 16
         : column === columnCount - 1
-          ? Math.max(colWidth, MARGIN + 24)
+          ? Math.max(0, lastColumnLabelGutter + MARGIN - 6 - dataLabelOffsetX)
           : Math.max(0, colWidth - nodeWidth - 12);
     const maxChars = Math.floor(available / LABEL_CHAR_PX);
     // No usable room — hide the label rather than force text that would overflow;
@@ -308,7 +346,7 @@
               x={ci * colWidth + nodeWidth / 2}
               y={-8}
               text-anchor="middle"
-              dominant-baseline="auto">{label}</text
+              dominant-baseline="auto">{truncateColumnLabel(label)}<title>{label}</title></text
             >
           {/each}
         {/if}

package/dist/StatCard/StatCard.svelte

@@ -100,7 +100,16 @@
               position={tooltip.position ?? 'top'}
               testId={tooltip.testId}
             >
-              <div class="statcard-title statcard-title-tooltip">{title}</div>
+              <span class="statcard-title-tooltip-trigger">
+                <span class="statcard-title statcard-title-tooltip">{title}</span>
+                <span class="statcard-tooltip-icon" aria-hidden="true">
+                  <svg viewBox="0 0 16 16" fill="none">
+                    <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.2" />
+                    <rect x="7.25" y="6.9" width="1.5" height="4.1" rx="0.75" fill="currentColor" />
+                    <circle cx="8" cy="4.8" r="0.9" fill="currentColor" />
+                  </svg>
+                </span>
+              </span>
             </Tooltip>
           {:else}
             <div class="statcard-title">{title}</div>
@@ -262,10 +271,15 @@
     flex-shrink: 0;
   }
 
-  /* Transparent wrapper: keeps the checkbox in the event path (to stop bubbling to
-     the card action) without altering the header layout. */
+  /* Wrapper keeps the checkbox in the event path (to stop bubbling to the card
+     action). `margin-left: auto` pushes it to the header's right edge so the title
+     stays left and the checkbox reads as a right-aligned control. (A previous
+     `display: contents` here removed the box, which silently defeated the flex
+     alignment.) */
   .statcard-header-checkbox {
-    display: contents;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
   }
 
   .statcard-title {
@@ -278,12 +292,38 @@
     text-overflow: ellipsis;
   }
 
+  .statcard-title-tooltip-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--statcard-tooltip-icon-gap, 4px);
+    min-width: 0;
+  }
+
   .statcard-title-tooltip {
     cursor: default;
-    text-decoration: underline dotted;
+    /* Default surface (Euler) uses the ⓘ icon as the tooltip affordance, so the
+       title carries no underline. The Shopify theme flips both tokens — dotted
+       underline on, icon off — via its own stylesheet. */
+    text-decoration: var(--statcard-title-tooltip-decoration, none);
     text-underline-offset: 2px;
   }
 
+  .statcard-tooltip-icon {
+    display: var(--statcard-tooltip-icon-display, inline-flex);
+    align-items: center;
+    justify-content: center;
+    width: var(--statcard-tooltip-icon-size, 14px);
+    height: var(--statcard-tooltip-icon-size, 14px);
+    flex-shrink: 0;
+    color: var(--statcard-tooltip-icon-color, currentColor);
+    cursor: default;
+  }
+
+  .statcard-tooltip-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
   .statcard-value-row {
     display: flex;
     align-items: var(--statcard-value-row-align, baseline);

package/dist/Table/Table.svelte

@@ -121,6 +121,15 @@
       if (typeof valueA === 'number' && typeof valueB === 'number') {
         return direction === 'asc' ? valueA - valueB : valueB - valueA;
       } else if (typeof valueA === 'string' && typeof valueB === 'string') {
+        // Separator-formatted numeric strings (e.g. "1,11,600") must sort by their
+        // numeric value, not lexicographically; anything unparseable falls back to
+        // locale comparison. Empty strings stay in the locale branch so they are not
+        // coerced to 0.
+        const numericA = valueA.trim() === '' ? NaN : Number(valueA.replace(/,/g, ''));
+        const numericB = valueB.trim() === '' ? NaN : Number(valueB.replace(/,/g, ''));
+        if (Number.isFinite(numericA) && Number.isFinite(numericB)) {
+          return direction === 'asc' ? numericA - numericB : numericB - numericA;
+        }
         return direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
       } else if (typeof valueA === 'boolean' && typeof valueB === 'boolean') {
         return direction === 'asc'

package/dist/Toast/Toast.svelte

@@ -120,7 +120,7 @@
   >
     {#if typeof leftIcon === 'string' && leftIcon.length > 0}
       <div class="toast-icon-wrapper">
-        <Img src={leftIcon} alt="" />
+        <Img inlineSvg src={leftIcon} alt="" fallback="" />
       </div>
     {/if}
 
@@ -149,7 +149,7 @@
         }}
         data-pw={closeIconTestId}
       >
-        <Img src={rightIcon} alt="Close" />
+        <Img inlineSvg src={rightIcon} alt="Close" fallback="" />
       </div>
     {/if}
   </div>

package/dist/_chart/types.d.ts

@@ -10,6 +10,14 @@ import type { BarChartDataPoint } from '../BarChart/properties';
  * *changed* `--radius` should pass the corresponding radius prop explicitly.
  */
 export declare const DEFAULT_CHART_CORNER_RADIUS = 4;
+/**
+ * Default upper bound (px) on a chart's rendered height. Chart height is derived
+ * from width via `aspectRatio`, so on a wide surface (e.g. a full-width dashboard
+ * panel) a 16/9 chart can balloon past 700px. This default keeps charts from ever
+ * rendering absurdly tall; a call site that genuinely needs a taller chart passes
+ * an explicit `maxHeight` to override it.
+ */
+export declare const DEFAULT_CHART_MAX_HEIGHT = 420;
 export type Margin = {
     top: number;
     right: number;

package/dist/_chart/types.js

@@ -9,3 +9,11 @@
  * *changed* `--radius` should pass the corresponding radius prop explicitly.
  */
 export const DEFAULT_CHART_CORNER_RADIUS = 4;
+/**
+ * Default upper bound (px) on a chart's rendered height. Chart height is derived
+ * from width via `aspectRatio`, so on a wide surface (e.g. a full-width dashboard
+ * panel) a 16/9 chart can balloon past 700px. This default keeps charts from ever
+ * rendering absurdly tall; a call site that genuinely needs a taller chart passes
+ * an explicit `maxHeight` to override it.
+ */
+export const DEFAULT_CHART_MAX_HEIGHT = 420;

package/package.json

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