@juspay/svelte-ui-components 2.54.0 → 2.56.0

package/dist/Card/Card.svelte

@@ -11,11 +11,20 @@
     headerRight,
     footer,
     stretch = false,
-    scrollable = false
+    scrollable = false,
+    cssVars
   }: CardProperties = $props();
 
   const isInteractive = $derived(typeof onclick === 'function');
 
+  const styleAttr = $derived(
+    cssVars
+      ? Object.entries(cssVars)
+          .map(([name, value]) => `${name}: ${value}`)
+          .join('; ')
+      : null
+  );
+
   const handleKeydown = (event: KeyboardEvent): void => {
     if (event.key === 'Enter' || event.key === ' ') {
       if (event.key === ' ') {
@@ -34,6 +43,7 @@
   class:card-interactive={isInteractive}
   class:card-stretch={stretch}
   class:card-has-scroll={scrollable}
+  style={styleAttr}
   data-pw={typeof testId === 'string' ? testId : null}
   role={isInteractive ? 'button' : null}
   tabindex={isInteractive ? 0 : null}

package/dist/Card/properties.d.ts

@@ -41,4 +41,13 @@ export type OptionalCardProperties = {
      * Defaults to false.
      */
     scrollable?: boolean;
+    /**
+     * Per-instance CSS custom properties applied as inline style on the root `.card`.
+     * Keys must be CSS variable names (e.g. `--bottom-sections-count`); values are
+     * emitted verbatim. This lets a consumer feed a dynamic, per-instance value into a
+     * recipe class whose selectors or media queries read that variable — something a
+     * static `classes` string cannot express. When omitted, no `style` attribute is
+     * rendered, so existing consumers are unchanged.
+     */
+    cssVars?: Record<string, string | number>;
 };

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.54.0",
+  "version": "2.56.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",