@juspay/svelte-ui-components 2.40.0 → 2.42.0

package/dist/EmptyState/EmptyState.svelte

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

package/dist/EmptyState/properties.d.ts

@@ -1,6 +1,13 @@
 import type { Snippet } from 'svelte';
 export type EmptyStateProperties = MandatoryEmptyStateProperties & OptionalEmptyStateProperties;
 export type MandatoryEmptyStateProperties = {
+    /**
+     * Fallback text title rendered when `titleSnippet` is not provided.
+     * This prop is required for backward-compatibility. When `titleSnippet` is supplied,
+     * `title` is still required by TypeScript but its value is not rendered — the snippet
+     * takes priority. Pass an empty string (`title=""`) as the minimal valid value when
+     * using `titleSnippet`.
+     */
     title: string;
 };
 export type OptionalEmptyStateProperties = {
@@ -9,4 +16,17 @@ export type OptionalEmptyStateProperties = {
     children?: Snippet;
     classes?: string;
     testId?: string;
+    /**
+     * Optional snippet that replaces the `title` string at render time.
+     * When provided, the mandatory `title` prop is still required for backward-compatibility
+     * but its value is not rendered — the snippet takes full priority.
+     * Use this when the title needs rich markup (e.g. formatted text, icons inline).
+     */
+    titleSnippet?: Snippet;
+    /**
+     * Optional snippet that replaces the `description` string at render time.
+     * When provided, `description` is silently discarded — only one is rendered.
+     * Use this when the description needs rich markup (e.g. links, emphasis).
+     */
+    descriptionSnippet?: Snippet;
 };

package/dist/Select/Select.svelte

@@ -17,9 +17,12 @@
     testId,
     itemTestId,
     onchange,
+    onopen,
+    onclose,
     classes,
     open = $bindable(false),
-    dropdownAlign = 'left'
+    dropdownAlign = 'left',
+    hierarchy = 'default'
   }: SelectProperties = $props();
 
   function normalizeItems(source: SelectItem[] | string[]): SelectItem[] {
@@ -65,6 +68,7 @@
       return;
     }
     open = true;
+    onopen?.();
     highlightedIndex = -1;
     query = '';
     if (searchable) {
@@ -77,6 +81,7 @@
 
   function close(): void {
     open = false;
+    onclose?.();
     query = '';
     highlightedIndex = -1;
   }
@@ -208,7 +213,7 @@
     }
     query = event.target.value;
     if (!open) {
-      open = true;
+      openDropdown();
     }
     highlightedIndex = -1;
   }
@@ -233,6 +238,9 @@
     document.addEventListener('click', handleClickOutside);
     return () => {
       document.removeEventListener('click', handleClickOutside);
+      if (open) {
+        onclose?.();
+      }
     };
   });
 </script>
@@ -241,6 +249,7 @@
   class="select {classes ?? ''}"
   class:open
   class:disabled
+  class:ghost={hierarchy === 'ghost'}
   bind:this={containerEl}
   {...typeof testId === 'string' ? { 'data-pw': testId } : {}}
 >
@@ -552,4 +561,22 @@
     --pill-padding: var(--select-pill-padding, 2px 8px);
     --pill-font-size: var(--select-pill-font-size, 13px);
   }
+
+  /* Ghost hierarchy: transparent, borderless trigger */
+  .select.ghost .select-trigger {
+    background: var(--select-ghost-trigger-background, transparent);
+    border-color: var(--select-ghost-trigger-border-color, transparent);
+    box-shadow: none;
+  }
+
+  .select.ghost .select-trigger:hover:not(.disabled .select-trigger) {
+    border-color: var(--select-ghost-trigger-hover-border-color, transparent);
+    background: var(--select-ghost-trigger-hover-background, rgba(0, 0, 0, 0.04));
+  }
+
+  .select.ghost.open .select-trigger {
+    border-color: var(--select-ghost-trigger-open-border-color, transparent);
+    background: var(--select-ghost-trigger-open-background, rgba(0, 0, 0, 0.06));
+    box-shadow: none;
+  }
 </style>

package/dist/Select/properties.d.ts

@@ -9,6 +9,7 @@ export type SelectItem = {
 export type MandatorySelectProperties = {
     items: SelectItem[] | string[];
 };
+export type SelectHierarchy = 'default' | 'ghost';
 export type OptionalSelectProperties = {
     value?: string[];
     multiple?: boolean;
@@ -32,7 +33,11 @@ export type OptionalSelectProperties = {
         value: string[];
         items: SelectItem[];
     }]>;
+    /** Visual hierarchy of the trigger. `'ghost'` renders a transparent, borderless trigger — useful when the Select is embedded in a toolbar or header where a full bordered input would be visually heavy. Defaults to `'default'`. */
+    hierarchy?: SelectHierarchy;
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;
+    onopen?: () => void;
+    onclose?: () => void;
 };

package/dist/Toggle/Toggle.svelte

@@ -1,20 +1,33 @@
 <script lang="ts">
   import type { ToggleProperties } from './properties';
 
-  let { checked = false, text = '', classes, onclick }: ToggleProperties = $props();
+  let {
+    checked = false,
+    text = '',
+    disabled = false,
+    testId,
+    classes,
+    onclick
+  }: ToggleProperties = $props();
 
-  function handleCheckboxClick(e: MouseEvent): void {
+  const handleCheckboxClick = (e: MouseEvent): void => {
     if (e.target instanceof HTMLInputElement && typeof e.target.checked === 'boolean') {
       checked = e.target.checked;
     }
     onclick?.(checked);
-  }
+  };
 </script>
 
-<div class="container {classes ?? ''}">
+<div class="container {classes ?? ''}" class:disabled aria-disabled={disabled} data-pw={testId}>
   <div class="text" hidden={text.length === 0}>{text}</div>
   <label class="switch">
-    <input class="input-checkbox" type="checkbox" {checked} onclick={handleCheckboxClick} />
+    <input
+      class="input-checkbox"
+      type="checkbox"
+      {checked}
+      {disabled}
+      onclick={handleCheckboxClick}
+    />
     <span class="slider round"></span>
   </label>
 </div>
@@ -26,6 +39,12 @@
     gap: var(--toggle-container-gap, 8px);
   }
 
+  .container.disabled {
+    opacity: var(--toggle-disabled-opacity, 0.4);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
   .text {
     font-size: var(--toggle-text-font-size, 14px);
     font-weight: var(--toggle-text-font-weight, 400);

package/dist/Toggle/properties.d.ts

@@ -1,6 +1,9 @@
-export type ToggleProperties = ToggleEventProperties & {
+export type ToggleProperties = OptionalToggleProperties & ToggleEventProperties;
+export type OptionalToggleProperties = {
+    text?: string;
     checked?: boolean;
-    text: string;
+    disabled?: boolean;
+    testId?: string;
     classes?: string;
 };
 export type ToggleEventProperties = {

package/package.json

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