@juspay/svelte-ui-components 2.97.1 → 2.98.0

package/dist/Accordion/Accordion.svelte

@@ -8,10 +8,14 @@
     ontoggle,
     triggerClasses,
     classes,
-    testId
+    testId,
+    disabled = false
   }: AccordionProperties = $props();
 
   function handleTriggerClick(): void {
+    if (disabled) {
+      return;
+    }
     expand = !expand;
     ontoggle?.(expand);
   }
@@ -20,9 +24,11 @@
 {#if trigger}
   <div
     class="accordion-trigger {triggerClasses ?? ''}"
+    class:disabled
     role="button"
-    tabindex="0"
+    tabindex={disabled ? -1 : 0}
     aria-expanded={expand}
+    aria-disabled={disabled}
     onclick={handleTriggerClick}
     onkeydown={(event) => {
       if (event.key === 'Enter' || event.key === ' ') {
@@ -50,6 +56,10 @@
     cursor: var(--accordion-trigger-cursor, pointer);
   }
 
+  .accordion-trigger.disabled {
+    cursor: var(--accordion-trigger-disabled-cursor, not-allowed);
+  }
+
   .accordion {
     display: grid;
     grid-template-rows: 0fr;

package/dist/Accordion/properties.d.ts

@@ -9,6 +9,14 @@ export type OptionalAccordionProperties = {
     triggerClasses?: string;
     classes?: string;
     testId?: string;
+    /**
+     * Disables the built-in trigger: clicks and Enter/Space no longer toggle,
+     * the trigger is removed from the tab order, and `aria-disabled="true"` is
+     * emitted. The trigger element also gets a `disabled` class so consumers can
+     * style the locked state. `expand` is still honoured, so a disabled accordion
+     * can be shown open or closed under external (controlled) state.
+     */
+    disabled?: boolean;
 };
 export type AccordionEventProperties = {
     ontoggle?: (expanded: boolean) => void;

package/dist/Button/Button.svelte

@@ -34,7 +34,8 @@
     ontouchend,
     icon,
     children,
-    classes
+    classes,
+    style
   }: ButtonProperties = $props();
 
   // `loading` and the legacy Circular loaderType both render the spinner and disable the button.
@@ -65,6 +66,7 @@
   class="button-container variant-{variant} size-{size} {classes ?? ''}"
   class:icon-only={iconOnly}
   class:full-width={fullWidth}
+  style={style ?? null}
 >
   {#if showProgressBar}
     <div class="button-progress-bar"></div>

package/dist/Button/properties.d.ts

@@ -56,6 +56,13 @@ export type OptionalButtonProperties = {
     role?: string;
     disabled?: boolean;
     classes?: string;
+    /**
+     * Inline style applied to the outer `.button-container`. Use for per-instance
+     * dynamic values a static class can't express — e.g. a CSS custom property
+     * driven by runtime state (`--offset: {n}px`). Prefer `classes` / `--button-*`
+     * tokens for anything static.
+     */
+    style?: string;
 };
 export type ButtonEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/Choicebox/Choicebox.svelte

@@ -68,7 +68,11 @@
     box-shadow: var(--choicebox-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));
   }
 
-  .choicebox:not(.disabled):hover {
+  /* Exclude the selected state from hover: without :not(.selected) this rule
+     (specificity 0,3,0) outranks .choicebox.selected (0,2,0), so hovering a
+     selected card repaints it with the neutral hover border/fill until the
+     cursor leaves. Excluding selected lets .choicebox.selected show through. */
+  .choicebox:not(.disabled):not(.selected):hover {
     border-color: var(--choicebox-hover-border-color, #9e9e9e);
     background: var(--choicebox-hover-background, var(--choicebox-background, #ffffff));
   }

package/dist/Select/Select.svelte

@@ -587,6 +587,9 @@
                   </span>
                 {/if}
               {/if}
+              {#if typeof row.item.icon === 'string' && row.item.icon.length > 0}
+                <Img src={row.item.icon} alt="" fallback="" classes="select-option-icon" />
+              {/if}
               <span class="select-option-label">{row.item.label}</span>
               {#if showSelectedTick && !multiple && value.includes(row.item.id)}
                 <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -754,6 +757,17 @@
     transition: background 0.1s;
   }
 
+  /* Per-option leading icon (SelectItem.icon). Kept inline + vertically centred so
+     it needs no change to the option's display and can't regress icon-less lists. */
+  .select-option :global(.select-option-icon) {
+    --image-width: var(--select-option-icon-size, 16px);
+    --image-height: var(--select-option-icon-size, 16px);
+    --image-object-fit: contain;
+
+    vertical-align: middle;
+    margin-right: var(--select-option-icon-gap, 8px);
+  }
+
   .select-option.multi {
     display: flex;
     align-items: center;

package/dist/Select/properties.d.ts

@@ -5,6 +5,14 @@ export type SelectItem = {
     label: string;
     /** Optional per-option test id, emitted as `data-pw` on the option element. */
     testId?: string;
+    /**
+     * Optional image src (URL or data URI) rendered at the left of the option row,
+     * before the label — for icon pickers and any list whose options carry a glyph.
+     * Size is controlled by the `--select-option-icon-size` CSS variable (default 16px).
+     * Pair with the trigger's `leftIcon` (driven by the selected option's icon) to show
+     * the current selection in the closed trigger.
+     */
+    icon?: string;
 };
 export type MandatorySelectProperties = {
     items: SelectItem[] | string[];

package/dist/Tabs/Tabs.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { TabItem, TabsProperties } from './properties';
+  import Img from '../Img/Img.svelte';
   import chevronLeftSvg from '../assets/chevron-left.svg?raw';
   import chevronRightSvg from '../assets/chevron-right.svg?raw';
 
@@ -191,9 +192,22 @@
         onkeydown={(event) => handleKeydown(event, index)}
       >
         {#if typeof tab === 'function'}
-          {@render tab({ label, index, active: isActiveItem(index), subtitle: tabItem?.subtitle })}
+          {@render tab({
+            label,
+            index,
+            active: isActiveItem(index),
+            subtitle: tabItem?.subtitle,
+            icon: tabItem?.icon,
+            status: tabItem?.status
+          })}
         {:else}
+          {#if typeof tabItem?.icon === 'string' && tabItem.icon.length > 0}
+            <Img src={tabItem.icon} alt="" fallback="" classes="tabs-item-icon" />
+          {/if}
           {label}
+          {#if tabItem?.status && tabItem.status !== 'none'}
+            <span class="tabs-item-status status-{tabItem.status}" aria-hidden="true"></span>
+          {/if}
         {/if}
       </div>
     {/each}
@@ -327,6 +341,7 @@
   .tabs-item {
     display: flex;
     align-items: center;
+    gap: var(--tabs-item-gap, 8px);
     position: relative;
     padding: var(--tabs-item-padding, 12px 16px);
     font-size: var(--tabs-item-font-size, 14px);
@@ -344,6 +359,38 @@
     transition: var(--tabs-transition, color 0.2s ease, background 0.2s ease);
   }
 
+  .tabs-item :global(.tabs-item-icon) {
+    --image-width: var(--tabs-item-icon-size, 16px);
+    --image-height: var(--tabs-item-icon-size, 16px);
+    --image-object-fit: contain;
+
+    flex-shrink: 0;
+  }
+
+  /* Trailing status dot for nav/menu tabs. margin-left:auto pushes it to the row's
+     end (e.g. a settings menu); harmless on a normal tab bar where the item shrinks
+     to content. */
+  .tabs-item-status {
+    width: var(--tabs-item-status-size, 8px);
+    height: var(--tabs-item-status-size, 8px);
+    margin-left: auto;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: var(--tabs-item-status-default-color, transparent);
+  }
+
+  .tabs-item-status.status-pending {
+    background: var(--tabs-item-status-pending-color, #f59e0b);
+  }
+
+  .tabs-item-status.status-error {
+    background: var(--tabs-item-status-error-color, #e7000b);
+  }
+
+  .tabs-item-status.status-success {
+    background: var(--tabs-item-status-success-color, #16a34a);
+  }
+
   .tabs-item:hover:not(.active):not([aria-disabled]) {
     color: var(--tabs-hover-color, #333333);
     background: var(--tabs-hover-background, #f5f5f5);

package/dist/Tabs/properties.d.ts

@@ -4,6 +4,18 @@ export type TabItem = {
     label: string;
     testId?: string;
     subtitle?: string;
+    /**
+     * Optional image src (URL or data URI) rendered before the label in the default
+     * tab layout. Size is controlled by the `--tabs-item-icon-size` CSS variable
+     * (default 16px). Also forwarded to the `tab` snippet for custom layouts.
+     */
+    icon?: string;
+    /**
+     * Optional status dot rendered after the label — for nav/menu tabs that flag
+     * per-item state. `'none'` (default) renders nothing. Colours are themeable via
+     * `--tabs-item-status-{pending,error,success}-color`.
+     */
+    status?: 'none' | 'pending' | 'error' | 'success';
 };
 export type TabsProperties = MandatoryTabsProperties & OptionalTabsProperties & TabsEventProperties;
 export type MandatoryTabsProperties = {
@@ -16,12 +28,16 @@ export type OptionalTabsProperties = {
     testId?: string;
     scrollLeftIcon?: Snippet;
     scrollRightIcon?: Snippet;
-    tab?: Snippet<[{
-        label: string;
-        index: number;
-        active: boolean;
-        subtitle?: string;
-    }]>;
+    tab?: Snippet<[
+        {
+            label: string;
+            index: number;
+            active: boolean;
+            subtitle?: string;
+            icon?: string;
+            status?: TabItem['status'];
+        }
+    ]>;
     classes?: string;
 };
 export type TabsEventProperties = {

package/package.json

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