@juspay/svelte-ui-components 4.27.6 → 4.28.0

package/dist/Slider/Slider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { describeField } from '../_field/description';
   import type { SliderProperties } from './properties';
 
   let {
@@ -14,11 +15,47 @@
     testId,
     onchange,
     oninput,
-    classes
+    classes,
+    ariaValueText,
+    name,
+    form,
+    errorMessage,
+    infoMessage,
+    invalid = false
   }: SliderProperties = $props();
 
-  let percentage = $derived(((value - min) / (max - min)) * 100);
+  /* The control and the text that explains it were never linked: a screen-reader
+     user reaching this control heard its name and nothing about why it was
+     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. */
+  const fieldUid = $props.id();
+  const field = $derived(
+    describeField(fieldUid, { error: errorMessage, info: infoMessage, invalid })
+  );
+
+  // Only the paint is clamped. The value stays exactly what the consumer passed, so a
+  // slider handed a number outside its own bounds reports that number rather than
+  // being silently corrected — but the track never renders a negative, >100% or NaN
+  // fill. An unusable range (empty, reversed, non-finite, or one whose width or
+  // quotient overflows to Infinity) has no meaningful fill, so it paints none.
+  const percentage: number = $derived.by(() => {
+    const span = max - min;
+    if (![value, min, max, span].every((part) => Number.isFinite(part)) || span <= 0) {
+      return 0;
+    }
+    const raw = ((value - min) / span) * 100;
+    return Number.isFinite(raw) ? Math.min(100, Math.max(0, raw)) : 0;
+  });
   let displayValue = $derived(labelFormatter ? labelFormatter(value) : String(value));
+  const valueText: string | null = $derived(
+    typeof ariaValueText === 'string'
+      ? ariaValueText
+      : labelFormatter
+        ? labelFormatter(value)
+        : null
+  );
 
   function handleInput(e: Event) {
     if (e.target instanceof HTMLInputElement) {
@@ -38,12 +75,18 @@
 <div class="slider-container {classes ?? ''}" class:disabled>
   <input
     type="range"
+    aria-describedby={field.describedBy}
+    aria-invalid={field.ariaInvalid}
     class="slider-input"
     {min}
     {max}
     {step}
     {value}
     {disabled}
+    {name}
+    form={typeof form === 'string' ? form : null}
+    aria-valuetext={valueText}
+    data-disabled={disabled ? '' : null}
     aria-label={typeof ariaLabel === 'string' ? ariaLabel : null}
     aria-labelledby={typeof ariaLabel === 'string' ? null : (ariaLabelledby ?? null)}
     data-pw={typeof testId === 'string' ? testId : null}
@@ -57,6 +100,28 @@
   {/if}
 </div>
 
+{#if field.showsError}
+  <div
+    id={field.errorId}
+    role="alert"
+    class="field-error"
+    data-pw={typeof testId === 'string' ? `${testId}-error-message` : null}
+    testID={typeof testId === 'string' ? `${testId}-error-message` : null}
+  >
+    {errorMessage}
+  </div>
+{/if}
+{#if field.showsInfo}
+  <div
+    id={field.infoId}
+    class="field-info"
+    data-pw={typeof testId === 'string' ? `${testId}-info-message` : null}
+    testID={typeof testId === 'string' ? `${testId}-info-message` : null}
+  >
+    {infoMessage}
+  </div>
+{/if}
+
 <style>
   .slider-container {
     display: flex;
@@ -109,8 +174,10 @@
     opacity: var(--slider-thumb-opacity, 1);
     cursor: pointer;
     transition:
-      transform 0.15s ease,
-      opacity 0.15s ease;
+      transform var(--slider-thumb-transition-duration, var(--motion-duration, 0.15s))
+        var(--slider-thumb-transition-easing, var(--motion-easing, ease)),
+      opacity var(--slider-thumb-transition-duration, var(--motion-duration, 0.15s))
+        var(--slider-thumb-transition-easing, var(--motion-easing, ease));
   }
 
   .slider-input::-moz-range-thumb {
@@ -123,8 +190,10 @@
     opacity: var(--slider-thumb-opacity, 1);
     cursor: pointer;
     transition:
-      transform 0.15s ease,
-      opacity 0.15s ease;
+      transform var(--slider-thumb-transition-duration, var(--motion-duration, 0.15s))
+        var(--slider-thumb-transition-easing, var(--motion-easing, ease)),
+      opacity var(--slider-thumb-transition-duration, var(--motion-duration, 0.15s))
+        var(--slider-thumb-transition-easing, var(--motion-easing, ease));
   }
 
   .slider-input:hover::-webkit-slider-thumb {
@@ -159,4 +228,16 @@
     color: var(--slider-value-color, #333333);
     white-space: nowrap;
   }
+
+  .field-error {
+    color: var(--field-error-color, #c5120a);
+    font-size: var(--field-error-font-size, 12px);
+    margin: var(--field-error-margin, 4px 0 0 0);
+  }
+
+  .field-info {
+    color: var(--field-info-color, #6b7280);
+    font-size: var(--field-info-font-size, 12px);
+    margin: var(--field-info-margin, 4px 0 0 0);
+  }
 </style>

package/dist/Slider/properties.d.ts

@@ -3,6 +3,22 @@ export type MandatorySliderProperties = {
     value: number;
 };
 export type OptionalSliderProperties = {
+    /**
+     * Text shown, and announced, when the control is in error. Linked to the
+     * control through `aria-describedby`, and sets `aria-invalid` while present.
+     */
+    errorMessage?: string | null;
+    /**
+     * Persistent helper text describing the control. Linked through
+     * `aria-describedby` too, so it is read before the user trips an error rather
+     * than only after.
+     */
+    infoMessage?: string | null;
+    /**
+     * Marks the control invalid without supplying a message, for a consumer
+     * driving validity from a server or its own rules.
+     */
+    invalid?: boolean;
     min?: number;
     max?: number;
     step?: number;
@@ -23,6 +39,16 @@ export type OptionalSliderProperties = {
     ariaLabelledby?: string;
     testId?: string;
     classes?: string;
+    /** Spoken in place of the raw number, for a value whose meaning the digits do not
+     *  carry ("Quiet", "Large"). Falls back to `labelFormatter(value)` when that is
+     *  supplied, and is omitted entirely when neither is. An explicit empty string is
+     *  honoured rather than treated as absent. */
+    ariaValueText?: string;
+    /** Submits the current value under this name. Omitted while disabled. */
+    name?: string;
+    /** `id` of a form elsewhere in the same document. Unavailable through
+     *  `<sui-slider>`, whose input sits in a shadow root. */
+    form?: string;
 };
 export type SliderEventProperties = {
     onchange?: (value: number) => void;

package/dist/Snippet/Snippet.svelte

@@ -14,6 +14,7 @@
     copiedLabel = 'Copied!',
     copyResetMs = 2000,
     oncopy,
+    onerror,
     classes
   }: SnippetProperties = $props();
 
@@ -29,6 +30,9 @@
     },
     get oncopy() {
       return oncopy;
+    },
+    get onerror() {
+      return onerror;
     }
   });
   onDestroy(copyState.destroy);

package/dist/Snippet/copyState.svelte.d.ts

@@ -31,6 +31,17 @@ export type CopyStateOptions = {
     copyResetMs?: number;
     /** Called once per successful copy. Never called when the write fails. */
     oncopy?: () => void;
+    /**
+     * Called instead of `oncopy` when a write cannot complete -- a rejection
+     * (denied permission, a non-secure context) or a Clipboard API that is
+     * absent entirely (SSR, a sandboxed iframe). Receives the rejection
+     * reason, or an `Error` when the API itself is missing.
+     *
+     * Without it the caller sees only `copy()` resolving `false` and cannot
+     * distinguish "refused" from "no clipboard here", which is the difference
+     * between a message worth showing the user and one worth suppressing.
+     */
+    onerror?: (reason: unknown) => void;
 };
 export type CopyState = {
     /** True from a successful copy until the reset delay elapses. */
@@ -38,7 +49,8 @@ export type CopyState = {
     /**
      * Writes `text` to the clipboard. Resolves `true` on success, `false` if
      * the clipboard was unavailable or refused — it never rejects, so a caller
-     * needs no try/catch of its own.
+     * needs no try/catch of its own. A `false` outcome is also reported to
+     * `onerror` with the reason.
      */
     copy: (text: string) => Promise<boolean>;
     /** Cancels any pending reset. Call from the owner's teardown. */

package/dist/Snippet/copyState.svelte.js

@@ -20,6 +20,20 @@ function resolveResetDelay(options) {
     }
     return requested;
 }
+/**
+ * `onerror` is a consumer callback like `oncopy`, so it gets the same
+ * containment: a throwing reporter must not turn a handled failure into an
+ * unhandled rejection out of `copy()`, which is the one thing this factory
+ * promises never to do.
+ */
+function report(options, reason) {
+    try {
+        options.onerror?.(reason);
+    }
+    catch {
+        /* A failed notification cannot make the clipboard write any less failed. */
+    }
+}
 export function createCopyState(options = {}) {
     let copied = $state(false);
     let destroyed = false;
@@ -32,14 +46,26 @@ export function createCopyState(options = {}) {
             if (destroyed) {
                 return false;
             }
+            // Checked before the call rather than relying on the catch below: with
+            // no `navigator.clipboard` at all, `writeText` is a property access on
+            // undefined, and the resulting TypeError says nothing a caller could
+            // act on. An explicit reason distinguishes "this context has no
+            // clipboard" from "the user refused". `navigator` is tested for null
+            // separately from `undefined`: a stubbed-out global is routinely the
+            // former, and `!navigator.clipboard` would throw on it.
+            if (typeof navigator === 'undefined' || navigator === null || !navigator.clipboard) {
+                report(options, new Error('Clipboard API is unavailable in this context.'));
+                return false;
+            }
             try {
                 await navigator.clipboard.writeText(text);
             }
-            catch {
+            catch (reason) {
                 /* Clipboard unavailable: non-secure context, sandboxed iframe, or a
                    permission refusal. Reporting success here — and flashing "Copied!"
                    over a clipboard that never received the text — is the one outcome
                    worse than showing no feedback at all. */
+                report(options, reason);
                 return false;
             }
             // The clipboard promise can settle after its owner has unmounted.

package/dist/Snippet/properties.d.ts

@@ -16,4 +16,11 @@ export type OptionalSnippetProperties = {
 };
 export type SnippetEventProperties = {
     oncopy?: () => void;
+    /**
+     * Fires when a clipboard write fails -- rejected (denied permission, a
+     * non-secure context) or the Clipboard API being entirely absent -- with
+     * the rejection reason (an `Error` when the API itself is missing).
+     * `oncopy` does not fire for the same attempt.
+     */
+    onerror?: (reason: unknown) => void;
 };

package/dist/SoundKit/SoundKit.js

@@ -1,3 +1,4 @@
+import { closestInEventPath } from '../_interaction/dismissal';
 const DEFAULT_STORAGE_KEY = 'sui-sound-enabled';
 const DEFAULT_MASTER_GAIN = 0.32;
 const SOUND_ATTRIBUTE = 'data-sound';
@@ -216,11 +217,11 @@ export const createSoundKit = (options = {}) => {
         if (!resolveEnabled()) {
             return;
         }
-        const target = event.target;
-        if (!(target instanceof Element)) {
-            return;
-        }
-        const overrideElement = target.closest(`[${SOUND_ATTRIBUTE}]`);
+        // This listener sits on `document`, so `event.target` is the shadow HOST for
+        // any click inside a `<sui-*>` element and `target.closest()` would search
+        // the light tree instead of the one that was clicked -- no sound for every
+        // custom-element click, or the wrong sound inherited from a light ancestor.
+        const overrideElement = closestInEventPath(event, `[${SOUND_ATTRIBUTE}]`);
         if (overrideElement !== null) {
             const overrideValue = overrideElement.getAttribute(SOUND_ATTRIBUTE) ?? '';
             const resolved = resolveOverride(overrideValue);
@@ -229,15 +230,15 @@ export const createSoundKit = (options = {}) => {
             }
             return;
         }
-        if (target.closest(TICK_SELECTOR) !== null) {
+        if (closestInEventPath(event, TICK_SELECTOR) !== null) {
             play('tick');
             return;
         }
-        if (target.closest(PAGE_SELECTOR) !== null) {
+        if (closestInEventPath(event, PAGE_SELECTOR) !== null) {
             play('page');
             return;
         }
-        if (target.closest(PRESS_SELECTOR) !== null) {
+        if (closestInEventPath(event, PRESS_SELECTOR) !== null) {
             play('press');
         }
     };

package/dist/SplitInput/SplitInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { tick } from 'svelte';
+  import { describeField } from '../_field/description';
   import Input from '../Input/Input.svelte';
   import type { FieldConfig, SplitInputProperties } from './properties';
 
@@ -12,11 +13,34 @@
     separator,
     testId,
     classes,
+    ariaLabel,
+    errorMessage,
+    infoMessage,
+    invalid = false,
     onchange,
     oninput,
     oncomplete
   }: SplitInputProperties = $props();
 
+  /* "That code is not right" is a fact about the whole code, not about the box
+     the caret happens to be in, so the description belongs on the group -- and
+     there was none: a screen-reader user got four unlabelled boxes and no way to
+     reach the message. `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.
+
+     The role is conditional so a SplitInput with no messages and no label keeps
+     the accessibility tree it had before these props existed. */
+  const fieldUid = $props.id();
+  const field = $derived(
+    describeField(fieldUid, { error: errorMessage, info: infoMessage, invalid })
+  );
+  const hasGroupLabel = $derived(typeof ariaLabel === 'string' && ariaLabel !== '');
+  const describedGroup = $derived(
+    field.describedBy !== null || field.ariaInvalid !== null || hasGroupLabel
+  );
+
   let fieldCount = $derived(typeof fields !== 'undefined' ? fields.length : length);
 
   let fieldConfigs: FieldConfig[] = $derived(
@@ -223,7 +247,15 @@
   }
 </script>
 
-<div class="field-group {classes ?? ''}" data-pw={testId} testID={testId}>
+<div
+  class="field-group {classes ?? ''}"
+  role={describedGroup ? 'group' : null}
+  aria-label={hasGroupLabel ? ariaLabel : null}
+  aria-describedby={field.describedBy}
+  aria-invalid={field.ariaInvalid}
+  data-pw={testId}
+  testID={testId}
+>
   {#each fieldConfigs as config, index (index)}
     {#if typeof separator === 'string' && index > 0}
       <span class="field-group-separator">{separator}</span>
@@ -256,7 +288,41 @@
   {/each}
 </div>
 
+{#if field.showsError}
+  <div
+    id={field.errorId}
+    role="alert"
+    class="field-error"
+    data-pw={typeof testId === 'string' ? `${testId}-error-message` : null}
+    testID={typeof testId === 'string' ? `${testId}-error-message` : null}
+  >
+    {errorMessage}
+  </div>
+{/if}
+{#if field.showsInfo}
+  <div
+    id={field.infoId}
+    class="field-info"
+    data-pw={typeof testId === 'string' ? `${testId}-info-message` : null}
+    testID={typeof testId === 'string' ? `${testId}-info-message` : null}
+  >
+    {infoMessage}
+  </div>
+{/if}
+
 <style>
+  .field-error {
+    color: var(--field-error-color, #c5120a);
+    font-size: var(--field-error-font-size, 12px);
+    margin: var(--field-error-margin, 4px 0 0 0);
+  }
+
+  .field-info {
+    color: var(--field-info-color, #6b7280);
+    font-size: var(--field-info-font-size, 12px);
+    margin: var(--field-info-margin, 4px 0 0 0);
+  }
+
   .field-group {
     display: flex;
     align-items: flex-start;
@@ -291,7 +357,7 @@
   .field-group-label {
     font-size: var(--field-group-label-font-size, 10px);
     font-weight: var(--field-group-label-font-weight, 500);
-    color: var(--field-group-label-color, #9ca3af);
+    color: var(--field-group-label-color, #4b5563);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }

package/dist/SplitInput/properties.d.ts

@@ -12,6 +12,29 @@ export type OptionalSplitInputProperties = {
     separator?: string;
     testId?: string;
     classes?: string;
+    /**
+     * Names the whole group ("One-time code"). The boxes are individually
+     * meaningless, so without this a screen-reader user reaches four unlabelled
+     * fields; naming the group is what makes them one control.
+     */
+    ariaLabel?: string;
+    /**
+     * Text shown, and announced, when the assembled value is in error ("That code
+     * is not right"). Referenced by `aria-describedby` on the group rather than on
+     * one box, since the message is about the whole code, and sets `aria-invalid`
+     * while present.
+     */
+    errorMessage?: string | null;
+    /**
+     * Persistent helper text describing the whole group. Referenced the same way,
+     * so it is read before the user trips an error rather than only after.
+     */
+    infoMessage?: string | null;
+    /**
+     * Marks the group invalid without supplying a message, for a consumer driving
+     * validity from a server or its own rules.
+     */
+    invalid?: boolean;
 };
 export type SplitInputEventProperties = {
     onchange?: (values: string[]) => void;

package/dist/StatCard/StatCard.svelte

@@ -444,7 +444,7 @@
   }
 
   .statcard-value-warning {
-    color: var(--statcard-value-warning-color, #f59e0b);
+    color: var(--statcard-value-warning-color, #b45309);
   }
 
   /* Per-row value typography override — falls back to the card-level value
@@ -465,7 +465,7 @@
   }
 
   .statcard-delta-positive {
-    color: var(--statcard-delta-positive-color, #16a34a);
+    color: var(--statcard-delta-positive-color, #166534);
   }
 
   .statcard-delta-negative {
@@ -490,7 +490,7 @@
     order: var(--statcard-subtitle-order, 0);
     font-size: var(--statcard-subtitle-font-size, 12px);
     font-weight: var(--statcard-subtitle-font-weight, 400);
-    color: var(--statcard-subtitle-color, #9ca3af);
+    color: var(--statcard-subtitle-color, #4b5563);
     line-height: var(--statcard-subtitle-line-height, 1.4);
   }
 
@@ -504,7 +504,7 @@
       --statcard-row-subtitle-font-weight,
       var(--statcard-subtitle-font-weight, 400)
     );
-    color: var(--statcard-row-subtitle-color, var(--statcard-subtitle-color, #9ca3af));
+    color: var(--statcard-row-subtitle-color, var(--statcard-subtitle-color, #4b5563));
     line-height: var(
       --statcard-row-subtitle-line-height,
       var(--statcard-subtitle-line-height, 1.4)
@@ -582,7 +582,7 @@
        does not fit — matches short unit suffixes like "%" or "ms". */
     font-size: var(--statcard-row-additional-font-size, 12px);
     font-weight: var(--statcard-row-additional-font-weight, 400);
-    color: var(--statcard-row-additional-color, #9ca3af);
+    color: var(--statcard-row-additional-color, #4b5563);
     line-height: 1.4;
   }
 
@@ -631,7 +631,7 @@
   .statcard-breakdown-label {
     font-size: var(--statcard-breakdown-label-font-size, 11px);
     font-weight: var(--statcard-breakdown-label-font-weight, 400);
-    color: var(--statcard-breakdown-label-color, #9ca3af);
+    color: var(--statcard-breakdown-label-color, #4b5563);
     line-height: 1.4;
   }
 

package/dist/Status/Status.svelte

@@ -92,12 +92,12 @@
      typography applies, so those two declarations must not sit on the element and win. */
   .status-text-default {
     font-weight: var(--status-font-weight, 600);
-    color: var(--status-description-font-color, #2f3841);
+    color: var(--status-description-font-color, light-dark(#3d5a76, #9ab4cc));
   }
 
   .status-description {
     font-weight: var(--status-font-weight, 400);
-    color: var(--status-description-font-color, #436484cc);
+    color: var(--status-description-font-color, light-dark(#3d5a76, #9ab4cc));
     padding: 0px 42px;
     margin-bottom: 25px;
   }

package/dist/Stepper/Step.svelte

@@ -138,10 +138,10 @@
      tokens Step actually renders are set here; the separator is Stepper's to draw. Each
      chain terminates in the same literal Stepper uses, so the two agree by construction. */
   .status-completed {
-    --step-text-color: var(--step-text-completed-color, #24aa5a);
+    --step-text-color: var(--step-text-completed-color, #1a7a44);
     --step-index-container-background-color: var(
       --step-index-container-completed-background-color,
-      #24aa5a
+      #1a7a44
     );
     --step-index-container-border: var(--step-index-container-completed-border, none);
   }
@@ -198,7 +198,7 @@
     height: var(--step-index-container-height, 30px);
     width: var(--step-index-container-width, 30px);
     border-radius: var(--step-index-container-radius, 50%);
-    background-color: var(--step-index-container-background-color, #798fa5cc);
+    background-color: var(--step-index-container-background-color, #55627a);
     /* No border today, so the fallback is `none` — an existing consumer that sets
        nothing renders byte-identically. Shared with .step-icon-container below so
        a status override (see Stepper.svelte) themes the circle whichever of the
@@ -215,7 +215,7 @@
     height: var(--step-index-container-height, 30px);
     width: var(--step-index-container-width, 30px);
     border-radius: var(--step-index-container-radius, 50%);
-    background-color: var(--step-index-container-background-color, #798fa5cc);
+    background-color: var(--step-index-container-background-color, #55627a);
     border: var(--step-index-container-border, none);
     flex-shrink: 0;
     overflow: hidden;
@@ -230,7 +230,8 @@
   .step-spinner {
     width: var(--step-spinner-size, 18px);
     height: var(--step-spinner-size, 18px);
-    animation: stepper-spin 0.8s linear infinite;
+    animation: stepper-spin var(--step-spinner-animation-duration, var(--motion-duration, 0.8s))
+      var(--step-spinner-animation-easing, var(--motion-easing, linear)) infinite;
   }
 
   @keyframes stepper-spin {
@@ -299,7 +300,7 @@
        `normal` — that is the literal fallback, keeping an existing consumer
        byte-identical. */
     font-weight: var(--step-text-font-weight, normal);
-    color: var(--step-text-color, #798fa5cc);
+    color: var(--step-text-color, #55627a);
   }
 
   .step-vertical .step-text {
@@ -318,4 +319,16 @@
   .step-vertical .step-badge {
     margin: var(--step-badge-vertical-margin, 4px 0 0 0);
   }
+  /* An indefinite animation is the case this preference exists for: it never
+     ends, so a user who asked the OS to minimise motion gets a permanent loop.
+     The animation stops, but the element must still read as "busy" -- a guard
+     that leaves nothing on screen, or leaves a frame that means something else,
+     is worse than the motion it removed. This block lives in the component's own
+     <style> because that is the only stylesheet that reaches inside the shadow
+     root a custom-element consumer gets. */
+  @media (prefers-reduced-motion: reduce) {
+    .step-spinner {
+      animation: none;
+    }
+  }
 </style>