@juspay/svelte-ui-components 3.4.1 → 3.5.1

package/README.md

@@ -100,7 +100,7 @@ fix to something that did not work.
   value=""
   placeholder="Enter email"
   dataType="email"
-  onStateChange={(state) => console.log(state)}
+  onstatechange={(state) => console.log(state)}
 />
 
 <!-- Toggle switch -->

package/dist/Accordion/Accordion.svelte

@@ -5,8 +5,7 @@
     expand = $bindable(false),
     children,
     trigger,
-    ontoggle: ontoggleLegacy,
-    onToggle,
+    ontoggle,
     triggerClasses,
     classes,
     testId,
@@ -14,9 +13,6 @@
     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,5 +27,4 @@ export type OptionalAccordionProperties = {
 };
 export type AccordionEventProperties = {
     ontoggle?: (expanded: boolean) => void;
-    onToggle?: (expanded: boolean) => void;
 };

package/dist/AreaChart/AreaChart.svelte

@@ -51,18 +51,12 @@
     tooltipSnippet,
     empty,
     tooltipPortal = false,
-    onpointhover: onpointhoverLegacy,
-    onPointHover,
-    onpointclick: onpointclickLegacy,
-    onPointClick,
+    onpointhover,
+    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,19 +61,9 @@ 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/AttachmentChipRow/AttachmentChipRow.svelte

@@ -15,12 +15,12 @@
     images = [],
     files = [],
     videos = [],
-    onRemoveImage,
-    onRemoveFile,
-    onRemoveVideo,
-    onOpenImage,
-    onOpenVideo,
-    onOpenFile,
+    onremoveimage,
+    onremovefile,
+    onremovevideo,
+    onopenimage,
+    onopenvideo,
+    onopenfile,
     imageTooltip,
     videoTooltip,
     removeIcon,
@@ -46,15 +46,15 @@
         testID={typeof testId === 'string' ? `${testId}-image-${image.id}` : null}
       >
         <svelte:element
-          this={typeof onOpenImage === 'function' ? 'button' : 'div'}
-          type={typeof onOpenImage === 'function' ? 'button' : null}
-          role={typeof onOpenImage === 'function' ? 'button' : null}
-          aria-label={typeof onOpenImage === 'function'
+          this={typeof onopenimage === 'function' ? 'button' : 'div'}
+          type={typeof onopenimage === 'function' ? 'button' : null}
+          role={typeof onopenimage === 'function' ? 'button' : null}
+          aria-label={typeof onopenimage === 'function'
             ? `Open ${image.filename ?? 'image'}`
             : null}
           class="thumb"
-          class:openable={typeof onOpenImage === 'function'}
-          onclick={typeof onOpenImage === 'function' ? () => onOpenImage(image) : null}
+          class:openable={typeof onopenimage === 'function'}
+          onclick={typeof onopenimage === 'function' ? () => onopenimage(image) : null}
           use:tooltip={{
             text: typeof imageTooltip === 'function' ? imageTooltip(image) : '',
             position: 'top'
@@ -62,14 +62,14 @@
         >
           <Img src={image.thumbnailData} alt={image.filename ?? 'Uploaded image'} fallback="" />
         </svelte:element>
-        {#if typeof onRemoveImage === 'function'}
+        {#if typeof onremoveimage === 'function'}
           <div class="remove-wrap">
             <Button
               variant="secondary"
               iconOnly={true}
               ariaLabel="Remove image"
               testId={testId && `${testId}-remove-image-${image.id}`}
-              onclick={() => onRemoveImage(image.id)}
+              onclick={() => onremoveimage(image.id)}
             >
               {#snippet icon()}
                 {#if removeIcon}
@@ -97,15 +97,15 @@
         testID={typeof testId === 'string' ? `${testId}-video-${video.id}` : null}
       >
         <svelte:element
-          this={typeof onOpenVideo === 'function' ? 'button' : 'div'}
-          type={typeof onOpenVideo === 'function' ? 'button' : null}
-          role={typeof onOpenVideo === 'function' ? 'button' : null}
-          aria-label={typeof onOpenVideo === 'function'
+          this={typeof onopenvideo === 'function' ? 'button' : 'div'}
+          type={typeof onopenvideo === 'function' ? 'button' : null}
+          role={typeof onopenvideo === 'function' ? 'button' : null}
+          aria-label={typeof onopenvideo === 'function'
             ? `Play ${video.filename ?? 'video'}`
             : null}
           class="thumb video-tile"
-          class:openable={typeof onOpenVideo === 'function'}
-          onclick={typeof onOpenVideo === 'function' ? () => onOpenVideo(video) : null}
+          class:openable={typeof onopenvideo === 'function'}
+          onclick={typeof onopenvideo === 'function' ? () => onopenvideo(video) : null}
           use:tooltip={{
             text: typeof videoTooltip === 'function' ? videoTooltip(video) : '',
             position: 'top'
@@ -120,14 +120,14 @@
             </svg>
           </span>
         </svelte:element>
-        {#if typeof onRemoveVideo === 'function'}
+        {#if typeof onremovevideo === 'function'}
           <div class="remove-wrap">
             <Button
               variant="secondary"
               iconOnly={true}
               ariaLabel="Remove video"
               testId={testId && `${testId}-remove-video-${video.id}`}
-              onclick={() => onRemoveVideo(video.id)}
+              onclick={() => onremovevideo(video.id)}
             >
               {#snippet icon()}
                 {#if removeIcon}
@@ -155,13 +155,13 @@
         testID={typeof testId === 'string' ? `${testId}-file-${file.id}` : null}
       >
         <svelte:element
-          this={typeof onOpenFile === 'function' ? 'button' : 'div'}
-          type={typeof onOpenFile === 'function' ? 'button' : null}
-          role={typeof onOpenFile === 'function' ? 'button' : null}
-          aria-label={typeof onOpenFile === 'function' ? `Open ${file.filename}` : null}
+          this={typeof onopenfile === 'function' ? 'button' : 'div'}
+          type={typeof onopenfile === 'function' ? 'button' : null}
+          role={typeof onopenfile === 'function' ? 'button' : null}
+          aria-label={typeof onopenfile === 'function' ? `Open ${file.filename}` : null}
           class="thumb file-tile"
-          class:openable={typeof onOpenFile === 'function'}
-          onclick={typeof onOpenFile === 'function' ? () => onOpenFile(file) : null}
+          class:openable={typeof onopenfile === 'function'}
+          onclick={typeof onopenfile === 'function' ? () => onopenfile(file) : null}
         >
           {#if fileIcon}
             {@render fileIcon()}
@@ -185,14 +185,14 @@
             </span>
           </div>
         </svelte:element>
-        {#if typeof onRemoveFile === 'function'}
+        {#if typeof onremovefile === 'function'}
           <div class="remove-wrap">
             <Button
               variant="secondary"
               iconOnly={true}
               ariaLabel="Remove file"
               testId={testId && `${testId}-remove-file-${file.id}`}
-              onclick={() => onRemoveFile(file.id)}
+              onclick={() => onremovefile(file.id)}
             >
               {#snippet icon()}
                 {#if removeIcon}

package/dist/AttachmentChipRow/properties.d.ts

@@ -19,17 +19,17 @@ export type AttachmentChipRowProperties = OptionalAttachmentChipRowProperties &
 export type MandatoryAttachmentChipRowProperties = Record<never, never>;
 export type OptionalAttachmentChipRowProperties = {
     /** Omit to render the row read-only — chips lose their remove buttons. */
-    onRemoveImage?: (id: string) => void;
-    onRemoveFile?: (id: string) => void;
-    onRemoveVideo?: (id: string) => void;
+    onremoveimage?: (id: string) => void;
+    onremovefile?: (id: string) => void;
+    onremovevideo?: (id: string) => void;
     /**
      * Open/preview callbacks — when provided, the chip's tile becomes a real button
      * and clicking it fires with the attachment (e.g. open a lightbox, play the
      * video). Omitted, the tile stays non-interactive.
      */
-    onOpenImage?: (image: AttachmentChipImage) => void;
-    onOpenVideo?: (video: AttachmentChipVideo) => void;
-    onOpenFile?: (file: AttachmentChipFile) => void;
+    onopenimage?: (image: AttachmentChipImage) => void;
+    onopenvideo?: (video: AttachmentChipVideo) => void;
+    onopenfile?: (file: AttachmentChipFile) => void;
     images?: AttachmentChipImage[];
     files?: AttachmentChipFile[];
     /** Video attachments — a poster tile with a play badge (or a plain dark tile without a poster). */

package/dist/Banner/Banner.svelte

@@ -14,16 +14,12 @@
     rightContent,
     dismissIcon,
     onclick,
-    ondismiss: ondismissLegacy,
-    onDismiss,
+    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,5 +18,4 @@ export type OptionalBannerProperties = {
 export type BannerEventProperties = {
     onclick?: (event: MouseEvent) => void;
     ondismiss?: () => void;
-    onDismiss?: () => void;
 };

package/dist/BarChart/BarChart.svelte

@@ -82,7 +82,7 @@
     tooltipSnippet,
     empty,
     renderOverlay,
-    onChartReady,
+    onchartready,
     highlightedIndex = null,
     normaliseToFirstPoint = false,
     topN,
@@ -91,18 +91,12 @@
     interactiveLegend = false,
     hideLegendBelow = 360,
     tooltipPortal = false,
-    onbarclick: onbarclickLegacy,
-    onBarClick,
-    onbarhover: onbarhoverLegacy,
-    onBarHover,
+    onbarclick,
+    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);
@@ -114,15 +108,15 @@
   let mouseY = $state(0);
   let anchor = $state<TooltipAnchor | null>(null);
   let valueFontSize = $state(14);
-  /** Internal tracking for the imperative highlight API (onChartReady). */
+  /** Internal tracking for the imperative highlight API (onchartready). */
   let apiHighlightedIndex = $state<number | null>(null);
   const hiddenSeries = new SvelteSet<number>();
 
-  // ── onMount: emit ChartHighlightAPI via onChartReady ──────────
+  // ── onMount: emit ChartHighlightAPI via onchartready ──────────
 
   onMount(() => {
     valueFontSize = readCssVarPx(containerEl, '--barchart-value-font-size', 14);
-    if (typeof onChartReady !== 'function') {
+    if (typeof onchartready !== 'function') {
       return;
     }
     const api: ChartHighlightAPI = {
@@ -132,7 +126,7 @@
       getCategories: () => labels,
       type: 'bar-chart'
     };
-    onChartReady(api);
+    onchartready(api);
   });
 
   // ── Layout ─────────────────────────────────────────────────────

package/dist/BarChart/properties.d.ts

@@ -183,7 +183,7 @@ export type OptionalBarChartProperties = {
      * position within the category axis) and dim all others. Pass `null` to clear.
      * The `type` field on the handle is always `'bar-chart'`.
      */
-    onChartReady?: (api: ChartHighlightAPI) => void;
+    onchartready?: (api: ChartHighlightAPI) => void;
     /**
      * Declarative complement to `onChartReady`. When set to a non-null number the
      * bar at that zero-based category index is highlighted (full opacity) and the
@@ -231,16 +231,8 @@ 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,14 +14,10 @@
     testId,
     previousIcon,
     nextIcon,
-    onpagechange: onpagechangeLegacy,
-    onPageChange,
+    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,5 +21,4 @@ export type OptionalBookProperties = {
 };
 export type BookEventProperties = {
     onpagechange?: (page: number) => void;
-    onPageChange?: (page: number) => void;
 };

package/dist/Button/Button.svelte

@@ -22,6 +22,7 @@
     testId,
     ariaLabel,
     ariaExpanded,
+    ariaControls,
     ariaHaspopup,
     ariaSelected,
     ariaBusy,
@@ -91,6 +92,7 @@
     role={role ?? null}
     aria-label={ariaLabel ?? null}
     aria-expanded={ariaExpanded ?? null}
+    aria-controls={ariaControls ?? null}
     aria-haspopup={ariaHaspopup ?? null}
     aria-selected={ariaSelected ?? null}
     aria-busy={isBusy || ariaBusy || null}

package/dist/Button/properties.d.ts

@@ -53,6 +53,11 @@ export type OptionalButtonProperties = {
     children?: Snippet;
     ariaLabel?: string;
     ariaExpanded?: boolean;
+    /**
+     * `aria-controls`: the id of the region this button governs. Pair with
+     * `ariaExpanded` on a disclosure button so assistive tech can reach what it opens.
+     */
+    ariaControls?: string;
     /**
      * Native `aria-haspopup`. Needed when the button is the trigger for a menu, listbox or
      * dialog — Menu hands exactly this to its `trigger` snippet.

package/dist/Calendar/Calendar.svelte

@@ -19,21 +19,13 @@
     testId,
     previousMonthIcon,
     nextMonthIcon,
-    onselect: onselectLegacy,
-    onSelect,
-    onrangeselect: onrangeselectLegacy,
-    onRangeSelect,
-    onmonthchange: onmonthchangeLegacy,
-    onMonthChange,
+    onselect,
+    onrangeselect,
+    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,23 +21,12 @@ 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,39 +43,19 @@
     stopIcon,
     voiceIcon,
     attachIcon,
-    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,
+    onsend,
+    onsuggestion,
+    onclose,
+    onstop,
+    onvoice,
+    onattach,
+    onretry,
+    onfeedback,
+    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,21 +49,12 @@ 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/Chat/types.d.ts

@@ -12,6 +12,13 @@ export type ChatMessageData = {
      */
     markdown?: string;
     streaming?: boolean;
+    /**
+     * Reveal this message progressively as it grows. Opt-in per message so it cannot stack with
+     * `Chat`'s controller-level reveal, which drip-feeds `content` instead and never sets this.
+     */
+    typewriter?: boolean;
+    /** Milliseconds between characters while `typewriter` is revealing this message. */
+    typewriterSpeed?: number;
     status?: ChatMessageStatus;
     timestamp?: number;
     attachments?: unknown[];

package/dist/ChatBubble/ChatBubble.svelte

@@ -27,21 +27,13 @@
     expanded = $bindable(false),
     expandedPanelWidth = $bindable(600),
     expandedPanelHeight = $bindable(760),
-    onopen: onopenLegacy,
-    onOpen,
-    onclose: oncloseLegacy,
-    onClose,
-    ontoggle: ontoggleLegacy,
-    onToggle,
+    onopen,
+    onclose,
+    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,9 +38,6 @@ export type OptionalChatBubbleProperties = {
 };
 export type ChatBubbleEventProperties = {
     onopen?: () => void;
-    onOpen?: () => void;
     onclose?: () => void;
-    onClose?: () => void;
     ontoggle?: (open: boolean) => void;
-    onToggle?: (open: boolean) => void;
 };