@juspay/svelte-ui-components 4.31.3 → 4.32.0

package/dist/Toast/Toast.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
-  import { fly } from 'svelte/transition';
-  import { prefersReducedMotion } from '../utils';
   import type { ToastDirection, ToastProperties } from './properties';
-  import type { FlyAnimationConfig } from '../types';
   import Img from '../Img/Img.svelte';
 
   let {
@@ -28,77 +25,79 @@
     classes
   }: ToastProperties = $props();
 
-  const animationConfig: FlyAnimationConfig = $derived(getAnimationConfig(overlapPage, direction));
-
   let showToast = $state(true);
 
   const rootClass = $derived(
     ['toast', type ?? '', classes ?? ''].filter((cls) => cls.length > 0).join(' ')
   );
 
-  function hideToast() {
-    showToast = false;
-  }
-
-  function handleAnimationEnd() {
-    ontoasthide?.();
-  }
-
-  function getAnimationConfig(
-    overlapPage: boolean,
-    toastDirection?: ToastDirection
-  ): FlyAnimationConfig {
-    let inX: number = 0;
-    let inY: number = 0;
-    let outX: number = 0;
-    let outY: number = 0;
+  // Unset `direction` behaves like 'top-to-bottom' -- the same fallthrough the
+  // old `getAnimationConfig` switch used (`case 'top-to-bottom': default:`).
+  const resolvedDirection: ToastDirection = $derived(direction ?? 'top-to-bottom');
 
-    switch (toastDirection) {
+  function directionalOffset(dir: ToastDirection, distance: number): { x?: number; y?: number } {
+    switch (dir) {
       case 'left-to-right':
-        inX = -1 * (inAnimationOffset ?? 500);
-        outX = -1 * (outAnimationOffset ?? 500);
-        break;
+        return { x: -distance };
       case 'right-to-left':
-        inX = inAnimationOffset ?? 500;
-        outX = outAnimationOffset ?? 500;
-        break;
+        return { x: distance };
       case 'bottom-to-top':
-        inY = inAnimationOffset ?? (overlapPage ? 500 : 20);
-        outY = outAnimationOffset ?? (overlapPage ? 500 : 20);
-        break;
+        return { y: distance };
       case 'top-to-bottom':
       default:
-        inY = -1 * (inAnimationOffset ?? (overlapPage ? 500 : 20));
-        outY = -1 * (outAnimationOffset ?? (overlapPage ? 100 : 20));
-        break;
+        return { y: -distance };
     }
+  }
 
-    // Reduced motion zeroes the OFFSETS as well as the durations, and the offsets
-    // are the part that matters. `fly` interpolates from x/y to 0, so a duration of
-    // 0 with x still at 500 paints the toast 500px away on its first frame and then
-    // snaps -- a stranded frame that reads as a glitch rather than as no animation.
-    // Zeroing both makes it simply appear in place, which is what the preference
-    // asks for. A `@media` block cannot reach any of this: these values are consumed
-    // by `in:fly={...}` / `out:fly={...}`, so the guard has to live here.
-    if (prefersReducedMotion()) {
-      return {
-        in: { x: 0, y: 0, duration: 0 },
-        out: { x: 0, y: 0, duration: 0 }
-      };
-    }
+  // `@starting-style` (in the stylesheet below) supplies one shared "hidden"
+  // frame that the entrance reads from *and* the exit animates back to --
+  // unlike the old `in:fly`/`out:fly`, CSS has no way to give entry and exit
+  // independent offsets, since both converge on the same non-`.is-visible`
+  // rule. `inAnimationOffset` wins when both are set. When neither is set,
+  // this resolves to `{}` and no inline style is emitted at all, so the
+  // direction defaults in CSS (themeable via `--distance-overlay`) apply.
+  const enterOffset: { x?: number; y?: number } = $derived.by(() => {
+    const distance = inAnimationOffset ?? outAnimationOffset;
+    return distance == null ? {} : directionalOffset(resolvedDirection, distance);
+  });
 
-    return {
-      in: {
-        x: inX,
-        y: inY,
-        duration: inAnimationDuration ?? 400
-      },
-      out: {
-        x: outX,
-        y: outY,
-        duration: outAnimationDuration ?? 800
-      }
-    };
+  // A `0`/`0s` CSS transition-duration never starts a transition, so it never
+  // fires `transitionend`, so `ontoasthide` (below) would never fire -- floor
+  // at 50ms so the transition always runs. Same reasoning as the reduced-motion
+  // guard in the stylesheet, which floors at 0.05s rather than 0s: under heavy
+  // main-thread jank a 1ms transition can still get style-recalc-coalesced
+  // across a single frame with no observable "before" frame, which drops
+  // `transitionend` the same way a literal 0 does. 50ms clears a normal frame
+  // budget with margin while staying well under perceptible motion.
+  function toDurationStyle(ms?: number | null): string | null {
+    return typeof ms === 'number' ? `${Math.max(ms, 50)}ms` : null;
+  }
+
+  const openDurationStyle = $derived(toDurationStyle(inAnimationDuration));
+  const closeDurationStyle = $derived(toDurationStyle(outAnimationDuration));
+
+  function hideToast() {
+    showToast = false;
+  }
+
+  function handleTransitionEnd(event: TransitionEvent) {
+    // `currentTarget` excludes `transitionend` bubbling up from inside
+    // consumer-supplied `bottomContent`; `propertyName` narrows the transition
+    // shorthand's three properties (opacity/transform/display) down to one
+    // firing; `!showToast` excludes the entrance's own opacity transition.
+    //
+    // A rapid re-show while this is still closing interrupts the closing
+    // transition -- per spec, an interrupted transition never fires its own
+    // transitionend, only the one that actually runs to completion does. That
+    // is correct here, not a gap: the interrupted instance's closing
+    // transitionend was never going to reflect where the toast ends up
+    // regardless, and !showToast is read fresh at whichever transition
+    // actually completes, against whatever showToast holds at that moment --
+    // correct under any reversal ordering, not just the common single-close
+    // case this guard was originally written for.
+    if (event.target === event.currentTarget && event.propertyName === 'opacity' && !showToast) {
+      ontoasthide?.();
+    }
   }
 
   // Track `message` and `duration` as reactive dependencies so the timer
@@ -122,65 +121,68 @@
   });
 </script>
 
-{#if showToast}
-  <!-- `showToast` starts `true` (see the `$state(true)` above), so this
-       `{#if}` is already satisfied on the component's own first render -- a
-       *local* transition only plays when its enclosing block flips true as a
-       later reactive update, not when the block is created already-true,
-       which is what happens every time a caller mounts Toast fresh (e.g.
-       `{#if visible}<Toast .../>{/if}` in the caller). `in:fly|global` plays
-       the intro on creation regardless, matching Sheet's panel transition
-       (Sheet.svelte). `out:fly` needs no such modifier: `hideToast()` always
-       flips an already-mounted block from true to false, a genuine local
-       transition that already fires correctly. -->
-  <div
-    class={rootClass}
-    class:no-page-overlap={!overlapPage}
-    role="alert"
-    aria-live="assertive"
-    in:fly|global={animationConfig.in}
-    out:fly={animationConfig.out}
-    onoutroend={handleAnimationEnd}
-    data-pw={testId}
-    testID={testId}
-  >
-    {#if typeof leftIcon === 'string' && leftIcon.length > 0}
-      <div class="toast-icon-wrapper">
-        <Img inlineSvg src={leftIcon} alt="" fallback="" />
-      </div>
-    {/if}
-
-    <div class="toast-message" data-pw={messageTestId} testID={messageTestId}>
-      {message}
-      {#if typeof subtext === 'string' && subtext.length > 0}
-        <div class="toast-subtext" data-pw={subTextTestId} testID={subTextTestId}>{subtext}</div>
-      {/if}
-
-      {#if typeof bottomContent === 'function'}
-        {@render bottomContent()}
-      {/if}
+<!-- role="alert"/aria-live="assertive" re-announce reliably for the dominant
+     usage (a consumer's own {#if} mounts a fresh Toast per notification, a
+     fresh node every time, unambiguous to any AT). A single long-lived Toast
+     instance reused across separate notifications purely via prop changes --
+     relying on this same node's display:none -> flex toggle to register as a
+     fresh insertion -- is the one shape this hasn't been verified against on
+     real AT (no automated test exercises a screen reader here, before or
+     after this file's CSS-native migration). Flagging rather than guessing:
+     if that usage shape turns up a real gap, the established fix is toggling
+     aria-live off and back on around the reshow to force a re-announce,
+     not a change to the CSS transition mechanics above. -->
+<div
+  class={rootClass}
+  class:is-visible={showToast}
+  class:no-page-overlap={!overlapPage}
+  data-direction={resolvedDirection}
+  role="alert"
+  aria-live="assertive"
+  style:--toast-open-duration={openDurationStyle}
+  style:--toast-close-duration={closeDurationStyle}
+  style:--toast-enter-x={enterOffset.x}
+  style:--toast-enter-y={enterOffset.y}
+  ontransitionend={handleTransitionEnd}
+  data-pw={testId}
+  testID={testId}
+>
+  {#if typeof leftIcon === 'string' && leftIcon.length > 0}
+    <div class="toast-icon-wrapper">
+      <Img inlineSvg src={leftIcon} alt="" fallback="" />
     </div>
+  {/if}
+
+  <div class="toast-message" data-pw={messageTestId} testID={messageTestId}>
+    {message}
+    {#if typeof subtext === 'string' && subtext.length > 0}
+      <div class="toast-subtext" data-pw={subTextTestId} testID={subTextTestId}>{subtext}</div>
+    {/if}
 
-    {#if typeof rightIcon === 'string' && rightIcon.length > 0}
-      <div
-        class="close-button"
-        tabindex="0"
-        role="button"
-        onclick={hideToast}
-        onkeydown={(event) => {
-          if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            hideToast();
-          }
-        }}
-        data-pw={closeIconTestId}
-        testID={closeIconTestId}
-      >
-        <Img inlineSvg src={rightIcon} alt="Close" fallback="" />
-      </div>
+    {#if typeof bottomContent === 'function'}
+      {@render bottomContent()}
     {/if}
   </div>
-{/if}
+
+  {#if typeof rightIcon === 'string' && rightIcon.length > 0}
+    <div
+      class="close-button"
+      tabindex="0"
+      role="button"
+      onclick={hideToast}
+      onkeydown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          hideToast();
+        }
+      }}
+      data-pw={closeIconTestId}
+      testID={closeIconTestId}
+    >
+      <Img inlineSvg src={rightIcon} alt="Close" fallback="" />
+    </div>
+  {/if}
+</div>
 
 <style>
   .toast {
@@ -197,14 +199,12 @@
     margin: var(--toast-margin, 0px 10px 10px 10px);
     justify-content: var(--toast-justify-content, space-between);
     z-index: var(--toast-z-index, 1000);
-    display: var(--toast-display, flex);
     position: var(--toast-position, absolute);
     top: var(--toast-top, 10px);
     left: var(--toast-left, 0);
     right: var(--toast-right, 0);
     bottom: var(--toast-bottom, auto);
     background-color: var(--toast-background-color, #87ceeb);
-    opacity: var(--toast-opacity, 1);
     box-sizing: var(--toast-box-sizing);
 
     /* A toast is a transient status overlay, not a click target: it floats
@@ -214,12 +214,112 @@
        area below, and consumers with actionable bottomContent can opt the
        whole toast back in via --toast-pointer-events: auto. */
     pointer-events: var(--toast-pointer-events, none);
+
+    /* Closed / pre-enter state. `@starting-style` below reuses these same
+       values for the entrance's "before" frame, and removing `.is-visible`
+       transitions back to these same values for the exit -- one shared
+       "hidden" declaration, not independent in/out targets the way
+       `in:fly`/`out:fly` configs could be. */
+    display: none;
+    opacity: 0;
+    transform: translate(var(--toast-enter-x, 0px), var(--toast-enter-y, 0px));
+
+    /* max(50ms, …) rather than trusting the JS-side floor alone (toDurationStyle,
+       in the script block): that only clamps the inAnimationDuration/
+       outAnimationDuration PROP path. A consumer overriding --toast-close-duration
+       directly via CSS -- the whole point of exposing it as a token -- bypasses
+       the prop entirely, and a 0s/1ms transition never starts, so it never fires
+       transitionend, so ontoasthide never runs. The floor has to live wherever
+       the duration is actually consumed, not just where the props feed it. */
+    transition:
+      opacity max(50ms, var(--toast-close-duration, var(--motion-duration, 0.8s)))
+        var(--toast-close-easing, var(--motion-easing, ease-in)),
+      transform max(50ms, var(--toast-close-duration, var(--motion-duration, 0.8s)))
+        var(--toast-close-easing, var(--motion-easing, ease-in)),
+      display max(50ms, var(--toast-close-duration, var(--motion-duration, 0.8s))) allow-discrete;
+  }
+
+  .toast.is-visible {
+    display: var(--toast-display, flex);
+    opacity: var(--toast-opacity, 1);
+    transform: translate(0, 0);
+
+    /* 400ms matches --duration-slow exactly (DESIGN_PRINCIPLES.md #1's scale),
+       so it sits in this chain as the named tier; 800ms (the close side above)
+       matches no named tier and skips straight to the root token. */
+    /* Same max(50ms, …) floor as the closed-state block below, and for the same
+       reason -- a consumer-set --toast-open-duration can bypass the JS-side
+       floor on the inAnimationDuration prop just as easily as the close side. */
+    transition:
+      opacity
+        max(50ms, var(--toast-open-duration, var(--duration-slow, var(--motion-duration, 0.4s))))
+        var(--toast-open-easing, var(--ease-out, var(--motion-easing, ease-out))),
+      transform
+        max(50ms, var(--toast-open-duration, var(--duration-slow, var(--motion-duration, 0.4s))))
+        var(--toast-open-easing, var(--ease-out, var(--motion-easing, ease-out))),
+      display
+        max(50ms, var(--toast-open-duration, var(--duration-slow, var(--motion-duration, 0.4s))))
+        allow-discrete;
+
+    @starting-style {
+      opacity: 0;
+      transform: translate(var(--toast-enter-x, 0px), var(--toast-enter-y, 0px));
+    }
   }
 
   .no-page-overlap {
     position: var(--toast-position, relative);
   }
 
+  .toast[data-direction='left-to-right'] {
+    --toast-enter-x: calc(-1 * var(--distance-overlay, 60px));
+  }
+  .toast[data-direction='right-to-left'] {
+    --toast-enter-x: var(--distance-overlay, 60px);
+  }
+  .toast[data-direction='bottom-to-top'] {
+    --toast-enter-y: var(--distance-overlay, 60px);
+  }
+  .toast[data-direction='top-to-bottom'] {
+    --toast-enter-y: calc(-1 * var(--distance-overlay, 60px));
+  }
+
+  /* Vertical directions travel a shorter, fixed distance in non-overlap mode --
+     today's own literal (20px), kept as its own value rather than forced onto
+     `--distance-overlay`: that token replaces the old 500px "flying" default,
+     and 20px was already reasonable (DESIGN_PRINCIPLES.md #1). Horizontal
+     directions never varied with `overlapPage` before this migration (see the
+     pre-migration `getAnimationConfig` switch), so they get no non-overlap
+     override here either. */
+  .toast.no-page-overlap[data-direction='bottom-to-top'] {
+    --toast-enter-y: 20px;
+  }
+  .toast.no-page-overlap[data-direction='top-to-bottom'] {
+    --toast-enter-y: -20px;
+  }
+
+  /* Accessibility guard, not a style preference -- `!important` is deliberate.
+     It has to outrank both the direction rules above and any per-instance
+     inline `--toast-enter-x`/`-y` the component sets from `inAnimationOffset`/
+     `outAnimationOffset` above (an inline style otherwise beats any selector in
+     this sheet). Duration floors at 0.05s rather than 0s so the
+     `transitionend` listener that fires `ontoasthide` still runs -- a `0s`
+     transition never starts, so it never ends, and (empirically, under heavy
+     main-thread jank) even a 1ms duration can get coalesced across a single
+     style recalc with no observable "before" frame, which drops
+     `transitionend` the same way. 50ms clears a normal frame budget with
+     margin while staying well under perceptible motion. See
+     DESIGN_PRINCIPLES.md #1 on matching a guard's specificity to what it has
+     to override. */
+  @media (prefers-reduced-motion: reduce) {
+    .toast,
+    .toast.is-visible {
+      --toast-enter-x: 0px !important;
+      --toast-enter-y: 0px !important;
+      transition-duration: 0.05s !important;
+    }
+  }
+
   .toast-icon-wrapper {
     display: flex;
     width: var(--toast-icon-wrapper-width, 20px);

package/dist/Toggle/Toggle.svelte

@@ -140,12 +140,14 @@
     background-color: var(--slider-unchecked-color, #ccc);
     -webkit-transition: var(
       --toggle-slider-transition,
-      all var(--toggle-slider-transition-duration, var(--motion-duration, 0.4s))
+      all
+        var(--toggle-slider-transition-duration, var(--duration-slow, var(--motion-duration, 0.4s)))
         var(--toggle-slider-transition-easing, var(--motion-easing, ease))
     );
     transition: var(
       --toggle-slider-transition,
-      all var(--toggle-slider-transition-duration, var(--motion-duration, 0.4s))
+      all
+        var(--toggle-slider-transition-duration, var(--duration-slow, var(--motion-duration, 0.4s)))
         var(--toggle-slider-transition-easing, var(--motion-easing, ease))
     );
   }
@@ -161,12 +163,14 @@
     background-color: var(--toggle-slider-before-background-color, white);
     -webkit-transition: var(
       --toggle-slider-transition,
-      all var(--toggle-slider-transition-duration, var(--motion-duration, 0.4s))
+      all
+        var(--toggle-slider-transition-duration, var(--duration-slow, var(--motion-duration, 0.4s)))
         var(--toggle-slider-transition-easing, var(--motion-easing, ease))
     );
     transition: var(
       --toggle-slider-transition,
-      all var(--toggle-slider-transition-duration, var(--motion-duration, 0.4s))
+      all
+        var(--toggle-slider-transition-duration, var(--duration-slow, var(--motion-duration, 0.4s)))
         var(--toggle-slider-transition-easing, var(--motion-easing, ease))
     );
   }

package/dist/ToolCallLog/ToolCallLog.svelte

@@ -309,7 +309,11 @@
     max-width: 100%;
     animation: tool-call-log-fade-up
       var(--tool-call-log-chip-animation-duration, var(--motion-duration, 320ms))
-      var(--tool-call-log-ease, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1))) both;
+      var(
+        --tool-call-log-ease,
+        var(--ease-smooth-out, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1)))
+      )
+      both;
     transition:
       background var(--tool-call-log-chip-transition-duration, var(--motion-duration, 150ms))
         var(--tool-call-log-chip-transition-easing, var(--motion-easing, ease)),
@@ -425,7 +429,11 @@
     box-shadow: var(--tool-call-log-popover-shadow, 0 10px 30px rgba(0, 0, 0, 0.12));
     animation: tool-call-log-fade-up
       var(--tool-call-log-popover-animation-duration, var(--motion-duration, 200ms))
-      var(--tool-call-log-ease, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1))) both;
+      var(
+        --tool-call-log-ease,
+        var(--ease-smooth-out, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1)))
+      )
+      both;
   }
 
   .popover-detail {

package/dist/Tooltip/Tooltip.svelte

@@ -276,7 +276,7 @@
       `white-space:normal`,
       `word-wrap:break-word`,
       `pointer-events:none`,
-      `transition:opacity var(--tooltip-opacity-duration,0.15s) ease-in-out`
+      `transition:opacity var(--tooltip-opacity-duration,var(--duration-quick,var(--motion-duration,0.15s))) var(--tooltip-opacity-easing,var(--ease-in-out,var(--motion-easing,ease-in-out)))`
     ].join(';');
 
     const arrowEl = document.createElement('div');
@@ -432,7 +432,9 @@
     word-wrap: break-word;
     pointer-events: none;
     opacity: 1;
-    transition: opacity var(--tooltip-opacity-duration, 0.15s) ease-in-out;
+    transition: opacity
+      var(--tooltip-opacity-duration, var(--duration-quick, var(--motion-duration, 0.15s)))
+      var(--tooltip-opacity-easing, var(--ease-in-out, var(--motion-easing, ease-in-out)));
   }
 
   .tooltip-arrow {