@juspay/svelte-ui-components 2.62.0 → 2.62.1

package/dist/BarChart/BarChart.svelte

@@ -413,10 +413,7 @@
       return null;
     }
     const title = isMulti ? `${bar.dataPoint.label} — ${bar.seriesName}` : bar.dataPoint.label;
-    const displayValue =
-      isNormalized && bar.normalizedValue != null
-        ? normalizedFormat(bar.normalizedValue)
-        : format(bar.dataPoint.value);
+    const displayValue = getDisplayValue(bar);
     return {
       title,
       items: [{ label: bar.dataPoint.label, value: displayValue, color: bar.color }]
@@ -574,7 +571,7 @@
                     y2={isHoriz ? entry.bar.y : entry.bar.y + entry.bar.height}
                     gradientUnits="userSpaceOnUse"
                   >
-                    {#each grad.stops as stop (stop.offset)}
+                    {#each grad.stops as stop, stopIndex (`${stopIndex}-${stop.offset}`)}
                       <stop
                         offset="{stop.offset * 100}%"
                         stop-color={stop.color}

package/dist/Button/Button.svelte

@@ -15,7 +15,7 @@
     ariaSelected,
     role,
     onclick,
-    onkeydown,
+    onkeydown = () => {},
     onkeyup = () => {},
     onmousedown,
     onmouseup,
@@ -117,7 +117,10 @@
     font-weight: var(--disabled-font-weight);
     border: var(--disabled-border);
     background: var(--disabled-background-color, var(--button-color, #3a4550));
-    box-shadow: var(--button-disabled-box-shadow, var(--button-box-shadow, none));
+    box-shadow: var(
+      --button-disabled-box-shadow,
+      var(--disabled-box-shadow, var(--button-box-shadow, none))
+    );
   }
 
   .button-loader {

package/dist/Button/properties.d.ts

@@ -20,11 +20,18 @@ export type OptionalButtonProperties = {
 };
 export type ButtonEventProperties = {
     onclick?: (event: MouseEvent) => void;
+    /** Fires when a key is pressed down while the button has focus. */
     onkeydown?: (event: KeyboardEvent) => void;
+    /** Fires when a key is released while the button has focus. */
     onkeyup?: (event: KeyboardEvent) => void;
+    /** Fires when a mouse button is pressed down on the button. */
     onmousedown?: (event: MouseEvent) => void;
+    /** Fires when a mouse button is released over the button. */
     onmouseup?: (event: MouseEvent) => void;
+    /** Fires when the pointer leaves the button area. */
     onmouseleave?: (event: MouseEvent) => void;
+    /** Fires when a touch point is placed on the button. */
     ontouchstart?: (event: TouchEvent) => void;
+    /** Fires when a touch point is removed from the button. */
     ontouchend?: (event: TouchEvent) => void;
 };

package/dist/Card/Card.svelte

@@ -177,7 +177,7 @@
   .card-content-scrollable {
     overflow-y: auto;
     max-height: var(--card-content-max-height, 400px);
-    scrollbar-width: thin;
+    scrollbar-width: var(--card-content-scrollbar-width, thin);
   }
 
   /* footer */

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -110,6 +110,32 @@
 
   let activePresetLabel: string | null = $state(resolvedInitialPresetLabel);
 
+  // Seed draft from initialPresetLabel whenever presets become available so
+  // the calendar shows the preset's date selection when the picker is first
+  // opened — even if presets arrive asynchronously after initial render.
+  // The draftStart/draftEnd/draftValue guards prevent re-seeding once the
+  // user has made a custom selection.
+  $effect.pre(() => {
+    if (
+      resolvedInitialPresetLabel !== null &&
+      presets !== null &&
+      draftStart === null &&
+      draftEnd === null &&
+      draftValue === null
+    ) {
+      const matchedPreset = presets.find((p) => p.label === resolvedInitialPresetLabel) ?? null;
+      if (matchedPreset !== null) {
+        const { start, end } = matchedPreset.getValue();
+        if (mode === 'single') {
+          draftValue = start;
+        } else {
+          draftStart = start;
+          draftEnd = end;
+        }
+      }
+    }
+  });
+
   const now = new SvelteDate();
 
   // Dual-month navigation: track the year+month of the left calendar
@@ -160,11 +186,11 @@
 
   function openPicker(): void {
     // Seed draft from current committed values
-    draftStart = rangeStart !== null ? rangeStart : null;
-    draftEnd = rangeEnd !== null ? rangeEnd : null;
-    draftValue = value !== null ? value : null;
-    draftCompareStart = compareStart !== null ? compareStart : null;
-    draftCompareEnd = compareEnd !== null ? compareEnd : null;
+    draftStart = rangeStart;
+    draftEnd = rangeEnd;
+    draftValue = value;
+    draftCompareStart = compareStart;
+    draftCompareEnd = compareEnd;
 
     // Reset preset tracking so each picker session starts clean.
     selectedPresetLabel = null;
@@ -499,9 +525,7 @@
             {#each presets as preset, presetIndex (preset.label)}
               {@const previousPreset = presetIndex > 0 ? presets[presetIndex - 1] : null}
               {@const groupChanged =
-                presetIndex > 0 &&
-                'group' in preset &&
-                (previousPreset === null || previousPreset.group !== preset.group)}
+                presetIndex > 0 && (previousPreset?.group ?? '') !== (preset.group ?? '')}
               {#if groupChanged}
                 <div class="drp-preset-divider" role="separator" aria-hidden="true">
                   {#if preset.group !== ''}

package/dist/Gauge/Gauge.svelte

@@ -6,6 +6,7 @@
     max = 100,
     showLabel = true,
     labelFormatter,
+    ariaLabel,
     testId,
     classes
   }: GaugeProperties = $props();
@@ -33,7 +34,7 @@
   aria-valuenow={clamped}
   aria-valuemin={0}
   aria-valuemax={100}
-  aria-label="gauge"
+  aria-label={ariaLabel ?? labelText}
 >
   <svg viewBox="0 0 {VIEW_BOX} {VIEW_BOX}">
     <circle class="track" cx={CENTER} cy={CENTER} r={RADIUS} fill="none" />

package/dist/Gauge/properties.d.ts

@@ -11,6 +11,7 @@ export type OptionalGaugeProperties = {
      * @default 100
      */
     max?: number;
+    /** Whether to show the centered percentage label. @default true */
     showLabel?: boolean;
     /**
      * Custom label renderer called with the raw `(value, max)` pair. Return any
@@ -18,6 +19,14 @@ export type OptionalGaugeProperties = {
      * Example: `labelFormatter={(v, m) => \`${v} / ${m}\`}` shows "50 / 200".
      */
     labelFormatter?: (value: number, max: number) => string;
+    /**
+     * Accessible label for the gauge element (`role="progressbar"`). Falls back
+     * to the computed `labelText` (e.g. `"75%"`) when not provided, so assistive
+     * technology announces the current percentage by default.
+     */
+    ariaLabel?: string;
+    /** Value for the `data-pw` attribute on the root element for E2E test selection. */
     testId?: string;
+    /** Extra CSS classes applied to the root element for consumer theming. */
     classes?: string;
 };

package/dist/SankeyChart/SankeyChart.svelte

@@ -272,7 +272,7 @@
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
       <g transform="translate({MARGIN}, {MARGIN})">
         {#if columnLabels != null && columnLabels.length > 0}
-          {#each columnLabels as label, ci (ci)}
+          {#each columnLabels.slice(0, columnCount) as label, ci (ci)}
             <text
               class="sankey-col-label"
               x={ci * colWidth + nodeWidth / 2}

package/dist/Select/Select.svelte

@@ -364,7 +364,7 @@
             id={`${listboxId}-option-${index}`}
             aria-selected={value.includes(item.id)}
             tabindex="-1"
-            {...item.testId
+            {...typeof item.testId === 'string'
               ? { 'data-pw': item.testId }
               : typeof itemTestId === 'string'
                 ? { 'data-pw': `${itemTestId}-${item.id}` }

package/dist/Table/Table.svelte

@@ -189,10 +189,16 @@
    * stable even when the visible set shrinks or expands as the search term
    * changes — so a row that was "row 2" in the full set keeps ID `"2"` even
    * when it becomes the only visible result.
+   *
+   * The Map lookup uses object reference equality, so row objects in
+   * `filteredTableData` must be the same references as those in
+   * `sortedTableData`. When `originalIndex` cannot be found (reference mismatch
+   * after a transform), the fallback positional index is used instead.
    */
   let filteredRowIds = $derived.by((): string[] => {
+    const indexMap = new Map(sortedTableData.map((row, index) => [row, index]));
     return filteredTableData.map((row, fallbackIndex) => {
-      const originalIndex = sortedTableData.indexOf(row);
+      const originalIndex = indexMap.get(row) ?? -1;
       const stableIndex = originalIndex === -1 ? fallbackIndex : originalIndex;
       if (checkboxSelection && checkboxSelection.enabled !== false) {
         return resolveRowId(checkboxSelection, row, stableIndex);
@@ -314,6 +320,7 @@
       oninput={handleSearchInput}
       data-pw={searchConfig?.testId ?? null}
       aria-label={searchConfig?.placeholder ?? 'Search'}
+      autocomplete="off"
     />
     {#if searchTerm.length > 0}
       <button
@@ -353,6 +360,7 @@
                   ? 'mixed'
                   : headerCheckboxState === 'all'}
                 aria-label="Select all rows"
+                aria-controls={selectableRowIds.map((rowId) => `row-checkbox-${rowId}`).join(' ')}
                 onclick={toggleAllSelection}
                 onkeydown={(keyboardEvent) =>
                   handleCheckboxKeydown(keyboardEvent, toggleAllSelection)}
@@ -445,6 +453,7 @@
                     class:checked={rowSelected}
                     class:disabled={rowDisabled}
                     role="checkbox"
+                    id={`row-checkbox-${rowId}`}
                     tabindex={rowDisabled ? -1 : 0}
                     aria-checked={rowSelected}
                     aria-disabled={rowDisabled}

package/package.json

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