@juspay/svelte-ui-components 3.5.0 → 3.5.1

package/dist/SplitInput/SplitInput.svelte

@@ -12,19 +12,11 @@
     separator,
     testId,
     classes,
-    onchange: onchangeLegacy,
-    onChange,
-    oninput: oninputLegacy,
-    onInput,
-    oncomplete: oncompleteLegacy,
-    onComplete
+    onchange,
+    oninput,
+    oncomplete
   }: SplitInputProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const oncomplete = $derived(onComplete ?? oncompleteLegacy);
-  const oninput = $derived(onInput ?? oninputLegacy);
-
   let fieldCount = $derived(typeof fields !== 'undefined' ? fields.length : length);
 
   let fieldConfigs: FieldConfig[] = $derived(
@@ -252,9 +244,9 @@
         disable={disabled}
         actionInput={true}
         classes="field-group-input"
-        onInput={(v) => handleFieldInput(index, v)}
-        onKeyDown={(e) => handleKeyDown(e, index)}
-        onPaste={(e) => handlePaste(e, index)}
+        oninput={(v) => handleFieldInput(index, v)}
+        onkeydown={(e) => handleKeyDown(e, index)}
+        onpaste={(e) => handlePaste(e, index)}
         bind:this={inputRefs[index]}
       />
       {#if typeof config.label === 'string'}

package/dist/SplitInput/properties.d.ts

@@ -15,9 +15,6 @@ export type OptionalSplitInputProperties = {
 };
 export type SplitInputEventProperties = {
     onchange?: (values: string[]) => void;
-    onChange?: (values: string[]) => void;
     oninput?: (values: string[]) => void;
-    onInput?: (values: string[]) => void;
     oncomplete?: (values: string[]) => void;
-    onComplete?: (values: string[]) => void;
 };

package/dist/StatCard/StatCard.svelte

@@ -21,7 +21,7 @@
     testId,
     classes,
     onclick,
-    onCheckboxChange
+    oncheckboxchange
   }: StatCardProperties = $props();
 
   const isInteractive = $derived(typeof onclick === 'function');
@@ -67,7 +67,7 @@
   };
 
   const handleCheckboxChange = (checked: boolean): void => {
-    onCheckboxChange?.(checked);
+    oncheckboxchange?.(checked);
   };
 
   /**

package/dist/StatCard/properties.d.ts

@@ -142,5 +142,5 @@ export type StatCardEventProperties = {
     /** Makes the card interactive: adds `role="button"`, `tabindex=0`, and wires click/Enter/Space. */
     onclick?: (event: MouseEvent) => void;
     /** Fired when the header checkbox changes. */
-    onCheckboxChange?: (checked: boolean) => void;
+    oncheckboxchange?: (checked: boolean) => void;
 };

package/dist/Status/Status.svelte

@@ -33,8 +33,7 @@
     statusDescription = '',
     buttonProperties,
     classes,
-    onbuttonClick: onbuttonClickLegacy,
-    onButtonClick,
+    onbuttonclick,
     icon,
     descriptionSnippet,
     children,
@@ -46,9 +45,6 @@
   const statusIconFallback = $derived(
     statusIcon === LEGACY_DEFAULT_STATUS_ICON ? BUILTIN_STATUS_ICON : null
   );
-
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onbuttonClick = $derived(onButtonClick ?? onbuttonClickLegacy);
 </script>
 
 <div
@@ -78,7 +74,7 @@
       {/if}
     </div>
     {#if typeof buttonProperties === 'object'}
-      <Button {...buttonProperties} onclick={onbuttonClick} />
+      <Button {...buttonProperties} onclick={onbuttonclick} />
     {/if}
     {#if typeof children === 'function'}
       {@render children()}

package/dist/Status/properties.d.ts

@@ -55,6 +55,5 @@ export type StatusProperties = StatusEventProperties & {
     testId?: string;
 };
 export type StatusEventProperties = {
-    onbuttonClick?: () => void;
-    onButtonClick?: () => void;
+    onbuttonclick?: () => void;
 };

package/dist/Stepper/Stepper.svelte

@@ -10,16 +10,9 @@
     testId,
     suppressRoleAndTabindex,
     suppressContainerTestId,
-    onstepclick: onstepclickLegacy,
-    onStepClick,
-    onhandleStepClick: onhandleStepClickLegacy,
-    onHandleStepClick
+    onhandlestepclick
   }: StepperProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onhandleStepClick = $derived(onHandleStepClick ?? onhandleStepClickLegacy);
-  const onstepclick = $derived(onStepClick ?? onstepclickLegacy);
-
   const resolveStatus = (stepIndex: number, explicitStatus: StepStatus | null): StepStatus => {
     if (explicitStatus !== null) {
       return explicitStatus;
@@ -33,9 +26,6 @@
     return 'pending';
   };
 
-  // Support the deprecated onhandleStepClick alias — onstepclick takes priority.
-  const effectiveStepClick = $derived(onstepclick ?? onhandleStepClick);
-
   // Per-step ids always derive from testId, even when the container itself is
   // opted out of claiming it — only the container's own data-pw/testID is suppressed.
   const containerTestId = $derived(
@@ -61,7 +51,7 @@
         : ''} {effectiveStatus === 'completed' ? 'completed-step' : ''}"
     >
       <Step
-        onclick={effectiveStepClick}
+        onclick={onhandlestepclick}
         label={currentStep.label}
         icon={currentStep.icon}
         stepIndex={stepIndex + 1}

package/dist/Stepper/properties.d.ts

@@ -52,17 +52,7 @@ export type OptionalStepperProperties = {
     suppressContainerTestId?: boolean;
 };
 export type StepperEventProperties = {
-    onstepclick?: (event: {
-        selectedIndex: number;
-    }) => void;
-    onStepClick?: (event: {
-        selectedIndex: number;
-    }) => void;
-    /** @deprecated Use `onstepclick` instead. */
-    onhandleStepClick?: (event: {
-        selectedIndex: number;
-    }) => void;
-    onHandleStepClick?: (event: {
+    onhandlestepclick?: (event: {
         selectedIndex: number;
     }) => void;
 };
@@ -84,9 +74,6 @@ export type StepEventProperties = {
     onclick?: (event: {
         selectedIndex: number;
     }) => void;
-    onClick?: (event: {
-        selectedIndex: number;
-    }) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };
 export type StepProperties = OptionalStepProperties & StepEventProperties & {

package/dist/Table/BuiltinCell.svelte

@@ -352,7 +352,7 @@
           : null}
         onErrorMessage={inputData.onErrorMessage ?? null}
         actionInput={false}
-        onInput={(newValue) => column.onInput?.(rowIndex, newValue, originalIndex)}
+        oninput={(newValue) => column.onInput?.(rowIndex, newValue, originalIndex)}
         {...inputData.iconUrl ? { leftIcon: inputLeadingIcon } : {}}
       />
     </span>

package/dist/Table/Table.svelte

@@ -36,16 +36,15 @@
     sortDefaultIcon,
     cell,
     empty,
-    onRowClick,
-    onSort,
-    onCellChange: _onCellChange,
+    onrowclick,
+    onsort,
     classes,
     paginatorSlot,
     getRowTestId,
     getCellTestId,
     checkboxSelection,
     searchConfig,
-    onSearchChange,
+    onsearchchange,
     pagination,
     toolbarSlot,
     rowNumberColumn = false,
@@ -111,12 +110,12 @@
       sortColumn = colIndex;
       sortDirection = 'asc';
     }
-    onSort?.(colIndex, sortDirection);
+    onsort?.(colIndex, sortDirection);
   };
 
   // ─── Row click ───────────────────────────────────────────────────────────────
   const handleRowClick = (rowIndex: number, rowData: JSONValue[], originalIndex: number): void => {
-    onRowClick?.(rowIndex, rowData, originalIndex);
+    onrowclick?.(rowIndex, rowData, originalIndex);
   };
 
   const handleRowKeydown = (
@@ -127,11 +126,11 @@
   ): void => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      onRowClick?.(rowIndex, rowData, originalIndex);
+      onrowclick?.(rowIndex, rowData, originalIndex);
     }
   };
 
-  let isRowClickable = $derived(typeof onRowClick === 'function');
+  let isRowClickable = $derived(typeof onrowclick === 'function');
   let isStickyHeader = $derived(stickyHeader || isTableScrollable);
 
   // ─── Horizontal-scroll affordance ────────────────────────────────────────
@@ -168,7 +167,7 @@
   // ─── C2-3: Search ─────────────────────────────────────────────────────────
   let searchTerm = $state('');
   let hasSearchConfig = $derived(!!searchConfig);
-  let isServerSearch = $derived(typeof onSearchChange === 'function');
+  let isServerSearch = $derived(typeof onsearchchange === 'function');
   let searchInputRef = $state<HTMLInputElement | null>(null);
   let inlineSearchInputRef = $state<{ focus: () => void } | null>(null);
   let inlineSearchTriggerRef = $state<HTMLElement | null>(null);
@@ -180,7 +179,7 @@
     pageOverride = 1;
     pagination?.onPageChange?.(1);
     if (isServerSearch) {
-      onSearchChange?.(term);
+      onsearchchange?.(term);
     }
   };
 
@@ -217,7 +216,7 @@
 
   // The expanded guard matters: collapsing unmounts the focused input, which can
   // fire blur on the way out. Without it, an Escape (or close-button) collapse
-  // re-enters clearSearch and fires a second onSearchChange('') — a duplicate
+  // re-enters clearSearch and fires a second onsearchchange('') — a duplicate
   // request on the server-search path.
   const collapseInlineSearchIfEmpty = (): void => {
     if (isInlineSearchExpanded && searchTerm.trim() === '') {
@@ -305,7 +304,7 @@
   });
 
   /**
-   * Client-side filtered rows. When `onSearchChange` is provided (server
+   * Client-side filtered rows. When `onsearchchange` is provided (server
    * delegation) or `searchConfig` is absent, the sorted data passes through
    * untouched.
    */
@@ -406,7 +405,7 @@
   /**
    * Offset that converts the render loop's page-local index back into an index
    * into the consumer-supplied rows. Client-mode pagination slices internally,
-   * so page 2+ would otherwise hand handlers (onRowClick, column handlers,
+   * so page 2+ would otherwise hand handlers (onrowclick, column handlers,
    * cell snippets, test-id callbacks) an index that mis-addresses the
    * consumer's full array. Server mode supplies the current page as the whole
    * array, so no offset applies.
@@ -837,9 +836,9 @@
                             testId={searchConfig?.testId ?? ''}
                             ariaLabel={searchConfig?.placeholder ?? 'Search'}
                             autoComplete="off"
-                            onInput={(value: string) => updateSearch(value)}
-                            onBlur={collapseInlineSearchIfEmpty}
-                            onKeyDown={handleInlineSearchKeyDown}
+                            oninput={(value: string) => updateSearch(value)}
+                            onblur={collapseInlineSearchIfEmpty}
+                            onkeydown={handleInlineSearchKeyDown}
                             classes="table-inline-search-input"
                           />
                           <span class="table-inline-search-clear">
@@ -1077,7 +1076,7 @@
                 prevButtonTestId={pagination.prevButtonTestId}
                 nextButtonTestId={pagination.nextButtonTestId}
                 onchange={handlePageChange}
-                onLoadMore={pagination.onLoadMore}
+                onloadmore={pagination.onLoadMore}
               />
             {/if}
           </span>

package/dist/Table/properties.d.ts

@@ -526,44 +526,12 @@ export type OptionalTableProperties = {
     searchConfig?: TableSearchConfig;
 };
 export type TableEventProperties = {
-    onRowClick?: (rowIndex: number, rowData: JSONValue[], originalIndex: number) => void;
-    onSort?: (columnIndex: number, direction: SortDirection) => void;
-    /**
-     * C2-2: Callback invoked when a cell value changes via an editable element
-     * inside the consumer's `cell` snippet (e.g. an `<Input>` or `<Select>`).
-     *
-     * **How to wire it**: Svelte 5 snippets execute in the consumer's scope, so
-     * `onCellChange` is NOT forwarded by Table — you must close over your own
-     * handler directly inside the snippet:
-     *
-     * ```svelte
-     * <script>
-     *   let rows = $state(myData);
-     *   const handleCellChange = (rowIndex, colIndex, newValue) => {
-     *     rows[rowIndex][colIndex] = newValue;
-     *   };
-     * </script>
-     *
-     * <Table tableData={rows}>
-     *   {#snippet cell(value, rowIndex, colIndex)}
-     *     <Input
-     *       value={String(value ?? '')}
-     *       onInput={(newValue) => handleCellChange(rowIndex, colIndex, newValue)}
-     *     />
-     *   {/snippet}
-     * </Table>
-     * ```
-     *
-     * Table never mutates `tableData`; the consumer owns the source-of-truth
-     * array. Pass `onCellChange` as a top-level prop if you want Table to expose
-     * this handler to parent components via the standard props channel — it does
-     * not change the wiring inside the snippet.
-     */
-    onCellChange?: (rowIndex: number, colIndex: number, newValue: JSONValue) => void;
+    onrowclick?: (rowIndex: number, rowData: JSONValue[], originalIndex: number) => void;
+    onsort?: (columnIndex: number, direction: SortDirection) => void;
     /**
      * C2-3: When provided, the built-in client-side filtering is disabled and
      * this callback is called on every search input change instead, letting the
      * server decide what rows to show.
      */
-    onSearchChange?: (searchTerm: string) => void;
+    onsearchchange?: (searchTerm: string) => void;
 };

package/dist/Tabs/Tabs.svelte

@@ -18,16 +18,10 @@
     scrollRightIcon,
     tab,
     classes,
-    onchange: onchangeLegacy,
-    onChange,
-    onkeychange: onkeychangeLegacy,
-    onKeyChange
+    onchange,
+    onkeychange
   }: TabsProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const onkeychange = $derived(onKeyChange ?? onkeychangeLegacy);
-
   const isVertical = $derived(orientation === 'vertical');
 
   const isObjectMode = $derived(items.length > 0 && typeof items.at(0) === 'object');

package/dist/Tabs/properties.d.ts

@@ -55,7 +55,5 @@ export type OptionalTabsProperties = {
 };
 export type TabsEventProperties = {
     onchange?: (index: number, label: string) => void;
-    onChange?: (index: number, label: string) => void;
     onkeychange?: (key: string) => void;
-    onKeyChange?: (key: string) => void;
 };

package/dist/TaskList/TaskList.svelte

@@ -4,10 +4,7 @@
   import Button from '../Button/Button.svelte';
   import type { TaskListProperties } from './properties';
 
-  let { rows, onretry: onretryLegacy, onRetry, testId, classes }: TaskListProperties = $props();
-
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onretry = $derived(onRetry ?? onretryLegacy);
+  let { rows, onretry, testId, classes }: TaskListProperties = $props();
 
   // Rows appended in one update stagger relative to the batch, not the list start —
   // mirrors ThinkingTrace's growthWatcher so a host that streams rows in gets the

package/dist/TaskList/properties.d.ts

@@ -19,7 +19,6 @@ export type MandatoryTaskListProperties = {
 export type OptionalTaskListProperties = {
     /** Fires when a failed row's retry button is clicked, with that row's index. */
     onretry?: (index: number) => void;
-    onRetry?: (index: number) => void;
     testId?: string;
     classes?: string;
 };

package/dist/ThemeSwitcher/ThemeSwitcher.svelte

@@ -30,13 +30,9 @@
     storageKey = 'theme-preference',
     testId,
     classes,
-    onchange: onchangeLegacy,
-    onChange
+    onchange
   }: ThemeSwitcherProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchange = $derived(onChange ?? onchangeLegacy);
-
   let currentValue: string = $state(value ?? 'system');
   let systemPreference: string = $state('light');
 

package/dist/ThemeSwitcher/properties.d.ts

@@ -16,5 +16,4 @@ export type OptionalThemeSwitcherProperties = {
 };
 export type ThemeSwitcherEventProperties = {
     onchange?: (value: string, resolvedValue: string) => void;
-    onChange?: (value: string, resolvedValue: string) => void;
 };

package/dist/ThinkingIndicator/ThinkingIndicator.svelte

@@ -12,7 +12,7 @@
     expanded = $bindable(false),
     variant = 'default',
     showElapsed = false,
-    onToggle,
+    ontoggle,
     avatar,
     toggleIcon,
     testId,
@@ -27,17 +27,11 @@
     moreLabel,
     selectable = false,
     selected = $bindable(null),
-    onrowselect: onrowselectLegacy,
-    onRowSelect,
-    onsettled: onsettledLegacy,
-    onSettled,
+    onrowselect,
+    onsettled,
     collapseDelayMs = 2600
   }: ThinkingIndicatorProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onrowselect = $derived(onRowSelect ?? onrowselectLegacy);
-  const onsettled = $derived(onSettled ?? onsettledLegacy);
-
   // `rows` being present at all (even `[]`) puts the indicator into trace mode: the
   // Accordion body renders the kind-aware trace instead of the `detail` paragraph,
   // and that alone is enough to make the indicator expandable.
@@ -68,7 +62,7 @@
   const handleToggle = (): void => {
     manuallyToggled = true;
     expanded = !expanded;
-    onToggle?.();
+    ontoggle?.();
   };
 
   // Elapsed counter: ticks while the label is live (see `labelIsBusy`); freezes at its

package/dist/ThinkingIndicator/properties.d.ts

@@ -43,7 +43,7 @@ export type OptionalThinkingIndicatorProperties = {
      * shape). No effect on the `bare` or `chip` variants.
      */
     showElapsed?: boolean;
-    onToggle?: () => void;
+    ontoggle?: () => void;
     /** Leading indicator. Falls back to the built-in `Loader` spinner. */
     avatar?: Snippet;
     /** Disclosure chevron. Falls back to a built-in chevron that rotates on expand. */
@@ -83,10 +83,8 @@ export type OptionalThinkingIndicatorProperties = {
     /** Bindable index of the selected coding row (`null` = none). */
     selected?: number | null;
     onrowselect?: (index: number | null) => void;
-    onRowSelect?: (index: number | null) => void;
     /** Fires exactly once, the moment `busy` flips false. No effect while `busy` is never set. */
     onsettled?: () => void;
-    onSettled?: () => void;
     /**
      * Delay (ms) before the automatic post-settle collapse fires once `busy` flips
      * false. `null` disables the automatic collapse. Has no effect while `busy` is

package/dist/Toast/Toast.svelte

@@ -22,7 +22,7 @@
     messageTestId,
     subTextTestId,
     closeIconTestId,
-    onToastHide,
+    ontoasthide,
     bottomContent,
     classes
   }: ToastProperties = $props();
@@ -40,7 +40,7 @@
   }
 
   function handleAnimationEnd() {
-    onToastHide?.();
+    ontoasthide?.();
   }
 
   function getAnimationConfig(

package/dist/Toast/properties.d.ts

@@ -24,6 +24,6 @@ export type OptionalToastProperties = {
     classes?: string;
 };
 export type ToastEventProperties = {
-    onToastHide?: () => void;
+    ontoasthide?: () => void;
 };
 export type ToastProperties = MandatoryToastProperties & OptionalToastProperties & ToastEventProperties;

package/dist/Toggle/Toggle.svelte

@@ -10,13 +10,9 @@
     id,
     ariaLabel,
     ariaLabelledby,
-    onclick: onclickLegacy,
-    onClick
+    onclick
   }: ToggleProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclick = $derived(onClick ?? onclickLegacy);
-
   // Stable across hydration so the hidden input stays named and text remains clickable.
   const generatedId = $props.id();
   const inputId = $derived(id?.trim() || `toggle-${generatedId}`);

package/dist/Toggle/properties.d.ts

@@ -22,5 +22,4 @@ export type OptionalToggleProperties = {
 };
 export type ToggleEventProperties = {
     onclick?: (checked: boolean) => void;
-    onClick?: (checked: boolean) => void;
 };

package/dist/ToolCallLog/ToolCallLog.svelte

@@ -6,16 +6,7 @@
   import { computeMenuDropdownPosition } from '../Menu/dropdownPosition';
   import type { ToolCallChip, ToolCallLogProperties } from './properties';
 
-  let {
-    chips,
-    onchipclick: onchipclickLegacy,
-    onChipClick,
-    testId,
-    classes
-  }: ToolCallLogProperties = $props();
-
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchipclick = $derived(onChipClick ?? onchipclickLegacy);
+  let { chips, onchipclick, testId, classes }: ToolCallLogProperties = $props();
 
   // Exactly one popover open at a time, component-local.
   let openIndex = $state<number | null>(null);

package/dist/ToolCallLog/properties.d.ts

@@ -22,7 +22,6 @@ export type MandatoryToolCallLogProperties = {
 };
 export type OptionalToolCallLogProperties = {
     onchipclick?: (index: number, chip: ToolCallChip) => void;
-    onChipClick?: (index: number, chip: ToolCallChip) => void;
     testId?: string;
     classes?: string;
 };

package/dist/Toolbar/Toolbar.svelte

@@ -11,16 +11,12 @@
     rightContent,
     additionalContent,
     classes,
-    onbackClick: onbackClickLegacy,
-    onBackClick,
+    onbackclick,
     onkeydown,
     testId,
     headingTestId
   }: ToolbarProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onbackClick = $derived(onBackClick ?? onbackClickLegacy);
-
   // `backIcon={null}` (or '') has always meant "render no back control at all", and consumers
   // rely on it; only the DEFAULT changes, from a CDN image to the inline icon.
   const showBackControl = $derived(showBackButton && backIcon !== null && backIcon !== '');
@@ -42,7 +38,7 @@
         type="button"
         class="back"
         aria-label={backAccessibleName}
-        onclick={onbackClick}
+        onclick={onbackclick}
         {onkeydown}
       >
         {#if typeof backIcon === 'string'}

package/dist/Toolbar/properties.d.ts

@@ -13,7 +13,6 @@ export type ToolbarProperties = ToolbarEventProperties & {
     headingTestId?: string;
 };
 export type ToolbarEventProperties = {
-    onbackClick?: () => void;
-    onBackClick?: () => void;
+    onbackclick?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/TypewriterText/TypewriterText.svelte

@@ -9,7 +9,7 @@
     renderText,
     variableDelay,
     resolveDelay,
-    onProgress,
+    onprogress,
     renderCharacter,
     testId,
     classes
@@ -87,7 +87,7 @@
       }
       displayedText = text.substring(0, currentIndex + 1);
       currentIndex++;
-      onProgress?.({ index: currentIndex, total: text.length, displayedText });
+      onprogress?.({ index: currentIndex, total: text.length, displayedText });
       timeoutId = setTimeout(
         typeNextCharacter,
         resolveTypingDelay(revealedCharacter, revealedCharacterIndex)
@@ -141,7 +141,7 @@
       currentIndex = text.length;
       revealedWordCount = countWhitespace(text);
       if (hadRemainingText) {
-        onProgress?.({ index: currentIndex, total: text.length, displayedText });
+        onprogress?.({ index: currentIndex, total: text.length, displayedText });
       }
     }
   });

package/dist/TypewriterText/properties.d.ts

@@ -105,7 +105,7 @@ export type OptionalTypewriterTextProperties = {
      * `false` while text remains, since the rest appears at once) — scroll a container to
      * follow the reveal, or show how far along it is. Not called when omitted.
      */
-    onProgress?: (progress: TypewriterProgress) => void;
+    onprogress?: (progress: TypewriterProgress) => void;
     /**
      * Render each revealed character yourself — highlight a token, wrap a number — instead
      * of the plain text node. Ignored when `renderText` is set, since that renderer already