@juspay/svelte-ui-components 2.89.0 → 2.89.2

package/dist/Modal/Modal.svelte

@@ -263,10 +263,23 @@
     border-radius: var(--modal-border-radius, var(--radius, 4px));
     overflow: var(--modal-content-overflow, auto);
     border-top: var(--modal-content-border-top);
+    /* Viewport containment for every size class: only .fit-content used to carry
+       a max-height, so a size whose height var is overridden to fit-content (or
+       anything taller than the screen) grew past the viewport and pushed its
+       footer and bottom rounding off-screen. dvh tracks the real visible
+       viewport on mobile; the vh line is the fallback for engines without dvh. */
+    max-height: var(--modal-max-height, calc(100vh - 32px));
+    max-height: var(--modal-max-height, calc(100dvh - 32px));
   }
 
   .slot-content {
     display: var(--modal-display, flex);
+    /* Flex children default to min-height: auto and refuse to shrink below their
+       content, which defeats the overflow-y scroll once modal-content is
+       height-capped — the content spills instead of scrolling and the footer is
+       pushed out. 0 lets the slot shrink so its own scrollbar engages and the
+       header/footer stay pinned inside the viewport. */
+    min-height: var(--modal-slot-content-min-height, 0);
     overflow-y: var(--modal-overflow-y, scroll);
     scrollbar-width: var(--modal-scrollbar-width, none);
     padding: var(--modal-content-padding, 0);

package/dist/SankeyChart/SankeyChart.svelte

@@ -53,6 +53,53 @@
   let isEmpty = $derived(nodes.length === 0);
   const MARGIN = 40;
   const LABEL_CHAR_PX = 7.2; // ≈ 0.6em at the 12px default label size
+  // A 12px label's rendered line box measures ~16px (≈1.33em) across common
+  // font stacks; two label centres closer than this overlap visibly.
+  const LABEL_LINE_PX = 16;
+
+  // Per-character width estimate at the 12px default label size. A flat
+  // 7.2px/char average underestimates uppercase-heavy labels ("OTP SKIPPED
+  // (1,234)" is ~8.2px/char), so "truncated" labels still overflowed their
+  // budget and slid under the next column's node bar.
+  const estimateCharWidth = (ch: string): number => {
+    if (/[mwMW@]/.test(ch)) {
+      return 10.6;
+    }
+    if (/[A-Z0-9_#%&]/.test(ch)) {
+      return 8.2;
+    }
+    if (/[iljtfr.,:;'’()[\]!|]/.test(ch)) {
+      return 3.6;
+    }
+    if (ch === ' ') {
+      return 3.8;
+    }
+    return 6.6;
+  };
+
+  const estimateTextWidth = (text: string): number => {
+    let width = 0;
+    for (const ch of text) {
+      width += estimateCharWidth(ch);
+    }
+    return width;
+  };
+
+  // Trim `text` (appending an ellipsis) until its estimated width fits
+  // `available` px. Returns '' when even 3 chars + ellipsis cannot fit —
+  // callers hide the label and rely on the <title> tooltip instead.
+  const fitTextToWidth = (text: string, available: number): string => {
+    if (estimateTextWidth(text) <= available) {
+      return text;
+    }
+    for (let keep = text.length - 1; keep >= 3; keep--) {
+      const candidate = text.slice(0, keep) + '…';
+      if (estimateTextWidth(candidate) <= available) {
+        return candidate;
+      }
+    }
+    return '';
+  };
 
   // 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
@@ -70,9 +117,10 @@
     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;
+    const longestPx =
+      Math.max(...sinkLabels.map((label) => estimateTextWidth(label))) +
+      (showValues ? 9 * LABEL_CHAR_PX : 0);
+    const wanted = longestPx + 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.
@@ -127,29 +175,71 @@
   // 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;
+    return fitTextToWidth(text, Math.max(0, colWidth - 6));
   };
 
   const truncateLabel = (text: string, column: number): string => {
+    // Middle columns must budget for dataLabelOffsetX too: the label starts at
+    // node.x + nodeWidth + 6 + dataLabelOffsetX, so the room before the next
+    // column's bar shrinks by the same offset. Omitting it let "fitting"
+    // labels run under the neighbouring column's node rect.
+    // First-column labels anchor `end` at node.x - 6 - offset with node.x = 0,
+    // so their room is exactly the left margin minus that inset — budgeting
+    // more pushes long labels past the SVG's left edge, where they clip.
     const available =
       column === 0
-        ? MARGIN + 16
+        ? Math.max(0, MARGIN - 6 - dataLabelOffsetX)
         : column === columnCount - 1
           ? Math.max(0, lastColumnLabelGutter + MARGIN - 6 - dataLabelOffsetX)
-          : Math.max(0, colWidth - nodeWidth - 12);
-    const maxChars = Math.floor(available / LABEL_CHAR_PX);
+          : Math.max(0, colWidth - nodeWidth - 12 - dataLabelOffsetX);
     // No usable room — hide the label rather than force text that would overflow;
     // the full text is still reachable via the node's <title> on hover.
-    if (maxChars < 3) {
-      return '';
-    }
-    return text.length > maxChars ? text.slice(0, maxChars - 1) + '…' : text;
+    return fitTextToWidth(text, available);
   };
 
+  // Vertical label de-collision: labels sit at each node's centre-y, so two
+  // small stacked nodes in a crowded column render their 12px labels on top of
+  // each other. Per column, walk labels top-to-bottom and drop the label of
+  // the smaller-value node whenever two centres come closer than one label
+  // line — the hidden label's text stays reachable via the node's <title>.
+  let collidingLabels = $derived.by(() => {
+    const hidden = new SvelteSet<string>();
+    if (!showLabels) {
+      return hidden;
+    }
+    const byColumn = new SvelteMap<number, typeof layout.nodes>();
+    for (const node of layout.nodes) {
+      const bucket = byColumn.get(node.column);
+      if (bucket) {
+        bucket.push(node);
+      } else {
+        byColumn.set(node.column, [node]);
+      }
+    }
+    for (const columnNodes of byColumn.values()) {
+      const sorted = [...columnNodes].sort((a, b) => a.y + a.height / 2 - (b.y + b.height / 2));
+      let lastKept: (typeof sorted)[number] | null = null;
+      for (const node of sorted) {
+        if (lastKept === null) {
+          lastKept = node;
+          continue;
+        }
+        const centerGap = node.y + node.height / 2 - (lastKept.y + lastKept.height / 2);
+        if (centerGap < LABEL_LINE_PX) {
+          if (node.value > lastKept.value) {
+            hidden.add(lastKept.id);
+            lastKept = node;
+          } else {
+            hidden.add(node.id);
+          }
+        } else {
+          lastKept = node;
+        }
+      }
+    }
+    return hidden;
+  });
+
   // ── Helpers ────────────────────────────────────────────────────
 
   /** Percentage of source node's total value carried by a link (0–100, 2 dp). */
@@ -391,24 +481,33 @@
             onmouseleave={handleNodeLeave}
             onclick={() => handleNodeClick(node.id)}
           />
-          {#if showLabels}
-            <text
-              class="sankey-label"
-              class:node-dimmed={dimmed}
-              x={node.column === 0
-                ? node.x - 6 - dataLabelOffsetX
-                : node.x + node.width + 6 + dataLabelOffsetX}
-              y={node.y + node.height / 2}
-              text-anchor={node.column === 0 ? 'end' : 'start'}
-              dominant-baseline="middle"
-              >{truncateLabel(
-                showValues ? `${node.label} (${format(node.value)})` : node.label,
-                node.column
-              )}<title>{showValues ? `${node.label} (${format(node.value)})` : node.label}</title
-              ></text
-            >
-          {/if}
         {/each}
+
+        <!-- Labels render in a second pass, after every node rect: within one
+             interleaved loop a label could be over-painted by a later column's
+             bar whenever the width estimate ran short. -->
+        {#if showLabels}
+          {#each layout.nodes as node, ni (ni)}
+            {@const dimmed = connectedNodes !== null && !connectedNodes.has(node.id)}
+            {#if !collidingLabels.has(node.id)}
+              <text
+                class="sankey-label"
+                class:node-dimmed={dimmed}
+                x={node.column === 0
+                  ? node.x - 6 - dataLabelOffsetX
+                  : node.x + node.width + 6 + dataLabelOffsetX}
+                y={node.y + node.height / 2}
+                text-anchor={node.column === 0 ? 'end' : 'start'}
+                dominant-baseline="middle"
+                >{truncateLabel(
+                  showValues ? `${node.label} (${format(node.value)})` : node.label,
+                  node.column
+                )}<title>{showValues ? `${node.label} (${format(node.value)})` : node.label}</title
+                ></text
+              >
+            {/if}
+          {/each}
+        {/if}
       </g>
     </ChartContainer>
 

package/dist/Select/Select.svelte

@@ -551,6 +551,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-align: var(--select-value-align, left);
   }
 
   .select-placeholder {
@@ -559,6 +560,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-align: var(--select-value-align, left);
   }
 
   .select-search {

package/dist/Table/BuiltinCell.svelte

@@ -543,6 +543,7 @@
     display: inline-flex;
     align-items: center;
     min-width: 0;
+    width: var(--table-interactive-width, auto);
   }
 
   .builtin-action-group {

package/dist/Table/Table.svelte

@@ -49,7 +49,10 @@
     onSearchChange,
     pagination,
     toolbarSlot,
-    rowNumberColumn = false
+    rowNumberColumn = false,
+    rowNumberLabel = '#',
+    headerTooltipIcon,
+    headerTooltipPosition
   }: TableProperties = $props();
 
   // ─── Keyed column model → positional projection ─────────────────────────────
@@ -612,7 +615,7 @@
           {/if}
           {#if rowNumberColumn}
             <th class="table-header table-row-number-col" class:table-header-sticky={isStickyHeader}
-              >#</th
+              >{rowNumberLabel}</th
             >
           {/if}
           {#each effectiveHeaders as header, colIndex (colIndex)}
@@ -633,8 +636,16 @@
                     : null}
               >
                 {#if headerColumn?.tooltip}
-                  <Tooltip text={headerColumn.tooltip}>
-                    <span class="table-header-label">{header}</span>
+                  <Tooltip
+                    text={headerColumn.tooltip}
+                    position={headerTooltipPosition}
+                    icon={headerTooltipIcon}
+                    iconPosition="trailing"
+                  >
+                    <span
+                      class="table-header-label"
+                      class:table-header-label-plain={headerTooltipIcon}>{header}</span
+                    >
                   </Tooltip>
                 {:else}
                   {header}
@@ -990,12 +1001,14 @@
     letter-spacing: var(--table-header-letter-spacing, 0.02em);
     text-transform: var(--table-header-text-transform);
     color: var(--table-header-color, var(--table-header-font-color, #6b7280));
+    border-bottom: var(--table-header-border, var(--table-inner-border, none));
   }
 
   .table-header-content {
     display: flex;
     align-items: center;
     gap: 4px;
+    justify-content: var(--table-header-justify, flex-start);
   }
 
   .table-header-label {
@@ -1004,6 +1017,10 @@
     cursor: help;
   }
 
+  .table-header-label-plain {
+    text-decoration: none;
+  }
+
   .table-header-filter {
     display: inline-flex;
     align-items: center;
@@ -1256,6 +1273,7 @@
     width: var(--table-row-number-col-width, 48px);
     color: var(--table-row-number-color, #6b7280);
     font-variant-numeric: tabular-nums;
+    text-align: var(--table-row-number-align, var(--table-text-align, left));
   }
 
   /* ── Accessibility ──────────────────────────────────────────────────────── */

package/dist/Table/properties.d.ts

@@ -1,5 +1,6 @@
 import type { JSONValue } from 'type-decoder';
 import type { Snippet } from 'svelte';
+import type { TooltipPosition } from '../Tooltip/properties';
 export type SortDirection = 'asc' | 'desc';
 /**
  * Built-in cell renderer vocabulary for the keyed column model.
@@ -335,6 +336,16 @@ export type OptionalTableProperties = {
     }]>;
     /** Prepends a sequential row-number column (1-based, pagination-aware). */
     rowNumberColumn?: boolean;
+    /** Header label for the row-number column. Defaults to `'#'`. */
+    rowNumberLabel?: string;
+    /**
+     * Icon snippet shown after each header label that has a `tooltip` — the
+     * consumer supplies the glyph; the table places it trailing inside the tooltip
+     * trigger. When set, the default underline affordance on those labels is dropped.
+     */
+    headerTooltipIcon?: Snippet;
+    /** Placement of every header tooltip bubble. Defaults to `'top'`. */
+    headerTooltipPosition?: TooltipPosition;
     sortable?: boolean;
     sortableColumns?: number[];
     stickyHeader?: boolean;

package/dist/Tabs/Tabs.svelte

@@ -252,30 +252,51 @@
     display: none;
   }
 
+  /* Each fade holds FULLY transparent for the first --tabs-fade-solid px before
+     ramping to opaque: a plain 0→fade-size ramp still renders the clipped tab
+     label at ~20% opacity a few px from the edge, which reads as a stray glyph
+     fragment beside the scroll arrow. The solid zone guarantees nothing is
+     perceptible there. */
   .tabs-bar.fade-left {
-    mask-image: linear-gradient(to right, transparent, black var(--tabs-fade-size, 32px));
-    -webkit-mask-image: linear-gradient(to right, transparent, black var(--tabs-fade-size, 32px));
+    mask-image: linear-gradient(
+      to right,
+      transparent var(--tabs-fade-solid, 8px),
+      black var(--tabs-fade-size, 32px)
+    );
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent var(--tabs-fade-solid, 8px),
+      black var(--tabs-fade-size, 32px)
+    );
   }
 
   .tabs-bar.fade-right {
-    mask-image: linear-gradient(to left, transparent, black var(--tabs-fade-size, 32px));
-    -webkit-mask-image: linear-gradient(to left, transparent, black var(--tabs-fade-size, 32px));
+    mask-image: linear-gradient(
+      to left,
+      transparent var(--tabs-fade-solid, 8px),
+      black var(--tabs-fade-size, 32px)
+    );
+    -webkit-mask-image: linear-gradient(
+      to left,
+      transparent var(--tabs-fade-solid, 8px),
+      black var(--tabs-fade-size, 32px)
+    );
   }
 
   .tabs-bar.fade-left.fade-right {
     mask-image: linear-gradient(
       to right,
-      transparent,
+      transparent var(--tabs-fade-solid, 8px),
       black var(--tabs-fade-size, 32px),
       black calc(100% - var(--tabs-fade-size, 32px)),
-      transparent
+      transparent calc(100% - var(--tabs-fade-solid, 8px))
     );
     -webkit-mask-image: linear-gradient(
       to right,
-      transparent,
+      transparent var(--tabs-fade-solid, 8px),
       black var(--tabs-fade-size, 32px),
       black calc(100% - var(--tabs-fade-size, 32px)),
-      transparent
+      transparent calc(100% - var(--tabs-fade-solid, 8px))
     );
   }
 

package/dist/Tooltip/Tooltip.svelte

@@ -11,6 +11,7 @@
     classes,
     children,
     icon,
+    iconPosition = 'leading',
     content,
     usePortal = false
   }: TooltipProperties = $props();
@@ -355,10 +356,13 @@
   onfocusout={hideTooltip}
   data-pw={testId}
 >
-  {#if typeof icon === 'function'}
+  {#if typeof icon === 'function' && iconPosition === 'leading'}
     <span class="tooltip-icon" aria-hidden="true">{@render icon()}</span>
   {/if}
   {@render children()}
+  {#if typeof icon === 'function' && iconPosition === 'trailing'}
+    <span class="tooltip-icon" aria-hidden="true">{@render icon()}</span>
+  {/if}
   {#if visible && !usePortal}
     <div
       use:clampInlineBubble

package/dist/Tooltip/properties.d.ts

@@ -9,8 +9,10 @@ export type OptionalTooltipProperties = {
     delay?: number;
     testId?: string | null;
     classes?: string;
-    /** Snippet rendered as a leading icon in the trigger wrapper. No default glyph is provided — consumers supply their own. */
+    /** Snippet rendered as an icon in the trigger wrapper, beside the content. No default glyph is provided — consumers supply their own. Placement is controlled by `iconPosition`. */
     icon?: Snippet;
+    /** Which side of the trigger content the `icon` sits on. Defaults to `'leading'`. */
+    iconPosition?: 'leading' | 'trailing';
     /** Snippet rendered as the bubble body. When provided, replaces the plain `text` string inside the tooltip bubble. */
     content?: Snippet;
     /**

package/package.json

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