@juspay/svelte-ui-components 2.111.0 → 2.111.2

package/dist/StatCard/StatCard.svelte

@@ -85,13 +85,18 @@
   class="statcard {classes ?? ''}"
   class:statcard-interactive={isInteractive}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
   role={isInteractive ? 'button' : null}
   tabindex={isInteractive ? 0 : null}
   onclick={isInteractive ? onclick : null}
   onkeydown={isInteractive ? handleKeydown : null}
 >
   {#if hasHeaderContent}
-    <div class="statcard-header" data-pw={typeof testId === 'string' ? `${testId}-header` : null}>
+    <div
+      class="statcard-header"
+      data-pw={typeof testId === 'string' ? `${testId}-header` : null}
+      testID={typeof testId === 'string' ? `${testId}-header` : null}
+    >
       <div class="statcard-header-left">
         {#if hasTitle}
           {#if tooltip}
@@ -115,6 +120,7 @@
             <div
               class="statcard-title"
               data-pw={typeof testId === 'string' ? `${testId}-title` : null}
+              testID={typeof testId === 'string' ? `${testId}-title` : null}
             >
               {title}
             </div>
@@ -146,15 +152,21 @@
       class="statcard-rows"
       class:statcard-rows-horizontal={rowsDirection === 'row'}
       data-pw={typeof testId === 'string' ? `${testId}-rows` : null}
+      testID={typeof testId === 'string' ? `${testId}-rows` : null}
     >
       {#each rows as row, rowIndex (rowIndex)}
         {#if rowIndex > 0}
           <div
             class="statcard-row-divider"
             data-pw={typeof testId === 'string' ? `${testId}-row-divider-${rowIndex}` : null}
+            testID={typeof testId === 'string' ? `${testId}-row-divider-${rowIndex}` : null}
           ></div>
         {/if}
-        <div class="statcard-row" data-pw={typeof row.testId === 'string' ? row.testId : null}>
+        <div
+          class="statcard-row"
+          data-pw={typeof row.testId === 'string' ? row.testId : null}
+          testID={typeof row.testId === 'string' ? row.testId : null}
+        >
           {#if typeof row.heading === 'string' && row.heading.length > 0}
             <div class="statcard-row-heading-wrap">
               {#if row.tooltip}
@@ -174,6 +186,7 @@
             <div
               class="statcard-value"
               data-pw={typeof testId === 'string' ? `${testId}-value-${rowIndex}` : null}
+              testID={typeof testId === 'string' ? `${testId}-value-${rowIndex}` : null}
             >
               {row.value}
             </div>
@@ -181,6 +194,7 @@
               <div
                 class="statcard-comparison-value"
                 data-pw={typeof testId === 'string' ? `${testId}-comparison-${rowIndex}` : null}
+                testID={typeof testId === 'string' ? `${testId}-comparison-${rowIndex}` : null}
               >
                 / {row.comparisonValue}
               </div>
@@ -197,6 +211,7 @@
               <div
                 class="statcard-delta statcard-delta-na"
                 data-pw={typeof testId === 'string' ? `${testId}-delta-na-${rowIndex}` : null}
+                testID={typeof testId === 'string' ? `${testId}-delta-na-${rowIndex}` : null}
               >
                 N/A
               </div>
@@ -216,6 +231,9 @@
                   data-pw={typeof testId === 'string'
                     ? `${testId}-breakdown-item-${rowIndex}-${breakdownIndex}`
                     : null}
+                  testID={typeof testId === 'string'
+                    ? `${testId}-breakdown-item-${rowIndex}-${breakdownIndex}`
+                    : null}
                 >
                   <div class="statcard-breakdown-label">{breakdownItem.label}</div>
                   <div class="statcard-breakdown-value-line">
@@ -237,11 +255,19 @@
   {:else}
     <div class="statcard-value-row">
       {#if typeof valueSnippet === 'function'}
-        <div class="statcard-value" data-pw={typeof testId === 'string' ? `${testId}-value` : null}>
+        <div
+          class="statcard-value"
+          data-pw={typeof testId === 'string' ? `${testId}-value` : null}
+          testID={typeof testId === 'string' ? `${testId}-value` : null}
+        >
           {@render valueSnippet()}
         </div>
       {:else if typeof value === 'string' && value.length > 0}
-        <div class="statcard-value" data-pw={typeof testId === 'string' ? `${testId}-value` : null}>
+        <div
+          class="statcard-value"
+          data-pw={typeof testId === 'string' ? `${testId}-value` : null}
+          testID={typeof testId === 'string' ? `${testId}-value` : null}
+        >
           {value}
         </div>
       {/if}
@@ -262,6 +288,7 @@
     <div
       class="statcard-subtitle"
       data-pw={typeof testId === 'string' ? `${testId}-subtitle` : null}
+      testID={typeof testId === 'string' ? `${testId}-subtitle` : null}
     >
       {subtitle}
     </div>

package/dist/Status/Status.svelte

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

package/dist/Stepper/Stepper.svelte

@@ -35,7 +35,12 @@
   );
 </script>
 
-<div class={containerClass} data-pw={typeof testId === 'string' ? testId : null} role="list">
+<div
+  class={containerClass}
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+  role="list"
+>
   {#each steps as currentStep, stepIndex (stepIndex)}
     {@const effectiveStatus = resolveStatus(stepIndex, currentStep.status ?? null)}
     <div

package/dist/Table/BuiltinCell.svelte

@@ -144,6 +144,7 @@
       <span
         class="builtin-icon-label-icon"
         data-pw={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
+        testID={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
       >
         <Img src={String(iconSrc)} alt="" fallback="" />
       </span>
@@ -154,7 +155,11 @@
   {@const data = asJsonObject(value) ?? {}}
   <div class="builtin-image-two-line {alignmentClass}">
     {#if typeof data.imageUrl === 'string' && data.imageUrl}
-      <span class="builtin-thumb" data-pw={column.testId ? `${column.testId}-thumb` : null}>
+      <span
+        class="builtin-thumb"
+        data-pw={column.testId ? `${column.testId}-thumb` : null}
+        testID={column.testId ? `${column.testId}-thumb` : null}
+      >
         <Img
           src={data.imageUrl}
           alt={typeof data.text1 === 'string' ? data.text1 : ''}
@@ -165,6 +170,7 @@
       <span
         class="builtin-thumb builtin-thumb-placeholder"
         data-pw={column.testId ? `${column.testId}-thumb-placeholder` : null}
+        testID={column.testId ? `${column.testId}-thumb-placeholder` : null}
         >{typeof data.text1 === 'string' && data.text1
           ? data.text1.charAt(0).toUpperCase()
           : ''}</span
@@ -222,6 +228,7 @@
             <span
               class="builtin-trend builtin-trend-up"
               data-pw={column.testId ? `${column.testId}-trend-up` : null}
+              testID={column.testId ? `${column.testId}-trend-up` : null}
             >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendUpSvg}</span>
@@ -231,6 +238,7 @@
             <span
               class="builtin-trend builtin-trend-down"
               data-pw={column.testId ? `${column.testId}-trend-down` : null}
+              testID={column.testId ? `${column.testId}-trend-down` : null}
             >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendDownSvg}</span>
@@ -256,6 +264,7 @@
     aria-checked={isChecked ? 'true' : 'false'}
     aria-label={typeof data.ariaLabel === 'string' ? data.ariaLabel : null}
     data-pw={typeof data.testId === 'string' ? data.testId : null}
+    testID={typeof data.testId === 'string' ? data.testId : null}
     onclick={stopClickPropagation}
     onkeydown={stopKeydownPropagation}
     tabindex={-1}
@@ -482,6 +491,7 @@
         rel="noopener noreferrer"
         class="builtin-link-anchor"
         data-pw={column.testId ? `${column.testId}-link-${rowIndex}` : null}
+        testID={column.testId ? `${column.testId}-link-${rowIndex}` : null}
       >
         {link.label ?? link.url}
       </a>
@@ -501,7 +511,8 @@
         {#if copied}
           <span
             class="builtin-link-copied"
-            data-pw={column.testId ? `${column.testId}-link-copied` : null}>Copied</span
+            data-pw={column.testId ? `${column.testId}-link-copied` : null}
+            testID={column.testId ? `${column.testId}-link-copied` : null}>Copied</span
           >
         {/if}
       {/if}

package/dist/Table/Table.svelte

@@ -575,6 +575,7 @@
       value={searchTerm}
       oninput={handleSearchInput}
       data-pw={searchConfig?.testId ?? null}
+      testID={searchConfig?.testId ?? null}
       aria-label={searchConfig?.placeholder ?? 'Search'}
       autocomplete="off"
     />
@@ -602,6 +603,7 @@
   <div
     class="table-container {isTableScrollable ? 'scrollable-table' : ''} {classes ?? ''}"
     data-pw={testId}
+    testID={testId}
   >
     <div
       class="table-scroll-shell"
@@ -632,6 +634,7 @@
                       : headerCheckboxState === 'all'}
                     aria-label="Select all rows"
                     data-pw={typeof testId === 'string' ? `${testId}-select-all` : null}
+                    testID={typeof testId === 'string' ? `${testId}-select-all` : null}
                     {...checkboxSelection?.getRowAttributes
                       ? checkboxSelection.getRowAttributes('__header__', -1)
                       : {}}
@@ -672,6 +675,7 @@
                   class:table-header-sticky={isStickyHeader}
                   class:table-col-highlighted={headerColumn?.highlighted === true}
                   data-pw={headerColumn?.testId ?? null}
+                  testID={headerColumn?.testId ?? null}
                   style:text-align={headerColumn?.align ?? null}
                   style:max-width={headerColumn?.maxWidth ?? null}
                 >
@@ -800,6 +804,7 @@
                   class:table-summary-row={summaryRowIndex !== null &&
                     originalIndex === summaryRowIndex}
                   data-pw={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
+                  testID={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
                   onclick={isRowClickable
                     ? () => handleRowClick(rowIndex, row, originalIndex)
                     : null}
@@ -824,6 +829,9 @@
                         data-pw={typeof testId === 'string'
                           ? `${testId}-row-checkbox-${rowId}`
                           : null}
+                        testID={typeof testId === 'string'
+                          ? `${testId}-row-checkbox-${rowId}`
+                          : null}
                         {...checkboxSelection?.getRowAttributes
                           ? checkboxSelection.getRowAttributes(rowId, rowIndex)
                           : {}}
@@ -859,6 +867,9 @@
                       data-pw={typeof getCellTestId === 'function'
                         ? getCellTestId(row, cellValue, rowIndex)
                         : null}
+                      testID={typeof getCellTestId === 'function'
+                        ? getCellTestId(row, cellValue, rowIndex)
+                        : null}
                       style:text-align={keyedColumn?.align ?? null}
                       style:max-width={keyedColumn?.maxWidth ?? null}
                       title={keyedColumn?.maxWidth && isScalarCell ? String(cellValue) : null}
@@ -869,6 +880,9 @@
                         data-pw={keyedColumn?.testId
                           ? `${keyedColumn.testId}-cell-${rowIndex}`
                           : null}
+                        testID={keyedColumn?.testId
+                          ? `${keyedColumn.testId}-cell-${rowIndex}`
+                          : null}
                       >
                         {#if keyedColumn && typeof keyedColumn.cell === 'function' && keyedRow}
                           {@render keyedColumn.cell(keyedRow, rowIndex, originalIndex)}
@@ -903,10 +917,19 @@
       <!-- DataGrid parity: pagination chrome only renders when the data spans
            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}>
+      <div
+        class="table-footer table-paginator"
+        data-pw={pagination.testId ?? null}
+        testID={pagination.testId ?? null}
+      >
         <span
           class="table-paginator-range"
           data-pw={typeof testId === 'string'
+            ? `${testId}-paginator-range`
+            : pagination?.testId
+              ? `${pagination.testId}-range`
+              : null}
+          testID={typeof testId === 'string'
             ? `${testId}-paginator-range`
             : pagination?.testId
               ? `${pagination.testId}-range`

package/dist/Tabs/Tabs.svelte

@@ -187,7 +187,7 @@
   );
 </script>
 
-<div class={rootClass} class:disabled class:vertical={isVertical} data-pw={testId}>
+<div class={rootClass} class:disabled class:vertical={isVertical} data-pw={testId} testID={testId}>
   {#if showStartArrow}
     <button
       class="tabs-arrow tabs-arrow-start"
@@ -226,6 +226,7 @@
         aria-disabled={disabled ? true : null}
         tabindex={isActiveItem(index) ? 0 : -1}
         data-pw={tabItem?.testId}
+        testID={tabItem?.testId}
         onclick={() => handleTabClick(index)}
         onkeydown={(event) => handleKeydown(event, index)}
       >

package/dist/ThemeSwitcher/ThemeSwitcher.svelte

@@ -113,6 +113,7 @@
     onclick={handleToggle}
     aria-label="Switch theme"
     data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
   >
     {#each options as option, i (option.value)}
       <span class="icon" class:active={i === currentIndex}>
@@ -126,7 +127,11 @@
     {/each}
   </button>
 {:else}
-  <div class="segment-control {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+  <div
+    class="segment-control {classes ?? ''}"
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+  >
     <div
       class="segment-indicator"
       style="left: {indicatorLeft}px; width: {indicatorWidth}px;"

package/dist/Toast/Toast.svelte

@@ -117,6 +117,7 @@
     out:fly={animationConfig.out}
     onoutroend={handleAnimationEnd}
     data-pw={testId}
+    testID={testId}
   >
     {#if typeof leftIcon === 'string' && leftIcon.length > 0}
       <div class="toast-icon-wrapper">
@@ -124,10 +125,10 @@
       </div>
     {/if}
 
-    <div class="toast-message" data-pw={messageTestId}>
+    <div class="toast-message" data-pw={messageTestId} testID={messageTestId}>
       {message}
       {#if typeof subtext === 'string' && subtext.length > 0}
-        <div class="toast-subtext" data-pw={subTextTestId}>{subtext}</div>
+        <div class="toast-subtext" data-pw={subTextTestId} testID={subTextTestId}>{subtext}</div>
       {/if}
 
       {#if typeof bottomContent === 'function'}
@@ -148,6 +149,7 @@
           }
         }}
         data-pw={closeIconTestId}
+        testID={closeIconTestId}
       >
         <Img inlineSvg src={rightIcon} alt="Close" fallback="" />
       </div>

package/dist/Toggle/Toggle.svelte

@@ -18,7 +18,13 @@
   };
 </script>
 
-<div class="container {classes ?? ''}" class:disabled aria-disabled={disabled} data-pw={testId}>
+<div
+  class="container {classes ?? ''}"
+  class:disabled
+  aria-disabled={disabled}
+  data-pw={testId}
+  testID={testId}
+>
   <div class="text" hidden={text.length === 0}>{text}</div>
   <label class="switch">
     <input

package/dist/Toolbar/Toolbar.svelte

@@ -17,8 +17,12 @@
   }: ToolbarProperties = $props();
 </script>
 
-<div class="toolbar {classes ?? ''}" data-pw={testId}>
-  <div class="content" data-pw={typeof testId === 'string' ? `${testId}-content` : null}>
+<div class="toolbar {classes ?? ''}" data-pw={testId} testID={testId}>
+  <div
+    class="content"
+    data-pw={typeof testId === 'string' ? `${testId}-content` : null}
+    testID={typeof testId === 'string' ? `${testId}-content` : null}
+  >
     {#if typeof leftContent === 'function'}
       {@render leftContent()}
     {:else if showBackButton && typeof backIcon === 'string' && backIcon.length > 0}
@@ -31,7 +35,7 @@
         {@render centerContent()}
       </div>
     {:else if typeof text === 'string' && text.length > 0}
-      <div class="text" data-pw={headingTestId}>
+      <div class="text" data-pw={headingTestId} testID={headingTestId}>
         {text}
       </div>
     {/if}

package/dist/Tooltip/Tooltip.svelte

@@ -234,10 +234,9 @@
     }
     const bubble = document.createElement('div');
     bubble.setAttribute('role', 'tooltip');
-    bubble.setAttribute(
-      'data-pw',
-      typeof testId === 'string' ? `${testId}-bubble` : 'tooltip-bubble'
-    );
+    const bubbleTestId = typeof testId === 'string' ? `${testId}-bubble` : 'tooltip-bubble';
+    bubble.setAttribute('data-pw', bubbleTestId);
+    bubble.setAttribute('testID', bubbleTestId);
 
     const coords = computePortalCoords(rect, pos);
     bubble.style.cssText = [
@@ -359,6 +358,7 @@
   onfocusin={showTooltip}
   onfocusout={hideTooltip}
   data-pw={testId}
+  testID={testId}
 >
   {#if typeof icon === 'function' && iconPosition === 'leading'}
     <span class="tooltip-icon" aria-hidden="true">{@render icon()}</span>
@@ -374,6 +374,7 @@
       role="tooltip"
       style:--tooltip-shift="{bubbleShift}px"
       data-pw={typeof testId === 'string' ? `${testId}-bubble` : 'tooltip-bubble'}
+      testID={typeof testId === 'string' ? `${testId}-bubble` : 'tooltip-bubble'}
     >
       <div class="tooltip-arrow"></div>
       {#if typeof content === 'function'}

package/dist/_chart/Axis.svelte

@@ -44,7 +44,11 @@
   const TICK_SIZE = 6;
 </script>
 
-<g class="axis axis-{orientation} {classes ?? ''}" data-pw={`axis-${orientation}`}>
+<g
+  class="axis axis-{orientation} {classes ?? ''}"
+  data-pw={`axis-${orientation}`}
+  testID={`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)}
@@ -59,6 +63,7 @@
               text-anchor="end"
               dominant-baseline="auto"
               data-pw={`tick-label-${i}`}
+              testID={`tick-label-${i}`}
             >
               {format(tick)}
             </text>
@@ -69,6 +74,7 @@
               text-anchor="middle"
               dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
               data-pw={`tick-label-${i}`}
+              testID={`tick-label-${i}`}
             >
               {format(tick)}
             </text>
@@ -105,6 +111,7 @@
           text-anchor={orientation === 'left' ? 'end' : 'start'}
           dominant-baseline="middle"
           data-pw={`tick-label-${i}`}
+          testID={`tick-label-${i}`}
         >
           {format(tick)}
         </text>

package/dist/_chart/ChartContainer.svelte

@@ -69,6 +69,7 @@
   class="chart-container {classes ?? ''}"
   bind:this={containerEl}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if width > 0 && height > 0}
     <svg

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" data-pw={`tooltip-item-${i}`}>
+      <div class="tooltip-item" data-pw={`tooltip-item-${i}`} testID={`tooltip-item-${i}`}>
         {#if item.color}
           <span class="tooltip-swatch" style="background: {item.color}"></span>
         {/if}
@@ -107,6 +107,7 @@
       style="left: {pos.left}px; top: {pos.top}px;"
       use:portalToBody
       data-pw="chart-tooltip"
+      testID="chart-tooltip"
     >
       {@render inner(data)}
     </div>
@@ -118,6 +119,7 @@
       class="chart-tooltip {unstyled ? 'unstyled' : ''} {classes ?? ''}"
       style="left: {pos.left}px; top: {pos.top}px;"
       data-pw="chart-tooltip"
+      testID="chart-tooltip"
     >
       {@render inner(data)}
     </div>

package/dist/_chart/Legend.svelte

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

package/dist/testing-attributes.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Declares the native test-identifier attribute on every DOM element.
+ *
+ * Test ids have to reach two runners: Playwright reads the `data-pw` attribute,
+ * while Appium resolves an element by its native accessibility identifier and
+ * never sees `data-pw`. Components therefore emit both from the same value.
+ *
+ * `data-*` attributes are accepted by Svelte's typings automatically; a bare
+ * `testID` is not, so without this augmentation every emission fails
+ * `svelte-check` with "'testID' does not exist in type HTMLProps<...>".
+ *
+ * Spreading an attribute object would dodge the type error, but a spread makes
+ * Svelte skip its static a11y analysis for that element — silently disabling
+ * real warnings (it turns existing `svelte-ignore` comments into dead code).
+ * Declaring the attribute keeps both the type check and the a11y analysis.
+ *
+ * The declared key is lower-case because Svelte normalises DOM attribute names,
+ * as does `setAttribute` on an HTML document; authors still write `testID`.
+ *
+ * This file ships in `dist`, so consumers get the same typing for their own usage.
+ */
+/* eslint-disable unused-imports/no-unused-vars -- the type parameter name must match
+   svelte/elements' own declaration exactly, or interface merging silently fails. */
+declare module 'svelte/elements' {
+  export interface HTMLAttributes<T extends EventTarget> {
+    /** Native (Appium) test identifier. Mirrors `data-pw`, which Appium cannot read. */
+    testid?: string | null;
+  }
+
+  export interface SVGAttributes<T extends EventTarget> {
+    /** Native (Appium) test identifier. Mirrors `data-pw`, which Appium cannot read. */
+    testid?: string | null;
+  }
+}
+
+export {};

package/package.json

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