@juspay/svelte-ui-components 2.120.2 → 2.121.0

package/dist/CommandMenu/CommandMenu.svelte

@@ -263,7 +263,7 @@
                   </span>
                 {:else if typeof item.icon === 'string' && item.icon.length > 0}
                   <div class="command-menu-item-icon-img-wrapper">
-                    <Img src={item.icon} alt="" />
+                    <Img inlineSvg src={item.icon} alt="" />
                   </div>
                 {/if}
                 <span class="command-menu-item-label">{item.label}</span>
@@ -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

@@ -17,7 +17,7 @@
 {#if compact}
   <div class="file-dropzone-trigger-compact {classes ?? ''}">
     <div class="file-dropzone-trigger-icon-sm" aria-hidden="true">
-      <Img src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-sm-img" />
+      <Img inlineSvg src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-sm-img" />
     </div>
     <span class="file-dropzone-trigger-heading" data-pw={testId} testID={testId}>{heading}</span>
   </div>
@@ -28,7 +28,7 @@
     {...typeof testId === 'string' ? { testId } : {}}
   >
     <div class="file-dropzone-trigger-icon" aria-hidden="true">
-      <Img src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-img" />
+      <Img inlineSvg src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-img" />
     </div>
     <p class="file-dropzone-trigger-heading-wrap">
       <span class="file-dropzone-trigger-heading">{heading}</span>
@@ -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

@@ -406,8 +406,10 @@
   >
     {#if typeof leftIcon === 'string' && leftIcon.length > 0}
       <Img
+        inlineSvg
         src={leftIcon}
         alt=""
+        fallback=""
         classes="select-left-icon"
         {...typeof leftIconTestId === 'string' ? { testId: leftIconTestId } : {}}
       />
@@ -601,7 +603,13 @@
                 {/if}
               {/if}
               {#if typeof row.item.icon === 'string' && row.item.icon.length > 0}
-                <Img src={row.item.icon} alt="" fallback="" classes="select-option-icon" />
+                <Img
+                  inlineSvg
+                  src={row.item.icon}
+                  alt=""
+                  fallback=""
+                  classes="select-option-icon"
+                />
               {/if}
               <span class="select-option-label">{row.item.label}</span>
               {#if showSelectedTick && !multiple && value.includes(row.item.id)}
@@ -656,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;
   }
 
@@ -777,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/Select/properties.d.ts

@@ -9,6 +9,8 @@ export type SelectItem = {
      * Optional image src (URL or data URI) rendered at the left of the option row,
      * before the label — for icon pickers and any list whose options carry a glyph.
      * Size is controlled by the `--select-option-icon-size` CSS variable (default 16px).
+     * An SVG source is inlined, so an icon drawn with `currentColor` inherits the
+     * option row's text colour; anything else renders as a plain `<img>`.
      * Pair with the trigger's `leftIcon` (driven by the selected option's icon) to show
      * the current selection in the closed trigger.
      */
@@ -70,7 +72,12 @@ export type OptionalSelectProperties = {
     }]>;
     /** Visual hierarchy of the trigger. `'ghost'` renders a transparent, borderless trigger — useful when the Select is embedded in a toolbar or header where a full bordered input would be visually heavy. Defaults to `'default'`. */
     hierarchy?: SelectHierarchy;
-    /** Optional image src (URL or data URI) rendered at the left of the trigger. Size is controlled by the `--select-left-icon-size` CSS variable (default 16px). */
+    /**
+     * Optional image src (URL or data URI) rendered at the left of the trigger.
+     * Size is controlled by the `--select-left-icon-size` CSS variable (default 16px).
+     * An SVG source is inlined, so an icon drawn with `currentColor` inherits the
+     * trigger's text colour; anything else renders as a plain `<img>`.
+     */
     leftIcon?: string;
     /** `data-pw` test id forwarded to the leading icon `<Img>` element. */
     leftIconTestId?: string;

package/dist/Status/Status.svelte

@@ -25,7 +25,7 @@
       {#if icon}
         {@render icon()}
       {:else}
-        <Img src={statusIcon} alt="status" />
+        <Img inlineSvg src={statusIcon} alt="status" />
       {/if}
     </div>
     <div class="status-text">{statusText}</div>
@@ -54,6 +54,7 @@
   }
 
   .status-image {
+    color: var(--status-icon-color, inherit);
     display: flex;
     margin-bottom: 25px;
   }

package/dist/Table/BuiltinCell.svelte

@@ -146,7 +146,7 @@
         data-pw={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
         testID={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
       >
-        <Img src={String(iconSrc)} alt="" fallback="" />
+        <Img inlineSvg src={String(iconSrc)} alt="" fallback="" />
       </span>
     {/each}
     <span>{typeof data.label === 'string' ? data.label : '-'}</span>
@@ -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

@@ -281,7 +281,7 @@
           })}
         {:else}
           {#if typeof tabItem?.icon === 'string' && tabItem.icon.length > 0}
-            <Img src={tabItem.icon} alt="" fallback="" classes="tabs-item-icon" />
+            <Img inlineSvg src={tabItem.icon} alt="" fallback="" classes="tabs-item-icon" />
           {/if}
           <span class="tabs-item-label" data-text={label}>{label}</span>
           {#if tabItem?.status && tabItem.status !== 'none'}
@@ -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.2",
+  "version": "2.121.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",