@juspay/svelte-ui-components 2.80.1 → 2.80.3

package/dist/Slider/Slider.svelte

@@ -71,7 +71,7 @@
     appearance: none;
     width: 100%;
     height: var(--slider-track-height, 6px);
-    border-radius: var(--slider-track-border-radius, 3px);
+    border-radius: var(--slider-track-border-radius, var(--radius, 4px));
     background: var(
       --slider-track,
       linear-gradient(
@@ -144,7 +144,7 @@
 
   .slider-input::-moz-range-track {
     height: var(--slider-track-height, 6px);
-    border-radius: var(--slider-track-border-radius, 3px);
+    border-radius: var(--slider-track-border-radius, var(--radius, 4px));
     background: transparent;
   }
 

package/dist/Snippet/Snippet.svelte

@@ -58,7 +58,7 @@
     gap: var(--snippet-gap, 8px);
     background: var(--snippet-background, #1e1e1e);
     border: var(--snippet-border, 1px solid #333);
-    border-radius: var(--snippet-border-radius, 6px);
+    border-radius: var(--snippet-border-radius, var(--radius, 4px));
     padding: var(--snippet-padding, 12px 16px);
     font-family: var(--snippet-font-family, monospace);
     font-size: var(--snippet-font-size, 14px);
@@ -93,7 +93,7 @@
     --button-text-color: var(--snippet-copy-color, #888);
     --button-border: var(--snippet-copy-border, none);
     --button-padding: var(--snippet-copy-padding, 4px);
-    --button-border-radius: var(--snippet-copy-border-radius, 4px);
+    --button-border-radius: var(--snippet-copy-border-radius, var(--radius, 4px));
     --cursor: var(--snippet-copy-cursor, pointer);
     --button-hover-color: var(--snippet-copy-hover-background, #333);
     display: flex;

package/dist/SplitButton/SplitButton.svelte

@@ -73,7 +73,10 @@
     --button-font-weight: var(--split-button-primary-font-weight, 500);
     --button-font-family: var(--split-button-primary-font-family);
     --button-border: var(--split-button-primary-border, none);
-    --button-border-radius: var(--split-button-primary-border-radius, 4px 0 0 4px);
+    --button-border-radius: var(
+      --split-button-primary-border-radius,
+      var(--radius, 4px) 0 0 var(--radius, 4px)
+    );
     --button-hover-color: var(
       --split-button-primary-hover-background,
       var(--split-button-primary-background, #3a4550)
@@ -97,7 +100,10 @@
     display: flex;
     align-items: stretch;
     background-color: var(--split-button-trigger-background, #3a4550);
-    border-radius: var(--split-button-trigger-border-radius, 0 4px 4px 0);
+    border-radius: var(
+      --split-button-trigger-border-radius,
+      0 var(--radius, 4px) var(--radius, 4px) 0
+    );
     color: var(--split-button-trigger-color, white);
     cursor: pointer;
   }

package/dist/StatCard/StatCard.svelte

@@ -198,10 +198,10 @@
         </div>
       {/if}
     </div>
+  {/if}
 
-    {#if typeof subtitle === 'string' && subtitle.length > 0}
-      <div class="statcard-subtitle">{subtitle}</div>
-    {/if}
+  {#if typeof subtitle === 'string' && subtitle.length > 0}
+    <div class="statcard-subtitle">{subtitle}</div>
   {/if}
 
   {#if children}
@@ -221,7 +221,7 @@
     padding: var(--statcard-padding, 16px);
     background: var(--statcard-background, #ffffff);
     border: var(--statcard-border, 1px solid #e5e7eb);
-    border-radius: var(--statcard-border-radius, 8px);
+    border-radius: var(--statcard-border-radius, var(--radius, 4px));
     box-shadow: var(--statcard-box-shadow, none);
     width: var(--statcard-width, auto);
     min-width: var(--statcard-min-width, 0);

package/dist/Table/Table.svelte

@@ -520,7 +520,7 @@
     gap: var(--table-search-gap, 8px);
     padding: var(--table-search-padding, 8px 12px);
     border: var(--table-search-border, 1px solid #e5e7eb);
-    border-radius: var(--table-search-border-radius, 8px);
+    border-radius: var(--table-search-border-radius, var(--radius, 4px));
     background-color: var(--table-search-background, #ffffff);
     margin-bottom: var(--table-search-margin-bottom, 8px);
   }
@@ -550,7 +550,7 @@
   .table-search-input:focus-visible {
     outline: 2px solid var(--table-focus-outline-color, #3b82f6);
     outline-offset: 2px;
-    border-radius: var(--table-search-focus-border-radius, 2px);
+    border-radius: var(--table-search-focus-border-radius, var(--radius, 4px));
   }
 
   .table-search-input::placeholder {
@@ -587,7 +587,7 @@
   /* ── Container ──────────────────────────────────────────────────────────── */
   .table-container {
     border: var(--table-border, 1px solid #e5e7eb);
-    border-radius: var(--table-border-radius, 8px);
+    border-radius: var(--table-border-radius, var(--radius, 4px));
     width: var(--table-container-width, 100%);
     overflow: hidden;
   }
@@ -700,7 +700,7 @@
     width: var(--table-checkbox-size, 18px);
     height: var(--table-checkbox-size, 18px);
     border: var(--table-checkbox-border, 2px solid #9ca3af);
-    border-radius: var(--table-checkbox-border-radius, 3px);
+    border-radius: var(--table-checkbox-border-radius, var(--radius, 4px));
     background-color: var(--table-checkbox-background, transparent);
     cursor: pointer;
     flex-shrink: 0;

package/dist/ThemeSwitcher/ThemeSwitcher.svelte

@@ -162,7 +162,7 @@
     height: var(--theme-switcher-size, 36px);
     padding: 0;
     border: none;
-    border-radius: var(--theme-switcher-border-radius, 8px);
+    border-radius: var(--theme-switcher-border-radius, var(--radius, 4px));
     background-color: var(--theme-switcher-bg, transparent);
     cursor: pointer;
     color: var(--theme-switcher-icon-color, #374151);
@@ -211,14 +211,14 @@
     gap: var(--theme-switcher-segment-gap, 2px);
     padding: var(--theme-switcher-segment-padding, 4px);
     background-color: var(--theme-switcher-segment-bg, #f3f4f6);
-    border-radius: var(--theme-switcher-border-radius, 8px);
+    border-radius: var(--theme-switcher-border-radius, var(--radius, 4px));
   }
 
   .segment-indicator {
     position: absolute;
     top: var(--theme-switcher-segment-padding, 4px);
     bottom: var(--theme-switcher-segment-padding, 4px);
-    border-radius: var(--theme-switcher-segment-border-radius, 6px);
+    border-radius: var(--theme-switcher-segment-border-radius, var(--radius, 4px));
     background-color: var(--theme-switcher-segment-active-bg, #ffffff);
     box-shadow: var(--theme-switcher-segment-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));
     transition:
@@ -235,7 +235,7 @@
     justify-content: center;
     padding: var(--theme-switcher-segment-button-padding, 6px 10px);
     border: none;
-    border-radius: var(--theme-switcher-segment-border-radius, 6px);
+    border-radius: var(--theme-switcher-segment-border-radius, var(--radius, 4px));
     background: transparent;
     cursor: pointer;
     color: var(--theme-switcher-icon-color, #374151);

package/dist/Toast/Toast.svelte

@@ -162,7 +162,7 @@
     font-family: var(--toast-font-family, inherit);
     font-weight: var(--toast-font-weight);
     height: var(--toast-height, fit-content);
-    border-radius: var(--toast-border-radius, 0px);
+    border-radius: var(--toast-border-radius, var(--radius, 4px));
     border: var(--toast-border, none);
     border-style: var(--toast-border-style);
     width: var(--toast-width, fit-content);

package/dist/Tooltip/Tooltip.svelte

@@ -107,7 +107,7 @@
       `font-weight:var(--tooltip-font-weight,400)`,
       `font-family:var(--tooltip-font-family,inherit)`,
       `padding:var(--tooltip-padding,6px 10px)`,
-      `border-radius:var(--tooltip-border-radius,4px)`,
+      `border-radius: var(--tooltip-border-radius, var(--radius, 4px))`,
       `border:var(--tooltip-border,none)`,
       `box-shadow:var(--tooltip-box-shadow,0 2px 6px rgba(0,0,0,0.15))`,
       `white-space:normal`,
@@ -249,7 +249,7 @@
     font-weight: var(--tooltip-font-weight, 400);
     font-family: var(--tooltip-font-family);
     padding: var(--tooltip-padding, 6px 10px);
-    border-radius: var(--tooltip-border-radius, 4px);
+    border-radius: var(--tooltip-border-radius, var(--radius, 4px));
     border: var(--tooltip-border, none);
     box-shadow: var(--tooltip-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
     white-space: normal;

package/dist/Tooltip/tooltip-action.js

@@ -104,7 +104,7 @@ export const tooltip = (node, options) => {
             `font-weight:var(--tooltip-font-weight,400)`,
             `font-family:var(--tooltip-font-family,inherit)`,
             `padding:var(--tooltip-padding,6px 10px)`,
-            `border-radius:var(--tooltip-border-radius,4px)`,
+            `border-radius: var(--tooltip-border-radius, var(--radius, 4px))`,
             `border:var(--tooltip-border,none)`,
             `box-shadow:var(--tooltip-box-shadow,0 2px 6px rgba(0,0,0,0.15))`,
             'white-space:normal',

package/dist/_chart/ChartContainer.svelte

@@ -7,6 +7,7 @@
     height = $bindable(0),
     aspectRatio = 16 / 9,
     minHeight = 0,
+    maxHeight = Infinity,
     testId,
     classes,
     children
@@ -22,7 +23,7 @@
     const rect = containerEl.getBoundingClientRect();
     const w = Math.round(rect.width);
     width = w;
-    height = Math.max(minHeight, Math.round(w / aspectRatio));
+    height = Math.min(maxHeight, Math.max(minHeight, Math.round(w / aspectRatio)));
   }
 
   // Re-measure whenever aspectRatio changes at runtime (e.g. semiCircle toggled).
@@ -30,8 +31,10 @@
   // the ResizeObserver and the component is being torn down.
   // eslint-disable-next-line no-restricted-syntax
   $effect(() => {
-    // Reading aspectRatio here makes this effect re-run whenever it changes.
+    // Reading aspectRatio/maxHeight here makes this effect re-run whenever either
+    // changes, so the computed height stays current without waiting for a resize.
     void aspectRatio;
+    void maxHeight;
     if (isMounted) {
       measure();
     }

package/dist/_chart/ChartTooltip.svelte

@@ -34,7 +34,7 @@
     font-size: var(--chart-tooltip-font-size, 12px);
     font-family: var(--chart-font-family, inherit);
     padding: var(--chart-tooltip-padding, 8px 12px);
-    border-radius: var(--chart-tooltip-border-radius, 4px);
+    border-radius: var(--chart-tooltip-border-radius, var(--radius, 4px));
     box-shadow: var(--chart-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
     pointer-events: none;
     max-width: var(--chart-tooltip-max-width, 280px);

package/dist/_chart/geometry.js

@@ -115,12 +115,16 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
         for (const [, ids] of columnGroups) {
             for (const id of ids) {
                 const deps = incoming.get(id) ?? [];
-                if (deps.length > 0) {
+                const totalDepValue = deps.reduce((s, d) => s + d.value, 0);
+                // Only re-centre against incoming links when they carry positive volume.
+                // With all-zero weights the division yielded NaN, which propagated to
+                // every node position and collapsed the chart; keep the initial y instead.
+                if (totalDepValue > 0) {
                     const weightedY = deps.reduce((s, d) => {
                         const sy = nodeY.get(d.source) ?? 0;
                         const sh = nodeH.get(d.source) ?? 0;
                         return s + (sy + sh / 2) * d.value;
-                    }, 0) / deps.reduce((s, d) => s + d.value, 0);
+                    }, 0) / totalDepValue;
                     nodeY.set(id, Math.max(0, weightedY - (nodeH.get(id) ?? 0) / 2));
                 }
             }

package/dist/_chart/types.d.ts

@@ -112,6 +112,7 @@ export type ChartContainerProperties = {
     height?: number;
     aspectRatio?: number;
     minHeight?: number;
+    maxHeight?: number;
     testId?: string;
     classes?: string;
     children: Snippet;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as Button } from './Button/Button.svelte';
 export { default as Input } from './Input/Input.svelte';
 export { default as InputButton } from './InputButton/InputButton.svelte';
 export { default as ListItem } from './ListItem/ListItem.svelte';
+export { default as KeyValue } from './KeyValue/KeyValue.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as Toolbar } from './Toolbar/Toolbar.svelte';
 export { default as Icon } from './Icon/Icon.svelte';
@@ -77,6 +78,7 @@ export type * from './Modal/properties';
 export type * from './Input/properties';
 export type * from './InputButton/properties';
 export type * from './ListItem/properties';
+export type * from './KeyValue/properties';
 export type * from './types';
 export type * from './Icon/properties';
 export type * from './BrandLoader/properties';

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as Button } from './Button/Button.svelte';
 export { default as Input } from './Input/Input.svelte';
 export { default as InputButton } from './InputButton/InputButton.svelte';
 export { default as ListItem } from './ListItem/ListItem.svelte';
+export { default as KeyValue } from './KeyValue/KeyValue.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as Toolbar } from './Toolbar/Toolbar.svelte';
 export { default as Icon } from './Icon/Icon.svelte';

package/package.json

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