@juspay/svelte-ui-components 2.134.1 → 2.136.0

package/dist/Table/BuiltinCell.svelte

@@ -58,6 +58,32 @@
         : ''
   );
 
+  const defaultTestIdSuffixes = {
+    icon: 'icon',
+    thumbnail: 'thumb',
+    thumbnailPlaceholder: 'thumb-placeholder',
+    tag: 'tag',
+    trendUp: 'trend-up',
+    trendDown: 'trend-down',
+    menu: 'menu',
+    menuTrigger: 'menu-trigger',
+    popup: 'popup',
+    popupTrigger: 'popup-trigger',
+    link: 'link',
+    copy: 'copy',
+    linkCopied: 'link-copied'
+  } as const;
+
+  const generatedTestId = (suffixName: keyof typeof defaultTestIdSuffixes, index?: number) => {
+    if (!column.testId) {
+      return;
+    }
+    const suffix = column.testIdSuffixes?.[suffixName] ?? defaultTestIdSuffixes[suffixName];
+    return typeof index === 'number'
+      ? `${column.testId}-${suffix}-${index}`
+      : `${column.testId}-${suffix}`;
+  };
+
   let copied = $state(false);
   let copyResetTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -143,8 +169,8 @@
     {#each icons as iconSrc, iconIndex (`${iconIndex}-${iconSrc}`)}
       <span
         class="builtin-icon-label-icon"
-        data-pw={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
-        testID={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
+        data-pw={generatedTestId('icon', iconIndex)}
+        testID={generatedTestId('icon', iconIndex)}
       >
         <Img inlineSvg src={String(iconSrc)} alt="" fallback="" />
       </span>
@@ -157,8 +183,8 @@
     {#if typeof data.imageUrl === 'string' && data.imageUrl}
       <span
         class="builtin-thumb"
-        data-pw={column.testId ? `${column.testId}-thumb` : null}
-        testID={column.testId ? `${column.testId}-thumb` : null}
+        data-pw={generatedTestId('thumbnail')}
+        testID={generatedTestId('thumbnail')}
       >
         <Img
           src={data.imageUrl}
@@ -169,8 +195,8 @@
     {:else}
       <span
         class="builtin-thumb builtin-thumb-placeholder"
-        data-pw={column.testId ? `${column.testId}-thumb-placeholder` : null}
-        testID={column.testId ? `${column.testId}-thumb-placeholder` : null}
+        data-pw={generatedTestId('thumbnailPlaceholder')}
+        testID={generatedTestId('thumbnailPlaceholder')}
         >{typeof data.text1 === 'string' && data.text1
           ? data.text1.charAt(0).toUpperCase()
           : ''}</span
@@ -190,7 +216,7 @@
         <Pill
           text={tag.text}
           classes={tag.classes ?? ''}
-          testId={tag.testId ?? (column.testId && `${column.testId}-tag-${tagIndex}`)}
+          testId={tag.testId ?? generatedTestId('tag', tagIndex)}
         />
       {/each}
     </div>
@@ -227,8 +253,8 @@
           {#if compare.trendPercent > 0}
             <span
               class="builtin-trend builtin-trend-up"
-              data-pw={column.testId ? `${column.testId}-trend-up` : null}
-              testID={column.testId ? `${column.testId}-trend-up` : null}
+              data-pw={generatedTestId('trendUp')}
+              testID={generatedTestId('trendUp')}
             >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendUpSvg}</span>
@@ -237,8 +263,8 @@
           {:else if compare.trendPercent < 0}
             <span
               class="builtin-trend builtin-trend-down"
-              data-pw={column.testId ? `${column.testId}-trend-down` : null}
-              testID={column.testId ? `${column.testId}-trend-down` : null}
+              data-pw={generatedTestId('trendDown')}
+              testID={generatedTestId('trendDown')}
             >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendDownSvg}</span>
@@ -419,16 +445,13 @@
             danger: item.danger,
             separator: item.separator
           }))}
-          testId={column.testId && `${column.testId}-menu-${rowIndex}`}
+          testId={generatedTestId('menu', rowIndex)}
           {usePortal}
           onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
         >
           {#snippet trigger()}
             <span class="builtin-icon-button">
-              <Button
-                ariaLabel="More actions"
-                testId={column.testId && `${column.testId}-menu-trigger-${rowIndex}`}
-              >
+              <Button ariaLabel="More actions" testId={generatedTestId('menuTrigger', rowIndex)}>
                 {#snippet icon()}
                   <!-- eslint-disable svelte/no-at-html-tags -->
                   <span class="builtin-menu-dots">{@html dotsSvg}</span>
@@ -458,7 +481,7 @@
           danger: item.danger,
           separator: item.separator
         }))}
-        testId={column.testId && `${column.testId}-popup-${rowIndex}`}
+        testId={generatedTestId('popup', rowIndex)}
         {usePortal}
         onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
       >
@@ -466,7 +489,7 @@
           <span class="builtin-icon-button">
             <Button
               ariaLabel={popupData.ariaLabel ?? 'More actions'}
-              testId={column.testId && `${column.testId}-popup-trigger-${rowIndex}`}
+              testId={generatedTestId('popupTrigger', rowIndex)}
             >
               {#snippet icon()}
                 <!-- eslint-disable svelte/no-at-html-tags -->
@@ -490,8 +513,8 @@
         target="_blank"
         rel="noopener noreferrer"
         class="builtin-link-anchor"
-        data-pw={column.testId ? `${column.testId}-link-${rowIndex}` : null}
-        testID={column.testId ? `${column.testId}-link-${rowIndex}` : null}
+        data-pw={generatedTestId('link', rowIndex)}
+        testID={generatedTestId('link', rowIndex)}
       >
         {link.label ?? link.url}
       </a>
@@ -499,7 +522,7 @@
         <span class="builtin-link-copy">
           <Button
             ariaLabel={copied ? 'Link copied' : 'Copy link'}
-            testId={column.testId && `${column.testId}-copy-${rowIndex}`}
+            testId={generatedTestId('copy', rowIndex)}
             onclick={() => handleCopy(link.url)}
           >
             {#snippet icon()}
@@ -511,8 +534,8 @@
         {#if copied}
           <span
             class="builtin-link-copied"
-            data-pw={column.testId ? `${column.testId}-link-copied` : null}
-            testID={column.testId ? `${column.testId}-link-copied` : null}>Copied</span
+            data-pw={generatedTestId('linkCopied')}
+            testID={generatedTestId('linkCopied')}>Copied</span
           >
         {/if}
       {/if}

package/dist/Table/Table.svelte

@@ -375,6 +375,14 @@
     return total > 0 ? `${from}-${to} of ${total}` : '';
   });
   let pageSizeOptions = $derived(pagination?.pageSizeOptions ?? [10, 25, 50, 100]);
+  // `hideControls` remains a shorthand for hiding both at once — existing
+  // consumers of it are unaffected. `hidePageSizeSelector`/`hideSteppers` let
+  // a consumer suppress either independently, e.g. a working external
+  // paginator that only wants Table's range text plus its own steppers.
+  let hidePageSizeSelector = $derived(
+    (pagination?.hideControls || pagination?.hidePageSizeSelector) ?? false
+  );
+  let hideSteppers = $derived((pagination?.hideControls || pagination?.hideSteppers) ?? false);
 
   const handlePageChange = (page: number): void => {
     pageOverride = page;
@@ -722,6 +730,7 @@
                   data-pw={headerColumn?.testId ?? null}
                   testID={headerColumn?.testId ?? null}
                   style:text-align={headerColumn?.align ?? null}
+                  style:width={headerColumn?.width ?? null}
                   style:max-width={headerColumn?.maxWidth ?? null}
                 >
                   <span
@@ -965,6 +974,7 @@
                         ? getCellTestId(row, cellValue, rowIndex)
                         : null}
                       style:text-align={keyedColumn?.align ?? null}
+                      style:width={keyedColumn?.width ?? null}
                       style:max-width={keyedColumn?.maxWidth ?? null}
                       title={keyedColumn?.maxWidth && isScalarCell ? String(cellValue) : null}
                     >
@@ -1007,10 +1017,15 @@
       <div class="table-footer">
         {@render paginatorSlot()}
       </div>
-    {:else if pagination && (paginationTotalPages > 1 || pagination.hasMore)}
+    {:else if pagination && (paginationTotalPages > 1 || pagination.hasMore || pagination.showFooterOnSinglePage || (hidePageSizeSelector && hideSteppers))}
       <!-- DataGrid parity: pagination chrome only renders when the data spans
            more than one page (or the server reports more chunks); a
-           single-page table shows no footer. -->
+           single-page table shows no footer. `showFooterOnSinglePage` opts
+           a consumer out of that default, e.g. to keep the page-size
+           selector reachable even for a one-page result. Suppressing BOTH
+           controls (via `hideControls`, or `hidePageSizeSelector` +
+           `hideSteppers` together) implies the same — a count-only footer
+           has nothing to hide behind "already on the only page". -->
       <div
         class="table-footer table-paginator"
         data-pw={pagination.testId ?? null}
@@ -1018,47 +1033,55 @@
       >
         <span
           class="table-paginator-range"
-          data-pw={typeof testId === 'string'
-            ? `${testId}-paginator-range`
-            : pagination?.testId
-              ? `${pagination.testId}-range`
-              : null}
-          testID={typeof testId === 'string'
-            ? `${testId}-paginator-range`
-            : pagination?.testId
-              ? `${pagination.testId}-range`
-              : null}>{paginationRangeText}</span
+          data-pw={pagination.rangeTestId ??
+            (typeof testId === 'string'
+              ? `${testId}-paginator-range`
+              : pagination?.testId
+                ? `${pagination.testId}-range`
+                : null)}
+          testID={pagination.rangeTestId ??
+            (typeof testId === 'string'
+              ? `${testId}-paginator-range`
+              : pagination?.testId
+                ? `${pagination.testId}-range`
+                : null)}>{paginationRangeText}</span
         >
-        <span class="table-paginator-controls">
-          {#if pageSizeOptions.length > 0}
-            <span class="table-paginator-size">
-              <Select
-                items={pageSizeOptions.map((sizeOption) => ({
-                  id: String(sizeOption),
-                  label: String(sizeOption)
-                }))}
-                value={[String(effectivePageSize)]}
+        {#if !hidePageSizeSelector || !hideSteppers}
+          <span class="table-paginator-controls">
+            {#if !hidePageSizeSelector && pageSizeOptions.length > 0}
+              <span class="table-paginator-size">
+                <Select
+                  items={pageSizeOptions.map((sizeOption) => ({
+                    id: String(sizeOption),
+                    label: String(sizeOption)
+                  }))}
+                  value={[String(effectivePageSize)]}
+                  disabled={pagination.isLoading ?? false}
+                  usePortal
+                  testId={pagination.testId && `${pagination.testId}-page-size`}
+                  onchange={(selectedSizes) => {
+                    if (selectedSizes.length > 0) {
+                      handlePageSizeChange(Number(selectedSizes[0]));
+                    }
+                  }}
+                />
+              </span>
+            {/if}
+            {#if !hideSteppers}
+              <Pagination
+                totalPages={paginationTotalPages}
+                currentPage={effectivePage}
+                hasMore={pagination.hasMore ?? false}
                 disabled={pagination.isLoading ?? false}
-                usePortal
-                testId={pagination.testId && `${pagination.testId}-page-size`}
-                onchange={(selectedSizes) => {
-                  if (selectedSizes.length > 0) {
-                    handlePageSizeChange(Number(selectedSizes[0]));
-                  }
-                }}
+                testId={pagination.testId && `${pagination.testId}-pages`}
+                prevButtonTestId={pagination.prevButtonTestId}
+                nextButtonTestId={pagination.nextButtonTestId}
+                onchange={handlePageChange}
+                onLoadMore={pagination.onLoadMore}
               />
-            </span>
-          {/if}
-          <Pagination
-            totalPages={paginationTotalPages}
-            currentPage={effectivePage}
-            hasMore={pagination.hasMore ?? false}
-            disabled={pagination.isLoading ?? false}
-            testId={pagination.testId && `${pagination.testId}-pages`}
-            onchange={handlePageChange}
-            onLoadMore={pagination.onLoadMore}
-          />
-        </span>
+            {/if}
+          </span>
+        {/if}
       </div>
     {/if}
   </div>

package/dist/Table/cellData.js

@@ -68,6 +68,9 @@ export const asTagArrayItems = (value) => {
         if (typeof record.classes === 'string') {
             item.classes = record.classes;
         }
+        if (typeof record.testId === 'string') {
+            item.testId = record.testId;
+        }
         items.push(item);
     }
     return items;

package/dist/Table/properties.d.ts

@@ -201,6 +201,27 @@ export type TablePopupMenuCellData = {
  * the options, selection state, and filtering itself belong to the consumer.
  * Selecting the already-selected option clears the filter (emits `null`).
  */
+/**
+ * Customizes the generated `data-pw` suffixes of built-in cells for one
+ * column. Values replace only the named suffix; row and item indices remain
+ * appended where the default includes them. Cell-data `testId` values still
+ * take precedence for renderers that accept one.
+ */
+export type TableBuiltinCellTestIdSuffixes = {
+    icon?: string;
+    thumbnail?: string;
+    thumbnailPlaceholder?: string;
+    tag?: string;
+    trendUp?: string;
+    trendDown?: string;
+    menu?: string;
+    menuTrigger?: string;
+    popup?: string;
+    popupTrigger?: string;
+    link?: string;
+    copy?: string;
+    linkCopied?: string;
+};
 export type TableColumnFilterConfig = {
     options: Array<{
         label: string;
@@ -246,11 +267,18 @@ export type TableColumn = {
      * cells follow the table-wide `--table-text-align` (left by default).
      */
     align?: 'left' | 'center' | 'right';
+    /** Fixed/preferred column width (any CSS length), applied inline to its header and cells. */
+    width?: string;
     /**
      * Caps the column width (any CSS length). Overflowing scalar cell text
      * ellipsizes with the full value available on the native title tooltip.
      */
     maxWidth?: string;
+    /**
+     * Per-built-in generated `data-pw` suffix overrides for this column. Omitted
+     * entries preserve the existing suffixes exactly; row/item indices remain.
+     */
+    testIdSuffixes?: TableBuiltinCellTestIdSuffixes;
     /**
      * Paints this column's header and body cells with the highlight wash —
      * `--table-col-highlight-background` (body) and
@@ -342,12 +370,54 @@ export type TablePaginationConfig = {
     hasMore?: boolean;
     /** Disables the paginator and page-size selector during a fetch. */
     isLoading?: boolean;
+    /**
+     * Keeps the paginator footer (range text, page-size selector, steppers)
+     * visible even when the data fits on a single page. Default `false`
+     * matches DataGrid parity — a single page renders no footer at all.
+     */
+    showFooterOnSinglePage?: boolean;
+    /**
+     * Renders only the range summary text ("{from}-{to} of {total}") and
+     * suppresses the page-size selector and page steppers — for a bare
+     * "Showing X-Y of Z" affordance with no navigation controls. Implies
+     * `showFooterOnSinglePage`: a count-only footer has nothing to hide behind
+     * "already on the only page". Shorthand for `hidePageSizeSelector: true`
+     * plus `hideSteppers: true`; reach for those two directly when you only
+     * want to suppress one of the pair. Default `false`.
+     */
+    hideControls?: boolean;
+    /**
+     * Suppresses just the page-size Select, independently of the steppers —
+     * e.g. a fixed page size with no reason to expose the selector, while
+     * still keeping working page navigation. Default `false`.
+     */
+    hidePageSizeSelector?: boolean;
+    /**
+     * Suppresses just the Pagination steppers, independently of the page-size
+     * Select — for a call site with its own working paginator elsewhere that
+     * only wants Table's range text (and, optionally, its page-size selector).
+     * Default `false`.
+     */
+    hideSteppers?: boolean;
     /** Range text override; default "{from}-{to} of {total}". */
     rangeLabel?: (from: number, to: number, total: number) => string;
+    /**
+     * Explicit `data-pw`/`testID` for the range summary span. Wins over the
+     * derived id — the default derives from the table's own `testId`
+     * (`${testId}-paginator-range`), falling back to `${pagination.testId}-range`
+     * only when the table has none, so a call site whose table `testId` is
+     * already load-bearing (built-in cell ids derive from it) has no way to
+     * give the range span an independent locator without this.
+     */
+    rangeTestId?: string;
     onPageChange?: (page: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     onLoadMore?: () => void;
     testId?: string;
+    /** Forwarded to Pagination's previous-page button without modification. */
+    prevButtonTestId?: string;
+    /** Forwarded to Pagination's next-page (or load-more) button without modification. */
+    nextButtonTestId?: string;
 };
 /**
  * Configuration for the built-in search bar (C2-3).

package/dist/ThinkingIndicator/ThinkingIndicator.svelte

@@ -40,16 +40,20 @@
 
   // A detail string or a trace is what makes the indicator expandable. Without either
   // there is nothing to reveal, so it renders as a plain live status line instead of a
-  // disclosure control. `bare` overrides that entirely.
+  // disclosure control. `bare` and `chip` both override that entirely — neither has
+  // room (or a documented reason) to expand.
   const isExpandable = $derived(
-    variant !== 'bare' && (hasTraceMode || (typeof detail === 'string' && detail.length > 0))
+    variant === 'default' && (hasTraceMode || (typeof detail === 'string' && detail.length > 0))
   );
 
   // Backward-compatible shimmer rule: without an explicit `busy`, the expandable
   // summary holds still (settled) and every other shape shimmers (live) — exactly
-  // today's released behaviour. Passing `busy` takes direct control of the shimmer
-  // in every shape, including `bare`.
-  const labelIsBusy = $derived(busy ?? !isExpandable);
+  // today's released behaviour. `chip` is the one exception, defaulting to static:
+  // it exists to be a drop-in for ChatToolStatus, which never shimmered, so a
+  // caller porting that usage 1:1 shouldn't have to also learn `busy={false}` just
+  // to avoid an unexpected shimmer. Passing `busy` takes direct control of the
+  // shimmer in every shape, including `bare` and `chip`.
+  const labelIsBusy = $derived(busy ?? (variant === 'chip' ? false : !isExpandable));
 
   // Set once a person clicks the disclosure open/closed — from then on the automatic
   // busy-driven machine below leaves `expanded` alone for the rest of this mount.
@@ -406,6 +410,21 @@
         >{label}</span
       >{:else}{label}{/if}</span
   >
+{:else if variant === 'chip'}
+  <div
+    class="thinking-indicator-chip {classes ?? ''}"
+    aria-live="polite"
+    aria-atomic="true"
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+  >
+    <span class="chip-icon">
+      {#if avatar}{@render avatar()}{:else}<Loader />{/if}
+    </span>
+    <span class="chip-label" class:static-label={!labelIsBusy} data-pw={labelTestId ?? null}
+      >{label}</span
+    >
+  </div>
 {:else}
   <div
     class="thinking-indicator status-host {classes ?? ''}"
@@ -558,6 +577,69 @@
     -webkit-text-fill-color: var(--thinking-indicator-label-color, #858585);
   }
 
+  /* ---- chip variant: a self-contained floating pill (no ancestor supplies
+     background/layout, unlike bare) — deliberately not `width: 100%`/box-sizing
+     from `.thinking-indicator`, since a pill hugs its content. */
+  .thinking-indicator-chip {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--thinking-indicator-chip-gap, 8px);
+    width: fit-content;
+    padding: var(--thinking-indicator-chip-padding, 8px 14px);
+    background: var(--thinking-indicator-chip-background, #ffffff);
+    border: var(--thinking-indicator-chip-border, 1px solid #e4e4e7);
+    border-radius: var(--thinking-indicator-chip-border-radius, 999px);
+    box-shadow: var(--thinking-indicator-chip-box-shadow, 0 6px 20px rgba(0, 0, 0, 0.08));
+    max-width: var(--thinking-indicator-chip-max-width, 100%);
+  }
+
+  .chip-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--thinking-indicator-chip-icon-color, currentColor);
+    --loader-foreground: var(--thinking-indicator-chip-spinner-color, currentColor);
+    --loader-foreground-end: var(--thinking-indicator-chip-spinner-color-end, transparent);
+    --loader-width: var(--thinking-indicator-chip-spinner-size, 14px);
+    --loader-height: var(--thinking-indicator-chip-spinner-size, 14px);
+    --loader-before-width: 7px;
+    --loader-before-height: 7px;
+    --loader-after-width: 11px;
+    --loader-after-height: 11px;
+    --loader-background: var(--thinking-indicator-chip-background, #ffffff);
+  }
+
+  .chip-label {
+    flex: 0 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--thinking-indicator-chip-font-size, 0.85rem);
+    font-weight: var(--thinking-indicator-chip-font-weight, 500);
+    color: var(--thinking-indicator-chip-color, #52525b);
+    background: var(
+      --thinking-indicator-chip-shimmer-gradient,
+      linear-gradient(90deg, #52525b 0%, #a0a0a0 50%, #52525b 100%)
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: thinking-indicator-shimmer var(--thinking-indicator-chip-shimmer-duration, 2s) linear
+      infinite;
+  }
+
+  /* Chip defaults to a static label (unlike the default/bare variants) since it
+     mirrors ChatToolStatus, which never shimmered — pass `busy` explicitly to
+     opt in. Higher specificity than the generic `.static-label` rule above, so
+     it correctly overrides with the chip's own color token, not the default
+     variant's. */
+  .chip-label.static-label {
+    animation: none;
+    -webkit-text-fill-color: var(--thinking-indicator-chip-color, #52525b);
+  }
+
   .arrow {
     display: inline-flex;
     align-items: center;
@@ -784,6 +866,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     .status-label,
+    .chip-label,
     .trace-row,
     .trace-more {
       animation-duration: 0.001s;
@@ -799,5 +882,10 @@
       animation: none;
       -webkit-text-fill-color: var(--thinking-indicator-label-color, #858585);
     }
+
+    .chip-label {
+      animation: none;
+      -webkit-text-fill-color: var(--thinking-indicator-chip-color, #52525b);
+    }
   }
 </style>

package/dist/ThinkingIndicator/properties.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-export type ThinkingIndicatorVariant = 'default' | 'bare';
+export type ThinkingIndicatorVariant = 'default' | 'bare' | 'chip';
 export type ThinkingIndicatorKind = 'steps' | 'reasoning' | 'search' | 'coding';
 export type ThinkingIndicatorTraceRow = {
     /** The step, sentence, source title, or file action. */
@@ -29,14 +29,18 @@ export type OptionalThinkingIndicatorProperties = {
     expanded?: boolean;
     /**
      * `bare` renders only the shimmering label — for chat bubbles where the surrounding
-     * UI already supplies the avatar and layout. It never becomes expandable.
+     * UI already supplies the avatar and layout. `chip` renders a self-contained pill
+     * (bordered, shadowed, its own background) for a live status floating above other
+     * content, e.g. a tool-call indicator above a composer — pass `busy={false}` for a
+     * static (non-shimmering) label, matching a plain status badge. Neither `bare` nor
+     * `chip` ever becomes expandable.
      */
     variant?: ThinkingIndicatorVariant;
     /**
      * Renders an elapsed `Ns` counter while the label is live. Starts at 0 when a busy
      * phase begins, ticks every second, and freezes at its final value once the label
      * settles (driven by `busy` when set, otherwise by the legacy status-line/detail
-     * shape). No effect on the `bare` variant.
+     * shape). No effect on the `bare` or `chip` variants.
      */
     showElapsed?: boolean;
     onToggle?: () => void;