@juspay/svelte-ui-components 2.41.0 → 2.42.0

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.41.0",
+  "version": "2.42.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",