@juspay/svelte-ui-components 2.80.6 → 2.80.8

package/dist/Button/Button.svelte

@@ -213,6 +213,11 @@
     gap: var(--button-content-gap, 16px);
     visibility: var(--button-visibility, visible);
     box-shadow: var(--button-box-shadow, none);
+
+    /* A button label should never soft-wrap onto a second line as the label text
+       changes (e.g. "Select" -> "Select (1)") — that jitters the layout around it.
+       Consumers that genuinely want multi-line buttons opt back in via the var. */
+    white-space: var(--button-white-space, nowrap);
   }
 
   .button-el.disabled,

package/dist/Calendar/Calendar.svelte

@@ -154,6 +154,12 @@
     return n;
   }
 
+  function endOfDay(d: Date): Date {
+    const newDate = new SvelteDate(d);
+    newDate.setHours(23, 59, 59, 999);
+    return newDate;
+  }
+
   function isSameDay(a: Date, b: Date): boolean {
     return (
       a.getFullYear() === b.getFullYear() &&
@@ -206,6 +212,8 @@
         if (date.getTime() < normalizeDate(start).getTime()) {
           rangeEnd = start;
           rangeStart = date;
+        } else if (isSameDay(date, start)) {
+          rangeEnd = endOfDay(date);
         } else {
           rangeEnd = date;
         }

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -347,10 +347,10 @@
       if (draftStart !== null && draftEnd !== null) {
         // Fold the time-of-day inputs onto the committed dates when time selection is on.
         const appliedStart = showTimeSelection
-          ? (applyTimeDisplay(draftStart, startTimeDisplay) ?? draftStart)
+          ? (applyTimeDisplay(draftStart, startTimeDisplay, 'start') ?? draftStart)
           : draftStart;
         const appliedEnd = showTimeSelection
-          ? (applyTimeDisplay(draftEnd, endTimeDisplay) ?? draftEnd)
+          ? (applyTimeDisplay(draftEnd, endTimeDisplay, 'end') ?? draftEnd)
           : draftEnd;
         rangeStart = appliedStart;
         rangeEnd = appliedEnd;

package/dist/DateRangePicker/properties.d.ts

@@ -16,6 +16,7 @@ export type DateRangePreset = {
 export type DateRangePickerMode = 'range' | 'single';
 export type DateRangePickerAlign = 'left' | 'right';
 export type DateRangePickerTimeLayout = 'toggle' | 'inline';
+export type TimeDisplayBoundary = 'start' | 'end';
 export type OptionalDateRangePickerProperties = {
     /** Currently selected start of range (bindable). */
     rangeStart?: Date | null;

package/dist/DateRangePicker/timeUtils.d.ts

@@ -1,3 +1,4 @@
+import type { TimeDisplayBoundary } from './properties';
 /** Matches a 12-hour clock display such as "2:30 PM" or "02:05 am". */
 export declare const TIME_DISPLAY_PATTERN: RegExp;
 /** Parse a 12-hour display string into 24-hour hours/minutes, or null when invalid. */
@@ -8,6 +9,6 @@ export declare const parseTimeDisplay: (display: string) => {
 /** Format a Date's time-of-day as a 12-hour display string, e.g. "02:30 PM". */
 export declare const formatTimeDisplay: (date: Date) => string;
 /** Return a new Date with the time-of-day from a 12-hour display string applied, or null when invalid. */
-export declare const applyTimeDisplay: (date: Date, display: string) => Date | null;
+export declare const applyTimeDisplay: (date: Date, display: string, boundary: TimeDisplayBoundary) => Date | null;
 /** Minutes-since-midnight for ordering comparisons, or null when the display is invalid. */
 export declare const toMinutesOfDay: (display: string) => number | null;

package/dist/DateRangePicker/timeUtils.js

@@ -1,4 +1,3 @@
-// Time-of-day helpers for the DateRangePicker's built-in date + time inputs.
 /** Matches a 12-hour clock display such as "2:30 PM" or "02:05 am". */
 export const TIME_DISPLAY_PATTERN = /^(1[0-2]|0?[1-9]):([0-5][0-9])\s?(AM|PM)$/i;
 const pad = (n) => n.toString().padStart(2, '0');
@@ -27,13 +26,18 @@ export const formatTimeDisplay = (date) => {
     return `${pad(hours12)}:${pad(date.getMinutes())} ${meridiem}`;
 };
 /** Return a new Date with the time-of-day from a 12-hour display string applied, or null when invalid. */
-export const applyTimeDisplay = (date, display) => {
+export const applyTimeDisplay = (date, display, boundary) => {
     const parsed = parseTimeDisplay(display);
     if (parsed === null) {
         return null;
     }
     const next = new Date(date.getTime());
-    next.setHours(parsed.hours, parsed.minutes, 0, 0);
+    if (boundary === 'end') {
+        next.setHours(parsed.hours, parsed.minutes, 59, 999);
+    }
+    else {
+        next.setHours(parsed.hours, parsed.minutes, 0, 0);
+    }
     return next;
 };
 /** Minutes-since-midnight for ordering comparisons, or null when the display is invalid. */

package/dist/Menu/Menu.svelte

@@ -13,6 +13,7 @@
     onopen,
     onclose,
     classes,
+    selectedValue = null,
     role: menuRole = 'menu',
     ariaLabel: menuAriaLabel,
     id: menuId
@@ -43,12 +44,20 @@
     }
   }
 
-  function openMenu(startIndex: number = 0) {
+  function openMenu(startIndex: number | null = null) {
     open = true;
-    focusedIndex = startIndex;
+    // With a known selection, opening focuses the selected option (listbox
+    // convention) instead of always parking the focus highlight on item 0.
+    const selectedItem =
+      selectedValue != null
+        ? (items.find((item) => item.value === selectedValue && item.disabled !== true) ?? null)
+        : null;
+    const initialIndex =
+      startIndex ?? (selectedItem !== null ? getSelectableIndex(selectedItem) : 0);
+    focusedIndex = initialIndex;
     onopen?.();
     tick().then(() => {
-      focusItem(startIndex);
+      focusItem(initialIndex);
     });
   }
 
@@ -232,12 +241,17 @@
             class="menu-item"
             class:menu-item-danger={item.danger === true}
             class:menu-item-disabled={item.disabled === true}
+            class:menu-item-selected={selectedValue != null && item.value === selectedValue}
             role={itemRole}
             id={item.id}
             tabindex={item.disabled === true || menuRole === 'listbox' ? -1 : 0}
             aria-disabled={item.disabled === true ? 'true' : null}
-            aria-selected={menuRole === 'listbox' && focusedIndex === getSelectableIndex(item)
-              ? true
+            aria-selected={menuRole === 'listbox'
+              ? selectedValue != null
+                ? item.value === selectedValue
+                : focusedIndex === getSelectableIndex(item)
+                  ? true
+                  : null
               : null}
             onclick={() => selectItem(item)}
             onfocus={() => {
@@ -318,6 +332,13 @@
     outline: var(--menu-item-focus-outline, none);
   }
 
+  /* True selection (selectedValue match) — distinct from transient focus so the
+     highlight follows the chosen option, not wherever keyboard focus landed. */
+  .menu-item-selected {
+    background-color: var(--menu-item-selected-background-color, transparent);
+    color: var(--menu-item-selected-color, inherit);
+  }
+
   .menu-item-danger {
     color: var(--menu-item-danger-color, #dc3545);
   }

package/dist/Menu/properties.d.ts

@@ -17,6 +17,11 @@ export type OptionalMenuProperties = {
     testId?: string;
     trigger?: Snippet;
     classes?: string;
+    /** Value of the currently selected item. When set, opening the menu focuses the
+     * selected option instead of the first item, the matching item gets the
+     * `menu-item-selected` class (stylable via --menu-item-selected-*), and
+     * listbox aria-selected reflects the real selection. */
+    selectedValue?: string | null;
     role?: 'menu' | 'listbox';
     ariaLabel?: string;
     id?: string;

package/dist/SankeyChart/SankeyChart.svelte

@@ -52,11 +52,39 @@
   let format = $derived(valueFormat ?? formatNumber);
   let isEmpty = $derived(nodes.length === 0);
   const MARGIN = 40;
+  const LABEL_CHAR_PX = 7.2; // ≈ 0.6em at the 12px default label size
+
+  // Final-column labels render to the RIGHT of their node; the bare 40px margin is
+  // nowhere near enough for real funnel labels ("PARTIALLY_FAILED (1,234)"), so they
+  // used to run past the svg edge and clip. Reserve a capped gutter sized from the
+  // sink-node labels (sinks are what land in the final column) and lay the diagram
+  // out in the remaining width instead.
+  let lastColumnLabelGutter = $derived.by(() => {
+    if (!showLabels || nodes.length === 0 || chartWidth <= 0) {
+      return 0;
+    }
+    const sourceIds = new Set(links.map((link) => link.source));
+    const sinkLabels = nodes
+      .filter((node) => !sourceIds.has(node.id))
+      .map((node) => node.label ?? node.id);
+    if (sinkLabels.length === 0) {
+      return 0;
+    }
+    const longestChars =
+      Math.max(...sinkLabels.map((label) => label.length)) + (showValues ? 9 : 0);
+    const wanted = longestChars * LABEL_CHAR_PX + 10 + dataLabelOffsetX;
+    // Cap the reservation so labels can never squeeze the diagram below 3/4 width,
+    // and floor at 0 — a negative dataLabelOffsetX must not inflate the plot
+    // past the right margin.
+    return Math.max(0, Math.min(chartWidth * 0.25, wanted));
+  });
+
+  let plotWidth = $derived(Math.max(0, chartWidth - MARGIN * 2 - lastColumnLabelGutter));
   let layout = $derived(
     computeSankeyLayout(
       nodes,
       links,
-      Math.max(0, chartWidth - MARGIN * 2),
+      plotWidth,
       Math.max(0, chartHeight - MARGIN * 2),
       nodeWidth,
       nodePadding,
@@ -87,21 +115,31 @@
     layout.nodes.length > 0 ? Math.max(...layout.nodes.map((n) => n.column)) + 1 : 0
   );
   let colWidth = $derived(
-    columnCount <= 1
-      ? Math.max(0, chartWidth - MARGIN * 2)
-      : (Math.max(0, chartWidth - MARGIN * 2) - nodeWidth) / (columnCount - 1)
+    columnCount <= 1 ? plotWidth : (plotWidth - nodeWidth) / (columnCount - 1)
   );
 
   // Node labels render alongside their bar; long labels used to overflow into the
   // next column and collide. Clip each to the horizontal room its column actually
   // has and append an ellipsis (the full text stays available via the node tooltip).
-  const LABEL_CHAR_PX = 7.2; // ≈ 0.6em at the 12px default label size
+  // The final column's room is the reserved right gutter (plus the margin), NOT
+  // colWidth — budgeting it at colWidth is what used to let edge labels clip.
+  // Column headers are centred over columns that narrow as the label gutter and
+  // column count grow; untruncated they collide into one unreadable run. Clip to
+  // the column pitch with an ellipsis — the full text stays on the <title>.
+  const truncateColumnLabel = (text: string): string => {
+    const maxChars = Math.floor(Math.max(0, colWidth - 6) / LABEL_CHAR_PX);
+    if (maxChars < 3) {
+      return '';
+    }
+    return text.length > maxChars ? text.slice(0, maxChars - 1) + '…' : text;
+  };
+
   const truncateLabel = (text: string, column: number): string => {
     const available =
       column === 0
         ? MARGIN + 16
         : column === columnCount - 1
-          ? Math.max(colWidth, MARGIN + 24)
+          ? Math.max(0, lastColumnLabelGutter + MARGIN - 6 - dataLabelOffsetX)
           : Math.max(0, colWidth - nodeWidth - 12);
     const maxChars = Math.floor(available / LABEL_CHAR_PX);
     // No usable room — hide the label rather than force text that would overflow;
@@ -308,7 +346,7 @@
               x={ci * colWidth + nodeWidth / 2}
               y={-8}
               text-anchor="middle"
-              dominant-baseline="auto">{label}</text
+              dominant-baseline="auto">{truncateColumnLabel(label)}<title>{label}</title></text
             >
           {/each}
         {/if}

package/package.json

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