@juspay/svelte-ui-components 2.111.0 → 2.111.2

package/dist/Icon/Icon.svelte

@@ -12,6 +12,7 @@
   role="button"
   tabindex="0"
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if typeof svg === 'string' && svg.length > 0}
     <!-- eslint-disable svelte/no-at-html-tags -->

package/dist/IconStack/IconStack.svelte

@@ -4,7 +4,11 @@
   let { icons, classes, testId }: IconStackProperties = $props();
 </script>
 
-<div class="stack-container {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+<div
+  class="stack-container {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={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/IframeViewer/IframeViewer.svelte

@@ -42,7 +42,7 @@
   });
 </script>
 
-<div class="iframe-viewer {classes ?? ''}" data-pw={testId}>
+<div class="iframe-viewer {classes ?? ''}" data-pw={testId} testID={testId}>
   {#if src}
     <iframe bind:this={iframeEl} {src} {title} {allow} {sandbox} {loading} {referrerpolicy}
     ></iframe>

package/dist/Img/Img.svelte

@@ -116,9 +116,17 @@
     aria-label={alt.length > 0 ? alt : null}
     aria-hidden={alt.length === 0 ? 'true' : null}
     data-pw={testId}
+    testID={testId}
   ></svg>
 {:else}
-  <img class={classes ?? ''} src={currentSrc} {alt} onerror={handleFallback} data-pw={testId} />
+  <img
+    class={classes ?? ''}
+    src={currentSrc}
+    {alt}
+    onerror={handleFallback}
+    data-pw={testId}
+    testID={testId}
+  />
 {/if}
 
 <style>

package/dist/Input/Input.svelte

@@ -275,6 +275,7 @@
         onclick={onClick}
         onkeydown={onKeyDown}
         data-pw={testId}
+        testID={testId}
         class:action-input={actionInput}
         style="--focus-border: {addFocusColor ? 1 : 0}px;"
         style:resize={effectiveResize}
@@ -307,6 +308,7 @@
         onclick={onClick}
         onkeydown={onKeyDown}
         data-pw={testId}
+        testID={testId}
         class:action-input={actionInput}
         disabled={disable}
         bind:this={inputElement}
@@ -362,6 +364,7 @@
     <div
       class="error-message"
       data-pw={typeof testId === 'string' && testId.length > 0 ? `${testId}-error-message` : null}
+      testID={typeof testId === 'string' && testId.length > 0 ? `${testId}-error-message` : null}
     >
       {onErrorMessage}
     </div>

package/dist/InputButton/InputButton.svelte

@@ -62,7 +62,11 @@
   }
 </script>
 
-<div class="container {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+<div
+  class="container {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={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/KeyValue/KeyValue.svelte

@@ -29,9 +29,10 @@
   class="key-value key-value--{layout} key-value--{size} {classes}"
   style="--keyvalue-columns: {columns};"
   data-pw={testId}
+  testID={testId}
 >
   {#each visibleItems as item, index (item.label + '-' + index)}
-    <div class="key-value-item" data-pw={item.testId}>
+    <div class="key-value-item" data-pw={item.testId} testID={item.testId}>
       <dt class="key-value-label">
         {#if labelSnippet}
           {@render labelSnippet(item, index)}

package/dist/KeyboardInput/KeyboardInput.svelte

@@ -43,6 +43,7 @@
 <span
   class="keyboard-input {classes ?? ''}"
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
   onclick={interactive ? onclick : null}
   onkeydown={interactive ? handleKeydown : null}
   role={interactive ? 'button' : null}

package/dist/LineChart/LineChart.svelte

@@ -519,6 +519,7 @@
   class="line-chart {classes ?? ''}"
   bind:this={containerEl}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if isEmpty && typeof empty === 'function'}
     <div class="chart-empty">{@render empty()}</div>
@@ -627,6 +628,7 @@
               r={dotRadius + 6}
               fill={hp.color}
               data-pw={`dot-halo-${i}`}
+              testID={`dot-halo-${i}`}
             />
           {/each}
 
@@ -720,6 +722,7 @@
             height={dims.innerHeight}
             fill="transparent"
             data-pw="hover-overlay"
+            testID="hover-overlay"
             onpointermove={handleOverlayMove}
             onpointerleave={handleLeave}
             onclick={handleClick}

package/dist/ListItem/ListItem.svelte

@@ -73,6 +73,7 @@
       aria-selected={ariaSelected}
       {id}
       data-pw={testId}
+      testID={testId}
     >
       <div
         class="top-section"
@@ -82,6 +83,7 @@
         role="button"
         tabindex="0"
         data-pw={topSectionTestId}
+        testID={topSectionTestId}
       >
         <div class="left-content">
           {#if typeof leftImageUrl === 'string' && leftImageUrl.length > 0}
@@ -92,6 +94,7 @@
               role="button"
               tabindex="0"
               data-pw={leftImageTestId}
+              testID={leftImageTestId}
             >
               <Img src={leftImageUrl} alt="" fallback={leftImageFallbackUrl} />
             </div>
@@ -110,6 +113,7 @@
               role="button"
               tabindex="0"
               data-pw={centerTextTestId}
+              testID={centerTextTestId}
             >
               <!-- eslint-disable-next-line -->
               {@html label}
@@ -131,6 +135,7 @@
               role="button"
               tabindex="0"
               data-pw={rightImageTestId}
+              testID={rightImageTestId}
             >
               <div class="right-img-wrapper">
                 <Img src={rightImageUrl} alt="" />

package/dist/Loader/Loader.svelte

@@ -4,7 +4,11 @@
   let { classes, testId }: LoaderProperties = $props();
 </script>
 
-<div class="loader {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}></div>
+<div
+  class="loader {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+></div>
 
 <style>
   .loader {

package/dist/LoadingDots/LoadingDots.svelte

@@ -11,6 +11,7 @@
   role="status"
   aria-label="Loading"
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#each { length: count } as _, i (i)}
     <span
@@ -18,6 +19,7 @@
       class:pulse={animation === 'pulse'}
       style="--i: {i}"
       data-pw={typeof testId === 'string' ? `${testId}-dot-${i}` : null}
+      testID={typeof testId === 'string' ? `${testId}-dot-${i}` : null}
     ></span>
   {/each}
 </span>

package/dist/LottiePlayer/LottiePlayer.svelte

@@ -107,6 +107,7 @@
   aria-hidden={ariaHidden ? 'true' : null}
   role={ariaHidden ? null : 'img'}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 ></div>
 
 <style>

package/dist/Menu/Menu.svelte

@@ -343,6 +343,7 @@
   class="menu-container {classes ?? ''}"
   bind:this={menuContainerEl}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   <div
     class="menu-trigger"
@@ -402,6 +403,7 @@
               }
             }}
             data-pw={typeof testId === 'string' ? `${testId}-item-${item.value}` : null}
+            testID={typeof testId === 'string' ? `${testId}-item-${item.value}` : null}
           >
             {#if typeof item.icon === 'string'}
               <span class="menu-item-icon">

package/dist/Modal/Modal.svelte

@@ -150,6 +150,7 @@
       role="button"
       tabindex="0"
       data-pw={testId}
+      testID={testId}
     >
       <ModalAnimation enable={enableTransition} {align} {transitionType}>
         <div class="modal-content {size}">
@@ -162,6 +163,7 @@
                   role="button"
                   tabindex="0"
                   data-pw={leftImageTestId}
+                  testID={leftImageTestId}
                 >
                   <!-- Inline SVGs so currentColor icons inherit the header text
                        colour; non-SVG URLs fall back to a plain <img>. -->
@@ -175,7 +177,7 @@
                 </div>
               {/if}
               {#if typeof header.text === 'string' && header.text.length > 0}
-                <div class="header-text" data-pw={header.testId}>
+                <div class="header-text" data-pw={header.testId} testID={header.testId}>
                   {header.text}
                 </div>
               {/if}
@@ -186,6 +188,7 @@
                   onclick={handleRightImageClick}
                   onkeydown={handleRightImageKeyDown}
                   data-pw={header.buttonTestId}
+                  testID={header.buttonTestId}
                 >
                   <Img
                     inlineSvg

package/dist/Pagination/Pagination.svelte

@@ -70,6 +70,7 @@
   class="pagination {classes ?? ''}"
   class:disabled
   data-pw={typeof testId === 'string' && testId.length > 0 ? testId : null}
+  testID={typeof testId === 'string' && testId.length > 0 ? testId : null}
 >
   <button
     class="page-button prev-button"
@@ -77,6 +78,7 @@
     onclick={() => goToPage(currentPage - 1)}
     aria-label="Previous page"
     data-pw={typeof prevButtonTestId === 'string' ? prevButtonTestId : null}
+    testID={typeof prevButtonTestId === 'string' ? prevButtonTestId : null}
   >
     &#8249;
   </button>
@@ -105,6 +107,7 @@
       onclick={loadMore}
       aria-label="Load more"
       data-pw={typeof nextButtonTestId === 'string' ? nextButtonTestId : null}
+      testID={typeof nextButtonTestId === 'string' ? nextButtonTestId : null}
     >
       &#8250;
     </button>
@@ -115,6 +118,7 @@
       onclick={() => goToPage(currentPage + 1)}
       aria-label="Next page"
       data-pw={typeof nextButtonTestId === 'string' ? nextButtonTestId : null}
+      testID={typeof nextButtonTestId === 'string' ? nextButtonTestId : null}
     >
       &#8250;
     </button>

package/dist/Phone/Phone.svelte

@@ -16,7 +16,11 @@
   let isModern = $derived(variant === 'modern');
 </script>
 
-<div class="phone-wrapper {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+<div
+  class="phone-wrapper {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
   <div class="side-buttons-left">
     <div class="side-button volume-up"></div>
     <div class="side-button volume-down"></div>

package/dist/PieChart/PieChart.svelte

@@ -292,6 +292,7 @@
   class="pie-chart {classes ?? ''}"
   bind:this={containerEl}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if isEmpty && typeof empty === 'function'}
     <div class="chart-empty">{@render empty()}</div>

package/dist/Pill/Pill.svelte

@@ -52,6 +52,7 @@
   tabindex={interactive ? 0 : null}
   aria-disabled={interactive && disabled ? true : null}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if typeof leadingIcon === 'function'}
     <span class="pill-leading-icon">{@render leadingIcon()}</span>

package/dist/Progress/Progress.svelte

@@ -7,7 +7,11 @@
   let isIndeterminate = $derived(value < 0);
 </script>
 
-<div class="container {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+<div
+  class="container {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
   <div class="track">
     <div
       class="bar"

package/dist/ProportionBar/ProportionBar.svelte

@@ -100,6 +100,7 @@
   class="proportion-bar {classes ?? ''}"
   style={trackHeightStyle}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   <div class="proportion-bar-track">
     <svg
@@ -110,6 +111,7 @@
       aria-hidden={showLegend ? 'true' : null}
       aria-label={showLegend ? null : ariaSummary}
       data-pw={typeof testId === 'string' ? `${testId}-svg` : null}
+      testID={typeof testId === 'string' ? `${testId}-svg` : null}
     >
       {#each rectSegments as rectSegment, rectIndex (rectIndex)}
         <rect
@@ -135,11 +137,13 @@
       class="proportion-bar-legend"
       aria-label="Segment breakdown"
       data-pw={typeof testId === 'string' ? `${testId}-legend` : null}
+      testID={typeof testId === 'string' ? `${testId}-legend` : null}
     >
       {#each computedSegments as computedSegment, legendIndex (legendIndex)}
         <li
           class="proportion-bar-legend-item"
           data-pw={typeof testId === 'string' ? `${testId}-legend-item-${legendIndex}` : null}
+          testID={typeof testId === 'string' ? `${testId}-legend-item-${legendIndex}` : null}
         >
           <span
             class="proportion-bar-swatch"

package/dist/Radio/Radio.svelte

@@ -27,6 +27,7 @@
   class="radio-container {classes ?? ''}"
   class:disabled
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   <input
     type="radio"

package/dist/RelativeTime/RelativeTime.svelte

@@ -92,6 +92,7 @@
       class="relative-time {classes ?? ''}"
       datetime={isoString}
       data-pw={typeof testId === 'string' ? testId : null}
+      testID={typeof testId === 'string' ? testId : null}
     >
       {relativeText}
     </time>
@@ -101,6 +102,7 @@
     class="relative-time {classes ?? ''}"
     datetime={isoString}
     data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
   >
     {relativeText}
   </time>

package/dist/SankeyChart/SankeyChart.svelte

@@ -477,6 +477,7 @@
   class="sankey-chart {classes ?? ''}"
   bind:this={containerEl}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if isEmpty && typeof empty === 'function'}
     <div class="chart-empty">{@render empty()}</div>

package/dist/Scroller/Scroller.svelte

@@ -159,6 +159,7 @@
   class:horizontal={direction === 'horizontal'}
   class:vertical={direction === 'vertical'}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if showArrowControls && canScrollPrev}
     <div class="arrow arrow-prev">

package/dist/Select/Select.svelte

@@ -390,7 +390,7 @@
   class:disabled
   class:ghost={hierarchy === 'ghost'}
   bind:this={containerEl}
-  {...typeof testId === 'string' ? { 'data-pw': testId } : {}}
+  {...typeof testId === 'string' ? { 'data-pw': testId, testID: testId } : {}}
 >
   <div
     class="select-trigger"
@@ -428,6 +428,7 @@
             autocomplete="off"
             tabindex={disabled ? -1 : 0}
             data-pw={typeof testId === 'string' ? `${testId}-search` : null}
+            testID={typeof testId === 'string' ? `${testId}-search` : null}
           />
         {/if}
       {:else}
@@ -453,6 +454,7 @@
             autocomplete="off"
             tabindex={disabled ? -1 : 0}
             data-pw={typeof testId === 'string' ? `${testId}-search` : null}
+            testID={typeof testId === 'string' ? `${testId}-search` : null}
           />
         {:else if value.length === 0}
           <span class="select-placeholder">{placeholder}</span>
@@ -471,6 +473,7 @@
         autocomplete="off"
         tabindex={disabled ? -1 : 0}
         data-pw={typeof testId === 'string' ? `${testId}-search` : null}
+        testID={typeof testId === 'string' ? `${testId}-search` : null}
       />
     {:else}
       <span class={displayText.length > 0 ? 'select-value' : 'select-placeholder'}>
@@ -512,7 +515,9 @@
                 ? `${selectAllLabel}, ${selectedFilteredCount} of ${filteredItems.length} selected`
                 : selectAllLabel}
               tabindex="-1"
-              {...typeof testId === 'string' ? { 'data-pw': `${testId}-select-all` } : {}}
+              {...typeof testId === 'string'
+                ? { 'data-pw': `${testId}-select-all`, testID: `${testId}-select-all` }
+                : {}}
               onclick={toggleSelectAll}
               onmouseenter={() => (highlightedIndex = index)}
             >
@@ -529,6 +534,7 @@
                   aria-hidden="true"
                   data-checked={allFilteredSelected ? 'true' : 'false'}
                   data-pw={typeof testId === 'string' ? `${testId}-select-all-indicator` : null}
+                  testID={typeof testId === 'string' ? `${testId}-select-all-indicator` : null}
                 >
                   {#if allFilteredSelected}
                     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -537,6 +543,7 @@
                     <span
                       class="select-option-dash"
                       data-pw={typeof testId === 'string' ? `${testId}-select-all-dash` : null}
+                      testID={typeof testId === 'string' ? `${testId}-select-all-dash` : null}
                     ></span>
                   {/if}
                 </span>
@@ -555,11 +562,14 @@
               aria-selected={value.includes(row.item.id)}
               tabindex="-1"
               {...typeof row.item.testId === 'string'
-                ? { 'data-pw': row.item.testId }
+                ? { 'data-pw': row.item.testId, testID: row.item.testId }
                 : typeof itemTestId === 'string'
-                  ? { 'data-pw': `${itemTestId}-${row.item.id}` }
+                  ? {
+                      'data-pw': `${itemTestId}-${row.item.id}`,
+                      testID: `${itemTestId}-${row.item.id}`
+                    }
                   : typeof testId === 'string'
-                    ? { 'data-pw': `${testId}-${row.item.id}` }
+                    ? { 'data-pw': `${testId}-${row.item.id}`, testID: `${testId}-${row.item.id}` }
                     : {}}
               onclick={() => selectItem(row.item.id)}
               onmouseenter={() => (highlightedIndex = index)}
@@ -579,6 +589,9 @@
                     data-pw={typeof testId === 'string'
                       ? `${testId}-option-indicator-${row.item.id}`
                       : null}
+                    testID={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

@@ -136,6 +136,7 @@
     role="button"
     tabindex="-1"
     data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
     transition:fade={{ duration: 200 }}
   >
     <div
@@ -146,6 +147,7 @@
       aria-label={title ?? 'Sheet'}
       tabindex="-1"
       data-pw={typeof testId === 'string' ? `${testId}-panel` : null}
+      testID={typeof testId === 'string' ? `${testId}-panel` : null}
       transition:fly|global={flyParams}
       onintroend={handleIntroEnd}
       onoutroend={handleOutroEnd}

package/dist/Shimmer/Shimmer.svelte

@@ -4,7 +4,11 @@
   let { testId, classes }: ShimmerProperties = $props();
 </script>
 
-<div class="shimmer {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}></div>
+<div
+  class="shimmer {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+></div>
 
 <style>
   .shimmer {

package/dist/Slider/Slider.svelte

@@ -43,6 +43,7 @@
     {value}
     {disabled}
     data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
     oninput={handleInput}
     onchange={handleChange}
     style="--slider-fill-percent: {percentage}%"

package/dist/Snippet/Snippet.svelte

@@ -29,7 +29,11 @@
   }
 </script>
 
-<div class="snippet {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+<div
+  class="snippet {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
   <code class="snippet-code">
     <span class="snippet-prompt">{prompt}</span>
     <span class="snippet-text">{text}</span>

package/dist/SplitButton/SplitButton.svelte

@@ -34,6 +34,7 @@
   class="split-button {classes ?? ''}"
   class:disabled
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   <div class="split-button-primary">
     <Button {text} onclick={handlePrimaryClick} {disabled} />

package/dist/SplitInput/SplitInput.svelte

@@ -144,7 +144,7 @@
   }
 </script>
 
-<div class="field-group {classes ?? ''}" data-pw={testId}>
+<div class="field-group {classes ?? ''}" data-pw={testId} testID={testId}>
   {#each fieldConfigs as config, index (index)}
     {#if typeof separator === 'string' && index > 0}
       <span class="field-group-separator">{separator}</span>