@juspay/svelte-ui-components 2.19.2 → 2.22.0

package/dist/Banner/Banner.svelte

@@ -122,9 +122,9 @@
   }
 
   .banner-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow: var(--banner-text-overflow, hidden);
+    text-overflow: var(--banner-text-ellipsis, ellipsis);
+    white-space: var(--banner-white-space, nowrap);
   }
 
   .banner-link-text {

package/dist/Button/Button.svelte

@@ -100,11 +100,11 @@
   .disabled {
     cursor: var(--disabled-cursor, not-allowed);
     opacity: var(--disabled-opacity, 0.4);
-    color: var(--disabled-text-color);
+    color: var(--disabled-text-color, var(--button-text-color, white));
     font-size: var(--disabled-font-size);
     font-weight: var(--disabled-font-weight);
     border: var(--disabled-border);
-    background: var(--disabled-background-color);
+    background: var(--disabled-background-color, var(--button-color, #3a4550));
   }
 
   .button-loader {

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/EmptyState/EmptyState.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import type { EmptyStateProperties } from './properties';
 
-  let { title, description, icon, children, classes }: EmptyStateProperties = $props();
+  let { title, description, icon, children, classes, testId }: EmptyStateProperties = $props();
 </script>
 
-<div class="empty-state {classes ?? ''}">
+<div class="empty-state {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
   {#if typeof icon === 'function'}
     <div class="empty-state-icon">
       {@render icon()}

package/dist/EmptyState/properties.d.ts

@@ -8,4 +8,5 @@ export type OptionalEmptyStateProperties = {
     icon?: Snippet;
     children?: Snippet;
     classes?: string;
+    testId?: string;
 };

package/dist/Input/Input.svelte

@@ -84,7 +84,13 @@
     return valueValidation;
   });
 
-  const showErrorMessage = $derived(validationState === 'Invalid');
+  const validationStateForCallback = $derived.by(() => {
+    const state = validationState;
+    onStateChange(state);
+    return state;
+  });
+
+  const showErrorMessage = $derived(validationStateForCallback === 'Invalid');
 
   function handleOnInput(event: Event) {
     if (inputElement === null) {
@@ -185,18 +191,9 @@
     onFocusout(event);
     onBlur(event);
   }
-
-  let _validationStateForCallback = $derived.by(() => {
-    const state = validationState;
-    onStateChange(state);
-    return state;
-  });
 </script>
 
-<div
-  class="input-container {classes ?? ''}"
-  class:input-error={validationState === 'Invalid' && !actionInput}
->
+<div class="input-container {classes ?? ''}" class:input-error={showErrorMessage && !actionInput}>
   {#if typeof label === 'string' && label !== '' && !actionInput}
     <label class="label" for={name}>
       {label}

package/package.json

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