@juspay/svelte-ui-components 2.61.0 → 2.62.0

package/dist/Stepper/Step.svelte

@@ -1,18 +1,77 @@
 <script lang="ts">
   import type { StepProperties } from './properties';
 
-  let { stepIndex, label, icon, classes, onclick, onkeydown }: StepProperties = $props();
+  let {
+    stepIndex,
+    label,
+    icon,
+    status,
+    badge,
+    orientation = 'horizontal',
+    classes,
+    ariaLabel,
+    onclick,
+    onkeydown
+  }: StepProperties = $props();
 
-  function handleStepClick() {
+  const handleStepClick = (): void => {
     onclick?.({ selectedIndex: stepIndex });
-  }
+  };
+
+  const handleKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleStepClick();
+    }
+    onkeydown?.(event);
+  };
+
+  let isVertical = $derived(orientation === 'vertical');
+
+  let stepClass = $derived(
+    ['step', isVertical ? 'step-vertical' : '', classes ?? ''].filter((c) => c.length > 0).join(' ')
+  );
 </script>
 
-<div class="step {classes ?? ''}" onclick={handleStepClick} {onkeydown} role="button" tabindex="0">
+<div
+  class={stepClass}
+  onclick={handleStepClick}
+  onkeydown={handleKeydown}
+  role="button"
+  tabindex="0"
+  aria-label={ariaLabel ?? null}
+  aria-labelledby={ariaLabel ? null : `step-label-${stepIndex}`}
+  aria-current={status === 'active' ? 'step' : null}
+>
   {#if typeof icon === 'string' && icon.length > 0}
     <div class="step-icon-container">
       <img class="step-icon" src={icon} alt="" />
     </div>
+  {:else if status === 'in-progress'}
+    <div class="step-index-container">
+      <svg
+        class="step-spinner"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        <circle
+          cx="12"
+          cy="12"
+          r="9"
+          stroke="currentColor"
+          stroke-opacity="0.25"
+          stroke-width="3"
+        />
+        <path
+          d="M12 3a9 9 0 0 1 9 9"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </svg>
+    </div>
   {:else}
     <div class="step-index-container">
       <div class="step-index-text">
@@ -20,9 +79,17 @@
       </div>
     </div>
   {/if}
-  <div class="step-text">
+
+  <div class="step-text" id="step-label-{stepIndex}">
     {label}
   </div>
+
+  {#if typeof badge === 'function'}
+    <div class="step-badge">
+      {@render badge()}
+    </div>
+  {/if}
+
   <div class="separator"></div>
 </div>
 
@@ -33,6 +100,11 @@
     align-items: center;
   }
 
+  .step-vertical {
+    --step-flex-direction: column;
+    align-items: flex-start;
+  }
+
   .step-index-container {
     display: flex;
     justify-content: center;
@@ -41,33 +113,110 @@
     width: var(--step-index-container-width, 30px);
     border-radius: var(--step-index-container-radius, 50%);
     background-color: var(--step-index-container-background-color, #798fa5cc);
+    color: var(--step-index-color, white);
+    flex-shrink: 0;
+  }
+
+  .step-icon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--step-index-container-height, 30px);
+    width: var(--step-index-container-width, 30px);
+    border-radius: var(--step-index-container-radius, 50%);
+    background-color: var(--step-index-container-background-color, #798fa5cc);
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .step-icon {
+    width: var(--step-icon-size, 18px);
+    height: var(--step-icon-size, 18px);
+    object-fit: contain;
+  }
+
+  .step-spinner {
+    width: var(--step-spinner-size, 18px);
+    height: var(--step-spinner-size, 18px);
+    animation: stepper-spin 0.8s linear infinite;
+  }
+
+  @keyframes stepper-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
   }
 
   .separator {
-    display: var(--separator-display, block);
-    height: var(--separator-height, 1px);
-    width: var(--separator-width, 50px);
-    margin: var(--separator-margin, 0px 12px 0px 12px);
+    display: var(--stepper-separator-display, var(--separator-display, block));
+    height: var(--stepper-separator-height, var(--separator-height, 1px));
+    width: var(--stepper-separator-width, var(--separator-width, 50px));
+    margin: var(--stepper-separator-margin, var(--separator-margin, 0px 12px 0px 12px));
     background-image: var(
-      --separator-background-image,
-      repeating-linear-gradient(
-        to right,
-        var(--separator-background-image-color, #798fa5cc),
-        var(--separator-background-image-color, #798fa5cc) 6px,
-        transparent 6px,
-        transparent 10px
+      --stepper-separator-background-image,
+      var(
+        --separator-background-image,
+        repeating-linear-gradient(
+          to right,
+          var(
+            --stepper-separator-background-image-color,
+            var(--separator-background-image-color, #798fa5cc)
+          ),
+          var(
+              --stepper-separator-background-image-color,
+              var(--separator-background-image-color, #798fa5cc)
+            )
+            6px,
+          transparent 6px,
+          transparent 10px
+        )
       )
     );
   }
 
+  .step-vertical .separator {
+    height: var(--stepper-separator-vertical-height, 32px);
+    width: var(--stepper-separator-vertical-width, 1px);
+    margin: var(--stepper-separator-vertical-margin, 4px 0px 4px 14px);
+    background-image: repeating-linear-gradient(
+      to bottom,
+      var(
+        --stepper-separator-background-image-color,
+        var(--separator-background-image-color, #798fa5cc)
+      ),
+      var(
+          --stepper-separator-background-image-color,
+          var(--separator-background-image-color, #798fa5cc)
+        )
+        6px,
+      transparent 6px,
+      transparent 10px
+    );
+  }
+
   .step-text {
     margin: var(--step-text-margin, 0px 0px 0px 12px);
     font-size: var(--step-text-font-size, 12px);
     color: var(--step-text-color, #798fa5cc);
   }
 
+  .step-vertical .step-text {
+    margin: var(--step-text-vertical-margin, 4px 0px 0px 0px);
+  }
+
   .step-index-text {
     font-size: var(--step-index-font-size, 14px);
     color: var(--step-index-color, white);
   }
+
+  .step-badge {
+    margin: var(--step-badge-margin, 0 0 0 4px);
+  }
+
+  .step-vertical .step-badge {
+    margin: var(--step-badge-vertical-margin, 4px 0 0 0);
+  }
 </style>

package/dist/Stepper/Stepper.svelte

@@ -1,22 +1,57 @@
 <script lang="ts">
-  import type { StepperProperties } from './properties';
+  import type { StepperProperties, StepStatus } from './properties';
   import Step from './Step.svelte';
 
-  let { steps, currentStepIndex, classes, onhandleStepClick }: StepperProperties = $props();
+  let {
+    steps,
+    currentStepIndex,
+    orientation = 'horizontal',
+    classes,
+    testId,
+    onstepclick,
+    onhandleStepClick
+  }: StepperProperties = $props();
+
+  const resolveStatus = (stepIndex: number, explicitStatus: StepStatus | null): StepStatus => {
+    if (explicitStatus !== null) {
+      return explicitStatus;
+    }
+    if (stepIndex < currentStepIndex) {
+      return 'completed';
+    }
+    if (stepIndex === currentStepIndex) {
+      return 'active';
+    }
+    return 'pending';
+  };
+
+  // Support the deprecated onhandleStepClick alias — onstepclick takes priority.
+  const effectiveStepClick = $derived(onstepclick ?? onhandleStepClick);
+
+  let containerClass = $derived(
+    ['container', orientation === 'vertical' ? 'container-vertical' : '', classes ?? '']
+      .filter((c) => c.length > 0)
+      .join(' ')
+  );
 </script>
 
-<div class="container {classes ?? ''}">
+<div class={containerClass} data-pw={typeof testId === 'string' ? testId : null} role="list">
   {#each steps as currentStep, stepIndex (stepIndex)}
+    {@const effectiveStatus = resolveStatus(stepIndex, currentStep.status ?? null)}
     <div
-      class:active-step={currentStepIndex === stepIndex}
-      class:completed-step={currentStepIndex > stepIndex}
-      class="step-container"
+      role="listitem"
+      class="step-container status-{effectiveStatus} {effectiveStatus === 'active'
+        ? 'active-step'
+        : ''} {effectiveStatus === 'completed' ? 'completed-step' : ''}"
     >
       <Step
-        onclick={onhandleStepClick}
+        onclick={effectiveStepClick}
         label={currentStep.label}
         icon={currentStep.icon}
         stepIndex={stepIndex + 1}
+        status={effectiveStatus}
+        badge={currentStep.badge}
+        {orientation}
       />
     </div>
   {/each}
@@ -29,8 +64,13 @@
     align-items: center;
   }
 
+  .container-vertical {
+    --container-flex-direction: column;
+    align-items: flex-start;
+  }
+
   .step-container:last-child {
-    --separator-display: none;
+    --stepper-separator-display: none;
   }
 
   .step-container {
@@ -38,21 +78,81 @@
     align-items: center;
   }
 
-  .active-step {
+  /* status-completed */
+  .status-completed {
+    --step-text-color: var(--step-text-completed-color, #24aa5a);
+    --stepper-separator-background-image-color: var(
+      --stepper-separator-background-image-completed-color,
+      #24aa5a
+    );
+    --step-index-container-background-color: var(
+      --step-index-container-completed-background-color,
+      #24aa5a
+    );
+  }
+
+  /* status-active */
+  .status-active {
     --step-text-color: var(--step-text-active-color, #2f3841);
-    --separator-background-image-color: var(--separator-background-image-active-color, #2f3841);
+    --stepper-separator-background-image-color: var(
+      --stepper-separator-background-image-active-color,
+      #2f3841
+    );
     --step-index-container-background-color: var(
       --step-index-container-active-background-color,
       #2f3841
     );
   }
 
-  .completed-step {
-    --step-text-color: var(--step-text-completed-color, #24aa5a);
-    --separator-background-image-color: var(--separator-background-image-completed-color, #24aa5a);
+  /* status-pending: no override — falls through to #798fa5cc grey default in Step.svelte */
+
+  /* status-failure */
+  .status-failure {
+    --step-text-color: var(--step-text-failure-color, #e53935);
+    --stepper-separator-background-image-color: var(
+      --stepper-separator-background-image-failure-color,
+      #e53935
+    );
     --step-index-container-background-color: var(
-      --step-index-container-completed-background-color,
-      #24aa5a
+      --step-index-container-failure-background-color,
+      var(--stepper-status-failure-color, #e53935)
+    );
+  }
+
+  /* status-in-progress */
+  .status-in-progress {
+    --step-text-color: var(--step-text-in-progress-color, #f59e0b);
+    --stepper-separator-background-image-color: var(
+      --stepper-separator-background-image-in-progress-color,
+      #f59e0b
+    );
+    --step-index-container-background-color: var(
+      --step-index-container-in-progress-background-color,
+      var(--stepper-status-in-progress-color, #f59e0b)
+    );
+  }
+
+  :global([theme='dark']) .status-failure {
+    --step-text-color: var(--step-text-failure-color, #ef5350);
+    --stepper-separator-background-image-color: var(
+      --stepper-separator-background-image-failure-color,
+      #ef5350
+    );
+    --step-index-container-background-color: var(
+      --step-index-container-failure-background-color,
+      var(--stepper-status-failure-color, #ef5350)
+    );
+  }
+
+  :global([theme='dark']) .status-in-progress {
+    --step-text-color: var(--step-text-in-progress-color, #fbbf24);
+    --stepper-separator-background-image-color: var(
+      --stepper-separator-background-image-in-progress-color,
+      #fbbf24
+    );
+    --step-index-container-background-color: var(
+      --step-index-container-in-progress-background-color,
+      var(--stepper-status-in-progress-color, #fbbf24)
     );
   }
 </style>

package/dist/Stepper/properties.d.ts

@@ -1,21 +1,44 @@
-export type StepperProperties = {
+import type { Snippet } from 'svelte';
+export type StepStatus = 'completed' | 'active' | 'pending' | 'failure' | 'in-progress';
+export type Step = {
+    label: string;
+    /**
+     * URL of a custom icon image. When provided, the icon takes precedence over
+     * any `status`-driven rendering (including the `in-progress` spinner).
+     */
+    icon?: string;
+    status?: StepStatus;
+    /**
+     * Optional Svelte snippet rendered inline after the step label (to its right
+     * in horizontal layout, below it in vertical layout). Use it for badges,
+     * tags, or other inline metadata — e.g. a count pill, a status chip, or a
+     * "New" label.
+     */
+    badge?: Snippet;
+};
+export type MandatoryStepperProperties = {
     steps: Array<Step>;
     currentStepIndex: number;
+};
+export type OptionalStepperProperties = {
+    orientation?: 'horizontal' | 'vertical';
     classes?: string;
+    testId?: string;
+};
+export type StepperEventProperties = {
+    onstepclick?: (event: {
+        selectedIndex: number;
+    }) => void;
+    /** @deprecated Use `onstepclick` instead. */
     onhandleStepClick?: (event: {
         selectedIndex: number;
     }) => void;
 };
-export type Step = {
-    label: string;
-    icon?: string;
-};
-export type StepProperties = OptionalStepProperties & StepEventProperties & {
-    stepIndex: number;
-    label: string;
-};
+export type StepperProperties = MandatoryStepperProperties & OptionalStepperProperties & StepperEventProperties;
 export type OptionalStepProperties = {
     icon?: string;
+    status?: StepStatus;
+    badge?: Snippet;
     classes?: string;
 };
 export type StepEventProperties = {
@@ -24,3 +47,16 @@ export type StepEventProperties = {
     }) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };
+export type StepProperties = OptionalStepProperties & StepEventProperties & {
+    /** 1-based display index — Stepper passes `stepIndex + 1` so that clicking step 1 returns `selectedIndex: 1`. */
+    stepIndex: number;
+    label: string;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Accessible label for the step button. When provided, set as `aria-label` on
+     * the `role="button"` element, overriding the default `aria-labelledby` association
+     * with the visible label text. Use when the visible label alone is insufficient
+     * context for screen reader users (e.g. "Step 1 — Cart (completed)").
+     */
+    ariaLabel?: string;
+};

package/package.json

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