@juspay/svelte-ui-components 2.90.0 → 2.91.0

package/dist/PieChart/PieChart.svelte

@@ -10,7 +10,11 @@
   import { computePieLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
+  import { measureText, readCssVarPx } from '../_chart/measure';
+  import { truncateToWidth, placedLabelRect, dropOverlapping } from '../_chart/labels';
+  import type { LabelRect } from '../_chart/labels';
   import type { LegendItem } from '../_chart/types';
+  import { SvelteMap } from 'svelte/reactivity';
 
   // ── Props ──────────────────────────────────────────────────────
 
@@ -153,6 +157,76 @@
     data.map((d, i) => ({ label: d.label, color: d.color ?? getColor(i) }))
   );
 
+  // ── Label engine ───────────────────────────────────────────────
+  // A crowded pie (many slices, long labels) used to render every label
+  // unconditionally at its mid-angle: stacked unreadable text that also ran
+  // past the chart box. Labels are now measured, truncated to the horizontal
+  // room the chart actually has, gated on the slice's arc length (inside
+  // position), and de-collided with larger slices winning. Dropped or
+  // truncated text stays available on the tooltip and aria-label.
+  let visibleSliceLabels = $derived.by(() => {
+    const visible = new SvelteMap<number, string>();
+    if ((!showLabels && !showValues) || chartWidth <= 0) {
+      return visible;
+    }
+    const font = {
+      size: containerEl ? readCssVarPx(containerEl, '--piechart-label-font-size', 12) : 12
+    };
+    const lineHeight = measureText('Ag', font).height;
+
+    type LabelCandidate = { index: number; value: number; text: string; rect: LabelRect };
+    const candidates: LabelCandidate[] = [];
+    for (const slice of slices) {
+      const parts: string[] = [];
+      if (showLabels) {
+        parts.push(slice.label);
+      }
+      if (showValues) {
+        parts.push(pctFormat(slice.value));
+      }
+      const raw = parts.join(' ').trim();
+      if (raw.length === 0) {
+        continue;
+      }
+      const absX = cx + slice.labelX;
+      const absY = cy + slice.labelY;
+      // text-anchor is middle, so the budget is twice the room to the nearer edge.
+      const budget = Math.max(0, Math.min(absX, chartWidth - absX) * 2 - 8);
+      const labelRadius = labelPosition === 'outside' ? outerR : (innerR + outerR) / 2;
+      const arcLength = (slice.endAngle - slice.startAngle) * labelRadius;
+      // An inside label sits ON its wedge — hide it when the wedge is thinner
+      // than one text line (outside labels rely on the collision pass instead).
+      if (labelPosition === 'inside' && arcLength < lineHeight) {
+        continue;
+      }
+      const text = truncateToWidth(raw, budget, font);
+      if (text === '') {
+        continue;
+      }
+      const size = measureText(text, font);
+      candidates.push({
+        index: slice.index,
+        value: slice.value,
+        text,
+        rect: placedLabelRect(
+          { x: absX, y: absY, textAnchor: 'middle', dominantBaseline: 'middle' },
+          size
+        )
+      });
+    }
+
+    // Feed the greedy first-come collision pass in value order so the larger
+    // slice keeps its label whenever two collide.
+    const ordered = [...candidates].sort((a, b) => b.value - a.value);
+    const keptFlags = dropOverlapping(ordered.map((candidate) => candidate.rect));
+    ordered.forEach((candidate, orderedIndex) => {
+      if (keptFlags[orderedIndex]) {
+        visible.set(candidate.index, candidate.text);
+      }
+    });
+    return visible;
+  });
+
   let centerBoxSize = $derived(innerR > 0 ? Math.max(0, innerR * 1.3) : 0);
 
   // The foreignObject for the center snippet is positioned relative to the <g>
@@ -243,19 +317,15 @@
             onmouseleave={handleLeave}
             onclick={() => onsliceclick?.({ index: slice.index, slice: data[slice.index] })}
           />
-          {#if showLabels || showValues}
+          {#if visibleSliceLabels.has(slice.index)}
             <text
               class="slice-label"
               class:label-outside={labelPosition === 'outside'}
               x={slice.labelX}
               y={slice.labelY}
               text-anchor="middle"
-              dominant-baseline="middle"
+              dominant-baseline="middle">{visibleSliceLabels.get(slice.index)}</text
             >
-              {#if showLabels}{slice.label}{/if}
-              {#if showValues}
-                {pctFormat(slice.value)}{/if}
-            </text>
           {/if}
         {/each}
 

package/dist/SankeyChart/SankeyChart.svelte

@@ -5,6 +5,8 @@
   import { computeSankeyLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
+  import { measureText, readCssVarPx } from '../_chart/measure';
+  import { truncateToWidth } from '../_chart/labels';
   import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
@@ -52,54 +54,20 @@
   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
   // 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 '';
-  };
+  // Real text measurement via the shared canvas-backed helper (exact on the
+  // client, 0.6em/char heuristic under SSR/tests). Character estimates used
+  // to both over-reserve the right label gutter (dead canvas) and under-budget
+  // uppercase-heavy labels (text sliding under the next column's bars).
+  let labelFont = $derived({
+    size: containerEl ? readCssVarPx(containerEl, '--sankey-label-font-size', 12) : 12
+  });
+  let colLabelFont = $derived({
+    size: containerEl ? readCssVarPx(containerEl, '--sankey-col-label-font-size', 11) : 11
+  });
 
   // 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
@@ -118,8 +86,8 @@
       return 0;
     }
     const longestPx =
-      Math.max(...sinkLabels.map((label) => estimateTextWidth(label))) +
-      (showValues ? 9 * LABEL_CHAR_PX : 0);
+      Math.max(...sinkLabels.map((label) => measureText(label, labelFont).width)) +
+      (showValues ? measureText(' (999,999)', labelFont).width : 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
@@ -175,7 +143,7 @@
   // 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 => {
-    return fitTextToWidth(text, Math.max(0, colWidth - 6));
+    return truncateToWidth(text, Math.max(0, colWidth - 6), colLabelFont);
   };
 
   const truncateLabel = (text: string, column: number): string => {
@@ -194,7 +162,7 @@
           : 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.
-    return fitTextToWidth(text, available);
+    return truncateToWidth(text, available, labelFont);
   };
 
   // Vertical label de-collision: labels sit at each node's centre-y, so two

package/dist/Table/BuiltinCell.svelte

@@ -42,6 +42,20 @@
     originalIndex: number;
   } = $props();
 
+  // The td applies column.align as text-align, which flex containers ignore:
+  // column-flex builtins stretch their children and row-flex builtins pack to
+  // flex-start, so an aligned column's builtin cells stayed left. Mirror the
+  // column alignment as a modifier class the flex builtins translate into
+  // align-items / justify-content (same idiom as the header's
+  // justify-content mapping).
+  const alignmentClass = $derived(
+    column.align === 'right'
+      ? 'builtin-align-end'
+      : column.align === 'center'
+        ? 'builtin-align-center'
+        : ''
+  );
+
   let copied = $state(false);
   let copyResetTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -99,7 +113,7 @@
 {:else if column.type === 'text-tag'}
   {@const data = asJsonObject(value) ?? {}}
   {@const tag = asTagCellData(data.tag ?? null)}
-  <div class="builtin-text-tag">
+  <div class="builtin-text-tag {alignmentClass}">
     <span class="builtin-primary-text"
       >{typeof data.text === 'string' ? data.text : cellValueToText(value)}</span
     >
@@ -114,7 +128,7 @@
   </div>
 {:else if column.type === 'two-line-text'}
   {@const data = asJsonObject(value) ?? {}}
-  <div class="builtin-two-line">
+  <div class="builtin-two-line {alignmentClass}">
     <span class="builtin-primary-text">{typeof data.text1 === 'string' ? data.text1 : '-'}</span>
     <span class="builtin-secondary-text">{typeof data.text2 === 'string' ? data.text2 : '-'}</span>
   </div>
@@ -123,7 +137,7 @@
   {@const icons = Array.isArray(data.icons)
     ? data.icons.filter((iconSrc) => typeof iconSrc === 'string')
     : []}
-  <div class="builtin-icon-label">
+  <div class="builtin-icon-label {alignmentClass}">
     {#each icons as iconSrc, iconIndex (`${iconIndex}-${iconSrc}`)}
       <span class="builtin-icon-label-icon">
         <Img src={String(iconSrc)} alt="" fallback="" />
@@ -133,7 +147,7 @@
   </div>
 {:else if column.type === 'image-two-line-text'}
   {@const data = asJsonObject(value) ?? {}}
-  <div class="builtin-image-two-line">
+  <div class="builtin-image-two-line {alignmentClass}">
     {#if typeof data.imageUrl === 'string' && data.imageUrl}
       <span class="builtin-thumb">
         <Img
@@ -145,7 +159,7 @@
     {:else}
       <span class="builtin-thumb builtin-thumb-placeholder"></span>
     {/if}
-    <div class="builtin-two-line">
+    <div class="builtin-two-line {alignmentClass}">
       <span class="builtin-primary-text">{typeof data.text1 === 'string' ? data.text1 : '-'}</span>
       <span class="builtin-secondary-text">{typeof data.text2 === 'string' ? data.text2 : '-'}</span
       >
@@ -154,7 +168,7 @@
 {:else if column.type === 'tag-array'}
   {@const tags = asTagArrayItems(value)}
   {#if tags}
-    <div class="builtin-tag-array">
+    <div class="builtin-tag-array {alignmentClass}">
       {#each tags as tag (tag.text)}
         <Pill text={tag.text} classes={tag.classes ?? ''} />
       {/each}
@@ -166,7 +180,7 @@
   {@const stackData = asAvatarStackData(value)}
   {#if stackData}
     {@const stack = buildAvatarStack(stackData)}
-    <div class="builtin-avatar-stack">
+    <div class="builtin-avatar-stack {alignmentClass}">
       <IconStack icons={stack.icons} />
       {#if stack.rest > 0}
         <span class="builtin-avatar-rest">+{stack.rest}</span>
@@ -181,7 +195,7 @@
   {:else}
     {@const compare = asCompareCellData(value)}
     {#if compare}
-      <div class="builtin-compare">
+      <div class="builtin-compare {alignmentClass}">
         {#if typeof compare.primary === 'string'}
           <span class="builtin-primary-text">{compare.primary}</span>
         {/if}
@@ -448,6 +462,35 @@
     gap: var(--table-cell-line-gap, 2px);
   }
 
+  /* column.align lands on the td as text-align, which flex layouts ignore.
+     Column-flex builtins follow it via align-items… */
+  .builtin-two-line.builtin-align-end,
+  .builtin-compare.builtin-align-end {
+    align-items: flex-end;
+  }
+
+  .builtin-two-line.builtin-align-center,
+  .builtin-compare.builtin-align-center {
+    align-items: center;
+  }
+
+  /* …and row-flex builtins follow it via justify-content. */
+  .builtin-text-tag.builtin-align-end,
+  .builtin-icon-label.builtin-align-end,
+  .builtin-image-two-line.builtin-align-end,
+  .builtin-tag-array.builtin-align-end,
+  .builtin-avatar-stack.builtin-align-end {
+    justify-content: flex-end;
+  }
+
+  .builtin-text-tag.builtin-align-center,
+  .builtin-icon-label.builtin-align-center,
+  .builtin-image-two-line.builtin-align-center,
+  .builtin-tag-array.builtin-align-center,
+  .builtin-avatar-stack.builtin-align-center {
+    justify-content: center;
+  }
+
   .builtin-text-tag {
     display: flex;
     align-items: center;

package/dist/Table/Table.svelte

@@ -133,6 +133,37 @@
   let isRowClickable = $derived(typeof onRowClick === 'function');
   let isStickyHeader = $derived(stickyHeader || isTableScrollable);
 
+  // ─── Horizontal-scroll affordance ────────────────────────────────────────
+  // The table clips columns behind an internal horizontal scroll on narrow
+  // viewports, but a bare scroll container gives no visual hint that more
+  // columns exist. Track whether either edge has hidden content and surface
+  // it as edge scrims (see .table-scroll-shell styles).
+  let canScrollLeft = $state(false);
+  let canScrollRight = $state(false);
+
+  const trackHorizontalScroll = (scrollNode: HTMLElement) => {
+    const updateScrollHints = () => {
+      canScrollLeft = scrollNode.scrollLeft > 2;
+      canScrollRight = scrollNode.scrollLeft + scrollNode.clientWidth < scrollNode.scrollWidth - 2;
+    };
+    updateScrollHints();
+    scrollNode.addEventListener('scroll', updateScrollHints, { passive: true });
+    // Both the container resizing (viewport changes) and the table resizing
+    // (async rows/columns arriving) change scrollWidth, so observe both.
+    const hintResizeObserver = new ResizeObserver(updateScrollHints);
+    hintResizeObserver.observe(scrollNode);
+    const tableElement = scrollNode.querySelector('table');
+    if (tableElement) {
+      hintResizeObserver.observe(tableElement);
+    }
+    return {
+      destroy: () => {
+        scrollNode.removeEventListener('scroll', updateScrollHints);
+        hintResizeObserver.disconnect();
+      }
+    };
+  };
+
   // ─── C2-3: Search ─────────────────────────────────────────────────────────
   let searchTerm = $state('');
   let hasSearchConfig = $derived(!!searchConfig);
@@ -572,263 +603,286 @@
     class="table-container {isTableScrollable ? 'scrollable-table' : ''} {classes ?? ''}"
     data-pw={testId}
   >
-    <table>
-      {#if caption}
-        <caption class="sr-only">{caption}</caption>
-      {/if}
-      <thead>
-        <tr>
-          {#if isCheckboxMode && !isSingleSelect}
-            <th class="table-header table-checkbox-col" class:table-header-sticky={isStickyHeader}>
-              <!-- Header tri-state checkbox -->
-              <span
-                class="table-checkbox-box"
-                class:checked={headerCheckboxState === 'all'}
-                class:indeterminate={headerCheckboxState === 'some'}
-                role="checkbox"
-                tabindex={0}
-                aria-checked={headerCheckboxState === 'some'
-                  ? 'mixed'
-                  : headerCheckboxState === 'all'}
-                aria-label="Select all rows"
-                {...checkboxSelection?.getRowAttributes
-                  ? checkboxSelection.getRowAttributes('__header__', -1)
-                  : {}}
-                aria-controls={selectableRowIds.map((rowId) => `row-checkbox-${rowId}`).join(' ')}
-                onclick={toggleAllSelection}
-                onkeydown={(keyboardEvent) =>
-                  handleCheckboxKeydown(keyboardEvent, toggleAllSelection)}
-              >
-                {#if headerCheckboxState === 'all'}
-                  <!-- eslint-disable svelte/no-at-html-tags -->
-                  <span class="table-checkbox-icon">{@html checkmarkSvg}</span>
-                {:else if headerCheckboxState === 'some'}
-                  <!-- eslint-disable svelte/no-at-html-tags -->
-                  <span class="table-checkbox-icon">{@html minusSvg}</span>
-                {/if}
-              </span>
-            </th>
-          {:else if isCheckboxMode && isSingleSelect}
-            <!-- In single-select mode the header cell is an empty spacer -->
-            <th class="table-header table-checkbox-col" class:table-header-sticky={isStickyHeader}>
-            </th>
-          {/if}
-          {#if rowNumberColumn}
-            <th class="table-header table-row-number-col" class:table-header-sticky={isStickyHeader}
-              >{rowNumberLabel}</th
-            >
+    <div
+      class="table-scroll-shell"
+      class:scrollable-left={canScrollLeft}
+      class:scrollable-right={canScrollRight}
+    >
+      <div class="table-scroll" use:trackHorizontalScroll>
+        <table>
+          {#if caption}
+            <caption class="sr-only">{caption}</caption>
           {/if}
-          {#each effectiveHeaders as header, colIndex (colIndex)}
-            {@const headerColumn = columns?.[colIndex]}
-            <th
-              class="table-header"
-              class:table-header-sticky={isStickyHeader}
-              data-pw={headerColumn?.testId ?? null}
-              style:text-align={headerColumn?.align ?? null}
-              style:max-width={headerColumn?.maxWidth ?? null}
-            >
-              <span
-                class="table-header-content"
-                style:justify-content={headerColumn?.align === 'right'
-                  ? 'flex-end'
-                  : headerColumn?.align === 'center'
-                    ? 'center'
-                    : null}
-              >
-                {#if headerColumn?.tooltip}
-                  <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}
-                {/if}
-                {#if headerColumn?.filter}
-                  {@const filter = headerColumn.filter}
-                  <span class="table-header-filter">
-                    <Menu
-                      items={filter.options.map((option) => ({
-                        value: option.value,
-                        label: option.label
-                      }))}
-                      selectedValue={filter.selectedValue ?? null}
-                      role="listbox"
-                      testId={headerColumn.testId && `${headerColumn.testId}-filter`}
-                      onselect={(menuItem) =>
-                        filter.onFilterChange?.(
-                          menuItem.value === filter.selectedValue ? null : menuItem.value
-                        )}
-                    >
-                      {#snippet trigger()}
-                        <span
-                          class="table-header-filter-trigger"
-                          class:table-header-filter-active={typeof filter.selectedValue ===
-                            'string'}
-                        >
-                          <Button
-                            ariaLabel="Filter by {header}"
-                            testId={headerColumn.testId && `${headerColumn.testId}-filter-trigger`}
-                          >
-                            {#snippet icon()}
-                              <!-- eslint-disable svelte/no-at-html-tags -->
-                              <span class="table-header-filter-icon">{@html chevronDownSmSvg}</span>
-                            {/snippet}
-                          </Button>
-                        </span>
-                      {/snippet}
-                    </Menu>
-                  </span>
-                {/if}
-                {#if isColumnSortable(colIndex)}
-                  <div class="sort-button">
-                    <Button onclick={() => handleSort(colIndex)} ariaLabel="Sort by {header}">
-                      {#if sortColumn === colIndex && sortDirection === 'asc'}
-                        {#if typeof sortAscIcon === 'function'}
-                          {@render sortAscIcon()}
-                        {:else}
-                          <span class="sort-icon">
-                            <!-- eslint-disable svelte/no-at-html-tags -->
-                            {@html chevronUpSvg}
-                          </span>
-                        {/if}
-                      {:else if sortColumn === colIndex && sortDirection === 'desc'}
-                        {#if typeof sortDescIcon === 'function'}
-                          {@render sortDescIcon()}
-                        {:else}
-                          <span class="sort-icon">
-                            <!-- eslint-disable svelte/no-at-html-tags -->
-                            {@html chevronDownSvg}
-                          </span>
-                        {/if}
-                      {:else if typeof sortDefaultIcon === 'function'}
-                        {@render sortDefaultIcon()}
-                      {:else}
-                        <span class="sort-icon sort-icon-idle">
-                          <!-- eslint-disable svelte/no-at-html-tags -->
-                          {@html sortDefaultSvg}
-                        </span>
-                      {/if}
-                    </Button>
-                  </div>
-                {/if}
-              </span>
-            </th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#if filteredTableData.length === 0 && typeof empty === 'function'}
-          <tr>
-            <td
-              class="table-empty"
-              colspan={effectiveHeaders.length +
-                (isCheckboxMode ? 1 : 0) +
-                (rowNumberColumn ? 1 : 0)}
-            >
-              {@render empty()}
-            </td>
-          </tr>
-        {:else}
-          {#each paginatedTableData as row, pageRowIndex (rowIdByRow.get(row) ?? pageRowIndex)}
-            {@const rowIndex = pageRowIndex + rowIndexOffset}
-            {@const originalIndex = originalIndexByRow.get(row) ?? rowIndex}
-            {@const rowId = rowIdByRow.get(row) ?? String(rowIndex)}
-            {@const rowDisabled = isCheckboxMode && isRowDisabled(rowId)}
-            {@const rowSelected = isCheckboxMode && isRowSelected(rowId)}
-            <tr
-              class="table-row"
-              class:table-row-clickable={isRowClickable}
-              class:table-row-selected={rowSelected}
-              data-pw={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
-              onclick={isRowClickable ? () => handleRowClick(rowIndex, row, originalIndex) : null}
-              onkeydown={isRowClickable
-                ? (keyboardEvent) => handleRowKeydown(keyboardEvent, rowIndex, row, originalIndex)
-                : null}
-              tabindex={isRowClickable ? 0 : null}
-            >
-              {#if isCheckboxMode}
-                <td class="table-content table-checkbox-col">
+          <thead>
+            <tr>
+              {#if isCheckboxMode && !isSingleSelect}
+                <th
+                  class="table-header table-checkbox-col"
+                  class:table-header-sticky={isStickyHeader}
+                >
+                  <!-- Header tri-state checkbox -->
                   <span
                     class="table-checkbox-box"
-                    class:checked={rowSelected}
-                    class:disabled={rowDisabled}
+                    class:checked={headerCheckboxState === 'all'}
+                    class:indeterminate={headerCheckboxState === 'some'}
                     role="checkbox"
-                    id={`row-checkbox-${rowId}`}
-                    tabindex={rowDisabled ? -1 : 0}
-                    aria-checked={rowSelected}
-                    aria-disabled={rowDisabled}
-                    aria-label={`Select row ${rowId || 'non-selectable'}`}
+                    tabindex={0}
+                    aria-checked={headerCheckboxState === 'some'
+                      ? 'mixed'
+                      : headerCheckboxState === 'all'}
+                    aria-label="Select all rows"
                     {...checkboxSelection?.getRowAttributes
-                      ? checkboxSelection.getRowAttributes(rowId, rowIndex)
+                      ? checkboxSelection.getRowAttributes('__header__', -1)
                       : {}}
-                    onclick={(mouseEvent) => {
-                      mouseEvent.stopPropagation();
-                      toggleRowSelection(rowId);
-                    }}
-                    onkeydown={(keyboardEvent) => {
-                      keyboardEvent.stopPropagation();
-                      handleCheckboxKeydown(keyboardEvent, () => toggleRowSelection(rowId));
-                    }}
+                    aria-controls={selectableRowIds
+                      .map((rowId) => `row-checkbox-${rowId}`)
+                      .join(' ')}
+                    onclick={toggleAllSelection}
+                    onkeydown={(keyboardEvent) =>
+                      handleCheckboxKeydown(keyboardEvent, toggleAllSelection)}
                   >
-                    {#if rowSelected}
+                    {#if headerCheckboxState === 'all'}
                       <!-- eslint-disable svelte/no-at-html-tags -->
                       <span class="table-checkbox-icon">{@html checkmarkSvg}</span>
+                    {:else if headerCheckboxState === 'some'}
+                      <!-- eslint-disable svelte/no-at-html-tags -->
+                      <span class="table-checkbox-icon">{@html minusSvg}</span>
                     {/if}
                   </span>
-                </td>
+                </th>
+              {:else if isCheckboxMode && isSingleSelect}
+                <!-- In single-select mode the header cell is an empty spacer -->
+                <th
+                  class="table-header table-checkbox-col"
+                  class:table-header-sticky={isStickyHeader}
+                >
+                </th>
               {/if}
               {#if rowNumberColumn}
-                <td class="table-content table-row-number-col">{rowNumberFor(pageRowIndex)}</td>
+                <th
+                  class="table-header table-row-number-col"
+                  class:table-header-sticky={isStickyHeader}>{rowNumberLabel}</th
+                >
               {/if}
-              {#each row as cellValue, colIndex (colIndex)}
-                {@const keyedColumn = columns?.[colIndex]}
-                {@const keyedRow = keyedRowByProjected?.get(row)}
-                {@const isScalarCell =
-                  typeof cellValue === 'string' ||
-                  typeof cellValue === 'number' ||
-                  typeof cellValue === 'boolean'}
-                <td
-                  class="table-content"
-                  data-pw={typeof getCellTestId === 'function'
-                    ? getCellTestId(row, cellValue, rowIndex)
-                    : null}
-                  style:text-align={keyedColumn?.align ?? null}
-                  style:max-width={keyedColumn?.maxWidth ?? null}
-                  title={keyedColumn?.maxWidth && isScalarCell ? String(cellValue) : null}
+              {#each effectiveHeaders as header, colIndex (colIndex)}
+                {@const headerColumn = columns?.[colIndex]}
+                <th
+                  class="table-header"
+                  class:table-header-sticky={isStickyHeader}
+                  data-pw={headerColumn?.testId ?? null}
+                  style:text-align={headerColumn?.align ?? null}
+                  style:max-width={headerColumn?.maxWidth ?? null}
                 >
-                  <div
-                    class={isContentScrollable ? 'scrollable-content' : ''}
-                    class:table-cell-clamp={keyedColumn?.maxWidth && isScalarCell}
+                  <span
+                    class="table-header-content"
+                    style:justify-content={headerColumn?.align === 'right'
+                      ? 'flex-end'
+                      : headerColumn?.align === 'center'
+                        ? 'center'
+                        : null}
                   >
-                    {#if keyedColumn && typeof keyedColumn.cell === 'function' && keyedRow}
-                      {@render keyedColumn.cell(keyedRow, rowIndex, originalIndex)}
-                    {:else if keyedColumn?.type && keyedColumn.type !== 'text' && keyedColumn.type !== 'custom'}
-                      <BuiltinCell
-                        column={keyedColumn}
-                        value={cellValue}
-                        {rowIndex}
-                        {originalIndex}
-                      />
-                    {:else if typeof cell === 'function'}
-                      {@render cell(cellValue, rowIndex, colIndex)}
+                    {#if headerColumn?.tooltip}
+                      <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}
-                      {cellValue}
+                      {header}
                     {/if}
-                  </div>
-                </td>
+                    {#if headerColumn?.filter}
+                      {@const filter = headerColumn.filter}
+                      <span class="table-header-filter">
+                        <Menu
+                          items={filter.options.map((option) => ({
+                            value: option.value,
+                            label: option.label
+                          }))}
+                          selectedValue={filter.selectedValue ?? null}
+                          role="listbox"
+                          testId={headerColumn.testId && `${headerColumn.testId}-filter`}
+                          onselect={(menuItem) =>
+                            filter.onFilterChange?.(
+                              menuItem.value === filter.selectedValue ? null : menuItem.value
+                            )}
+                        >
+                          {#snippet trigger()}
+                            <span
+                              class="table-header-filter-trigger"
+                              class:table-header-filter-active={typeof filter.selectedValue ===
+                                'string'}
+                            >
+                              <Button
+                                ariaLabel="Filter by {header}"
+                                testId={headerColumn.testId &&
+                                  `${headerColumn.testId}-filter-trigger`}
+                              >
+                                {#snippet icon()}
+                                  <!-- eslint-disable svelte/no-at-html-tags -->
+                                  <span class="table-header-filter-icon"
+                                    >{@html chevronDownSmSvg}</span
+                                  >
+                                {/snippet}
+                              </Button>
+                            </span>
+                          {/snippet}
+                        </Menu>
+                      </span>
+                    {/if}
+                    {#if isColumnSortable(colIndex)}
+                      <div class="sort-button">
+                        <Button onclick={() => handleSort(colIndex)} ariaLabel="Sort by {header}">
+                          {#if sortColumn === colIndex && sortDirection === 'asc'}
+                            {#if typeof sortAscIcon === 'function'}
+                              {@render sortAscIcon()}
+                            {:else}
+                              <span class="sort-icon">
+                                <!-- eslint-disable svelte/no-at-html-tags -->
+                                {@html chevronUpSvg}
+                              </span>
+                            {/if}
+                          {:else if sortColumn === colIndex && sortDirection === 'desc'}
+                            {#if typeof sortDescIcon === 'function'}
+                              {@render sortDescIcon()}
+                            {:else}
+                              <span class="sort-icon">
+                                <!-- eslint-disable svelte/no-at-html-tags -->
+                                {@html chevronDownSvg}
+                              </span>
+                            {/if}
+                          {:else if typeof sortDefaultIcon === 'function'}
+                            {@render sortDefaultIcon()}
+                          {:else}
+                            <span class="sort-icon sort-icon-idle">
+                              <!-- eslint-disable svelte/no-at-html-tags -->
+                              {@html sortDefaultSvg}
+                            </span>
+                          {/if}
+                        </Button>
+                      </div>
+                    {/if}
+                  </span>
+                </th>
               {/each}
             </tr>
-          {/each}
-        {/if}
-      </tbody>
-    </table>
+          </thead>
+          <tbody>
+            {#if filteredTableData.length === 0 && typeof empty === 'function'}
+              <tr>
+                <td
+                  class="table-empty"
+                  colspan={effectiveHeaders.length +
+                    (isCheckboxMode ? 1 : 0) +
+                    (rowNumberColumn ? 1 : 0)}
+                >
+                  {@render empty()}
+                </td>
+              </tr>
+            {:else}
+              {#each paginatedTableData as row, pageRowIndex (rowIdByRow.get(row) ?? pageRowIndex)}
+                {@const rowIndex = pageRowIndex + rowIndexOffset}
+                {@const originalIndex = originalIndexByRow.get(row) ?? rowIndex}
+                {@const rowId = rowIdByRow.get(row) ?? String(rowIndex)}
+                {@const rowDisabled = isCheckboxMode && isRowDisabled(rowId)}
+                {@const rowSelected = isCheckboxMode && isRowSelected(rowId)}
+                <tr
+                  class="table-row"
+                  class:table-row-clickable={isRowClickable}
+                  class:table-row-selected={rowSelected}
+                  data-pw={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
+                  onclick={isRowClickable
+                    ? () => handleRowClick(rowIndex, row, originalIndex)
+                    : null}
+                  onkeydown={isRowClickable
+                    ? (keyboardEvent) =>
+                        handleRowKeydown(keyboardEvent, rowIndex, row, originalIndex)
+                    : null}
+                  tabindex={isRowClickable ? 0 : null}
+                >
+                  {#if isCheckboxMode}
+                    <td class="table-content table-checkbox-col">
+                      <span
+                        class="table-checkbox-box"
+                        class:checked={rowSelected}
+                        class:disabled={rowDisabled}
+                        role="checkbox"
+                        id={`row-checkbox-${rowId}`}
+                        tabindex={rowDisabled ? -1 : 0}
+                        aria-checked={rowSelected}
+                        aria-disabled={rowDisabled}
+                        aria-label={`Select row ${rowId || 'non-selectable'}`}
+                        {...checkboxSelection?.getRowAttributes
+                          ? checkboxSelection.getRowAttributes(rowId, rowIndex)
+                          : {}}
+                        onclick={(mouseEvent) => {
+                          mouseEvent.stopPropagation();
+                          toggleRowSelection(rowId);
+                        }}
+                        onkeydown={(keyboardEvent) => {
+                          keyboardEvent.stopPropagation();
+                          handleCheckboxKeydown(keyboardEvent, () => toggleRowSelection(rowId));
+                        }}
+                      >
+                        {#if rowSelected}
+                          <!-- eslint-disable svelte/no-at-html-tags -->
+                          <span class="table-checkbox-icon">{@html checkmarkSvg}</span>
+                        {/if}
+                      </span>
+                    </td>
+                  {/if}
+                  {#if rowNumberColumn}
+                    <td class="table-content table-row-number-col">{rowNumberFor(pageRowIndex)}</td>
+                  {/if}
+                  {#each row as cellValue, colIndex (colIndex)}
+                    {@const keyedColumn = columns?.[colIndex]}
+                    {@const keyedRow = keyedRowByProjected?.get(row)}
+                    {@const isScalarCell =
+                      typeof cellValue === 'string' ||
+                      typeof cellValue === 'number' ||
+                      typeof cellValue === 'boolean'}
+                    <td
+                      class="table-content"
+                      data-pw={typeof getCellTestId === 'function'
+                        ? getCellTestId(row, cellValue, rowIndex)
+                        : null}
+                      style:text-align={keyedColumn?.align ?? null}
+                      style:max-width={keyedColumn?.maxWidth ?? null}
+                      title={keyedColumn?.maxWidth && isScalarCell ? String(cellValue) : null}
+                    >
+                      <div
+                        class={isContentScrollable ? 'scrollable-content' : ''}
+                        class:table-cell-clamp={keyedColumn?.maxWidth && isScalarCell}
+                      >
+                        {#if keyedColumn && typeof keyedColumn.cell === 'function' && keyedRow}
+                          {@render keyedColumn.cell(keyedRow, rowIndex, originalIndex)}
+                        {:else if keyedColumn?.type && keyedColumn.type !== 'text' && keyedColumn.type !== 'custom'}
+                          <BuiltinCell
+                            column={keyedColumn}
+                            value={cellValue}
+                            {rowIndex}
+                            {originalIndex}
+                          />
+                        {:else if typeof cell === 'function'}
+                          {@render cell(cellValue, rowIndex, colIndex)}
+                        {:else}
+                          {cellValue}
+                        {/if}
+                      </div>
+                    </td>
+                  {/each}
+                </tr>
+              {/each}
+            {/if}
+          </tbody>
+        </table>
+      </div>
+    </div>
     {#if typeof paginatorSlot === 'function'}
       <div class="table-footer">
         {@render paginatorSlot()}
@@ -968,6 +1022,57 @@
     overflow-y: auto;
   }
 
+  .table-scroll-shell {
+    position: relative;
+    min-width: 0;
+  }
+
+  /* Edge scrims: fade the clipped side of the table into its background so
+     hidden columns read as "more content this way". Class-driven from live
+     scroll state — never shown when the table fits. pointer-events: none
+     keeps cells under the fade clickable; z-index 2 paints above sticky
+     headers (z-index 1). */
+  .table-scroll-shell::before,
+  .table-scroll-shell::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--table-scroll-scrim-width, 32px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 2;
+  }
+
+  .table-scroll-shell::before {
+    left: 0;
+    border-radius: var(--table-border-radius, var(--radius, 4px)) 0 0
+      var(--table-border-radius, var(--radius, 4px));
+    background: linear-gradient(to right, var(--table-scroll-scrim-color, #ffffff), transparent);
+  }
+
+  .table-scroll-shell::after {
+    right: 0;
+    border-radius: 0 var(--table-border-radius, var(--radius, 4px))
+      var(--table-border-radius, var(--radius, 4px)) 0;
+    background: linear-gradient(to left, var(--table-scroll-scrim-color, #ffffff), transparent);
+  }
+
+  .table-scroll-shell.scrollable-left::before {
+    opacity: 1;
+  }
+
+  .table-scroll-shell.scrollable-right::after {
+    opacity: 1;
+  }
+
+  .table-scroll {
+    overflow-x: auto;
+    min-width: 0;
+    scrollbar-width: thin;
+  }
+
   table {
     width: var(--table-width, 100%);
     border-collapse: var(--table-border-collapse, collapse);

package/dist/Table/properties.d.ts

@@ -192,6 +192,9 @@ export type TableColumn = {
     /**
      * Horizontal alignment for this column's header and body cells. When unset,
      * cells follow the table-wide `--table-text-align` (left by default).
+     * Built-in flex cells (compare, two-line-text, text-tag, icon-label,
+     * image-two-line-text, tag-array, avatar-stack) mirror it into their flex
+     * alignment so stacked/inline content follows the aligned edge too.
      */
     align?: 'left' | 'center' | 'right';
     /**

package/dist/Tooltip/tooltip-action.js

@@ -24,61 +24,23 @@ export const tooltip = (node, options) => {
     let delayTimer = null;
     const bubbleId = `sui-tooltip-${++tooltipIdCounter}`;
     const OFFSET = 8; // px — matches --tooltip-offset default
-    const computeCoords = (rect, pos) => {
-        const arrowSize = 5; // px — matches --tooltip-arrow-size default
-        const bg = 'var(--tooltip-arrow-color,var(--tooltip-background,#333333))';
-        const t = 'transparent';
-        if (pos === 'top') {
-            return {
-                top: rect.top - OFFSET,
-                left: rect.left + rect.width / 2,
-                transform: 'translate(-50%, -100%)',
-                arrowTop: '100%',
-                arrowLeft: '50%',
-                arrowRight: '',
-                arrowTransform: 'translateX(-50%)',
-                arrowBorderWidth: `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`,
-                arrowBorderColor: `${bg} ${t} ${t} ${t}`
-            };
-        }
-        if (pos === 'bottom') {
-            return {
-                top: rect.bottom + OFFSET,
-                left: rect.left + rect.width / 2,
-                transform: 'translate(-50%, 0)',
-                arrowTop: `-${arrowSize}px`,
-                arrowLeft: '50%',
-                arrowRight: '',
-                arrowTransform: 'translateX(-50%)',
-                arrowBorderWidth: `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`,
-                arrowBorderColor: `${t} ${t} ${bg} ${t}`
-            };
-        }
-        if (pos === 'left') {
-            return {
-                top: rect.top + rect.height / 2,
-                left: rect.left - OFFSET,
-                transform: 'translate(-100%, -50%)',
-                arrowTop: '50%',
-                arrowLeft: '100%',
-                arrowRight: '',
-                arrowTransform: 'translateY(-50%)',
-                arrowBorderWidth: `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`,
-                arrowBorderColor: `${t} ${t} ${t} ${bg}`
-            };
-        }
-        // right
-        return {
-            top: rect.top + rect.height / 2,
-            left: rect.right + OFFSET,
-            transform: 'translate(0, -50%)',
-            arrowTop: '50%',
-            arrowLeft: '',
-            arrowRight: `${arrowSize}px`,
-            arrowTransform: 'translateY(-50%)',
-            arrowBorderWidth: `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`,
-            arrowBorderColor: `${t} ${bg} ${t} ${t}`
-        };
+    const EDGE_MARGIN = 8; // px — minimum air between the bubble and the viewport edge
+    const ARROW_INSET = 9; // px — arrow centre never closer than this to a bubble corner
+    const oppositeOf = (side) => {
+        if (side === 'top') {
+            return 'bottom';
+        }
+        if (side === 'bottom') {
+            return 'top';
+        }
+        if (side === 'left') {
+            return 'right';
+        }
+        return 'left';
+    };
+    // min > max (bubble wider/taller than the viewport) degrades to the raw value.
+    const clampValue = (value, min, max) => {
+        return max < min ? value : Math.min(Math.max(value, min), max);
     };
     /**
      * Build the bubble and arrow elements and attach them to `document.body`.
@@ -127,25 +89,81 @@ export const tooltip = (node, options) => {
     /**
      * Compute and apply `top`/`left` fixed coordinates plus arrow styles based on the
      * current bounding rect of the host element and the active `position` option.
+     *
+     * The bubble is measured after mounting and then (1) FLIPPED to the opposite
+     * side when the preferred side has no room but the opposite side does, and
+     * (2) CLAMPED so it never crosses the viewport edge — a tooltip on a trigger
+     * near the screen edge used to spill off-screen or cover the nav beneath it.
+     * The arrow is positioned in bubble-local pixels anchored to the TRIGGER
+     * centre, so it keeps pointing at the trigger even when the bubble shifts.
      */
     const positionBubble = () => {
         if (bubbleEl === null || arrowEl === null) {
             return;
         }
         const rect = node.getBoundingClientRect();
-        const pos = currentOptions.position ?? 'top';
-        const coords = computeCoords(rect, pos);
-        bubbleEl.style.top = `${coords.top}px`;
-        bubbleEl.style.left = `${coords.left}px`;
-        bubbleEl.style.transform = coords.transform;
-        arrowEl.style.top = coords.arrowTop;
-        arrowEl.style.left = coords.arrowLeft;
-        if (coords.arrowRight !== '') {
-            arrowEl.style.right = coords.arrowRight;
-        }
-        arrowEl.style.transform = coords.arrowTransform;
-        arrowEl.style.borderWidth = coords.arrowBorderWidth;
-        arrowEl.style.borderColor = coords.arrowBorderColor;
+        const preferred = currentOptions.position ?? 'top';
+        const arrowSize = 5; // px — matches --tooltip-arrow-size default
+        const bg = 'var(--tooltip-arrow-color,var(--tooltip-background,#333333))';
+        const t = 'transparent';
+        // Stubbed DOMs (unit tests) report no dimensions; clamping then no-ops.
+        const bubbleWidth = bubbleEl.offsetWidth || 0;
+        const bubbleHeight = bubbleEl.offsetHeight || 0;
+        const viewportWidth = typeof window !== 'undefined' && window.innerWidth > 0
+            ? window.innerWidth
+            : Number.POSITIVE_INFINITY;
+        const viewportHeight = typeof window !== 'undefined' && window.innerHeight > 0
+            ? window.innerHeight
+            : Number.POSITIVE_INFINITY;
+        const fits = (side) => {
+            if (side === 'top') {
+                return rect.top - OFFSET - bubbleHeight >= EDGE_MARGIN;
+            }
+            if (side === 'bottom') {
+                return rect.bottom + OFFSET + bubbleHeight <= viewportHeight - EDGE_MARGIN;
+            }
+            if (side === 'left') {
+                return rect.left - OFFSET - bubbleWidth >= EDGE_MARGIN;
+            }
+            return rect.right + OFFSET + bubbleWidth <= viewportWidth - EDGE_MARGIN;
+        };
+        const side = !fits(preferred) && fits(oppositeOf(preferred)) ? oppositeOf(preferred) : preferred;
+        let top;
+        let left;
+        if (side === 'top' || side === 'bottom') {
+            top = side === 'top' ? rect.top - OFFSET - bubbleHeight : rect.bottom + OFFSET;
+            left = clampValue(rect.left + rect.width / 2 - bubbleWidth / 2, EDGE_MARGIN, viewportWidth - EDGE_MARGIN - bubbleWidth);
+        }
+        else {
+            left = side === 'left' ? rect.left - OFFSET - bubbleWidth : rect.right + OFFSET;
+            top = clampValue(rect.top + rect.height / 2 - bubbleHeight / 2, EDGE_MARGIN, viewportHeight - EDGE_MARGIN - bubbleHeight);
+        }
+        bubbleEl.style.top = `${top}px`;
+        bubbleEl.style.left = `${left}px`;
+        bubbleEl.style.transform = 'none';
+        arrowEl.style.right = '';
+        if (side === 'top' || side === 'bottom') {
+            const arrowLeft = clampValue(rect.left + rect.width / 2 - left, ARROW_INSET, Math.max(ARROW_INSET, bubbleWidth - ARROW_INSET));
+            arrowEl.style.left = `${arrowLeft}px`;
+            arrowEl.style.top = side === 'top' ? '100%' : `-${arrowSize}px`;
+            arrowEl.style.transform = 'translateX(-50%)';
+            arrowEl.style.borderWidth =
+                side === 'top'
+                    ? `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`
+                    : `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`;
+            arrowEl.style.borderColor = side === 'top' ? `${bg} ${t} ${t} ${t}` : `${t} ${t} ${bg} ${t}`;
+        }
+        else {
+            const arrowTop = clampValue(rect.top + rect.height / 2 - top, ARROW_INSET, Math.max(ARROW_INSET, bubbleHeight - ARROW_INSET));
+            arrowEl.style.top = `${arrowTop}px`;
+            arrowEl.style.left = side === 'left' ? '100%' : `-${arrowSize}px`;
+            arrowEl.style.transform = 'translateY(-50%)';
+            arrowEl.style.borderWidth =
+                side === 'left'
+                    ? `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`
+                    : `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`;
+            arrowEl.style.borderColor = side === 'left' ? `${t} ${t} ${t} ${bg}` : `${t} ${bg} ${t} ${t}`;
+        }
     };
     const show = () => {
         // Guard against overlapping events (e.g. mouseenter + focusin firing simultaneously,

package/package.json

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