@juspay/svelte-ui-components 2.80.1 → 2.80.3

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

@@ -4,10 +4,20 @@
 
   let {
     text,
+    variant = 'primary',
+    size = 'md',
+    iconOnly = false,
+    fullWidth = false,
+    href,
+    target,
+    rel,
+    loading = false,
+    allowHtml = false,
     enable = true,
     disabled = false,
     showLoader = false,
     loaderType,
+    showProgressBar = $bindable(false),
     type = 'button',
     testId,
     ariaLabel,
@@ -22,30 +32,46 @@
     onmouseleave,
     ontouchstart,
     ontouchend,
-    showProgressBar = $bindable(false),
     icon,
     children,
     classes
   }: ButtonProperties = $props();
 
-  let isDisabled = $derived(!enable || disabled || showLoader);
+  // `loading` and the legacy Circular loaderType both render the spinner and disable the button.
+  let showCircularLoader = $derived(loading || (showLoader && loaderType === 'Circular'));
+  // The legacy ProgressBar loader stays clickable until the first click starts the bar, then
+  // it disables (the documented flow). So it must NOT count toward "disabled" before it starts.
+  let isProgressBarLoader = $derived(showLoader && loaderType === 'ProgressBar');
+  let isBusy = $derived(showCircularLoader || showProgressBar);
+  let isDisabled = $derived(disabled || !enable || showCircularLoader || showProgressBar);
+  let resolvedRel = $derived(rel ?? (target === '_blank' ? 'noopener noreferrer' : null));
 
   function handleButtonClick(event: MouseEvent): void {
-    if (showProgressBar) {
+    if (isDisabled) {
+      // Anchors have no native disabled state — block navigation/handler explicitly.
+      if (href) {
+        event.preventDefault();
+      }
       return;
     }
     onclick?.(event);
-    if (showLoader && loaderType === 'ProgressBar') {
+    if (isProgressBarLoader) {
       showProgressBar = true;
     }
   }
 </script>
 
-<div class="button-container {classes ?? ''}">
+<div
+  class="button-container variant-{variant} size-{size} {classes ?? ''}"
+  class:icon-only={iconOnly}
+  class:full-width={fullWidth}
+>
   {#if showProgressBar}
     <div class="button-progress-bar"></div>
   {/if}
-  <button
+  <svelte:element
+    this={href ? 'a' : 'button'}
+    class="button-el"
     class:disabled={isDisabled}
     onclick={handleButtonClick}
     {onkeydown}
@@ -55,28 +81,38 @@
     {onmouseleave}
     {ontouchstart}
     {ontouchend}
-    disabled={isDisabled}
-    {type}
     data-pw={testId}
-    aria-label={ariaLabel}
-    aria-expanded={ariaExpanded}
-    aria-selected={ariaSelected}
-    {role}
+    role={role ?? null}
+    aria-label={ariaLabel ?? null}
+    aria-expanded={ariaExpanded ?? null}
+    aria-selected={ariaSelected ?? null}
+    aria-busy={isBusy || null}
+    type={href ? null : type}
+    disabled={href ? null : isDisabled}
+    href={href ? (isDisabled ? null : href) : null}
+    target={href ? target : null}
+    rel={href ? resolvedRel : null}
+    aria-disabled={href && isDisabled ? 'true' : null}
+    tabindex={href && isDisabled ? -1 : null}
   >
-    {#if showLoader && loaderType === 'Circular'}
+    {#if showCircularLoader}
       <div class="button-loader"><Loader /></div>
     {/if}
     {#if typeof icon === 'function'}
       <div class="button-icon">{@render icon()}</div>
     {/if}
     {#if typeof text === 'string' && text.length > 0}
-      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-      <div class="button-text">{@html text}</div>
+      {#if allowHtml}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        <div class="button-text">{@html text}</div>
+      {:else}
+        <div class="button-text">{text}</div>
+      {/if}
     {/if}
     {#if typeof children === 'function'}
       {@render children()}
     {/if}
-  </button>
+  </svelte:element>
 </div>
 
 <style>
@@ -84,23 +120,92 @@
     position: relative;
     width: var(--button-width, fit-content);
   }
-  button {
+
+  /* ---- Variant defaults (set the internal --_btn-* layer; explicit --button-* always wins) ---- */
+  .variant-primary {
+    --_btn-color: #3a4550;
+    --_btn-text-color: #ffffff;
+    --_btn-border: none;
+  }
+
+  .variant-secondary {
+    --_btn-color: transparent;
+    --_btn-text-color: #3a4550;
+    --_btn-border: 1px solid #cbd5e1;
+    --_btn-hover-color: #f1f5f9;
+    --_btn-hover-text-color: #3a4550;
+    --_btn-hover-border: 1px solid #cbd5e1;
+  }
+
+  .variant-ghost {
+    --_btn-color: transparent;
+    --_btn-text-color: #3a4550;
+    --_btn-border: none;
+    --_btn-hover-color: #f1f5f9;
+    --_btn-hover-text-color: #3a4550;
+    --_btn-hover-border: none;
+  }
+
+  .variant-destructive {
+    --_btn-color: #e7000b;
+    --_btn-text-color: #ffffff;
+    --_btn-border: none;
+    --_btn-hover-color: #c10007;
+    --_btn-hover-text-color: #ffffff;
+    --_btn-hover-border: none;
+  }
+
+  /* ---- Size defaults (md reproduces the legacy 16px padding / 14px font) ---- */
+  .size-sm {
+    --_btn-padding: 8px 12px;
+    --_btn-font-size: 13px;
+  }
+
+  .size-md {
+    --_btn-padding: 16px;
+    --_btn-font-size: 14px;
+  }
+
+  .size-lg {
+    --_btn-padding: 20px 28px;
+    --_btn-font-size: 16px;
+  }
+
+  .icon-only {
+    --_btn-padding: 8px;
+  }
+
+  .icon-only.size-sm {
+    --_btn-padding: 6px;
+  }
+
+  .icon-only.size-lg {
+    --_btn-padding: 12px;
+  }
+
+  .full-width {
+    --button-width: 100%;
+  }
+
+  .button-el {
     max-height: var(--button-max-height);
     max-width: var(--button-max-width);
     min-width: var(--button-min-width);
     font-family: var(--button-font-family);
     font-weight: var(--button-font-weight, 500);
-    font-size: var(--button-font-size, 14px);
-    background-color: var(--button-color, #3a4550);
-    color: var(--button-text-color, white);
+    font-size: var(--button-font-size, var(--_btn-font-size, 14px));
+    background-color: var(--button-color, var(--_btn-color, #3a4550));
+    color: var(--button-text-color, var(--_btn-text-color, white));
     height: var(--button-height, fit-content);
-    padding: var(--button-padding, 16px);
+    padding: var(--button-padding, var(--_btn-padding, 16px));
     margin: var(--button-margin);
-    border-radius: var(--button-border-radius, 0px);
+    border-radius: var(--button-border-radius, var(--radius, 6px));
     width: var(--button-width, fit-content);
     cursor: var(--cursor, pointer);
     opacity: var(--opacity, 1);
-    border: var(--button-border, none);
+    border: var(--button-border, var(--_btn-border, none));
+    box-sizing: border-box;
+    text-decoration: none;
     display: flex;
     justify-content: var(--button-justify-content, center);
     align-items: center;
@@ -110,14 +215,16 @@
     box-shadow: var(--button-box-shadow, none);
   }
 
-  .disabled {
+  .button-el.disabled,
+  .button-el:disabled {
     cursor: var(--disabled-cursor, not-allowed);
     opacity: var(--disabled-opacity, 0.4);
-    color: var(--disabled-text-color, var(--button-text-color, white));
+    color: var(--disabled-text-color, var(--button-text-color, var(--_btn-text-color, white)));
     font-size: var(--disabled-font-size);
     font-weight: var(--disabled-font-weight);
-    border: var(--disabled-border);
-    background: var(--disabled-background-color, var(--button-color, #3a4550));
+    /* Preserve the variant border when disabled so secondary (bordered) stays distinct from ghost. */
+    border: var(--disabled-border, var(--button-border, var(--_btn-border, none)));
+    background: var(--disabled-background-color, var(--button-color, var(--_btn-color, #3a4550)));
     box-shadow: var(
       --button-disabled-box-shadow,
       var(--disabled-box-shadow, var(--button-box-shadow, none))
@@ -138,21 +245,30 @@
     display: var(--button-text-display);
   }
 
-  button:hover {
-    background: var(--button-hover-color, var(--button-color, #3a4550));
-    color: var(--button-hover-text-color, var(--button-text-color, white));
-    border: var(--button-hover-border, var(--button-border, none));
+  .button-el:hover:not(.disabled) {
+    background: var(
+      --button-hover-color,
+      var(--_btn-hover-color, var(--button-color, var(--_btn-color, #3a4550)))
+    );
+    color: var(
+      --button-hover-text-color,
+      var(--_btn-hover-text-color, var(--button-text-color, var(--_btn-text-color, white)))
+    );
+    border: var(
+      --button-hover-border,
+      var(--_btn-hover-border, var(--button-border, var(--_btn-border, none)))
+    );
     transform: var(--button-hover-transform);
     box-shadow: var(--button-hover-box-shadow, var(--button-box-shadow, none));
   }
 
-  button:active {
+  .button-el:active:not(.disabled) {
     transform: var(--button-active-transform);
-    background: var(--button-active-background, var(--button-color, #3a4550));
+    background: var(--button-active-background, var(--button-color, var(--_btn-color, #3a4550)));
     box-shadow: var(--button-active-box-shadow, var(--button-box-shadow, none));
   }
 
-  button:focus-visible {
+  .button-el:focus-visible {
     box-shadow: var(--button-focus-visible-box-shadow, var(--button-box-shadow, none));
   }
 

package/dist/Button/properties.d.ts

@@ -1,12 +1,51 @@
 import type { Snippet } from 'svelte';
 export type LoaderType = 'Circular' | 'ProgressBar';
+/** Visual style of the button. Maps to a built-in palette via `--button-*` variables. */
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
+/** Size preset controlling padding/height/font-size. */
+export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonProperties = OptionalButtonProperties & ButtonEventProperties;
 export type OptionalButtonProperties = {
     text?: string;
+    /**
+     * Visual style: `primary` (default, filled), `secondary` (outlined), `ghost`
+     * (transparent), `destructive` (danger). Each maps to the `--button-*` variables, so an
+     * explicit `--button-color` / `classes` override always wins over the variant default.
+     */
+    variant?: ButtonVariant;
+    /** Size preset: `sm` / `md` (default) / `lg`. Controls padding, height, and font size. */
+    size?: ButtonSize;
+    /** Square padding for an icon-only button. Pair with `ariaLabel` for accessibility. */
+    iconOnly?: boolean;
+    /** Stretch the button to the full width of its container. */
+    fullWidth?: boolean;
+    /**
+     * Render the button as an `<a>` styled identically. Use for button-styled links/navigation.
+     * When set, `type` is ignored; a disabled link is rendered inert via `aria-disabled`.
+     */
+    href?: string;
+    /** Anchor target (only with `href`), e.g. `_blank`. */
+    target?: string;
+    /** Anchor rel (only with `href`). Defaults to `noopener noreferrer` when `target="_blank"`. */
+    rel?: string;
+    /**
+     * Show a loading state: renders the circular loader, sets `aria-busy`, and disables the
+     * button. Preferred over the legacy `showLoader`/`loaderType` pair.
+     */
+    loading?: boolean;
+    /**
+     * Render the `text` as raw HTML. Defaults to `false` (safe plain-text rendering). Only enable
+     * for trusted, non-user-derived markup.
+     */
+    allowHtml?: boolean;
+    /** @deprecated Use `disabled` instead. Retained for backward compatibility. */
     enable?: boolean;
-    showProgressBar?: boolean;
+    /** @deprecated Prefer `loading`. Shows a loader; pair with `loaderType`. */
     showLoader?: boolean;
+    /** @deprecated Used with `showLoader`. `'Circular'` or `'ProgressBar'`. */
     loaderType?: LoaderType;
+    /** @deprecated Drives the progress-bar animation when `loaderType='ProgressBar'`. */
+    showProgressBar?: boolean;
     type?: 'submit' | 'reset' | 'button';
     testId?: string;
     icon?: Snippet;

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;