@juspay/svelte-ui-components 4.52.1 → 4.53.1

package/README.md

@@ -154,6 +154,20 @@ fix to something that did not work.
 | **RelativeTime**   | Auto-updating relative time display ("5 minutes ago") with locale support and optional tooltip.                                                | [docs](docs/RelativeTime.md)   |
 | **AspectRatio**    | Constrains content to a fixed width-to-height ratio using CSS `aspect-ratio`, reserving layout space before an image, video or iframe loads.   | [docs](docs/AspectRatio.md)    |
 
+### Charts
+
+Pure-SVG charts with no charting-library dependency; each takes plain data arrays.
+
+| Component | Description | Docs |
+| --- | --- | --- |
+| **AreaChart**         | Responsive area chart for volume under a trend: multiple series, regular or 100% stacking, gradient fill, data labels and a hover overlay. | [docs](docs/AreaChart.md) |
+| **BarChart**          | Responsive bar chart for comparing categories: vertical or horizontal, single or multi-series (grouped or stacked), value labels, per-point colours and hover tooltips. | [docs](docs/BarChart.md) |
+| **DualAxisBarChart**  | Two independent Y-axes over one categorical X-axis; each series declares its own axis and render type. | [docs](docs/DualAxisBarChart.md) |
+| **FunnelChart**       | Horizontal funnel: one bar per stage, proportional to its value, with connectors between stages. | [docs](docs/FunnelChart.md) |
+| **LineChart**         | Responsive line chart for trends: multiple series, five curve interpolations, gradient fill and an optional area mode. | [docs](docs/LineChart.md) |
+| **PieChart**          | Responsive pie or donut chart with slice hover highlighting, a delta badge, custom labels, a legend and donut centre content. | [docs](docs/PieChart.md) |
+| **SankeyChart**       | Sankey diagram for flows between nodes, positioned into columns automatically. | [docs](docs/SankeyChart.md) |
+
 ### Feedback & Loading
 
 | Component       | Description                                                                                     | Docs                        |

package/dist/AttachmentChipRow/AttachmentChipRow.svelte

@@ -26,14 +26,15 @@
     removeIcon,
     fileIcon,
     testId,
-    classes
+    classes,
+    ariaLabel = 'Pending attachments'
   }: AttachmentChipRowProperties = $props();
 </script>
 
 {#if images.length > 0 || videos.length > 0 || files.length > 0}
   <Scroller
     direction="horizontal"
-    ariaLabel="Pending attachments"
+    {ariaLabel}
     showArrows={false}
     hideScrollbar={false}
     showGradient={false}

package/dist/AttachmentChipRow/properties.d.ts

@@ -44,4 +44,6 @@ export type OptionalAttachmentChipRowProperties = {
     fileIcon?: Snippet;
     testId?: string;
     classes?: string;
+    /** Name of this attachment strip. Default: `Pending attachments`. */
+    ariaLabel?: string;
 };

package/dist/Book/Book.svelte

@@ -11,6 +11,7 @@
     showNavigation = true,
     showPageIndicator = true,
     enableSwipe = false,
+    ariaLabel = 'Book',
     testId,
     previousIcon,
     nextIcon,
@@ -108,6 +109,7 @@
   onmousedown={handleMouseDown}
   onmouseup={handleMouseUp}
   role="region"
+  aria-label={ariaLabel}
   tabindex="0"
 >
   <div class="book-viewport">

package/dist/Book/properties.d.ts

@@ -14,6 +14,8 @@ export type OptionalBookProperties = {
     showNavigation?: boolean;
     showPageIndicator?: boolean;
     enableSwipe?: boolean;
+    /** Accessible name for the keyboard-operated book region. Defaults to "Book". */
+    ariaLabel?: string;
     testId?: string;
     previousIcon?: Snippet;
     nextIcon?: Snippet;

package/dist/Chat/Chat.svelte

@@ -23,6 +23,7 @@
     hideScrollbar = false,
     jump = true,
     jumpLabel = 'Jump to latest',
+    messageListLabel,
     jumpIcon,
     toolStatus = null,
     suggestions = [],
@@ -97,6 +98,7 @@
   {/if}
 
   <ChatMessageList
+    ariaLabel={messageListLabel ?? (title.trim() ? `${title} messages` : 'Conversation messages')}
     {messages}
     {autoscroll}
     {scrollPolicy}

package/dist/Chat/properties.d.ts

@@ -23,6 +23,8 @@ export type OptionalChatProperties = {
     hideScrollbar?: ChatMessageListProperties['hideScrollbar'];
     jump?: ChatMessageListProperties['jump'];
     jumpLabel?: ChatMessageListProperties['jumpLabel'];
+    /** Transcript name; defaults to the chat title plus `messages`, or `Conversation messages`. */
+    messageListLabel?: ChatMessageListProperties['ariaLabel'];
     jumpIcon?: ChatMessageListProperties['jumpIcon'];
     toolStatus?: ChatToolStatus | null;
     suggestions?: ChatSuggestion[];

package/dist/Chat/types.d.ts

@@ -11,6 +11,8 @@ export type ChatMessageData = {
      * MarkdownText). Wins over `html` and `content` in the bubble.
      */
     markdown?: string;
+    /** Accessible table scroll-region name for static and streamed markdown bubbles. */
+    markdownTableLabel?: string;
     streaming?: boolean;
     /**
      * Reveal this message progressively as it grows. Opt-in per message so it cannot stack with

package/dist/ChatMessage/ChatMessage.svelte

@@ -10,12 +10,14 @@
   import { onDestroy, onMount } from 'svelte';
   import { partyOf } from '../Chat/roles';
   import type { ChatMessageProperties } from './properties';
+  import type { RenderMarkdownOptions } from '../MarkdownText/properties';
 
   let {
     role,
     content = '',
     html,
     markdown,
+    markdownTableLabel,
     body,
     streaming = false,
     typewriter = false,
@@ -90,7 +92,9 @@
      `marked` — a peer dependency — is only pulled in at runtime, never during
      SSR, and rendering `markdown` degrades to the `html`/`content` fallback
      until the module resolves or when the peer is absent. */
-  let renderMarkdownFn = $state<((source: string) => string) | null>(null);
+  let renderMarkdownFn = $state<
+    ((source: string, options?: RenderMarkdownOptions) => string) | null
+  >(null);
 
   onMount(() => {
     void import('../MarkdownText/markdown')
@@ -102,8 +106,19 @@
       });
   });
 
+  // Both rendering branches share the same options-aware renderer. Capture the label
+  // reactively so a locale/name update also refreshes already-revealed typewriter HTML.
+  let messageMarkdownRenderer = $derived.by(() => {
+    const renderer = renderMarkdownFn;
+    if (renderer === null) {
+      return null;
+    }
+    const options: RenderMarkdownOptions =
+      typeof markdownTableLabel === 'string' ? { tableLabel: markdownTableLabel } : {};
+    return (source: string) => renderer(source, options);
+  });
   let effectiveHtml = $derived(
-    hasMarkdown && renderMarkdownFn !== null ? renderMarkdownFn(markdown ?? '') : html
+    hasMarkdown && messageMarkdownRenderer !== null ? messageMarkdownRenderer(markdown ?? '') : html
   );
   let hasHtml = $derived(typeof effectiveHtml === 'string' && effectiveHtml.length > 0);
 
@@ -128,7 +143,7 @@
       (!hasMarkdown || renderMarkdownFn !== null)
   );
   let typewriterRenderText = $derived(
-    hasMarkdown && renderMarkdownFn !== null ? { renderText: renderMarkdownFn } : {}
+    hasMarkdown && messageMarkdownRenderer !== null ? { renderText: messageMarkdownRenderer } : {}
   );
   // Clamped at the boundary the way LoadingDots clamps `dots`, so the prop's floor is part
   // of this component's contract rather than something a consumer discovers. The finite

package/dist/ChatMessage/properties.d.ts

@@ -20,6 +20,12 @@ export type OptionalChatMessageProperties = {
      * (for server-rendered markdown use `MarkdownText` or `renderMarkdown`).
      */
     markdown?: string;
+    /**
+     * Accessible name for each table scroll region rendered from `markdown`, including
+     * progressive/typewriter rendering. Omitted or empty leaves the shared renderer's
+     * unnamed, keyboard-scrollable wrapper unchanged. Does not alter `html` or `body`.
+     */
+    markdownTableLabel?: string;
     /**
      * Replaces the rendered bubble body with arbitrary markup while keeping the
      * message chrome (role styling, avatar, header, attachments, copy/retry/

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -28,13 +28,15 @@
     onretry,
     onfeedback,
     testId,
-    classes
+    classes,
+    ariaLabel = 'Conversation messages'
   }: ChatMessageListProperties = $props();
 
   let listEl: HTMLElement | null = $state(null);
   let innerEl: HTMLElement | null = $state(null);
   let atBottom = $state(true);
   let scrollable = $state(false);
+  let keyboardScrollable = $state(false);
   let pinActive = false;
   // Set when a turn without pinHold has asked for its reservation back, but the reply is not yet
   // tall enough to hold the pinned position without it. Cleared by tryReleasePin.
@@ -78,6 +80,7 @@
 
   function reportScrollState(node: HTMLElement): void {
     atBottom = isNearBottom(node);
+    keyboardScrollable = node.scrollHeight - node.clientHeight > 1;
     scrollable = node.scrollHeight - node.clientHeight > NEAR_BOTTOM_THRESHOLD;
     onscrollstate?.({ atBottom, scrollable });
   }
@@ -260,19 +263,29 @@
     if (typeof ResizeObserver === 'undefined') {
       return;
     }
+    let pendingFrame: number | null = null;
     const observer = new ResizeObserver(() => {
-      if (listEl === null) {
+      if (pendingFrame !== null) {
         return;
       }
-      if (scrollPolicy === 'near-bottom' && autoscroll && atBottom) {
-        listEl.scrollTop = listEl.scrollHeight;
-      }
-      tryReleasePin();
-      reportScrollState(listEl);
+      pendingFrame = requestAnimationFrame(() => {
+        pendingFrame = null;
+        if (listEl === null || !node.isConnected) {
+          return;
+        }
+        if (scrollPolicy === 'near-bottom' && autoscroll && atBottom) {
+          listEl.scrollTop = listEl.scrollHeight;
+        }
+        tryReleasePin();
+        reportScrollState(listEl);
+      });
     });
     observer.observe(node);
     return {
       destroy(): void {
+        if (pendingFrame !== null) {
+          cancelAnimationFrame(pendingFrame);
+        }
         observer.disconnect();
       }
     };
@@ -291,9 +304,14 @@
   };
 </script>
 
+<!-- The transcript is an independent scrolling surface. Native keyboard focus
+     enables the browser's scroll keys while it overflows, even without actions. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   class="chat-message-list {classes ?? ''}"
   role="log"
+  aria-label={ariaLabel}
+  tabindex={keyboardScrollable ? 0 : null}
   aria-live="polite"
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
@@ -323,6 +341,7 @@
           content={msg.content}
           html={msg.html}
           markdown={msg.markdown}
+          markdownTableLabel={msg.markdownTableLabel}
           body={typeof messageBody === 'function' ? bodyFor : null}
           streaming={msg.streaming}
           typewriter={msg.typewriter}
@@ -352,6 +371,11 @@
 </div>
 
 <style>
+  .chat-message-list:focus-visible {
+    outline: var(--chat-message-list-focus-outline, 2px solid currentColor);
+    outline-offset: -2px;
+  }
+
   .chat-message-list {
     box-sizing: border-box;
     display: flex;

package/dist/ChatMessageList/properties.d.ts

@@ -44,6 +44,8 @@ export type OptionalChatMessageListProperties = {
     allowCopy?: boolean;
     testId?: string;
     classes?: string;
+    /** Accessible transcript name. Default: `Conversation messages`. */
+    ariaLabel?: string;
 };
 export type ChatMessageListEventProperties = {
     /**

package/dist/Choicebox/Choicebox.svelte

@@ -82,12 +82,20 @@
     onclick?.(selected);
   }
 
-  // The form control is `tabindex="-1"`, so the browser's own "focus the invalid
-  // field" step would land on an element the user cannot see or reach. Focus the
-  // card that carries the role instead.
-  function handleInvalid(e: Event): void {
-    e.preventDefault();
-    card?.focus();
+  // Let native validation choose the first invalid control. Redirect only its
+  // actual focus to the visible card, so checkValidity() stays a silent query
+  // and later invalid fields cannot replace the first field's focus.
+  function handleNativeFocus(event: FocusEvent & { currentTarget: HTMLInputElement }): void {
+    const carrier = event.currentTarget;
+    // Finish native interactive validation before moving focus. Firefox can
+    // open its validation UI after a synchronous handoff and swallow the next
+    // pointer click. A later owner or an unmounted card must keep its focus.
+    queueMicrotask(() => {
+      const root = carrier.getRootNode();
+      if (card?.isConnected && 'activeElement' in root && root.activeElement === carrier) {
+        card.focus();
+      }
+    });
   }
 
   function handleKeyDown(e: KeyboardEvent): void {
@@ -143,21 +151,6 @@
   testID={testId}
   {@attach groupMembership}
 >
-  <input
-    type={mode === 'radio' ? 'radio' : 'checkbox'}
-    class="native-control"
-    checked={selected}
-    {disabled}
-    {value}
-    {required}
-    name={typeof name === 'string' ? name : null}
-    form={typeof form === 'string' ? form : null}
-    oninvalid={handleInvalid}
-    tabindex={-1}
-    aria-hidden="true"
-    data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
-    testID={typeof testId === 'string' ? `${testId}-native-input` : null}
-  />
   {#if typeof children === 'function'}
     {@render children()}
   {/if}
@@ -171,6 +164,23 @@
   {/if}
 </div>
 
+<!-- Native form participation remains outside the interactive accessibility owner. -->
+<input
+  type={mode === 'radio' ? 'radio' : 'checkbox'}
+  class="native-control"
+  checked={selected}
+  {disabled}
+  {value}
+  {required}
+  name={typeof name === 'string' ? name : null}
+  form={typeof form === 'string' ? form : null}
+  onfocus={handleNativeFocus}
+  tabindex={-1}
+  aria-hidden="true"
+  data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
+  testID={typeof testId === 'string' ? `${testId}-native-input` : null}
+/>
+
 {#if field.showsError}
   <div
     id={field.errorId}
@@ -197,8 +207,8 @@
   .native-control {
     position: absolute;
     opacity: 0;
-    width: 0;
-    height: 0;
+    width: 1px;
+    height: 1px;
     margin: 0;
     pointer-events: none;
   }

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {
+    DateRangeCompareDraft,
     DateRangePickerProperties,
     DateRangePreset,
     TimeDisplayBoundary
@@ -95,8 +96,11 @@
   let draftStart: Date | null = $state(null);
   let draftEnd: Date | null = $state(null);
   let draftValue: Date | null = $state(null);
-  let draftCompareStart: Date | null = $state(null);
-  let draftCompareEnd: Date | null = $state(null);
+  // The compare range is a draft too. It is handed to `compareCalendar` so a consumer's calendar
+  // has somewhere to write that Apply commits and Cancel discards; `compareSnapshot` is what the
+  // committed range was when the session opened, which is what Cancel restores.
+  const compareDraft: DateRangeCompareDraft = $state({ start: null, end: null });
+  let compareSnapshot: DateRangeCompareDraft = $state({ start: null, end: null });
 
   // Tracks the label of the currently active preset, or null when the user
   // made a custom calendar selection (or before any selection is made).
@@ -339,6 +343,67 @@
     }
   }
 
+  const sameInstant = (a: Date | null, b: Date | null): boolean =>
+    (a === null ? null : a.getTime()) === (b === null ? null : b.getTime());
+
+  // The compare calendar lives in the main panel unless a standalone `compareTrigger` gives it
+  // its own panel and its own Apply/Cancel.
+  const compareInMain: boolean = $derived(
+    typeof compareCalendar === 'function' && typeof compareTrigger !== 'function'
+  );
+
+  function seedCompareSession(): void {
+    compareSnapshot = { start: compareStart, end: compareEnd };
+    compareDraft.start = compareStart;
+    compareDraft.end = compareEnd;
+  }
+
+  // What Apply commits. A calendar bound to `compareDraft` edits the draft. A calendar bound
+  // straight to `compareStart`/`compareEnd` (how this component's docs wired it before the draft
+  // was exposed) edits the committed values in place and leaves the draft at its seed; Apply used
+  // to write that stale seed back over the pick, and could not be pressed at all on first use.
+  const pendingCompare = $derived.by(() => {
+    const edited =
+      !sameInstant(compareDraft.start, compareSnapshot.start) ||
+      !sameInstant(compareDraft.end, compareSnapshot.end);
+    return edited
+      ? { start: compareDraft.start, end: compareDraft.end }
+      : { start: compareStart, end: compareEnd };
+  });
+  const canApplyCompare: boolean = $derived(
+    pendingCompare.start !== null && pendingCompare.end !== null
+  );
+
+  function commitCompare(): void {
+    const { start, end } = pendingCompare;
+    if (start === null || end === null) {
+      return;
+    }
+    compareStart = start;
+    compareEnd = end;
+    onapplycompare?.({ compareStart: start, compareEnd: end, presetLabel: selectedPresetLabel });
+  }
+
+  // Cancel, Escape and an outside press all land here: whatever the session did to the draft or
+  // to the committed range goes back to what it was when the session opened.
+  function discardCompare(): void {
+    if (!sameInstant(compareStart, compareSnapshot.start)) {
+      compareStart = compareSnapshot.start;
+    }
+    if (!sameInstant(compareEnd, compareSnapshot.end)) {
+      compareEnd = compareSnapshot.end;
+    }
+    compareDraft.start = compareSnapshot.start;
+    compareDraft.end = compareSnapshot.end;
+  }
+
+  function abandonPicker(): void {
+    if (compareInMain) {
+      discardCompare();
+    }
+    closePicker();
+  }
+
   function openPicker(): void {
     // Pointer activation need not focus a button in WebKit. Return to the
     // invoking control, not an unrelated previously focused field or body.
@@ -347,8 +412,9 @@
     draftStart = rangeStart;
     draftEnd = rangeEnd;
     draftValue = value;
-    draftCompareStart = compareStart;
-    draftCompareEnd = compareEnd;
+    if (compareInMain) {
+      seedCompareSession();
+    }
 
     // Re-seed the session from the committed preset so the sidebar re-highlights it
     // by label. A direct calendar click later clears this, reverting to date matching.
@@ -500,7 +566,7 @@
   // a second click feeling dead — the panel could only be closed by clicking away.
   function togglePicker(): void {
     if (isOpen) {
-      closePicker();
+      abandonPicker();
     } else {
       openPicker();
     }
@@ -508,8 +574,7 @@
 
   function openComparePicker(): void {
     compareFocusReturnEl = compareTriggerRef ? findInteractive(compareTriggerRef) : null;
-    draftCompareStart = compareStart ?? null;
-    draftCompareEnd = compareEnd ?? null;
+    seedCompareSession();
     openCompare = true;
     tick().then(() => focusFirstElement(comparePanelRef));
   }
@@ -524,19 +589,12 @@
   }
 
   function handleApplyCompare(): void {
-    if (draftCompareStart !== null && draftCompareEnd !== null) {
-      compareStart = draftCompareStart;
-      compareEnd = draftCompareEnd;
-      onapplycompare?.({
-        compareStart: draftCompareStart,
-        compareEnd: draftCompareEnd,
-        presetLabel: selectedPresetLabel
-      });
-    }
+    commitCompare();
     closeComparePicker();
   }
 
   function handleCancelCompare(): void {
+    discardCompare();
     closeComparePicker();
   }
 
@@ -568,18 +626,8 @@
           presetLabel: selectedPresetLabel
         });
       }
-      if (
-        typeof compareCalendar === 'function' &&
-        draftCompareStart !== null &&
-        draftCompareEnd !== null
-      ) {
-        compareStart = draftCompareStart;
-        compareEnd = draftCompareEnd;
-        onapplycompare?.({
-          compareStart: draftCompareStart,
-          compareEnd: draftCompareEnd,
-          presetLabel: selectedPresetLabel
-        });
+      if (typeof compareCalendar === 'function') {
+        commitCompare();
       }
     } else {
       if (draftValue !== null) {
@@ -601,7 +649,7 @@
 
   function handleCancel(): void {
     oncancel?.();
-    closePicker();
+    abandonPicker();
   }
 
   function handlePreset(preset: DateRangePreset): void {
@@ -893,9 +941,10 @@
      outside both at once. */
   function handleDismissOutside(): void {
     if (isOpen) {
-      closePicker();
+      abandonPicker();
     }
     if (openCompare) {
+      discardCompare();
       closeComparePicker();
     }
   }
@@ -1053,7 +1102,7 @@
         >
           {#if typeof compareCalendar === 'function'}
             <div class="drp-compare-panel-body">
-              {@render compareCalendar()}
+              {@render compareCalendar(compareDraft)}
             </div>
           {/if}
           <div class="drp-footer">
@@ -1066,7 +1115,7 @@
               onclick={handleApplyCompare}
               ariaLabel="Apply compare selection"
               classes="drp-btn-apply"
-              disabled={draftCompareStart === null || draftCompareEnd === null}>Apply</Button
+              disabled={!canApplyCompare}>Apply</Button
             >
           </div>
         </div>
@@ -1442,7 +1491,7 @@
                causes a Svelte 5 runtime error. -->
           {#if typeof compareCalendar === 'function' && typeof compareTrigger !== 'function'}
             <div class="drp-compare-section">
-              {@render compareCalendar()}
+              {@render compareCalendar(compareDraft)}
             </div>
           {/if}
         </div>

package/dist/DateRangePicker/properties.d.ts

@@ -1,4 +1,12 @@
 import type { Snippet } from 'svelte';
+/**
+ * The compare range a `compareCalendar` snippet edits before Apply commits it. A plain
+ * reactive object, so a Calendar can bind to its fields.
+ */
+export type DateRangeCompareDraft = {
+    start: Date | null;
+    end: Date | null;
+};
 export type DateRangePreset = {
     label: string;
     getValue: () => {
@@ -102,8 +110,16 @@ export type OptionalDateRangePickerProperties = {
     compareStart?: Date | null;
     /** End of compare range (bindable). Used when compareCalendar snippet is provided. */
     compareEnd?: Date | null;
-    /** Snippet rendered in the compare-calendar slot. Consumer controls all compare UI. */
-    compareCalendar?: Snippet;
+    /**
+     * Snippet rendered in the compare-calendar slot. Consumer controls all compare UI.
+     *
+     * It receives the compare draft, a reactive `{ start, end }` that Apply commits and that
+     * Cancel, Escape and an outside press discard. Bind a Calendar to it:
+     * `bind:rangeStart={draft.start} bind:rangeEnd={draft.end}`. A snippet that takes no
+     * argument and edits `compareStart`/`compareEnd` directly still works: Apply keeps what
+     * it wrote, and Cancel restores the range the session opened with.
+     */
+    compareCalendar?: Snippet<[DateRangeCompareDraft]>;
     /** Which day of the week starts the calendar. 0=Sunday, 1=Monday. */
     weekStartsOn?: 0 | 1;
     /** BCP-47 locale string for date formatting. */

package/dist/Draggable/Draggable.svelte

@@ -134,13 +134,15 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- This named content group moves with arrow keys; it can contain independent
+     controls, so button semantics would hide their accessibility semantics. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
 <div
   class="draggable {classes ?? ''}"
   class:dragging={active !== null}
   data-pw={typeof testId === 'string' ? testId : null}
   tabindex={disabled ? -1 : 0}
+  role="group"
   aria-label={dragLabel}
   style:transform={`translate(${x}px, ${y}px)`}
   onpointerdown={startDrag}