@juspay/svelte-ui-components 2.121.0 → 2.122.0

package/dist/Card/Card.svelte

@@ -5,6 +5,8 @@
     children,
     title,
     description,
+    titleSnippet,
+    descriptionSnippet,
     classes,
     testId,
     onclick,
@@ -64,13 +66,17 @@
   onclick={onclick ?? null}
   onkeydown={!isAnchor && isInteractive ? handleKeydown : null}
 >
-  {#if (typeof title === 'string' && title.length > 0) || typeof headerRight === 'function'}
+  {#if (typeof title === 'string' && title.length > 0) || typeof titleSnippet === 'function' || typeof headerRight === 'function'}
     <div class="card-header" class:card-header-split={typeof headerRight === 'function'}>
       <div class="card-header-main">
-        {#if typeof title === 'string' && title.length > 0}
+        {#if typeof titleSnippet === 'function'}
+          <div class="card-title">{@render titleSnippet()}</div>
+        {:else if typeof title === 'string' && title.length > 0}
           <div class="card-title">{title}</div>
         {/if}
-        {#if typeof description === 'string' && description.length > 0}
+        {#if typeof descriptionSnippet === 'function'}
+          <div class="card-description">{@render descriptionSnippet()}</div>
+        {:else if typeof description === 'string' && description.length > 0}
           <div class="card-description">{description}</div>
         {/if}
       </div>

package/dist/Card/properties.d.ts

@@ -8,6 +8,22 @@ export type OptionalCardProperties = {
     children?: Snippet;
     title?: string;
     description?: string;
+    /**
+     * Optional snippet rendered in place of the `title` string, inside the same
+     * `.card-title` container. When provided, `title` is not rendered — the snippet
+     * takes priority — and the header row is shown even if `title` is omitted
+     * entirely. Use this when the title needs markup a string prop cannot carry:
+     * rich text, an inline icon, or a test hook such as `data-pw` /
+     * `use:testAttributes` that must sit on the title element itself.
+     */
+    titleSnippet?: Snippet;
+    /**
+     * Optional snippet rendered in place of the `description` string, inside the
+     * same `.card-description` container. When provided, `description` is not
+     * rendered. Like `titleSnippet`, this exists for descriptions that need markup
+     * or a test hook on the element itself.
+     */
+    descriptionSnippet?: Snippet;
     classes?: string;
     /** Renders as `data-pw` on the root element for Playwright test selection. */
     testId?: string;

package/package.json

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