@juspay/svelte-ui-components 2.120.3 → 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/dist/CommandMenu/CommandMenu.svelte

@@ -416,6 +416,9 @@
   .command-menu-item-icon-img-wrapper {
     --image-width: var(--command-menu-item-icon-size, 20px);
     --image-height: var(--command-menu-item-icon-size, 20px);
+
+    /* Mirrors --command-menu-search-icon-color, which this component already had. */
+    color: var(--command-menu-item-icon-color, inherit);
     flex-shrink: 0;
     display: flex;
     align-items: center;

package/dist/FileDropzoneTrigger/FileDropzoneTrigger.svelte

@@ -57,11 +57,17 @@
   .file-dropzone-trigger-icon-sm :global(.file-dropzone-trigger-icon-sm-img) {
     --image-width: var(--file-dropzone-trigger-icon-sm-size, 16px);
     --image-height: var(--file-dropzone-trigger-icon-sm-size, 16px);
+
+    color: var(--file-dropzone-trigger-icon-color, inherit);
   }
 
   .file-dropzone-trigger-icon :global(.file-dropzone-trigger-icon-img) {
     --image-width: var(--file-dropzone-trigger-icon-size, 24px);
     --image-height: var(--file-dropzone-trigger-icon-size, 24px);
+
+    /* Both sizes share one colour token deliberately: they are the same icon at two
+       scales, and splitting them would invite the two to drift apart. */
+    color: var(--file-dropzone-trigger-icon-color, inherit);
   }
 
   .file-dropzone-trigger-heading {

package/dist/Select/Select.svelte

@@ -664,6 +664,13 @@
     --image-width: var(--select-left-icon-size, 16px);
     --image-height: var(--select-left-icon-size, 16px);
     --image-object-fit: contain;
+
+    /* The icon inlines, so a currentColor asset resolves against this. Defaults to
+       `inherit` — the trigger's text colour, which is what it already did — so this is
+       a hook, not a change. Without it a consumer cannot tint the icon independently
+       of the label, and an icon migrated to currentColor is forced to match its label
+       exactly, flattening any deliberate muted-icon/strong-label hierarchy. */
+    color: var(--select-left-icon-color, inherit);
     flex: none;
   }
 
@@ -785,6 +792,7 @@
     --image-height: var(--select-option-icon-size, 16px);
     --image-object-fit: contain;
 
+    color: var(--select-option-icon-color, inherit);
     vertical-align: middle;
     margin-right: var(--select-option-icon-gap, 8px);
   }

package/dist/Status/Status.svelte

@@ -54,6 +54,7 @@
   }
 
   .status-image {
+    color: var(--status-icon-color, inherit);
     display: flex;
     margin-bottom: 25px;
   }

package/dist/Table/BuiltinCell.svelte

@@ -589,6 +589,8 @@
   .builtin-icon-label-icon :global(svg) {
     width: var(--table-cell-icon-size, 16px);
     height: var(--table-cell-icon-size, 16px);
+
+    color: var(--table-cell-icon-color, inherit);
     display: block;
   }
 

package/dist/Tabs/Tabs.svelte

@@ -445,6 +445,7 @@
     --image-height: var(--tabs-item-icon-size, 16px);
     --image-object-fit: contain;
 
+    color: var(--tabs-item-icon-color, inherit);
     flex-shrink: 0;
   }
 

package/package.json

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