@juspay/svelte-ui-components 2.61.0 → 2.62.1

package/dist/BarChart/BarChart.svelte

@@ -413,10 +413,7 @@
       return null;
     }
     const title = isMulti ? `${bar.dataPoint.label} — ${bar.seriesName}` : bar.dataPoint.label;
-    const displayValue =
-      isNormalized && bar.normalizedValue != null
-        ? normalizedFormat(bar.normalizedValue)
-        : format(bar.dataPoint.value);
+    const displayValue = getDisplayValue(bar);
     return {
       title,
       items: [{ label: bar.dataPoint.label, value: displayValue, color: bar.color }]
@@ -574,7 +571,7 @@
                     y2={isHoriz ? entry.bar.y : entry.bar.y + entry.bar.height}
                     gradientUnits="userSpaceOnUse"
                   >
-                    {#each grad.stops as stop (stop.offset)}
+                    {#each grad.stops as stop, stopIndex (`${stopIndex}-${stop.offset}`)}
                       <stop
                         offset="{stop.offset * 100}%"
                         stop-color={stop.color}

package/dist/Button/Button.svelte

@@ -15,7 +15,7 @@
     ariaSelected,
     role,
     onclick,
-    onkeydown,
+    onkeydown = () => {},
     onkeyup = () => {},
     onmousedown,
     onmouseup,
@@ -117,7 +117,10 @@
     font-weight: var(--disabled-font-weight);
     border: var(--disabled-border);
     background: var(--disabled-background-color, var(--button-color, #3a4550));
-    box-shadow: var(--button-disabled-box-shadow, var(--button-box-shadow, none));
+    box-shadow: var(
+      --button-disabled-box-shadow,
+      var(--disabled-box-shadow, var(--button-box-shadow, none))
+    );
   }
 
   .button-loader {

package/dist/Button/properties.d.ts

@@ -20,11 +20,18 @@ export type OptionalButtonProperties = {
 };
 export type ButtonEventProperties = {
     onclick?: (event: MouseEvent) => void;
+    /** Fires when a key is pressed down while the button has focus. */
     onkeydown?: (event: KeyboardEvent) => void;
+    /** Fires when a key is released while the button has focus. */
     onkeyup?: (event: KeyboardEvent) => void;
+    /** Fires when a mouse button is pressed down on the button. */
     onmousedown?: (event: MouseEvent) => void;
+    /** Fires when a mouse button is released over the button. */
     onmouseup?: (event: MouseEvent) => void;
+    /** Fires when the pointer leaves the button area. */
     onmouseleave?: (event: MouseEvent) => void;
+    /** Fires when a touch point is placed on the button. */
     ontouchstart?: (event: TouchEvent) => void;
+    /** Fires when a touch point is removed from the button. */
     ontouchend?: (event: TouchEvent) => void;
 };

package/dist/Card/Card.svelte

@@ -177,7 +177,7 @@
   .card-content-scrollable {
     overflow-y: auto;
     max-height: var(--card-content-max-height, 400px);
-    scrollbar-width: thin;
+    scrollbar-width: var(--card-content-scrollbar-width, thin);
   }
 
   /* footer */

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -110,6 +110,32 @@
 
   let activePresetLabel: string | null = $state(resolvedInitialPresetLabel);
 
+  // Seed draft from initialPresetLabel whenever presets become available so
+  // the calendar shows the preset's date selection when the picker is first
+  // opened — even if presets arrive asynchronously after initial render.
+  // The draftStart/draftEnd/draftValue guards prevent re-seeding once the
+  // user has made a custom selection.
+  $effect.pre(() => {
+    if (
+      resolvedInitialPresetLabel !== null &&
+      presets !== null &&
+      draftStart === null &&
+      draftEnd === null &&
+      draftValue === null
+    ) {
+      const matchedPreset = presets.find((p) => p.label === resolvedInitialPresetLabel) ?? null;
+      if (matchedPreset !== null) {
+        const { start, end } = matchedPreset.getValue();
+        if (mode === 'single') {
+          draftValue = start;
+        } else {
+          draftStart = start;
+          draftEnd = end;
+        }
+      }
+    }
+  });
+
   const now = new SvelteDate();
 
   // Dual-month navigation: track the year+month of the left calendar
@@ -160,11 +186,11 @@
 
   function openPicker(): void {
     // Seed draft from current committed values
-    draftStart = rangeStart !== null ? rangeStart : null;
-    draftEnd = rangeEnd !== null ? rangeEnd : null;
-    draftValue = value !== null ? value : null;
-    draftCompareStart = compareStart !== null ? compareStart : null;
-    draftCompareEnd = compareEnd !== null ? compareEnd : null;
+    draftStart = rangeStart;
+    draftEnd = rangeEnd;
+    draftValue = value;
+    draftCompareStart = compareStart;
+    draftCompareEnd = compareEnd;
 
     // Reset preset tracking so each picker session starts clean.
     selectedPresetLabel = null;
@@ -499,9 +525,7 @@
             {#each presets as preset, presetIndex (preset.label)}
               {@const previousPreset = presetIndex > 0 ? presets[presetIndex - 1] : null}
               {@const groupChanged =
-                presetIndex > 0 &&
-                'group' in preset &&
-                (previousPreset === null || previousPreset.group !== preset.group)}
+                presetIndex > 0 && (previousPreset?.group ?? '') !== (preset.group ?? '')}
               {#if groupChanged}
                 <div class="drp-preset-divider" role="separator" aria-hidden="true">
                   {#if preset.group !== ''}

package/dist/Gauge/Gauge.svelte

@@ -6,6 +6,7 @@
     max = 100,
     showLabel = true,
     labelFormatter,
+    ariaLabel,
     testId,
     classes
   }: GaugeProperties = $props();
@@ -33,7 +34,7 @@
   aria-valuenow={clamped}
   aria-valuemin={0}
   aria-valuemax={100}
-  aria-label="gauge"
+  aria-label={ariaLabel ?? labelText}
 >
   <svg viewBox="0 0 {VIEW_BOX} {VIEW_BOX}">
     <circle class="track" cx={CENTER} cy={CENTER} r={RADIUS} fill="none" />

package/dist/Gauge/properties.d.ts

@@ -11,6 +11,7 @@ export type OptionalGaugeProperties = {
      * @default 100
      */
     max?: number;
+    /** Whether to show the centered percentage label. @default true */
     showLabel?: boolean;
     /**
      * Custom label renderer called with the raw `(value, max)` pair. Return any
@@ -18,6 +19,14 @@ export type OptionalGaugeProperties = {
      * Example: `labelFormatter={(v, m) => \`${v} / ${m}\`}` shows "50 / 200".
      */
     labelFormatter?: (value: number, max: number) => string;
+    /**
+     * Accessible label for the gauge element (`role="progressbar"`). Falls back
+     * to the computed `labelText` (e.g. `"75%"`) when not provided, so assistive
+     * technology announces the current percentage by default.
+     */
+    ariaLabel?: string;
+    /** Value for the `data-pw` attribute on the root element for E2E test selection. */
     testId?: string;
+    /** Extra CSS classes applied to the root element for consumer theming. */
     classes?: string;
 };

package/dist/SankeyChart/SankeyChart.svelte

@@ -272,7 +272,7 @@
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
       <g transform="translate({MARGIN}, {MARGIN})">
         {#if columnLabels != null && columnLabels.length > 0}
-          {#each columnLabels as label, ci (ci)}
+          {#each columnLabels.slice(0, columnCount) as label, ci (ci)}
             <text
               class="sankey-col-label"
               x={ci * colWidth + nodeWidth / 2}

package/dist/Select/Select.svelte

@@ -364,7 +364,7 @@
             id={`${listboxId}-option-${index}`}
             aria-selected={value.includes(item.id)}
             tabindex="-1"
-            {...item.testId
+            {...typeof item.testId === 'string'
               ? { 'data-pw': item.testId }
               : typeof itemTestId === 'string'
                 ? { 'data-pw': `${itemTestId}-${item.id}` }

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

@@ -189,10 +189,16 @@
    * stable even when the visible set shrinks or expands as the search term
    * changes — so a row that was "row 2" in the full set keeps ID `"2"` even
    * when it becomes the only visible result.
+   *
+   * The Map lookup uses object reference equality, so row objects in
+   * `filteredTableData` must be the same references as those in
+   * `sortedTableData`. When `originalIndex` cannot be found (reference mismatch
+   * after a transform), the fallback positional index is used instead.
    */
   let filteredRowIds = $derived.by((): string[] => {
+    const indexMap = new Map(sortedTableData.map((row, index) => [row, index]));
     return filteredTableData.map((row, fallbackIndex) => {
-      const originalIndex = sortedTableData.indexOf(row);
+      const originalIndex = indexMap.get(row) ?? -1;
       const stableIndex = originalIndex === -1 ? fallbackIndex : originalIndex;
       if (checkboxSelection && checkboxSelection.enabled !== false) {
         return resolveRowId(checkboxSelection, row, stableIndex);
@@ -314,6 +320,7 @@
       oninput={handleSearchInput}
       data-pw={searchConfig?.testId ?? null}
       aria-label={searchConfig?.placeholder ?? 'Search'}
+      autocomplete="off"
     />
     {#if searchTerm.length > 0}
       <button
@@ -353,6 +360,7 @@
                   ? 'mixed'
                   : headerCheckboxState === 'all'}
                 aria-label="Select all rows"
+                aria-controls={selectableRowIds.map((rowId) => `row-checkbox-${rowId}`).join(' ')}
                 onclick={toggleAllSelection}
                 onkeydown={(keyboardEvent) =>
                   handleCheckboxKeydown(keyboardEvent, toggleAllSelection)}
@@ -445,6 +453,7 @@
                     class:checked={rowSelected}
                     class:disabled={rowDisabled}
                     role="checkbox"
+                    id={`row-checkbox-${rowId}`}
                     tabindex={rowDisabled ? -1 : 0}
                     aria-checked={rowSelected}
                     aria-disabled={rowDisabled}

package/package.json

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