@juspay/svelte-ui-components 2.80.1 → 2.80.2

package/dist/Badge/Badge.svelte

@@ -87,7 +87,7 @@
   }
 
   .icon-img {
-    border-radius: var(--badge-img-border-radius, 6px);
+    border-radius: var(--badge-img-border-radius, var(--radius, 4px));
     width: var(--badge-img-width, 64px);
     height: var(--badge-img-height, 64px);
     object-fit: var(--badge-object-fit, contain);

package/dist/Banner/Banner.svelte

@@ -169,7 +169,7 @@
     --button-color: transparent;
     --button-border: none;
     --button-padding: 2px;
-    --button-border-radius: var(--banner-dismiss-border-radius, 4px);
+    --button-border-radius: var(--banner-dismiss-border-radius, var(--radius, 4px));
     --button-text-color: var(--banner-dismiss-color, currentColor);
     --button-hover-color: var(--banner-dismiss-hover-background, rgba(0, 0, 0, 0.1));
     --cursor: inherit;

package/dist/Book/Book.svelte

@@ -179,7 +179,7 @@
   .book {
     width: var(--book-width, 100%);
     background-color: var(--book-background, #ffffff);
-    border-radius: var(--book-border-radius, 8px);
+    border-radius: var(--book-border-radius, var(--radius, 4px));
     border: var(--book-border, 1px solid #e0e0e0);
     outline: none;
   }

package/dist/Browser/Browser.svelte

@@ -65,7 +65,7 @@
   }
 
   .browser.rounded {
-    border-radius: var(--browser-border-radius, 12px);
+    border-radius: var(--browser-border-radius, var(--radius, 4px));
   }
 
   .browser.shadow {
@@ -148,7 +148,7 @@
 
   .tab {
     padding: var(--browser-tab-padding, 6px 16px);
-    border-radius: var(--browser-tab-border-radius, 8px 8px 0 0);
+    border-radius: var(--browser-tab-border-radius, var(--radius, 4px) var(--radius, 4px) 0 0);
     font-size: var(--browser-tab-font-size, 13px);
     font-family: var(--browser-tab-font-family, inherit);
     white-space: nowrap;
@@ -167,7 +167,7 @@
     gap: 8px;
     padding: 0 12px;
     height: var(--browser-addressbar-height, 32px);
-    border-radius: var(--browser-addressbar-border-radius, 6px);
+    border-radius: var(--browser-addressbar-border-radius, var(--radius, 4px));
     font-size: var(--browser-addressbar-font-size, 13px);
     font-family: var(--browser-addressbar-font-family, inherit);
   }

package/dist/Button/Button.svelte

@@ -96,7 +96,7 @@
     height: var(--button-height, fit-content);
     padding: var(--button-padding, 16px);
     margin: var(--button-margin);
-    border-radius: var(--button-border-radius, 0px);
+    border-radius: var(--button-border-radius, var(--radius, 4px));
     width: var(--button-width, fit-content);
     cursor: var(--cursor, pointer);
     opacity: var(--opacity, 1);

package/dist/Calendar/Calendar.svelte

@@ -358,7 +358,7 @@
     padding: var(--calendar-padding, 16px);
     background-color: var(--calendar-background, #ffffff);
     border: var(--calendar-border, 1px solid #e0e0e0);
-    border-radius: var(--calendar-border-radius, 8px);
+    border-radius: var(--calendar-border-radius, var(--radius, 4px));
     box-shadow: var(--calendar-box-shadow, none);
     box-sizing: border-box;
     user-select: none;
@@ -387,7 +387,7 @@
     --button-height: var(--calendar-nav-button-size, 32px);
     --button-border: none;
     --button-color: transparent;
-    --button-border-radius: var(--calendar-nav-button-border-radius, 4px);
+    --button-border-radius: var(--calendar-nav-button-border-radius, var(--radius, 4px));
     --button-text-color: var(--calendar-nav-button-color, #666666);
     --button-padding: 0;
     --button-hover-color: var(--calendar-nav-button-hover-background, #f0f0f0);

package/dist/Card/Card.svelte

@@ -90,7 +90,7 @@
   .card {
     background: var(--card-background, inherit);
     border: var(--card-border, 1px solid currentColor);
-    border-radius: var(--card-border-radius, 8px);
+    border-radius: var(--card-border-radius, var(--radius, 4px));
     overflow: var(--card-overflow, hidden);
     color: inherit;
     cursor: var(--card-cursor, inherit);

package/dist/Checkbox/Checkbox.svelte

@@ -106,7 +106,7 @@
     width: var(--checkbox-size, 20px);
     height: var(--checkbox-size, 20px);
     border: var(--checkbox-border, 2px solid #757575);
-    border-radius: var(--checkbox-border-radius, 3px);
+    border-radius: var(--checkbox-border-radius, var(--radius, 4px));
     background-color: var(--checkbox-background, transparent);
     transition:
       background-color var(--checkbox-transition, 0.2s),

package/dist/Choicebox/Choicebox.svelte

@@ -54,7 +54,7 @@
     align-items: var(--choicebox-align-items, center);
     padding: var(--choicebox-padding, 16px);
     border: var(--choicebox-border, 2px solid #d0d0d0);
-    border-radius: var(--choicebox-border-radius, 12px);
+    border-radius: var(--choicebox-border-radius, var(--radius, 4px));
     background: var(--choicebox-background, #ffffff);
     gap: var(--choicebox-gap, 12px);
     cursor: var(--choicebox-cursor, pointer);

package/dist/ColorPicker/ColorPicker.svelte

@@ -336,7 +336,10 @@
   .color-picker-swatch-btn {
     --button-color: var(--color-picker-swatch-btn-background, #f9fafb);
     --button-border: var(--color-picker-swatch-btn-border, 1px solid #d1d5db);
-    --button-border-radius: var(--color-picker-swatch-btn-border-radius, 10px 0 0 10px);
+    --button-border-radius: var(
+      --color-picker-swatch-btn-border-radius,
+      var(--radius, 4px) 0 0 var(--radius, 4px)
+    );
     --button-hover-color: var(--color-picker-swatch-btn-hover-background, #f3f4f6);
     --button-padding: var(--color-picker-swatch-padding, 5px);
     --button-width: fit-content;
@@ -344,14 +347,14 @@
   }
 
   .color-picker-swatch-btn.standalone {
-    --button-border-radius: var(--color-picker-swatch-btn-border-radius, 10px);
+    --button-border-radius: var(--color-picker-swatch-btn-border-radius, var(--radius, 4px));
   }
 
   .color-picker-checkerboard {
     display: block;
     width: var(--color-picker-swatch-size, 26px);
     height: var(--color-picker-swatch-size, 26px);
-    border-radius: var(--color-picker-swatch-border-radius, 5px);
+    border-radius: var(--color-picker-swatch-border-radius, var(--radius, 4px));
     overflow: hidden;
     background-image:
       linear-gradient(45deg, #ccc 25%, transparent 25%),
@@ -414,7 +417,7 @@
     padding: var(--color-picker-popover-padding, 12px);
     background: var(--color-picker-popover-background, #ffffff);
     border: var(--color-picker-popover-border, 1px solid #e5e7eb);
-    border-radius: var(--color-picker-popover-border-radius, 12px);
+    border-radius: var(--color-picker-popover-border-radius, var(--radius, 4px));
     box-shadow: var(
       --color-picker-popover-shadow,
       0 4px 24px rgba(0, 0, 0, 0.12),
@@ -432,7 +435,7 @@
     position: relative;
     width: 100%;
     aspect-ratio: 1 / 0.7;
-    border-radius: var(--color-picker-panel-border-radius, 8px);
+    border-radius: var(--color-picker-panel-border-radius, var(--radius, 4px));
     cursor: crosshair;
     overflow: hidden;
     user-select: none;

package/dist/Combobox/Combobox.svelte

@@ -313,7 +313,7 @@
     align-items: center;
     background: var(--combobox-input-background, #ffffff);
     border: var(--combobox-input-border, 1px solid #cccccc);
-    border-radius: var(--combobox-input-border-radius, 6px);
+    border-radius: var(--combobox-input-border-radius, var(--radius, 4px));
     transition: var(--combobox-input-transition, border-color 0.15s, box-shadow 0.15s);
   }
 
@@ -369,7 +369,7 @@
     margin-top: var(--combobox-dropdown-gap, 4px);
     background: var(--combobox-dropdown-background, #ffffff);
     border: var(--combobox-dropdown-border, 1px solid #cccccc);
-    border-radius: var(--combobox-dropdown-border-radius, 6px);
+    border-radius: var(--combobox-dropdown-border-radius, var(--radius, 4px));
     box-shadow: var(--combobox-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
     max-height: var(--combobox-dropdown-max-height, 200px);
     overflow-y: auto;

package/dist/CommandMenu/CommandMenu.svelte

@@ -298,7 +298,7 @@
 
   .command-menu-dialog {
     background-color: var(--command-menu-background, #ffffff);
-    border-radius: var(--command-menu-border-radius, 12px);
+    border-radius: var(--command-menu-border-radius, var(--radius, 4px));
     box-shadow: var(--command-menu-box-shadow, 0 16px 70px rgba(0, 0, 0, 0.2));
     width: var(--command-menu-width, 560px);
     max-width: var(--command-menu-max-width, 90vw);
@@ -380,7 +380,7 @@
     display: flex;
     align-items: center;
     padding: var(--command-menu-item-padding, 10px 12px);
-    border-radius: var(--command-menu-item-border-radius, 8px);
+    border-radius: var(--command-menu-item-border-radius, var(--radius, 4px));
     cursor: pointer;
     gap: var(--command-menu-item-gap, 10px);
     font-size: var(--command-menu-item-font-size, 14px);
@@ -440,7 +440,7 @@
     min-width: var(--command-menu-kbd-min-width, 24px);
     height: var(--command-menu-kbd-height, 22px);
     padding: var(--command-menu-kbd-padding, 0 6px);
-    border-radius: var(--command-menu-kbd-border-radius, 4px);
+    border-radius: var(--command-menu-kbd-border-radius, var(--radius, 4px));
     background-color: var(--command-menu-kbd-background, #f1f5f9);
     border: var(--command-menu-kbd-border, 1px solid #e2e8f0);
     color: var(--command-menu-kbd-color, #64748b);

package/dist/ContextMenu/ContextMenu.svelte

@@ -227,7 +227,7 @@
     z-index: var(--context-menu-z-index, 1000);
     background-color: var(--context-menu-background-color, #ffffff);
     border: var(--context-menu-border, 1px solid #e0e0e0);
-    border-radius: var(--context-menu-border-radius, 6px);
+    border-radius: var(--context-menu-border-radius, var(--radius, 4px));
     box-shadow: var(--context-menu-box-shadow, 0px 4px 16px rgba(0, 0, 0, 0.12));
     min-width: var(--context-menu-min-width, 160px);
     max-height: var(--context-menu-max-height, 240px);

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -933,7 +933,7 @@
   .drp-trigger-wrapper {
     --button-color: var(--drp-trigger-background, inherit);
     --button-border: var(--drp-trigger-border, 1px solid currentColor);
-    --button-border-radius: var(--drp-trigger-border-radius, 6px);
+    --button-border-radius: var(--drp-trigger-border-radius, var(--radius, 4px));
     --button-text-color: var(--drp-trigger-color, inherit);
     --button-padding: var(--drp-trigger-padding, 8px 12px);
     --button-min-width: var(--drp-trigger-min-width, 200px);
@@ -976,7 +976,7 @@
     z-index: var(--drp-panel-z-index, 1000);
     background: var(--drp-panel-background, inherit);
     border: var(--drp-panel-border, 1px solid #e0e0e0);
-    border-radius: var(--drp-panel-border-radius, 10px);
+    border-radius: var(--drp-panel-border-radius, var(--radius, 4px));
     box-shadow: var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
     display: flex;
     flex-direction: column;
@@ -1019,7 +1019,7 @@
     padding: var(--drp-preset-padding, 7px 12px);
     background: none;
     border: none;
-    border-radius: var(--drp-preset-border-radius, 5px);
+    border-radius: var(--drp-preset-border-radius, var(--radius, 4px));
     color: var(--drp-preset-color, inherit);
     cursor: pointer;
     white-space: nowrap;
@@ -1098,7 +1098,7 @@
     height: var(--drp-nav-btn-size, 32px);
     background: none;
     border: none;
-    border-radius: var(--drp-nav-btn-border-radius, 4px);
+    border-radius: var(--drp-nav-btn-border-radius, var(--radius, 4px));
     cursor: pointer;
     color: var(--drp-nav-btn-color, inherit);
     transition: background 0.12s ease;
@@ -1175,7 +1175,7 @@
     min-width: 0;
     padding: var(--drp-date-input-padding, 10px 14px);
     border: var(--drp-date-input-border, 1px solid #d4d4d4);
-    border-radius: var(--drp-date-input-radius, 8px);
+    border-radius: var(--drp-date-input-radius, var(--radius, 4px));
     background: var(--drp-date-input-background, #ffffff);
   }
 
@@ -1210,7 +1210,7 @@
     height: var(--drp-time-toggle-size, 40px);
     padding: 0;
     border: var(--drp-time-toggle-border, 1px solid #d4d4d4);
-    border-radius: var(--drp-time-toggle-radius, 8px);
+    border-radius: var(--drp-time-toggle-radius, var(--radius, 4px));
     background: var(--drp-time-toggle-background, #f6f7f9);
     color: var(--drp-time-toggle-color, #555555);
     cursor: pointer;
@@ -1239,7 +1239,7 @@
     display: flex;
     align-items: center;
     border: var(--drp-time-input-border, 1px solid #d4d4d4);
-    border-radius: var(--drp-time-input-radius, 8px);
+    border-radius: var(--drp-time-input-radius, var(--radius, 4px));
     background: var(--drp-time-input-background, #ffffff);
   }
 
@@ -1388,7 +1388,7 @@
     position: relative;
     --button-color: var(--drp-compare-trigger-background, inherit);
     --button-border: var(--drp-compare-trigger-border, 1px solid currentColor);
-    --button-border-radius: var(--drp-compare-trigger-border-radius, 6px);
+    --button-border-radius: var(--drp-compare-trigger-border-radius, var(--radius, 4px));
     --button-text-color: var(--drp-compare-trigger-color, inherit);
     --button-padding: var(--drp-compare-trigger-padding, 8px 12px);
     --button-min-width: var(--drp-compare-trigger-min-width, 160px);
@@ -1407,7 +1407,7 @@
     z-index: var(--drp-panel-z-index, 1000);
     background: var(--drp-panel-background, inherit);
     border: var(--drp-panel-border, 1px solid #e0e0e0);
-    border-radius: var(--drp-panel-border-radius, 10px);
+    border-radius: var(--drp-panel-border-radius, var(--radius, 4px));
     box-shadow: var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
     display: flex;
     flex-direction: column;

package/dist/FileInput/FileInput.svelte

@@ -146,7 +146,7 @@
     justify-content: var(--file-input-justify-content, center);
     padding: var(--file-input-padding);
     border: var(--file-input-border);
-    border-radius: var(--file-input-radius);
+    border-radius: var(--file-input-radius, var(--radius, 4px));
     background: var(--file-input-background);
     gap: var(--file-input-gap);
     text-align: var(--file-input-text-align, center);

package/dist/GridItem/GridItem.svelte

@@ -65,7 +65,7 @@
     width: var(--grid-item-body-width, 64px);
     background-color: var(--grid-item-background-color, #faf9f9);
     border: var(--grid-item-border, 1px solid #eaeaea);
-    border-radius: var(--grid-item-border-radius, 4px);
+    border-radius: var(--grid-item-border-radius, var(--radius, 4px));
     margin: var(--grid-item-margin, 8px 0 0 0);
     display: flex;
     justify-content: center;
@@ -101,7 +101,7 @@
     position: absolute;
     inset: 0px;
     margin: var(--grid-item-margin, 8px 0 0 0);
-    border-radius: var(--grid-item-border-radius, 4px);
+    border-radius: var(--grid-item-border-radius, var(--radius, 4px));
     border: var(--animation-version, 32px solid #cbcccf66);
     animation: clipperAnimation var(--loader-animation-duration, 3s) infinite linear;
   }

package/dist/Input/Input.svelte

@@ -331,12 +331,12 @@
     background-color: var(--input-background, white);
     font-size: var(--input-font-size, 16px) !important;
     font-family: var(--input-font-family, inherit);
-    border-radius: var(--input-radius, 4px);
+    border-radius: var(--input-radius, var(--radius, 4px));
     outline: none;
     padding: var(--input-padding, 16px);
     font-weight: var(--input-font-weight, 500);
     width: var(--input-width, fit-content);
-    margin: var(--input-margin, 0px 0px 12px 0px);
+    margin: var(--input-margin, 0);
     appearance: none !important;
     -webkit-appearance: none !important; /* For Safari MWeb */
     box-shadow: var(--input-box-shadow, 0px 1px 8px #2f537733);
@@ -364,7 +364,7 @@
   }
 
   .action-input {
-    border-radius: var(--input-radius, 4px 0px 0px 4px);
+    border-radius: var(--input-radius, var(--radius, 4px) 0 0 var(--radius, 4px));
     box-shadow: var(--input-box-shadow, 0px 0px 0px #ffffff);
     margin-bottom: 0;
   }
@@ -396,7 +396,7 @@
   .input-field-wrap {
     position: relative;
     display: block;
-    margin: var(--input-margin, 0px 0px 12px 0px);
+    margin: var(--input-margin, 0);
   }
 
   .input-field-wrap > :global(textarea),
@@ -429,7 +429,7 @@
   .input-icon-button:focus-visible {
     outline: var(--input-icon-focus-outline, 2px solid var(--input-focus-border-color, #005fcc));
     outline-offset: var(--input-icon-focus-outline-offset, 2px);
-    border-radius: var(--input-icon-focus-radius, 2px);
+    border-radius: var(--input-icon-focus-radius, var(--radius, 4px));
   }
 
   .input-icon-left {

package/dist/InputButton/InputButton.svelte

@@ -136,7 +136,7 @@
     font-size: var(--input-font-size, 16px) !important;
     font-weight: var(--input-button-font-weight, 500);
     margin: var(--input-button-margin);
-    border-radius: var(--input-button-radius, 4px);
+    border-radius: var(--input-button-radius, var(--radius, 4px));
     border: var(--input-button-container-border);
     background: var(--input-button-container-background);
     padding: var(--input-button-container-padding);
@@ -145,7 +145,7 @@
   .input-button {
     display: flex;
     align-items: center;
-    border-radius: var(--input-button-radius, 4px);
+    border-radius: var(--input-button-radius, var(--radius, 4px));
     border: var(--input-button-border);
     box-shadow: var(--input-button-box-shadow, 0px 1px 8px #2f537733);
     background: var(--input-button-background);
@@ -262,7 +262,10 @@
     --button-font-size: var(--right-button-font-size);
     --button-height: var(--right-button-height, 54px);
     --button-padding: var(--right-button-padding);
-    --button-border-radius: var(--right-button-border-radius, 0px 4px 4px 0px);
+    --button-border-radius: var(
+      --right-button-border-radius,
+      0 var(--radius, 4px) var(--radius, 4px) 0
+    );
     --button-width: var(--right-button-width, 100%);
     --cursor: var(--right-button-cursor);
     --opacity: var(--right-button-opacity);

package/dist/KeyValue/KeyValue.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { KeyValueProperties, KeyValueItem } from './properties';
+
+  let {
+    items,
+    columns = 2,
+    layout = 'vertical',
+    size = 'md',
+    hideEmpty = true,
+    emptyText = '—',
+    valueSnippet,
+    labelSnippet,
+    testId,
+    classes = ''
+  }: KeyValueProperties = $props();
+
+  const isEmptyValue = (value: KeyValueItem['value']): boolean =>
+    value == null || (typeof value === 'string' && value.trim() === '');
+
+  let visibleItems = $derived(
+    hideEmpty ? items.filter((item) => !isEmptyValue(item.value)) : items
+  );
+
+  const displayValue = (item: KeyValueItem): string =>
+    isEmptyValue(item.value) ? emptyText : String(item.value);
+</script>
+
+<dl
+  class="key-value key-value--{layout} key-value--{size} {classes}"
+  style="--keyvalue-columns: {columns};"
+  data-pw={testId}
+>
+  {#each visibleItems as item, index (item.label + '-' + index)}
+    <div class="key-value-item" data-pw={item.testId}>
+      <dt class="key-value-label">
+        {#if labelSnippet}
+          {@render labelSnippet(item, index)}
+        {:else}
+          {item.label}
+        {/if}
+      </dt>
+      <dd class="key-value-value">
+        {#if valueSnippet}
+          {@render valueSnippet(item, index)}
+        {:else}
+          {displayValue(item)}
+        {/if}
+      </dd>
+    </div>
+  {/each}
+</dl>
+
+<style>
+  .key-value {
+    display: grid;
+    grid-template-columns: repeat(var(--keyvalue-columns, 2), minmax(0, 1fr));
+    column-gap: var(--keyvalue-column-gap, 32px);
+    row-gap: var(--keyvalue-row-gap, 16px);
+    margin: 0;
+    width: 100%;
+    /* Size-preset defaults (overridable by --keyvalue-label-size / --keyvalue-value-size).
+       The value sits 2px below the label, so the key always reads as the heavier, larger element. */
+    --_kv-label-size: 16px;
+    --_kv-value-size: 14px;
+  }
+
+  .key-value--sm {
+    --_kv-label-size: 14px;
+    --_kv-value-size: 12px;
+  }
+
+  .key-value--md {
+    --_kv-label-size: 16px;
+    --_kv-value-size: 14px;
+  }
+
+  .key-value--lg {
+    --_kv-label-size: 18px;
+    --_kv-value-size: 16px;
+  }
+
+  .key-value-item {
+    display: flex;
+    min-width: 0;
+  }
+
+  .key-value--vertical .key-value-item {
+    flex-direction: column;
+    gap: var(--keyvalue-pair-gap, 4px);
+  }
+
+  .key-value--horizontal .key-value-item {
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--keyvalue-pair-gap, 12px);
+  }
+
+  .key-value-label {
+    margin: 0;
+    color: var(--keyvalue-label-color, #1a1a1a);
+    font-size: var(--keyvalue-label-size, var(--_kv-label-size, 13px));
+    font-weight: var(--keyvalue-label-weight, 600);
+    line-height: var(--keyvalue-label-line-height, 1.4);
+  }
+
+  .key-value--horizontal .key-value-label {
+    flex: 0 0 var(--keyvalue-label-width, 140px);
+  }
+
+  .key-value-value {
+    margin: 0;
+    color: var(--keyvalue-value-color, #555);
+    font-size: var(--keyvalue-value-size, var(--_kv-value-size, 16px));
+    font-weight: var(--keyvalue-value-weight, 400);
+    line-height: var(--keyvalue-value-line-height, 1.4);
+    overflow-wrap: anywhere;
+  }
+
+  .key-value--horizontal .key-value-value {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  @media (max-width: 600px) {
+    .key-value {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

package/dist/KeyValue/KeyValue.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { KeyValueProperties } from './properties';
+declare const KeyValue: import("svelte").Component<KeyValueProperties, {}, "">;
+type KeyValue = ReturnType<typeof KeyValue>;
+export default KeyValue;

package/dist/KeyValue/properties.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+export type KeyValueProperties = MandatoryKeyValueProperties & OptionalKeyValueProperties;
+export type KeyValueItem = {
+    /** The field label (the "key"). */
+    label: string;
+    /**
+     * The field value. May be `null`/`undefined`/empty — such items are skipped when
+     * `hideEmpty` is `true` (the default), or rendered as `emptyText` otherwise.
+     */
+    value?: string | number | null;
+    /** Optional per-item test id, emitted as `data-pw` on the item wrapper. */
+    testId?: string;
+};
+export type KeyValueLayout = 'vertical' | 'horizontal';
+/** Size preset scaling the label/value typography. Mirrors Blend's KeyValuePair sizes. */
+export type KeyValueSize = 'sm' | 'md' | 'lg';
+export type MandatoryKeyValueProperties = {
+    items: KeyValueItem[];
+};
+export type OptionalKeyValueProperties = {
+    /**
+     * Number of columns the pairs flow across (row-major). Defaults to `2`. The grid
+     * collapses to a single column below the `--keyvalue-collapse-width` breakpoint.
+     */
+    columns?: number;
+    /**
+     * `'vertical'` (default) stacks the value beneath the label; `'horizontal'` places the
+     * label and value side-by-side (label width set by `--keyvalue-label-width`).
+     */
+    layout?: KeyValueLayout;
+    /**
+     * Typography size preset. `'sm'` (12/14px), `'md'` (13/16px, default), `'lg'` (14/18px) —
+     * label/value font sizes respectively. Individual `--keyvalue-label-size` /
+     * `--keyvalue-value-size` overrides always take precedence over the preset.
+     */
+    size?: KeyValueSize;
+    /**
+     * When `true` (default), items whose value is `null`, `undefined`, or an empty/whitespace
+     * string are omitted. Set `false` to render them as `emptyText` instead.
+     */
+    hideEmpty?: boolean;
+    /** Placeholder rendered for empty values when `hideEmpty` is `false`. Defaults to `'—'`. */
+    emptyText?: string;
+    /** Custom renderer for the value cell, receiving `(item, index)`. Falls back to plain text. */
+    valueSnippet?: Snippet<[KeyValueItem, number]>;
+    /** Custom renderer for the label cell, receiving `(item, index)`. Falls back to plain text. */
+    labelSnippet?: Snippet<[KeyValueItem, number]>;
+    /** Test selector applied as the `data-pw` attribute on the root grid. */
+    testId?: string;
+    /** Additional CSS classes for theming the root grid. */
+    classes?: string;
+};

package/dist/KeyValue/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/KeyboardInput/KeyboardInput.svelte

@@ -82,7 +82,7 @@
     color: var(--keyboard-input-key-color, #333333);
     background-color: var(--keyboard-input-key-background, #f5f5f5);
     border: var(--keyboard-input-key-border, 1px solid #d1d1d1);
-    border-radius: var(--keyboard-input-key-border-radius, 4px);
+    border-radius: var(--keyboard-input-key-border-radius, var(--radius, 4px));
     box-shadow: var(--keyboard-input-key-box-shadow, 0 1px 0 #c4c4c4);
     min-width: var(--keyboard-input-key-min-width, 1.6em);
     padding: var(--keyboard-input-key-padding, 2px 6px);

package/dist/Menu/Menu.svelte

@@ -284,7 +284,7 @@
     left: var(--menu-dropdown-left, 0);
     background-color: var(--menu-background-color, #ffffff);
     border: var(--menu-border, 1px solid #e0e0e0);
-    border-radius: var(--menu-border-radius, 6px);
+    border-radius: var(--menu-border-radius, var(--radius, 4px));
     box-shadow: var(--menu-box-shadow, 0px 4px 16px rgba(0, 0, 0, 0.12));
     min-width: var(--menu-min-width, 160px);
     max-height: var(--menu-max-height, 240px);

package/dist/Modal/Modal.svelte

@@ -245,7 +245,7 @@
     cursor: auto;
     display: flex;
     flex-direction: column;
-    border-radius: var(--modal-border-radius, 0px);
+    border-radius: var(--modal-border-radius, var(--radius, 4px));
     overflow: var(--modal-content-overflow, auto);
     border-top: var(--modal-content-border-top);
   }
@@ -331,7 +331,7 @@
     --button-height: var(--modal-footer-secondary-button-height, fit-content);
     --button-padding: var(--modal-footer-secondary-button-padding, 16px);
     --button-margin: var(--modal-footer-secondary-button-margin);
-    --button-border-radius: var(--modal-footer-secondary-button-border-radius, 0px);
+    --button-border-radius: var(--modal-footer-secondary-button-border-radius, var(--radius, 4px));
     --button-width: var(--modal-footer-secondary-button-width, fit-content);
     --cursor: var(--modal-footer-secondary-button-cursor, pointer);
     --opacity: var(--modal-footer-secondary-button-opacity, 1);
@@ -372,7 +372,7 @@
     --button-height: var(--modal-footer-primary-button-height, fit-content);
     --button-padding: var(--modal-footer-primary-button-padding, 16px);
     --button-margin: var(--modal-footer-primary-button-margin);
-    --button-border-radius: var(--modal-footer-primary-button-border-radius, 0px);
+    --button-border-radius: var(--modal-footer-primary-button-border-radius, var(--radius, 4px));
     --button-width: var(--modal-footer-primary-button-width, fit-content);
     --cursor: var(--modal-footer-primary-button-cursor, pointer);
     --opacity: var(--modal-footer-primary-button-opacity, 1);

package/dist/Pagination/Pagination.svelte

@@ -141,7 +141,7 @@
     color: var(--pagination-button-color, #3a4550);
     background: var(--pagination-button-background, transparent);
     border: var(--pagination-button-border, 1px solid #d1d5db);
-    border-radius: var(--pagination-button-border-radius, 4px);
+    border-radius: var(--pagination-button-border-radius, var(--radius, 4px));
     cursor: var(--pagination-button-cursor, pointer);
     min-width: var(--pagination-button-min-width, 36px);
     height: var(--pagination-button-height, 36px);

package/dist/PieChart/PieChart.svelte

@@ -372,7 +372,7 @@
     display: inline-block;
     width: var(--chart-legend-swatch-size, 12px);
     height: var(--chart-legend-swatch-size, 12px);
-    border-radius: var(--piechart-legend-swatch-radius, 2px);
+    border-radius: var(--piechart-legend-swatch-radius, var(--radius, 4px));
     flex-shrink: 0;
   }
   .pie-legend-label {

package/dist/Progress/Progress.svelte

@@ -33,14 +33,14 @@
     flex: 1;
     height: var(--progress-track-height, 8px);
     background: var(--progress-track-background, #e0e0e0);
-    border-radius: var(--progress-track-border-radius, 4px);
+    border-radius: var(--progress-track-border-radius, var(--radius, 4px));
     overflow: hidden;
   }
 
   .bar {
     height: 100%;
     background: var(--progress-bar-background, #2196f3);
-    border-radius: var(--progress-bar-border-radius, 4px);
+    border-radius: var(--progress-bar-border-radius, var(--radius, 4px));
     transition: var(--progress-bar-transition, width 0.3s ease);
   }
 

package/dist/ProportionBar/ProportionBar.svelte

@@ -159,7 +159,7 @@
   .proportion-bar-track {
     width: 100%;
     height: var(--proportion-bar-track-height, 10px);
-    border-radius: var(--proportion-bar-track-border-radius, 4px);
+    border-radius: var(--proportion-bar-track-border-radius, var(--radius, 4px));
     overflow: hidden;
     background: var(--proportion-bar-track-bg, #f0f0f0);
   }
@@ -189,7 +189,7 @@
     display: inline-block;
     width: var(--proportion-bar-swatch-size, 10px);
     height: var(--proportion-bar-swatch-size, 10px);
-    border-radius: var(--proportion-bar-swatch-border-radius, 2px);
+    border-radius: var(--proportion-bar-swatch-border-radius, var(--radius, 4px));
     flex-shrink: 0;
   }
 

package/dist/SankeyChart/SankeyChart.svelte

@@ -18,6 +18,7 @@
     showValues = false,
     showLabels = true,
     aspectRatio = 16 / 9,
+    maxHeight = Infinity,
     valueFormat,
     tooltipSnippet,
     empty,
@@ -89,6 +90,26 @@
       : (Math.max(0, chartWidth - MARGIN * 2) - nodeWidth) / (columnCount - 1)
   );
 
+  // Node labels render alongside their bar; long labels used to overflow into the
+  // next column and collide. Clip each to the horizontal room its column actually
+  // has and append an ellipsis (the full text stays available via the node tooltip).
+  const LABEL_CHAR_PX = 7.2; // ≈ 0.6em at the 12px default label size
+  const truncateLabel = (text: string, column: number): string => {
+    const available =
+      column === 0
+        ? MARGIN + 16
+        : column === columnCount - 1
+          ? Math.max(colWidth, MARGIN + 24)
+          : Math.max(0, colWidth - nodeWidth - 12);
+    const maxChars = Math.floor(available / LABEL_CHAR_PX);
+    // No usable room — hide the label rather than force text that would overflow;
+    // the full text is still reachable via the node's <title> on hover.
+    if (maxChars < 3) {
+      return '';
+    }
+    return text.length > maxChars ? text.slice(0, maxChars - 1) + '…' : text;
+  };
+
   // ── Helpers ────────────────────────────────────────────────────
 
   /** Percentage of source node's total value carried by a link (0–100, 2 dp). */
@@ -276,7 +297,7 @@
   {#if isEmpty && typeof empty === 'function'}
     <div class="chart-empty">{@render empty()}</div>
   {:else}
-    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio} {maxHeight}>
       <g transform="translate({MARGIN}, {MARGIN})">
         {#if columnLabels != null && columnLabels.length > 0}
           {#each columnLabels.slice(0, columnCount) as label, ci (ci)}
@@ -340,8 +361,11 @@
               y={node.y + node.height / 2}
               text-anchor={node.column === 0 ? 'end' : 'start'}
               dominant-baseline="middle"
-              >{node.label}{#if showValues}
-                ({format(node.value)}){/if}</text
+              >{truncateLabel(
+                showValues ? `${node.label} (${format(node.value)})` : node.label,
+                node.column
+              )}<title>{showValues ? `${node.label} (${format(node.value)})` : node.label}</title
+              ></text
             >
           {/if}
         {/each}

package/dist/SankeyChart/properties.d.ts

@@ -44,6 +44,7 @@ export type OptionalSankeyChartProperties = {
     showValues?: boolean;
     showLabels?: boolean;
     aspectRatio?: number;
+    maxHeight?: number;
     valueFormat?: (value: number) => string;
     tooltipSnippet?: Snippet<[SankeyTooltipContext]>;
     empty?: Snippet;

package/dist/Select/Select.svelte

@@ -516,7 +516,7 @@
     padding: var(--select-trigger-padding, 8px 12px);
     background: var(--select-trigger-background, #ffffff);
     border: var(--select-trigger-border, 1px solid #cccccc);
-    border-radius: var(--select-trigger-border-radius, 6px);
+    border-radius: var(--select-trigger-border-radius, var(--radius, 4px));
     cursor: pointer;
     outline: none;
     -webkit-tap-highlight-color: transparent;
@@ -603,7 +603,7 @@
     margin-top: var(--select-dropdown-gap, 4px);
     background: var(--select-dropdown-background, #ffffff);
     border: var(--select-dropdown-border, 1px solid #cccccc);
-    border-radius: var(--select-dropdown-border-radius, 6px);
+    border-radius: var(--select-dropdown-border-radius, var(--radius, 4px));
     box-shadow: var(--select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
     max-height: var(--select-dropdown-max-height, 200px);
     overflow-y: auto;
@@ -659,7 +659,7 @@
     width: var(--select-option-indicator-size, 18px);
     height: var(--select-option-indicator-size, 18px);
     border: var(--select-option-indicator-border, 2px solid #757575);
-    border-radius: var(--select-option-indicator-border-radius, 3px);
+    border-radius: var(--select-option-indicator-border-radius, var(--radius, 4px));
     background-color: var(--select-option-indicator-background, transparent);
     color: var(--select-option-indicator-color, currentColor);
     transition:

package/dist/Sheet/Sheet.svelte

@@ -248,7 +248,7 @@
     --button-width: var(--sheet-close-button-size, 32px);
     --button-height: var(--sheet-close-button-size, 32px);
     --button-border: none;
-    --button-border-radius: var(--sheet-close-button-border-radius, 4px);
+    --button-border-radius: var(--sheet-close-button-border-radius, var(--radius, 4px));
     --button-color: var(--sheet-close-button-background, transparent);
     --button-text-color: var(--sheet-close-button-color, #666666);
     --button-font-size: var(--sheet-close-button-font-size, 16px);

package/dist/Shimmer/Shimmer.svelte

@@ -10,7 +10,7 @@
   .shimmer {
     width: var(--shimmer-width, 100%);
     height: var(--shimmer-height, 16px);
-    border-radius: var(--shimmer-border-radius, 4px);
+    border-radius: var(--shimmer-border-radius, var(--radius, 4px));
     background-color: var(--shimmer-background, #e0e0e0);
     opacity: var(--shimmer-opacity, 1);
     overflow: hidden;

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.2",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",