@juspay/svelte-ui-components 2.98.0 → 2.98.2

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/dist/Table/BuiltinCell.svelte

@@ -165,7 +165,10 @@
       <span
         class="builtin-thumb builtin-thumb-placeholder"
         data-pw={column.testId ? `${column.testId}-thumb-placeholder` : null}
-      ></span>
+        >{typeof data.text1 === 'string' && data.text1
+          ? data.text1.charAt(0).toUpperCase()
+          : ''}</span
+      >
     {/if}
     <div class="builtin-two-line {alignmentClass}">
       <span class="builtin-primary-text">{typeof data.text1 === 'string' ? data.text1 : '-'}</span>
@@ -600,7 +603,15 @@
   }
 
   .builtin-thumb-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: var(--table-cell-thumb-placeholder-background, #f3f4f6);
+    color: var(--table-cell-thumb-placeholder-color, #6b7280);
+    font-size: var(--table-cell-thumb-placeholder-font-size, 14px);
+    font-weight: 600;
+    line-height: 1;
+    text-transform: uppercase;
   }
 
   .builtin-tag-array {

package/dist/Table/Table.svelte

@@ -919,6 +919,7 @@
                 }))}
                 value={[String(effectivePageSize)]}
                 disabled={pagination.isLoading ?? false}
+                usePortal
                 testId={pagination.testId && `${pagination.testId}-page-size`}
                 onchange={(selectedSizes) => {
                   if (selectedSizes.length > 0) {

package/package.json

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