@juspay/svelte-ui-components 2.28.2 → 2.29.0

package/dist/Select/Select.svelte

@@ -5,18 +5,26 @@
   import chevronDownSvg from '../assets/chevron-down.svg?raw';
 
   let {
-    items,
+    items: rawItems,
     value = $bindable([]),
     multiple = false,
     searchable = false,
     placeholder = '',
     disabled = false,
+    bottomContent,
+    optionIndicator,
     testId,
+    itemTestId,
     onchange,
-    classes
+    classes,
+    open = $bindable(false)
   }: SelectProperties = $props();
 
-  let isOpen = $state(false);
+  function normalizeItems(source: SelectItem[] | string[]): SelectItem[] {
+    return source.map((entry) => (typeof entry === 'string' ? { id: entry, label: entry } : entry));
+  }
+
+  let items: SelectItem[] = $derived(normalizeItems(rawItems));
   let query = $state('');
   let highlightedIndex = $state(-1);
   let containerEl: HTMLDivElement | null = $state(null);
@@ -48,13 +56,13 @@
     highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : null
   );
 
-  let searchPlaceholder = $derived(isOpen && displayText.length > 0 ? displayText : placeholder);
+  let searchPlaceholder = $derived(open && displayText.length > 0 ? displayText : placeholder);
 
-  async function open(): Promise<void> {
-    if (disabled || isOpen) {
+  async function openDropdown(): Promise<void> {
+    if (disabled || open) {
       return;
     }
-    isOpen = true;
+    open = true;
     highlightedIndex = -1;
     query = '';
     if (searchable) {
@@ -66,7 +74,7 @@
   }
 
   function close(): void {
-    isOpen = false;
+    open = false;
     query = '';
     highlightedIndex = -1;
   }
@@ -119,17 +127,17 @@
 
   function handleTriggerClick(event: MouseEvent): void {
     if (event.target instanceof HTMLInputElement) {
-      if (!isOpen) {
-        open();
+      if (!open) {
+        openDropdown();
       }
       return;
     }
     if (multiple && searchable) {
-      open();
-    } else if (isOpen) {
+      openDropdown();
+    } else if (open) {
       close();
     } else {
-      open();
+      openDropdown();
     }
   }
 
@@ -140,28 +148,28 @@
     switch (event.key) {
       case 'Enter':
         event.preventDefault();
-        if (isOpen) {
+        if (open) {
           selectHighlighted();
         } else {
-          open();
+          openDropdown();
         }
         break;
       case ' ':
         if (!(event.target instanceof HTMLInputElement)) {
           event.preventDefault();
-          if (isOpen) {
+          if (open) {
             selectHighlighted();
           } else {
-            open();
+            openDropdown();
           }
         }
         break;
       case 'ArrowDown':
         event.preventDefault();
-        if (isOpen) {
+        if (open) {
           moveHighlight(1);
         } else {
-          open();
+          openDropdown();
         }
         break;
       case 'ArrowUp':
@@ -169,7 +177,7 @@
         moveHighlight(-1);
         break;
       case 'Escape':
-        if (isOpen) {
+        if (open) {
           close();
           if (!searchable && triggerEl !== null) {
             triggerEl.focus();
@@ -185,7 +193,7 @@
         }
         break;
       case 'Tab':
-        if (isOpen) {
+        if (open) {
           close();
         }
         break;
@@ -197,15 +205,15 @@
       return;
     }
     query = event.target.value;
-    if (!isOpen) {
-      isOpen = true;
+    if (!open) {
+      open = true;
     }
     highlightedIndex = -1;
   }
 
   function handleSearchFocus(): void {
-    if (!isOpen) {
-      open();
+    if (!open) {
+      openDropdown();
     }
   }
 
@@ -229,7 +237,7 @@
 
 <div
   class="select {classes ?? ''}"
-  class:open={isOpen}
+  class:open
   class:disabled
   bind:this={containerEl}
   {...typeof testId === 'string' ? { 'data-pw': testId } : {}}
@@ -240,7 +248,7 @@
     onclick={handleTriggerClick}
     onkeydown={handleKeydown}
     role="combobox"
-    aria-expanded={isOpen}
+    aria-expanded={open}
     aria-haspopup="listbox"
     aria-controls={listboxId}
     {...highlightedOptionId !== null ? { 'aria-activedescendant': highlightedOptionId } : {}}
@@ -276,7 +284,7 @@
       <input
         class="select-search"
         type="text"
-        value={isOpen ? query : displayText}
+        value={open ? query : displayText}
         oninput={handleSearchInput}
         onfocus={handleSearchFocus}
         bind:this={searchInputEl}
@@ -294,28 +302,49 @@
     <span class="select-arrow">{@html chevronDownSvg}</span>
   </div>
 
-  {#if isOpen && !disabled}
+  {#if open && !disabled}
     <div class="select-dropdown" role="listbox" id={listboxId} aria-multiselectable={multiple}>
       {#if filteredItems.length === 0}
         <div class="select-empty">No results</div>
       {:else}
         {#each filteredItems as item, index (item.id)}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
           <div
             class="select-option"
+            class:multi={multiple}
             class:selected={value.includes(item.id)}
             class:highlighted={index === highlightedIndex}
             role="option"
             id={`${listboxId}-option-${index}`}
             aria-selected={value.includes(item.id)}
             tabindex="-1"
+            {...item.testId
+              ? { 'data-pw': item.testId }
+              : typeof itemTestId === 'string'
+                ? { 'data-pw': `${itemTestId}-${item.id}` }
+                : typeof testId === 'string'
+                  ? { 'data-pw': `${testId}-${item.id}` }
+                  : {}}
             onclick={() => selectItem(item.id)}
             onmouseenter={() => (highlightedIndex = index)}
           >
+            {#if multiple}
+              {#if typeof optionIndicator === 'function'}
+                {@render optionIndicator({ checked: value.includes(item.id) })}
+              {:else}
+                <span class="select-option-indicator" aria-hidden="true"
+                  >{value.includes(item.id) ? '☑' : '☐'}</span
+                >
+              {/if}
+            {/if}
             {item.label}
           </div>
         {/each}
       {/if}
+      {#if typeof bottomContent === 'function'}
+        <div class="select-bottom-content">
+          {@render bottomContent()}
+        </div>
+      {/if}
     </div>
   {/if}
 </div>
@@ -436,6 +465,12 @@
     transition: background 0.1s;
   }
 
+  .select-option.multi {
+    display: flex;
+    align-items: center;
+    gap: var(--select-option-gap, 0);
+  }
+
   .select-option:hover,
   .select-option.highlighted {
     background: var(--select-option-hover-background, #f0f0f0);
@@ -454,6 +489,13 @@
     );
   }
 
+  .select-option-indicator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--select-option-indicator-color, currentColor);
+    flex-shrink: 0;
+  }
+
   .select-empty {
     padding: var(--select-empty-padding, 8px 12px);
     color: var(--select-empty-color, #999999);
@@ -461,6 +503,11 @@
     font-size: var(--select-empty-font-size, inherit);
   }
 
+  .select-bottom-content {
+    border-top: var(--select-bottom-content-border, none);
+    padding: var(--select-bottom-content-padding, 8px 12px);
+  }
+
   .select-trigger :global(.pill) {
     --pill-background: var(--select-pill-background, #e0e0e0);
     --pill-color: var(--select-pill-color, #333333);

package/dist/Select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SelectProperties } from './properties';
-declare const Select: import("svelte").Component<SelectProperties, {}, "value">;
+declare const Select: import("svelte").Component<SelectProperties, {}, "value" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/Select/properties.d.ts

@@ -1,10 +1,13 @@
+import type { Snippet } from 'svelte';
 export type SelectProperties = MandatorySelectProperties & OptionalSelectProperties & SelectEventProperties;
 export type SelectItem = {
     id: string;
     label: string;
+    /** Optional per-option test id, emitted as `data-pw` on the option element. */
+    testId?: string;
 };
 export type MandatorySelectProperties = {
-    items: SelectItem[];
+    items: SelectItem[] | string[];
 };
 export type OptionalSelectProperties = {
     value?: string[];
@@ -12,8 +15,16 @@ export type OptionalSelectProperties = {
     searchable?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    bottomContent?: Snippet;
+    optionIndicator?: Snippet<[{
+        checked: boolean;
+    }]>;
     testId?: string;
+    /** Fallback per-option test id prefix. Each option emits `data-pw="{itemTestId}-{id}"` when its own `item.testId` is not set. */
+    itemTestId?: string;
     classes?: string;
+    /** Bindable. Controls whether the dropdown is open; the component writes back on open/close so parents can `bind:open` to observe or drive it. Unbound, the component manages its own state. */
+    open?: boolean;
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;

package/dist/Sheet/Sheet.svelte

@@ -14,6 +14,8 @@
     content,
     footer,
     onclose,
+    onafteropen,
+    onafterclose,
     classes
   }: SheetProperties = $props();
 
@@ -90,6 +92,18 @@
       }
     };
   }
+
+  function handleIntroEnd() {
+    if (typeof onafteropen === 'function') {
+      onafteropen();
+    }
+  }
+
+  function handleOutroEnd() {
+    if (typeof onafterclose === 'function') {
+      onafterclose();
+    }
+  }
 </script>
 
 {#if open}
@@ -112,6 +126,8 @@
       aria-label={title ?? 'Sheet'}
       tabindex="-1"
       transition:fly|global={flyParams}
+      onintroend={handleIntroEnd}
+      onoutroend={handleOutroEnd}
     >
       {#if typeof title === 'string' || showCloseButton}
         <div class="sheet-header">

package/dist/Sheet/properties.d.ts

@@ -16,4 +16,8 @@ export type OptionalSheetProperties = {
 };
 export type SheetEventProperties = {
     onclose?: () => void;
+    /** Called once after the open transition has fully completed. */
+    onafteropen?: () => void;
+    /** Called once after the close transition has fully completed. */
+    onafterclose?: () => void;
 };

package/dist/Table/Table.svelte

@@ -24,7 +24,10 @@
     empty,
     onRowClick,
     onSort,
-    classes
+    classes,
+    paginatorSlot,
+    getRowTestId,
+    getCellTestId
   }: TableProperties = $props();
 
   let sortColumn = $state<number | null>(null);
@@ -48,9 +51,9 @@
     const colIndex = sortColumn;
     const direction = sortDirection;
 
-    return [...tableData].sort((a, b) => {
-      const valueA = a[colIndex];
-      const valueB = b[colIndex];
+    return [...tableData].sort((rowA, rowB) => {
+      const valueA = rowA[colIndex];
+      const valueB = rowB[colIndex];
 
       if (typeof valueA === 'number' && typeof valueB === 'number') {
         return direction === 'asc' ? valueA - valueB : valueB - valueA;
@@ -171,12 +174,20 @@
             <tr
               class="table-row"
               class:table-row-clickable={isRowClickable}
+              data-pw={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
               onclick={isRowClickable ? () => handleRowClick(rowIndex, row) : null}
-              onkeydown={isRowClickable ? (e) => handleRowKeydown(e, rowIndex, row) : null}
+              onkeydown={isRowClickable
+                ? (keyboardEvent) => handleRowKeydown(keyboardEvent, rowIndex, row)
+                : null}
               tabindex={isRowClickable ? 0 : null}
             >
               {#each row as cellValue, colIndex (colIndex)}
-                <td class="table-content">
+                <td
+                  class="table-content"
+                  data-pw={typeof getCellTestId === 'function'
+                    ? getCellTestId(row, cellValue, rowIndex)
+                    : null}
+                >
                   <div class={isContentScrollable ? 'scrollable-content' : ''}>
                     {#if typeof cell === 'function'}
                       {@render cell(cellValue, rowIndex, colIndex)}
@@ -191,6 +202,11 @@
         {/if}
       </tbody>
     </table>
+    {#if typeof paginatorSlot === 'function'}
+      <div class="table-footer">
+        {@render paginatorSlot()}
+      </div>
+    {/if}
   </div>
 {/if}
 
@@ -341,6 +357,12 @@
     color: var(--table-empty-color, #9ca3af);
   }
 
+  .table-footer {
+    border-top: var(--table-footer-border, 1px solid #e5e7eb);
+    padding: var(--table-footer-padding, 8px 16px);
+    background-color: var(--table-footer-background, transparent);
+  }
+
   .sr-only {
     position: absolute;
     width: 1px;

package/dist/Table/properties.d.ts

@@ -19,6 +19,12 @@ export type OptionalTableProperties = {
     cell?: Snippet<[JSONValue, number, number]>;
     empty?: Snippet;
     classes?: string;
+    /** Snippet rendered in a footer region below the table (e.g. a paginator). */
+    paginatorSlot?: Snippet;
+    /** Return a data-pw value for the given row. */
+    getRowTestId?: (row: JSONValue[], rowIndex: number) => string;
+    /** Return a data-pw value for the given cell. */
+    getCellTestId?: (row: JSONValue[], column: JSONValue, rowIndex: number) => string;
 };
 export type TableEventProperties = {
     onRowClick?: (rowIndex: number, rowData: JSONValue[]) => void;

package/dist/Tabs/Tabs.svelte

@@ -44,6 +44,11 @@
   let canScrollLeft = $state(false);
   let canScrollRight = $state(false);
 
+  // Sliding indicator state
+  let indicatorLeft = $state(0);
+  let indicatorWidth = $state(0);
+  let indicatorReady = $state(false);
+
   function updateOverflow(): void {
     if (scrollContainer === null) {
       return;
@@ -53,6 +58,22 @@
     canScrollRight = scrollLeft + clientWidth < scrollWidth - 1;
   }
 
+  function updateIndicator(): void {
+    if (scrollContainer === null) {
+      return;
+    }
+    const activeEl = scrollContainer.querySelector<HTMLElement>('.tabs-item.active');
+    if (activeEl === null) {
+      indicatorReady = false;
+      indicatorLeft = 0;
+      indicatorWidth = 0;
+      return;
+    }
+    indicatorLeft = activeEl.offsetLeft;
+    indicatorWidth = activeEl.offsetWidth;
+    indicatorReady = true;
+  }
+
   function scroll(direction: 'left' | 'right'): void {
     if (scrollContainer === null) {
       return;
@@ -73,7 +94,10 @@
       if (typeof rawItem !== 'object') {
         return;
       }
-      const tabItem = toTabItem(rawItem)!;
+      const tabItem = toTabItem(rawItem);
+      if (tabItem === null) {
+        return;
+      }
       if (tabItem.key === activeKey) {
         return;
       }
@@ -101,8 +125,17 @@
   function initOverflow(node: HTMLDivElement): { destroy: () => void } {
     scrollContainer = node;
     updateOverflow();
-    const observer = new MutationObserver(updateOverflow);
-    observer.observe(node, { childList: true, subtree: true });
+    updateIndicator();
+    const observer = new MutationObserver(() => {
+      updateOverflow();
+      updateIndicator();
+    });
+    observer.observe(node, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['class']
+    });
     return {
       destroy() {
         observer.disconnect();
@@ -153,11 +186,15 @@
         {:else}
           {label}
         {/if}
-        {#if isActiveItem(index)}
-          <span class="tabs-indicator"></span>
-        {/if}
       </div>
     {/each}
+    {#if indicatorReady}
+      <span
+        class="tabs-indicator"
+        aria-hidden="true"
+        style="left: {indicatorLeft}px; width: {indicatorWidth}px;"
+      ></span>
+    {/if}
   </div>
   {#if canScrollRight}
     <button
@@ -199,6 +236,7 @@
     gap: var(--tabs-bar-gap, 0px);
     overflow-x: auto;
     scrollbar-width: none;
+    position: relative;
   }
 
   .tabs-bar::-webkit-scrollbar {
@@ -294,10 +332,16 @@
   .tabs-indicator {
     position: absolute;
     bottom: 0;
-    left: 0;
-    right: 0;
     height: var(--tabs-indicator-height, 2px);
     background-color: var(--tabs-indicator-color, #1a73e8);
     border-radius: var(--tabs-indicator-border-radius, 2px 2px 0 0);
+    transition: var(--tabs-indicator-transition, left 0.3s ease, width 0.3s ease);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tabs-indicator {
+      transition: none;
+    }
   }
 </style>

package/dist/index.d.ts

@@ -56,6 +56,9 @@ export { default as EmptyState } from './EmptyState/EmptyState.svelte';
 export { default as Combobox } from './Combobox/Combobox.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as SplitInput } from './SplitInput/SplitInput.svelte';
+export { default as FileInput } from './FileInput/FileInput.svelte';
+export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.svelte';
+export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -108,4 +111,7 @@ export type * from './EmptyState/properties';
 export type * from './Combobox/properties';
 export type * from './ColorPicker/properties';
 export type * from './SplitInput/properties';
+export type * from './FileInput/properties';
+export type * from './DateRangePicker/properties';
+export type * from './Breadcrumb/properties';
 export { validateInput } from './utils';

package/dist/index.js

@@ -56,4 +56,7 @@ export { default as EmptyState } from './EmptyState/EmptyState.svelte';
 export { default as Combobox } from './Combobox/Combobox.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as SplitInput } from './SplitInput/SplitInput.svelte';
+export { default as FileInput } from './FileInput/FileInput.svelte';
+export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.svelte';
+export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
 export { validateInput } from './utils';

package/package.json

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