@juspay/svelte-ui-components 2.120.0 → 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/dist/Progress/Progress.svelte

@@ -1,16 +1,54 @@
 <script lang="ts">
   import type { ProgressProperties } from './properties';
 
-  let { value, max = 100, showLabel = false, testId, classes }: ProgressProperties = $props();
+  let {
+    value,
+    max = 100,
+    showLabel = false,
+    ariaLabel,
+    testId,
+    classes
+  }: ProgressProperties = $props();
 
-  let percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+  // `max` has to be a finite positive number for a percentage to mean
+  // anything. A zero, negative, or non-finite max (an as-yet-unloaded total,
+  // say) would make (value / max) NaN or Infinity and put "NaN" into
+  // aria-valuenow, which is not a valid ARIA value -- and a non-finite value
+  // has the same effect. Treat an unusable range as an empty (0%) bar
+  // instead. `value` is guarded here too, not just `max`: a NaN value isn't
+  // `< 0`, so it would otherwise slip past the isIndeterminate check below
+  // and hit the same NaN-percentage path. This check is deliberately kept
+  // independent of `isIndeterminate` below -- a negative `value` (e.g. -1)
+  // still signals indeterminate on its own, even paired with an invalid
+  // `max`, since indeterminate mode never reads `percentage` in the markup.
+  let hasValidRange = $derived(Number.isFinite(value) && Number.isFinite(max) && max > 0);
+  let percentage = $derived(hasValidRange ? Math.min(100, Math.max(0, (value / max) * 100)) : 0);
   let isIndeterminate = $derived(value < 0);
+  // Rounded to 2 decimal places rather than the nearest whole number, so
+  // aria-valuenow stays effectively in step with the bar's raw fractional
+  // width (matching Gauge's convention of tying aria-valuenow to the raw
+  // computed value, not the rounded display text). Full raw precision isn't
+  // used because (value / max) * 100 can land on binary floating-point noise
+  // like 55.00000000000001 -- rounding to 2 decimals clears that while still
+  // keeping the value far closer to the bar's true width than whole numbers.
+  let preciseValueNow = $derived(Math.round(percentage * 100) / 100);
+  // Shared by the visible label and the aria-label fallback, mirroring
+  // Gauge's labelText convention. "Loading" matches the aria-label
+  // LoadingDots already uses for its own indeterminate role="status" element.
+  let labelText = $derived(isIndeterminate ? 'Loading' : `${Math.round(percentage)}%`);
 </script>
 
 <div
   class="container {classes ?? ''}"
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
+  role="progressbar"
+  aria-valuenow={isIndeterminate ? null : preciseValueNow}
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-valuetext={isIndeterminate ? 'indeterminate' : null}
+  aria-busy={isIndeterminate ? true : null}
+  aria-label={ariaLabel ?? labelText}
 >
   <div class="track">
     <div
@@ -20,7 +58,7 @@
     ></div>
   </div>
   {#if showLabel && !isIndeterminate}
-    <div class="label">{Math.round(percentage)}%</div>
+    <div class="label">{labelText}</div>
   {/if}
 </div>
 

package/dist/Progress/properties.d.ts

@@ -3,8 +3,23 @@ export type MandatoryProgressProperties = {
     value: number;
 };
 export type OptionalProgressProperties = {
+    /**
+     * The maximum value representing 100% completion. Must be a finite,
+     * positive number for the percentage to be meaningful. A zero, negative,
+     * or non-finite `max` (and likewise a non-finite `value`) is treated as an
+     * invalid range: the bar renders at 0% rather than propagating `NaN` into
+     * `aria-valuenow` and the percentage fallback text below.
+     */
     max?: number;
     showLabel?: boolean;
+    /**
+     * Accessible label for the progress element (`role="progressbar"`). Falls
+     * back to the computed percentage text (e.g. `"75%"`) when determinate, or
+     * `"Loading"` when indeterminate, so assistive technology always announces
+     * a name by default. For an invalid `value`/`max` range (see `max`), the
+     * fallback reads `"0%"`.
+     */
+    ariaLabel?: string;
     testId?: string;
     classes?: string;
 };

package/package.json

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