@juspay/svelte-ui-components 2.111.0 → 2.111.2

package/dist/Accordion/Accordion.svelte

@@ -45,6 +45,7 @@
   class="accordion {classes ?? ''}"
   class:expanded={expand}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   <div class="accordion-content">
     {@render children?.()}

package/dist/Animations/ModalAnimation.svelte

@@ -45,6 +45,7 @@
       in:fly|global={flyAnimationProperties}
       out:fly|global={flyAnimationProperties}
       data-pw={typeof testId === 'string' ? testId : null}
+      testID={typeof testId === 'string' ? testId : null}
     >
       {@render children?.()}
     </div>
@@ -52,6 +53,7 @@
     <div
       in:fly|global={flyAnimationProperties}
       data-pw={typeof testId === 'string' ? testId : null}
+      testID={typeof testId === 'string' ? testId : null}
     >
       {@render children?.()}
     </div>
@@ -60,6 +62,7 @@
       in:fade|global={fadeAnimationProperties}
       out:fade|global={fadeAnimationProperties}
       data-pw={typeof testId === 'string' ? testId : null}
+      testID={typeof testId === 'string' ? testId : null}
     >
       {@render children?.()}
     </div>
@@ -67,6 +70,7 @@
     <div
       in:fade|global={fadeAnimationProperties}
       data-pw={typeof testId === 'string' ? testId : null}
+      testID={typeof testId === 'string' ? testId : null}
     >
       {@render children?.()}
     </div>

package/dist/Animations/OverlayAnimation.svelte

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

package/dist/AreaChart/AreaChart.svelte

@@ -350,6 +350,7 @@
   class="area-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/Avatar/Avatar.svelte

@@ -47,12 +47,19 @@
     type="button"
     aria-label={alt}
     data-pw={testId}
+    testID={testId}
     {onclick}
   >
     {@render content()}
   </button>
 {:else}
-  <div class="avatar avatar-{size} {classes ?? ''}" role="img" aria-label={alt} data-pw={testId}>
+  <div
+    class="avatar avatar-{size} {classes ?? ''}"
+    role="img"
+    aria-label={alt}
+    data-pw={testId}
+    testID={testId}
+  >
     {@render content()}
   </div>
 {/if}

package/dist/Badge/Badge.svelte

@@ -23,7 +23,11 @@
 </script>
 
 {#if showImage}
-  <div class="badge-icon {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+  <div
+    class="badge-icon {classes ?? ''}"
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+  >
     <div class="badge-wrap">
       <img class="icon-img" src={image} {alt} />
       {#if showBadge}
@@ -38,6 +42,7 @@
     role={standaloneRole}
     aria-label={standaloneAriaLabel}
     data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
   >
     {isDot ? '' : (value ?? '')}
   </div>

package/dist/Banner/Banner.svelte

@@ -53,6 +53,7 @@
     role={role !== null ? role : interactive ? 'button' : null}
     tabindex={interactive ? 0 : null}
     data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
     transition:slide={{ duration: 300 }}
   >
     {#if typeof icon === 'function'}

package/dist/BarChart/BarChart.svelte

@@ -796,6 +796,7 @@
   class="bar-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>
@@ -951,6 +952,7 @@
                       d={stackedBarPath(bar)}
                       fill={barFillAttr(bar)}
                       data-pw={`bar-${i}`}
+                      testID={`bar-${i}`}
                       tabindex="0"
                       role="button"
                       aria-label="{bar.dataPoint.label}: {getDisplayValue(bar)}"
@@ -975,6 +977,7 @@
                       d={valueEndBarPath(bar)}
                       fill={barFillAttr(bar)}
                       data-pw={`bar-${i}`}
+                      testID={`bar-${i}`}
                       tabindex="0"
                       role="button"
                       aria-label="{bar.dataPoint.label}: {getDisplayValue(bar)}"
@@ -999,6 +1002,7 @@
                       text-anchor={bl.p.textAnchor}
                       dominant-baseline={bl.p.dominantBaseline}
                       data-pw={`bar-value-${i}`}
+                      testID={`bar-value-${i}`}
                       style={bl.p.placement === 'inside'
                         ? `fill: ${getContrastColor(bl.bar.color)}; stroke: ${contrastOutline(bl.bar.color)};`
                         : ''}>{bl.text}</text

package/dist/Book/Book.svelte

@@ -101,6 +101,7 @@
 <div
   class="book {classes ?? ''}"
   data-pw={testId}
+  testID={testId}
   onkeydown={handleKeyDown}
   ontouchstart={handleTouchStart}
   ontouchend={handleTouchEnd}

package/dist/BrandLoader/BrandLoader.svelte

@@ -4,7 +4,11 @@
   let { brandLogoURL, brandText, subText, classes, testId }: BrandLoaderProperties = $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="loader">
     <img src={brandLogoURL} alt="" />
     <div class="text">{brandText}</div>

package/dist/Breadcrumb/Breadcrumb.svelte

@@ -8,6 +8,7 @@
   class="breadcrumb {classes ?? ''}"
   aria-label={ariaLabel}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   <ol class="breadcrumb-list">
     {#each items as crumb, index (index)}

package/dist/Browser/Browser.svelte

@@ -17,7 +17,13 @@
   }: BrowserProperties = $props();
 </script>
 
-<div class="browser {variant} {classes ?? ''}" class:shadow class:rounded data-pw={testId}>
+<div
+  class="browser {variant} {classes ?? ''}"
+  class:shadow
+  class:rounded
+  data-pw={testId}
+  testID={testId}
+>
   <div class="chrome">
     <div class="titlebar">
       <div class="dots">

package/dist/Button/Button.svelte

@@ -84,6 +84,7 @@
     {ontouchstart}
     {ontouchend}
     data-pw={testId}
+    testID={testId}
     role={role ?? null}
     aria-label={ariaLabel ?? null}
     aria-expanded={ariaExpanded ?? null}

package/dist/Calendar/Calendar.svelte

@@ -301,7 +301,13 @@
   }
 </script>
 
-<div class="calendar {classes ?? ''}" data-pw={testId} role="application" aria-label="Calendar">
+<div
+  class="calendar {classes ?? ''}"
+  data-pw={testId}
+  testID={testId}
+  role="application"
+  aria-label="Calendar"
+>
   <div class="header">
     <div class="nav-button nav-prev">
       <Button onclick={() => navigateMonth(-1)} ariaLabel="Previous month">

package/dist/Card/Card.svelte

@@ -45,6 +45,7 @@
   class:card-has-scroll={scrollable}
   style={styleAttr}
   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}

package/dist/Carousel/Carousel.svelte

@@ -144,6 +144,7 @@
 <div
   class="carousel-container {classes ?? ''}"
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if views.length > 0}
     <div class="carousel" bind:this={carouselDiv}>
@@ -164,6 +165,7 @@
     <div
       class="dots-wrapper"
       data-pw={typeof dotsWrapperTestId === 'string' ? dotsWrapperTestId : null}
+      testID={typeof dotsWrapperTestId === 'string' ? dotsWrapperTestId : null}
     >
       <!-- eslint-disable-next-line -->
       {#each views as _, index}
@@ -173,6 +175,7 @@
           {onkeydown}
           role="none"
           data-pw={typeof dotTestId === 'string' ? `${dotTestId}-${index + 1}` : null}
+          testID={typeof dotTestId === 'string' ? `${dotTestId}-${index + 1}` : null}
         ></div>
       {/each}
     </div>

package/dist/CheckListItem/CheckListItem.svelte

@@ -18,7 +18,7 @@
   }
 </script>
 
-<div class="container {classes ?? ''}" class:disabled data-pw={testId}>
+<div class="container {classes ?? ''}" class:disabled data-pw={testId} testID={testId}>
   <div class="checkbox-wrapper">
     <Checkbox
       text=""

package/dist/Checkbox/Checkbox.svelte

@@ -49,6 +49,7 @@
     handleClick();
   }}
   data-pw={testId}
+  testID={testId}
 >
   <input
     type="checkbox"
@@ -59,6 +60,7 @@
     aria-hidden="true"
     onclick={(e: MouseEvent) => e.stopPropagation()}
     data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
+    testID={typeof testId === 'string' ? `${testId}-native-input` : null}
   />
   <span
     class="box"
@@ -71,6 +73,7 @@
     aria-controls={ariaControls ?? null}
     onkeydown={handleKeyDown}
     data-pw={typeof testId === 'string' ? `${testId}-box` : null}
+    testID={typeof testId === 'string' ? `${testId}-box` : null}
   >
     {#if checked && !indeterminate}
       {#if typeof checkedIcon === 'function'}

package/dist/Choicebox/Choicebox.svelte

@@ -42,6 +42,7 @@
   onclick={handleClick}
   onkeydown={handleKeyDown}
   data-pw={testId}
+  testID={testId}
 >
   {#if typeof children === 'function'}
     {@render children()}

package/dist/ColorPicker/ColorPicker.svelte

@@ -188,6 +188,7 @@
   class="color-picker-container {classes ?? ''}"
   class:disabled
   data-pw={testId}
+  testID={testId}
   bind:this={containerEl}
 >
   {#if typeof label === 'string'}

package/dist/Combobox/Combobox.svelte

@@ -345,7 +345,13 @@
   });
 </script>
 
-<div class="combobox {classes ?? ''}" class:disabled bind:this={containerEl} data-pw={testId}>
+<div
+  class="combobox {classes ?? ''}"
+  class:disabled
+  bind:this={containerEl}
+  data-pw={testId}
+  testID={testId}
+>
   <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
   <div class="combobox-input-wrapper" class:multiple onclick={handleControlClick}>
     {#if typeof inputPrefix === 'function'}
@@ -423,6 +429,7 @@
               }
             }}
             data-pw={typeof testId === 'string' ? `${testId}-option-${item.id}` : null}
+            testID={typeof testId === 'string' ? `${testId}-option-${item.id}` : null}
           >
             {#if typeof itemSnippet === 'function'}
               {@render itemSnippet(item, isHighlighted)}
@@ -446,6 +453,7 @@
           onclick={() => create()}
           onmouseenter={() => (highlightedIndex = createNavIndex)}
           data-pw={typeof testId === 'string' ? `${testId}-create` : null}
+          testID={typeof testId === 'string' ? `${testId}-create` : null}
         >
           <span class="combobox-create-icon" aria-hidden="true">
             <svg viewBox="0 0 20 20" width="14" height="14" fill="none">
@@ -474,6 +482,7 @@
           onclick={() => runAction()}
           onmouseenter={() => (highlightedIndex = actionNavIndex)}
           data-pw={typeof testId === 'string' ? `${testId}-action` : null}
+          testID={typeof testId === 'string' ? `${testId}-action` : null}
         >
           {#if typeof actionIcon === 'function'}
             <span class="combobox-action-icon" aria-hidden="true">{@render actionIcon()}</span>

package/dist/CommandMenu/CommandMenu.svelte

@@ -198,6 +198,7 @@
     aria-label="Command menu"
     tabindex="-1"
     data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
   >
     <div class="command-menu-dialog">
       <div class="command-menu-input-wrapper">
@@ -219,6 +220,7 @@
           autocomplete="off"
           spellcheck="false"
           data-pw={typeof testId === 'string' ? `${testId}-input` : null}
+          testID={typeof testId === 'string' ? `${testId}-input` : null}
         />
       </div>
 
@@ -253,6 +255,7 @@
                 aria-disabled={item.disabled}
                 tabindex="-1"
                 data-pw={typeof testId === 'string' ? `${testId}-item-${item.value}` : null}
+                testID={typeof testId === 'string' ? `${testId}-item-${item.value}` : null}
               >
                 {#if typeof itemIcon === 'function'}
                   <span class="command-menu-item-icon">

package/dist/ContextMenu/ContextMenu.svelte

@@ -164,6 +164,7 @@
   oncontextmenu={handleContextMenu}
   role="application"
   data-pw={testId}
+  testID={testId}
 >
   {#if typeof children === 'function'}
     {@render children()}
@@ -203,6 +204,7 @@
             }
           }}
           data-pw={testId ? `${testId}-item-${item.value}` : null}
+          testID={testId ? `${testId}-item-${item.value}` : null}
         >
           {#if item.icon}
             <img class="context-menu-item-icon" src={item.icon} alt="" />