@juspay/svelte-ui-components 2.55.0 → 2.56.0

package/dist/Select/Select.svelte

@@ -2,6 +2,7 @@
   import { onMount, tick } from 'svelte';
   import type { SelectItem, SelectProperties } from './properties';
   import Pill from '../Pill/Pill.svelte';
+  import Img from '../Img/Img.svelte';
   import chevronDownSvg from '../assets/chevron-down.svg?raw';
 
   let {
@@ -22,7 +23,9 @@
     classes,
     open = $bindable(false),
     dropdownAlign = 'left',
-    hierarchy = 'default'
+    hierarchy = 'default',
+    leftIcon,
+    leftIconTestId
   }: SelectProperties = $props();
 
   function normalizeItems(source: SelectItem[] | string[]): SelectItem[] {
@@ -266,6 +269,14 @@
     {...highlightedOptionId !== null ? { 'aria-activedescendant': highlightedOptionId } : {}}
     tabindex={disabled ? -1 : searchable ? -1 : 0}
   >
+    {#if typeof leftIcon === 'string' && leftIcon.length > 0}
+      <Img
+        src={leftIcon}
+        alt=""
+        classes="select-left-icon"
+        {...typeof leftIconTestId === 'string' ? { testId: leftIconTestId } : {}}
+      />
+    {/if}
     {#if multiple}
       {#if typeof triggerSummary === 'function'}
         {@render triggerSummary({ value, items })}
@@ -416,6 +427,13 @@
     transition: var(--select-trigger-transition, border-color 0.15s, box-shadow 0.15s);
   }
 
+  .select-trigger :global(.select-left-icon) {
+    --image-width: var(--select-left-icon-size, 16px);
+    --image-height: var(--select-left-icon-size, 16px);
+    --image-object-fit: contain;
+    flex: none;
+  }
+
   .select-trigger:hover:not(.disabled .select-trigger) {
     border-color: var(--select-trigger-hover-border-color, #999999);
   }

package/dist/Select/properties.d.ts

@@ -35,6 +35,10 @@ 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). */
+    leftIcon?: string;
+    /** `data-pw` test id forwarded to the leading icon `<Img>` element. */
+    leftIconTestId?: string;
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;

package/package.json

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