@juspay/svelte-ui-components 3.1.6 → 3.2.1

package/dist/Tabs/Tabs.svelte

@@ -18,10 +18,16 @@
     scrollRightIcon,
     tab,
     classes,
-    onchange,
-    onkeychange
+    onchange: onchangeLegacy,
+    onChange,
+    onkeychange: onkeychangeLegacy,
+    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,5 +55,7 @@ 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,7 +4,10 @@
   import Button from '../Button/Button.svelte';
   import type { TaskListProperties } from './properties';
 
-  let { rows, onretry, testId, classes }: TaskListProperties = $props();
+  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);
 
   // 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,6 +19,7 @@ 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,9 +30,13 @@
     storageKey = 'theme-preference',
     testId,
     classes,
-    onchange
+    onchange: onchangeLegacy,
+    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');
 
@@ -179,6 +183,10 @@
     background-color: var(--theme-switcher-bg-hover, #f3f4f6);
   }
 
+  .toggle-button:active {
+    background-color: var(--theme-switcher-bg-pressed, #e5e7eb);
+  }
+
   .icon {
     display: inline-flex;
     align-items: center;

package/dist/ThemeSwitcher/properties.d.ts

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

package/dist/ThinkingIndicator/ThinkingIndicator.svelte

@@ -27,11 +27,17 @@
     moreLabel,
     selectable = false,
     selected = $bindable(null),
-    onrowselect,
-    onsettled,
+    onrowselect: onrowselectLegacy,
+    onRowSelect,
+    onsettled: onsettledLegacy,
+    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.

package/dist/ThinkingIndicator/properties.d.ts

@@ -83,8 +83,10 @@ 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/Toggle/Toggle.svelte

@@ -7,9 +7,13 @@
     disabled = false,
     testId,
     classes,
-    onclick
+    onclick: onclickLegacy,
+    onClick
   }: ToggleProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onclick = $derived(onClick ?? onclickLegacy);
+
   const handleCheckboxClick = (e: MouseEvent): void => {
     if (e.target instanceof HTMLInputElement && typeof e.target.checked === 'boolean') {
       checked = e.target.checked;

package/dist/Toggle/properties.d.ts

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

package/dist/ToolCallLog/ToolCallLog.svelte

@@ -6,7 +6,16 @@
   import { computeMenuDropdownPosition } from '../Menu/dropdownPosition';
   import type { ToolCallChip, ToolCallLogProperties } from './properties';
 
-  let { chips, onchipclick, testId, classes }: ToolCallLogProperties = $props();
+  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);
 
   // Exactly one popover open at a time, component-local.
   let openIndex = $state<number | null>(null);

package/dist/ToolCallLog/properties.d.ts

@@ -22,6 +22,7 @@ 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,12 +11,16 @@
     rightContent,
     additionalContent,
     classes,
-    onbackClick,
+    onbackClick: onbackClickLegacy,
+    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 !== '');

package/dist/Toolbar/properties.d.ts

@@ -14,5 +14,6 @@ export type ToolbarProperties = ToolbarEventProperties & {
 };
 export type ToolbarEventProperties = {
     onbackClick?: () => void;
+    onBackClick?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };