@juspay/svelte-ui-components 4.52.1 → 4.53.1

package/dist/StatCard/properties.d.ts

@@ -183,7 +183,7 @@ export type OptionalStatCardProperties = {
     classes?: string;
 };
 export type StatCardEventProperties = {
-    /** Makes the card interactive: adds `role="button"`, `tabindex=0`, and wires click/Enter/Space. */
+    /** Makes the card interactive with a native action button; child controls remain independent. */
     onclick?: (event: MouseEvent) => void;
     /** Fired when the header checkbox changes. */
     oncheckboxchange?: (checked: boolean) => void;

package/dist/Stepper/Step.svelte

@@ -64,8 +64,8 @@
   onkeydown={handleKeydown}
   role={suppressRoleAndTabindex ? null : 'button'}
   tabindex={suppressRoleAndTabindex ? null : 0}
-  aria-label={ariaLabel ?? null}
-  aria-labelledby={ariaLabel ? null : labelId}
+  aria-label={suppressRoleAndTabindex ? null : (ariaLabel ?? null)}
+  aria-labelledby={suppressRoleAndTabindex || ariaLabel ? null : labelId}
   aria-current={status === 'active' ? 'step' : null}
 >
   {#if typeof icon === 'string' && icon.length > 0}

package/dist/Table/Table.svelte

@@ -225,11 +225,24 @@
   // 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).
+  // Caption identity must reach the actual keyboard scroll owner, not only its
+  // descendant table. Groups keep nested axes out of the landmark namespace and
+  // add no tab stop or keyboard handler; native overflow/fit focus stays intact.
+  let scrollCaption = $derived(
+    typeof caption === 'string' && caption.trim().length > 0 ? caption : null
+  );
+  let hasVerticalScrollOwner = $state(false);
   let canScrollLeft = $state(false);
   let canScrollRight = $state(false);
 
   const trackHorizontalScroll = (scrollNode: HTMLElement) => {
+    const containerNode = scrollNode.closest<HTMLElement>('.table-container');
     const updateScrollHints = () => {
+      const verticalOverflow = containerNode ? getComputedStyle(containerNode).overflowY : '';
+      hasVerticalScrollOwner =
+        containerNode !== null &&
+        (verticalOverflow === 'auto' || verticalOverflow === 'scroll') &&
+        containerNode.scrollHeight > containerNode.clientHeight;
       canScrollLeft = scrollNode.scrollLeft > 2;
       canScrollRight = scrollNode.scrollLeft + scrollNode.clientWidth < scrollNode.scrollWidth - 2;
     };
@@ -239,6 +252,9 @@
     // (async rows/columns arriving) change scrollWidth, so observe both.
     const hintResizeObserver = new ResizeObserver(updateScrollHints);
     hintResizeObserver.observe(scrollNode);
+    if (containerNode !== null) {
+      hintResizeObserver.observe(containerNode);
+    }
     const tableElement = scrollNode.querySelector('table');
     if (tableElement) {
       hintResizeObserver.observe(tableElement);
@@ -836,6 +852,8 @@
   <div
     class="table-container {isTableScrollable ? 'scrollable-table' : ''} {classes ?? ''}"
     class:table-mobile-cards={mobileCardLayout}
+    role={scrollCaption !== null && hasVerticalScrollOwner ? 'group' : null}
+    aria-label={hasVerticalScrollOwner ? scrollCaption : null}
     data-pw={testId}
     testID={testId}
   >
@@ -844,7 +862,12 @@
       class:scrollable-left={canScrollLeft}
       class:scrollable-right={canScrollRight}
     >
-      <div class="table-scroll" use:trackHorizontalScroll>
+      <div
+        class="table-scroll"
+        role={scrollCaption !== null ? 'group' : null}
+        aria-label={scrollCaption}
+        use:trackHorizontalScroll
+      >
         <table role={mobileRole('table')}>
           {#if caption}
             <caption class="sr-only">{caption}</caption>
@@ -878,8 +901,9 @@
                   />
                 </th>
               {:else if isCheckboxMode && isSingleSelect}
-                <!-- In single-select mode the header cell is an empty spacer -->
+                <!-- Selection is a real column even without a select-all action. -->
                 <th
+                  aria-label={labels?.selectionColumn ?? 'Row selection'}
                   class="table-header table-checkbox-col"
                   class:table-header-sticky={isStickyHeader}
                   role={mobileRole('columnheader')}
@@ -1084,6 +1108,7 @@
               {#each paginatedTableData as row, pageRowIndex (rowIdByRow.get(row) ?? pageRowIndex)}
                 {@const rowIndex = pageRowIndex + rowIndexOffset}
                 {@const originalIndex = originalIndexByRow.get(row) ?? rowIndex}
+                {@const rowContext = rowLabels.get(row) ?? `row ${originalIndex + 1}`}
                 {@const rowId = rowIdByRow.get(row) ?? String(rowIndex)}
                 {@const rowDisabled = isCheckboxMode && isRowDisabled(rowId)}
                 {@const rowSelected = isCheckboxMode && isRowSelected(rowId)}
@@ -1094,6 +1119,9 @@
                   class:table-summary-row={summaryRowIndex !== null &&
                     originalIndex === summaryRowIndex}
                   role={mobileRole('row')}
+                  aria-label={isRowClickable
+                    ? (labels?.rowAction?.(rowContext) ?? rowContext)
+                    : null}
                   data-pw={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
                   testID={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
                   onclick={isRowClickable
@@ -1280,6 +1308,8 @@
             {/if}
             {#if !hideSteppers}
               <Pagination
+                ariaLabel={labels?.pageNavigation ??
+                  (tableTitle ? `${tableTitle} pagination` : 'Pagination')}
                 totalPages={paginationTotalPages}
                 currentPage={effectivePage}
                 hasMore={pagination.hasMore ?? false}

package/dist/Table/properties.d.ts

@@ -524,12 +524,11 @@ export type TableProperties = OptionalTableProperties & TableEventProperties;
  * Accessible names Table generates for its own controls, for callers who do
  * not ship an English UI.
  *
- * Every member is optional and falls back to an English default. All but
- * `rowsPerPage` and `cellEditor` keep the string Table has always used; those
- * two add a name to a control that previously had none.
+ * Every member is optional. Control labels use English defaults; rowAction
+ * uses the readable source-row caption.
  *
- * The two that depend on a column, and the one that depends on a row, are
- * functions rather than templates with a placeholder: a translator needs to
+ * Members that depend on a column or row are functions rather than templates
+ * with a placeholder: a translator needs to
  * put the header where their grammar wants it, not where an English sentence
  * happens to leave a slot.
  *
@@ -546,6 +545,8 @@ export type TableLabels = {
      *  naming an empty row. Default: `Select row ${rowId || 'non-selectable'}`. */
     selectRow?: (rowId: string) => string;
     /** Header checkbox that selects every row on the page. Default: `Select all rows`. */
+    /** Accessible header name for the row-selection column, including single-selection mode. */
+    selectionColumn?: string;
     selectAllRows?: string;
     /** Button that empties the search box. Default: `Clear search`. */
     clearSearch?: string;
@@ -553,8 +554,12 @@ export type TableLabels = {
     closeSearch?: string;
     /** Built-in editor name. Default: `${columnLabel} for ${rowLabel}`. */
     cellEditor?: (columnLabel: string, rowLabel: string) => string;
+    /** Clickable row name. Receives stable readable source-row context. Default: rowLabel. */
+    rowAction?: (rowLabel: string) => string;
     /** Page-size selector in the built-in paginator footer. Default: `Rows per page`. */
     rowsPerPage?: string;
+    /** Page-navigation landmark name. Default: `Pagination`. */
+    pageNavigation?: string;
 };
 export type OptionalTableProperties = {
     labels?: TableLabels;
@@ -669,6 +674,7 @@ export type OptionalTableProperties = {
     isTableScrollable?: boolean;
     isContentScrollable?: boolean;
     testId?: string;
+    /** Visually hidden native table caption; non-empty also names existing scroll groups. */
     caption?: string;
     sortAscIcon?: Snippet;
     sortDescIcon?: Snippet;

package/dist/Tabs/Tabs.svelte

@@ -156,19 +156,137 @@
     return getComputedStyle(scrollContainer).direction === 'rtl';
   }
 
+  function availableWithoutArrows(node: HTMLElement, vertical: boolean): number {
+    const owner = node.parentElement;
+    const current = vertical ? node.clientHeight : node.clientWidth;
+    if (owner === null) {
+      return current;
+    }
+    const ownerStyle = getComputedStyle(owner);
+    const barStyle = getComputedStyle(node);
+    const flexLayout = ownerStyle.display === 'flex' || ownerStyle.display === 'inline-flex';
+    const matchingAxis = vertical
+      ? ownerStyle.flexDirection === 'column' || ownerStyle.flexDirection === 'column-reverse'
+      : ownerStyle.flexDirection === 'row' || ownerStyle.flexDirection === 'row-reverse';
+    if (!flexLayout || !matchingAxis || Number.parseFloat(barStyle.flexGrow) <= 0) {
+      return current;
+    }
+    const pixels = (value: string): number => Number.parseFloat(value) || 0;
+    const padding = vertical
+      ? pixels(ownerStyle.paddingTop) + pixels(ownerStyle.paddingBottom)
+      : pixels(ownerStyle.paddingLeft) + pixels(ownerStyle.paddingRight);
+    const budget = (vertical ? owner.clientHeight : owner.clientWidth) - padding;
+    const arrows = Array.from(owner.querySelectorAll<HTMLElement>(':scope > .tabs-arrow'));
+    const gap = pixels(vertical ? ownerStyle.rowGap : ownerStyle.columnGap);
+    const gutter = arrows.reduce(
+      (total, arrow) => total + (vertical ? arrow.offsetHeight : arrow.offsetWidth),
+      gap * arrows.length
+    );
+    const border = vertical
+      ? pixels(barStyle.borderTopWidth) + pixels(barStyle.borderBottomWidth)
+      : pixels(barStyle.borderLeftWidth) + pixels(barStyle.borderRightWidth);
+    let available = Math.min(current + gutter, Math.max(0, budget - border));
+    const maximum = vertical ? barStyle.maxHeight : barStyle.maxWidth;
+    if (maximum !== 'none') {
+      const limit = maximum.endsWith('%')
+        ? (pixels(maximum) * budget) / 100
+        : maximum.endsWith('px')
+          ? pixels(maximum)
+          : Number.NaN;
+      if (!Number.isFinite(limit)) {
+        // Keep the measured constraint when an authored CSS expression cannot
+        // be resolved here without changing that layout.
+        return current;
+      }
+      const barPadding = vertical
+        ? pixels(barStyle.paddingTop) + pixels(barStyle.paddingBottom)
+        : pixels(barStyle.paddingLeft) + pixels(barStyle.paddingRight);
+      available = Math.min(
+        available,
+        barStyle.boxSizing === 'border-box' ? Math.max(0, limit - border) : limit + barPadding
+      );
+    }
+    return available;
+  }
+
+  function inFlowContentExtent(node: HTMLElement, vertical: boolean): number {
+    let minimum = Number.POSITIVE_INFINITY;
+    let maximum = Number.NEGATIVE_INFINITY;
+    const pixels = (value: string): number => Number.parseFloat(value) || 0;
+    for (const child of Array.from(node.children)) {
+      if (
+        !(child instanceof HTMLElement) ||
+        child.classList.contains('tabs-indicator') ||
+        child.getClientRects().length === 0
+      ) {
+        continue;
+      }
+      if (child.offsetParent !== node) {
+        // An authored offset parent uses another coordinate system.
+        return vertical ? node.scrollHeight : node.scrollWidth;
+      }
+      const childStyle = getComputedStyle(child);
+      const start = vertical ? child.offsetTop : child.offsetLeft;
+      const end = start + (vertical ? child.offsetHeight : child.offsetWidth);
+      const before = pixels(vertical ? childStyle.marginTop : childStyle.marginLeft);
+      const after = pixels(vertical ? childStyle.marginBottom : childStyle.marginRight);
+      minimum = Math.min(minimum, start, start - before);
+      maximum = Math.max(maximum, end, end + after);
+    }
+    const style = getComputedStyle(node);
+    const padding = vertical
+      ? pixels(style.paddingTop) + pixels(style.paddingBottom)
+      : pixels(style.paddingLeft) + pixels(style.paddingRight);
+    // The absolute indicator can temporarily extend during its transition;
+    // it is decoration rather than additional tab content.
+    return (Number.isFinite(minimum) ? Math.max(0, maximum - minimum) : 0) + padding;
+  }
+
   function updateOverflow(): void {
     if (scrollContainer === null) {
       return;
     }
     if (isVertical) {
       const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      if (clientHeight <= 0) {
+        return;
+      }
+      if (
+        inFlowContentExtent(scrollContainer, true) <=
+        availableWithoutArrows(scrollContainer, true) + 1
+      ) {
+        canScrollUp = false;
+        canScrollDown = false;
+        return;
+      }
       canScrollUp = scrollTop > 1;
       canScrollDown = scrollTop + clientHeight < scrollHeight - 1;
       return;
     }
     const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
-    canScrollLeft = scrollLeft > 1;
-    canScrollRight = scrollLeft + clientWidth < scrollWidth - 1;
+    if (clientWidth <= 0) {
+      return;
+    }
+    if (
+      inFlowContentExtent(scrollContainer, false) <=
+      availableWithoutArrows(scrollContainer, false) + 1
+    ) {
+      canScrollLeft = false;
+      canScrollRight = false;
+      return;
+    }
+    const maxScroll = Math.max(0, scrollWidth - clientWidth);
+    // RTL starts at zero at the physical right edge and moves negatively to
+    // the left. Express both directions as distance from the physical left.
+    const physicalLeft = Math.min(
+      maxScroll,
+      Math.max(
+        0,
+        getComputedStyle(scrollContainer).direction === 'rtl' ? maxScroll + scrollLeft : scrollLeft
+      )
+    );
+    canScrollLeft = physicalLeft > 1;
+    canScrollRight = physicalLeft < maxScroll - 1;
   }
 
   function updateIndicator(): void {
@@ -176,6 +294,11 @@
       indicatorReady = false;
       return;
     }
+    // A hidden or temporarily zero-sized viewport cannot provide label offsets.
+    // Keep the last measured indicator until this axis can be laid out again.
+    if ((isVertical ? scrollContainer.clientHeight : scrollContainer.clientWidth) <= 0) {
+      return;
+    }
     const activeEl = scrollContainer.querySelector<HTMLElement>('.tabs-item.active');
     if (activeEl === null) {
       indicatorReady = false;
@@ -359,6 +482,21 @@
     if (next instanceof HTMLElement && tabElements().includes(next)) {
       return;
     }
+    if (next === null && event.target instanceof HTMLElement) {
+      const target = event.target;
+      const previousKey = focusedKey;
+      focusedKey = null;
+      // Chromium fires focusout before removing the focused node. Let that
+      // mutation finish before restoring removal focus. An intentional blur
+      // releases ownership immediately, including during a selection update.
+      queueMicrotask(() => {
+        if (!target.isConnected && focusedKey === null && previousKey !== null) {
+          focusedKey = previousKey;
+          reconcileFocus();
+        }
+      });
+      return;
+    }
     focusedKey = null;
   }
 
@@ -387,8 +525,20 @@
       focusedKey = null;
       return;
     }
-    if (!isInside && focusedKey === null) {
-      return;
+    if (!isInside) {
+      // A removed tab leaves focus on the body; restore that lost focus. An
+      // external control (including this strip's arrow) owns its own focus.
+      const root = scrollContainer?.getRootNode();
+      const hostActive = root instanceof ShadowRoot ? getActiveElement(root.host) : null;
+      const lostToBody =
+        active === scrollContainer?.ownerDocument.body ||
+        (root instanceof ShadowRoot &&
+          active === null &&
+          (hostActive === root.host || hostActive === scrollContainer?.ownerDocument.body));
+      if (focusedKey === null || !lostToBody) {
+        focusedKey = null;
+        return;
+      }
     }
     // Focus follows a selection made elsewhere, so a parent switching tabs does not
     // strand the user on a tab that is no longer the selected one.
@@ -414,7 +564,32 @@
     updateOverflow();
     updateIndicator();
     reconcileFocus();
+    const resizeObserver = new ResizeObserver(() => {
+      updateOverflow();
+      updateIndicator();
+    });
+    let resizeTargets: Element[] = [];
+    const syncResizeTargets = (): void => {
+      const targets: Element[] = [
+        node,
+        ...node.querySelectorAll('.tabs-item, .tabs-section-label')
+      ];
+      for (const previous of resizeTargets) {
+        if (!targets.includes(previous)) {
+          resizeObserver.unobserve(previous);
+        }
+      }
+      for (const target of targets) {
+        if (!resizeTargets.includes(target)) {
+          resizeObserver.observe(target, {
+            box: target === node ? 'content-box' : 'border-box'
+          });
+        }
+      }
+      resizeTargets = targets;
+    };
     const observer = new MutationObserver(() => {
+      syncResizeTargets();
       updateOverflow();
       updateIndicator();
       reconcileFocus();
@@ -425,11 +600,7 @@
       attributes: true,
       attributeFilter: ['class', 'tabindex', 'aria-selected', 'aria-disabled']
     });
-    const resizeObserver = new ResizeObserver(() => {
-      updateOverflow();
-      updateIndicator();
-    });
-    resizeObserver.observe(node);
+    syncResizeTargets();
     return () => {
       observer.disconnect();
       resizeObserver.disconnect();
@@ -521,7 +692,11 @@
           {#if typeof tabItem?.icon === 'string' && tabItem.icon.length > 0}
             <Img inlineSvg src={tabItem.icon} alt="" fallback="" classes="tabs-item-icon" />
           {/if}
-          <span class="tabs-item-label" data-text={label}>{label}</span>
+          <!-- Refresh only the label node: WebKit can retain the old attr() ghost
+               after a reused label changes, while the tab and its focus stay stable. -->
+          {#key label}
+            <span class="tabs-item-label" data-text={label}>{label}</span>
+          {/key}
           {#if tabItem?.status && tabItem.status !== 'none'}
             <span class="tabs-item-status status-{tabItem.status}" aria-hidden="true"></span>
           {/if}
@@ -735,12 +910,12 @@
      with height:0/visibility:hidden -- invisible, but its width still sets
      the shrink-to-fit width of the inline-block label, so the box is already
      as wide as the active state needs even while showing the lighter weight. */
-  .tabs-item-label {
+  .tabs-item :global(.tabs-item-label) {
     position: relative;
     display: inline-block;
   }
 
-  .tabs-item-label::after {
+  .tabs-item :global(.tabs-item-label)::after {
     content: attr(data-text);
     display: block;
     height: 0;

package/dist/ToolCallLog/ToolCallLog.svelte

@@ -289,10 +289,10 @@
     gap: var(--tool-call-log-gap, 8px);
   }
 
-  /* Bespoke <button> markup (Pill's root is a non-interactive <div> and can't carry
-     aria-expanded/button semantics — see docs), but its sizing recipe is deliberately
-     pulled from Pill's own tokens (line-height, cursor) so it reads as the same family
-     of control as the diffstat Pill badges nested inside it. */
+  /* Bespoke <button> markup (the chip holds mixed content -- spinner, label, meta and nested
+     diffstat Pill badges -- where Pill renders one `text` string; see docs), but its sizing
+     recipe is deliberately pulled from Pill's own tokens (line-height, cursor) so it reads as
+     the same family of control as the diffstat Pill badges nested inside it. */
   .chip {
     display: inline-flex;
     align-items: center;

package/dist/utils.js

@@ -372,8 +372,24 @@ export function createDebouncer(delay) {
         }
     };
 }
-/** Per-container locks shared by overlays and the legacy body helpers. */
-const scrollLocks = new WeakMap();
+const scrollLocksKey = Symbol.for('@juspay/svelte-ui-components/scroll-locks/v1');
+const activeScrollLocksKey = Symbol.for('@juspay/svelte-ui-components/active-scroll-locks/v1');
+/** Independent package and custom-element bundles share the actual owner's holds. */
+function scrollLocksFor(container) {
+    const activeOwner = container;
+    if (activeOwner[activeScrollLocksKey]) {
+        return activeOwner[activeScrollLocksKey];
+    }
+    const owner = container.ownerDocument;
+    let locks = owner[scrollLocksKey];
+    if (!locks) {
+        locks = new WeakMap();
+        Object.defineProperty(owner, scrollLocksKey, { value: locks });
+    }
+    // The same real owner can be adopted into another document while held.
+    Object.defineProperty(activeOwner, activeScrollLocksKey, { value: locks, configurable: true });
+    return locks;
+}
 const bodyScrollReleases = [];
 /**
  * Acquire one hold and return its idempotent release function. Only overflow
@@ -385,6 +401,7 @@ export function acquireScrollLock(container = typeof document === 'undefined' ?
     if (container === null) {
         return () => { };
     }
+    const scrollLocks = scrollLocksFor(container);
     let lock = scrollLocks.get(container);
     if (!lock) {
         const overflow = [];
@@ -419,6 +436,7 @@ export function acquireScrollLock(container = typeof document === 'undefined' ?
                 container.style.setProperty(name, value, priority);
             }
             scrollLocks.delete(container);
+            Reflect.deleteProperty(container, activeScrollLocksKey);
         }
     };
 }

package/dist-codemod/codemod/cli.js

@@ -9,10 +9,10 @@ const USAGE = [
     '       npx sui-codemod migrate [--dry-run] <path>',
     '       (inside this repository: node scripts/codemod/cli.ts ...)',
     '',
-    'Prepares a @juspay/svelte-ui-components consumer for 4.0.0: renames every',
-    'deprecated event-prop spelling on library components to its corrected',
-    'spelling (see legacy-pairs.ts) and reports `children` assignments on the',
-    'custom elements that stop declaring it.',
+    'Migrates older @juspay/svelte-ui-components usage to the current API:',
+    'renames removed event-prop spellings on library component tags to their',
+    'lowercase replacements (see legacy-pairs.ts) and reports unsupported',
+    '`children` assignments on affected custom elements.',
     '',
     '  --dry-run   print every change as a diff without writing any file',
     '  --help      show this help',