@juspay/svelte-ui-components 4.29.1 → 4.31.0

package/dist/AnimatedNumber/AnimatedNumber.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AnimatedNumberProperties } from './properties';
+declare const AnimatedNumber: import("svelte").Component<AnimatedNumberProperties, {}, "">;
+type AnimatedNumber = ReturnType<typeof AnimatedNumber>;
+export default AnimatedNumber;

package/dist/AnimatedNumber/motion.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The odometer's motion arithmetic, kept out of the component so it can be
+ * tested as plain functions -- jsdom has no `Element.animate`, no `CSS` global
+ * and no running transitions, so none of this is observable through a rendered
+ * component there.
+ *
+ * The mechanism, which is worth stating once because it is not the obvious one:
+ * a glyph's position is never itself animated. Each of the ten glyphs in a
+ * column resolves its own offset as a pure function of one scalar, and only that
+ * scalar moves. Animating each glyph's own `transform` instead interpolates the
+ * RESOLVED before and after values, so a glyph parked off-screen above whose
+ * offset wrapped to below is tweened straight THROUGH the visible window -- a
+ * full-size digit sliding across the number. Moving the scalar and recomputing
+ * the offsets every frame cannot produce that, because every glyph's position
+ * stays a continuous function of one moving value.
+ *
+ * The scalar is `--_animated-number-digit + --_animated-number-delta`. The digit
+ * jumps to its new value immediately and the delta animates from `-delta` to 0,
+ * so their sum travels from the old digit to the new one without anything
+ * needing to remember where it started.
+ */
+/** Digits per column. Every column carries a full 0-9 wheel. */
+export declare const WHEEL_LENGTH = 10;
+/** Registered so it INTERPOLATES: an unregistered custom property animates discretely. */
+export declare const DELTA_PROPERTY = "--_animated-number-delta";
+/**
+ * How far this column's wheel turns, signed, in digits.
+ *
+ * `trend` is the direction the number as a whole moved, and passing it is the
+ * single thing that makes 99 -> 100 roll each 9 forward by one step. Judged per
+ * column instead, a 9 -> 0 column sees a difference of -9 and takes nine steps
+ * backwards while its neighbours step forwards. Zero means "no opinion", which
+ * falls back to each column's own direction.
+ */
+export declare const wheelDelta: (digit: number, previous: number, trend: number) => number;
+/**
+ * Which way the whole number moved: 1 up, -1 down, 0 unchanged.
+ *
+ * Numbers are compared as numbers. A pre-formatted string has no numeric value
+ * to compare, so its digit runs are compared instead -- longer wins, then
+ * lexicographically, which is exactly numeric order for two runs of digits and
+ * stays correct past `Number.MAX_SAFE_INTEGER`, where subtracting would not.
+ */
+export declare const trendBetween: (previous: number | string, next: number | string, digitOf?: (character: string) => number) => number;
+/** A CSS `<time>` in milliseconds. Anything unparseable reads as 0, i.e. no motion. */
+export declare const durationMs: (value: string) => number;
+export declare const canSpin: () => boolean;

package/dist/AnimatedNumber/motion.js

@@ -0,0 +1,190 @@
+/**
+ * The odometer's motion arithmetic, kept out of the component so it can be
+ * tested as plain functions -- jsdom has no `Element.animate`, no `CSS` global
+ * and no running transitions, so none of this is observable through a rendered
+ * component there.
+ *
+ * The mechanism, which is worth stating once because it is not the obvious one:
+ * a glyph's position is never itself animated. Each of the ten glyphs in a
+ * column resolves its own offset as a pure function of one scalar, and only that
+ * scalar moves. Animating each glyph's own `transform` instead interpolates the
+ * RESOLVED before and after values, so a glyph parked off-screen above whose
+ * offset wrapped to below is tweened straight THROUGH the visible window -- a
+ * full-size digit sliding across the number. Moving the scalar and recomputing
+ * the offsets every frame cannot produce that, because every glyph's position
+ * stays a continuous function of one moving value.
+ *
+ * The scalar is `--_animated-number-digit + --_animated-number-delta`. The digit
+ * jumps to its new value immediately and the delta animates from `-delta` to 0,
+ * so their sum travels from the old digit to the new one without anything
+ * needing to remember where it started.
+ */
+/** Digits per column. Every column carries a full 0-9 wheel. */
+export const WHEEL_LENGTH = 10;
+/** Registered so it INTERPOLATES: an unregistered custom property animates discretely. */
+export const DELTA_PROPERTY = '--_animated-number-delta';
+/**
+ * How far this column's wheel turns, signed, in digits.
+ *
+ * `trend` is the direction the number as a whole moved, and passing it is the
+ * single thing that makes 99 -> 100 roll each 9 forward by one step. Judged per
+ * column instead, a 9 -> 0 column sees a difference of -9 and takes nine steps
+ * backwards while its neighbours step forwards. Zero means "no opinion", which
+ * falls back to each column's own direction.
+ */
+export const wheelDelta = (digit, previous, trend) => {
+    const difference = digit - previous;
+    const direction = trend === 0 ? Math.sign(difference) : trend;
+    if (direction < 0 && digit > previous) {
+        return digit - WHEEL_LENGTH - previous;
+    }
+    if (direction > 0 && digit < previous) {
+        return WHEEL_LENGTH - previous + digit;
+    }
+    return difference;
+};
+/**
+ * The digits of a string, rewritten as ASCII so two runs can be compared.
+ *
+ * `digitOf` is the caller's own glyph lookup, so a numbering system whose digits
+ * are neither ASCII nor contiguous still reduces to something comparable. The
+ * previous `replace(/\D/g, '')` was ASCII-only without the `u` flag, so every
+ * Arabic-Indic, Devanagari or Bengali numeral was stripped and BOTH runs came
+ * back empty -- the trend then read 0, and a 9 -> 0 column with no direction to
+ * follow rolls nine positions backwards. Rewriting to ASCII rather than keeping
+ * the original glyphs also keeps the comparison below honest for a
+ * non-contiguous system, where code-point order is not value order.
+ */
+const digitRun = (text, digitOf) => {
+    let run = '';
+    for (const character of text) {
+        const digit = digitOf(character);
+        if (digit >= 0) {
+            run += String(digit);
+        }
+    }
+    return run;
+};
+/**
+ * Fallback lookup for a caller with no numbering system of its own to offer.
+ *
+ * Unicode assigns the General_Category Nd only to decimal digits, and each such
+ * block is exactly ten consecutive code points beginning at its own zero. So the
+ * value of a digit is how far it sits above the first Nd code point in its run,
+ * found by walking down at most nine places. That covers every numbering system
+ * whose digits ARE decimal digits -- Arabic-Indic, Devanagari, Bengali, the
+ * supplementary-plane ones -- without a table.
+ *
+ * It returns -1 for `hanidec`, whose Han numerals are not Nd at all. Nothing can
+ * infer those from the character alone, which is exactly why the component hands
+ * in its own map rather than relying on this.
+ */
+const unicodeDigitOf = (character) => {
+    const code = character.codePointAt(0);
+    if (!Number.isInteger(code) || !/\p{Nd}/u.test(character)) {
+        return -1;
+    }
+    const value = Number(code);
+    let zero = value;
+    while (value - zero < 9 && /\p{Nd}/u.test(String.fromCodePoint(zero - 1))) {
+        zero -= 1;
+    }
+    return value - zero;
+};
+/**
+ * Which way the whole number moved: 1 up, -1 down, 0 unchanged.
+ *
+ * Numbers are compared as numbers. A pre-formatted string has no numeric value
+ * to compare, so its digit runs are compared instead -- longer wins, then
+ * lexicographically, which is exactly numeric order for two runs of digits and
+ * stays correct past `Number.MAX_SAFE_INTEGER`, where subtracting would not.
+ */
+export const trendBetween = (previous, next, digitOf = unicodeDigitOf) => {
+    if (typeof previous === 'number' && typeof next === 'number') {
+        // `|| 0` folds away both the signed zero `Math.sign` returns for `0 -> -0`
+        // and the NaN it returns when either side is non-finite: neither is a
+        // direction, and both would otherwise be passed on as one.
+        return Math.sign(next - previous) || 0;
+    }
+    const before = digitRun(String(previous), digitOf);
+    const after = digitRun(String(next), digitOf);
+    if (before.length !== after.length) {
+        return Math.sign(after.length - before.length);
+    }
+    return before < after ? 1 : before > after ? -1 : 0;
+};
+/** A CSS `<time>` in milliseconds. Anything unparseable reads as 0, i.e. no motion. */
+export const durationMs = (value) => {
+    const text = value.trim();
+    const amount = Number.parseFloat(text);
+    if (!Number.isFinite(amount)) {
+        return 0;
+    }
+    return text.endsWith('ms') ? amount : text.endsWith('s') ? amount * 1000 : 0;
+};
+/**
+ * Registers the delta property on the document, returning whether it is
+ * registered afterwards.
+ *
+ * It has to be done from script rather than by an `@property` rule in the
+ * component's own stylesheet: an `@property` inside a shadow root does not
+ * register (measured in both Chromium and WebKit -- the probe's initial value
+ * never applied). That stylesheet is the only one reaching inside the shadow
+ * root a custom-element consumer gets, so relying on the at-rule would have left
+ * `<sui-animated-number>` silently un-animated while the Svelte component moved.
+ * `CSS.registerProperty` registers per document, so one call covers both.
+ */
+const registerDelta = () => {
+    try {
+        CSS.registerProperty({
+            name: DELTA_PROPERTY,
+            syntax: '<number>',
+            inherits: true,
+            initialValue: '0'
+        });
+        return true;
+    }
+    catch (error) {
+        // Registering the same name twice throws, and so does a malformed
+        // descriptor. Only the first means the property is there -- which happens
+        // whenever a second copy of this library shares the page.
+        return error instanceof DOMException && error.name === 'InvalidModificationError';
+    }
+};
+/**
+ * Whether this engine can run the roll at all.
+ *
+ * `mod()` and `round()` place the glyphs, `linear()` carries the spring easing,
+ * and the registration above is what lets the delta interpolate rather than jump
+ * at the halfway point. Without all four the component still renders correctly
+ * -- `transform` falls back to `none`, which is where the current glyph already
+ * sits, and the other nine stay `display: none` because nothing ever adds the
+ * spinning class -- it just changes instantly.
+ */
+let supported = null;
+export const canSpin = () => {
+    if (supported !== null) {
+        return supported;
+    }
+    if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+        supported = false;
+        return supported;
+    }
+    // Probed by attempting it rather than through CSS.supports, which reports
+    // false positives for `linear()` against what `animate()` will actually take.
+    const linear = (() => {
+        try {
+            document.createElement('div').animate({ opacity: 0 }, { easing: 'linear(0, 1)' });
+            return true;
+        }
+        catch {
+            return false;
+        }
+    })();
+    supported =
+        CSS.supports('line-height', 'mod(1,1)') &&
+            CSS.supports('line-height', 'round(down,1,1)') &&
+            linear &&
+            registerDelta();
+    return supported;
+};

package/dist/AnimatedNumber/properties.d.ts

@@ -0,0 +1,58 @@
+/** How value changes are exposed to assistive technology. */
+export type AnimatedNumberLive = 'off' | 'polite' | 'assertive';
+export type AnimatedNumberProperties = MandatoryAnimatedNumberProperties & OptionalAnimatedNumberProperties;
+export type MandatoryAnimatedNumberProperties = {
+    /**
+     * The value to display. A `number` is formatted through `Intl.NumberFormat`
+     * and decomposed semantically, so the component knows a group separator from
+     * a currency symbol. A `string` is taken as already-formatted and diffed
+     * against the previous string instead -- which is what lets a consumer's own
+     * formatter, or a pre-formatted prop like `StatCard.value`, animate without
+     * anyone having to surface the underlying number.
+     */
+    value: number | string;
+};
+export type OptionalAnimatedNumberProperties = {
+    /**
+     * BCP 47 locale used to format a numeric `value`. Defaults to a fixed
+     * `'en-US'` rather than the runtime's ambient default: `Intl.NumberFormat`
+     * with an undefined locale resolves against whatever the executing
+     * environment reports, which differs between the process that prerenders a
+     * page and the browser that hydrates it. Pinning it keeps the server and the
+     * first client frame byte-identical.
+     * @default 'en-US'
+     */
+    locale?: string;
+    /** `Intl.NumberFormat` options applied when `value` is a number. */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Whether value changes are announced. Left `'off'`, the accessible name
+     * still updates -- it is simply not interrupted into. Reserve `'polite'` for
+     * values that change infrequently; a rapidly changing value queues one
+     * announcement per change, with no coalescing.
+     * @default 'off'
+     */
+    live?: AnimatedNumberLive;
+    /**
+     * Rolls every column up from zero when the number first appears, instead of
+     * painting it outright.
+     *
+     * Off by default, because a number that was always going to be on screen
+     * should not make the reader wait for it. Turn it on where the figure ARRIVES
+     * -- a dashboard whose metrics land after a fetch, a total that appears at the
+     * end of a flow -- and especially where the value then never changes again:
+     * without this, such a number is static for its whole life and the odometer
+     * does nothing at all.
+     *
+     * Independent of the rolls that follow. A later change animates either way,
+     * and this only governs the first paint.
+     * @default false
+     */
+    animateOnMount?: boolean;
+    /** Overrides the accessible name, which otherwise mirrors the visible text. */
+    ariaLabel?: string;
+    /** Value for the `data-pw` attribute on the root element for E2E selection. */
+    testId?: string;
+    /** Extra CSS classes applied to the root element for consumer theming. */
+    classes?: string;
+};

package/dist/AnimatedNumber/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Badge/Badge.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.svelte';
   import type { BadgeProperties } from './properties';
 
   let {
@@ -9,7 +10,8 @@
     hidden = false,
     ariaLabel,
     testId,
-    classes
+    classes,
+    animateValue = false
   }: BadgeProperties = $props();
 
   let showImage = $derived(typeof image === 'string' && image.length > 0);
@@ -20,6 +22,11 @@
   let standaloneAriaLabel = $derived(
     isDot ? null : (ariaLabel ?? (typeof value === 'string' ? value : null))
   );
+
+  // `value` is a general-purpose display string ('99+' included), so the dot
+  // check gates AnimatedNumber the same way it already gates the plain text --
+  // dot mode never had a value to animate in the first place.
+  let animateThisValue = $derived(animateValue && !isDot);
 </script>
 
 {#if showImage}
@@ -31,7 +38,13 @@
     <div class="badge-wrap">
       <img class="icon-img" src={image} {alt} />
       {#if showBadge}
-        <div class="badge" class:badge-dot={isDot}>{isDot ? '' : (value ?? '')}</div>
+        <div class="badge" class:badge-dot={isDot}>
+          {#if animateThisValue}
+            <AnimatedNumber value={value ?? ''} />
+          {:else}
+            {isDot ? '' : (value ?? '')}
+          {/if}
+        </div>
       {/if}
     </div>
   </div>
@@ -44,7 +57,11 @@
     data-pw={typeof testId === 'string' ? testId : null}
     testID={typeof testId === 'string' ? testId : null}
   >
-    {isDot ? '' : (value ?? '')}
+    {#if animateThisValue}
+      <AnimatedNumber value={value ?? ''} />
+    {:else}
+      {isDot ? '' : (value ?? '')}
+    {/if}
   </div>
 {/if}
 

package/dist/Badge/properties.d.ts

@@ -10,5 +10,14 @@ export type OptionalBadgeProperties = {
     ariaLabel?: string;
     testId?: string;
     classes?: string;
+    /**
+     * Rolls `value` through AnimatedNumber instead of swapping it in place.
+     * `value` stays the same string prop -- AnimatedNumber diffs it by
+     * character position, so '99+' rolls the two digits and leaves the '+'
+     * alone, with no separate numeric prop required here. No effect in
+     * `mode="dot"`, which never renders `value` at all.
+     * @default false
+     */
+    animateValue?: boolean;
 };
 export type BadgeEventProperties = Record<never, never>;

package/dist/Book/Book.svelte

@@ -185,6 +185,15 @@
     outline: none;
   }
 
+  /* role="region" tabindex="0" above makes this a real Tab stop (arrow keys
+     then page it via handleKeyDown), so removing its outline unconditionally
+     left a keyboard user with no visible sign it was focused. :focus-visible
+     so tapping/clicking into the book to swipe doesn't show a ring. */
+  .book:focus-visible {
+    outline: var(--book-focus-outline, 2px solid #2563eb);
+    outline-offset: var(--book-focus-outline-offset, 2px);
+  }
+
   .book-viewport {
     position: relative;
     display: flex;

package/dist/Calendar/Calendar.svelte

@@ -202,7 +202,31 @@
     return false;
   }
 
+  // Bounds the prev/next month CONTROLS, distinct from isDateDisabled's per-day check
+  // above: a month is only unreachable when every one of its days would fail that same
+  // check, i.e. the whole month falls outside [minDate, maxDate] -- not merely when
+  // today's selection or the currently displayed month does. Comparing the previous
+  // month's LAST day against minDate (and the next month's FIRST day against maxDate)
+  // is the correct boundary: any later/earlier day in that month is enabled already.
+  const isPrevMonthDisabled = $derived(
+    minDate !== null &&
+      new SvelteDate(displayDate.getFullYear(), displayDate.getMonth(), 0).getTime() <
+        normalizeDate(minDate).getTime()
+  );
+
+  const isNextMonthDisabled = $derived(
+    maxDate !== null &&
+      new SvelteDate(displayDate.getFullYear(), displayDate.getMonth() + 1, 1).getTime() >
+        normalizeDate(maxDate).getTime()
+  );
+
   function navigateMonth(delta: number): void {
+    if (delta < 0 && isPrevMonthDisabled) {
+      return;
+    }
+    if (delta > 0 && isNextMonthDisabled) {
+      return;
+    }
     displayDate.setMonth(displayDate.getMonth() + delta);
     focusedDay = null;
     onmonthchange?.({ year: displayDate.getFullYear(), month: displayDate.getMonth() });
@@ -325,7 +349,11 @@
 >
   <div class="header">
     <div class="nav-button nav-prev">
-      <Button onclick={() => navigateMonth(-1)} ariaLabel="Previous month">
+      <Button
+        onclick={() => navigateMonth(-1)}
+        ariaLabel="Previous month"
+        disabled={isPrevMonthDisabled}
+      >
         {#if typeof previousMonthIcon === 'function'}
           {@render previousMonthIcon()}
         {:else}
@@ -336,7 +364,11 @@
     </div>
     <span class="header-label">{headerLabel}</span>
     <div class="nav-button nav-next">
-      <Button onclick={() => navigateMonth(1)} ariaLabel="Next month">
+      <Button
+        onclick={() => navigateMonth(1)}
+        ariaLabel="Next month"
+        disabled={isNextMonthDisabled}
+      >
         {#if typeof nextMonthIcon === 'function'}
           {@render nextMonthIcon()}
         {:else}

package/dist/Carousel/Carousel.svelte

@@ -233,6 +233,17 @@
     transition: transform var(--carousel-track-transition-duration, var(--motion-duration, 0.5s))
       var(--carousel-track-transition-easing, var(--motion-easing, ease-in-out));
   }
+  /* The track slide is the component's motion. The dots below transition only
+     `background`, which is a colour change rather than movement, so they are
+     deliberately left alone -- silencing them would remove feedback the
+     preference never asked to remove. Finite, so dropping it lands the track on
+     the slide it was moving to. */
+  @media (prefers-reduced-motion: reduce) {
+    .slidesDiv {
+      transition: none;
+    }
+  }
+
   .dots-wrapper {
     gap: var(--dot-gap, 10px);
     padding-top: var(--dot-padding-top, 10px);
@@ -245,7 +256,10 @@
     border-radius: 50%;
     background: var(--carousel-dot-color, #c4c4c4);
     cursor: pointer;
-    transition: all var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))
+    /* Only background actually differs between .dot and .active-dot, so only
+       background is transitioned. `transition: all` used to catch `outline`
+       too, animating the keyboard focus ring in on every Tab. */
+    transition: background var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))
       var(--carousel-dot-transition-easing, var(--motion-easing, ease));
   }
 
@@ -255,7 +269,8 @@
     border-radius: 50%;
     cursor: pointer;
     background: var(--carousel-dot-active-color, #000000);
-    transition: all var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))
+    /* See .dot above: scoped to background so outline is never transitioned. */
+    transition: background var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))
       var(--carousel-dot-transition-easing, var(--motion-easing, ease));
   }
 

package/dist/ChatBubble/ChatBubble.svelte

@@ -385,6 +385,18 @@
     outline: none;
   }
 
+  /* setOpen() (see script) calls panel.focus() directly on open, and the panel
+     -- not a child -- is the Tab-trap's own boundary, so removing its outline
+     unconditionally left a keyboard user with no visible sign focus had moved
+     into the launcher's panel at all. :focus-visible restores a ring only for
+     keyboard/programmatic focus, so the launcher click that opens the panel
+     shows nothing new. Matches Sheet's sheet-panel fix for the identical
+     shape of problem. */
+  .panel:focus-visible {
+    outline: var(--chat-bubble-panel-focus-outline, 2px solid #2563eb);
+    outline-offset: var(--chat-bubble-panel-focus-outline-offset, -2px);
+  }
+
   .launcher {
     --button-width: var(--chat-bubble-width, var(--chat-bubble-size, 56px));
     --button-height: var(--chat-bubble-height, var(--chat-bubble-size, 56px));

package/dist/ChatComposer/ChatComposer.svelte

@@ -356,6 +356,15 @@
     opacity: var(--chat-composer-disabled-opacity, 0.6);
   }
 
+  /* .input below sets outline: none with nothing standing in for it, so the
+     visible replacement lives here on the surrounding surface instead --
+     :focus-within lights up whenever the textarea inside is focused, the same
+     pattern Select's .select-trigger uses for its nested search input. */
+  .chat-composer:focus-within {
+    border-color: var(--chat-composer-focus-border-color, #2563eb);
+    box-shadow: var(--chat-composer-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));
+  }
+
   .attachments-rich {
     padding: var(--chat-composer-attachments-padding, 2px 4px 0);
   }

package/dist/CommandMenu/CommandMenu.svelte

@@ -431,6 +431,19 @@
     caret-color: var(--command-menu-input-caret-color, #3b82f6);
   }
 
+  /* The input is the only real Tab stop the overlay currently renders (list
+     items are a roving aria-activedescendant selection, not DOM focus -- see
+     .active below), so it is also the only element here that WCAG 2.4.7
+     applies to. A real text input, so :focus rather than :focus-visible: the
+     ring must stay visible regardless of input modality, matching Input.svelte's
+     own textarea/input convention. Positive offset (not Sheet/Modal's inset
+     -2px) because the input sits inside .command-menu-input-wrapper's own
+     padding, not flush against the dialog's edge. */
+  .command-menu-input:focus {
+    outline: var(--command-menu-input-focus-outline, 2px solid #2563eb);
+    outline-offset: var(--command-menu-input-focus-outline-offset, 2px);
+  }
+
   .command-menu-input::placeholder {
     color: var(--command-menu-input-placeholder-color, #94a3b8);
   }