@juspay/svelte-ui-components 2.102.0 → 2.103.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -288,6 +288,7 @@
288
288
  }
289
289
 
290
290
  .statcard-header {
291
+ order: var(--statcard-header-order, 0);
291
292
  display: flex;
292
293
  align-items: center;
293
294
  justify-content: space-between;
@@ -362,6 +363,7 @@
362
363
  }
363
364
 
364
365
  .statcard-value-row {
366
+ order: var(--statcard-value-row-order, 0);
365
367
  display: flex;
366
368
  align-items: var(--statcard-value-row-align, baseline);
367
369
  gap: var(--statcard-value-row-gap, 8px);
@@ -391,6 +393,7 @@
391
393
  }
392
394
 
393
395
  .statcard-subtitle {
396
+ order: var(--statcard-subtitle-order, 0);
394
397
  font-size: var(--statcard-subtitle-font-size, 12px);
395
398
  font-weight: var(--statcard-subtitle-font-weight, 400);
396
399
  color: var(--statcard-subtitle-color, #9ca3af);
@@ -399,6 +402,7 @@
399
402
 
400
403
  /* Multi-row layout */
401
404
  .statcard-rows {
405
+ order: var(--statcard-rows-order, 0);
402
406
  display: flex;
403
407
  flex-direction: column;
404
408
  gap: var(--statcard-rows-gap, 0px);
@@ -473,7 +477,7 @@
473
477
  font-weight: var(--statcard-breakdown-heading-font-weight, 600);
474
478
  color: var(--statcard-breakdown-heading-color, #6b7280);
475
479
  letter-spacing: 0.04em;
476
- text-transform: uppercase;
480
+ text-transform: var(--statcard-breakdown-heading-text-transform, uppercase);
477
481
  margin-top: var(--statcard-breakdown-heading-margin-top, 6px);
478
482
  }
479
483
 
@@ -486,7 +490,9 @@
486
490
 
487
491
  .statcard-breakdown-item {
488
492
  display: flex;
489
- flex-direction: column;
493
+ flex-direction: var(--statcard-breakdown-item-flex-direction, column);
494
+ align-items: var(--statcard-breakdown-item-align-items, stretch);
495
+ flex-wrap: var(--statcard-breakdown-item-flex-wrap, nowrap);
490
496
  gap: var(--statcard-breakdown-item-gap, 2px);
491
497
  }
492
498
 
@@ -494,6 +500,7 @@
494
500
  as the caption). Previously the delta was a third stacked child, so it
495
501
  rendered on its own line beneath the number. */
496
502
  .statcard-breakdown-value-line {
503
+ order: var(--statcard-breakdown-value-line-order, 0);
497
504
  display: flex;
498
505
  align-items: baseline;
499
506
  gap: var(--statcard-breakdown-value-gap, 6px);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "2.102.0",
3
+ "version": "2.103.0",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",