@juspay/svelte-ui-components 4.31.2 → 4.32.0

package/dist/Accordion/Accordion.svelte

@@ -99,7 +99,12 @@
        the panel stretched (or centered, etc.) could not otherwise override
        this one declaration without reaching for :global() or !important. */
     align-self: var(--accordion-align-self, start);
-    transition: grid-template-rows var(--accordion-transition, 0.2s ease-out);
+    transition: grid-template-rows
+      var(
+        --accordion-transition,
+        var(--accordion-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+          var(--accordion-transition-easing, var(--ease-out, var(--motion-easing, ease-out)))
+      );
   }
 
   .accordion.expanded {

package/dist/Animations/ModalAnimation.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { fly, fade } from 'svelte/transition';
+  import { linear } from 'svelte/easing';
+  import { tokenizedFly } from './tokenizedFly';
   import { prefersReducedMotion } from '../utils';
   import type { ModalAlign, ModalEntryAnimation } from '../Modal/properties';
   import type { ModalTransition } from '../types';
@@ -31,7 +32,11 @@
     // paints the modal 300px off-target on its first frame and then snaps. Returning
     // `base` unchanged is exactly "appear in place" -- it already has x and y at 0 --
     // so only the duration needs zeroing alongside it. These values feed
-    // `in:fly|global={...}`, which no stylesheet can reach, so the guard is here.
+    // `in:tokenizedFly|global={...}`: x/y at 0 stay exactly 0 regardless of any
+    // distance token (tokenizedFly preserves a 0 rather than resizing it). A
+    // consumer-set duration token can no longer revive motion here either --
+    // tokenizedFly's own reduced-motion backstop (reducedMotion.current) clamps
+    // duration to near-zero regardless of what any token chain resolves to.
     if (prefersReducedMotion()) {
       return { ...base, duration: 0 };
     }
@@ -61,6 +66,64 @@
   // rather than argue the distinction at every call site.
   let fadeAnimationProperties = $derived({ duration: prefersReducedMotion() ? 0 : 300 });
 
+  // Open/close get distinct duration tokens (the literal fallback stays 380 both
+  // ways, matching flyAnimationProperties today) so a consumer can set an
+  // asymmetric close duration without this component inventing that gap itself.
+  // The fade-shaped branches below reuse the same token names: exactly one of
+  // the four template branches renders per instance, so "content-open" means
+  // the same thing to a consumer whether this instance flies or fades in.
+  // Each token array is element-token -> --motion-duration/-easing root, skipping
+  // a named tier: 380ms/300ms don't match any named duration tier, consistent
+  // with every other agent in this batch skipping non-matching literals rather
+  // than forcing one. --distance-overlay is the named tier both fly branches
+  // share (60px, this batch's Modal/Sheet travel-distance reduction).
+  let flyInParams = $derived({
+    x: flyAnimationProperties.x,
+    y: flyAnimationProperties.y,
+    durationTokens: ['--modal-content-open-transition-duration', '--motion-duration'],
+    fallbackDuration: flyAnimationProperties.duration,
+    distanceTokens: ['--modal-content-open-transition-distance', '--distance-overlay'],
+    fallbackDistance: 60,
+    easingTokens: ['--modal-content-open-transition-easing', '--ease-smooth-out', '--motion-easing']
+  });
+  let flyOutParams = $derived({
+    x: flyAnimationProperties.x,
+    y: flyAnimationProperties.y,
+    durationTokens: ['--modal-content-close-transition-duration', '--motion-duration'],
+    fallbackDuration: flyAnimationProperties.duration,
+    distanceTokens: ['--modal-content-close-transition-distance', '--distance-overlay'],
+    fallbackDistance: 60,
+    easingTokens: [
+      '--modal-content-close-transition-easing',
+      '--ease-smooth-out',
+      '--motion-easing'
+    ]
+  });
+  // No distanceTokens: these branches are opacity-only, same as fade's own
+  // params today. `easing` stays the ultimate JS fallback -- tokenizedFly
+  // otherwise defaults to cubicOut (fly's default), fade's own default is
+  // linear -- used only if no easingTokens entry resolves either.
+  let fadeInParams = $derived({
+    durationTokens: ['--modal-content-open-transition-duration', '--motion-duration'],
+    fallbackDuration: fadeAnimationProperties.duration,
+    easingTokens: [
+      '--modal-content-open-transition-easing',
+      '--ease-smooth-out',
+      '--motion-easing'
+    ],
+    easing: linear
+  });
+  let fadeOutParams = $derived({
+    durationTokens: ['--modal-content-close-transition-duration', '--motion-duration'],
+    fallbackDuration: fadeAnimationProperties.duration,
+    easingTokens: [
+      '--modal-content-close-transition-easing',
+      '--ease-smooth-out',
+      '--motion-easing'
+    ],
+    easing: linear
+  });
+
   let useFlyAnimation = $derived(
     entryAnimation != null ? entryAnimation !== 'fade' : align === 'top' || align === 'bottom'
   );
@@ -70,8 +133,8 @@
 {#if enable}
   {#if useFlyAnimation && useOutTransition}
     <div
-      in:fly|global={flyAnimationProperties}
-      out:fly|global={flyAnimationProperties}
+      in:tokenizedFly|global={flyInParams}
+      out:tokenizedFly|global={flyOutParams}
       data-pw={typeof testId === 'string' ? testId : null}
       testID={typeof testId === 'string' ? testId : null}
     >
@@ -79,7 +142,7 @@
     </div>
   {:else if useFlyAnimation}
     <div
-      in:fly|global={flyAnimationProperties}
+      in:tokenizedFly|global={flyInParams}
       data-pw={typeof testId === 'string' ? testId : null}
       testID={typeof testId === 'string' ? testId : null}
     >
@@ -87,8 +150,8 @@
     </div>
   {:else if useOutTransition}
     <div
-      in:fade|global={fadeAnimationProperties}
-      out:fade|global={fadeAnimationProperties}
+      in:tokenizedFly|global={fadeInParams}
+      out:tokenizedFly|global={fadeOutParams}
       data-pw={typeof testId === 'string' ? testId : null}
       testID={typeof testId === 'string' ? testId : null}
     >
@@ -96,7 +159,7 @@
     </div>
   {:else}
     <div
-      in:fade|global={fadeAnimationProperties}
+      in:tokenizedFly|global={fadeInParams}
       data-pw={typeof testId === 'string' ? testId : null}
       testID={typeof testId === 'string' ? testId : null}
     >

package/dist/Animations/OverlayAnimation.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
+  import { linear } from 'svelte/easing';
   import type { Snippet } from 'svelte';
+  import { tokenizedFly } from './tokenizedFly';
 
   type Props = {
     children?: Snippet;
@@ -10,6 +11,30 @@
   };
 
   let { children, testId, fadeIn = false }: Props = $props();
+
+  // Opacity-only, so no distanceTokens; easing is explicit because tokenizedFly
+  // otherwise defaults to cubicOut (fly's default) -- fade's own default is
+  // linear, and this replaces a fade. No reduced-motion guard here, matching
+  // today's fade calls below, which never had one either. No named duration
+  // tier: this component's easing was deliberately left untokenized (never
+  // part of the original brief -- a pure background-scrim fade doesn't
+  // warrant a new, unvalidated easing decision), and 350ms wasn't treated as
+  // evidence for a recurring named tier on its own. The chain still ends at
+  // --motion-duration, though: Overlay mounts in lockstep with ModalAnimation
+  // (both are children of the same Modal), so leaving the root out would let
+  // a consumer's "everything N% faster" override speed up the content panel
+  // while the backdrop fade stayed put -- a visibly half-tokenized common case,
+  // not a scope boundary worth preserving.
+  const openParams = {
+    durationTokens: ['--modal-overlay-open-transition-duration', '--motion-duration'],
+    fallbackDuration: 350,
+    easing: linear
+  };
+  const closeParams = {
+    durationTokens: ['--modal-overlay-close-transition-duration', '--motion-duration'],
+    fallbackDuration: 350,
+    easing: linear
+  };
 </script>
 
 {#if fadeIn}
@@ -20,8 +45,8 @@
        this prop exists for (see docs/OverlayAnimation.md). `|global` makes
        the intro play on creation regardless. -->
   <div
-    in:fade|global={{ duration: 350 }}
-    out:fade={{ duration: 350 }}
+    in:tokenizedFly|global={openParams}
+    out:tokenizedFly={closeParams}
     data-pw={typeof testId === 'string' ? testId : null}
     testID={typeof testId === 'string' ? testId : null}
   >
@@ -29,7 +54,7 @@
   </div>
 {:else}
   <div
-    out:fade={{ duration: 350 }}
+    out:tokenizedFly={closeParams}
     data-pw={typeof testId === 'string' ? testId : null}
     testID={typeof testId === 'string' ? testId : null}
   >

package/dist/Animations/tokenizedFly.d.ts

@@ -0,0 +1,17 @@
+import type { EasingFunction, TransitionConfig } from 'svelte/transition';
+export declare function parseCssEasing(raw: string): EasingFunction | null;
+export type TokenizedFlyParams = {
+    x?: number;
+    y?: number;
+    durationTokens: string[];
+    fallbackDuration: number;
+    distanceTokens?: string[];
+    fallbackDistance?: number;
+    easingTokens?: string[];
+    easing?: EasingFunction;
+};
+export type ResolvedTokenizedFly = TransitionConfig & {
+    css: NonNullable<TransitionConfig['css']>;
+    easing: NonNullable<TransitionConfig['easing']>;
+};
+export declare function tokenizedFly(node: Element, params: TokenizedFlyParams): ResolvedTokenizedFly;

package/dist/Animations/tokenizedFly.js

@@ -0,0 +1,153 @@
+import { cubicOut } from 'svelte/easing';
+import { reducedMotion } from '../reduced-motion.svelte';
+// `Number.parseFloat` on a unit with no numeric prefix (a malformed token
+// value like `--foo-duration: s;`, not just an unset one) returns NaN, and
+// `??` does not catch NaN the way it catches null/undefined -- Number.isFinite
+// is what keeps a typo'd token from flowing straight through as a duration or
+// distance instead of falling back the way an unset token already does.
+const parseCssTime = (raw) => {
+    const value = raw.trim();
+    if (value.endsWith('ms')) {
+        const amount = Number.parseFloat(value);
+        return Number.isFinite(amount) ? amount : null;
+    }
+    if (value.endsWith('s')) {
+        const amount = Number.parseFloat(value);
+        return Number.isFinite(amount) ? amount * 1000 : null;
+    }
+    return null;
+};
+const parseCssLength = (raw) => {
+    const value = raw.trim();
+    if (!value.endsWith('px')) {
+        return null;
+    }
+    const amount = Number.parseFloat(value);
+    return Number.isFinite(amount) ? amount : null;
+};
+const CSS_KEYWORD_EASINGS = {
+    ease: [0.25, 0.1, 0.25, 1],
+    'ease-in': [0.42, 0, 1, 1],
+    'ease-out': [0, 0, 0.58, 1],
+    'ease-in-out': [0.42, 0, 0.58, 1]
+};
+// Standard WebKit UnitBezier approach: express the Bezier x(u)/y(u) curves in
+// polynomial form, Newton-Raphson solve x(u) = x for u, then evaluate y(u).
+// Verified against a published reference value for CSS `ease` and against an
+// independent brute-force (dense sampling) implementation before this was
+// wired into any live component -- both matched to 6+ significant figures.
+function cubicBezierEasing(x1, y1, x2, y2) {
+    const a = (n1, n2) => 1 - 3 * n2 + 3 * n1;
+    const b = (n1, n2) => 3 * n2 - 6 * n1;
+    const c = (n1) => 3 * n1;
+    const calc = (t, n1, n2) => ((a(n1, n2) * t + b(n1, n2)) * t + c(n1)) * t;
+    const slope = (t, n1, n2) => 3 * a(n1, n2) * t * t + 2 * b(n1, n2) * t + c(n1);
+    const solveT = (x) => {
+        let t = x;
+        for (let i = 0; i < 8; i += 1) {
+            const s = slope(t, x1, x2);
+            if (Math.abs(s) < 1e-6) {
+                break;
+            }
+            t -= (calc(t, x1, x2) - x) / s;
+        }
+        return t;
+    };
+    return (x) => {
+        if (x <= 0) {
+            return 0;
+        }
+        if (x >= 1) {
+            return 1;
+        }
+        return calc(solveT(x), y1, y2);
+    };
+}
+const BEZIER_PATTERN = /^cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)$/;
+export function parseCssEasing(raw) {
+    const value = raw.trim();
+    if (value === '') {
+        return null;
+    }
+    if (value === 'linear') {
+        return (t) => t;
+    }
+    const known = CSS_KEYWORD_EASINGS[value];
+    if (known) {
+        return cubicBezierEasing(...known);
+    }
+    const match = BEZIER_PATTERN.exec(value);
+    if (!match) {
+        return null;
+    }
+    const [x1, y1, x2, y2] = match.slice(1).map(Number.parseFloat);
+    if (x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1) {
+        return null;
+    } // invalid per CSS spec: not a function of x
+    return cubicBezierEasing(x1, y1, x2, y2);
+}
+// Consumers read tokens via getComputedStyle rather than CSS var(), which has
+// no native cascade -- this walks an element-token -> named-tier -> root-token
+// fallback chain manually, returning the first token that actually resolves.
+const resolveToken = (styles, tokens) => {
+    for (const name of tokens) {
+        const raw = styles.getPropertyValue(name).trim();
+        if (raw !== '') {
+            return raw;
+        }
+    }
+    return null;
+};
+export function tokenizedFly(node, params) {
+    const styles = getComputedStyle(node);
+    const durationRaw = resolveToken(styles, params.durationTokens);
+    let duration = (durationRaw !== null ? parseCssTime(durationRaw) : null) ?? params.fallbackDuration;
+    let x = params.x ?? 0;
+    let y = params.y ?? 0;
+    if (params.distanceTokens) {
+        const distRaw = resolveToken(styles, params.distanceTokens);
+        const resolvedDist = (distRaw !== null ? parseCssLength(distRaw) : null) ??
+            params.fallbackDistance ??
+            Math.max(Math.abs(x), Math.abs(y));
+        // Math.abs, not the raw resolved value: a negative distance (a theming
+        // mistake -- `--distance-overlay: -60px`, say -- rather than anything a
+        // normal interaction can trigger) must resize the magnitude only, same as
+        // any other distance. Without it, Math.sign(x) * dist below would flip the
+        // travel DIRECTION too, silently contradicting the next comment's own
+        // stated invariant.
+        const dist = Math.abs(resolvedDist);
+        // Preserve the sign/direction the caller specified, resize the magnitude only --
+        // a 0 (no travel on that axis) must stay exactly 0 regardless of any token or
+        // fallback, since Math.sign(0) is 0 anyway but this keeps the intent explicit.
+        x = x === 0 ? 0 : Math.sign(x) * dist;
+        y = y === 0 ? 0 : Math.sign(y) * dist;
+    }
+    const easingRaw = params.easingTokens ? resolveToken(styles, params.easingTokens) : null;
+    const parsedEasing = easingRaw !== null ? parseCssEasing(easingRaw) : null;
+    // svelte/transition's own `fly` defaults to cubicOut, but the runtime
+    // (transitions.js) falls back to *linear* for any TransitionConfig that
+    // omits `easing` -- so this default has to be supplied explicitly to stay
+    // byte-identical to the `fly` calls this replaces. Fade-shaped call sites
+    // (no distanceTokens, x/y at 0) pass `easing: linear` themselves to match
+    // `fade`'s own default instead.
+    const easing = parsedEasing ?? params.easing ?? cubicOut;
+    // A consumer-set duration token can otherwise revive non-instant motion even
+    // under prefers-reduced-motion -- reducedMotion.current is the live OS
+    // preference, so this backstop applies regardless of what the token chain
+    // above resolved to. 0.001 rather than a hard 0: still visually instant, but
+    // keeps this a real (non-zero-duration) transition for Svelte's own
+    // lifecycle/event handling instead of a degenerate edge case.
+    if (reducedMotion.current) {
+        duration = 0.001;
+    }
+    const targetOpacity = +styles.opacity;
+    const transform = styles.transform === 'none' ? '' : styles.transform;
+    return {
+        duration,
+        easing,
+        css: (t) => `
+      transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
+      opacity: ${targetOpacity * t};
+    `
+    };
+}

package/dist/AreaChart/AreaChart.svelte

@@ -815,9 +815,10 @@
   }
   .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;
   }
@@ -825,7 +826,8 @@
     opacity: var(--areachart-dimmed-opacity, 0.1);
   }
   .area-line {
-    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;
@@ -842,9 +844,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/BarChart/BarChart.svelte

@@ -1182,7 +1182,8 @@
     position: relative;
   }
   .bar {
-    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;
   }

package/dist/Book/Book.svelte

@@ -216,7 +216,8 @@
     position: absolute;
     top: 0;
     left: 0;
-    transition: transform var(--book-transition-duration, 0.3s) ease;
+    transition: transform var(--book-transition-duration, var(--motion-duration, 0.3s))
+      var(--book-transition-easing, var(--motion-easing, ease));
   }
 
   .page-fade {
@@ -224,7 +225,8 @@
     top: 0;
     left: 0;
     opacity: 0;
-    transition: opacity var(--book-transition-duration, 0.3s) ease;
+    transition: opacity var(--book-transition-duration, var(--motion-duration, 0.3s))
+      var(--book-transition-easing, var(--motion-easing, ease));
     pointer-events: none;
   }
 
@@ -282,7 +284,8 @@
     border: none;
     padding: 0;
     cursor: pointer;
-    transition: background-color var(--book-dot-transition-duration, var(--motion-duration, 0.2s))
+    transition: background-color
+      var(--book-dot-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
       var(--book-dot-transition-easing, var(--motion-easing, ease));
   }
 

package/dist/ChatBubble/ChatBubble.svelte

@@ -319,7 +319,14 @@
   .chat-bubble {
     position: fixed;
     z-index: var(--chat-bubble-z-index, 1000);
-    transition: var(--chat-bubble-snap-transition, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1));
+    transition: var(
+      --chat-bubble-snap-transition,
+      transform 0.28s
+        var(
+          --chat-bubble-snap-transition-easing,
+          var(--ease-smooth-out, cubic-bezier(0.23, 1, 0.32, 1))
+        )
+    );
   }
 
   .chat-bubble.dragging {
@@ -351,8 +358,16 @@
     --resizable-handle-color: var(--chat-bubble-resize-handle-color, transparent);
     --resizable-transition: var(
       --chat-bubble-expand-transition,
-      width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
-      height 0.32s cubic-bezier(0.22, 1, 0.36, 1)
+      width 0.32s
+        var(
+          --chat-bubble-expand-transition-easing,
+          var(--ease-smooth-out, cubic-bezier(0.23, 1, 0.32, 1))
+        ),
+      height 0.32s
+        var(
+          --chat-bubble-expand-transition-easing,
+          var(--ease-smooth-out, cubic-bezier(0.23, 1, 0.32, 1))
+        )
     );
   }
 

package/dist/Checkbox/Checkbox.svelte

@@ -262,9 +262,21 @@
     border: var(--checkbox-border, 2px solid #757575);
     border-radius: var(--checkbox-border-radius, var(--radius, 4px));
     background-color: var(--checkbox-background, transparent);
-    transition:
-      background-color var(--checkbox-transition, 0.2s),
-      border var(--checkbox-transition, 0.2s);
+    /* --checkbox-transition wraps the WHOLE value (matching Choicebox/Toggle's
+       own "-transition" tokens), not just the duration -- a consumer filling it
+       with e.g. "0.3s ease-in-out" replaces the entire expression cleanly. Putting
+       it in only the duration slot with a separate -easing term appended after
+       would make that same override produce an invalid transition (two
+       timing-function components), dropping the whole declaration to its
+       initial value instead of just using a different timing. */
+    transition: var(
+      --checkbox-transition,
+      background-color
+        var(--checkbox-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--checkbox-transition-easing, var(--motion-easing, ease)),
+      border var(--checkbox-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--checkbox-transition-easing, var(--motion-easing, ease))
+    );
     flex-shrink: 0;
   }
 

package/dist/Choicebox/Choicebox.svelte

@@ -225,7 +225,15 @@
     gap: var(--choicebox-gap, 12px);
     cursor: var(--choicebox-cursor, pointer);
     font-family: var(--choicebox-font-family, inherit);
-    transition: var(--choicebox-transition, border-color 0.2s, background 0.2s);
+    transition: var(
+      --choicebox-transition,
+      border-color
+        var(--choicebox-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--choicebox-transition-easing, var(--motion-easing, ease)),
+      background
+        var(--choicebox-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))
+        var(--choicebox-transition-easing, var(--motion-easing, ease))
+    );
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -265,7 +273,21 @@
     height: var(--choicebox-indicator-size, 20px);
     border: var(--choicebox-indicator-border, 2px solid #757575);
     background: var(--choicebox-indicator-background, transparent);
-    transition: var(--choicebox-indicator-transition, background 0.2s, border-color 0.2s);
+    transition: var(
+      --choicebox-indicator-transition,
+      background
+        var(
+          --choicebox-indicator-transition-duration,
+          var(--duration-base, var(--motion-duration, 0.2s))
+        )
+        var(--choicebox-indicator-transition-easing, var(--motion-easing, ease)),
+      border-color
+        var(
+          --choicebox-indicator-transition-duration,
+          var(--duration-base, var(--motion-duration, 0.2s))
+        )
+        var(--choicebox-indicator-transition-easing, var(--motion-easing, ease))
+    );
   }
 
   .indicator.radio {

package/dist/Combobox/Combobox.svelte

@@ -580,7 +580,21 @@
     background: var(--combobox-input-background, #ffffff);
     border: var(--combobox-input-border, 1px solid #cccccc);
     border-radius: var(--combobox-input-border-radius, var(--radius, 4px));
-    transition: var(--combobox-input-transition, border-color 0.15s, box-shadow 0.15s);
+    transition: var(
+      --combobox-input-transition,
+      border-color
+        var(
+          --combobox-input-transition-duration,
+          var(--duration-quick, var(--motion-duration, 0.15s))
+        )
+        var(--combobox-input-transition-easing, var(--motion-easing, ease)),
+      box-shadow
+        var(
+          --combobox-input-transition-duration,
+          var(--duration-quick, var(--motion-duration, 0.15s))
+        )
+        var(--combobox-input-transition-easing, var(--motion-easing, ease))
+    );
   }
 
   /* Multi-select control: pills wrap above the typeahead input. */