@juspay/svelte-ui-components 4.29.1 → 4.31.0

package/dist/MediaUpload/MediaUpload.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.svelte';
   import Button from '../Button/Button.svelte';
   import Img from '../Img/Img.svelte';
   import Shimmer from '../Shimmer/Shimmer.svelte';
@@ -26,6 +27,7 @@
     fileIcon,
     errorMessages,
     files = $bindable([]),
+    animateCounter = false,
     onchange,
     onremove,
     onerror,
@@ -191,7 +193,16 @@
         <div class="label">{label}</div>
       {/if}
       {#if showCounter}
-        <div class="counter">{items.length} / {maxLength}</div>
+        {#if animateCounter}
+          <!-- The whole "N / max" reads as one value to assistive technology.
+               Only the count changes, so only its digits roll; the separator and
+               the maximum sit still as literal columns. -->
+          <div class="counter">
+            <AnimatedNumber value={`${items.length} / ${maxLength}`} />
+          </div>
+        {:else}
+          <div class="counter">{items.length} / {maxLength}</div>
+        {/if}
       {/if}
     </div>
   {/if}

package/dist/MediaUpload/properties.d.ts

@@ -36,6 +36,15 @@ export type OptionalMediaUploadProperties = {
     fileIcon?: Snippet;
     errorMessages?: MediaUploadErrorMessages;
     files?: File[];
+    /**
+     * Routes the header's `N / maxLength` counter through `AnimatedNumber` so an
+     * add/remove rolls the count instead of swapping it as plain text. Only
+     * `items.length` animates -- the `/` separator and `maxLength` stay static,
+     * since neither of those actually changes. Off by default so an unset prop
+     * renders the exact static text node it always has.
+     * @default false
+     */
+    animateCounter?: boolean;
     testId?: string;
     classes?: string;
 };

package/dist/Menu/Menu.svelte

@@ -527,8 +527,17 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  .menu-trigger:focus {
-    outline: var(--menu-trigger-focus-outline, none);
+  /* :focus-visible, not :focus: the trigger is opened by mouse click as often
+     as by keyboard (onclick={toggle} above), and a ring on every mouse-opened
+     menu would be noise. The default used to be `none` with nothing standing
+     in for it, so a keyboard user tabbing to (or landing back on, after
+     Escape closes the dropdown) the trigger had no visible sign it was
+     focused. SplitButton's own trigger wraps this same element and used to
+     set --menu-trigger-focus-outline to `none` for the identical reason --
+     see its .split-button-trigger, now fixed to inherit this default instead. */
+  .menu-trigger:focus-visible {
+    outline: var(--menu-trigger-focus-outline, 2px solid #2563eb);
+    outline-offset: var(--menu-trigger-focus-outline-offset, 2px);
   }
 
   .menu-dropdown {

package/dist/Modal/Modal.svelte

@@ -445,10 +445,6 @@
     border-radius: var(--modal-border-radius, var(--radius, 4px));
     overflow: var(--modal-content-overflow, auto);
     border-top: var(--modal-content-border-top);
-    /* tabindex="-1" makes this the focus-trap's fallback target when the modal
-       has no focusable content of its own (see _interaction/focus.ts); it is
-       never in the Tab order itself, so it needs no visible focus ring the way
-       a real focusable element would. Matches Sheet's sheet-panel. */
     outline: none;
     /* Viewport containment for every size class: only .fit-content used to carry
        a max-height, so a size whose height var is overridden to fit-content (or
@@ -459,6 +455,20 @@
     max-height: var(--modal-max-height, calc(100dvh - 32px));
   }
 
+  /* The comment this replaced claimed tabindex="-1" meant this never needed a
+     ring because it's "never in the Tab order itself" -- true, but beside the
+     point: onMount calls focusEntryPoint(modalContent), which focuses THIS
+     element directly (real DOM focus, not merely reachable via Tab) whenever
+     the modal has no focusable content of its own. That is exactly Sheet's
+     sheet-panel problem, and sheet-panel got the fix this comment said it
+     "matches" -- this one didn't. :focus-visible so the trigger click that
+     opens the modal shows nothing new; offset is negative like Sheet's,
+     since a modal can be sized to fill nearly the whole viewport. */
+  .modal-content:focus-visible {
+    outline: var(--modal-content-focus-outline, 2px solid #2563eb);
+    outline-offset: var(--modal-content-focus-outline-offset, -2px);
+  }
+
   .slot-content {
     display: var(--modal-display, flex);
     /* Flex children default to min-height: auto and refuse to shrink below their

package/dist/PieChart/PieChart.svelte

@@ -6,6 +6,7 @@
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import Legend from '../_chart/Legend.svelte';
   import DeltaIndicator from '../DeltaIndicator/DeltaIndicator.svelte';
+  import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.svelte';
   import { arcPath } from '../_chart/paths';
   import { computePieLayout, pieSliceValue } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
@@ -45,6 +46,7 @@
     legendPosition = 'bottom',
     legendMaxItems,
     onlegendmore,
+    animateLegendValues = false,
     percentDecimals = 0,
     onchartready,
     highlightedIndex = null,
@@ -123,6 +125,15 @@
       (v: number): string =>
         total === 0 ? '0%' : ((v / total) * 100).toFixed(percentDecimals) + '%'
   );
+  // Builds the exact text the static legend branch below prints -- value,
+  // then a non-breaking space, then the percentage -- as one string, so
+  // the animateLegendValues branch feeds AnimatedNumber literally what a
+  // reader already sees today rather than a re-derived approximation of it.
+  let legendValueText = $derived.by(
+    () =>
+      (v: number): string =>
+        `${format(v)}\u00A0${pctFormat(v)}`
+  );
   let isEmpty = $derived(data.length === 0 || total === 0);
 
   // When semiCircle is true the effective aspect ratio is driven by:
@@ -590,7 +601,11 @@
               <span class="pie-legend-swatch" style="background: {d.color ?? getColor(i)}"></span>
               <span class="pie-legend-label">{d.label}</span>
               <span class="pie-legend-value">
-                {format(pieSliceValue(d.value))}&nbsp;{pctFormat(pieSliceValue(d.value))}
+                {#if animateLegendValues}
+                  <AnimatedNumber value={legendValueText(pieSliceValue(d.value))} />
+                {:else}
+                  {format(pieSliceValue(d.value))}&nbsp;{pctFormat(pieSliceValue(d.value))}
+                {/if}
               </span>
             </li>
           {/each}

package/dist/PieChart/properties.d.ts

@@ -66,6 +66,19 @@ export type OptionalPieChartProperties = {
      * the control toggles the hidden rows in place.
      */
     onlegendmore?: () => void;
+    /**
+     * Routes `.pie-legend-value` (the `legendShowValues` list) through
+     * `AnimatedNumber` so a changed slice value rolls instead of jumping. Off
+     * by default because it is new: with it left unset, the legend renders the
+     * same static text node it always has. The exact string the static branch
+     * already prints -- `valueFormat` when supplied, else the built-in
+     * default, plus the percentage -- is passed straight through, so a
+     * consumer's own formatter keeps deciding what the digits say. The on-arc
+     * `<text>` labels can't host per-digit spans and are unaffected either
+     * way.
+     * @default false
+     */
+    animateLegendValues?: boolean;
     percentDecimals?: number;
     /**
      * Called once on mount with the imperative highlight API. Pass the returned

package/dist/Progress/Progress.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import type { ProgressProperties } from './properties';
+  import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.svelte';
 
   let {
     value,
     max = 100,
     showLabel = false,
+    animateValue = false,
     ariaLabel,
     testId,
     classes
@@ -58,7 +60,25 @@
     ></div>
   </div>
   {#if showLabel && !isIndeterminate}
-    <div class="label">{labelText}</div>
+    <div class="label">
+      {#if animateValue}
+        <!-- The rounded percentage is already the display value labelText
+             computes, so it is passed as a plain number rather than through
+             `format`: `AnimatedNumber`'s Intl percent style expects a 0-1
+             fraction and would re-derive a different number from this
+             already-0-100 one. The % is a literal beside it instead, exactly
+             mirroring what labelText already spells out below. -->
+        <!-- The unit goes INSIDE AnimatedNumber, not beside it. The odometer
+             carries role="img" with its own aria-label, so a unit left outside is
+             invisible to anyone navigating by graphic -- the rotor reads "75" with
+             no sign of what it measures. Passing the formatted string keeps the
+             unit in the accessible name; only the digits move, since the string
+             path rolls the characters that changed and leaves the rest. -->
+        <AnimatedNumber value={`${Math.round(percentage)}%`} />
+      {:else}
+        {labelText}
+      {/if}
+    </div>
   {/if}
 </div>
 

package/dist/Progress/properties.d.ts

@@ -12,6 +12,18 @@ export type OptionalProgressProperties = {
      */
     max?: number;
     showLabel?: boolean;
+    /**
+     * Routes the completion percentage through `AnimatedNumber` instead of
+     * static text, so a consumer that already renders `showLabel` gets the
+     * label visibly counting to its new value for free. Kept opt-in rather
+     * than folded into `showLabel` itself, since `AnimatedNumber` is a new
+     * dependency this component didn't previously have and existing markup
+     * must stay untouched by default. An indeterminate bar has no percentage
+     * to animate towards, so this is silently inert there rather than a state
+     * that would need its own documentation.
+     * @default false
+     */
+    animateValue?: boolean;
     /**
      * Accessible label for the progress element (`role="progressbar"`). Falls
      * back to the computed percentage text (e.g. `"75%"`) when determinate, or

package/dist/ProportionBar/ProportionBar.svelte

@@ -18,6 +18,7 @@
    *
    * @see docs/ProportionBar.md
    */
+  import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.svelte';
   import type { ProportionBarProperties, ProportionBarSegment } from './properties';
 
   const DEFAULT_PALETTE = ['#8F49DE', '#FFC533', '#62D5C0', '#FF74CD', '#D1E7FF'];
@@ -27,6 +28,7 @@
     showLegend = true,
     valueFormat,
     trackHeight,
+    animateValue = false,
     testId,
     classes
   }: ProportionBarProperties = $props();
@@ -152,7 +154,11 @@
           ></span>
           <span class="proportion-bar-legend-label">{computedSegment.label}</span>
           <span class="proportion-bar-legend-value">
-            {formatValue(computedSegment.value, computedSegment.percent)}
+            {#if animateValue}
+              <AnimatedNumber value={formatValue(computedSegment.value, computedSegment.percent)} />
+            {:else}
+              {formatValue(computedSegment.value, computedSegment.percent)}
+            {/if}
           </span>
         </li>
       {/each}

package/dist/ProportionBar/ProportionBar.svelte.d.ts

@@ -1,22 +1,3 @@
-/**
-   * ProportionBar — a horizontal stacked bar that visualises how a total is
-   * distributed across labelled segments. Renders proportional coloured bands in
-   * an SVG track with an optional legend. Each band's width is derived from its
-   * `value` relative to the sum of all segments; non-finite or negative values
-   * are treated as zero so the rendered widths always stay within 0–100%.
-   *
-   * @example
-   * ```svelte
-   * <ProportionBar
-   *   segments={[
-   *     { label: 'UPI', value: 480 },
-   *     { label: 'Cards', value: 220 }
-   *   ]}
-   * />
-   * ```
-   *
-   * @see docs/ProportionBar.md
-   */
 import type { ProportionBarProperties } from './properties';
 declare const ProportionBar: import("svelte").Component<ProportionBarProperties, {}, "">;
 type ProportionBar = ReturnType<typeof ProportionBar>;

package/dist/ProportionBar/properties.d.ts

@@ -27,6 +27,16 @@ export type OptionalProportionBarProperties = {
      * `--proportion-bar-track-height` CSS variable.
      */
     trackHeight?: string;
+    /**
+     * Routes the legend value column through `AnimatedNumber` so a changed
+     * value rolls instead of jumping. Off by default because it is new: with it
+     * left unset, the legend renders the same static text node it always has.
+     * The formatted string from `valueFormat` (or the built-in default) is
+     * passed straight through, never the raw `value` number, so a consumer's
+     * own formatter keeps deciding what the digits say.
+     * @default false
+     */
+    animateValue?: boolean;
     /** Test selector applied as the `data-pw` attribute on the root element. */
     testId?: string;
     /** Extra CSS class names appended to the root element. */

package/dist/Select/Select.svelte

@@ -451,10 +451,18 @@
 
   async function moveHighlight(delta: number): Promise<void> {
     const next = highlightedIndex + delta;
-    if (next < 0 || next >= optionRows.length) {
+    const inBounds = next >= 0 && next < optionRows.length;
+    // Off either end, wrap to the opposite edge instead of stopping -- landing
+    // on the nearest selectable row there the same way moveHighlightToEdge
+    // does for Home/End, rather than the raw first/last row which may be
+    // disabled. Wrapping only makes sense once the panel is open and has rows
+    // to land on; ArrowUp (unlike ArrowDown) reaches here even while closed,
+    // and closed this must stay the plain out-of-bounds no-op it always was.
+    const target = inBounds ? next : open ? nearestSelectableEdge(next < 0 ? 'last' : 'first') : -1;
+    if (target < 0) {
       return;
     }
-    highlightedIndex = next;
+    highlightedIndex = target;
     await tick();
     // Query the dropdown node itself, not containerEl, so highlight-scrolling
     // keeps working once the panel is portaled out to <body>.
@@ -476,17 +484,24 @@
     return event.ctrlKey || event.metaKey || event.altKey || event.shiftKey;
   }
 
+  // The nearest selectable row from an edge, or -1 when nothing in that
+  // direction is selectable (including an empty list). Shared by Home/End
+  // (moveHighlightToEdge) and arrow-key wraparound (moveHighlight), which both
+  // need to land on a real option rather than a disabled row sitting at the
+  // very edge of the list.
+  function nearestSelectableEdge(edge: 'first' | 'last'): number {
+    return edge === 'first'
+      ? optionRows.findIndex(isRowSelectable)
+      : optionRows.findLastIndex(isRowSelectable);
+  }
+
   /**
    * Home/End: jump the highlight to the first/last selectable row, skipping
-   * disabled options the same way `moveHighlight` skips nothing -- it just
-   * targets a different index and reuses the same scroll-into-view step. A
+   * disabled options the same way arrow-key wraparound does at the ends. A
    * no-op when no row in that direction is selectable, including an empty list.
    */
   async function moveHighlightToEdge(edge: 'first' | 'last'): Promise<void> {
-    const target =
-      edge === 'first'
-        ? optionRows.findIndex(isRowSelectable)
-        : optionRows.findLastIndex(isRowSelectable);
+    const target = nearestSelectableEdge(edge);
     if (target < 0) {
       return;
     }

package/dist/SplitButton/SplitButton.svelte

@@ -114,7 +114,10 @@
   .split-button-trigger {
     --menu-container-position: static;
     --menu-container-display: flex;
-    --menu-trigger-focus-outline: none;
+    /* Used to force --menu-trigger-focus-outline to `none` with nothing
+       standing in for it (WCAG 2.4.7) -- removed so the trigger falls
+       through to Menu's own :focus-visible default instead of suppressing
+       it. See Menu.svelte's .menu-trigger:focus-visible for the fix. */
     --menu-dropdown-left: 0;
     --menu-min-width: 100%;
     border-left: var(--split-button-trigger-separator, 1px solid rgba(255, 255, 255, 0.3));

package/dist/SplitInput/SplitInput.svelte

@@ -367,7 +367,7 @@
     align-items: center;
     height: var(--field-group-input-height, 36px);
     font-size: var(--field-group-separator-font-size, 16px);
-    color: var(--field-group-separator-color, #9ca3af);
+    color: var(--field-group-separator-color, #6b7280);
     flex-shrink: 0;
   }
 </style>

package/dist/StatCard/StatCard.svelte

@@ -3,6 +3,8 @@
   import DeltaIndicator from '../DeltaIndicator/DeltaIndicator.svelte';
   import Tooltip from '../Tooltip/Tooltip.svelte';
   import CheckListItem from '../CheckListItem/CheckListItem.svelte';
+  import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.svelte';
+  import { isAnimatableMetric } from './metric';
 
   let {
     title,
@@ -12,6 +14,10 @@
     subtitle,
     footer,
     valueSnippet,
+    animateValue = false,
+    animatePrimary = false,
+    primary = 'auto',
+    animateOnMount = false,
     rows,
     rowsDirection = 'column',
     tooltip,
@@ -26,6 +32,99 @@
 
   const isInteractive = $derived(typeof onclick === 'function');
 
+  /**
+   * Which ONE value on this card rolls.
+   *
+   * A card has several numeric slots and they are not equally important. The
+   * business variant renders `subtitle` at 44px as the headline and its rows at
+   * 18-20px underneath, so animating "the values" animated the small ones and
+   * left the number the card is actually about sitting still -- backwards, and
+   * visible on every dashboard.
+   *
+   * `primary` resolves three ways so a caller can be as specific as it needs:
+   *   'auto'      measure the rendered slots and pick the largest metric
+   *   'subtitle'  | 'value' | <row index>   name it outright
+   * 'auto' is the default because it follows the card's own type scale rather
+   * than a second copy of it kept in a mapper, so a card that restyles keeps
+   * animating the right thing. A caller that disagrees names the slot instead.
+   *
+   * Measured after mount rather than guessed from props: the sizes come from
+   * tokens the consuming app can override, so only the resolved style knows.
+   */
+  let autoKey = $state<string | null>(null);
+
+  /**
+   * Re-measured whenever the card's values change, not once at mount.
+   *
+   * A card whose figures arrive from a fetch renders empty first: the balance
+   * card mounted with no balance, so the measurement found no metric, and
+   * because an attachment only re-runs when its argument changes it never looked
+   * again -- the number arrived and sat there unanimated. Keying the attachment
+   * on the values themselves fixes that, and also re-picks the primary if the
+   * card's content later changes shape.
+   */
+  const valueSignature = $derived(
+    JSON.stringify([
+      value,
+      subtitle,
+      (rows ?? []).map((row) => [
+        row.value,
+        row.comparisonValue,
+        (row.breakdown ?? []).map((item) => item.value)
+      ])
+    ])
+  );
+
+  const measurePrimary =
+    (_signature: string) =>
+    (node: HTMLElement): void => {
+      if (!animatePrimary || primary !== 'auto') {
+        return;
+      }
+      let best: string | null = null;
+      let bestSize = -1;
+      for (const slot of node.querySelectorAll('[data-sc-slot]')) {
+        if (!(slot instanceof HTMLElement)) {
+          continue;
+        }
+        if (!isAnimatableMetric(slot.textContent ?? '')) {
+          continue;
+        }
+        const size = Number.parseFloat(getComputedStyle(slot).fontSize);
+        if (Number.isFinite(size) && size > bestSize) {
+          bestSize = size;
+          best = slot.dataset.scSlot ?? null;
+        }
+      }
+      autoKey = best;
+    };
+
+  /**
+   * A numeric `primary` names a row by index, and rows carry `data-sc-slot`
+   * values of `row-<index>`. Passing the number through `String` alone yielded
+   * `'0'`, which matches no slot at all, so `primary={0}` resolved to nothing
+   * and the card animated none of its values. The custom element declares the
+   * prop as a String, so `primary="0"` arrives the same way and needs the same
+   * normalisation -- hence matching the digits rather than only `typeof`.
+   */
+  const slotKeyFor = (value: 'auto' | 'subtitle' | 'value' | number | string): string =>
+    typeof value === 'number' || /^\d+$/.test(String(value)) ? `row-${value}` : String(value);
+
+  const primaryKey = $derived(primary === 'auto' ? autoKey : slotKeyFor(primary));
+
+  /**
+   * `animateValue` keeps its old meaning -- every value on the card -- but is
+   * now gated on the value being a metric at all, so an identifier that merely
+   * contains digits is never rolled. See metric.ts: this is what stopped a store
+   * domain and a GA4 account id spinning on the anomaly cards.
+   */
+  const animates = (key: string, text: unknown): boolean => {
+    if (typeof text !== 'string' || !isAnimatableMetric(text)) {
+      return false;
+    }
+    return animatePrimary ? key === primaryKey : animateValue;
+  };
+
   /**
    * When `deltaPositive` is explicitly provided use it; otherwise infer from
    * the leading character of `delta` — '+' → positive, '-' → negative,
@@ -82,6 +181,7 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
+  {@attach measurePrimary(valueSignature)}
   class="statcard {classes ?? ''}"
   class:statcard-interactive={isInteractive}
   data-pw={typeof testId === 'string' ? testId : null}
@@ -187,10 +287,15 @@
               class="statcard-value"
               class:statcard-value-success={row.valueVariant === 'success'}
               class:statcard-value-warning={row.valueVariant === 'warning'}
+              data-sc-slot={`row-${rowIndex}`}
               data-pw={typeof testId === 'string' ? `${testId}-value-${rowIndex}` : null}
               testID={typeof testId === 'string' ? `${testId}-value-${rowIndex}` : null}
             >
-              {row.value}
+              {#if animates(`row-${rowIndex}`, row.value)}
+                <AnimatedNumber value={row.value} {animateOnMount} />
+              {:else}
+                {row.value}
+              {/if}
             </div>
             {#if typeof row.comparisonValue === 'string' && row.comparisonValue.length > 0}
               <div
@@ -198,7 +303,10 @@
                 data-pw={typeof testId === 'string' ? `${testId}-comparison-${rowIndex}` : null}
                 testID={typeof testId === 'string' ? `${testId}-comparison-${rowIndex}` : null}
               >
-                / {row.comparisonValue}
+                / {#if animates(`row-${rowIndex}-comparison`, row.comparisonValue)}<AnimatedNumber
+                    {animateOnMount}
+                    value={row.comparisonValue}
+                  />{:else}{row.comparisonValue}{/if}
               </div>
             {/if}
             {#if typeof row.change === 'number'}
@@ -255,7 +363,13 @@
                 >
                   <div class="statcard-breakdown-label">{breakdownItem.label}</div>
                   <div class="statcard-breakdown-value-line">
-                    <div class="statcard-breakdown-value">{breakdownItem.value}</div>
+                    <div class="statcard-breakdown-value">
+                      {#if animates(`breakdown-${rowIndex}-${breakdownIndex}`, breakdownItem.value)}
+                        <AnimatedNumber value={breakdownItem.value} {animateOnMount} />
+                      {:else}
+                        {breakdownItem.value}
+                      {/if}
+                    </div>
                     {#if typeof breakdownItem.change === 'number'}
                       <DeltaIndicator
                         value={breakdownItem.change}
@@ -283,10 +397,15 @@
       {:else if typeof value === 'string' && value.length > 0}
         <div
           class="statcard-value"
+          data-sc-slot="value"
           data-pw={typeof testId === 'string' ? `${testId}-value` : null}
           testID={typeof testId === 'string' ? `${testId}-value` : null}
         >
-          {value}
+          {#if animates('value', value)}
+            <AnimatedNumber {value} {animateOnMount} />
+          {:else}
+            {value}
+          {/if}
         </div>
       {/if}
 
@@ -305,10 +424,15 @@
   {#if typeof subtitle === 'string' && subtitle.length > 0}
     <div
       class="statcard-subtitle"
+      data-sc-slot="subtitle"
       data-pw={typeof testId === 'string' ? `${testId}-subtitle` : null}
       testID={typeof testId === 'string' ? `${testId}-subtitle` : null}
     >
-      {subtitle}
+      {#if animates('subtitle', subtitle)}
+        <AnimatedNumber value={subtitle} {animateOnMount} />
+      {:else}
+        {subtitle}
+      {/if}
     </div>
   {/if}
 

package/dist/StatCard/metric.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether a displayed value is a METRIC worth rolling, or an identifier that
+ * merely contains digits.
+ *
+ * The distinction is not cosmetic. Adopting the odometer across a dashboard
+ * mapper animated `demo-store.myshopify.com` and `Shinchan Store GA4 (987654321)`
+ * on the anomaly surface: a store domain and a GA4 account id, rolled digit by
+ * digit as though they were measurements. Nothing was broken -- they went
+ * through the same `statcard-value` slot as `₹60k` -- which is exactly why a
+ * blanket "animate this card's values" is the wrong instruction.
+ *
+ * The rule is digits plus decoration. A metric is allowed to carry a currency
+ * symbol, a sign, a percent, group and decimal separators, and SHORT unit words
+ * -- `₹60k`, `90%`, `₹1.23Cr`, `12m 15s`, `-8%`. Anything else with a long
+ * alphabetic run, a dotted hostname or a parenthesised id is an identifier and
+ * is left alone.
+ *
+ * Deliberately conservative in one direction only: a metric wrongly refused
+ * renders exactly as it does today, while an identifier wrongly accepted is a
+ * number spinning in a domain name.
+ */
+export declare const isAnimatableMetric: (text: string) => boolean;