@juspay/svelte-ui-components 4.31.3 → 4.32.0

package/dist/CommandMenu/CommandMenu.svelte

@@ -4,6 +4,7 @@
   import { lockBodyScroll, unlockBodyScroll } from '../utils';
   import { registerDismissible } from '../_interaction/dismissal';
   import { getActiveElement } from '../_interaction/focus';
+  import { tokenizedFly } from '../Animations/tokenizedFly';
   import { SvelteMap } from 'svelte/reactivity';
   import Img from '../Img/Img.svelte';
   import searchSvg from '../assets/search.svg?raw';
@@ -25,6 +26,27 @@
   const uid = $props.id();
   const listboxId = `command-menu-listbox-${uid}`;
 
+  // Centered, medium-large panel: --distance-large / --duration-base tiers —
+  // a command palette warrants more presence than a small anchored dropdown.
+  // 200ms matches --duration-base exactly, so the duration chain picks up that
+  // named tier before falling to --motion-duration. easingTokens is new:
+  // tokenizedFly now parses a CSS easing-token string (keyword or cubic-bezier)
+  // into a JS EasingFunction, so --command-menu-panel-transition-easing has a
+  // live hook -- --ease-smooth-out is the shared named tier, cubicOut stays the
+  // ultimate JS fallback if no token resolves.
+  const panelTransitionParams = {
+    y: 30,
+    durationTokens: [
+      '--command-menu-panel-transition-duration',
+      '--duration-base',
+      '--motion-duration'
+    ],
+    fallbackDuration: 200,
+    distanceTokens: ['--command-menu-panel-transition-distance', '--distance-large'],
+    fallbackDistance: 30,
+    easingTokens: ['--command-menu-panel-transition-easing', '--ease-smooth-out', '--motion-easing']
+  };
+
   let query = $state('');
   let activeIndex = $state(0);
   let inputElement: HTMLInputElement | null = $state(null);
@@ -86,7 +108,14 @@
     flatItems.length > 0 ? `command-menu-option-${uid}-${activeIndex}` : null
   );
 
+  // Guarded rather than assumed single-fire: out:tokenizedFly keeps the dialog
+  // (and its handlers) mounted for the outro's duration, so a second Escape,
+  // outside click, or item interaction landing during that window would
+  // otherwise fire onclose/onselect again before Svelte actually tears it down.
   function close() {
+    if (!open) {
+      return;
+    }
     open = false;
     query = '';
     activeIndex = 0;
@@ -94,7 +123,7 @@
   }
 
   function selectItem(item: CommandItem) {
-    if (item.disabled) {
+    if (!open || item.disabled) {
       return;
     }
     onselect?.(item);
@@ -228,6 +257,23 @@
   // point in a fresh open. Ctrl+K stays on `handleGlobalKeyDown`/`window`
   // below rather than moving here: it is an OPEN shortcut that must keep
   // working while the menu is closed, and this layer only exists while open.
+  // KNOWN LIMITATION, not yet fixed: this action's mount function -- and so
+  // this capture -- only runs once, when `.command-menu-overlay` is first
+  // created. `open` is `$bindable`, so an external trigger button and the
+  // built-in Ctrl+K shortcut commonly coexist; if the menu is reopened via a
+  // DIFFERENT trigger while still mid-outro from a just-finished close
+  // (out:tokenizedFly's ~200ms fallback keeps this instance alive, and Svelte
+  // reverses rather than recreates the block on a same-window reopen), this
+  // function does not run again -- `openerElement` stays whatever the FIRST
+  // opener was, and focus incorrectly returns there instead of to the trigger
+  // that actually opened the currently-visible session. A correct fix needs
+  // to re-capture on every logical open, not just the first DOM mount (e.g. an
+  // `$effect` watching `open`), while still finding the right shadow-DOM-aware
+  // active element (getActiveElement needs an already-connected node, and this
+  // component renders nothing while closed) and without racing the focus-the-
+  // input logic below it. Deferred rather than shipped half-verified: a wrong
+  // guess here risks a worse regression (stealing focus into the wrong
+  // element on every open) than the narrow bug it would fix.
   function scrollLockAction(node: HTMLElement) {
     const opener = getActiveElement(node);
     if (openerElement === null && opener instanceof HTMLElement) {
@@ -267,6 +313,23 @@
 </script>
 
 {#if open}
+  <!-- `open` flips false (and aria-expanded on the trigger follows suit) the
+       instant close()/selectItem() run, but this whole subtree stays mounted
+       for .command-menu-dialog's out:tokenizedFly outro below -- Svelte only
+       destroys an ancestor once a descendant's own out-transition finishes.
+       `inert` pulls the fading-but-still-mounted dialog out of the
+       accessibility tree (and out of tab order) on that same instant, so a
+       screen reader doesn't still see role="dialog" aria-modal="true" for a
+       surface that's already reported itself closed. Set on BOTH this element
+       and .command-menu-dialog below, not just the one carrying
+       role="dialog": verified live that Svelte stops applying reactive
+       attribute updates to an ancestor once a descendant's own outro begins,
+       so the binding here alone would go stale the moment the transition
+       starts -- only the element actually running the out: transition is
+       guaranteed to keep updating through it. close()/selectItem() are
+       already guarded against a stray interaction landing here regardless --
+       this is the matching fix for what AT perceives, not a second copy of
+       that guard. -->
   <div
     class="command-menu-overlay {classes ?? ''}"
     use:scrollLockAction
@@ -276,10 +339,17 @@
     aria-modal="true"
     aria-label="Command menu"
     tabindex="-1"
+    inert={!open}
     data-pw={typeof testId === 'string' ? testId : null}
     testID={typeof testId === 'string' ? testId : null}
   >
-    <div class="command-menu-dialog" bind:this={dialogElement}>
+    <div
+      class="command-menu-dialog"
+      bind:this={dialogElement}
+      inert={!open}
+      in:tokenizedFly={panelTransitionParams}
+      out:tokenizedFly={panelTransitionParams}
+    >
       <div class="command-menu-input-wrapper">
         {#if typeof searchIcon === 'function'}
           {@render searchIcon()}

package/dist/ContextMenu/ContextMenu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { registerDismissible } from '../_interaction/dismissal';
   import { getActiveElement } from '../_interaction/focus';
+  import { tokenizedFly } from '../Animations/tokenizedFly';
   import type { ContextMenuProperties, ContextMenuItem } from './properties';
 
   let {
@@ -25,6 +26,27 @@
   // the menu goes away, matching Menu.svelte's own restore-on-close contract.
   let openerElement: HTMLElement | null = $state(null);
 
+  // Small anchored dropdown: --distance-medium / --duration-quick tiers — snappier
+  // and less travel than CommandMenu's centered palette, matching Menu.svelte's own.
+  // 150ms matches --duration-quick exactly, so the duration chain picks up that
+  // named tier before falling to --motion-duration. easingTokens is new:
+  // tokenizedFly now parses a CSS easing-token string (keyword or cubic-bezier)
+  // into a JS EasingFunction, so --context-menu-panel-transition-easing has a
+  // live hook -- --ease-smooth-out is the shared named tier, cubicOut stays the
+  // ultimate JS fallback if no token resolves.
+  const panelTransitionParams = {
+    y: 12,
+    durationTokens: [
+      '--context-menu-panel-transition-duration',
+      '--duration-quick',
+      '--motion-duration'
+    ],
+    fallbackDuration: 150,
+    distanceTokens: ['--context-menu-panel-transition-distance', '--distance-medium'],
+    fallbackDistance: 12,
+    easingTokens: ['--context-menu-panel-transition-easing', '--ease-smooth-out', '--motion-easing']
+  };
+
   let selectableItems: ContextMenuItem[] = $derived(
     items.filter((item) => !item.separator && !item.disabled)
   );
@@ -57,7 +79,14 @@
     });
   }
 
+  // Guarded rather than assumed single-fire: out:tokenizedFly keeps the dropdown
+  // (and its handlers) mounted for the outro's duration, so a second Escape,
+  // outside click, or item interaction landing during that window would
+  // otherwise fire onclose/onselect again before Svelte actually tears it down.
   function close() {
+    if (!open) {
+      return;
+    }
     cancelOpenFrame();
     open = false;
     focusedIndex = -1;
@@ -83,7 +112,7 @@
   }
 
   function selectMenuItem(item: ContextMenuItem) {
-    if (item.disabled) {
+    if (!open || item.disabled) {
       return;
     }
     onselect?.(item);
@@ -225,14 +254,25 @@
 </div>
 
 {#if open}
+  <!-- `open` flips false the instant close()/selectMenuItem() run, but this
+       subtree stays mounted for the out:tokenizedFly outro below -- Svelte
+       only destroys it once its own out-transition finishes. `inert` pulls
+       the fading-but-still-mounted dropdown out of the accessibility tree
+       (and tab order) on that same instant, matching what the trigger's own
+       state already reports. close()/selectMenuItem() are already guarded
+       against a stray interaction landing here regardless -- this is the
+       matching fix for what AT perceives, not a second copy of that guard. -->
   <div
     class="context-menu-dropdown"
     style="left: {posX}px; top: {posY}px; --context-menu-max-height: {maxHeight};"
     bind:this={menuEl}
     role="menu"
     tabindex="-1"
+    inert={!open}
     onkeydown={handleMenuKeydown}
     use:dismissalAction
+    in:tokenizedFly={panelTransitionParams}
+    out:tokenizedFly={panelTransitionParams}
   >
     {#each items as item (item.value)}
       {#if item.separator}

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -655,7 +655,8 @@
   }
 
   .bar-shape {
-    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;
   }
@@ -677,9 +678,9 @@
 
   .line-dot {
     transition:
-      r var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      r var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease)),
-      opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      opacity var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease));
     cursor: pointer;
   }

package/dist/FunnelChart/FunnelChart.svelte

@@ -431,11 +431,11 @@
 
   .funnel-bar {
     transition:
-      opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      opacity var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease)),
-      y var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      y var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease)),
-      height var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      height var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease));
     cursor: pointer;
   }
@@ -463,7 +463,8 @@
   }
 
   .funnel-connector {
-    transition: d var(--chart-transition-duration, var(--motion-duration, 0.2s))
+    transition: d
+      var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
       var(--chart-transition-easing, var(--motion-easing, ease));
   }
 

package/dist/Gallery/Gallery.svelte

@@ -79,6 +79,54 @@
     };
   }
 
+  /**
+   * Resolves a CSS time value (e.g. `"0.2s"`, `"150ms"`) to milliseconds.
+   * Returns `null` rather than 0 when nothing parses, so an explicit `0s`
+   * override is never confused with "no token set".
+   */
+  function parseCssDurationMs(value: string): number | null {
+    const text = value.trim();
+    if (text.length === 0) {
+      return null;
+    }
+    const amount = Number.parseFloat(text);
+    if (!Number.isFinite(amount)) {
+      return null;
+    }
+    if (text.endsWith('ms')) {
+      return amount;
+    }
+    if (text.endsWith('s')) {
+      return amount * 1000;
+    }
+    return null;
+  }
+
+  /**
+   * Wraps `fade` so the lightbox honours the CSS token chain
+   * (`--gallery-lightbox-transition-duration` / `--duration-base` /
+   * `--motion-duration`, resolved once on `.lightbox` below as
+   * `--_gallery-lightbox-transition-duration`) when a consumer sets one, and
+   * otherwise falls back to the `lightboxTransitionDuration` prop --
+   * unchanged default of 200ms when NEITHER is set. An explicit prop wins over
+   * the CSS token when BOTH are set, not the other way around: `--motion-duration`
+   * is an ambient, root-level default meant for a consumer who never touches
+   * this component directly, while `lightboxTransitionDuration` is an explicit,
+   * per-instance choice -- the more specific override has to win, the same way
+   * an inline style beats a stylesheet rule. `typeof … === 'number'` (not `??`)
+   * is what makes that precedence real: `??` would let the CSS token jump the
+   * queue the moment a consumer sets one globally, silently overriding a prop
+   * they explicitly passed to this specific instance.
+   */
+  function lightboxFade(node: Element) {
+    if (typeof lightboxTransitionDuration === 'number') {
+      return fade(node, { duration: lightboxTransitionDuration });
+    }
+    const raw = getComputedStyle(node).getPropertyValue('--_gallery-lightbox-transition-duration');
+    const duration = parseCssDurationMs(raw) ?? 200;
+    return fade(node, { duration });
+  }
+
   function openLightbox(index: number, opener: EventTarget | null): void {
     if (opener instanceof HTMLElement) {
       openerElement = opener;
@@ -273,7 +321,7 @@
     use:lightboxAction
     onclick={handleBackdropClick}
     onkeydown={handleLightboxKeydown}
-    transition:fade={{ duration: lightboxTransitionDuration ?? 200 }}
+    transition:lightboxFade
   >
     <div class="lightbox-close" bind:this={closeButtonWrap}>
       <Button ariaLabel="Close gallery" onclick={closeLightbox}>
@@ -527,6 +575,10 @@
     align-items: center;
     background: var(--gallery-lightbox-background, #000000e6);
     -webkit-tap-highlight-color: transparent;
+    --_gallery-lightbox-transition-duration: var(
+      --gallery-lightbox-transition-duration,
+      var(--duration-base, var(--motion-duration))
+    );
   }
 
   .lightbox:focus {

package/dist/Gallery/properties.d.ts

@@ -28,9 +28,11 @@ export type OptionalGalleryProperties = {
     testId?: string;
     classes?: string;
     /**
-     * Duration (ms) of the lightbox's `fade` transition. A CSS custom property
-     * cannot reach a Svelte transition directive's parameters, so this prop is
-     * the token-contract equivalent for Gallery's motion — same shape as
+     * Duration (ms) of the lightbox's `fade` transition, used whenever the
+     * `--gallery-lightbox-transition-duration` CSS token (and its
+     * `--duration-base` / `--motion-duration` fallbacks) resolve to nothing.
+     * A transition directive's parameters are plain JS, so `Gallery.svelte`
+     * bridges the token chain in via `getComputedStyle` — same shape as
      * Toast's `inAnimationDuration`/`outAnimationDuration`. Defaults to the
      * library's existing 200ms so omitting it renders identically to before.
      */

package/dist/Gauge/Gauge.svelte

@@ -99,7 +99,8 @@
   .bar {
     stroke: var(--gauge-bar-color, #2196f3);
     stroke-width: var(--gauge-stroke-width, 8);
-    transition: stroke-dashoffset var(--gauge-transition-duration, 0.3s) ease;
+    transition: stroke-dashoffset var(--gauge-transition-duration, var(--motion-duration, 0.3s))
+      var(--gauge-transition-easing, var(--motion-easing, ease));
   }
 
   .label {

package/dist/LineChart/LineChart.svelte

@@ -1062,9 +1062,10 @@
   }
   .line-area-fill {
     transition:
-      fill-opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      fill-opacity
+        var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease)),
-      opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      opacity var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease));
     pointer-events: none;
   }
@@ -1072,7 +1073,8 @@
     opacity: var(--linechart-dimmed-opacity, 0.2);
   }
   .line-path {
-    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));
     stroke-linecap: round;
     stroke-linejoin: round;
@@ -1089,9 +1091,9 @@
   }
   .dot {
     transition:
-      r var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      r var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease)),
-      opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      opacity var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease));
     stroke: var(--chart-dot-stroke, light-dark(#fff, #111827));
     stroke-width: 2;

package/dist/MediaPlayer/MediaPlayer.svelte

@@ -455,7 +455,15 @@
     z-index: var(--media-player-overlay-z-index, 20);
     border-radius: inherit;
     background-color: var(--media-player-overlay-color, transparent);
-    transition: var(--media-player-overlay-transition, background-color 0.2s ease);
+    transition: var(
+      --media-player-overlay-transition,
+      background-color
+        var(
+          --media-player-overlay-transition-duration,
+          var(--duration-base, var(--motion-duration, 0.2s))
+        )
+        var(--media-player-overlay-transition-easing, var(--motion-easing, ease))
+    );
     --center-controls-visibility: var(--media-player-center-controls-visibility, hidden);
     --bottom-controls-visibility: var(--media-player-bottom-controls-visibility, hidden);
   }

package/dist/MediaPlayer/MediaPlayer.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { MediaPlayerProperties } from './properties';
-declare const MediaPlayer: import("svelte").Component<MediaPlayerProperties, {}, "muted" | "duration" | "playing" | "currentTime">;
+declare const MediaPlayer: import("svelte").Component<MediaPlayerProperties, {}, "muted" | "playing" | "duration" | "currentTime">;
 type MediaPlayer = ReturnType<typeof MediaPlayer>;
 export default MediaPlayer;

package/dist/MediaUpload/MediaUpload.svelte

@@ -542,7 +542,7 @@
      consumer overriding the token is most likely adding more of it. Dropping the
      whole declaration is right here because every end state is a resting state. */
   @media (prefers-reduced-motion: reduce) {
-    .media-item {
+    .card {
       transition: none;
     }
   }

package/dist/Menu/Menu.svelte

@@ -4,6 +4,7 @@
   import Img from '../Img/Img.svelte';
   import { computeMenuDropdownPosition } from './dropdownPosition';
   import { eventHitsInside, registerDismissible } from '../_interaction/dismissal';
+  import { tokenizedFly } from '../Animations/tokenizedFly';
   import type { MenuProperties, MenuItem, MenuPlacement } from './properties';
 
   let {
@@ -79,6 +80,23 @@
   // Gap between trigger and portaled panel, matching the --menu-margin default.
   const PORTAL_MENU_GAP = 4;
 
+  // Small anchored dropdown: --distance-medium / --duration-quick tiers — snappier
+  // and less travel than CommandMenu's centered palette. 150ms matches
+  // --duration-quick exactly, so the duration chain picks up that named tier
+  // before falling to --motion-duration. easingTokens is new: tokenizedFly now
+  // parses a CSS easing-token string (keyword or cubic-bezier) into a JS
+  // EasingFunction, so --menu-panel-transition-easing has a live hook --
+  // --ease-smooth-out is the shared named tier, cubicOut stays the ultimate JS
+  // fallback if no token resolves.
+  const panelTransitionParams = {
+    y: 12,
+    durationTokens: ['--menu-panel-transition-duration', '--duration-quick', '--motion-duration'],
+    fallbackDuration: 150,
+    distanceTokens: ['--menu-panel-transition-distance', '--distance-medium'],
+    fallbackDistance: 12,
+    easingTokens: ['--menu-panel-transition-easing', '--ease-smooth-out', '--motion-easing']
+  };
+
   // Keep the portaled panel anchored to its trigger while the page scrolls or
   // resizes. Mirrors the chart-tooltip portal pattern; $effect is the sanctioned
   // reactive escape hatch here for untracked window listeners. Reposition work is
@@ -213,7 +231,15 @@
     });
   }
 
+  // Guarded rather than assumed single-fire: out:tokenizedFly keeps the dropdown
+  // (and its handlers) mounted for the outro's duration, so a second Escape,
+  // outside click, or item interaction landing during that window would
+  // otherwise fire onclose/onselect (and re-run focus restoration) again before
+  // Svelte actually tears it down.
   function close() {
+    if (!open) {
+      return;
+    }
     open = false;
     focusedIndex = -1;
     typeaheadQuery = '';
@@ -243,7 +269,7 @@
   }
 
   function selectItem(item: MenuItem) {
-    if (item.disabled === true) {
+    if (!open || item.disabled === true) {
       return;
     }
     onselect?.(item);
@@ -453,6 +479,14 @@
   {/if}
 
   {#if open}
+    <!-- `open` flips false the instant close()/selectItem() run, but this
+         subtree stays mounted for the out:tokenizedFly outro below -- Svelte
+         only destroys it once its own out-transition finishes. `inert` pulls
+         the fading-but-still-mounted dropdown out of the accessibility tree
+         (and tab order) on that same instant, matching what aria-expanded on
+         the trigger already reports. close()/selectItem() are already guarded
+         against a stray interaction landing here regardless -- this is the
+         matching fix for what AT perceives, not a second copy of that guard. -->
     <div
       class="menu-dropdown menu-dropdown-{placement === 'auto' ? resolvedPlacement : placement}"
       class:menu-dropdown-measuring={measuringPlacement}
@@ -463,10 +497,13 @@
       id={menuId}
       aria-label={menuAriaLabel}
       tabindex="-1"
+      inert={!open}
       style={portalStyle}
       onkeydown={handleMenuKeydown}
       use:portalToRoot
       use:dismissalAction
+      in:tokenizedFly={panelTransitionParams}
+      out:tokenizedFly={panelTransitionParams}
     >
       {#each items as item (item.value)}
         {#if item.separator === true}

package/dist/Modal/Modal.svelte

@@ -106,10 +106,18 @@
     };
   };
 
+  // Debounced through the same leading-edge debounce() handleOverlayClick
+  // already uses below, for the same reason: OverlayAnimation's out:tokenizedFly
+  // keeps the popstate listener registered (onMount/onDestroy span the outro,
+  // ~350ms fallback) for as long as the overlay is still fading out, so a
+  // second rapid back-press in that window would otherwise fire onclose/
+  // ondismiss a second time for one dismissal.
   const handlePopstate = (): void => {
     backPressed = true;
-    onclose?.();
-    ondismiss?.();
+    debounce(() => {
+      onclose?.();
+      ondismiss?.();
+    });
   };
 
   const handleRightImageClick = (event: MouseEvent): void => {
@@ -161,9 +169,15 @@
   // dismissible layer and Escape is pressed -- same callbacks the old
   // Escape branch in handleKeyDown used to invoke directly, just gated on
   // ownership now instead of firing for every open modal unconditionally.
+  // Debounced through the same debounce() handleOverlayClick/handlePopstate
+  // use, for the same reason: a second Escape landing while
+  // OverlayAnimation's out:tokenizedFly outro is still keeping this modal's
+  // dismissal listeners registered would otherwise fire the callbacks twice.
   const handleEscape = (): void => {
-    onoverlayclick?.();
-    ondismiss?.();
+    debounce(() => {
+      onoverlayclick?.();
+      ondismiss?.();
+    });
   };
 
   // The overlay's own Enter/Space activation, additional to the shared

package/dist/Pagination/Pagination.svelte

@@ -159,7 +159,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: var(--pagination-transition, background 0.15s ease, color 0.15s ease);
+    transition: var(
+      --pagination-transition,
+      background
+        var(--pagination-transition-duration, var(--duration-quick, var(--motion-duration, 0.15s)))
+        var(--pagination-transition-easing, var(--motion-easing, ease)),
+      color
+        var(--pagination-transition-duration, var(--duration-quick, var(--motion-duration, 0.15s)))
+        var(--pagination-transition-easing, var(--motion-easing, ease))
+    );
   }
 
   .page-button:hover:not(:disabled):not(.active) {

package/dist/PieChart/PieChart.svelte

@@ -662,9 +662,9 @@
     stroke: var(--piechart-stroke-color, #fff);
     stroke-width: var(--piechart-stroke-width, 2);
     transition:
-      transform var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      transform var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease)),
-      opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      opacity var(--chart-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
         var(--chart-transition-easing, var(--motion-easing, ease));
     transform-origin: 0 0;
     cursor: pointer;

package/dist/Radio/Radio.svelte

@@ -122,7 +122,15 @@
     border: var(--radio-border, 2px solid #9e9e9e);
     border-radius: var(--radio-border-radius, 50%);
     background-color: var(--radio-background, #ffffff);
-    transition: var(--radio-transition, 0.2s);
+    /* --radio-transition wraps the WHOLE value, not just the duration -- see the
+       matching comment on Checkbox's .box rule for why appending a separate
+       easing term after it (the prior shape here) breaks a consumer override
+       that already includes its own timing function. */
+    transition: var(
+      --radio-transition,
+      var(--radio-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--radio-transition-easing, var(--motion-easing, ease))
+    );
     box-sizing: border-box;
     flex-shrink: 0;
   }
@@ -150,7 +158,11 @@
     height: 0;
     border-radius: var(--radio-dot-border-radius, 50%);
     background-color: var(--radio-dot-color, #2196f3);
-    transition: var(--radio-transition, 0.2s);
+    transition: var(
+      --radio-transition,
+      var(--radio-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--radio-transition-easing, var(--motion-easing, ease))
+    );
   }
 
   .radio-dot.checked {

package/dist/RatingGroup/RatingGroup.svelte

@@ -240,12 +240,21 @@
     width: var(--rating-group-star-size, 24px);
     height: var(--rating-group-star-size, 24px);
     flex-shrink: 0;
+    transition: transform
+      var(--rating-group-star-transition-duration, var(--motion-duration, 0.15s))
+      var(--rating-group-star-transition-easing, var(--motion-easing, ease));
   }
 
   .rating-group:not(.disabled):not(.readonly) .star:hover {
     transform: var(--rating-group-star-hover-transform, scale(1.1));
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .star {
+      transition: none;
+    }
+  }
+
   .star-empty,
   .star-fill {
     position: absolute;