@juspay/svelte-ui-components 3.1.6 → 3.2.1

package/dist/LottiePlayer/LottiePlayer.svelte

@@ -18,10 +18,16 @@
     ariaHidden = true,
     testId,
     classes,
-    oncomplete,
-    onerror
+    oncomplete: oncompleteLegacy,
+    onComplete,
+    onerror: onerrorLegacy,
+    onError
   }: LottiePlayerProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const oncomplete = $derived(onComplete ?? oncompleteLegacy);
+  const onerror = $derived(onError ?? onerrorLegacy);
+
   let containerEl: HTMLDivElement | null = $state(null);
   let animationItem: LocalAnimationItem | null = $state(null);
 

package/dist/LottiePlayer/properties.d.ts

@@ -31,6 +31,8 @@ export type OptionalLottiePlayerProperties = {
 export type LottiePlayerEventProperties = {
     /** Fired when the animation completes (non-looping). */
     oncomplete?: () => void;
+    onComplete?: () => void;
     /** Fired when the animation fails to load. */
     onerror?: () => void;
+    onError?: () => void;
 };

package/dist/MediaPlayer/MediaPlayer.svelte

@@ -26,11 +26,15 @@
     captionsSrcLang,
     onplay,
     onpause,
-    onvolumechange,
+    onvolumechange: onvolumechangeLegacy,
+    onVolumeChange,
     testId,
     classes
   }: MediaPlayerProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onvolumechange = $derived(onVolumeChange ?? onvolumechangeLegacy);
+
   let videoPlayer: HTMLVideoElement | null = $state(null);
 
   function togglePlayback(): void {

package/dist/MediaPlayer/properties.d.ts

@@ -31,4 +31,5 @@ export type MediaPlayerEventProperties = {
     onplay?: (event: Event) => void;
     onpause?: (event: Event) => void;
     onvolumechange?: (muted: boolean) => void;
+    onVolumeChange?: (muted: boolean) => void;
 };

package/dist/Menu/Menu.svelte

@@ -11,9 +11,12 @@
     testId,
     trigger,
     interactiveTrigger = false,
-    onselect,
-    onopen,
-    onclose,
+    onselect: onselectLegacy,
+    onSelect,
+    onopen: onopenLegacy,
+    onOpen,
+    onclose: oncloseLegacy,
+    onClose,
     classes,
     transformSvg,
     selectedValue = null,
@@ -25,6 +28,11 @@
     usePortal = false
   }: MenuProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onclose = $derived(onClose ?? oncloseLegacy);
+  const onopen = $derived(onOpen ?? onopenLegacy);
+  const onselect = $derived(onSelect ?? onselectLegacy);
+
   let itemRole = $derived(menuRole === 'listbox' ? 'option' : 'menuitem');
 
   let menuContainerEl: HTMLDivElement | null = $state(null);

package/dist/Menu/properties.d.ts

@@ -88,6 +88,9 @@ export type OptionalMenuProperties = {
 };
 export type MenuEventProperties = {
     onselect?: (item: MenuItem) => void;
+    onSelect?: (item: MenuItem) => void;
     onopen?: () => void;
+    onOpen?: () => void;
     onclose?: () => void;
+    onClose?: () => void;
 };

package/dist/Modal/Modal.svelte

@@ -26,12 +26,18 @@
     testId,
     content,
     footerSnippet,
-    onclose,
-    onheaderRightImageClick,
-    onheaderLeftImageClick,
-    onprimaryButtonClick,
-    onsecondaryButtonClick,
-    onoverlayClick,
+    onclose: oncloseLegacy,
+    onClose,
+    onheaderRightImageClick: onheaderRightImageClickLegacy,
+    onHeaderRightImageClick,
+    onheaderLeftImageClick: onheaderLeftImageClickLegacy,
+    onHeaderLeftImageClick,
+    onprimaryButtonClick: onprimaryButtonClickLegacy,
+    onPrimaryButtonClick,
+    onsecondaryButtonClick: onsecondaryButtonClickLegacy,
+    onSecondaryButtonClick,
+    onoverlayClick: onoverlayClickLegacy,
+    onOverlayClick,
     onkeydown,
     classes,
     overlayBackdropFilter,
@@ -41,6 +47,16 @@
     autoDismissAfter = null
   }: ModalProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onclose = $derived(onClose ?? oncloseLegacy);
+  const onheaderLeftImageClick = $derived(onHeaderLeftImageClick ?? onheaderLeftImageClickLegacy);
+  const onheaderRightImageClick = $derived(
+    onHeaderRightImageClick ?? onheaderRightImageClickLegacy
+  );
+  const onoverlayClick = $derived(onOverlayClick ?? onoverlayClickLegacy);
+  const onprimaryButtonClick = $derived(onPrimaryButtonClick ?? onprimaryButtonClickLegacy);
+  const onsecondaryButtonClick = $derived(onSecondaryButtonClick ?? onsecondaryButtonClickLegacy);
+
   let dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   // Fix [major]: plain const so the debouncer closure retains its internal lastCallTime state

package/dist/Modal/properties.d.ts

@@ -55,10 +55,16 @@ export type OptionalModalProperties = {
 };
 export type ModalEventProperties = {
     onclose?: () => void;
+    onClose?: () => void;
     onheaderRightImageClick?: (event: MouseEvent) => void;
+    onHeaderRightImageClick?: (event: MouseEvent) => void;
     onheaderLeftImageClick?: (event: MouseEvent) => void;
+    onHeaderLeftImageClick?: (event: MouseEvent) => void;
     onprimaryButtonClick?: (event: MouseEvent) => void;
+    onPrimaryButtonClick?: (event: MouseEvent) => void;
     onsecondaryButtonClick?: (event: MouseEvent) => void;
+    onSecondaryButtonClick?: (event: MouseEvent) => void;
     onoverlayClick?: () => void;
+    onOverlayClick?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/Pagination/Pagination.svelte

@@ -7,7 +7,8 @@
     siblingCount = 1,
     disabled = false,
     testId,
-    onchange,
+    onchange: onchangeLegacy,
+    onChange,
     classes,
     hasMore = false,
     prevButtonTestId,
@@ -15,6 +16,9 @@
     onLoadMore
   }: PaginationProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onchange = $derived(onChange ?? onchangeLegacy);
+
   function generatePages(total: number, current: number, siblings: number): (number | '...')[] {
     const pages: (number | '...')[] = [];
     pages.push(1);

package/dist/Pagination/properties.d.ts

@@ -24,6 +24,7 @@ export type OptionalPaginationProperties = {
 };
 export type PaginationEventProperties = {
     onchange?: (page: number) => void;
+    onChange?: (page: number) => void;
     /** Fired when the load-more CTA is clicked (cursor mode). */
     onLoadMore?: () => void;
 };

package/dist/PieChart/PieChart.svelte

@@ -34,8 +34,10 @@
     tooltipSnippet,
     center,
     empty,
-    onsliceclick,
-    onslicehover,
+    onsliceclick: onsliceclickLegacy,
+    onSliceClick,
+    onslicehover: onslicehoverLegacy,
+    onSliceHover,
     testId,
     classes,
     semiCircle = false,
@@ -47,6 +49,10 @@
     changeInvertColors = false
   }: PieChartProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onsliceclick = $derived(onSliceClick ?? onsliceclickLegacy);
+  const onslicehover = $derived(onSliceHover ?? onslicehoverLegacy);
+
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);

package/dist/PieChart/properties.d.ts

@@ -65,8 +65,16 @@ export type PieChartEventProperties = {
         index: number;
         slice: PieChartSlice;
     }) => void;
+    onSliceClick?: (event: {
+        index: number;
+        slice: PieChartSlice;
+    }) => void;
     onslicehover?: (event: {
         index: number;
         slice: PieChartSlice;
     } | null) => void;
+    onSliceHover?: (event: {
+        index: number;
+        slice: PieChartSlice;
+    } | null) => void;
 };

package/dist/Pill/Pill.svelte

@@ -12,10 +12,14 @@
     dismissIcon,
     leadingIcon,
     onclick,
-    ondismiss,
+    ondismiss: ondismissLegacy,
+    onDismiss,
     classes
   }: PillProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const ondismiss = $derived(onDismiss ?? ondismissLegacy);
+
   let interactive = $derived(typeof onclick === 'function');
 
   function handleClick(event: MouseEvent): void {

package/dist/Pill/properties.d.ts

@@ -21,4 +21,5 @@ export type OptionalPillProperties = {
 export type PillEventProperties = {
     onclick?: (event: MouseEvent) => void;
     ondismiss?: () => void;
+    onDismiss?: () => void;
 };

package/dist/Radio/Radio.svelte

@@ -8,10 +8,14 @@
     text = '',
     disabled = false,
     testId,
-    onchange,
+    onchange: onchangeLegacy,
+    onChange,
     classes
   }: RadioProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onchange = $derived(onChange ?? onchangeLegacy);
+
   let checked = $derived(selectedValue === value);
 
   function handleChange(): void {

package/dist/Radio/properties.d.ts

@@ -12,4 +12,5 @@ export type OptionalRadioProperties = {
 };
 export type RadioEventProperties = {
     onchange?: (value: string) => void;
+    onChange?: (value: string) => void;
 };

package/dist/Resizable/Resizable.svelte

@@ -13,13 +13,21 @@
     disabled = false,
     handleLabel = 'Resize',
     children,
-    onresize,
-    onresizestart,
-    onresizeend,
+    onresize: onresizeLegacy,
+    onResize,
+    onresizestart: onresizestartLegacy,
+    onResizeStart,
+    onresizeend: onresizeendLegacy,
+    onResizeEnd,
     testId,
     classes
   }: ResizableProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onresize = $derived(onResize ?? onresizeLegacy);
+  const onresizeend = $derived(onResizeEnd ?? onresizeendLegacy);
+  const onresizestart = $derived(onResizeStart ?? onresizestartLegacy);
+
   const DIRS: Record<ResizeEdge, { x: -1 | 0 | 1; y: -1 | 0 | 1 }> = {
     top: { x: 0, y: -1 },
     right: { x: 1, y: 0 },

package/dist/Resizable/properties.d.ts

@@ -22,6 +22,9 @@ export type OptionalResizableProperties = {
 };
 export type ResizableEventProperties = {
     onresize?: (size: ResizeSize) => void;
+    onResize?: (size: ResizeSize) => void;
     onresizestart?: (size: ResizeSize) => void;
+    onResizeStart?: (size: ResizeSize) => void;
     onresizeend?: (size: ResizeSize) => void;
+    onResizeEnd?: (size: ResizeSize) => void;
 };

package/dist/SankeyChart/SankeyChart.svelte

@@ -26,10 +26,14 @@
     valueFormat,
     tooltipSnippet,
     empty,
-    onnodeclick,
-    onlinkclick,
-    onnodehover,
-    onlinkhover,
+    onnodeclick: onnodeclickLegacy,
+    onNodeClick,
+    onlinkclick: onlinkclickLegacy,
+    onLinkClick,
+    onnodehover: onnodehoverLegacy,
+    onNodeHover,
+    onlinkhover: onlinkhoverLegacy,
+    onLinkHover,
     testId,
     classes,
     columnLabels,
@@ -42,6 +46,12 @@
     marginX = 40
   }: SankeyChartProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onlinkclick = $derived(onLinkClick ?? onlinkclickLegacy);
+  const onlinkhover = $derived(onLinkHover ?? onlinkhoverLegacy);
+  const onnodeclick = $derived(onNodeClick ?? onnodeclickLegacy);
+  const onnodehover = $derived(onNodeHover ?? onnodehoverLegacy);
+
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);

package/dist/SankeyChart/properties.d.ts

@@ -112,13 +112,25 @@ export type SankeyChartEventProperties = {
     onnodeclick?: (event: {
         node: SankeyNode;
     }) => void;
+    onNodeClick?: (event: {
+        node: SankeyNode;
+    }) => void;
     onlinkclick?: (event: {
         link: SankeyLink;
     }) => void;
+    onLinkClick?: (event: {
+        link: SankeyLink;
+    }) => void;
     onnodehover?: (event: {
         node: SankeyNode;
     } | null) => void;
+    onNodeHover?: (event: {
+        node: SankeyNode;
+    } | null) => void;
     onlinkhover?: (event: {
         link: SankeyLink;
     } | null) => void;
+    onLinkHover?: (event: {
+        link: SankeyLink;
+    } | null) => void;
 };

package/dist/Scroller/Scroller.svelte

@@ -21,10 +21,14 @@
     testId,
     arrowPrevious,
     arrowNext,
-    onscrollposition,
+    onscrollposition: onscrollpositionLegacy,
+    onScrollPosition,
     classes
   }: ScrollerProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onscrollposition = $derived(onScrollPosition ?? onscrollpositionLegacy);
+
   let containerEl: HTMLDivElement | null = $state(null);
   let canScrollPrev = $state(false);
   let canScrollNext = $state(false);

package/dist/Scroller/properties.d.ts

@@ -27,4 +27,5 @@ export type OptionalScrollerProperties = {
 };
 export type ScrollerEventProperties = {
     onscrollposition?: (position: ScrollPosition) => void;
+    onScrollPosition?: (position: ScrollPosition) => void;
 };

package/dist/Select/Select.svelte

@@ -22,9 +22,12 @@
     triggerSummary,
     testId,
     itemTestId,
-    onchange,
-    onopen,
-    onclose,
+    onchange: onchangeLegacy,
+    onChange,
+    onopen: onopenLegacy,
+    onOpen,
+    onclose: oncloseLegacy,
+    onClose,
     classes,
     open = $bindable(false),
     dropdownAlign = 'left',
@@ -34,6 +37,11 @@
     usePortal = false
   }: SelectProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onchange = $derived(onChange ?? onchangeLegacy);
+  const onclose = $derived(onClose ?? oncloseLegacy);
+  const onopen = $derived(onOpen ?? onopenLegacy);
+
   function normalizeItems(source: SelectItem[] | string[]): SelectItem[] {
     return source.map((entry) => (typeof entry === 'string' ? { id: entry, label: entry } : entry));
   }

package/dist/Select/properties.d.ts

@@ -97,6 +97,9 @@ export type OptionalSelectProperties = {
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;
+    onChange?: (value: string[]) => void;
     onopen?: () => void;
+    onOpen?: () => void;
     onclose?: () => void;
+    onClose?: () => void;
 };

package/dist/Sheet/Sheet.svelte

@@ -15,12 +15,20 @@
     testId,
     content,
     footer,
-    onclose,
-    onafteropen,
-    onafterclose,
+    onclose: oncloseLegacy,
+    onClose,
+    onafteropen: onafteropenLegacy,
+    onAfterOpen,
+    onafterclose: onaftercloseLegacy,
+    onAfterClose,
     classes
   }: SheetProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onafterclose = $derived(onAfterClose ?? onaftercloseLegacy);
+  const onafteropen = $derived(onAfterOpen ?? onafteropenLegacy);
+  const onclose = $derived(onClose ?? oncloseLegacy);
+
   let overlayDiv: HTMLDivElement | null = $state(null);
   let sheetPanel: HTMLDivElement | null = $state(null);
 

package/dist/Sheet/properties.d.ts

@@ -24,8 +24,11 @@ export type OptionalSheetProperties = {
 };
 export type SheetEventProperties = {
     onclose?: () => void;
+    onClose?: () => void;
     /** Called once after the open transition has fully completed. */
     onafteropen?: () => void;
+    onAfterOpen?: () => void;
     /** Called once after the close transition has fully completed. */
     onafterclose?: () => void;
+    onAfterClose?: () => void;
 };

package/dist/Slider/Slider.svelte

@@ -10,11 +10,17 @@
     showValue = false,
     labelFormatter,
     testId,
-    onchange,
-    oninput,
+    onchange: onchangeLegacy,
+    onChange,
+    oninput: oninputLegacy,
+    onInput,
     classes
   }: SliderProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onchange = $derived(onChange ?? onchangeLegacy);
+  const oninput = $derived(onInput ?? oninputLegacy);
+
   let percentage = $derived(((value - min) / (max - min)) * 100);
   let displayValue = $derived(labelFormatter ? labelFormatter(value) : String(value));
 

package/dist/Slider/properties.d.ts

@@ -14,5 +14,7 @@ export type OptionalSliderProperties = {
 };
 export type SliderEventProperties = {
     onchange?: (value: number) => void;
+    onChange?: (value: number) => void;
     oninput?: (value: number) => void;
+    onInput?: (value: number) => void;
 };

package/dist/Snippet/Snippet.svelte

@@ -9,10 +9,14 @@
     showCopyButton = true,
     testId,
     copyIcon,
-    oncopy,
+    oncopy: oncopyLegacy,
+    onCopy,
     classes
   }: SnippetProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const oncopy = $derived(onCopy ?? oncopyLegacy);
+
   let copied = $state(false);
 
   async function handleCopy() {

package/dist/Snippet/properties.d.ts

@@ -12,4 +12,5 @@ export type OptionalSnippetProperties = {
 };
 export type SnippetEventProperties = {
     oncopy?: () => void;
+    onCopy?: () => void;
 };

package/dist/SplitButton/SplitButton.svelte

@@ -13,9 +13,13 @@
     dropdownIcon,
     classes,
     onclick,
-    onselect
+    onselect: onselectLegacy,
+    onSelect
   }: SplitButtonProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onselect = $derived(onSelect ?? onselectLegacy);
+
   let menuOpen = $state(false);
 
   function handlePrimaryClick(event: MouseEvent): void {

package/dist/SplitButton/properties.d.ts

@@ -14,4 +14,5 @@ export type OptionalSplitButtonProperties = {
 export type SplitButtonEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onselect?: (item: MenuItem) => void;
+    onSelect?: (item: MenuItem) => void;
 };

package/dist/SplitInput/SplitInput.svelte

@@ -12,11 +12,19 @@
     separator,
     testId,
     classes,
-    onchange,
-    oninput,
-    oncomplete
+    onchange: onchangeLegacy,
+    onChange,
+    oninput: oninputLegacy,
+    onInput,
+    oncomplete: oncompleteLegacy,
+    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(

package/dist/SplitInput/properties.d.ts

@@ -15,6 +15,9 @@ 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/Status/Status.svelte

@@ -33,7 +33,8 @@
     statusDescription = '',
     buttonProperties,
     classes,
-    onbuttonClick,
+    onbuttonClick: onbuttonClickLegacy,
+    onButtonClick,
     icon,
     descriptionSnippet,
     children,
@@ -45,6 +46,9 @@
   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

package/dist/Status/properties.d.ts

@@ -56,4 +56,5 @@ export type StatusProperties = StatusEventProperties & {
 };
 export type StatusEventProperties = {
     onbuttonClick?: () => void;
+    onButtonClick?: () => void;
 };

package/dist/Stepper/Stepper.svelte

@@ -10,10 +10,16 @@
     testId,
     suppressRoleAndTabindex,
     suppressContainerTestId,
-    onstepclick,
-    onhandleStepClick
+    onstepclick: onstepclickLegacy,
+    onStepClick,
+    onhandleStepClick: onhandleStepClickLegacy,
+    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;

package/dist/Stepper/properties.d.ts

@@ -55,10 +55,16 @@ export type StepperEventProperties = {
     onstepclick?: (event: {
         selectedIndex: number;
     }) => void;
+    onStepClick?: (event: {
+        selectedIndex: number;
+    }) => void;
     /** @deprecated Use `onstepclick` instead. */
     onhandleStepClick?: (event: {
         selectedIndex: number;
     }) => void;
+    onHandleStepClick?: (event: {
+        selectedIndex: number;
+    }) => void;
 };
 export type StepperProperties = MandatoryStepperProperties & OptionalStepperProperties & StepperEventProperties;
 export type OptionalStepProperties = {
@@ -78,6 +84,9 @@ export type StepEventProperties = {
     onclick?: (event: {
         selectedIndex: number;
     }) => void;
+    onClick?: (event: {
+        selectedIndex: number;
+    }) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };
 export type StepProperties = OptionalStepProperties & StepEventProperties & {