@juspay/svelte-ui-components 2.80.6 → 2.80.7

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/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.7",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",