@juspay/svelte-ui-components 2.98.1 → 2.99.0

package/dist/Modal/Modal.svelte

@@ -244,7 +244,12 @@
   }
 
   .overlay-active {
-    background-color: var(--background-color, #00000066);
+    /* Prefer the modal-specific token; fall back to the legacy generic
+       --background-color (kept for backward compatibility), then the default.
+       The generic name collides with app-level --background-color tokens, which
+       silently override the overlay; --modal-overlay-background-color lets a
+       consumer theme the backdrop without that collision. */
+    background-color: var(--modal-overlay-background-color, var(--background-color, #00000066));
     backdrop-filter: var(--modal-overlay-backdrop-filter, none);
     -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter, none);
     pointer-events: auto;

package/dist/PieChart/PieChart.svelte

@@ -227,7 +227,13 @@
     return visible;
   });
 
-  let centerBoxSize = $derived(innerR > 0 ? Math.max(0, innerR * 1.3) : 0);
+  // The centre snippet (e.g. a currency total like "₹31.24k") is clipped by the
+  // foreignObject bounds, so the box must be wide enough for it. The inner hole
+  // has diameter 2*innerR; a square of side ~1.9*innerR keeps every edge inside
+  // the hole at the text's mid-line while giving the label the room a plain
+  // "innerR*1.3" (≈2/3 of the hole) did not — the old value cut the ₹/k off the
+  // sides and forced the caption onto two lines.
+  let centerBoxSize = $derived(innerR > 0 ? Math.max(0, innerR * 1.9) : 0);
 
   // The foreignObject for the center snippet is positioned relative to the <g>
   // origin (which is at cx, cy in SVG space). The box is always centred on

package/dist/StatCard/StatCard.svelte

@@ -201,13 +201,15 @@
                     : null}
                 >
                   <div class="statcard-breakdown-label">{breakdownItem.label}</div>
-                  <div class="statcard-breakdown-value">{breakdownItem.value}</div>
-                  {#if typeof breakdownItem.change === 'number'}
-                    <DeltaIndicator
-                      value={breakdownItem.change}
-                      invertColors={breakdownItem.invertChangeColors ?? false}
-                    />
-                  {/if}
+                  <div class="statcard-breakdown-value-line">
+                    <div class="statcard-breakdown-value">{breakdownItem.value}</div>
+                    {#if typeof breakdownItem.change === 'number'}
+                      <DeltaIndicator
+                        value={breakdownItem.change}
+                        invertColors={breakdownItem.invertChangeColors ?? false}
+                      />
+                    {/if}
+                  </div>
                 </div>
               {/each}
             </div>
@@ -488,6 +490,16 @@
     gap: var(--statcard-breakdown-item-gap, 2px);
   }
 
+  /* The metric value and its change indicator share one line (label sits above
+     as the caption). Previously the delta was a third stacked child, so it
+     rendered on its own line beneath the number. */
+  .statcard-breakdown-value-line {
+    display: flex;
+    align-items: baseline;
+    gap: var(--statcard-breakdown-value-gap, 6px);
+    flex-wrap: wrap;
+  }
+
   .statcard-breakdown-label {
     font-size: var(--statcard-breakdown-label-font-size, 11px);
     font-weight: var(--statcard-breakdown-label-font-weight, 400);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.98.1",
+  "version": "2.99.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",