@juspay/svelte-ui-components 4.51.0 → 4.52.0

package/dist/Modal/Modal.svelte

@@ -3,7 +3,7 @@
   import { onMount, onDestroy, tick } from 'svelte';
   import ModalAnimation from '../Animations/ModalAnimation.svelte';
   import OverlayAnimation from '../Animations/OverlayAnimation.svelte';
-  import { createDebouncer, lockBodyScroll, unlockBodyScroll } from '../utils';
+  import { createDebouncer, acquireScrollLock, resolveScrollContainer } from '../utils';
   import { focusEntryPoint, focusTrapTabTarget, getActiveElement } from '../_interaction/focus';
   import { registerDismissible } from '../_interaction/dismissal';
   import Button from '../Button/Button.svelte';
@@ -46,8 +46,10 @@
     overlayFadeIn = false,
     usePortal = false,
     lockScroll = true,
+    scrollContainer,
     autoDismissAfter = null,
     ariaLabel,
+    ariaDescribedby,
     role,
     overlayAriaLabel
   }: ModalProperties = $props();
@@ -64,10 +66,13 @@
 
   let dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
-  // Fix [major]: plain const so the debouncer closure retains its internal lastCallTime state
-  // across re-renders. $derived would recreate the debouncer on every reactive re-evaluation,
-  // resetting the timer and breaking debounce correctness.
-  const debounce = createDebouncer(debounceTime);
+  // One plain const, so the debouncer keeps its lastCallTime across re-renders and every
+  // dismissal path (overlay click, Escape, back-press) measures against the same history.
+  // $derived would rebuild it on every change and forget when it last fired. The delay is
+  // passed as a getter instead of the value: a value is captured when this line runs, so a
+  // `debounceTime` changed while the modal is open would never be seen. Reading the prop
+  // inside the closure picks up the current one on each dismissal.
+  const debounce = createDebouncer(() => debounceTime);
 
   /**
    * Where a portalled node is allowed to land. Svelte scopes a custom element's
@@ -233,7 +238,7 @@
   // prop changed while the modal was open: turned off, the count never comes back
   // down and the page stays frozen; turned on, this modal releases a hold another
   // component is still relying on. Release exactly what was taken.
-  let heldScrollLock = false;
+  let releaseScrollLock: (() => void) | null = null;
 
   // Set once in onMount, cleared once in onDestroy -- registerDismissible's
   // own release function already tolerates a repeat call, but this still
@@ -249,8 +254,7 @@
       onEscape: handleEscape
     });
     if (lockScroll) {
-      lockBodyScroll();
-      heldScrollLock = true;
+      releaseScrollLock = acquireScrollLock(resolveScrollContainer(modalContent, scrollContainer));
     }
     if (typeof autoDismissAfter === 'number') {
       dismissTimer = setTimeout(() => onclose?.(), autoDismissAfter);
@@ -280,10 +284,8 @@
       clearTimeout(dismissTimer);
     }
     if (typeof window !== 'undefined') {
-      if (heldScrollLock) {
-        unlockBodyScroll();
-        heldScrollLock = false;
-      }
+      releaseScrollLock?.();
+      releaseScrollLock = null;
       if (supportHardwareBackPress) {
         if (!backPressed) {
           history.back();
@@ -328,6 +330,7 @@
           role={role ?? null}
           aria-modal={role != null ? 'true' : null}
           aria-label={ariaLabel ?? null}
+          aria-describedby={ariaDescribedby ?? null}
           tabindex="-1"
         >
           {#if (typeof header?.leftImage === 'string' && header.leftImage.length > 0) || (typeof header?.text === 'string' && header.text.length > 0) || (typeof header?.rightImage === 'string' && header.rightImage.length > 0)}

package/dist/Modal/properties.d.ts

@@ -1,3 +1,4 @@
+import type { ScrollContainer } from '../types';
 import type { ButtonProperties } from '../Button/properties';
 import type { ModalTransition } from '../types';
 import type { Snippet } from 'svelte';
@@ -19,6 +20,11 @@ export type ModalEntryAnimation = 'fade' | 'slide-up' | 'slide-down';
 export type ModalRole = 'dialog' | 'alertdialog';
 export type ModalProperties = OptionalModalProperties & ModalEventProperties;
 export type OptionalModalProperties = {
+    /** Scroll owner, resolved once per open span. Omit for the overlay's ownerDocument.body.
+     * Supply the embedded scroll element or a getter; explicit null means no lock.
+     * Changing ownership while open takes effect on the next open, and teardown
+     * always releases the originally acquired container. */
+    scrollContainer?: ScrollContainer;
     size?: ModalSize;
     align?: ModalAlign;
     showOverlay?: boolean;
@@ -40,6 +46,13 @@ export type OptionalModalProperties = {
         primaryButton?: ButtonProperties;
         secondaryButton?: ButtonProperties;
     };
+    /**
+     * Milliseconds during which a repeat dismissal (overlay click, Escape, hardware
+     * back-press) is dropped after one has fired. One window is shared by all three
+     * paths. Read when each dismissal arrives, so a value changed while the modal
+     * is open applies to the next one, without forgetting when the last fired.
+     * Default: 700.
+     */
     debounceTime?: number;
     leftImageTestId?: string;
     /** Accessible name for the left header image's role="button" wrapper (e.g. a back control). Rendered as aria-label. */
@@ -63,7 +76,7 @@ export type OptionalModalProperties = {
     overlayFadeIn?: boolean;
     /** When true, mounts the overlay at document.body to escape clipping/stacking contexts. Default: false. */
     usePortal?: boolean;
-    /** When true, locks document.body scroll while the modal is mounted, restoring it on unmount. Default: true (matches prior unconditional behavior). Set false for a non-blocking modal that should allow background scroll. */
+    /** When true, locks the selected scrollContainer (default: ownerDocument.body) while the modal is mounted, restoring it on unmount. Default: true (matches prior unconditional behavior). Set false for a non-blocking modal that should allow background scroll. */
     lockScroll?: boolean;
     /** Milliseconds after mount to automatically fire onclose, e.g. for a transient success/confirmation modal. null (default) disables auto-dismiss. */
     autoDismissAfter?: number | null;
@@ -75,6 +88,21 @@ export type OptionalModalProperties = {
      * accessible name at all.
      */
     ariaLabel?: string;
+    /**
+     * `id` of the element that describes the modal, rendered as `aria-describedby`
+     * on the modal content panel (the element carrying `role`/`aria-modal` when
+     * `role` is set). An `alertdialog`'s message belongs here: without it a screen
+     * reader announces the name and role but not what the dialog is asking.
+     * Default: unset -- no `aria-describedby` is rendered, so an existing consumer
+     * sees no DOM/ARIA change.
+     *
+     * The browser resolves the id inside the panel's own root, so the described
+     * element must live in the same tree as the panel. In the web-component build
+     * that means content supplied through the `content` snippet property, not
+     * light-DOM content passed through the default `<slot>`, which sits outside
+     * the shadow root and cannot be reached by id.
+     */
+    ariaDescribedby?: string;
     /**
      * ARIA role for the modal content panel. Default: unset -- the panel
      * renders no `role` and no `aria-modal` at all, byte-for-byte matching

package/dist/Pagination/Pagination.svelte

@@ -127,6 +127,7 @@
 
 <style>
   .pagination {
+    flex-wrap: wrap;
     display: var(--pagination-display, flex);
     gap: var(--pagination-gap, 4px);
     align-items: var(--pagination-align-items, center);

package/dist/PieChart/PieChart.svelte

@@ -3,6 +3,8 @@
   import { DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import type { PieChartProperties } from './properties';
   import ChartContainer from '../_chart/ChartContainer.svelte';
+  import LabelPlate from '../_chart/LabelPlate.svelte';
+  import { defaultChartName, resolveChartName } from '../_chart/a11y';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import Legend from '../_chart/Legend.svelte';
   import DeltaIndicator from '../DeltaIndicator/DeltaIndicator.svelte';
@@ -38,6 +40,8 @@
     empty,
     onsliceclick,
     onslicehover,
+    ariaLabel,
+    ariaDescription,
     testId,
     classes,
     tooltipPortal = false,
@@ -62,6 +66,7 @@
   let chartHeight = $state(0);
   let hoveredIndex = $state<number | null>(null);
   let focusedIndex = $state<number | null>(null);
+  let focusedSlice = $state(false);
   let programmaticIndex = $state<number | null>(null);
   let mouseX = $state(0);
   let mouseY = $state(0);
@@ -135,6 +140,13 @@
         `${format(v)}\u00A0${pctFormat(v)}`
   );
   let isEmpty = $derived(data.length === 0 || total === 0);
+  let chartName = $derived(
+    resolveChartName(ariaLabel, defaultChartName('pie', { seriesNames: data.map((d) => d.label) }))
+  );
+  let hasMarks = $derived.by(() => !isEmpty && slices.length > 0);
+  // A center snippet can contain a real action even when the data is empty.
+  // Keep that child exposed; the empty slice geometry itself stays out of Tab.
+  let interactiveDrawing = $derived(hasMarks || typeof center === 'function');
 
   // When semiCircle is true the effective aspect ratio is driven by:
   // 1. The explicit `aspectRatio` prop (highest priority — always wins).
@@ -386,21 +398,20 @@
     };
   });
 
-  // ── Assistive-tech status region ───────────────────────────────
-  // Mirrors the tooltip's exact text (value AND percentage) into a live region
-  // every slice is described-by, so a screen reader user gets the same detail a
-  // pointer hover shows without needing pointer hover -- and, because it reads
-  // activeIndex rather than hoveredIndex, it also announces the declarative
-  // highlightedIndex prop and the imperative ChartHighlightAPI, neither of
-  // which fires a focus event of its own.
+  // A focused slice is spoken once, by its complete name. The shared status
+  // region is not a point description: that gave every unfocused slice the
+  // last-announced slice's text, and echoed it on focus. Keep the live region
+  // for pointer/legend and programmatic highlights, which lack that name.
   const statusId = `pie-status-${instanceId}`;
-  let statusText = $derived.by(() => {
-    if (activeIndex === null) {
-      return '';
-    }
-    const s = sliceAt(activeIndex);
-    return s === null ? '' : `${s.label}: ${format(s.value)} (${pctFormat(s.value)})`;
-  });
+  function sliceAriaLabel(index: number): string {
+    const slice = sliceAt(index);
+    return slice === null
+      ? ''
+      : `${slice.label}: ${format(slice.value)} (${pctFormat(slice.value)})`;
+  }
+  let statusText = $derived(
+    activeIndex === null || focusedSlice ? '' : sliceAriaLabel(activeIndex)
+  );
 
   // ── Interactions ───────────────────────────────────────────────
   // Family-wide contract shared with BarChart/FunnelChart/DualAxisBarChart:
@@ -457,8 +468,9 @@
   }
 
   // Wired to focus on both slices and legend rows.
-  function handleFocus(i: number) {
+  function handleFocus(i: number, slice = false) {
     focusedIndex = i;
+    focusedSlice = slice;
     notifyHoverChange();
   }
 
@@ -467,6 +479,7 @@
   // hovered.
   function handleBlur() {
     focusedIndex = null;
+    focusedSlice = false;
     notifyHoverChange();
   }
 
@@ -539,6 +552,9 @@
       aspectRatio={effectiveAspectRatio}
       {maxHeight}
       {minHeight}
+      ariaLabel={chartName}
+      {ariaDescription}
+      interactive={interactiveDrawing}
     >
       <g transform="translate({cx}, {cy})">
         {#each slices as slice (slice.index)}
@@ -548,28 +564,18 @@
             class:dimmed={activeIndex !== null && activeIndex !== slice.index}
             d={slice.path}
             fill={slice.color}
-            tabindex="0"
+            tabindex={hasMarks ? 0 : null}
             role="button"
-            aria-label="{slice.label}: {format(slice.value)}"
-            aria-describedby={statusId}
+            aria-hidden={hasMarks ? null : 'true'}
+            aria-label={sliceAriaLabel(slice.index)}
             onmouseenter={(e) => handlePointerEnter(e, slice.index)}
             onmousemove={trackMouse}
             onmouseleave={handlePointerLeave}
-            onfocus={() => handleFocus(slice.index)}
+            onfocus={() => handleFocus(slice.index, true)}
             onblur={handleBlur}
             onkeydown={(e) => handleKeydown(e, slice.index)}
             onclick={() => onsliceclick?.({ index: slice.index, slice: data[slice.index] })}
           />
-          {#if visibleSliceLabels.has(slice.index)}
-            <text
-              class="slice-label"
-              class:label-outside={labelPosition === 'outside'}
-              x={slice.labelX}
-              y={slice.labelY}
-              text-anchor="middle"
-              dominant-baseline="middle">{visibleSliceLabels.get(slice.index)}</text
-            >
-          {/if}
         {/each}
 
         {#if innerR > 0 && typeof center === 'function' && centerBoxSize > 0}
@@ -584,6 +590,22 @@
             </div>
           </foreignObject>
         {/if}
+        <!-- Labels and their plates paint after every slice and center surface. -->
+        {#each slices as slice (slice.index)}
+          {#if visibleSliceLabels.has(slice.index)}
+            <LabelPlate>
+              <text
+                class="slice-label"
+                aria-hidden="true"
+                class:label-outside={labelPosition === 'outside'}
+                x={slice.labelX}
+                y={slice.labelY}
+                text-anchor="middle"
+                dominant-baseline="middle">{visibleSliceLabels.get(slice.index)}</text
+              >
+            </LabelPlate>
+          {/if}
+        {/each}
       </g>
     </ChartContainer>
 

package/dist/PieChart/properties.d.ts

@@ -40,6 +40,10 @@ export type OptionalPieChartProperties = {
     tooltipPortal?: boolean;
     center?: Snippet;
     empty?: Snippet;
+    /** Accessible name of the drawing; omit to derive one from the plotted data. */
+    ariaLabel?: string;
+    /** Longer chart description, resolved inside the drawing's own DOM/shadow root. */
+    ariaDescription?: string;
     testId?: string;
     classes?: string;
     semiCircle?: boolean;

package/dist/Pill/Pill.svelte

@@ -39,6 +39,11 @@
    * once per mounted instance is what a consumer needs to act on, and it costs
    * nothing on subsequent updates.
    */
+  // Reading `attrs` once is the point of this block: it is a dev notice about what the consumer
+  // passed at mount, not state. Rendering reads `attrs` live in the spread on the root element
+  // below, so an `attrs` that changes afterwards is still applied; only the notice is not
+  // repeated. The ignore is on this one block, whose only reference is that read.
+  // svelte-ignore state_referenced_locally
   if (import.meta.env?.DEV === true) {
     for (const message of discardedAttrWarnings('Pill', PILL_MANAGED_ATTRS, attrs)) {
       console.warn(message);

package/dist/Radio/Radio.svelte

@@ -23,7 +23,16 @@
      rejected. `describeField` composes the reference from the messages that are
      actually rendered, so aria-describedby never points at an id that is not in
      the DOM -- which passes an attribute assertion and resolves to nothing in a
-     real reader. */
+     real reader.
+
+     `aria-invalid` is deliberately NOT put on the input. WAI-ARIA 1.2 supports it on
+     radiogroup (and checkbox, textbox, ...) but not on role="radio", where the
+     attribute is deprecated, so emitting it was an unsupported attribute that the
+     compiler flagged and some assistive technology ignores. The error is reachable
+     the way FileInput's is -- aria-describedby on the control plus role="alert" on
+     the message -- and the state is exposed as `data-invalid` for styling. A group
+     is invalid as a whole, so that state belongs on the consumer's
+     role="radiogroup" wrapper (see docs/Radio.md). */
   const fieldUid = $props.id();
   const field = $derived(
     describeField(fieldUid, { error: errorMessage, info: infoMessage, invalid })
@@ -49,7 +58,6 @@
   <input
     type="radio"
     aria-describedby={field.describedBy}
-    aria-invalid={field.ariaInvalid}
     class="radio-input"
     {name}
     {value}
@@ -59,6 +67,7 @@
     form={typeof form === 'string' ? form : null}
     data-state={checked ? 'checked' : 'unchecked'}
     data-disabled={disabled ? '' : null}
+    data-invalid={field.ariaInvalid === null ? null : ''}
     onchange={handleChange}
   />
   <span class="radio-indicator" class:checked class:disabled>

package/dist/Radio/properties.d.ts

@@ -6,7 +6,10 @@ export type MandatoryRadioProperties = {
 export type OptionalRadioProperties = {
     /**
      * Text shown, and announced, when the control is in error. Linked to the
-     * control through `aria-describedby`, and sets `aria-invalid` while present.
+     * control through `aria-describedby` and announced through `role="alert"`;
+     * the input carries `data-invalid` while present. It does not set
+     * `aria-invalid`, which WAI-ARIA 1.2 does not support on `role="radio"` --
+     * put that on the `role="radiogroup"` that wraps the group.
      */
     errorMessage?: string | null;
     /**
@@ -17,7 +20,9 @@ export type OptionalRadioProperties = {
     infoMessage?: string | null;
     /**
      * Marks the control invalid without supplying a message, for a consumer
-     * driving validity from a server or its own rules.
+     * driving validity from a server or its own rules. Sets `data-invalid` on
+     * the input; the announced group state is the wrapping `role="radiogroup"`'s
+     * `aria-invalid`.
      */
     invalid?: boolean;
     selectedValue?: string;