@juspay/svelte-ui-components 4.31.3 → 4.32.1

package/dist/SankeyChart/SankeyChart.svelte

@@ -806,7 +806,8 @@
     pointer-events: none;
   }
   .sankey-link {
-    transition: stroke-opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+    transition: stroke-opacity
+      var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
       var(--chart-transition-easing, var(--motion-easing, ease));
     cursor: pointer;
   }
@@ -815,7 +816,8 @@
     outline-offset: var(--sankey-focus-outline-offset, 2px);
   }
   .sankey-node {
-    transition: opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+    transition: opacity
+      var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
       var(--chart-transition-easing, var(--motion-easing, ease));
     cursor: pointer;
   }
@@ -839,7 +841,8 @@
     stroke-width: var(--sankey-label-halo-width, 0);
     stroke-linejoin: round;
     pointer-events: none;
-    transition: opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+    transition: opacity
+      var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
       var(--chart-transition-easing, var(--motion-easing, ease));
   }
   .sankey-col-label {

package/dist/Select/Select.svelte

@@ -1122,7 +1122,21 @@
     cursor: pointer;
     outline: none;
     -webkit-tap-highlight-color: transparent;
-    transition: var(--select-trigger-transition, border-color 0.15s, box-shadow 0.15s);
+    transition: var(
+      --select-trigger-transition,
+      border-color
+        var(
+          --select-trigger-transition-duration,
+          var(--duration-quick, var(--motion-duration, 0.15s))
+        )
+        var(--select-trigger-transition-easing, var(--motion-easing, ease)),
+      box-shadow
+        var(
+          --select-trigger-transition-duration,
+          var(--duration-quick, var(--motion-duration, 0.15s))
+        )
+        var(--select-trigger-transition-easing, var(--motion-easing, ease))
+    );
   }
 
   .select-trigger :global(.select-left-icon) {
@@ -1269,7 +1283,8 @@
     height: var(--select-arrow-size, 16px);
     color: var(--select-arrow-color, #666666);
     flex-shrink: 0;
-    transition: transform var(--select-arrow-transition-duration, var(--motion-duration, 0.15s))
+    transition: transform
+      var(--select-arrow-transition-duration, var(--duration-quick, var(--motion-duration, 0.15s)))
       var(--select-arrow-transition-easing, var(--motion-easing, ease));
   }
 
@@ -1450,9 +1465,16 @@
     color: var(--select-option-indicator-color, currentColor);
     transition:
       background-color
-        var(--select-option-indicator-transition-duration, var(--motion-duration, 0.15s))
+        var(
+          --select-option-indicator-transition-duration,
+          var(--duration-quick, var(--motion-duration, 0.15s))
+        )
         var(--select-option-indicator-transition-easing, var(--motion-easing, ease)),
-      border-color var(--select-option-indicator-transition-duration, var(--motion-duration, 0.15s))
+      border-color
+        var(
+          --select-option-indicator-transition-duration,
+          var(--duration-quick, var(--motion-duration, 0.15s))
+        )
         var(--select-option-indicator-transition-easing, var(--motion-easing, ease));
   }
 

package/dist/Sheet/Sheet.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { reducedMotion } from '../reduced-motion.svelte';
   import type { SheetProperties } from './properties';
-  import { fly, fade } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
+  import { tokenizedFly } from '../Animations/tokenizedFly';
   import { lockBodyScroll, unlockBodyScroll } from '../utils';
   import { tick } from 'svelte';
   import Button from '../Button/Button.svelte';
@@ -66,7 +67,38 @@
     }
   });
 
+  // Feeds flyParams' own x/y/duration (reduced-motion already folded in above)
+  // into tokenizedFly, which only resizes the distance magnitude -- fallback
+  // 60px, down from the 400px literal above -- and reads a duration token.
+  // Token name is `sheet-panel`, not `sheet-content`: the element carrying this
+  // transition is `.sheet-panel` below; `--sheet-content-*` already names the
+  // nested scrollable body (`--sheet-content-overflow-y`/-padding), a different
+  // element, so reusing that prefix here would point a consumer at the wrong
+  // node. Single duration token/literal, no open/close split: unlike Modal,
+  // nothing here already has an in/out asymmetry to preserve. Each array falls
+  // back from the element token through the shared --distance-overlay tier (the
+  // same 60px this batch settled on for Modal) to the --motion-duration/-easing
+  // roots; 300ms doesn't match any named duration tier so it skips straight to
+  // the root, same reasoning as Modal's own duration chain.
+  let sheetFlyParams = $derived({
+    x: flyParams.x,
+    y: flyParams.y,
+    durationTokens: ['--sheet-panel-transition-duration', '--motion-duration'],
+    fallbackDuration: flyParams.duration,
+    distanceTokens: ['--sheet-panel-transition-distance', '--distance-overlay'],
+    fallbackDistance: 60,
+    easingTokens: ['--sheet-panel-transition-easing', '--ease-smooth-out', '--motion-easing']
+  });
+
+  // Guarded rather than assumed single-fire: the panel's transition:tokenizedFly
+  // outro (and the overlay's own transition:fade) keep this mounted -- and every
+  // dismiss path (overlay click, Enter/Space, Escape, the close button) live --
+  // for the outro's duration after open first flips false. A second dismissal
+  // landing in that window would otherwise fire onclose a second time.
   function close() {
+    if (!open) {
+      return;
+    }
     open = false;
     onclose?.();
   }
@@ -229,7 +261,7 @@
       tabindex="-1"
       data-pw={typeof testId === 'string' ? `${testId}-panel` : null}
       testID={typeof testId === 'string' ? `${testId}-panel` : null}
-      transition:fly|global={flyParams}
+      transition:tokenizedFly|global={sheetFlyParams}
       onintroend={handleIntroEnd}
       onoutroend={handleOutroEnd}
     >

package/dist/Slider/Slider.svelte

@@ -153,7 +153,12 @@
       )
     );
     outline: none;
-    transition: var(--slider-transition, background 0.2s ease);
+    transition: var(
+      --slider-transition,
+      background
+        var(--slider-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--slider-transition-easing, var(--motion-easing, ease))
+    );
     cursor: pointer;
   }
 
@@ -174,9 +179,17 @@
     opacity: var(--slider-thumb-opacity, 1);
     cursor: pointer;
     transition:
-      transform var(--slider-thumb-transition-duration, var(--motion-duration, 0.15s))
+      transform
+        var(
+          --slider-thumb-transition-duration,
+          var(--duration-quick, 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))
+      opacity
+        var(
+          --slider-thumb-transition-duration,
+          var(--duration-quick, var(--motion-duration, 0.15s))
+        )
         var(--slider-thumb-transition-easing, var(--motion-easing, ease));
   }
 
@@ -190,9 +203,17 @@
     opacity: var(--slider-thumb-opacity, 1);
     cursor: pointer;
     transition:
-      transform var(--slider-thumb-transition-duration, var(--motion-duration, 0.15s))
+      transform
+        var(
+          --slider-thumb-transition-duration,
+          var(--duration-quick, 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))
+      opacity
+        var(
+          --slider-thumb-transition-duration,
+          var(--duration-quick, var(--motion-duration, 0.15s))
+        )
         var(--slider-thumb-transition-easing, var(--motion-easing, ease));
   }
 

package/dist/Snippet/Snippet.svelte

@@ -57,7 +57,11 @@
            visible text of its own. Keeping it once the label swaps to
            "Copied!" would leave a screen reader announcing "Copy to clipboard"
            over the visible feedback (WCAG 2.5.3, Label in Name). -->
-      <Button onclick={handleCopy} {...copyState.copied ? {} : { ariaLabel: 'Copy to clipboard' }}>
+      <Button
+        variant="ghost"
+        onclick={handleCopy}
+        {...copyState.copied ? {} : { ariaLabel: 'Copy to clipboard' }}
+      >
         {#if copyState.copied}
           <span class="snippet-copied">{copiedLabel}</span>
         {:else if typeof copyIcon === 'function'}
@@ -124,6 +128,8 @@
     --button-border-radius: var(--snippet-copy-border-radius, var(--radius, 4px));
     --cursor: var(--snippet-copy-cursor, pointer);
     --button-hover-color: var(--snippet-copy-hover-background, #333);
+    /* Ghost brings its own hover label; keep this button's. */
+    --button-hover-text-color: var(--button-text-color);
     display: flex;
     align-items: center;
     justify-content: center;

package/dist/Table/Table.svelte

@@ -947,6 +947,7 @@
                     {#if isColumnSortable(colIndex)}
                       <div class="sort-button">
                         <Button
+                          variant="ghost"
                           onclick={() => handleSort(colIndex)}
                           ariaLabel={labels?.sortBy?.(header) ?? `Sort by ${header}`}
                         >
@@ -1423,7 +1424,11 @@
     width: var(--table-scroll-scrim-width, 32px);
     opacity: 0;
     pointer-events: none;
-    transition: opacity var(--table-scroll-scrim-transition-duration, var(--motion-duration, 0.2s))
+    transition: opacity
+      var(
+        --table-scroll-scrim-transition-duration,
+        var(--duration-base, var(--motion-duration, 0.2s))
+      )
       var(--table-scroll-scrim-transition-easing, var(--motion-easing, ease));
     z-index: 2;
   }
@@ -1671,7 +1676,10 @@
        through <sui-table> the selection checkboxes' transition could not be
        slowed or stopped by any means -- custom properties are the only route
        across a shadow boundary and this one was already spoken for. */
-    --checkbox-transition: var(--table-checkbox-transition, 0.15s);
+    --checkbox-transition: var(
+      --table-checkbox-transition,
+      var(--duration-quick, var(--motion-duration, 0.15s))
+    );
   }
 
   /* ── Sort button ────────────────────────────────────────────────────────── */

package/dist/Tabs/Tabs.svelte

@@ -605,7 +605,12 @@
     color: var(--tabs-arrow-color, var(--tabs-item-color, #666666));
     cursor: pointer;
     z-index: 1;
-    transition: var(--tabs-arrow-transition, color 0.2s ease);
+    transition: var(
+      --tabs-arrow-transition,
+      color
+        var(--tabs-arrow-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--tabs-arrow-transition-easing, var(--motion-easing, ease))
+    );
     font-family: inherit;
   }
 
@@ -635,7 +640,13 @@
     white-space: nowrap;
     flex-shrink: 0;
     user-select: none;
-    transition: var(--tabs-transition, color 0.2s ease, background 0.2s ease);
+    transition: var(
+      --tabs-transition,
+      color var(--tabs-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--tabs-transition-easing, var(--motion-easing, ease)),
+      background var(--tabs-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--tabs-transition-easing, var(--motion-easing, ease))
+    );
   }
 
   /* Roving focus really does move (see focusedKey/focusTabAt above) -- this
@@ -736,7 +747,13 @@
     height: var(--tabs-indicator-height, 2px);
     background-color: var(--tabs-indicator-color, #1a73e8);
     border-radius: var(--tabs-indicator-border-radius, 2px 2px 0 0);
-    transition: var(--tabs-indicator-transition, left 0.3s ease, width 0.3s ease);
+    transition: var(
+      --tabs-indicator-transition,
+      left var(--tabs-indicator-transition-duration, var(--motion-duration, 0.3s))
+        var(--tabs-indicator-transition-easing, var(--motion-easing, ease)),
+      width var(--tabs-indicator-transition-duration, var(--motion-duration, 0.3s))
+        var(--tabs-indicator-transition-easing, var(--motion-easing, ease))
+    );
     pointer-events: none;
   }
 
@@ -812,7 +829,13 @@
     width: var(--tabs-indicator-height, 2px);
     height: var(--tabs-indicator-height, 2px);
     border-radius: var(--tabs-indicator-border-radius-vertical, 0 2px 2px 0);
-    transition: var(--tabs-indicator-transition-vertical, top 0.3s ease, height 0.3s ease);
+    transition: var(
+      --tabs-indicator-transition-vertical,
+      top var(--tabs-indicator-transition-vertical-duration, var(--motion-duration, 0.3s))
+        var(--tabs-indicator-transition-vertical-easing, var(--motion-easing, ease)),
+      height var(--tabs-indicator-transition-vertical-duration, var(--motion-duration, 0.3s))
+        var(--tabs-indicator-transition-vertical-easing, var(--motion-easing, ease))
+    );
   }
 
   /* Section header rendered above a group of vertical nav items. */

package/dist/TaskList/TaskList.svelte

@@ -148,7 +148,11 @@
        and both fall back through the library-wide --motion-* tokens. */
     animation: task-list-fade-up
       var(--task-list-row-animation-duration, var(--motion-duration, 320ms))
-      var(--task-list-ease, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1))) both;
+      var(
+        --task-list-ease,
+        var(--ease-smooth-out, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1)))
+      )
+      both;
   }
 
   .row-glyph {
@@ -206,7 +210,11 @@
     color: var(--task-list-done-color, #6b6b6b);
     animation: task-list-check-pop
       var(--task-list-check-pop-animation-duration, var(--motion-duration, 200ms))
-      var(--task-list-ease, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1))) both;
+      var(
+        --task-list-ease,
+        var(--ease-smooth-out, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1)))
+      )
+      both;
   }
   .glyph-x {
     color: var(--task-list-error-color, #c93f38);

package/dist/ThemeSwitcher/ThemeSwitcher.svelte

@@ -172,7 +172,9 @@
     background-color: var(--theme-switcher-bg, transparent);
     cursor: pointer;
     color: var(--theme-switcher-icon-color, #374151);
-    transition: background-color var(--theme-switcher-transition-duration, 0.3s);
+    transition: background-color
+      var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))
+      var(--theme-switcher-transition-easing, var(--motion-easing, ease));
     font-family: inherit;
   }
 
@@ -191,8 +193,10 @@
     width: var(--theme-switcher-icon-size, 18px);
     height: var(--theme-switcher-icon-size, 18px);
     transition:
-      opacity var(--theme-switcher-transition-duration, 0.3s),
-      transform var(--theme-switcher-transition-duration, 0.3s);
+      opacity var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))
+        var(--theme-switcher-transition-easing, var(--motion-easing, ease)),
+      transform var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))
+        var(--theme-switcher-transition-easing, var(--motion-easing, ease));
   }
 
   .icon :global(svg) {
@@ -232,8 +236,10 @@
     background-color: var(--theme-switcher-segment-active-bg, #ffffff);
     box-shadow: var(--theme-switcher-segment-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));
     transition:
-      left var(--theme-switcher-transition-duration, 0.3s),
-      width var(--theme-switcher-transition-duration, 0.3s);
+      left var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))
+        var(--theme-switcher-transition-easing, var(--motion-easing, ease)),
+      width var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))
+        var(--theme-switcher-transition-easing, var(--motion-easing, ease));
     z-index: 0;
   }
 
@@ -249,7 +255,8 @@
     background: transparent;
     cursor: pointer;
     color: var(--theme-switcher-icon-color, #374151);
-    transition: color var(--theme-switcher-transition-duration, 0.3s);
+    transition: color var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))
+      var(--theme-switcher-transition-easing, var(--motion-easing, ease));
     font-family: inherit;
   }
 

package/dist/ThinkingIndicator/ThinkingIndicator.svelte

@@ -492,7 +492,7 @@
     margin-bottom: var(--thinking-indicator-margin-bottom, 1rem);
     min-height: 0;
     transition: min-height 400ms
-      var(--thinking-indicator-trace-ease, cubic-bezier(0.23, 1, 0.32, 1));
+      var(--thinking-indicator-trace-ease, var(--ease-smooth-out, cubic-bezier(0.23, 1, 0.32, 1)));
   }
 
   .expandable.busy {
@@ -721,7 +721,8 @@
     background: var(--thinking-indicator-trace-connector-color, #dcdcdc);
     margin-left: 6px;
     flex-shrink: 0;
-    transition: height 500ms var(--thinking-indicator-trace-ease, cubic-bezier(0.23, 1, 0.32, 1));
+    transition: height 500ms
+      var(--thinking-indicator-trace-ease, var(--ease-smooth-out, cubic-bezier(0.23, 1, 0.32, 1)));
   }
 
   .trace-rows {
@@ -740,7 +741,8 @@
     font-size: var(--thinking-indicator-trace-row-font-size, 0.8125rem);
     color: var(--thinking-indicator-trace-row-color, #2b2b2b);
     animation: thinking-indicator-fade-up 320ms
-      var(--thinking-indicator-trace-ease, cubic-bezier(0.23, 1, 0.32, 1)) both;
+      var(--thinking-indicator-trace-ease, var(--ease-smooth-out, cubic-bezier(0.23, 1, 0.32, 1)))
+      both;
     text-decoration: none;
   }