@juspay/svelte-ui-components 2.60.0 → 2.62.0

package/dist/PieChart/PieChart.svelte

@@ -6,7 +6,7 @@
   import { arcPath } from '../_chart/paths';
   import { computePieLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
-  import { formatNumber, formatPercent } from '../_chart/format';
+  import { formatNumber } from '../_chart/format';
   import type { LegendItem } from '../_chart/types';
 
   // ── Props ──────────────────────────────────────────────────────
@@ -20,7 +20,7 @@
     labelPosition = 'outside',
     showLegend = false,
     startAngle = -Math.PI / 2,
-    aspectRatio = 1,
+    aspectRatio,
     valueFormat,
     tooltipSnippet,
     center,
@@ -28,7 +28,10 @@
     onsliceclick,
     onslicehover,
     testId,
-    classes
+    classes,
+    semiCircle = false,
+    legendShowValues = false,
+    percentDecimals = 0
   }: PieChartProperties = $props();
 
   // ── State ──────────────────────────────────────────────────────
@@ -40,32 +43,93 @@
   let mouseX = $state(0);
   let mouseY = $state(0);
 
+  // Aspect ratio read from --piechart-semi-aspect-ratio CSS variable.
+  // Uses $effect so it re-reads whenever containerEl binds or semiCircle changes
+  // (e.g. media-query theme switch), not just on initial mount.
+  let semiAspectRatioCssVar = $state(2);
+
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    // Track semiCircle and containerEl so the effect re-runs when either changes.
+    void semiCircle;
+    void containerEl;
+    if (typeof window === 'undefined' || containerEl === null) {
+      return;
+    }
+    const rawValue = getComputedStyle(containerEl)
+      .getPropertyValue('--piechart-semi-aspect-ratio')
+      .trim();
+    const parsed = parseFloat(rawValue);
+    if (!Number.isNaN(parsed) && parsed > 0) {
+      semiAspectRatioCssVar = parsed;
+    }
+  });
+
   // ── Layout ─────────────────────────────────────────────────────
 
   let format = $derived(valueFormat ?? formatNumber);
   let total = $derived(data.reduce((sum, d) => sum + Math.max(0, d.value), 0));
+  let pctFormat = $derived.by(
+    () =>
+      (v: number): string =>
+        total === 0 ? '0%' : ((v / total) * 100).toFixed(percentDecimals) + '%'
+  );
   let isEmpty = $derived(data.length === 0 || total === 0);
 
+  // When semiCircle is true the effective aspect ratio is driven by:
+  // 1. The explicit `aspectRatio` prop (highest priority — always wins).
+  // 2. The `--piechart-semi-aspect-ratio` CSS variable (consumer CSS override).
+  // 3. The hardcoded default of 2 (width:height = 2:1).
+  // For a full circle the caller-provided `aspectRatio` or a square (1:1) default is used.
+  let effectiveAspectRatio = $derived(aspectRatio ?? (semiCircle ? semiAspectRatioCssVar : 1));
+
   let cx = $derived(chartWidth / 2);
-  let cy = $derived(chartHeight / 2);
+  // For a half-donut the SVG origin sits at the bottom of the drawing area so
+  // arcs radiate upward into the top half of the viewBox.
+  let cy = $derived(semiCircle ? chartHeight : chartHeight / 2);
   let outerR = $derived(
-    Math.max(10, Math.min(cx, cy) - (showLabels && labelPosition === 'outside' ? 40 : 10))
+    semiCircle
+      ? Math.max(10, chartWidth / 2 - (showLabels && labelPosition === 'outside' ? 40 : 10))
+      : Math.max(10, Math.min(cx, cy) - (showLabels && labelPosition === 'outside' ? 40 : 10))
   );
   let innerR = $derived(innerRadius > 0 ? outerR * Math.min(0.95, innerRadius) : 0);
 
-  let slices = $derived(
-    computePieLayout(data, startAngle, padAngle).map((s) => {
+  let slices = $derived.by(() => {
+    // For a full circle layout start at the caller-provided startAngle.
+    // For semi-circle: compute a full-circle layout anchored at -PI/2, then
+    // remap each angle so the entire sweep is compressed into PI radians
+    // (the top-half arc from -PI/2 to PI/2).
+    const layoutStartAngle = semiCircle ? -Math.PI / 2 : startAngle;
+    const rawSlices = computePieLayout(data, layoutStartAngle, padAngle);
+
+    return rawSlices.map((s) => {
+      let mappedStart = s.startAngle;
+      let mappedEnd = s.endAngle;
+      let mappedMid = s.midAngle;
+
+      if (semiCircle) {
+        // The raw layout spans [-PI/2, -PI/2 + 2*PI]. We compress it to
+        // [-PI/2, PI/2] by halving the angular distance from -PI/2.
+        const origin = -Math.PI / 2;
+        mappedStart = origin + (s.startAngle - origin) / 2;
+        mappedEnd = origin + (s.endAngle - origin) / 2;
+        mappedMid = origin + (s.midAngle - origin) / 2;
+      }
+
       const color = s.color ?? data[s.index]?.color ?? getColor(s.index);
       const labelR = labelPosition === 'outside' ? outerR + 16 : (innerR + outerR) / 2;
       return {
         ...s,
+        startAngle: mappedStart,
+        endAngle: mappedEnd,
+        midAngle: mappedMid,
         color,
-        path: arcPath(0, 0, innerR, outerR, s.startAngle, s.endAngle),
-        labelX: labelR * Math.cos(s.midAngle),
-        labelY: labelR * Math.sin(s.midAngle)
+        path: arcPath(0, 0, innerR, outerR, mappedStart, mappedEnd),
+        labelX: labelR * Math.cos(mappedMid),
+        labelY: labelR * Math.sin(mappedMid)
       };
-    })
-  );
+    });
+  });
 
   let legendItems = $derived<LegendItem[]>(
     data.map((d, i) => ({ label: d.label, color: d.color ?? getColor(i) }))
@@ -73,6 +137,13 @@
 
   let centerBoxSize = $derived(innerR > 0 ? Math.max(0, innerR * 1.3) : 0);
 
+  // The foreignObject for the center snippet is positioned relative to the <g>
+  // origin (which is at cx, cy in SVG space). The box is always centred on
+  // the translated origin: for a full circle that is the geometric centre, and
+  // for a semiCircle the <g> origin sits at the chord line (bottom of the arc),
+  // so the snippet is centred on the chord as specified.
+  let centerFOY = $derived(-centerBoxSize / 2);
+
   // ── Tooltip ────────────────────────────────────────────────────
 
   let tooltipData = $derived.by(() => {
@@ -85,7 +156,7 @@
       items: [
         {
           label: s.label,
-          value: `${format(s.value)} (${formatPercent(s.value, total)})`,
+          value: `${format(s.value)} (${pctFormat(s.value)})`,
           color: s.color
         }
       ]
@@ -123,11 +194,15 @@
   {#if isEmpty && typeof empty === 'function'}
     <div class="chart-empty">{@render empty()}</div>
   {:else}
-    {#if showLegend}
+    {#if showLegend && !legendShowValues}
       <Legend items={legendItems} position="top" />
     {/if}
 
-    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+    <ChartContainer
+      bind:width={chartWidth}
+      bind:height={chartHeight}
+      aspectRatio={effectiveAspectRatio}
+    >
       <g transform="translate({cx}, {cy})">
         {#each slices as slice (slice.index)}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -155,7 +230,7 @@
             >
               {#if showLabels}{slice.label}{/if}
               {#if showValues}
-                {formatPercent(slice.value, total)}{/if}
+                {pctFormat(slice.value)}{/if}
             </text>
           {/if}
         {/each}
@@ -163,7 +238,7 @@
         {#if innerR > 0 && typeof center === 'function' && centerBoxSize > 0}
           <foreignObject
             x={-centerBoxSize / 2}
-            y={-centerBoxSize / 2}
+            y={centerFOY}
             width={centerBoxSize}
             height={centerBoxSize}
           >
@@ -175,6 +250,20 @@
       </g>
     </ChartContainer>
 
+    {#if showLegend && legendShowValues}
+      <ul class="pie-legend-values">
+        {#each data as d, i (i)}
+          <li class="pie-legend-row">
+            <span class="pie-legend-swatch" style="background: {d.color ?? getColor(i)}"></span>
+            <span class="pie-legend-label">{d.label}</span>
+            <span class="pie-legend-value">
+              {format(d.value)}&nbsp;{pctFormat(d.value)}
+            </span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
     {#if typeof tooltipSnippet === 'function' && hoveredIndex !== null && data[hoveredIndex]}
       <div class="chart-tooltip-slot" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
         {@render tooltipSnippet(data[hoveredIndex], hoveredIndex)}
@@ -233,4 +322,37 @@
     color: var(--chart-empty-color, #9ca3af);
     text-align: center;
   }
+  .pie-legend-values {
+    display: flex;
+    flex-direction: column;
+    gap: var(--piechart-legend-gap, 8px);
+    padding: var(--piechart-legend-padding, 12px 0 0 0);
+    font-family: var(--chart-font-family, inherit);
+    list-style: none;
+    margin: 0;
+  }
+  .pie-legend-row {
+    display: flex;
+    align-items: center;
+    gap: var(--piechart-legend-row-gap, 6px);
+  }
+  .pie-legend-swatch {
+    display: inline-block;
+    width: var(--chart-legend-swatch-size, 12px);
+    height: var(--chart-legend-swatch-size, 12px);
+    border-radius: var(--piechart-legend-swatch-radius, 2px);
+    flex-shrink: 0;
+  }
+  .pie-legend-label {
+    font-size: var(--chart-legend-font-size, 12px);
+    color: var(--chart-legend-color, #333);
+    min-width: var(--piechart-legend-label-min-width, 120px);
+  }
+  .pie-legend-value {
+    margin-left: auto;
+    font-size: var(--piechart-legend-value-font-size, 12px);
+    color: var(--piechart-legend-value-color, #333);
+    min-width: var(--piechart-legend-value-min-width, 60px);
+    text-align: right;
+  }
 </style>

package/dist/PieChart/properties.d.ts

@@ -23,6 +23,9 @@ export type OptionalPieChartProperties = {
     empty?: Snippet;
     testId?: string;
     classes?: string;
+    semiCircle?: boolean;
+    legendShowValues?: boolean;
+    percentDecimals?: number;
 };
 export type PieChartEventProperties = {
     onsliceclick?: (event: {

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/dist/_chart/ChartContainer.svelte

@@ -13,22 +13,36 @@
   }: ChartContainerProperties = $props();
 
   let containerEl: HTMLDivElement | null = $state(null);
+  let isMounted = false;
 
-  onMount(() => {
+  function measure() {
     if (containerEl === null) {
       return;
     }
+    const rect = containerEl.getBoundingClientRect();
+    const w = Math.round(rect.width);
+    width = w;
+    height = Math.max(minHeight, Math.round(w / aspectRatio));
+  }
+
+  // Re-measure whenever aspectRatio changes at runtime (e.g. semiCircle toggled).
+  // isMounted guards against running after the onMount cleanup has disconnected
+  // the ResizeObserver and the component is being torn down.
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    // Reading aspectRatio here makes this effect re-run whenever it changes.
+    void aspectRatio;
+    if (isMounted) {
+      measure();
+    }
+  });
 
-    function measure() {
-      if (containerEl === null) {
-        return;
-      }
-      const rect = containerEl.getBoundingClientRect();
-      const w = Math.round(rect.width);
-      width = w;
-      height = Math.max(minHeight, Math.round(w / aspectRatio));
+  onMount(() => {
+    if (containerEl === null) {
+      return;
     }
 
+    isMounted = true;
     measure();
 
     // Coalesce bursts of resize events into a single measure per frame, always
@@ -41,6 +55,7 @@
     observer.observe(containerEl);
 
     return () => {
+      isMounted = false;
       cancelAnimationFrame(frame);
       observer.disconnect();
     };

package/dist/_chart/format.d.ts

@@ -1,3 +1,4 @@
 export declare function formatNumber(value: number): string;
 export declare function formatPercent(value: number, total: number): string;
 export declare function defaultTickFormat(value: number | string): string;
+export declare function formatNumberIndian(value: number): string;

package/dist/_chart/format.js

@@ -26,3 +26,16 @@ export function defaultTickFormat(value) {
     }
     return formatNumber(value);
 }
+export function formatNumberIndian(value) {
+    const abs = Math.abs(value);
+    if (abs >= 1e7) {
+        return (value / 1e7).toFixed(2).replace(/\.?0+$/, '') + 'Cr';
+    }
+    if (abs >= 1e5) {
+        return (value / 1e5).toFixed(2).replace(/\.?0+$/, '') + 'L';
+    }
+    if (abs >= 1e3) {
+        return (value / 1e3).toFixed(2).replace(/\.?0+$/, '') + 'K';
+    }
+    return value.toLocaleString('en-IN');
+}

package/dist/index.d.ts

@@ -126,3 +126,4 @@ export type * from './BarChart/properties';
 export type * from './PieChart/properties';
 export type * from './SankeyChart/properties';
 export { validateInput } from './utils';
+export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -65,3 +65,4 @@ export { default as BarChart } from './BarChart/BarChart.svelte';
 export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
 export { validateInput } from './utils';
+export { formatNumberIndian } from './_chart/format';

package/package.json

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