@juspay/svelte-ui-components 2.24.0 → 2.26.0

package/dist/Img/Img.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { ImgProperties } from './properties';
 
-  let { src, alt, fallback, onerror, classes, inlineSvg, transformSvg }: ImgProperties = $props();
+  let { src, alt, fallback, onerror, classes, inlineSvg, transformSvg, testId }: ImgProperties =
+    $props();
 
   let currentSrc = $derived(src);
   // Per-source failure marker: when inlining a given URL fails we fall back to
@@ -114,9 +115,10 @@
     role={alt.length > 0 ? 'img' : null}
     aria-label={alt.length > 0 ? alt : null}
     aria-hidden={alt.length === 0 ? 'true' : null}
+    data-pw={testId}
   ></svg>
 {:else}
-  <img class={classes ?? ''} src={currentSrc} {alt} onerror={handleFallback} />
+  <img class={classes ?? ''} src={currentSrc} {alt} onerror={handleFallback} data-pw={testId} />
 {/if}
 
 <style>

package/dist/Img/properties.d.ts

@@ -22,6 +22,7 @@ export type OptionalImgProperties = {
      * state (e.g. a theme colour) to get live re-renders on theme change.
      */
     transformSvg?: (svg: string) => string;
+    testId?: string;
 };
 export type ImgEventProperties = {
     onerror?: () => void;

package/dist/Tooltip/Tooltip.svelte

@@ -7,7 +7,9 @@
     delay = 0,
     testId,
     classes,
-    children
+    children,
+    icon,
+    content
   }: TooltipProperties = $props();
 
   let visible = $state(false);
@@ -41,11 +43,18 @@
   onfocusout={hideTooltip}
   data-pw={testId}
 >
+  {#if typeof icon === 'function'}
+    <span class="tooltip-icon" aria-hidden="true">{@render icon()}</span>
+  {/if}
   {@render children()}
   {#if visible}
     <div class="tooltip-bubble {position}" role="tooltip">
       <div class="tooltip-arrow"></div>
-      <span class="tooltip-text">{text}</span>
+      {#if typeof content === 'function'}
+        {@render content()}
+      {:else}
+        <span class="tooltip-text">{text}</span>
+      {/if}
     </div>
   {/if}
 </div>
@@ -56,6 +65,11 @@
     display: var(--tooltip-container-display, inline-flex);
   }
 
+  .tooltip-icon {
+    display: contents;
+    color: var(--tooltip-icon-color, currentColor);
+  }
+
   .tooltip-bubble {
     position: absolute;
     z-index: var(--tooltip-z-index, 1000);

package/dist/Tooltip/properties.d.ts

@@ -9,5 +9,9 @@ export type OptionalTooltipProperties = {
     delay?: number;
     testId?: string | null;
     classes?: string;
+    /** Snippet rendered as a leading icon in the trigger wrapper. No default glyph is provided — consumers supply their own. */
+    icon?: Snippet;
+    /** Snippet rendered as the bubble body. When provided, replaces the plain `text` string inside the tooltip bubble. */
+    content?: Snippet;
 };
 export type TooltipProperties = MandatoryTooltipProperties & OptionalTooltipProperties;

package/package.json

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