@juspay/svelte-ui-components 4.29.1 → 4.31.0

package/dist/StatCard/metric.js

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ */
+/** Unit fragments a metric may carry. Matched case-insensitively, whole-run. */
+const UNITS = new Set([
+    'k',
+    'l',
+    'm',
+    'b',
+    't',
+    'cr',
+    'lac',
+    'lakh',
+    'mn',
+    'bn',
+    's',
+    'ms',
+    'h',
+    'hr',
+    'hrs',
+    'd',
+    'day',
+    'days',
+    'min',
+    'mins',
+    'sec',
+    'secs',
+    'x',
+    'pt',
+    'pts',
+    'px'
+]);
+/** Decoration that carries no meaning for this decision. */
+const DECORATION = /[\p{Nd}\s,.:+%()[\]]|\p{Sc}|\p{Pd}|\p{Sm}/gu;
+export const isAnimatableMetric = (text) => {
+    if (typeof text !== 'string') {
+        return false;
+    }
+    const value = text.trim();
+    if (value.length === 0 || !/\p{Nd}/u.test(value)) {
+        return false;
+    }
+    // A dotted hostname or an email is an identifier however many digits it has.
+    if (/\.[a-z]{2,}(?:\/|$)|@|\/\//i.test(value)) {
+        return false;
+    }
+    // A parenthesised run of digits is an id in a label, not a measurement:
+    // "Shinchan Store GA4 (987654321)".
+    if (/\([^)]*\p{Nd}[^)]*\)/u.test(value)) {
+        return false;
+    }
+    // What remains once digits and decoration are removed must be unit words only.
+    const remainder = value.replace(DECORATION, ' ');
+    const words = remainder.split(/\s+/).filter((word) => word.length > 0);
+    return words.every((word) => UNITS.has(word.toLowerCase()));
+};

package/dist/StatCard/properties.d.ts

@@ -111,6 +111,50 @@ 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;
+    /**
+     * Rolls the animated values up from zero as the card appears, rather than
+     * painting them outright. Requires an animation mode to be active -- either
+     * `animateValue`, or `animatePrimary` having resolved a slot to animate.
+     * Ignored when neither applies, because there is then nothing to roll.
+     *
+     * Worth turning on for a card whose figures arrive once with a fetch and then
+     * do not change, which is the ordinary dashboard case -- otherwise the
+     * odometer has nothing to react to for the life of the page.
+     * @default false
+     */
+    animateOnMount?: boolean;
+    /**
+     * Animate exactly ONE value on the card instead of all of them.
+     *
+     * Prefer this to `animateValue` on a dashboard. A card carries several numeric
+     * slots at different sizes, and animating all of them puts motion on the small
+     * supporting figures as loudly as on the headline -- which reads as noise, and
+     * on the business variant actually animated the 18px rows while the 44px
+     * subtitle above them sat still.
+     * @default false
+     */
+    animatePrimary?: boolean;
+    /**
+     * Which slot `animatePrimary` animates.
+     *
+     * `'auto'` measures the rendered slots and picks the largest one holding a
+     * metric, so the card follows its own type scale. Name a slot to override:
+     * `'subtitle'`, `'value'`, or a row index. Ignored unless `animatePrimary`.
+     * @default 'auto'
+     */
+    primary?: 'auto' | 'subtitle' | 'value' | number;
     /**
      * 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';

package/dist/styles/theme-dark.css

@@ -135,6 +135,8 @@
   --chat-composer-placeholder-color: #9ca3af;
   --chat-composer-action-color: #9ca3af;
   --chat-composer-action-hover-background-color: #252535;
+  --chat-composer-focus-border-color: #818cf8;
+  --chat-composer-focus-shadow: 0 0 0 2px rgba(129, 140, 248, 0.3);
   --chat-composer-send-background-color: #e4e4e7;
   --chat-composer-send-color: #18181b;
   --chat-composer-send-hover-background-color: #d4d4d8;
@@ -167,6 +169,7 @@
   --chat-bubble-color: #18181b;
   --chat-bubble-hover-background-color: #d4d4d8;
   --chat-bubble-panel-background: #161621;
+  --chat-bubble-panel-focus-outline: 2px solid #818cf8;
 
   /* HITL */
   --hitl-background: #1e1e2e;
@@ -460,6 +463,7 @@
 
   /* Book */
   --book-dot-active-color: #818cf8;
+  --book-focus-outline: 2px solid #818cf8;
   --book-nav-color: #9ca3af;
 
   /* BrandLoader */
@@ -523,6 +527,7 @@
   --command-menu-background: #1e1e2e;
   --command-menu-input-caret-color: #818cf8;
   --command-menu-input-color: #d1d5db;
+  --command-menu-input-focus-outline: 2px solid #818cf8;
   --command-menu-item-active-background: #252535;
   --command-menu-item-active-color: #d1d5db;
   --command-menu-item-color: #9ca3af;
@@ -545,6 +550,8 @@
   --drp-clear-hover-background: #252535;
   --drp-date-input-background: #1e1e2e;
   --drp-date-input-color: #d1d5db;
+  --drp-date-input-focus-border: #818cf8;
+  --drp-date-input-focus-shadow: 0 0 0 2px rgba(129, 140, 248, 0.3);
   --drp-date-input-invalid-border: #f87171;
   --drp-datetime-arrow-color: #9ca3af;
   --drp-field-error-color: #f87171;
@@ -553,6 +560,8 @@
   --drp-preset-hover-background: #252535;
   --drp-time-field-color: #d1d5db;
   --drp-time-input-background: #1e1e2e;
+  --drp-time-input-focus-border: #818cf8;
+  --drp-time-input-focus-shadow: 0 0 0 2px rgba(129, 140, 248, 0.3);
   --drp-time-input-icon-color: #9ca3af;
   --drp-time-input-invalid-border: #f87171;
   --drp-time-toggle-active-color: #60a5fa;
@@ -568,6 +577,9 @@
   --file-input-error-color: #f87171;
   --file-input-info-color: #9ca3af;
 
+  /* Gallery */
+  --gallery-lightbox-focus-outline: 2px solid #818cf8;
+
   /* GridItem */
   --grid-item-background-color: #252535;
 
@@ -587,22 +599,25 @@
   --keyboard-input-key-background: #1e1e2e;
   --keyboard-input-key-color: #d1d5db;
   --keyboard-input-separator-color: #9ca3af;
+  --field-group-separator-color: #9ca3af;
 
   /* Label */
   --label-required-color: #f87171;
 
   /* ListItem */
+  --list-item-focus-outline: 2px solid #818cf8;
   --list-item-loader-background: #1a1a26;
 
   /* MarkdownText */
   --markdown-text-focus-outline-color: #818cf8;
+  --markdown-text-color: #d1d5db;
   --markdown-text-link-color: #a78bfa;
 
   /* MediaUpload */
   --media-upload-add-background-color: #1e1e2e;
   /* The tile's own text, on that #1e1e2e tile. The light defaults (#6b7280 /
      #9aa0a8) are tuned for a white tile and read at 3.4:1 and 3.8:1 here. */
-  --media-upload-add-color: #9ca3af;
+  --media-upload-add-color: #cbd5e1;
   --media-upload-add-hint-color: #9ca3af;
   --media-upload-add-dragging-background-color: #262b4a;
   --media-upload-add-dragging-color: #818cf8;
@@ -622,9 +637,11 @@
   --menu-item-danger-hover-background-color: #331519;
   --menu-item-focus-background-color: #252535;
   --menu-item-hover-background-color: #252535;
+  --menu-trigger-focus-outline: 2px solid #818cf8;
 
   /* Modal */
   --modal-content-background-color: #1e1e2e;
+  --modal-content-focus-outline: 2px solid #818cf8;
   --modal-footer-background-color: #1a1a26;
   --modal-footer-primary-button-color: #9ca3af;
   --modal-footer-secondary-button-color: #9ca3af;
@@ -737,6 +754,13 @@
   --table-header-border-bgcolor: #1e1e2e;
   --table-header-font-color: #9ca3af;
   --table-inline-search-clear-color: #9ca3af;
+  /* #9ca3af measured 4.41:1 here -- just under 4.5:1 -- because this input sits on
+     a row background that composites lighter than the table's own #1a1a26 (row
+     hover/alt tinting stacks on top). #b8bcc4 (already used for
+     --loader-sub-text-color, the same "muted text on a dark surface" role) clears
+     it with margin, verified at 5.88:1 by scripts/check-contrast.mjs against the
+     actual composited background rather than the nominal one. */
+  --table-ops-note-placeholder-color: #b8bcc4;
   --table-link-copy-color: #9ca3af;
   --table-sort-active-color: #60a5fa;
   --table-sort-hover-color: #9ca3af;
@@ -745,12 +769,12 @@
   --table-trend-up-color: #4ade80;
 
   /* Tabs */
-  --tabs-active-color: #818cf8;
+  --tabs-active-color: #a5b4fc;
   --tabs-bar-background: #1e1e2e;
   --tabs-hover-background: #252535;
   --tabs-hover-color: #d1d5db;
   --tabs-indicator-color: #818cf8;
-  --tabs-item-color: #9ca3af;
+  --tabs-item-color: #cbd5e1;
   --tabs-item-status-default-color: #818cf8;
   --tabs-item-status-error-color: #f87171;
 

package/dist-codemod/codemod/migration-assets/legacy-display.css

@@ -106,7 +106,8 @@ sui-tooltip { --sui-tooltip-display: inline; }
 sui-typewriter-text { --sui-typewriter-text-display: inline; }
 sui-voice-orb { --sui-voice-orb-display: inline; }
 
-/* components whose new default is `inline-block` (11) */
+/* components whose new default is `inline-block` (12) */
+sui-animated-number { --sui-animated-number-display: inline; }
 sui-avatar { --sui-avatar-display: inline; }
 sui-chat-suggestions { --sui-chat-suggestions-display: inline; }
 sui-checkbox { --sui-checkbox-display: inline; }

package/dist-codemod/codemod/migration-assets/legacy-palette.css

@@ -12,7 +12,7 @@
  * one property at a time, not to be a permanent fixture in a consumer
  * build.
  *
- * 51 properties pinned below. 9 more could not be -- see the note at the end.
+ * 54 properties pinned below. 9 more could not be -- see the note at the end.
  *
  * Generated by scripts/migrate/legacy-palette.ts -- do not hand edit.
  */
@@ -29,16 +29,19 @@
 :root { --drp-panel-background: inherit; }   /* was the 4.27.x default */
 :root { --empty-state-description-opacity: 0.6; }   /* was the 4.27.x default */
 :root { --field-group-label-color: #9ca3af; }   /* was the 4.27.x default */
+:root { --field-group-separator-color: #9ca3af; }   /* was the 4.27.x default */
 :root { --file-dropzone-trigger-caption-color: #64748b; }   /* was the 4.27.x default */
 :root { --hitl-approved-color: #16a34a; }   /* was the 4.27.x default */
 :root { --hitl-badge-color: #858585; }   /* was the 4.27.x default */
 :root { --hitl-description-color: #858585; }   /* was the 4.27.x default */
 :root { --hitl-param-label-color: #858585; }   /* was the 4.27.x default */
 :root { --input-char-count-color: #98a2b3; }   /* was the 4.27.x default */
+:root { --keyboard-input-separator-color: #888888; }   /* was the 4.27.x default */
 :root { --loader-text-color: white; }   /* was the 4.27.x default */
 :root { --media-upload-add-color: #6b7280; }   /* was the 4.27.x default */
 :root { --media-upload-add-hint-color: #9aa0a8; }   /* was the 4.27.x default */
 :root { --media-upload-counter-color: #8a8f98; }   /* was the 4.27.x default */
+:root { --menu-trigger-focus-outline: none; }   /* was the 4.27.x default */
 :root { --pagination-button-color: #3a4550; }   /* was the 4.27.x default */
 :root { --pagination-load-more-color: #3a4550; }   /* was the 4.27.x default */
 :root { --pill-tone-muted-color: #6b7280; }   /* was the 4.27.x default */

package/dist-codemod/codemod/migration-assets/wc-display.json

@@ -4,6 +4,11 @@
     "property": "--sui-accordion-display",
     "default": "block"
   },
+  {
+    "tag": "sui-animated-number",
+    "property": "--sui-animated-number-display",
+    "default": "inline-block"
+  },
   {
     "tag": "sui-area-chart",
     "property": "--sui-area-chart-display",