@juspay/svelte-ui-components 2.120.1 → 2.120.3

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>

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -147,6 +147,12 @@
   let isOpen: boolean = $state(false);
   let panelRef: HTMLDivElement | null = $state(null);
   let triggerRef: HTMLDivElement | null = $state(null);
+  // The panel anchors below the trigger by default. When the trigger sits low in
+  // the viewport there is no room for it there, and because the panel is
+  // position:absolute (not portaled, not fixed) it simply extends past the fold
+  // and the lower weeks become unreachable without scrolling whatever container
+  // it happens to live in. Flipping it above the trigger keeps it on screen.
+  let opensUpward: boolean = $state(false);
   let comparePanelRef: HTMLDivElement | null = $state(null);
   let compareTriggerRef: HTMLDivElement | null = $state(null);
   // Stores the element that opened the compare panel so focus can be restored on close.
@@ -307,9 +313,44 @@
 
   function closePicker(): void {
     isOpen = false;
+    opensUpward = false;
     onopentoggle?.({ open: false });
   }
 
+  /**
+   * Decide which side of the trigger the panel should open on, by measuring
+   * rather than guessing: flip up only when the panel genuinely does not fit
+   * below AND fits better above. A panel that overflows in both directions
+   * stays below, where its first weeks are at least readable.
+   */
+  function positionPanel(panelNode: HTMLDivElement | null = panelRef): void {
+    if (panelNode === null || triggerRef === null || typeof window === 'undefined') {
+      return;
+    }
+    const trigger = triggerRef.getBoundingClientRect();
+    const panelHeight = panelNode.offsetHeight;
+    const offset = 6;
+    const roomBelow = window.innerHeight - trigger.bottom - offset;
+    const roomAbove = trigger.top - offset;
+    opensUpward = panelHeight > roomBelow && roomAbove > roomBelow;
+  }
+
+  function positionPanelWhileMounted(panelNode: HTMLDivElement): { destroy: () => void } {
+    const updatePanelPosition = () => positionPanel(panelNode);
+    updatePanelPosition();
+    tick().then(updatePanelPosition);
+    window.addEventListener('resize', updatePanelPosition);
+    // Scrolling moves the trigger relative to the viewport, so the side that had
+    // room when the panel opened may not have it a moment later.
+    window.addEventListener('scroll', updatePanelPosition, true);
+    return {
+      destroy: () => {
+        window.removeEventListener('resize', updatePanelPosition);
+        window.removeEventListener('scroll', updatePanelPosition, true);
+      }
+    };
+  }
+
   // The trigger toggles: clicking it while the panel is already open dismisses
   // the picker instead of re-opening it onto itself. The open-only handler left
   // a second click feeling dead — the panel could only be closed by clicking away.
@@ -854,8 +895,10 @@
   <!-- Dropdown panel -->
   {#if isOpen}
     <div
+      use:positionPanelWhileMounted
       bind:this={panelRef}
       class="drp-panel"
+      class:drp-panel-above={opensUpward}
       class:drp-panel-align-left={align === 'left'}
       class:drp-panel-align-right={align === 'right'}
       role="dialog"
@@ -1261,6 +1304,12 @@
     overflow: hidden;
   }
 
+  /* Set only when the panel would not fit below the trigger — see positionPanel(). */
+  .drp-panel-above {
+    top: auto;
+    bottom: calc(100% + var(--drp-panel-offset, 6px));
+  }
+
   .drp-panel-align-left {
     left: 0;
     right: auto;

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>

package/dist/ListItem/ListItem.svelte

@@ -215,6 +215,8 @@
   .top-section {
     display: flex;
     flex-direction: row;
+    align-items: var(--list-item-top-section-align-items);
+    gap: var(--list-item-top-section-gap);
     margin-bottom: 0;
   }
 
@@ -263,6 +265,7 @@
 
   .right-content {
     display: var(--list-item-right-content-display, flex);
+    flex: var(--list-item-right-content-flex);
   }
 
   .right-content-loader {

package/dist/Pill/Pill.svelte

@@ -92,7 +92,8 @@
     border: var(--pill-border, none);
     cursor: var(--pill-cursor, pointer);
     max-width: var(--pill-max-width);
-    line-height: 1;
+    line-height: var(--pill-line-height, 1);
+    flex-shrink: var(--pill-flex-shrink);
   }
 
   .pill:hover:not(.disabled) {

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)}

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>

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>

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'}

package/package.json

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