@juspay/svelte-ui-components 2.21.0 → 2.22.1

package/dist/Card/Card.svelte

@@ -1,10 +1,32 @@
 <script lang="ts">
   import type { CardProperties } from './properties';
 
-  let { children, title, description, classes }: CardProperties = $props();
+  let { children, title, description, classes, testId, onclick }: CardProperties = $props();
+
+  const isInteractive = $derived(typeof onclick === 'function');
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      if (event.key === ' ') {
+        event.preventDefault();
+      }
+      if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.click();
+      }
+    }
+  }
 </script>
 
-<div class="card {classes ?? ''}">
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="card {classes ?? ''}"
+  class:card-interactive={isInteractive}
+  data-pw={typeof testId === 'string' ? testId : null}
+  role={isInteractive ? 'button' : null}
+  tabindex={isInteractive ? 0 : null}
+  onclick={isInteractive ? onclick : null}
+  onkeydown={isInteractive ? handleKeydown : null}
+>
   {#if typeof title === 'string' && title.length > 0}
     <div class="card-header">
       <div class="card-title">{title}</div>
@@ -25,6 +47,16 @@
     border-radius: var(--card-border-radius, 8px);
     overflow: var(--card-overflow, hidden);
     color: inherit;
+    cursor: var(--card-cursor, inherit);
+  }
+
+  .card-interactive {
+    cursor: var(--card-cursor, pointer);
+  }
+
+  .card-interactive:focus-visible {
+    outline: var(--card-focus-outline, 2px solid currentColor);
+    outline-offset: var(--card-focus-outline-offset, 2px);
   }
 
   .card-header {

package/dist/Card/properties.d.ts

@@ -7,4 +7,13 @@ export type OptionalCardProperties = {
     title?: string;
     description?: string;
     classes?: string;
+    /** Renders as `data-pw` on the root element for Playwright test selection. */
+    testId?: string;
+    /**
+     * When provided the root element becomes interactive:
+     * `role="button"`, `tabindex=0`, and keydown (Enter/Space) triggers the handler.
+     * When omitted the root is a plain `<div>` with no interactive attributes,
+     * so existing consumers see zero behaviour change.
+     */
+    onclick?: (event: MouseEvent) => void;
 };

package/dist/Tabs/Tabs.svelte

@@ -1,20 +1,45 @@
 <script lang="ts">
-  import type { TabsProperties } from './properties';
+  import type { TabItem, TabsProperties } from './properties';
   import chevronLeftSvg from '../assets/chevron-left.svg?raw';
   import chevronRightSvg from '../assets/chevron-right.svg?raw';
 
   let {
     items,
-    activeIndex = 0,
+    activeIndex = $bindable(0),
+    activeKey,
     disabled = false,
     testId,
     scrollLeftIcon,
     scrollRightIcon,
     tab,
     classes,
-    onchange
+    onchange,
+    onkeychange
   }: TabsProperties = $props();
 
+  const isObjectMode = $derived(items.length > 0 && typeof items.at(0) === 'object');
+
+  function toTabItem(item: string | TabItem): TabItem | null {
+    return typeof item === 'object' ? item : null;
+  }
+
+  function toStringLabel(item: string | TabItem): string {
+    return typeof item === 'string' ? item : item.label;
+  }
+
+  const resolvedActiveIndex = $derived(
+    isObjectMode
+      ? items.findIndex((item) => {
+          const tabItem = toTabItem(item);
+          return tabItem !== null && tabItem.key === activeKey;
+        })
+      : activeIndex
+  );
+
+  function isActiveItem(index: number): boolean {
+    return index === resolvedActiveIndex;
+  }
+
   let scrollContainer: HTMLDivElement | null = null;
   let canScrollLeft = $state(false);
   let canScrollRight = $state(false);
@@ -40,11 +65,30 @@
   }
 
   function handleTabClick(index: number): void {
-    if (disabled || index === activeIndex) {
+    if (disabled) {
       return;
     }
-    activeIndex = index;
-    onchange?.(index, items[index]);
+    if (isObjectMode) {
+      const rawItem = items.at(index);
+      if (typeof rawItem !== 'object') {
+        return;
+      }
+      const tabItem = toTabItem(rawItem)!;
+      if (tabItem.key === activeKey) {
+        return;
+      }
+      onkeychange?.(tabItem.key);
+    } else {
+      if (index === activeIndex) {
+        return;
+      }
+      const rawLabel = items.at(index);
+      if (typeof rawLabel !== 'string') {
+        return;
+      }
+      activeIndex = index;
+      onchange?.(index, rawLabel);
+    }
   }
 
   function handleKeydown(event: KeyboardEvent, index: number): void {
@@ -90,23 +134,26 @@
     use:initOverflow
     onscroll={updateOverflow}
   >
-    {#each items as label, index (index)}
+    {#each items as item, index (isObjectMode ? (toTabItem(item)?.key ?? index) : index)}
+      {@const tabItem = toTabItem(item)}
+      {@const label = toStringLabel(item)}
       <div
         class="tabs-item"
-        class:active={index === activeIndex}
+        class:active={isActiveItem(index)}
         role="tab"
-        aria-selected={index === activeIndex}
+        aria-selected={isActiveItem(index)}
         aria-disabled={disabled ? true : null}
-        tabindex={index === activeIndex ? 0 : -1}
+        tabindex={isActiveItem(index) ? 0 : -1}
+        data-pw={tabItem?.testId}
         onclick={() => handleTabClick(index)}
-        onkeydown={(e) => handleKeydown(e, index)}
+        onkeydown={(event) => handleKeydown(event, index)}
       >
-        {#if tab}
-          {@render tab({ label, index, active: index === activeIndex })}
+        {#if typeof tab === 'function'}
+          {@render tab({ label, index, active: isActiveItem(index), subtitle: tabItem?.subtitle })}
         {:else}
           {label}
         {/if}
-        {#if index === activeIndex}
+        {#if isActiveItem(index)}
           <span class="tabs-indicator"></span>
         {/if}
       </div>

package/dist/Tabs/Tabs.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TabsProperties } from './properties';
-declare const Tabs: import("svelte").Component<TabsProperties, {}, "">;
+declare const Tabs: import("svelte").Component<TabsProperties, {}, "activeIndex">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/Tabs/properties.d.ts

@@ -1,10 +1,17 @@
 import type { Snippet } from 'svelte';
+export type TabItem = {
+    key: string;
+    label: string;
+    testId?: string;
+    subtitle?: string;
+};
 export type TabsProperties = MandatoryTabsProperties & OptionalTabsProperties & TabsEventProperties;
 export type MandatoryTabsProperties = {
-    items: string[];
+    items: string[] | TabItem[];
 };
 export type OptionalTabsProperties = {
     activeIndex?: number;
+    activeKey?: string;
     disabled?: boolean;
     testId?: string;
     scrollLeftIcon?: Snippet;
@@ -13,9 +20,11 @@ export type OptionalTabsProperties = {
         label: string;
         index: number;
         active: boolean;
+        subtitle?: string;
     }]>;
     classes?: string;
 };
 export type TabsEventProperties = {
     onchange?: (index: number, label: string) => void;
+    onkeychange?: (key: string) => void;
 };

package/package.json

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