@juspay/svelte-ui-components 2.96.2 → 2.97.1

package/dist/Animations/ModalAnimation.svelte

@@ -9,9 +9,16 @@
     align?: ModalAlign;
     transitionType?: ModalTransition;
     children?: Snippet;
+    testId?: string;
   };
 
-  let { enable = true, align = 'bottom', transitionType = 'ALL', children }: Props = $props();
+  let {
+    enable = true,
+    align = 'bottom',
+    transitionType = 'ALL',
+    children,
+    testId
+  }: Props = $props();
 
   let flyAnimationProperties = $derived.by(() => {
     const base = { x: 0, y: 0, duration: 380 };
@@ -34,19 +41,33 @@
 
 {#if enable}
   {#if useFlyAnimation && useOutTransition}
-    <div in:fly|global={flyAnimationProperties} out:fly|global={flyAnimationProperties}>
+    <div
+      in:fly|global={flyAnimationProperties}
+      out:fly|global={flyAnimationProperties}
+      data-pw={typeof testId === 'string' ? testId : null}
+    >
       {@render children?.()}
     </div>
   {:else if useFlyAnimation}
-    <div in:fly|global={flyAnimationProperties}>
+    <div
+      in:fly|global={flyAnimationProperties}
+      data-pw={typeof testId === 'string' ? testId : null}
+    >
       {@render children?.()}
     </div>
   {:else if useOutTransition}
-    <div in:fade|global={fadeAnimationProperties} out:fade|global={fadeAnimationProperties}>
+    <div
+      in:fade|global={fadeAnimationProperties}
+      out:fade|global={fadeAnimationProperties}
+      data-pw={typeof testId === 'string' ? testId : null}
+    >
       {@render children?.()}
     </div>
   {:else}
-    <div in:fade|global={fadeAnimationProperties}>
+    <div
+      in:fade|global={fadeAnimationProperties}
+      data-pw={typeof testId === 'string' ? testId : null}
+    >
       {@render children?.()}
     </div>
   {/if}

package/dist/Animations/ModalAnimation.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     align?: ModalAlign;
     transitionType?: ModalTransition;
     children?: Snippet;
+    testId?: string;
 };
 declare const ModalAnimation: import("svelte").Component<Props, {}, "">;
 type ModalAnimation = ReturnType<typeof ModalAnimation>;

package/dist/Animations/OverlayAnimation.svelte

@@ -4,11 +4,12 @@
 
   type Props = {
     children?: Snippet;
+    testId?: string;
   };
 
-  let { children }: Props = $props();
+  let { children, testId }: Props = $props();
 </script>
 
-<div out:fade={{ duration: 350 }}>
+<div out:fade={{ duration: 350 }} data-pw={typeof testId === 'string' ? testId : null}>
   {@render children?.()}
 </div>

package/dist/Animations/OverlayAnimation.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 type Props = {
     children?: Snippet;
+    testId?: string;
 };
 declare const OverlayAnimation: import("svelte").Component<Props, {}, "">;
 type OverlayAnimation = ReturnType<typeof OverlayAnimation>;

package/dist/BarChart/BarChart.svelte

@@ -884,6 +884,7 @@
                           effectiveHighlightedIndex !== bar.pi)}
                       d={stackedBarPath(bar)}
                       fill={barFillAttr(bar)}
+                      data-pw={`bar-${i}`}
                       tabindex="0"
                       role="button"
                       aria-label="{bar.dataPoint.label}: {getDisplayValue(bar)}"
@@ -912,6 +913,7 @@
                       rx={barRadius}
                       ry={barRadius}
                       fill={barFillAttr(bar)}
+                      data-pw={`bar-${i}`}
                       tabindex="0"
                       role="button"
                       aria-label="{bar.dataPoint.label}: {getDisplayValue(bar)}"
@@ -930,10 +932,12 @@
                     <text
                       class="bar-value"
                       class:bar-value-inside={bl.p.placement === 'inside'}
+                      data-inside={bl.p.placement === 'inside' ? 'true' : 'false'}
                       x={bl.p.x}
                       y={bl.p.y}
                       text-anchor={bl.p.textAnchor}
                       dominant-baseline={bl.p.dominantBaseline}
+                      data-pw={`bar-value-${i}`}
                       style={bl.p.placement === 'inside'
                         ? `fill: ${getContrastColor(bl.bar.color)}; stroke: ${contrastOutline(bl.bar.color)};`
                         : ''}>{bl.text}</text

package/dist/BrandLoader/BrandLoader.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import type { BrandLoaderProperties } from './properties';
 
-  let { brandLogoURL, brandText, subText, classes }: BrandLoaderProperties = $props();
+  let { brandLogoURL, brandText, subText, classes, testId }: BrandLoaderProperties = $props();
 </script>
 
-<div class="background {classes ?? ''}">
+<div class="background {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
   <div class="loader">
     <img src={brandLogoURL} alt="" />
     <div class="text">{brandText}</div>

package/dist/BrandLoader/properties.d.ts

@@ -3,4 +3,5 @@ export type BrandLoaderProperties = {
     brandText: string;
     subText?: string | null;
     classes?: string;
+    testId?: string;
 };

package/dist/Checkbox/Checkbox.svelte

@@ -58,6 +58,7 @@
     tabindex={-1}
     aria-hidden="true"
     onclick={(e: MouseEvent) => e.stopPropagation()}
+    data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
   />
   <span
     class="box"
@@ -69,6 +70,7 @@
     aria-disabled={disabled}
     aria-controls={ariaControls ?? null}
     onkeydown={handleKeyDown}
+    data-pw={typeof testId === 'string' ? `${testId}-box` : null}
   >
     {#if checked && !indeterminate}
       {#if typeof checkedIcon === 'function'}

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -556,6 +556,7 @@
       onclick={togglePicker}
       ariaLabel={isOpen ? 'Close date picker' : 'Open date picker'}
       classes="drp-trigger {isOpen ? 'drp-trigger-open' : ''}"
+      {...typeof testId === 'string' ? { testId: `${testId}-trigger` } : {}}
     >
       {#if typeof triggerSnippet === 'function'}
         {@render triggerSnippet(triggerLabel)}
@@ -652,6 +653,7 @@
       role="dialog"
       aria-label="Date range picker"
       aria-modal="true"
+      data-pw={typeof testId === 'string' ? `${testId}-panel` : null}
     >
       <div class="drp-panel-inner">
         <!-- Preset sidebar -->
@@ -676,11 +678,17 @@
                 role="option"
                 aria-selected={isPresetActive(preset)}
                 onclick={() => handlePreset(preset)}
+                data-pw={typeof testId === 'string' ? `${testId}-preset-${preset.label}` : null}
               >
                 {preset.label}
                 {#if presetCheckmark && isPresetActive(preset)}
                   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                  <span class="drp-preset-check" aria-hidden="true">{@html checkmarkSvg}</span>
+                  <span
+                    class="drp-preset-check"
+                    aria-hidden="true"
+                    data-pw={typeof testId === 'string' ? `${testId}-preset-check` : null}
+                    >{@html checkmarkSvg}</span
+                  >
                 {/if}
               </button>
             {/each}

package/dist/DeltaIndicator/properties.d.ts

@@ -20,7 +20,7 @@ export type OptionalDeltaIndicatorProperties = {
     /** Absolute values at or below this are treated as `neutral` (default 0). */
     neutralThreshold?: number;
     /** Test selector applied as the `data-pw` attribute. */
-    testId?: string;
+    testId?: string | null;
     /** Additional CSS classes for theming. */
     classes?: string;
 };

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -567,6 +567,7 @@
               width={hr.width}
               height={dims.innerHeight}
               fill="transparent"
+              data-pw={`hover-target-${hr.catIdx}`}
               data-category-index={hr.catIdx}
               tabindex="0"
               role="button"

package/dist/FunnelChart/FunnelChart.svelte

@@ -332,6 +332,7 @@
               class:funnel-bar-dimmed={hoveredIndex !== null && hoveredIndex !== index}
               x={bx}
               y={by}
+              data-pw={`funnel-bar-${index}`}
               width={stageColumnWidth}
               height={bh}
               fill={color}

package/dist/GridItem/GridItem.svelte

@@ -8,7 +8,8 @@
     showLoader = $bindable(false),
     onclick,
     onkeydown,
-    classes
+    classes,
+    testId
   }: GridItemProperties = $props();
 
   function handleClick(event: MouseEvent) {
@@ -17,7 +18,14 @@
   }
 </script>
 
-<div class="container {classes ?? ''}" onclick={handleClick} {onkeydown} role="button" tabindex="0">
+<div
+  class="container {classes ?? ''}"
+  onclick={handleClick}
+  {onkeydown}
+  role="button"
+  tabindex="0"
+  data-pw={typeof testId === 'string' ? testId : null}
+>
   <div class="grid-header">
     <img src={headerIcon} alt="" class="grid-item-header-icon" />
   </div>

package/dist/GridItem/properties.d.ts

@@ -7,6 +7,7 @@ export type OptionalGridItemProperties = {
     headerIcon?: string | null;
     showLoader?: boolean;
     classes?: string;
+    testId?: string;
 };
 export type GridItemEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/Icon/Icon.svelte

@@ -2,10 +2,17 @@
   import Img from '../Img/Img.svelte';
   import type { IconProperties } from './properties';
 
-  let { icon, svg, text, onclick, onkeydown, classes }: IconProperties = $props();
+  let { icon, svg, text, onclick, onkeydown, classes, testId }: IconProperties = $props();
 </script>
 
-<div class="icon-container {classes ?? ''}" {onclick} {onkeydown} role="button" tabindex="0">
+<div
+  class="icon-container {classes ?? ''}"
+  {onclick}
+  {onkeydown}
+  role="button"
+  tabindex="0"
+  data-pw={typeof testId === 'string' ? testId : null}
+>
   {#if typeof svg === 'string' && svg.length > 0}
     <!-- eslint-disable svelte/no-at-html-tags -->
     <span class="icon-svg">{@html svg}</span>

package/dist/Icon/properties.d.ts

@@ -4,6 +4,7 @@ export type OptionalIconProperties = {
     svg?: string;
     text?: string | null;
     classes?: string;
+    testId?: string;
 };
 export type IconEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/IconStack/IconStack.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import type { IconStackProperties } from './properties';
 
-  let { icons, classes }: IconStackProperties = $props();
+  let { icons, classes, testId }: IconStackProperties = $props();
 </script>
 
-<div class="stack-container {classes ?? ''}">
+<div class="stack-container {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
   {#each icons as icon, i (i)}
     <div class="stack-icon" style:z-index={icons.length - i}>
       {#if icon.type === 'image'}

package/dist/IconStack/properties.d.ts

@@ -5,4 +5,5 @@ export type IconStackItem = {
 export type IconStackProperties = {
     icons: IconStackItem[];
     classes?: string;
+    testId?: string;
 };

package/dist/Input/Input.svelte

@@ -359,7 +359,10 @@
   {/if}
 
   {#if onErrorMessage !== '' && showError && !actionInput}
-    <div class="error-message">
+    <div
+      class="error-message"
+      data-pw={typeof testId === 'string' && testId.length > 0 ? `${testId}-error-message` : null}
+    >
       {onErrorMessage}
     </div>
   {/if}

package/dist/InputButton/InputButton.svelte

@@ -19,7 +19,8 @@
     classes,
     mandatory,
     size,
-    error
+    error,
+    testId
   }: InputButtonProperties = $props();
 
   let validationState = $state<ValidationState>('InProgress');
@@ -61,7 +62,7 @@
   }
 </script>
 
-<div class="container {classes ?? ''}">
+<div class="container {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
   {#if inputProperties.label && inputProperties.label !== ''}
     <label class="label" for={inputProperties.name}>
       {inputProperties.label}{#if mandatory}<span class="mandatory-marker" aria-label="required">

package/dist/InputButton/properties.d.ts

@@ -33,6 +33,7 @@ export type OptionalInputButtonProperties = {
      * internal validation messages surface normally.
      */
     error?: string;
+    testId?: string;
 };
 export type InputButtonEventProperties = {
     inputEventProperties?: InputEventProperties;

package/dist/LineChart/LineChart.svelte

@@ -584,7 +584,14 @@
           {/if}
 
           {#each haloPoints as hp, i (i)}
-            <circle class="dot-halo" cx={hp.x} cy={hp.y} r={dotRadius + 6} fill={hp.color} />
+            <circle
+              class="dot-halo"
+              cx={hp.x}
+              cy={hp.y}
+              r={dotRadius + 6}
+              fill={hp.color}
+              data-pw={`dot-halo-${i}`}
+            />
           {/each}
 
           {#each lines as line, si (si)}
@@ -672,6 +679,7 @@
             width={dims.innerWidth}
             height={dims.innerHeight}
             fill="transparent"
+            data-pw="hover-overlay"
             onpointermove={handleOverlayMove}
             onpointerleave={handleLeave}
             onclick={handleClick}

package/dist/LoadingDots/LoadingDots.svelte

@@ -13,7 +13,12 @@
   data-pw={typeof testId === 'string' ? testId : null}
 >
   {#each { length: count } as _, i (i)}
-    <span class="dot" class:pulse={animation === 'pulse'} style="--i: {i}"></span>
+    <span
+      class="dot"
+      class:pulse={animation === 'pulse'}
+      style="--i: {i}"
+      data-pw={typeof testId === 'string' ? `${testId}-dot-${i}` : null}
+    ></span>
   {/each}
 </span>
 

package/dist/ProportionBar/ProportionBar.svelte

@@ -109,6 +109,7 @@
       role={showLegend ? null : 'img'}
       aria-hidden={showLegend ? 'true' : null}
       aria-label={showLegend ? null : ariaSummary}
+      data-pw={typeof testId === 'string' ? `${testId}-svg` : null}
     >
       {#each rectSegments as rectSegment, rectIndex (rectIndex)}
         <rect
@@ -130,9 +131,16 @@
   </div>
 
   {#if showLegend}
-    <ul class="proportion-bar-legend" aria-label="Segment breakdown">
+    <ul
+      class="proportion-bar-legend"
+      aria-label="Segment breakdown"
+      data-pw={typeof testId === 'string' ? `${testId}-legend` : null}
+    >
       {#each computedSegments as computedSegment, legendIndex (legendIndex)}
-        <li class="proportion-bar-legend-item">
+        <li
+          class="proportion-bar-legend-item"
+          data-pw={typeof testId === 'string' ? `${testId}-legend-item-${legendIndex}` : null}
+        >
           <span
             class="proportion-bar-swatch"
             style="background: {computedSegment.color};"

package/dist/SankeyChart/SankeyChart.svelte

@@ -95,7 +95,35 @@
     return Math.max(0, Math.min(chartWidth * 0.25, wanted));
   });
 
-  let plotWidth = $derived(Math.max(0, chartWidth - MARGIN * 2 - lastColumnLabelGutter));
+  // First-column labels render to the LEFT of their node, anchored `end` into the
+  // left margin. The bare 40px margin is nowhere near enough for real source labels
+  // ("SESSIONS", "Source A", "START") — they truncate to a few characters and, once
+  // the room falls below an ellipsis, vanish entirely. Mirror the sink gutter:
+  // reserve a capped left gutter sized from the source-node labels (sources are what
+  // land in the first column) and shift the diagram right by it.
+  let firstColumnLabelGutter = $derived.by(() => {
+    if (!showLabels || nodes.length === 0 || chartWidth <= 0) {
+      return 0;
+    }
+    const targetIds = new Set(links.map((link) => link.target));
+    const sourceLabels = nodes
+      .filter((node) => !targetIds.has(node.id))
+      .map((node) => node.label ?? node.id);
+    if (sourceLabels.length === 0) {
+      return 0;
+    }
+    const longestPx =
+      Math.max(...sourceLabels.map((label) => measureText(label, labelFont).width)) +
+      (showValues ? measureText(' (999,999)', labelFont).width : 0);
+    const wanted = longestPx + 10 + dataLabelOffsetX;
+    // Same 25% cap and 0 floor as the sink gutter so the two together can never
+    // starve the diagram, and a negative dataLabelOffsetX can't push past the margin.
+    return Math.max(0, Math.min(chartWidth * 0.25, wanted));
+  });
+
+  let plotWidth = $derived(
+    Math.max(0, chartWidth - MARGIN * 2 - firstColumnLabelGutter - lastColumnLabelGutter)
+  );
   let layout = $derived(
     computeSankeyLayout(
       nodes,
@@ -151,12 +179,13 @@
     // node.x + nodeWidth + 6 + dataLabelOffsetX, so the room before the next
     // column's bar shrinks by the same offset. Omitting it let "fitting"
     // labels run under the neighbouring column's node rect.
-    // First-column labels anchor `end` at node.x - 6 - offset with node.x = 0,
-    // so their room is exactly the left margin minus that inset — budgeting
-    // more pushes long labels past the SVG's left edge, where they clip.
+    // First-column labels anchor `end` at node.x - 6 - offset with node.x = 0.
+    // The diagram is shifted right by firstColumnLabelGutter, so the room to the
+    // SVG's left edge is that gutter plus the base margin, minus the inset —
+    // symmetric with the last column's sink-gutter budget below.
     const available =
       column === 0
-        ? Math.max(0, MARGIN - 6 - dataLabelOffsetX)
+        ? Math.max(0, firstColumnLabelGutter + MARGIN - 6 - dataLabelOffsetX)
         : column === columnCount - 1
           ? Math.max(0, lastColumnLabelGutter + MARGIN - 6 - dataLabelOffsetX)
           : Math.max(0, colWidth - nodeWidth - 12 - dataLabelOffsetX);
@@ -396,7 +425,7 @@
     <div class="chart-empty">{@render empty()}</div>
   {:else}
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio} {maxHeight}>
-      <g transform="translate({MARGIN}, {MARGIN})">
+      <g transform="translate({MARGIN + firstColumnLabelGutter}, {MARGIN})">
         {#if columnLabels != null && columnLabels.length > 0}
           {#each columnLabels.slice(0, columnCount) as label, ci (ci)}
             <text

package/dist/Select/Select.svelte

@@ -427,6 +427,7 @@
             {disabled}
             autocomplete="off"
             tabindex={disabled ? -1 : 0}
+            data-pw={typeof testId === 'string' ? `${testId}-search` : null}
           />
         {/if}
       {:else}
@@ -451,6 +452,7 @@
             {disabled}
             autocomplete="off"
             tabindex={disabled ? -1 : 0}
+            data-pw={typeof testId === 'string' ? `${testId}-search` : null}
           />
         {:else if value.length === 0}
           <span class="select-placeholder">{placeholder}</span>
@@ -468,6 +470,7 @@
         {disabled}
         autocomplete="off"
         tabindex={disabled ? -1 : 0}
+        data-pw={typeof testId === 'string' ? `${testId}-search` : null}
       />
     {:else}
       <span class={displayText.length > 0 ? 'select-value' : 'select-placeholder'}>
@@ -524,12 +527,17 @@
                   class:checked={allFilteredSelected}
                   class:indeterminate={selectAllIndeterminate}
                   aria-hidden="true"
+                  data-checked={allFilteredSelected ? 'true' : 'false'}
+                  data-pw={typeof testId === 'string' ? `${testId}-select-all-indicator` : null}
                 >
                   {#if allFilteredSelected}
                     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                     <span class="select-option-check">{@html checkmarkSvg}</span>
                   {:else if selectAllIndeterminate}
-                    <span class="select-option-dash"></span>
+                    <span
+                      class="select-option-dash"
+                      data-pw={typeof testId === 'string' ? `${testId}-select-all-dash` : null}
+                    ></span>
                   {/if}
                 </span>
               {/if}
@@ -567,6 +575,10 @@
                     class="select-option-indicator"
                     class:checked={value.includes(row.item.id)}
                     aria-hidden="true"
+                    data-checked={value.includes(row.item.id) ? 'true' : 'false'}
+                    data-pw={typeof testId === 'string'
+                      ? `${testId}-option-indicator-${row.item.id}`
+                      : null}
                   >
                     {#if value.includes(row.item.id)}
                       <!-- eslint-disable-next-line svelte/no-at-html-tags -->

package/dist/Sheet/Sheet.svelte

@@ -145,6 +145,7 @@
       aria-modal="true"
       aria-label={title ?? 'Sheet'}
       tabindex="-1"
+      data-pw={typeof testId === 'string' ? `${testId}-panel` : null}
       transition:fly|global={flyParams}
       onintroend={handleIntroEnd}
       onoutroend={handleOutroEnd}

package/dist/StatCard/StatCard.svelte

@@ -91,7 +91,7 @@
   onkeydown={isInteractive ? handleKeydown : null}
 >
   {#if hasHeaderContent}
-    <div class="statcard-header">
+    <div class="statcard-header" data-pw={typeof testId === 'string' ? `${testId}-header` : null}>
       <div class="statcard-header-left">
         {#if hasTitle}
           {#if tooltip}
@@ -112,7 +112,12 @@
               </span>
             </Tooltip>
           {:else}
-            <div class="statcard-title">{title}</div>
+            <div
+              class="statcard-title"
+              data-pw={typeof testId === 'string' ? `${testId}-title` : null}
+            >
+              {title}
+            </div>
           {/if}
         {/if}
         {#if checkbox}
@@ -137,10 +142,17 @@
   {/if}
 
   {#if hasRows && rows}
-    <div class="statcard-rows" class:statcard-rows-horizontal={rowsDirection === 'row'}>
+    <div
+      class="statcard-rows"
+      class:statcard-rows-horizontal={rowsDirection === 'row'}
+      data-pw={typeof testId === 'string' ? `${testId}-rows` : null}
+    >
       {#each rows as row, rowIndex (rowIndex)}
         {#if rowIndex > 0}
-          <div class="statcard-row-divider"></div>
+          <div
+            class="statcard-row-divider"
+            data-pw={typeof testId === 'string' ? `${testId}-row-divider-${rowIndex}` : null}
+          ></div>
         {/if}
         <div class="statcard-row" data-pw={typeof row.testId === 'string' ? row.testId : null}>
           {#if typeof row.heading === 'string' && row.heading.length > 0}
@@ -159,9 +171,18 @@
             </div>
           {/if}
           <div class="statcard-row-value-line">
-            <div class="statcard-value">{row.value}</div>
+            <div
+              class="statcard-value"
+              data-pw={typeof testId === 'string' ? `${testId}-value-${rowIndex}` : null}
+            >
+              {row.value}
+            </div>
             {#if typeof row.change === 'number'}
-              <DeltaIndicator value={row.change} invertColors={row.invertChangeColors ?? false} />
+              <DeltaIndicator
+                value={row.change}
+                invertColors={row.invertChangeColors ?? false}
+                testId={testId ? `${testId}-delta-${rowIndex}` : null}
+              />
             {/if}
             {#if typeof row.additionalContent === 'string' && row.additionalContent.length > 0}
               <div class="statcard-row-additional">{row.additionalContent}</div>
@@ -173,7 +194,12 @@
             {/if}
             <div class="statcard-breakdown-grid">
               {#each row.breakdown as breakdownItem, breakdownIndex (breakdownIndex)}
-                <div class="statcard-breakdown-item">
+                <div
+                  class="statcard-breakdown-item"
+                  data-pw={typeof testId === 'string'
+                    ? `${testId}-breakdown-item-${rowIndex}-${breakdownIndex}`
+                    : null}
+                >
                   <div class="statcard-breakdown-label">{breakdownItem.label}</div>
                   <div class="statcard-breakdown-value">{breakdownItem.value}</div>
                   {#if typeof breakdownItem.change === 'number'}
@@ -192,9 +218,13 @@
   {:else}
     <div class="statcard-value-row">
       {#if typeof valueSnippet === 'function'}
-        <div class="statcard-value">{@render valueSnippet()}</div>
+        <div class="statcard-value" data-pw={typeof testId === 'string' ? `${testId}-value` : null}>
+          {@render valueSnippet()}
+        </div>
       {:else if typeof value === 'string' && value.length > 0}
-        <div class="statcard-value">{value}</div>
+        <div class="statcard-value" data-pw={typeof testId === 'string' ? `${testId}-value` : null}>
+          {value}
+        </div>
       {/if}
 
       {#if hasDelta}
@@ -210,7 +240,12 @@
   {/if}
 
   {#if typeof subtitle === 'string' && subtitle.length > 0}
-    <div class="statcard-subtitle">{subtitle}</div>
+    <div
+      class="statcard-subtitle"
+      data-pw={typeof testId === 'string' ? `${testId}-subtitle` : null}
+    >
+      {subtitle}
+    </div>
   {/if}
 
   {#if children}

package/dist/Status/Status.svelte

@@ -10,11 +10,12 @@
     buttonProperties,
     classes,
     onbuttonClick,
-    icon
+    icon,
+    testId
   }: StatusProperties = $props();
 </script>
 
-<div class="background {classes ?? ''}">
+<div class="background {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
   <div class="order-status">
     <div class="status-image">
       {#if icon}

package/dist/Status/properties.d.ts

@@ -12,6 +12,7 @@ export type StatusProperties = StatusEventProperties & {
      * priority over `statusIcon` when provided.
      */
     icon?: Snippet;
+    testId?: string;
 };
 export type StatusEventProperties = {
     onbuttonClick?: () => void;

package/dist/Table/BuiltinCell.svelte

@@ -141,7 +141,10 @@
     : []}
   <div class="builtin-icon-label {alignmentClass}">
     {#each icons as iconSrc, iconIndex (`${iconIndex}-${iconSrc}`)}
-      <span class="builtin-icon-label-icon">
+      <span
+        class="builtin-icon-label-icon"
+        data-pw={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
+      >
         <Img src={String(iconSrc)} alt="" fallback="" />
       </span>
     {/each}
@@ -151,7 +154,7 @@
   {@const data = asJsonObject(value) ?? {}}
   <div class="builtin-image-two-line {alignmentClass}">
     {#if typeof data.imageUrl === 'string' && data.imageUrl}
-      <span class="builtin-thumb">
+      <span class="builtin-thumb" data-pw={column.testId ? `${column.testId}-thumb` : null}>
         <Img
           src={data.imageUrl}
           alt={typeof data.text1 === 'string' ? data.text1 : ''}
@@ -159,7 +162,10 @@
         />
       </span>
     {:else}
-      <span class="builtin-thumb builtin-thumb-placeholder"></span>
+      <span
+        class="builtin-thumb builtin-thumb-placeholder"
+        data-pw={column.testId ? `${column.testId}-thumb-placeholder` : null}
+      ></span>
     {/if}
     <div class="builtin-two-line {alignmentClass}">
       <span class="builtin-primary-text">{typeof data.text1 === 'string' ? data.text1 : '-'}</span>
@@ -171,8 +177,12 @@
   {@const tags = asTagArrayItems(value)}
   {#if tags}
     <div class="builtin-tag-array {alignmentClass}">
-      {#each tags as tag (tag.text)}
-        <Pill text={tag.text} classes={tag.classes ?? ''} />
+      {#each tags as tag, tagIndex (`${tagIndex}-${tag.text}`)}
+        <Pill
+          text={tag.text}
+          classes={tag.classes ?? ''}
+          testId={tag.testId ?? (column.testId && `${column.testId}-tag-${tagIndex}`)}
+        />
       {/each}
     </div>
   {:else}
@@ -206,13 +216,19 @@
         {/if}
         {#if typeof compare.trendPercent === 'number'}
           {#if compare.trendPercent > 0}
-            <span class="builtin-trend builtin-trend-up">
+            <span
+              class="builtin-trend builtin-trend-up"
+              data-pw={column.testId ? `${column.testId}-trend-up` : null}
+            >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendUpSvg}</span>
               {compare.trendPercent}%
             </span>
           {:else if compare.trendPercent < 0}
-            <span class="builtin-trend builtin-trend-down">
+            <span
+              class="builtin-trend builtin-trend-down"
+              data-pw={column.testId ? `${column.testId}-trend-down` : null}
+            >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendDownSvg}</span>
               {compare.trendPercent}%
@@ -480,7 +496,10 @@
           </Button>
         </span>
         {#if copied}
-          <span class="builtin-link-copied">Copied</span>
+          <span
+            class="builtin-link-copied"
+            data-pw={column.testId ? `${column.testId}-link-copied` : null}>Copied</span
+          >
         {/if}
       {/if}
     </div>

package/dist/Table/Table.svelte

@@ -630,6 +630,7 @@
                       ? 'mixed'
                       : headerCheckboxState === 'all'}
                     aria-label="Select all rows"
+                    data-pw={typeof testId === 'string' ? `${testId}-select-all` : null}
                     {...checkboxSelection?.getRowAttributes
                       ? checkboxSelection.getRowAttributes('__header__', -1)
                       : {}}
@@ -817,6 +818,9 @@
                         aria-checked={rowSelected}
                         aria-disabled={rowDisabled}
                         aria-label={`Select row ${rowId || 'non-selectable'}`}
+                        data-pw={typeof testId === 'string'
+                          ? `${testId}-row-checkbox-${rowId}`
+                          : null}
                         {...checkboxSelection?.getRowAttributes
                           ? checkboxSelection.getRowAttributes(rowId, rowIndex)
                           : {}}
@@ -859,6 +863,9 @@
                       <div
                         class={isContentScrollable ? 'scrollable-content' : ''}
                         class:table-cell-clamp={keyedColumn?.maxWidth && isScalarCell}
+                        data-pw={keyedColumn?.testId
+                          ? `${keyedColumn.testId}-cell-${rowIndex}`
+                          : null}
                       >
                         {#if keyedColumn && typeof keyedColumn.cell === 'function' && keyedRow}
                           {@render keyedColumn.cell(keyedRow, rowIndex, originalIndex)}
@@ -894,7 +901,14 @@
            more than one page (or the server reports more chunks); a
            single-page table shows no footer. -->
       <div class="table-footer table-paginator" data-pw={pagination.testId ?? null}>
-        <span class="table-paginator-range">{paginationRangeText}</span>
+        <span
+          class="table-paginator-range"
+          data-pw={typeof testId === 'string'
+            ? `${testId}-paginator-range`
+            : pagination?.testId
+              ? `${pagination.testId}-range`
+              : null}>{paginationRangeText}</span
+        >
         <span class="table-paginator-controls">
           {#if pageSizeOptions.length > 0}
             <span class="table-paginator-size">

package/dist/Table/properties.d.ts

@@ -52,6 +52,7 @@ export type TableImageTwoLineTextCellData = {
 export type TableTagArrayCellItem = {
     text: string;
     classes?: string;
+    testId?: string;
 };
 /** Cell shape for `type: 'avatar-stack'` — initials chips with overflow. */
 export type TableAvatarStackCellData = {
@@ -243,9 +244,6 @@ export type TableColumn = {
     /**
      * Horizontal alignment for this column's header and body cells. When unset,
      * cells follow the table-wide `--table-text-align` (left by default).
-     * Built-in flex cells (compare, two-line-text, text-tag, icon-label,
-     * image-two-line-text, tag-array, avatar-stack) mirror it into their flex
-     * alignment so stacked/inline content follows the aligned edge too.
      */
     align?: 'left' | 'center' | 'right';
     /**

package/dist/Toolbar/Toolbar.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <div class="toolbar {classes ?? ''}" data-pw={testId}>
-  <div class="content">
+  <div class="content" data-pw={typeof testId === 'string' ? `${testId}-content` : null}>
     {#if typeof leftContent === 'function'}
       {@render leftContent()}
     {:else if showBackButton && typeof backIcon === 'string' && backIcon.length > 0}

package/dist/Tooltip/Tooltip.svelte

@@ -234,6 +234,10 @@
     }
     const bubble = document.createElement('div');
     bubble.setAttribute('role', 'tooltip');
+    bubble.setAttribute(
+      'data-pw',
+      typeof testId === 'string' ? `${testId}-bubble` : 'tooltip-bubble'
+    );
 
     const coords = computePortalCoords(rect, pos);
     bubble.style.cssText = [
@@ -369,6 +373,7 @@
       class="tooltip-bubble {displayPosition}"
       role="tooltip"
       style:--tooltip-shift="{bubbleShift}px"
+      data-pw={typeof testId === 'string' ? `${testId}-bubble` : 'tooltip-bubble'}
     >
       <div class="tooltip-arrow"></div>
       {#if typeof content === 'function'}

package/dist/_chart/Axis.svelte

@@ -44,7 +44,7 @@
   const TICK_SIZE = 6;
 </script>
 
-<g class="axis axis-{orientation} {classes ?? ''}">
+<g class="axis axis-{orientation} {classes ?? ''}" data-pw={`axis-${orientation}`}>
   {#if isHorizontal}
     <line class="axis-line" x1={scale.range[0]} x2={scale.range[1]} y1={0} y2={0} />
     {#each tickValues as tick, i (i)}
@@ -58,6 +58,7 @@
               transform="translate(0, {TICK_SIZE + 4}) rotate(-45)"
               text-anchor="end"
               dominant-baseline="auto"
+              data-pw={`tick-label-${i}`}
             >
               {format(tick)}
             </text>
@@ -67,6 +68,7 @@
               y={orientation === 'bottom' ? TICK_SIZE + 4 : -(TICK_SIZE + 4)}
               text-anchor="middle"
               dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
+              data-pw={`tick-label-${i}`}
             >
               {format(tick)}
             </text>
@@ -102,6 +104,7 @@
           x={orientation === 'left' ? -(TICK_SIZE + 4) : TICK_SIZE + 4}
           text-anchor={orientation === 'left' ? 'end' : 'start'}
           dominant-baseline="middle"
+          data-pw={`tick-label-${i}`}
         >
           {format(tick)}
         </text>

package/dist/_chart/ChartTooltip.svelte

@@ -86,7 +86,7 @@
       <div class="tooltip-title">{tooltipData.title}</div>
     {/if}
     {#each tooltipData.items as item, i (i)}
-      <div class="tooltip-item">
+      <div class="tooltip-item" data-pw={`tooltip-item-${i}`}>
         {#if item.color}
           <span class="tooltip-swatch" style="background: {item.color}"></span>
         {/if}
@@ -106,6 +106,7 @@
       class="chart-tooltip portal {unstyled ? 'unstyled' : ''} {classes ?? ''}"
       style="left: {pos.left}px; top: {pos.top}px;"
       use:portalToBody
+      data-pw="chart-tooltip"
     >
       {@render inner(data)}
     </div>
@@ -116,6 +117,7 @@
       bind:clientHeight={tooltipHeight}
       class="chart-tooltip {unstyled ? 'unstyled' : ''} {classes ?? ''}"
       style="left: {pos.left}px; top: {pos.top}px;"
+      data-pw="chart-tooltip"
     >
       {@render inner(data)}
     </div>

package/dist/_chart/Legend.svelte

@@ -17,6 +17,7 @@
             class:legend-hidden={item.hidden}
             aria-pressed={!item.hidden}
             onclick={() => onToggle(i)}
+            data-pw={`legend-toggle-${i}`}
           >
             <span class="legend-swatch" style="background: {item.color}"></span>
             <span class="legend-label">{item.label}</span>

package/package.json

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