@juspay/svelte-ui-components 4.27.6 → 4.28.0

package/dist/AspectRatio/AspectRatio.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { AspectRatioProperties } from './properties';
+
+  let { ratio = 1, children, classes, testId }: AspectRatioProperties = $props();
+
+  // `ratio` feeds directly into the CSS `aspect-ratio` declaration below, which is
+  // only meaningful for a finite, positive number: zero/negative have no geometric
+  // meaning, and NaN/Infinity (e.g. an image's naturalWidth / naturalHeight read
+  // before it has decoded) would serialize to an invalid token and drop the whole
+  // declaration. Checked independently of the `= 1` default parameter above -- that
+  // default only fires when the prop is omitted entirely, so an explicitly passed
+  // 0/-2/NaN/Infinity still reaches this component and needs the same fallback.
+  let resolvedRatio = $derived(Number.isFinite(ratio) && ratio > 0 ? ratio : 1);
+</script>
+
+<div
+  class="container {classes ?? ''}"
+  style:aspect-ratio="var(--aspect-ratio-container-aspect-ratio, {resolvedRatio})"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  /*
+   * The CSS `aspect-ratio` property is used unconditionally, with no
+   * `padding-bottom` percentage-hack fallback. It has shipped in every
+   * evergreen browser since 2021 (Chrome 88, Firefox 89, Safari 15) -- the
+   * same generation of CSS this library already relies on elsewhere with no
+   * fallback path (Accordion's expand/collapse animates
+   * `grid-template-rows` between `0fr` and `1fr`, which needs the same-era
+   * interpolation support). A `padding-bottom` fallback would also
+   * reintroduce the wrapper-plus-absolutely-positioned-child structure
+   * `aspect-ratio` exists to remove, doubling the markup this component
+   * would carry for browsers this library does not otherwise support.
+   *
+   * The ratio itself is set inline (see the `style:aspect-ratio` binding in
+   * the markup) rather than here, because its fallback is the per-instance
+   * `ratio` prop value, not a fixed default -- but the inline value always
+   * routes through the `--aspect-ratio-container-aspect-ratio` custom
+   * property first, so a consumer can still override the ratio purely
+   * through CSS (e.g. set it on an ancestor, or on this element via
+   * `classes`) without touching the prop at all.
+   */
+  .container {
+    display: block;
+    width: var(--aspect-ratio-container-width, 100%);
+    overflow: var(--aspect-ratio-container-overflow, hidden);
+  }
+</style>

package/dist/AspectRatio/AspectRatio.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AspectRatio: import("svelte").Component<import("./properties").OptionalAspectRatioProperties, {}, "">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

package/dist/AspectRatio/properties.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type AspectRatioProperties = OptionalAspectRatioProperties;
+export type MandatoryAspectRatioProperties = Record<string, never>;
+export type OptionalAspectRatioProperties = {
+    /**
+     * Width-to-height ratio the content is constrained to, expressed the same
+     * way the CSS `aspect-ratio` property reads it -- e.g. `16 / 9` for a
+     * widescreen frame, `4 / 3` for a photo. Must be a finite, positive
+     * number: zero and negative ratios have no geometric meaning, and a
+     * non-finite value (`NaN`, `Infinity` -- e.g. from an image's
+     * `naturalWidth / naturalHeight` read before it has decoded) would either
+     * produce an invalid CSS declaration or a degenerate one-dimensional box.
+     * An invalid `ratio` falls back to the default of `1` (a square) rather
+     * than emitting broken CSS.
+     */
+    ratio?: number;
+    /**
+     * Content rendered inside the ratio-constrained container. Optional --
+     * an empty `AspectRatio` still reserves the correctly-shaped layout space,
+     * which is useful as a placeholder while the real content (e.g. an image)
+     * is still loading.
+     */
+    children?: Snippet;
+    classes?: string;
+    /** Renders as `data-pw` (and `testID`) on the root element for Playwright test selection. */
+    testId?: string;
+};

package/dist/AspectRatio/properties.js

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

package/dist/Banner/Banner.svelte

@@ -1,4 +1,9 @@
 <script lang="ts">
+  // A Svelte transition directive takes a JS number, so no `@media
+  // (prefers-reduced-motion: reduce)` block can reach it -- the guard has to be
+  // in script. Duration 0 lands on exactly the frame the slide was travelling
+  // to: the banner, present. Nothing is stranded.
+  import { prefersReducedMotion } from '../utils';
   import type { BannerProperties } from './properties';
   import { slide } from 'svelte/transition';
   import Button from '../Button/Button.svelte';
@@ -17,7 +22,8 @@
     ondismiss,
     classes,
     title,
-    role = null
+    role = null,
+    transitionDuration
   }: BannerProperties = $props();
 
   let interactive = $derived(typeof onclick === 'function');
@@ -54,7 +60,7 @@
     tabindex={interactive ? 0 : null}
     data-pw={typeof testId === 'string' ? testId : null}
     testID={typeof testId === 'string' ? testId : null}
-    transition:slide={{ duration: 300 }}
+    transition:slide={{ duration: prefersReducedMotion() ? 0 : (transitionDuration ?? 300) }}
   >
     {#if typeof icon === 'function'}
       <div class="banner-icon">
@@ -109,7 +115,7 @@
     justify-content: var(--banner-justify-content, center);
     background-color: var(--banner-background, #f0f4f8);
     color: var(--banner-color, #4d6174);
-    font-family: var(--banner-font-family);
+    font-family: var(--banner-font-family, inherit);
     font-size: var(--banner-font-size, 14px);
     font-weight: var(--banner-font-weight, 500);
     line-height: var(--banner-line-height, 1.3);
@@ -156,7 +162,7 @@
   }
 
   .banner-link-text {
-    color: var(--banner-link-color, #0099ff);
+    color: var(--banner-link-color, #1d4ed8);
     margin-left: var(--banner-link-gap, 4px);
   }
 

package/dist/Banner/properties.d.ts

@@ -14,6 +14,14 @@ export type OptionalBannerProperties = {
     dismissIcon?: Snippet;
     classes?: string;
     role?: string | null;
+    /**
+     * Duration (ms) of the show/hide `slide` transition. A CSS custom property
+     * cannot reach a Svelte transition directive's parameters, so this prop is
+     * the token-contract equivalent for Banner's motion — same shape as
+     * Toast's `inAnimationDuration`/`outAnimationDuration`. Defaults to the
+     * library's existing 300ms so omitting it renders identically to before.
+     */
+    transitionDuration?: number | null;
 };
 export type BannerEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/BarChart/BarChart.svelte

@@ -104,10 +104,17 @@
   let plotEl: HTMLDivElement | null = $state(null);
   let chartWidth = $state(0);
   let chartHeight = $state(0);
+  // `hovered` (pointer) and `focused` (keyboard) are kept as separate state
+  // rather than one field shared by both input sources: tabbing to a bar
+  // fires a native scroll-into-view, which triggers a late `pointerleave` on
+  // whatever the mouse used to sit over -- with one shared field that
+  // pointerleave unconditionally clobbers the just-set focus highlight. See
+  // `activeBar` below for the precedence this restores (focus wins over
+  // pointer hover).
   let hovered = $state<{ si: number; pi: number } | null>(null);
+  let focused = $state<{ si: number; pi: number } | null>(null);
   let mouseX = $state(0);
   let mouseY = $state(0);
-  let anchor = $state<TooltipAnchor | null>(null);
   let valueFontSize = $state(14);
   /** Internal tracking for the imperative highlight API (onchartready). */
   let apiHighlightedIndex = $state<number | null>(null);
@@ -247,6 +254,17 @@
 
   let isStackedMode = $derived(isMulti && groupMode === 'stacked');
 
+  /**
+   * A stacked bar's contribution to its category total and running baseline.
+   * Mirrors computeStackedValues' precedent (geometry.ts): in a value-accumulating
+   * stack, a negative or non-finite value has no well-defined height, so it
+   * contributes 0 rather than poisoning stackBase for every series stacked
+   * above it in the same category (Math.max(0, NaN) is NaN, not 0).
+   */
+  function stackContribution(value: number): number {
+    return Number.isFinite(value) ? Math.max(0, value) : 0;
+  }
+
   function getDisplayValue(bar: BarRect): string {
     if (typeof bar.dataPoint.valueLabel === 'string' && bar.dataPoint.valueLabel.length > 0) {
       return bar.dataPoint.valueLabel;
@@ -271,7 +289,10 @@
         return [0, 100];
       }
       const totalsPerLabel = labels.map((_, labelIndex) =>
-        visibleEntries.reduce((sum, { s }) => sum + Math.max(0, s.data[labelIndex]?.value ?? 0), 0)
+        visibleEntries.reduce(
+          (sum, { s }) => sum + stackContribution(s.data[labelIndex]?.value ?? 0),
+          0
+        )
       );
       return niceLinearDomain(0, Math.max(0, ...totalsPerLabel));
     }
@@ -286,10 +307,15 @@
         }
       }
     }
-    if (all.length === 0) {
+    // Non-finite values (NaN/Infinity) mark gap points; exclude them here so
+    // one bad point cannot poison the whole extent (Math.min/max propagate
+    // NaN, and Infinity passes right through a max comparison). Matches the
+    // LineChart/AreaChart call-site filter.
+    const finite = all.filter((v) => Number.isFinite(v));
+    if (finite.length === 0) {
       return [0, 1];
     }
-    return niceLinearDomain(Math.min(0, ...all), Math.max(0, ...all));
+    return niceLinearDomain(Math.min(0, ...finite), Math.max(0, ...finite));
   });
 
   let valTickCount = $derived(
@@ -414,7 +440,10 @@
       }
     } else if (isMulti && groupMode === 'stacked') {
       const categoryTotals = labels.map((_, labelIndex) =>
-        visibleEntries.reduce((sum, { s }) => sum + Math.max(0, s.data[labelIndex]?.value ?? 0), 0)
+        visibleEntries.reduce(
+          (sum, { s }) => sum + stackContribution(s.data[labelIndex]?.value ?? 0),
+          0
+        )
       );
       const stackBase = new Array(labels.length).fill(0);
       for (let vi = 0; vi < visibleEntries.length; vi++) {
@@ -422,7 +451,7 @@
         const seriesFill: BarFill = s.color ?? getColor(si);
         for (let pi = 0; pi < s.data.length; pi++) {
           const d = s.data[pi];
-          const rawVal = Math.max(0, d.value);
+          const rawVal = stackContribution(d.value);
           const normalizedValue = isNormalized
             ? categoryTotals[pi] > 0
               ? (rawVal / categoryTotals[pi]) * 100
@@ -676,11 +705,31 @@
 
   // ── Tooltip ────────────────────────────────────────────────────
 
+  /**
+   * The bar's accessible name, mirroring `tooltipData`'s own title rule below.
+   *
+   * In a multi-series chart the tooltip disambiguates two bars in the same
+   * category as `{label} — {seriesName}`; the aria-label did not, so every bar
+   * in a category announced identically. A screen-reader user tabbing a grouped
+   * chart heard "Jan: 42" then "Jan: 38" with nothing saying which series either
+   * belonged to -- a distinction sighted users have had since the tooltip
+   * shipped. The two spellings live next to each other so they cannot drift
+   * apart again.
+   */
+  function barAccessibleName(bar: BarRect): string {
+    const label = isMulti ? `${bar.dataPoint.label} — ${bar.seriesName}` : bar.dataPoint.label;
+    return `${label}: ${getDisplayValue(bar)}`;
+  }
+
+  // Precedence: keyboard focus wins over pointer hover (see the state
+  // declarations above for why they're tracked separately).
+  let activeBar = $derived(focused ?? hovered);
+
   let tooltipData = $derived.by(() => {
-    if (hovered === null) {
+    if (activeBar === null) {
       return null;
     }
-    const bar = bars.find((b) => b.si === hovered!.si && b.pi === hovered!.pi);
+    const bar = bars.find((b) => b.si === activeBar!.si && b.pi === activeBar!.pi);
     if (!bar) {
       return null;
     }
@@ -725,11 +774,6 @@
 
   // ── Interactions ───────────────────────────────────────────────
 
-  // Narrows an event's currentTarget to Element without an `as` cast (repo
-  // lint bans type assertions outside test files).
-  const targetElement = (e: Event): Element | null =>
-    e.currentTarget instanceof Element ? e.currentTarget : null;
-
   function trackMouse(e: PointerEvent): void {
     const position = pointerPositionIn(plotEl, e);
     if (position !== null) {
@@ -751,31 +795,86 @@
       : { x: r.right - c.left, y: r.top + r.height / 2 - c.top, side: 'right' };
   }
 
-  function activateBar(target: Element, bar: BarRect): void {
+  // Looks up the live DOM element for the active bar via the `data-pw`
+  // index attribute every bar path already renders (bar-${i}), rather than
+  // caching an element reference from whichever handler last fired. Needed
+  // because `anchor` below must fall back correctly even when focus blurs
+  // off a bar while the pointer independently, silently, still rests over a
+  // different (already-hovered but never re-entered) bar -- a blur event
+  // carries no reference to that other bar's element.
+  function findBarElement(target: { si: number; pi: number }): Element | null {
+    if (plotEl === null) {
+      return null;
+    }
+    const idx = bars.findIndex((b) => b.si === target.si && b.pi === target.pi);
+    if (idx === -1) {
+      return null;
+    }
+    return plotEl.querySelector(`[data-pw="bar-${idx}"]`);
+  }
+
+  let anchor = $derived.by<TooltipAnchor | null>(() => {
+    if (activeBar === null) {
+      return null;
+    }
+    const el = findBarElement(activeBar);
+    return el ? anchorFromElement(el) : null;
+  });
+
+  function sameBar(
+    a: { si: number; pi: number } | null,
+    b: { si: number; pi: number } | null
+  ): boolean {
+    return a === b || (a !== null && b !== null && a.si === b.si && a.pi === b.pi);
+  }
+
+  // Mirrors the combined activeBar (focus-or-hover) to onbarhover, deduped
+  // so that e.g. focus landing on the bar the pointer already hovers doesn't
+  // re-fire the callback with a value that never went away.
+  let lastNotifiedBar: { si: number; pi: number } | null = null;
+  function notifyBarHover(): void {
+    const next = activeBar;
+    if (sameBar(next, lastNotifiedBar)) {
+      return;
+    }
+    lastNotifiedBar = next;
+    if (next === null) {
+      onbarhover?.(null);
+      return;
+    }
+    const bar = bars.find((b) => b.si === next.si && b.pi === next.pi);
+    if (bar) {
+      onbarhover?.({ index: bar.pi, dataPoint: bar.dataPoint });
+    }
+  }
+
+  function activatePointer(bar: BarRect): void {
     hovered = { si: bar.si, pi: bar.pi };
-    anchor = anchorFromElement(target);
-    onbarhover?.({ index: bar.pi, dataPoint: bar.dataPoint });
+    notifyBarHover();
+  }
+
+  function activateFocus(bar: BarRect): void {
+    focused = { si: bar.si, pi: bar.pi };
+    notifyBarHover();
   }
 
   function handleEnter(e: PointerEvent, bar: BarRect): void {
-    const el = targetElement(e);
-    if (el !== null) {
-      activateBar(el, bar);
-    }
+    activatePointer(bar);
     trackMouse(e);
   }
 
-  function handleFocus(e: FocusEvent, bar: BarRect): void {
-    const el = targetElement(e);
-    if (el !== null) {
-      activateBar(el, bar);
-    }
+  function handleFocus(bar: BarRect): void {
+    activateFocus(bar);
   }
 
-  function handleLeave(): void {
+  function handlePointerLeave(): void {
     hovered = null;
-    anchor = null;
-    onbarhover?.(null);
+    notifyBarHover();
+  }
+
+  function handleBlur(): void {
+    focused = null;
+    notifyBarHover();
   }
 
   function handleKeydown(e: KeyboardEvent, bar: BarRect): void {
@@ -785,23 +884,30 @@
     }
   }
 
-  // Touch taps have no pointerleave: dismiss when a pointerdown lands outside.
+  // Touch taps have no pointerleave: dismiss when a pointerdown lands
+  // outside. Clears only the hover half -- a real pointerdown outside a
+  // focused bar blurs it natively (see handleBlur), matching
+  // PieChart/AreaChart/LineChart's identical hover-only scope for this
+  // effect.
   // eslint-disable-next-line no-restricted-syntax
   $effect(() => {
     if (hovered === null) {
       return;
     }
-    return dismissOnOutsidePointerDown(containerEl, handleLeave);
+    return dismissOnOutsidePointerDown(containerEl, () => {
+      hovered = null;
+      notifyBarHover();
+    });
   });
 
   function handleClick(bar: BarRect) {
     onbarclick?.({ index: bar.pi, dataPoint: bar.dataPoint });
   }
 
-  function hoveredBar() {
-    return hovered === null
+  function activeBarData() {
+    return activeBar === null
       ? null
-      : (bars.find((b) => b.si === hovered!.si && b.pi === hovered!.pi) ?? null);
+      : (bars.find((b) => b.si === activeBar!.si && b.pi === activeBar!.pi) ?? null);
   }
 </script>
 
@@ -955,11 +1061,11 @@
                   {#if isStackedMode && barRadius > 0}
                     <path
                       class="bar"
-                      class:hovered={hovered?.si === bar.si && hovered?.pi === bar.pi}
+                      class:hovered={activeBar?.si === bar.si && activeBar?.pi === bar.pi}
                       class:highlighted={effectiveHighlightedIndex !== null &&
                         effectiveHighlightedIndex === bar.pi}
-                      class:dimmed={(hovered !== null &&
-                        (hovered.si !== bar.si || hovered.pi !== bar.pi)) ||
+                      class:dimmed={(activeBar !== null &&
+                        (activeBar.si !== bar.si || activeBar.pi !== bar.pi)) ||
                         (effectiveHighlightedIndex !== null &&
                           effectiveHighlightedIndex !== bar.pi)}
                       d={stackedBarPath(bar)}
@@ -968,23 +1074,23 @@
                       testID={`bar-${i}`}
                       tabindex="0"
                       role="button"
-                      aria-label="{bar.dataPoint.label}: {getDisplayValue(bar)}"
+                      aria-label={barAccessibleName(bar)}
                       onpointerenter={(e) => handleEnter(e, bar)}
                       onpointermove={trackMouse}
-                      onpointerleave={handleLeave}
-                      onfocus={(e) => handleFocus(e, bar)}
-                      onblur={handleLeave}
+                      onpointerleave={handlePointerLeave}
+                      onfocus={() => handleFocus(bar)}
+                      onblur={handleBlur}
                       onkeydown={(e) => handleKeydown(e, bar)}
                       onclick={() => handleClick(bar)}
                     />
                   {:else}
                     <path
                       class="bar"
-                      class:hovered={hovered?.si === bar.si && hovered?.pi === bar.pi}
+                      class:hovered={activeBar?.si === bar.si && activeBar?.pi === bar.pi}
                       class:highlighted={effectiveHighlightedIndex !== null &&
                         effectiveHighlightedIndex === bar.pi}
-                      class:dimmed={(hovered !== null &&
-                        (hovered.si !== bar.si || hovered.pi !== bar.pi)) ||
+                      class:dimmed={(activeBar !== null &&
+                        (activeBar.si !== bar.si || activeBar.pi !== bar.pi)) ||
                         (effectiveHighlightedIndex !== null &&
                           effectiveHighlightedIndex !== bar.pi)}
                       d={valueEndBarPath(bar)}
@@ -993,12 +1099,12 @@
                       testID={`bar-${i}`}
                       tabindex="0"
                       role="button"
-                      aria-label="{bar.dataPoint.label}: {getDisplayValue(bar)}"
+                      aria-label={barAccessibleName(bar)}
                       onpointerenter={(e) => handleEnter(e, bar)}
                       onpointermove={trackMouse}
-                      onpointerleave={handleLeave}
-                      onfocus={(e) => handleFocus(e, bar)}
-                      onblur={handleLeave}
+                      onpointerleave={handlePointerLeave}
+                      onfocus={() => handleFocus(bar)}
+                      onblur={handleBlur}
                       onkeydown={(e) => handleKeydown(e, bar)}
                       onclick={() => handleClick(bar)}
                     />
@@ -1044,7 +1150,7 @@
           unstyled
         >
           {#snippet content()}
-            {@const hb = hoveredBar()}
+            {@const hb = activeBarData()}
             {#if hb}
               {@render tooltipSnippet(hb.dataPoint, hb.pi)}
             {/if}
@@ -1076,7 +1182,8 @@
     position: relative;
   }
   .bar {
-    transition: opacity var(--chart-transition-duration, 0.2s) ease;
+    transition: opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))
+      var(--chart-transition-easing, var(--motion-easing, ease));
     cursor: pointer;
   }
   .bar.hovered {

package/dist/Book/Book.svelte

@@ -273,10 +273,23 @@
     border: none;
     padding: 0;
     cursor: pointer;
-    transition: background-color 0.2s ease;
+    transition: background-color var(--book-dot-transition-duration, var(--motion-duration, 0.2s))
+      var(--book-dot-transition-easing, var(--motion-easing, ease));
   }
 
   .dot-active {
     background-color: var(--book-dot-active-color, #333333);
   }
+
+  /* The page turn is a transform, which is the movement prefers-reduced-motion
+     exists for. Both ends of the transition are meaningful on their own -- a page
+     is either turned or not -- so removing it leaves no misleading frame, unlike
+     the timed loaders in Button and ListItem. This block lives in the component's
+     own <style> because that is the only stylesheet reaching inside the shadow
+     root a custom-element consumer gets. */
+  @media (prefers-reduced-motion: reduce) {
+    .page {
+      transition: none;
+    }
+  }
 </style>

package/dist/BrandLoader/BrandLoader.svelte

@@ -26,8 +26,14 @@
 
 <style>
   .background {
-    height: var(--loader-background-height);
-    width: var(--loader-background-width);
+    height: var(--loader-background-height, auto);
+    width: var(--loader-background-width, auto);
+    /* Caps the splash against whatever box it was placed in. min-width:0 is
+       required as well: as a flex item this would otherwise refuse to shrink
+       below the 100vw min-content of .loader inside it, and the cap would
+       resolve against a width .loader had itself dictated. */
+    max-width: 100%;
+    min-width: 0;
     border-radius: var(--loader-background-border-radius, 0px);
   }
 
@@ -42,6 +48,12 @@
     height: var(--brand-loader-height, var(--loader-height, 100vh));
     width: var(--brand-loader-width, var(--loader-width, 100vw));
     border-radius: var(--loader-background-border-radius, 0px);
+    /* The 100vw/100vh default above is the full-screen splash case. An embedded
+       instance must never exceed the box it was placed in: this is a centring
+       flex container, so overflowing it centres the logo on the viewport rather
+       than on the container and the content visibly drifts to one side. */
+    max-width: 100%;
+    max-height: 100%;
     display: flex;
     justify-content: var(--loader-justify-content, center);
     align-items: var(--loader-align-items, center);
@@ -56,21 +68,35 @@
   .text {
     font-size: var(--loader-text-font-size, 22px);
     padding: var(--loader-text-padding, 16px 0px);
-    color: var(--loader-text-color, white);
+    /* The frosted overlay below is only ~20% opaque, so its painted colour is
+       mostly whatever page sits behind it. A splash screen is far more often
+       hosted on a light page than over dark imagery, so the readable-by-default
+       choice is a dark tone here; --loader-text-color stays the override point
+       for the over-dark-imagery look (e.g. --loader-text-color: white). */
+    color: var(--loader-text-color, #333333);
     font-family: var(--loader-text-font, inherit);
   }
 
   .sub-text {
     font-size: var(--loader-sub-text-font-size, 12px);
     margin: var(--loader-sub-text-margin, 16px);
+    /* Previously unset, so it silently inherited whatever colour the host page
+       happened to have -- legible by accident on this doc site, invisible or
+       wrong wherever that assumption didn't hold. Same reasoning as .text: a
+       muted dark tone reads on the default light backdrop. */
+    color: var(--loader-sub-text-color, #52525b);
   }
 
+  /* `.background` used to declare `animation: animateBackground ...` here, but
+     `@keyframes animateBackground` has never existed anywhere in this repo --
+     confirmed back to 8801087c, the commit that introduced BrandLoader (Nov
+     2023). It referenced nothing and so never animated anything; this was
+     dead from day one, not a regression, and no prior design for what it
+     should look like ever shipped, so it is removed rather than reconstructed.
+     The `prefers-reduced-motion` override below is left in place as a guard:
+     if a real indefinite animation is ever added to `.background`, that guard
+     already stops it. */
   @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
-    .background {
-      animation: animateBackground 5s ease-in-out infinite normal;
-      -webkit-animation: animateBackground 5s ease-in-out infinite normal;
-    }
-
     .loader {
       background-color: var(--loader-background-color, #ffffff33);
       -webkit-backdrop-filter: blur(var(--loader-webkit-backdrop-filter, 50px));
@@ -96,19 +122,23 @@
   }
   .lds-ellipsis div:nth-child(1) {
     left: 8px;
-    animation: lds-ellipsis1 0.6s infinite;
+    animation: lds-ellipsis1
+      var(--brand-loader-ellipsis-animation-duration, var(--motion-duration, 0.6s)) infinite;
   }
   .lds-ellipsis div:nth-child(2) {
     left: 8px;
-    animation: lds-ellipsis2 0.6s infinite;
+    animation: lds-ellipsis2
+      var(--brand-loader-ellipsis-animation-duration, var(--motion-duration, 0.6s)) infinite;
   }
   .lds-ellipsis div:nth-child(3) {
     left: 32px;
-    animation: lds-ellipsis2 0.6s infinite;
+    animation: lds-ellipsis2
+      var(--brand-loader-ellipsis-animation-duration, var(--motion-duration, 0.6s)) infinite;
   }
   .lds-ellipsis div:nth-child(4) {
     left: 56px;
-    animation: lds-ellipsis3 0.6s infinite;
+    animation: lds-ellipsis3
+      var(--brand-loader-ellipsis-animation-duration, var(--motion-duration, 0.6s)) infinite;
   }
   @keyframes lds-ellipsis1 {
     0% {
@@ -134,4 +164,38 @@
       transform: translate(24px, 0);
     }
   }
+  /* An indefinite animation is the case this preference exists for: it never
+     ends, so a user who asked the OS to minimise motion gets a permanent loop.
+     The animation stops, but the element must still read as "busy" -- a guard
+     that leaves nothing on screen, or leaves a frame that means something else,
+     is worse than the motion it removed. This block lives in the component's own
+     <style> because that is the only stylesheet that reaches inside the shadow
+     root a custom-element consumer gets. */
+  @media (prefers-reduced-motion: reduce) {
+    .background {
+      -webkit-animation: none;
+      animation: none;
+    }
+
+    /* Each dot's animation is declared on a `:nth-child()` selector, which
+       outranks a bare `.lds-ellipsis div` rule and comes later, so the guard
+       has to name them at the same specificity or it is silently overridden. */
+    .lds-ellipsis div:nth-child(1),
+    .lds-ellipsis div:nth-child(2),
+    .lds-ellipsis div:nth-child(3),
+    .lds-ellipsis div:nth-child(4) {
+      /* Two of the four dots animate scale (one in, one out) and two translate.
+         With the animations stopped every transform resolves to its identity,
+         so all four sit at their `left` offsets at full size. */
+      animation: none;
+      transform: none;
+    }
+
+    .lds-ellipsis div:nth-child(1) {
+      /* The scale-in dot shares `left: 8px` with the second one, so at rest the
+         two occupy the same spot and the row reads as three dots with one drawn
+         twice. Dropping it leaves three, evenly spaced at 8/32/56. */
+      display: none;
+    }
+  }
 </style>