@juspay/svelte-ui-components 2.80.2 → 2.80.3

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, var(--radius, 4px));
+    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/DualAxisBarChart/DualAxisBarChart.svelte

@@ -30,6 +30,9 @@
     barRadius = 3,
     barPadding = 0.25,
     aspectRatio = 16 / 9,
+    minBarHeight = 2,
+    margin,
+    tooltipPortal = false,
     tooltipSnippet,
     onbarclick,
     testId,
@@ -44,6 +47,8 @@
   let hoveredCategoryIndex = $state<number | null>(null);
   let mouseX = $state(0);
   let mouseY = $state(0);
+  let mouseClientX = $state(0);
+  let mouseClientY = $state(0);
 
   // ── Formatters ─────────────────────────────────────────────────
 
@@ -53,7 +58,13 @@
   // ── Layout — wider right margin to accommodate right-axis labels ─
 
   const dims = $derived(
-    computeChartDimensions(chartWidth, chartHeight, { top: 24, right: 56, bottom: 40, left: 56 })
+    computeChartDimensions(chartWidth, chartHeight, {
+      top: 24,
+      right: 56,
+      bottom: 40,
+      left: 56,
+      ...margin
+    })
   );
 
   // ── Scales ─────────────────────────────────────────────────────
@@ -152,7 +163,7 @@
         const barX = bandStart + subIndex * subBandWidth + barGap;
         const valueY = scale(value);
         const barY = value >= 0 ? valueY : zeroY;
-        const barHeight = Math.max(2, Math.abs(valueY - zeroY));
+        const barHeight = Math.max(minBarHeight, Math.abs(valueY - zeroY));
 
         const path = roundedRectPath(barX, barY, barW, barHeight, barRadius, barRadius, 0, 0);
 
@@ -278,6 +289,22 @@
     const rect = containerEl.getBoundingClientRect();
     mouseX = event.clientX - rect.left;
     mouseY = event.clientY - rect.top;
+    mouseClientX = event.clientX;
+    mouseClientY = event.clientY;
+  };
+
+  /**
+   * Svelte action: relocates the tooltip layer to `document.body` so a `position:fixed`
+   * tooltip is never clipped by an `overflow`/scroll ancestor. Used only when
+   * `tooltipPortal` is set; `use:` actions never run during SSR.
+   */
+  const portalToBody = (node: HTMLElement) => {
+    document.body.appendChild(node);
+    return {
+      destroy: () => {
+        node.remove();
+      }
+    };
   };
 
   const handleCategoryEnter = (event: MouseEvent, catIdx: number) => {
@@ -439,12 +466,31 @@
     </ChartContainer>
 
     <!-- Tooltip -->
-    {#if typeof tooltipSnippet === 'function' && hoveredCategoryIndex !== null}
-      <div class="chart-tooltip-slot" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
-        {@render tooltipSnippet(buildTooltipContext(hoveredCategoryIndex))}
-      </div>
-    {:else}
-      <ChartTooltip data={tooltipData} {mouseX} {mouseY} />
+    {#if hoveredCategoryIndex !== null}
+      {#if tooltipPortal}
+        <!-- Portaled to <body> with fixed viewport coords so the tooltip is never
+             clipped by an overflow/scroll ancestor (e.g. a scrollable report sheet).
+             The inner elements keep their own +12/-12 offset relative to this layer. -->
+        <div
+          class="chart-tooltip-portal"
+          style="left: {mouseClientX}px; top: {mouseClientY}px;"
+          use:portalToBody
+        >
+          {#if typeof tooltipSnippet === 'function'}
+            <div class="chart-tooltip-slot" style="left: 12px; top: -12px;">
+              {@render tooltipSnippet(buildTooltipContext(hoveredCategoryIndex))}
+            </div>
+          {:else}
+            <ChartTooltip data={tooltipData} mouseX={0} mouseY={0} />
+          {/if}
+        </div>
+      {:else if typeof tooltipSnippet === 'function'}
+        <div class="chart-tooltip-slot" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
+          {@render tooltipSnippet(buildTooltipContext(hoveredCategoryIndex))}
+        </div>
+      {:else}
+        <ChartTooltip data={tooltipData} {mouseX} {mouseY} />
+      {/if}
     {/if}
   {:else}
     <div class="chart-empty">No data available.</div>
@@ -513,6 +559,12 @@
     pointer-events: none;
   }
 
+  .chart-tooltip-portal {
+    position: fixed;
+    z-index: var(--chart-tooltip-z-index, 10);
+    pointer-events: none;
+  }
+
   .chart-empty {
     padding: var(--chart-empty-padding, 32px 24px);
     color: var(--chart-empty-color, #9ca3af);

package/dist/DualAxisBarChart/properties.d.ts

@@ -95,6 +95,32 @@ export type OptionalDualAxisBarChartProperties = {
     testId?: string;
     /** Extra CSS class string on the root `<div>`. */
     classes?: string;
+    /**
+     * Minimum rendered bar height in pixels. The default `2` keeps very small non-zero
+     * values visible, but it also paints a 2px stub for genuine zeros — set `0` so an
+     * all-zero/dormant series renders nothing (letting the consumer detect it and show
+     * an empty state instead of a row of indistinguishable baseline stubs). Default `2`.
+     */
+    minBarHeight?: number;
+    /**
+     * Override the plot margins (px) reserved for axis titles and tick labels. Merged
+     * over the defaults `{ top: 24, right: 56, bottom: 40, left: 56 }`; widen `left`/`right`
+     * when long currency tick labels (e.g. `₹1,00,000`) would otherwise overlap the
+     * gridlines in a narrow container.
+     */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * Render the hover tooltip on `document.body` with `position: fixed` viewport
+     * coordinates instead of `position: absolute` inside the chart. Set `true` when the
+     * chart sits in an `overflow:auto`/scrollable container that would otherwise clip the
+     * tooltip. Default `false` (in-chart positioning, unchanged).
+     */
+    tooltipPortal?: boolean;
 };
 export type DualAxisBarChartEventProperties = {
     /**

package/package.json

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