@juspay/svelte-ui-components 2.110.0 → 2.111.1

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="" />

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -549,7 +549,7 @@
 
 <svelte:document onclick={handleDocumentClick} onkeydown={handleDocumentKeyDown} />
 
-<div class="drp-root {classes ?? ''}" data-pw={testId}>
+<div class="drp-root {classes ?? ''}" data-pw={testId} testID={testId}>
   <!-- Trigger wrapper — bind:this here so outside-click detection works -->
   <div bind:this={triggerRef} class="drp-trigger-wrapper">
     <Button
@@ -654,6 +654,7 @@
       aria-label="Date range picker"
       aria-modal="true"
       data-pw={typeof testId === 'string' ? `${testId}-panel` : null}
+      testID={typeof testId === 'string' ? `${testId}-panel` : null}
     >
       <div class="drp-panel-inner">
         <!-- Preset sidebar -->
@@ -679,6 +680,7 @@
                 aria-selected={isPresetActive(preset)}
                 onclick={() => handlePreset(preset)}
                 data-pw={typeof testId === 'string' ? `${testId}-preset-${preset.label}` : null}
+                testID={typeof testId === 'string' ? `${testId}-preset-${preset.label}` : null}
               >
                 {preset.label}
                 {#if presetCheckmark && isPresetActive(preset)}
@@ -687,6 +689,7 @@
                     class="drp-preset-check"
                     aria-hidden="true"
                     data-pw={typeof testId === 'string' ? `${testId}-preset-check` : null}
+                    testID={typeof testId === 'string' ? `${testId}-preset-check` : null}
                     >{@html checkmarkSvg}</span
                   >
                 {/if}
@@ -702,7 +705,11 @@
               <div class="drp-date-input-row">
                 {#if isInlineTime}
                   <div class="drp-date-time-group">
-                    <div class="drp-date-input" data-pw={testId ? `${testId}-start-date` : null}>
+                    <div
+                      class="drp-date-input"
+                      data-pw={testId ? `${testId}-start-date` : null}
+                      testID={testId ? `${testId}-start-date` : null}
+                    >
                       <span class="drp-date-input-value">{draftStartDateLabel || 'Start date'}</span
                       >
                     </div>
@@ -721,13 +728,18 @@
                         aria-label="Start time"
                         aria-invalid={!isStartTimeValid}
                         data-pw={testId ? `${testId}-start-time` : null}
+                        testID={testId ? `${testId}-start-time` : null}
                       />
                     </div>
                   </div>
                   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                   <span class="drp-datetime-arrow" aria-hidden="true">{@html chevronRightSvg}</span>
                   <div class="drp-date-time-group">
-                    <div class="drp-date-input" data-pw={testId ? `${testId}-end-date` : null}>
+                    <div
+                      class="drp-date-input"
+                      data-pw={testId ? `${testId}-end-date` : null}
+                      testID={testId ? `${testId}-end-date` : null}
+                    >
                       <span class="drp-date-input-value">{draftEndDateLabel || 'End date'}</span>
                     </div>
                     <div
@@ -745,16 +757,25 @@
                         aria-label="End time"
                         aria-invalid={!isEndTimeValid}
                         data-pw={testId ? `${testId}-end-time` : null}
+                        testID={testId ? `${testId}-end-time` : null}
                       />
                     </div>
                   </div>
                 {:else}
-                  <div class="drp-date-input" data-pw={testId ? `${testId}-start-date` : null}>
+                  <div
+                    class="drp-date-input"
+                    data-pw={testId ? `${testId}-start-date` : null}
+                    testID={testId ? `${testId}-start-date` : null}
+                  >
                     <span class="drp-date-input-value">{draftStartDateLabel || 'Start date'}</span>
                   </div>
                   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                   <span class="drp-datetime-arrow" aria-hidden="true">{@html chevronRightSvg}</span>
-                  <div class="drp-date-input" data-pw={testId ? `${testId}-end-date` : null}>
+                  <div
+                    class="drp-date-input"
+                    data-pw={testId ? `${testId}-end-date` : null}
+                    testID={testId ? `${testId}-end-date` : null}
+                  >
                     <span class="drp-date-input-value">{draftEndDateLabel || 'End date'}</span>
                   </div>
                   {#if showTimeSelection}
@@ -765,6 +786,7 @@
                       aria-label="Toggle time selection"
                       aria-pressed={showTimeRow}
                       data-pw={testId ? `${testId}-time-toggle` : null}
+                      testID={testId ? `${testId}-time-toggle` : null}
                       onclick={() => (showTimeRow = !showTimeRow)}
                     >
                       <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -787,6 +809,7 @@
                       aria-label="Start time"
                       aria-invalid={!isStartTimeValid}
                       data-pw={testId ? `${testId}-start-time` : null}
+                      testID={testId ? `${testId}-start-time` : null}
                     />
                   </div>
                   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -803,6 +826,7 @@
                       aria-label="End time"
                       aria-invalid={!isEndTimeValid}
                       data-pw={testId ? `${testId}-end-time` : null}
+                      testID={testId ? `${testId}-end-time` : null}
                     />
                   </div>
                 </div>

package/dist/DeltaIndicator/DeltaIndicator.svelte

@@ -37,6 +37,7 @@
 <span
   class="delta-indicator delta-{tone} {classes ?? ''}"
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if !hideArrow && direction !== 'neutral'}
     <span class="delta-indicator-arrow delta-arrow-{direction}" aria-hidden="true">
@@ -44,6 +45,10 @@
         ><path d="M22 7L13.5 15.5L8.5 10.5L2 17" /><path d="M16 7H22V13" /></svg
       >
     </span>
+  {:else if !hideArrow}
+    <!-- Neutral/no-change glyph (design-system "— 0%" treatment): an em dash in
+         place of the trend arrow, so a flat delta still reads as a stated state. -->
+    <span class="delta-indicator-dash" aria-hidden="true">—</span>
   {/if}
   <span class="delta-indicator-text">{text}</span>
 </span>
@@ -85,6 +90,11 @@
     flex-shrink: 0;
   }
 
+  .delta-indicator-dash {
+    color: inherit;
+    flex-shrink: 0;
+  }
+
   .delta-indicator-arrow svg {
     width: 100%;
     height: 100%;

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -441,6 +441,7 @@
   class="dual-axis-bar-chart {classes ?? ''}"
   bind:this={containerEl}
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   {#if !isEmpty}
     {#if showLegend && (chartWidth === 0 || hideLegendBelow === 0 || chartWidth >= hideLegendBelow)}
@@ -568,6 +569,7 @@
               height={dims.innerHeight}
               fill="transparent"
               data-pw={`hover-target-${hr.catIdx}`}
+              testID={`hover-target-${hr.catIdx}`}
               data-category-index={hr.catIdx}
               tabindex="0"
               role="button"

package/dist/EmptyState/EmptyState.svelte

@@ -13,7 +13,11 @@
   }: EmptyStateProperties = $props();
 </script>
 
-<div class="empty-state {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+<div
+  class="empty-state {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
   {#if typeof icon === 'function'}
     <div class="empty-state-icon">
       {@render icon()}

package/dist/FileInput/FileInput.svelte

@@ -139,6 +139,7 @@
   class:file-input-dragover={dragOver}
   class:file-input-disabled={disabled}
   data-pw={testId}
+  testID={testId}
   role="button"
   tabindex={disabled ? -1 : 0}
   aria-disabled={disabled}
@@ -156,6 +157,7 @@
     {multiple}
     {disabled}
     data-pw={typeof testId === 'string' ? `${testId}-input` : null}
+    testID={typeof testId === 'string' ? `${testId}-input` : null}
     onchange={handleInputChange}
     tabindex="-1"
     aria-hidden="true"

package/dist/FunnelChart/FunnelChart.svelte

@@ -294,6 +294,7 @@
   class="funnel-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>
@@ -333,6 +334,7 @@
               x={bx}
               y={by}
               data-pw={`funnel-bar-${index}`}
+              testID={`funnel-bar-${index}`}
               width={stageColumnWidth}
               height={bh}
               fill={color}

package/dist/Gauge/Gauge.svelte

@@ -30,6 +30,7 @@
 <div
   class="gauge {classes ?? ''}"
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
   role="progressbar"
   aria-valuenow={clamped}
   aria-valuemin={0}

package/dist/GridItem/GridItem.svelte

@@ -25,6 +25,7 @@
   role="button"
   tabindex="0"
   data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
 >
   <div class="grid-header">
     <img src={headerIcon} alt="" class="grid-item-header-icon" />

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>