@juspay/svelte-ui-components 3.1.6 → 3.2.0

package/dist/Choicebox/Choicebox.svelte

@@ -9,10 +9,14 @@
     disabled = false,
     showIndicator = true,
     testId,
-    onclick,
+    onclick: onclickLegacy,
+    onClick,
     classes
   }: ChoiceboxProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onclick = $derived(onClick ?? onclickLegacy);
+
   function handleClick(): void {
     if (disabled) {
       return;

package/dist/Choicebox/properties.d.ts

@@ -12,4 +12,5 @@ export type OptionalChoiceboxProperties = {
 };
 export type ChoiceboxEventProperties = {
     onclick?: (selected: boolean) => void;
+    onClick?: (selected: boolean) => void;
 };

package/dist/ColorPicker/ColorPicker.svelte

@@ -22,11 +22,17 @@
     disabled = false,
     showValue = false,
     testId,
-    onchange,
-    oninput,
+    onchange: onchangeLegacy,
+    onChange,
+    oninput: oninputLegacy,
+    onInput,
     classes
   }: ColorPickerProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onchange = $derived(onChange ?? onchangeLegacy);
+  const oninput = $derived(onInput ?? oninputLegacy);
+
   // ── Internal state ──────────────────────────────────────────────
 
   let open = $state(false);

package/dist/ColorPicker/properties.d.ts

@@ -11,5 +11,7 @@ export type OptionalColorPickerProperties = {
 };
 export type ColorPickerEventProperties = {
     onchange?: (value: string) => void;
+    onChange?: (value: string) => void;
     oninput?: (value: string) => void;
+    onInput?: (value: string) => void;
 };

package/dist/Combobox/Combobox.svelte

@@ -40,19 +40,37 @@
     createLabel = (query: string) => `Create "${query}"`,
     action,
     actionIcon,
-    onselect,
-    oninput,
-    onopen,
-    onclose,
+    onselect: onselectLegacy,
+    onSelect,
+    oninput: oninputLegacy,
+    onInput,
+    onopen: onopenLegacy,
+    onOpen,
+    onclose: oncloseLegacy,
+    onClose,
     onkeydown,
     onfocus,
     onblur,
-    onchange,
-    onadd,
-    onremove,
-    oncreate
+    onchange: onchangeLegacy,
+    onChange,
+    onadd: onaddLegacy,
+    onAdd,
+    onremove: onremoveLegacy,
+    onRemove,
+    oncreate: oncreateLegacy,
+    onCreate
   }: ComboboxProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onadd = $derived(onAdd ?? onaddLegacy);
+  const onchange = $derived(onChange ?? onchangeLegacy);
+  const onclose = $derived(onClose ?? oncloseLegacy);
+  const oncreate = $derived(onCreate ?? oncreateLegacy);
+  const oninput = $derived(onInput ?? oninputLegacy);
+  const onopen = $derived(onOpen ?? onopenLegacy);
+  const onremove = $derived(onRemove ?? onremoveLegacy);
+  const onselect = $derived(onSelect ?? onselectLegacy);
+
   let containerEl: HTMLDivElement | null = $state(null);
   let inputRef: ReturnType<typeof Input> | null = $state(null);
 

package/dist/Combobox/properties.d.ts

@@ -61,18 +61,26 @@ export type OptionalComboboxProperties = {
 };
 export type ComboboxEventProperties = {
     onselect?: (item: ComboboxItem) => void;
+    onSelect?: (item: ComboboxItem) => void;
     oninput?: (value: string) => void;
+    onInput?: (value: string) => void;
     onopen?: () => void;
+    onOpen?: () => void;
     onclose?: () => void;
+    onClose?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     /** Multi-select: fires whenever the selection changes (add, remove, or create). */
     onchange?: (selected: string[]) => void;
+    onChange?: (selected: string[]) => void;
     /** Multi-select: fires when a value is added. */
     onadd?: (value: string) => void;
+    onAdd?: (value: string) => void;
     /** Multi-select: fires when a value is removed. */
     onremove?: (value: string) => void;
+    onRemove?: (value: string) => void;
     /** Fires when the create row is chosen, with the trimmed query. */
     oncreate?: (value: string) => void;
+    onCreate?: (value: string) => void;
 };

package/dist/CommandMenu/CommandMenu.svelte

@@ -14,11 +14,17 @@
     testId,
     itemIcon,
     searchIcon,
-    onselect,
-    onclose,
+    onselect: onselectLegacy,
+    onSelect,
+    onclose: oncloseLegacy,
+    onClose,
     classes
   }: CommandMenuProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onclose = $derived(onClose ?? oncloseLegacy);
+  const onselect = $derived(onSelect ?? onselectLegacy);
+
   let query = $state('');
   let activeIndex = $state(0);
   let inputElement: HTMLInputElement | null = $state(null);

package/dist/CommandMenu/properties.d.ts

@@ -22,5 +22,7 @@ export type OptionalCommandMenuProperties = {
 };
 export type CommandMenuEventProperties = {
     onselect?: (item: CommandItem) => void;
+    onSelect?: (item: CommandItem) => void;
     onclose?: () => void;
+    onClose?: () => void;
 };

package/dist/ContextMenu/ContextMenu.svelte

@@ -8,12 +8,20 @@
     maxHeight = '240px',
     testId,
     children,
-    onselect,
-    onopen,
-    onclose,
+    onselect: onselectLegacy,
+    onSelect,
+    onopen: onopenLegacy,
+    onOpen,
+    onclose: oncloseLegacy,
+    onClose,
     classes
   }: ContextMenuProperties = $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 menuEl: HTMLDivElement | null = $state(null);
   let containerEl: HTMLDivElement | null = $state(null);
   let focusedIndex: number = $state(-1);

package/dist/ContextMenu/properties.d.ts

@@ -21,6 +21,9 @@ export type OptionalContextMenuProperties = {
 };
 export type ContextMenuEventProperties = {
     onselect?: (item: ContextMenuItem) => void;
+    onSelect?: (item: ContextMenuItem) => void;
     onopen?: () => void;
+    onOpen?: () => void;
     onclose?: () => void;
+    onClose?: () => void;
 };

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -54,14 +54,28 @@
     initialPresetLabel,
     compareTrigger,
     openCompare = $bindable(false),
-    onapply,
-    onapplysingle,
-    onapplycompare,
-    oncancel,
-    onopentoggle,
-    onclear
+    onapply: onapplyLegacy,
+    onApply,
+    onapplysingle: onapplysingleLegacy,
+    onApplySingle,
+    onapplycompare: onapplycompareLegacy,
+    onApplyCompare,
+    oncancel: oncancelLegacy,
+    onCancel,
+    onopentoggle: onopentoggleLegacy,
+    onOpenToggle,
+    onclear: onclearLegacy,
+    onClear
   }: DateRangePickerProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onapply = $derived(onApply ?? onapplyLegacy);
+  const onapplycompare = $derived(onApplyCompare ?? onapplycompareLegacy);
+  const onapplysingle = $derived(onApplySingle ?? onapplysingleLegacy);
+  const oncancel = $derived(onCancel ?? oncancelLegacy);
+  const onclear = $derived(onClear ?? onclearLegacy);
+  const onopentoggle = $derived(onOpenToggle ?? onopentoggleLegacy);
+
   const isDualMonth: boolean = $derived(
     typeof dualMonth === 'boolean' ? dualMonth : mode === 'range'
   );

package/dist/DateRangePicker/properties.d.ts

@@ -138,27 +138,46 @@ export type DateRangePickerEventProperties = {
         rangeEnd: Date;
         presetLabel: string | null;
     }) => void;
+    onApply?: (event: {
+        rangeStart: Date;
+        rangeEnd: Date;
+        presetLabel: string | null;
+    }) => void;
     /** Fired when the user clicks Apply in single mode. presetLabel is the sidebar preset name if one was active, or null for a custom calendar selection. */
     onapplysingle?: (event: {
         date: Date;
         presetLabel: string | null;
     }) => void;
+    onApplySingle?: (event: {
+        date: Date;
+        presetLabel: string | null;
+    }) => void;
     /** Fired when the compare range is applied. presetLabel is the sidebar preset name if one was active, or null for a custom calendar selection. */
     onapplycompare?: (event: {
         compareStart: Date;
         compareEnd: Date;
         presetLabel: string | null;
     }) => void;
+    onApplyCompare?: (event: {
+        compareStart: Date;
+        compareEnd: Date;
+        presetLabel: string | null;
+    }) => void;
     /** Fired when the user dismisses without applying. */
     oncancel?: () => void;
+    onCancel?: () => void;
     /** Fired whenever the picker opens or closes. */
     onopentoggle?: (event: {
         open: boolean;
     }) => void;
+    onOpenToggle?: (event: {
+        open: boolean;
+    }) => void;
     /**
      * Fired when the user clicks the Clear button in single mode (requires clearable=true).
      * value is reset to null before this callback is invoked.
      */
     onclear?: () => void;
+    onClear?: () => void;
 };
 export type DateRangePickerProperties = OptionalDateRangePickerProperties & DateRangePickerEventProperties;

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -53,11 +53,15 @@
     interactiveLegend = false,
     hideLegendBelow = 360,
     tooltipSnippet,
-    onbarclick,
+    onbarclick: onbarclickLegacy,
+    onBarClick,
     testId,
     classes
   }: DualAxisBarChartProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onbarclick = $derived(onBarClick ?? onbarclickLegacy);
+
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);

package/dist/DualAxisBarChart/properties.d.ts

@@ -147,4 +147,8 @@ export type DualAxisBarChartEventProperties = {
         categoryIndex: number;
         context: DualAxisTooltipContext;
     }) => void;
+    onBarClick?: (event: {
+        categoryIndex: number;
+        context: DualAxisTooltipContext;
+    }) => void;
 };

package/dist/FileDropzoneTrigger/FileDropzoneTrigger.svelte

@@ -8,10 +8,14 @@
     heading,
     caption,
     compact = false,
-    onclick,
+    onclick: onclickLegacy,
+    onClick,
     testId,
     classes
   }: FileDropzoneTriggerProperties = $props();
+
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onclick = $derived(onClick ?? onclickLegacy);
 </script>
 
 {#if compact}

package/dist/FileDropzoneTrigger/properties.d.ts

@@ -21,4 +21,5 @@ export type OptionalFileDropzoneTriggerProperties = {
 export type FileDropzoneTriggerEventProperties = {
     /** Wire to `FileInput`'s `openFilePicker`. Non-compact only — compact relies on `FileInput`'s own whole-area click/drop handling. */
     onclick?: () => void;
+    onClick?: () => void;
 };

package/dist/FileInput/FileInput.svelte

@@ -9,10 +9,16 @@
     disabled = false,
     testId,
     classes,
-    onfiles,
-    onerror
+    onfiles: onfilesLegacy,
+    onFiles,
+    onerror: onerrorLegacy,
+    onError
   }: FileInputProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onerror = $derived(onError ?? onerrorLegacy);
+  const onfiles = $derived(onFiles ?? onfilesLegacy);
+
   let dragOver = $state(false);
   let inputEl: HTMLInputElement | null = $state(null);
   let pickerBusy = false;

package/dist/FileInput/properties.d.ts

@@ -14,5 +14,7 @@ export type FileInputProperties = {
     testId?: string;
     classes?: string;
     onfiles?: (files: File[]) => void;
+    onFiles?: (files: File[]) => void;
     onerror?: (message: string) => void;
+    onError?: (message: string) => void;
 };

package/dist/FunnelChart/FunnelChart.svelte

@@ -28,10 +28,16 @@
     testId,
     classes,
     empty,
-    onstageclick,
-    onstagehover
+    onstageclick: onstageclickLegacy,
+    onStageClick,
+    onstagehover: onstagehoverLegacy,
+    onStageHover
   }: FunnelChartProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onstageclick = $derived(onStageClick ?? onstageclickLegacy);
+  const onstagehover = $derived(onStageHover ?? onstagehoverLegacy);
+
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);

package/dist/FunnelChart/properties.d.ts

@@ -78,9 +78,17 @@ export type FunnelChartEventProperties = {
         index: number;
         stage: FunnelStage;
     }) => void;
+    onStageClick?: (event: {
+        index: number;
+        stage: FunnelStage;
+    }) => void;
     /** Fires when the user hovers over or leaves a stage bar. `null` on leave. */
     onstagehover?: (event: {
         index: number;
         stage: FunnelStage;
     } | null) => void;
+    onStageHover?: (event: {
+        index: number;
+        stage: FunnelStage;
+    } | null) => void;
 };

package/dist/Img/Img.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
   import type { ImgProperties } from './properties';
 
-  let { src, alt, fallback, onerror, classes, inlineSvg, transformSvg, testId }: ImgProperties =
-    $props();
+  let {
+    src,
+    alt,
+    fallback,
+    onerror: onerrorLegacy,
+    onError,
+    classes,
+    inlineSvg,
+    transformSvg,
+    testId
+  }: ImgProperties = $props();
+
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onerror = $derived(onError ?? onerrorLegacy);
 
   let currentSrc = $derived(src);
   // Per-source failure marker: when inlining a given URL fails we fall back to

package/dist/Img/properties.d.ts

@@ -26,4 +26,5 @@ export type OptionalImgProperties = {
 };
 export type ImgEventProperties = {
     onerror?: () => void;
+    onError?: () => void;
 };

package/dist/Input/Input.svelte

@@ -30,14 +30,21 @@
     testId = '',
     textTransformers = [],
     textViewPresentation = [],
-    onFocus = () => {},
-    onFocusout = () => {},
-    onBlur = () => {},
-    onInput = () => {},
-    onPaste = () => {},
+    onFocus: onFocusLegacy = () => {},
+    onfocus,
+    onFocusout: onFocusoutLegacy = () => {},
+    onfocusout,
+    onBlur: onBlurLegacy = () => {},
+    onblur,
+    onInput: onInputLegacy = () => {},
+    oninput,
+    onPaste: onPasteLegacy = () => {},
+    onpaste,
     onStateChange = () => {},
-    onClick = () => {},
-    onKeyDown = () => {},
+    onClick: onClickLegacy = () => {},
+    onclick,
+    onKeyDown: onKeyDownLegacy = () => {},
+    onkeydown,
     classes,
     role,
     ariaLabel,
@@ -61,6 +68,15 @@
     showCount = false
   }: InputProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onBlur = $derived(onblur ?? onBlurLegacy);
+  const onClick = $derived(onclick ?? onClickLegacy);
+  const onFocus = $derived(onfocus ?? onFocusLegacy);
+  const onFocusout = $derived(onfocusout ?? onFocusoutLegacy);
+  const onInput = $derived(oninput ?? onInputLegacy);
+  const onKeyDown = $derived(onkeydown ?? onKeyDownLegacy);
+  const onPaste = $derived(onpaste ?? onPasteLegacy);
+
   /* `for` on a <label> resolves against an element's id, never its name. The label
      was emitted with for={name} while the field itself carried only name={name},
      so the association never completed for any caller. Derive the id from name so

package/dist/Input/properties.d.ts

@@ -101,11 +101,18 @@ export type OptionalInputProperties = {
 };
 export type InputEventProperties = {
     onInput?: (value: string, event: Event) => void;
+    oninput?: (value: string, event: Event) => void;
     onFocus?: (event: FocusEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
     onFocusout?: (event: FocusEvent) => void;
+    onfocusout?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
     onPaste?: (event: ClipboardEvent) => void;
+    onpaste?: (event: ClipboardEvent) => void;
     onClick?: (event: MouseEvent) => void;
+    onclick?: (event: MouseEvent) => void;
     onStateChange?: (state: ValidationState) => void;
     onKeyDown?: (event: KeyboardEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/LineChart/LineChart.svelte

@@ -60,12 +60,18 @@
     tooltipPortal = false,
     highlightedIndex = null,
     onChartReady,
-    onpointclick,
-    onpointhover,
+    onpointclick: onpointclickLegacy,
+    onPointClick,
+    onpointhover: onpointhoverLegacy,
+    onPointHover,
     testId,
     classes
   }: LineChartProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onpointclick = $derived(onPointClick ?? onpointclickLegacy);
+  const onpointhover = $derived(onPointHover ?? onpointhoverLegacy);
+
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);

package/dist/LineChart/properties.d.ts

@@ -142,11 +142,21 @@ export type LineChartEventProperties = {
         pointIndex: number;
         point: LineChartDataPoint;
     }) => void;
+    onPointClick?: (event: {
+        seriesIndex: number;
+        pointIndex: number;
+        point: LineChartDataPoint;
+    }) => void;
     onpointhover?: (event: {
         seriesIndex: number;
         pointIndex: number;
         point: LineChartDataPoint;
     } | null) => void;
+    onPointHover?: (event: {
+        seriesIndex: number;
+        pointIndex: number;
+        point: LineChartDataPoint;
+    } | null) => void;
     /**
      * Called once after the chart mounts, handing back a `ChartHighlightAPI`
      * so an external orchestrator (e.g. voice narration sync) can drive point

package/dist/ListItem/ListItem.svelte

@@ -25,11 +25,16 @@
     centerContent,
     rightContent,
     bottomContent,
-    onleftImageClick,
-    onrightImageClick,
-    oncenterTextClick,
-    onitemClick,
-    ontopSectionClick,
+    onleftImageClick: onleftImageClickLegacy,
+    onLeftImageClick,
+    onrightImageClick: onrightImageClickLegacy,
+    onRightImageClick,
+    oncenterTextClick: oncenterTextClickLegacy,
+    onCenterTextClick,
+    onitemClick: onitemClickLegacy,
+    onItemClick,
+    ontopSectionClick: ontopSectionClickLegacy,
+    onTopSectionClick,
     onkeydown,
     classes,
     transformSvg,
@@ -38,6 +43,13 @@
     id
   }: ListItemProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const oncenterTextClick = $derived(onCenterTextClick ?? oncenterTextClickLegacy);
+  const onitemClick = $derived(onItemClick ?? onitemClickLegacy);
+  const onleftImageClick = $derived(onLeftImageClick ?? onleftImageClickLegacy);
+  const onrightImageClick = $derived(onRightImageClick ?? onrightImageClickLegacy);
+  const ontopSectionClick = $derived(onTopSectionClick ?? ontopSectionClickLegacy);
+
   function handleLeftImageClick(event: MouseEvent): void {
     onleftImageClick?.(event);
   }

package/dist/ListItem/properties.d.ts

@@ -33,9 +33,14 @@ export type ListItemProperties = ListItemEventProperties & {
 };
 export type ListItemEventProperties = {
     onleftImageClick?: (event: MouseEvent) => void;
+    onLeftImageClick?: (event: MouseEvent) => void;
     onrightImageClick?: (event: MouseEvent) => void;
+    onRightImageClick?: (event: MouseEvent) => void;
     oncenterTextClick?: (event: MouseEvent) => void;
+    onCenterTextClick?: (event: MouseEvent) => void;
     onitemClick?: (event: MouseEvent) => void;
+    onItemClick?: (event: MouseEvent) => void;
     ontopSectionClick?: (event: MouseEvent) => void;
+    onTopSectionClick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

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;
 };