@juspay/svelte-ui-components 2.120.1 → 2.120.2

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/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/package.json

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