@juspay/svelte-ui-components 3.1.5 → 3.2.0

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

@@ -3,19 +3,52 @@
   import Button from '../Button/Button.svelte';
   import Img from '../Img/Img.svelte';
 
+  /**
+   * The documented default, kept as the default so this is not a breaking
+   * change. It is a relative URL resolved against whatever page renders the
+   * component, and the library ships no such file, so it only ever pointed at
+   * something real for an app serving that exact path at its own root -- and
+   * resolved to `<route>/icons/order-success-icon.svg` anywhere deeper.
+   */
+  const LEGACY_DEFAULT_STATUS_ICON = 'icons/order-success-icon.svg';
+
+  /**
+   * Stands in when the legacy default cannot be fetched, so an app that does
+   * host that path keeps getting its own file and every other app stops
+   * rendering a broken image.
+   *
+   * Carries no `role` or `aria-label` of its own. Both are in `Img`'s
+   * allowlist, so a root declaring them would be copied onto the live host and
+   * would outrank the label `Img` derives from `alt` -- pinning every default
+   * icon to "Success", including on a failure screen.
+   */
+  const BUILTIN_STATUS_ICON =
+    "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'22'%20fill%3D'%23e6f6ec'%20stroke%3D'%232e994c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M15%2024.5l6.5%206.5L33%2019.5'%20fill%3D'none'%20stroke%3D'%232e994c'%20stroke-width%3D'3.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E";
+
   let {
-    statusIcon = 'icons/order-success-icon.svg',
+    statusIcon = LEGACY_DEFAULT_STATUS_ICON,
+    statusIconAlt = 'status',
     statusText = '',
     statusTextTag = 'div',
     statusDescription = '',
     buttonProperties,
     classes,
-    onbuttonClick,
+    onbuttonClick: onbuttonClickLegacy,
+    onButtonClick,
     icon,
     descriptionSnippet,
     children,
     testId
   }: StatusProperties = $props();
+
+  // Scoped to the untouched default on purpose. Applying it to a caller's own
+  // icon would answer a failed failure-icon with a success checkmark.
+  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
@@ -28,7 +61,7 @@
       {#if icon}
         {@render icon()}
       {:else}
-        <Img inlineSvg src={statusIcon} alt="status" />
+        <Img inlineSvg src={statusIcon} fallback={statusIconFallback} alt={statusIconAlt} />
       {/if}
     </div>
     <svelte:element

package/dist/Status/properties.d.ts

@@ -2,6 +2,13 @@ import type { Snippet } from 'svelte';
 import type { ButtonProperties } from '../Button/properties';
 export type StatusProperties = StatusEventProperties & {
     statusIcon?: string;
+    /**
+     * Accessible name for the `statusIcon` image. Defaults to `'status'`, which
+     * is deliberately generic because the icon is the same shape on a success and
+     * a failure screen. Set it to something the screen actually means, or to `''`
+     * to mark the icon decorative when `statusText` already carries the meaning.
+     */
+    statusIconAlt?: string;
     statusText: string;
     statusDescription: string;
     /**
@@ -49,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 & {