@juspay/svelte-ui-components 3.1.6 → 3.2.1

package/README.md

@@ -38,6 +38,53 @@ This library takes a different approach: **components are unstyled by default**
 
 ---
 
+## Coming in 4.0.0: one breaking change
+
+Advance notice, not a change in this release. **Nothing below has happened yet** —
+the current 3.x line still accepts everything it always did.
+
+In 4.0.0, `children` stops being a declared property on `sui-chat-bubble`,
+`sui-draggable` and `sui-resizable`. Assigning it will set an inert expando and
+the content will silently disappear. Pass the content as light-DOM children
+instead, which those wrappers will forward through their default slot:
+
+```js
+el.children = mySnippet; // before — no longer works
+```
+
+```html
+<sui-draggable><div>…</div></sui-draggable>
+<!-- after -->
+```
+
+**Reading `element.children` is what the change fixes.** Declaring the property
+replaces the inherited accessor, so on those three elements `element.children`
+returns `undefined` rather than an `HTMLCollection` today and
+`el.children.length` throws. That is why the declaration has to go, and why it
+cannot go before a major.
+
+You can find affected call sites now, well before the major — this reports and
+writes nothing:
+
+```sh
+npx sui-codemod --dry-run ./src
+```
+
+It flags `.children =` assignments only in files that also mention one of the
+three elements, so ordinary DOM code is not reported. The fix moves content from
+a JavaScript assignment into markup, which is a decision about where content is
+authored, so the tool deliberately does not rewrite it for you. Requires Node
+&ge;&nbsp;22.18; `typescript` is an optional peer dependency that the codemod's
+Svelte-parsing paths need.
+
+Nothing else in the custom-element surface breaks. Everything this release adds —
+185 wrapper props, three previously unregistered elements, the `spellcheck` and
+`aria-haspopup` mappings, the snippet props on Banner, ListItem, Menu, Modal and
+Button, Accordion's `disabled`, LottiePlayer's callbacks — is new surface or a
+fix to something that did not work.
+
+---
+
 ## Quick Start
 
 ```svelte
@@ -165,8 +212,14 @@ component.
 <script type="module" src="https://juspay.github.io/svelte-ui-components/wc/index.js"></script>
 
 <!-- Pinned to an npm version, via jsDelivr or unpkg -->
-<script type="module" src="https://cdn.jsdelivr.net/npm/@juspay/svelte-ui-components@latest/dist-wc/index.js"></script>
-<script type="module" src="https://unpkg.com/@juspay/svelte-ui-components@latest/dist-wc/index.js"></script>
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@juspay/svelte-ui-components@latest/dist-wc/index.js"
+></script>
+<script
+  type="module"
+  src="https://unpkg.com/@juspay/svelte-ui-components@latest/dist-wc/index.js"
+></script>
 
 <sui-button>Click me</sui-button>
 <sui-input placeholder="Type here"></sui-input>

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[] {

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