@juspay/svelte-ui-components 4.29.0 → 4.30.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,7 @@
   import DeltaIndicator from '../DeltaIndicator/DeltaIndicator.svelte';
   import Tooltip from '../Tooltip/Tooltip.svelte';
   import CheckListItem from '../CheckListItem/CheckListItem.svelte';
+  import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.svelte';
 
   let {
     title,
@@ -12,6 +13,7 @@
     subtitle,
     footer,
     valueSnippet,
+    animateValue = false,
     rows,
     rowsDirection = 'column',
     tooltip,
@@ -190,7 +192,11 @@
               data-pw={typeof testId === 'string' ? `${testId}-value-${rowIndex}` : null}
               testID={typeof testId === 'string' ? `${testId}-value-${rowIndex}` : null}
             >
-              {row.value}
+              {#if animateValue}
+                <AnimatedNumber value={row.value} />
+              {:else}
+                {row.value}
+              {/if}
             </div>
             {#if typeof row.comparisonValue === 'string' && row.comparisonValue.length > 0}
               <div
@@ -198,7 +204,9 @@
                 data-pw={typeof testId === 'string' ? `${testId}-comparison-${rowIndex}` : null}
                 testID={typeof testId === 'string' ? `${testId}-comparison-${rowIndex}` : null}
               >
-                / {row.comparisonValue}
+                / {#if animateValue}<AnimatedNumber
+                    value={row.comparisonValue}
+                  />{:else}{row.comparisonValue}{/if}
               </div>
             {/if}
             {#if typeof row.change === 'number'}
@@ -255,7 +263,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 animateValue}
+                        <AnimatedNumber value={breakdownItem.value} />
+                      {:else}
+                        {breakdownItem.value}
+                      {/if}
+                    </div>
                     {#if typeof breakdownItem.change === 'number'}
                       <DeltaIndicator
                         value={breakdownItem.change}
@@ -286,7 +300,11 @@
           data-pw={typeof testId === 'string' ? `${testId}-value` : null}
           testID={typeof testId === 'string' ? `${testId}-value` : null}
         >
-          {value}
+          {#if animateValue}
+            <AnimatedNumber {value} />
+          {:else}
+            {value}
+          {/if}
         </div>
       {/if}
 

package/dist/StatCard/properties.d.ts

@@ -111,6 +111,18 @@ export type OptionalStatCardProperties = {
     footer?: Snippet;
     /** Replaces the string `value` with a custom snippet for advanced value rendering. */
     valueSnippet?: Snippet;
+    /**
+     * Rolls `value`, each row's `value`/`comparisonValue`, and each breakdown
+     * item's `value` through AnimatedNumber's per-digit odometer instead of
+     * swapping the text outright. Every one of those is already a
+     * consumer-preformatted string, not a raw number -- AnimatedNumber diffs a
+     * string by character position, so `'₹1.23Cr'` -> `'₹1.45Cr'` rolls only the
+     * two digits that changed and leaves `₹`, the decimal point and `Cr` alone,
+     * with nothing here ever surfacing the number underneath. `valueSnippet`
+     * still wins outright when set, exactly as it does today.
+     * @default false
+     */
+    animateValue?: boolean;
     /**
      * Multiple metric rows. When provided, replaces the single value/delta row with
      * a column of rows separated by dividers.

package/dist/Table/BuiltinCell.svelte

@@ -25,6 +25,7 @@
   import Select from '../Select/Select.svelte';
   import Input from '../Input/Input.svelte';
   import Menu from '../Menu/Menu.svelte';
+  import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.svelte';
   import trendUpSvg from '../assets/trend-up.svg?raw';
   import trendDownSvg from '../assets/trend-down.svg?raw';
   import copySvg from '../assets/copy.svg?raw';
@@ -258,7 +259,15 @@
             >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendUpSvg}</span>
-              {compare.trendPercent}%
+              {#if compare.animateTrend}
+                <!-- The string form, not the raw number: it keeps the % inside the
+                     odometer's accessible name, and avoids Intl grouping a raw
+                     trendPercent into "1,234.5" where the plain branch shows
+                     "1234.5". -->
+                <AnimatedNumber value={`${compare.trendPercent}%`} />
+              {:else}
+                {compare.trendPercent}%
+              {/if}
             </span>
           {:else if compare.trendPercent < 0}
             <span
@@ -268,7 +277,15 @@
             >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendDownSvg}</span>
-              {compare.trendPercent}%
+              {#if compare.animateTrend}
+                <!-- The string form, not the raw number: it keeps the % inside the
+                     odometer's accessible name, and avoids Intl grouping a raw
+                     trendPercent into "1,234.5" where the plain branch shows
+                     "1234.5". -->
+                <AnimatedNumber value={`${compare.trendPercent}%`} />
+              {:else}
+                {compare.trendPercent}%
+              {/if}
             </span>
           {:else}
             <span class="builtin-trend builtin-trend-flat">↔ 0%</span>

package/dist/Table/cellData.js

@@ -116,6 +116,9 @@ export const asCompareCellData = (value) => {
     if (typeof record.trendLabel === 'string') {
         compareData.trendLabel = record.trendLabel;
     }
+    if (typeof record.animateTrend === 'boolean') {
+        compareData.animateTrend = record.animateTrend;
+    }
     return compareData;
 };
 export const asLinkCellData = (value) => {

package/dist/Table/properties.d.ts

@@ -89,6 +89,21 @@ export type TableCompareCellData = {
     comparison?: string;
     trendPercent?: number;
     trendLabel?: string;
+    /**
+     * Rolls `trendPercent` through `AnimatedNumber` instead of the plain text
+     * it renders as today, so a comparison row that updates in place (a live
+     * dashboard, a polling total) visibly counts to its new value rather than
+     * jumping. Per-cell rather than a Table-level prop, since a single column
+     * can mix trend rows a consumer wants live with historical ones that don't
+     * need to move. `AnimatedNumber` is handed the complete string
+     * `` `${trendPercent}%` ``, so the unit sits inside its accessible name
+     * rather than beside it, where a reader navigating by graphic would never
+     * reach it. The `%` stays a literal character rather than an
+     * `Intl.NumberFormat` percent style, which would divide the value by 100
+     * and render the wrong figure, and it is a literal column that never rolls.
+     * @default false
+     */
+    animateTrend?: boolean;
 };
 /** Cell shape for `type: 'toggle'` — the handler lives on the column. */
 export type TableToggleCellData = {

package/dist/Tabs/Tabs.svelte

@@ -638,6 +638,22 @@
     transition: var(--tabs-transition, color 0.2s ease, background 0.2s ease);
   }
 
+  /* Roving focus really does move (see focusedKey/focusTabAt above) -- this
+     just replaces the INDICATOR that outline:none above strips, which is what
+     was actually missing (WCAG 2.4.7). :focus-visible only, so a mouse click
+     that activates a tab still shows nothing new, matching the rest of this
+     file's pattern (Sheet's .sheet-panel, Select's .select-clear, ...).
+     currentColor tracks --tabs-item-color / --tabs-active-color, which are
+     already themed per-mode and per-state, so the ring stays visible against
+     --tabs-bar-background in both themes with no extra token needed here. The
+     offset is inset, not the usual outward one: .tabs-bar is a same-axis
+     overflow:auto scroller with 0px padding/gap by default, so an outward ring
+     on an edge tab would be clipped by the scroll container's own edge. */
+  .tabs-item:focus-visible {
+    outline: var(--tabs-item-focus-outline, 2px solid currentColor);
+    outline-offset: var(--tabs-item-focus-outline-offset, -2px);
+  }
+
   .tabs-item :global(.tabs-item-icon) {
     --image-width: var(--tabs-item-icon-size, 16px);
     --image-height: var(--tabs-item-icon-size, 16px);

package/dist/index.d.ts

@@ -86,6 +86,7 @@ export { default as FileDropzoneTrigger } from './FileDropzoneTrigger/FileDropzo
 export { default as Separator } from './Separator/Separator.svelte';
 export { default as Label } from './Label/Label.svelte';
 export { default as AspectRatio } from './AspectRatio/AspectRatio.svelte';
+export { default as AnimatedNumber } from './AnimatedNumber/AnimatedNumber.svelte';
 export { default as RatingGroup } from './RatingGroup/RatingGroup.svelte';
 export { default as Chat } from './Chat/Chat.svelte';
 export { default as ChatHeader } from './ChatHeader/ChatHeader.svelte';
@@ -154,6 +155,7 @@ export type * from './LoadingDots/properties';
 export type * from './Separator/properties';
 export type * from './Label/properties';
 export type * from './AspectRatio/properties';
+export type * from './AnimatedNumber/properties';
 export type * from './RatingGroup/properties';
 export type * from './Menu/properties';
 export type * from './Sheet/properties';

package/dist/index.js

@@ -86,6 +86,7 @@ export { default as FileDropzoneTrigger } from './FileDropzoneTrigger/FileDropzo
 export { default as Separator } from './Separator/Separator.svelte';
 export { default as Label } from './Label/Label.svelte';
 export { default as AspectRatio } from './AspectRatio/AspectRatio.svelte';
+export { default as AnimatedNumber } from './AnimatedNumber/AnimatedNumber.svelte';
 export { default as RatingGroup } from './RatingGroup/RatingGroup.svelte';
 export { default as Chat } from './Chat/Chat.svelte';
 export { default as ChatHeader } from './ChatHeader/ChatHeader.svelte';