@juspay/svelte-ui-components 3.1.5 → 3.2.0

package/dist/Accordion/Accordion.svelte

@@ -5,7 +5,8 @@
     expand = $bindable(false),
     children,
     trigger,
-    ontoggle,
+    ontoggle: ontoggleLegacy,
+    onToggle,
     triggerClasses,
     classes,
     testId,
@@ -13,6 +14,9 @@
     panelId
   }: AccordionProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const ontoggle = $derived(onToggle ?? ontoggleLegacy);
+
   /* The trigger and the panel are siblings, not ancestor/descendant, so nothing in the
      markup tells assistive technology which region the trigger's aria-expanded refers to.
      A generated id keeps that link automatic -- consumers pass no id and get correct

package/dist/Accordion/properties.d.ts

@@ -27,4 +27,5 @@ export type OptionalAccordionProperties = {
 };
 export type AccordionEventProperties = {
     ontoggle?: (expanded: boolean) => void;
+    onToggle?: (expanded: boolean) => void;
 };

package/dist/AreaChart/AreaChart.svelte

@@ -51,12 +51,18 @@
     tooltipSnippet,
     empty,
     tooltipPortal = false,
-    onpointhover,
-    onpointclick,
+    onpointhover: onpointhoverLegacy,
+    onPointHover,
+    onpointclick: onpointclickLegacy,
+    onPointClick,
     testId,
     classes
   }: AreaChartProperties = $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/AreaChart/properties.d.ts

@@ -61,9 +61,19 @@ export type AreaChartEventProperties = {
         pointIndex: number;
         point: AreaChartDataPoint;
     } | null) => void;
+    onPointHover?: (event: {
+        seriesIndex: number;
+        pointIndex: number;
+        point: AreaChartDataPoint;
+    } | null) => void;
     onpointclick?: (event: {
         seriesIndex: number;
         pointIndex: number;
         point: AreaChartDataPoint;
     }) => void;
+    onPointClick?: (event: {
+        seriesIndex: number;
+        pointIndex: number;
+        point: AreaChartDataPoint;
+    }) => void;
 };

package/dist/Banner/Banner.svelte

@@ -14,12 +14,16 @@
     rightContent,
     dismissIcon,
     onclick,
-    ondismiss,
+    ondismiss: ondismissLegacy,
+    onDismiss,
     classes,
     title,
     role = null
   }: BannerProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const ondismiss = $derived(onDismiss ?? ondismissLegacy);
+
   let interactive = $derived(typeof onclick === 'function');
 
   let rootClass = $derived(['banner', classes ?? ''].filter((c) => c.length > 0).join(' '));

package/dist/Banner/properties.d.ts

@@ -18,4 +18,5 @@ export type OptionalBannerProperties = {
 export type BannerEventProperties = {
     onclick?: (event: MouseEvent) => void;
     ondismiss?: () => void;
+    onDismiss?: () => void;
 };

package/dist/BarChart/BarChart.svelte

@@ -91,12 +91,18 @@
     interactiveLegend = false,
     hideLegendBelow = 360,
     tooltipPortal = false,
-    onbarclick,
-    onbarhover,
+    onbarclick: onbarclickLegacy,
+    onBarClick,
+    onbarhover: onbarhoverLegacy,
+    onBarHover,
     testId,
     classes
   }: BarChartProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onbarclick = $derived(onBarClick ?? onbarclickLegacy);
+  const onbarhover = $derived(onBarHover ?? onbarhoverLegacy);
+
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);

package/dist/BarChart/properties.d.ts

@@ -231,8 +231,16 @@ export type BarChartEventProperties = {
         index: number;
         dataPoint: BarChartDataPoint;
     }) => void;
+    onBarClick?: (event: {
+        index: number;
+        dataPoint: BarChartDataPoint;
+    }) => void;
     onbarhover?: (event: {
         index: number;
         dataPoint: BarChartDataPoint;
     } | null) => void;
+    onBarHover?: (event: {
+        index: number;
+        dataPoint: BarChartDataPoint;
+    } | null) => void;
 };

package/dist/Book/Book.svelte

@@ -14,10 +14,14 @@
     testId,
     previousIcon,
     nextIcon,
-    onpagechange,
+    onpagechange: onpagechangeLegacy,
+    onPageChange,
     classes
   }: BookProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onpagechange = $derived(onPageChange ?? onpagechangeLegacy);
+
   let startX = 0;
   let isDragging = false;
 

package/dist/Book/properties.d.ts

@@ -21,4 +21,5 @@ export type OptionalBookProperties = {
 };
 export type BookEventProperties = {
     onpagechange?: (page: number) => void;
+    onPageChange?: (page: number) => void;
 };

package/dist/Calendar/Calendar.svelte

@@ -19,13 +19,21 @@
     testId,
     previousMonthIcon,
     nextMonthIcon,
-    onselect,
-    onrangeselect,
-    onmonthchange,
+    onselect: onselectLegacy,
+    onSelect,
+    onrangeselect: onrangeselectLegacy,
+    onRangeSelect,
+    onmonthchange: onmonthchangeLegacy,
+    onMonthChange,
     classes,
     initialMonth = null
   }: CalendarProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onmonthchange = $derived(onMonthChange ?? onmonthchangeLegacy);
+  const onrangeselect = $derived(onRangeSelect ?? onrangeselectLegacy);
+  const onselect = $derived(onSelect ?? onselectLegacy);
+
   const now = new SvelteDate();
   // Intentionally read initialMonth once (untracked) — it seeds the display month at mount
   // and subsequent prop changes should not navigate the calendar (user navigates via the buttons).

package/dist/Calendar/properties.d.ts

@@ -21,12 +21,23 @@ export type CalendarEventProperties = {
     onselect?: (event: {
         date: Date;
     }) => void;
+    onSelect?: (event: {
+        date: Date;
+    }) => void;
     onrangeselect?: (event: {
         rangeStart: Date;
         rangeEnd: Date;
     }) => void;
+    onRangeSelect?: (event: {
+        rangeStart: Date;
+        rangeEnd: Date;
+    }) => void;
     onmonthchange?: (event: {
         year: number;
         month: number;
     }) => void;
+    onMonthChange?: (event: {
+        year: number;
+        month: number;
+    }) => void;
 };

package/dist/Chat/Chat.svelte

@@ -43,19 +43,39 @@
     stopIcon,
     voiceIcon,
     attachIcon,
-    onsend,
-    onsuggestion,
-    onclose,
-    onstop,
-    onvoice,
-    onattach,
-    onretry,
-    onfeedback,
-    onscrollstate,
+    onsend: onsendLegacy,
+    onSend,
+    onsuggestion: onsuggestionLegacy,
+    onSuggestion,
+    onclose: oncloseLegacy,
+    onClose,
+    onstop: onstopLegacy,
+    onStop,
+    onvoice: onvoiceLegacy,
+    onVoice,
+    onattach: onattachLegacy,
+    onAttach,
+    onretry: onretryLegacy,
+    onRetry,
+    onfeedback: onfeedbackLegacy,
+    onFeedback,
+    onscrollstate: onscrollstateLegacy,
+    onScrollState,
     testId,
     classes
   }: ChatProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onattach = $derived(onAttach ?? onattachLegacy);
+  const onclose = $derived(onClose ?? oncloseLegacy);
+  const onfeedback = $derived(onFeedback ?? onfeedbackLegacy);
+  const onretry = $derived(onRetry ?? onretryLegacy);
+  const onscrollstate = $derived(onScrollState ?? onscrollstateLegacy);
+  const onsend = $derived(onSend ?? onsendLegacy);
+  const onstop = $derived(onStop ?? onstopLegacy);
+  const onsuggestion = $derived(onSuggestion ?? onsuggestionLegacy);
+  const onvoice = $derived(onVoice ?? onvoiceLegacy);
+
   let showHeader = $derived(
     title.length > 0 ||
       subtitle.length > 0 ||

package/dist/Chat/properties.d.ts

@@ -49,12 +49,21 @@ export type OptionalChatProperties = {
 };
 export type ChatEventProperties = {
     onsend?: (value: string, attachments: File[]) => void;
+    onSend?: (value: string, attachments: File[]) => void;
     onsuggestion?: (value: string, index: number) => void;
+    onSuggestion?: (value: string, index: number) => void;
     onclose?: () => void;
+    onClose?: () => void;
     onstop?: () => void;
+    onStop?: () => void;
     onvoice?: () => void;
+    onVoice?: () => void;
     onattach?: (files: File[]) => void;
+    onAttach?: (files: File[]) => void;
     onretry?: () => void;
+    onRetry?: () => void;
     onfeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
+    onFeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
     onscrollstate?: ChatMessageListProperties['onscrollstate'];
+    onScrollState?: ChatMessageListProperties['onscrollstate'];
 };

package/dist/ChatBubble/ChatBubble.svelte

@@ -27,13 +27,21 @@
     expanded = $bindable(false),
     expandedPanelWidth = $bindable(600),
     expandedPanelHeight = $bindable(760),
-    onopen,
-    onclose,
-    ontoggle,
+    onopen: onopenLegacy,
+    onOpen,
+    onclose: oncloseLegacy,
+    onClose,
+    ontoggle: ontoggleLegacy,
+    onToggle,
     testId,
     classes
   }: ChatBubbleProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onclose = $derived(onClose ?? oncloseLegacy);
+  const onopen = $derived(onOpen ?? onopenLegacy);
+  const ontoggle = $derived(onToggle ?? ontoggleLegacy);
+
   const DRAG_THRESHOLD = 4;
 
   function handlesFor(vertical: 'top' | 'bottom', side: 'left' | 'right'): ResizeEdge[] {
@@ -392,6 +400,10 @@
     --button-border-radius: var(--chat-bubble-border-radius, 50%);
     --button-color: var(--chat-bubble-background-color, #18181b);
     --button-text-color: var(--chat-bubble-color, #ffffff);
+    /* Button spaces its icon from its label with this gap. The launcher renders an
+       icon alone inside a circle, so that gap would push the glyph off-centre --
+       reset to 0 here rather than in Button, whose default is right for a labelled
+       button. docs/ChatBubble.md records this as a pill-launcher caveat. */
     --button-content-gap: 0px;
     --button-box-shadow: var(--chat-bubble-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.25));
     --button-hover-color: var(--chat-bubble-hover-background-color, #27272a);

package/dist/ChatBubble/properties.d.ts

@@ -38,6 +38,9 @@ export type OptionalChatBubbleProperties = {
 };
 export type ChatBubbleEventProperties = {
     onopen?: () => void;
+    onOpen?: () => void;
     onclose?: () => void;
+    onClose?: () => void;
     ontoggle?: (open: boolean) => void;
+    onToggle?: (open: boolean) => void;
 };

package/dist/ChatComposer/ChatComposer.svelte

@@ -26,12 +26,18 @@
     richVideoTooltip,
     richRemoveIcon,
     richFileIcon,
-    onremoverichimage,
-    onremoverichfile,
-    onremoverichvideo,
-    onopenrichimage,
-    onopenrichvideo,
-    onopenrichfile,
+    onremoverichimage: onremoverichimageLegacy,
+    onRemoveRichImage,
+    onremoverichfile: onremoverichfileLegacy,
+    onRemoveRichFile,
+    onremoverichvideo: onremoverichvideoLegacy,
+    onRemoveRichVideo,
+    onopenrichimage: onopenrichimageLegacy,
+    onOpenRichImage,
+    onopenrichvideo: onopenrichvideoLegacy,
+    onOpenRichVideo,
+    onopenrichfile: onopenrichfileLegacy,
+    onOpenRichFile,
     sendable = null,
     accept = '',
     multiple = false,
@@ -46,15 +52,21 @@
     actionIcon,
     actionLabel = 'Voice conversation',
     leading,
-    onsubmit,
+    onsubmit: onsubmitLegacy,
+    onSubmit,
     oninput,
     onkeydown,
     onpaste,
-    onstop,
-    onvoice,
-    onattach,
-    onattachclick,
-    onaction,
+    onstop: onstopLegacy,
+    onStop,
+    onvoice: onvoiceLegacy,
+    onVoice,
+    onattach: onattachLegacy,
+    onAttach,
+    onattachclick: onattachclickLegacy,
+    onAttachClick,
+    onaction: onactionLegacy,
+    onAction,
     testId,
     inputTestId,
     inputAriaLabel,
@@ -67,6 +79,20 @@
     classes
   }: ChatComposerProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onaction = $derived(onAction ?? onactionLegacy);
+  const onattach = $derived(onAttach ?? onattachLegacy);
+  const onattachclick = $derived(onAttachClick ?? onattachclickLegacy);
+  const onopenrichfile = $derived(onOpenRichFile ?? onopenrichfileLegacy);
+  const onopenrichimage = $derived(onOpenRichImage ?? onopenrichimageLegacy);
+  const onopenrichvideo = $derived(onOpenRichVideo ?? onopenrichvideoLegacy);
+  const onremoverichfile = $derived(onRemoveRichFile ?? onremoverichfileLegacy);
+  const onremoverichimage = $derived(onRemoveRichImage ?? onremoverichimageLegacy);
+  const onremoverichvideo = $derived(onRemoveRichVideo ?? onremoverichvideoLegacy);
+  const onstop = $derived(onStop ?? onstopLegacy);
+  const onsubmit = $derived(onSubmit ?? onsubmitLegacy);
+  const onvoice = $derived(onVoice ?? onvoiceLegacy);
+
   let fileInput: HTMLInputElement | null = $state(null);
 
   let showVoice = $derived(typeof onvoice === 'function');

package/dist/ChatComposer/properties.d.ts

@@ -73,37 +73,49 @@ export type OptionalChatComposerProperties = {
 };
 export type ChatComposerEventProperties = {
     onsubmit?: (value: string, attachments: File[]) => void;
+    onSubmit?: (value: string, attachments: File[]) => void;
     oninput?: (value: string, event: Event) => void;
     onkeydown?: (event: KeyboardEvent) => void;
     onpaste?: (event: ClipboardEvent) => void;
     onstop?: () => void;
+    onStop?: () => void;
     onvoice?: () => void;
+    onVoice?: () => void;
     onattach?: (files: File[]) => void;
+    onAttach?: (files: File[]) => void;
     /**
      * Intercepts the attach button: when provided, clicking it calls this instead of
      * opening the built-in file picker — for apps with their own chooser (camera /
      * gallery / files).
      */
     onattachclick?: () => void;
+    onAttachClick?: () => void;
     /**
      * Removal callbacks for the rich strip's chips. Omit them to render the rich
      * chips read-only (no remove buttons), mirroring AttachmentChipRow.
      */
     onremoverichimage?: (id: string) => void;
+    onRemoveRichImage?: (id: string) => void;
     onremoverichfile?: (id: string) => void;
+    onRemoveRichFile?: (id: string) => void;
     onremoverichvideo?: (id: string) => void;
+    onRemoveRichVideo?: (id: string) => void;
     /**
      * Open/preview callbacks for the rich strip's chips — when provided, a chip's
      * tile becomes a real button and clicking it fires with the attachment (e.g.
      * open a lightbox, play the video).
      */
     onopenrichimage?: (image: AttachmentChipImage) => void;
+    onOpenRichImage?: (image: AttachmentChipImage) => void;
     onopenrichvideo?: (video: AttachmentChipVideo) => void;
+    onOpenRichVideo?: (video: AttachmentChipVideo) => void;
     onopenrichfile?: (file: AttachmentChipFile) => void;
+    onOpenRichFile?: (file: AttachmentChipFile) => void;
     /**
      * The composer's idle action (e.g. voice conversation mode). While the value is
      * empty, nothing is sendable and no reply is streaming, the send button gives way
      * to an action button that fires this.
      */
     onaction?: () => void;
+    onAction?: () => void;
 };

package/dist/ChatHeader/ChatHeader.svelte

@@ -14,12 +14,16 @@
     closeIcon,
     closeLabel = 'Close',
     showClose,
-    onclose,
+    onclose: oncloseLegacy,
+    onClose,
     children,
     testId,
     classes
   }: ChatHeaderProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onclose = $derived(onClose ?? oncloseLegacy);
+
   let displayClose = $derived(showClose ?? typeof onclose === 'function');
 </script>
 

package/dist/ChatHeader/properties.d.ts

@@ -16,4 +16,5 @@ export type OptionalChatHeaderProperties = {
 };
 export type ChatHeaderEventProperties = {
     onclose?: () => void;
+    onClose?: () => void;
 };

package/dist/ChatMessage/ChatMessage.svelte

@@ -27,13 +27,21 @@
     retryLabel = 'Retry',
     feedbackUpLabel = 'Good response',
     feedbackDownLabel = 'Bad response',
-    onretry,
-    onfeedback,
-    oncopy,
+    onretry: onretryLegacy,
+    onRetry,
+    onfeedback: onfeedbackLegacy,
+    onFeedback,
+    oncopy: oncopyLegacy,
+    onCopy,
     testId,
     classes
   }: ChatMessageProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const oncopy = $derived(onCopy ?? oncopyLegacy);
+  const onfeedback = $derived(onFeedback ?? onfeedbackLegacy);
+  const onretry = $derived(onRetry ?? onretryLegacy);
+
   let party = $derived(partyOf(role));
 
   let copied = $state(false);

package/dist/ChatMessage/properties.d.ts

@@ -43,6 +43,9 @@ export type OptionalChatMessageProperties = {
 };
 export type ChatMessageEventProperties = {
     onretry?: (() => void) | null;
+    onRetry?: (() => void) | null;
     onfeedback?: ((value: ChatMessageFeedback) => void) | null;
+    onFeedback?: ((value: ChatMessageFeedback) => void) | null;
     oncopy?: (text: string) => void;
+    onCopy?: (text: string) => void;
 };

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -23,13 +23,21 @@
     jumpLabel = 'Jump to latest',
     jumpIcon,
     allowCopy = false,
-    onscrollstate,
-    onretry,
-    onfeedback,
+    onscrollstate: onscrollstateLegacy,
+    onScrollState,
+    onretry: onretryLegacy,
+    onRetry,
+    onfeedback: onfeedbackLegacy,
+    onFeedback,
     testId,
     classes
   }: ChatMessageListProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onfeedback = $derived(onFeedback ?? onfeedbackLegacy);
+  const onretry = $derived(onRetry ?? onretryLegacy);
+  const onscrollstate = $derived(onScrollState ?? onscrollstateLegacy);
+
   let listEl: HTMLElement | null = $state(null);
   let innerEl: HTMLElement | null = $state(null);
   let atBottom = $state(true);

package/dist/ChatMessageList/properties.d.ts

@@ -49,6 +49,12 @@ export type ChatMessageListEventProperties = {
         atBottom: boolean;
         scrollable: boolean;
     }) => void;
+    onScrollState?: (state: {
+        atBottom: boolean;
+        scrollable: boolean;
+    }) => void;
     onretry?: () => void;
+    onRetry?: () => void;
     onfeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
+    onFeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
 };

package/dist/ChatSuggestions/ChatSuggestions.svelte

@@ -13,11 +13,15 @@
     loading = false,
     icon,
     chipClasses,
-    onselect,
+    onselect: onselectLegacy,
+    onSelect,
     testId,
     classes
   }: ChatSuggestionsProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onselect = $derived(onSelect ?? onselectLegacy);
+
   const labelOf = (item: ChatSuggestion): string => (typeof item === 'string' ? item : item.label);
 
   const valueOf = (item: ChatSuggestion): string => {

package/dist/ChatSuggestions/properties.d.ts

@@ -55,4 +55,5 @@ export type OptionalChatSuggestionsProperties = {
 };
 export type ChatSuggestionsEventProperties = {
     onselect?: (value: string, index: number) => void;
+    onSelect?: (value: string, index: number) => void;
 };

package/dist/CheckListItem/CheckListItem.svelte

@@ -8,10 +8,14 @@
     disabled = false,
     checkboxLabel,
     testId,
-    onclick,
+    onclick: onclickLegacy,
+    onClick,
     classes
   }: CheckListItemProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onclick = $derived(onClick ?? onclickLegacy);
+
   function handleClick(value: boolean): void {
     checked = value;
     onclick?.(checked);

package/dist/CheckListItem/properties.d.ts

@@ -12,4 +12,5 @@ export type OptionalCheckListItemProperties = {
 };
 export type CheckListItemEventProperties = {
     onclick?: (checked: boolean) => void;
+    onClick?: (checked: boolean) => void;
 };

package/dist/Checkbox/Checkbox.svelte

@@ -11,12 +11,16 @@
     testId,
     checkedIcon,
     indeterminateIcon,
-    onclick,
+    onclick: onclickLegacy,
+    onClick,
     classes,
     ariaControls,
     ariaLabel
   }: CheckboxProperties = $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/Checkbox/properties.d.ts

@@ -20,4 +20,5 @@ export type OptionalCheckboxProperties = {
 };
 export type CheckboxEventProperties = {
     onclick?: (checked: boolean) => void;
+    onClick?: (checked: boolean) => void;
 };

package/dist/ChipInput/ChipInput.svelte

@@ -11,12 +11,22 @@
     editable = false,
     testId,
     classes,
-    onadd,
-    ondismiss,
-    onedit,
-    onchange
+    onadd: onaddLegacy,
+    onAdd,
+    ondismiss: ondismissLegacy,
+    onDismiss,
+    onedit: oneditLegacy,
+    onEdit,
+    onchange: onchangeLegacy,
+    onChange
   }: ChipInputProperties = $props();
 
+  // Event-casing phase 1: both spellings accepted, the correct one wins.
+  const onadd = $derived(onAdd ?? onaddLegacy);
+  const onchange = $derived(onChange ?? onchangeLegacy);
+  const ondismiss = $derived(onDismiss ?? ondismissLegacy);
+  const onedit = $derived(onEdit ?? oneditLegacy);
+
   let draft = $state('');
 
   // The chip currently swapped for an inline edit field, held by VALUE rather than by slot