@juspay/svelte-ui-components 2.89.0 → 2.89.1

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