@juspay/svelte-ui-components 4.13.0 → 4.15.0

package/dist/PieChart/PieChart.svelte

@@ -40,6 +40,9 @@
     classes,
     semiCircle = false,
     legendShowValues = false,
+    legendPosition = 'bottom',
+    legendMaxItems,
+    onlegendmore,
     percentDecimals = 0,
     onchartready,
     highlightedIndex = null,
@@ -49,6 +52,7 @@
 
   // ── State ──────────────────────────────────────────────────────
 
+  let legendExpanded = $state(false);
   let containerEl: HTMLDivElement | null = $state(null);
   let chartWidth = $state(0);
   let chartHeight = $state(0);
@@ -153,6 +157,57 @@
     });
   });
 
+  /* A cap only counts when it actually hides something: a legendMaxItems of 5
+     over 5 rows must render no control, since a control that reveals nothing
+     is worse than none. Non-positive and non-finite values are ignored rather
+     than clamping the list to empty -- a plain-JS or web-component caller can
+     hand this anything. */
+  const legendCap = $derived(
+    typeof legendMaxItems === 'number' && Number.isFinite(legendMaxItems) && legendMaxItems > 0
+      ? Math.max(1, Math.floor(legendMaxItems))
+      : null
+  );
+  /* A changed list or cap starts a new collapsed view, not a stale expansion.
+     This has to be an effect rather than a derived key: collapsing depends on
+     the TRANSITION, not on the current values. A list that shrinks below the
+     cap and then returns to its former length must stay collapsed, and a key
+     built from (cap, length) would match its earlier self and silently
+     re-expand -- which is what the regression tests here caught when this was
+     written that way. The two values are passed as ordinary arguments so the
+     dependencies are real reads rather than `void` expressions. */
+  const collapseLegend = (_cap: number | null, _rowCount: number): void => {
+    legendExpanded = false;
+  };
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    collapseLegend(legendCap, data.length);
+  });
+  const legendHiddenCount = $derived(legendCap === null ? 0 : Math.max(0, data.length - legendCap));
+  const legendRows = $derived(
+    legendCap === null || legendExpanded ? data : data.slice(0, legendCap)
+  );
+
+  /* Excludes the empty state: with no rows there is no legend column to sit
+     beside, and turning the root into a flex row would make the empty message
+     a flex item rather than the full-width block it is documented to be. */
+  const legendBesideChart = $derived(
+    !isEmpty && showLegend && legendShowValues && legendPosition === 'right'
+  );
+
+  const instanceId = $props.id();
+  const legendListId = `pie-legend-${instanceId}`;
+
+  const handleLegendMore = (): void => {
+    /* A consumer opening their own modal must not also get the list expanding
+       underneath it, so the callback replaces the built-in behaviour rather
+       than firing alongside it. */
+    if (typeof onlegendmore === 'function') {
+      onlegendmore();
+      return;
+    }
+    legendExpanded = !legendExpanded;
+  };
+
   let legendItems = $derived<LegendItem[]>(
     data.map((d, i) => ({ label: d.label, color: d.color ?? getColor(i) }))
   );
@@ -290,6 +345,7 @@
 
 <div
   class="pie-chart {classes ?? ''}"
+  class:legend-right={legendBesideChart}
   bind:this={containerEl}
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
@@ -358,17 +414,30 @@
     {/if}
 
     {#if showLegend && legendShowValues}
-      <ul class="pie-legend-values">
-        {#each data as d, i (i)}
-          <li class="pie-legend-row">
-            <span class="pie-legend-swatch" style="background: {d.color ?? getColor(i)}"></span>
-            <span class="pie-legend-label">{d.label}</span>
-            <span class="pie-legend-value">
-              {format(d.value)}&nbsp;{pctFormat(d.value)}
-            </span>
-          </li>
-        {/each}
-      </ul>
+      <div class="pie-legend-column">
+        <ul class="pie-legend-values" id={legendListId}>
+          {#each legendRows as d, i (i)}
+            <li class="pie-legend-row">
+              <span class="pie-legend-swatch" style="background: {d.color ?? getColor(i)}"></span>
+              <span class="pie-legend-label">{d.label}</span>
+              <span class="pie-legend-value">
+                {format(d.value)}&nbsp;{pctFormat(d.value)}
+              </span>
+            </li>
+          {/each}
+        </ul>
+        {#if legendHiddenCount > 0}
+          <button
+            type="button"
+            class="pie-legend-more"
+            aria-expanded={typeof onlegendmore === 'function' ? null : legendExpanded}
+            {...typeof onlegendmore === 'function' ? {} : { 'aria-controls': legendListId }}
+            onclick={handleLegendMore}
+          >
+            {legendExpanded ? 'Show less' : `+${legendHiddenCount} more`}
+          </button>
+        {/if}
+      </div>
     {/if}
 
     {#if typeof tooltipSnippet === 'function' && hoveredIndex !== null && data[hoveredIndex]}
@@ -469,4 +538,60 @@
     min-width: var(--piechart-legend-value-min-width, 60px);
     text-align: right;
   }
+
+  /* The column wrapper is present in both placements so the markup does not
+     fork; as a plain block it changes nothing about the default below-chart
+     rendering. */
+  .pie-legend-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Only the values legend moves beside the chart -- the plain top legend is
+     mutually exclusive with it, and the delta badge and tooltip are both
+     absolutely positioned, so they stay out of this flex row entirely. */
+  .pie-chart.legend-right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--piechart-legend-column-gap, 16px);
+  }
+
+  .pie-chart.legend-right :global(.chart-container) {
+    /* flex-basis 0 rather than auto: the container carries width:100%, which
+       as a flex item would otherwise claim the whole row and squeeze the
+       legend to nothing. */
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .pie-chart.legend-right .pie-legend-column {
+    flex: 0 0 auto;
+    max-width: var(--piechart-legend-column-max-width, 50%);
+  }
+
+  .pie-chart.legend-right .pie-legend-values {
+    padding: var(--piechart-legend-column-padding, 0);
+  }
+
+  .pie-legend-more {
+    align-self: flex-start;
+    margin-top: var(--piechart-legend-more-margin-top, 8px);
+    padding: var(--piechart-legend-more-padding, 2px 4px);
+    border: none;
+    background: none;
+    cursor: var(--cursor, pointer);
+    font-size: var(--piechart-legend-more-font-size, 12px);
+    font-family: inherit;
+    color: var(--piechart-legend-more-color, #2563eb);
+  }
+
+  .pie-legend-more:hover {
+    text-decoration: underline;
+  }
+
+  .pie-legend-more:focus-visible {
+    outline: var(--piechart-legend-more-focus-outline, 2px solid currentColor);
+    outline-offset: 2px;
+  }
 </style>

package/dist/PieChart/properties.d.ts

@@ -5,6 +5,8 @@ export type PieChartSlice = {
     value: number;
     color?: string;
 };
+/** Placement of the `legendShowValues` list. See `legendPosition`. */
+export type PieChartLegendPosition = 'bottom' | 'right';
 export type PieChartProperties = MandatoryPieChartProperties & OptionalPieChartProperties & PieChartEventProperties;
 export type MandatoryPieChartProperties = {
     data: PieChartSlice[];
@@ -33,6 +35,28 @@ export type OptionalPieChartProperties = {
     classes?: string;
     semiCircle?: boolean;
     legendShowValues?: boolean;
+    /**
+     * Where the `legendShowValues` list sits relative to the chart. `'bottom'`
+     * (the default) keeps today's below-chart placement; `'right'` renders it as
+     * a column beside the chart, which is the shape a donut legend usually
+     * wants once the labels carry values. Only affects the values legend —
+     * `showLegend` without `legendShowValues` still renders the plain top
+     * legend.
+     */
+    legendPosition?: PieChartLegendPosition;
+    /**
+     * Show at most this many legend rows, followed by a `+N more` control. Omit
+     * it (the default) to show every row with no control at all. A cap that is
+     * not exceeded renders no control either, since it would do nothing.
+     */
+    legendMaxItems?: number;
+    /**
+     * Called when the `+N more` control is activated. Providing it SUPPRESSES
+     * the built-in in-place expansion, so a consumer opening their own modal or
+     * drawer does not have the legend expand underneath it as well. Without it,
+     * the control toggles the hidden rows in place.
+     */
+    onlegendmore?: () => void;
     percentDecimals?: number;
     /**
      * Called once on mount with the imperative highlight API. Pass the returned

package/dist/Sheet/Sheet.svelte

@@ -99,16 +99,26 @@
     }
   }
 
-  function scrollLockAction(_node: HTMLElement) {
+  function scrollLockAction(node: HTMLElement) {
+    const previousFocus = document.activeElement;
+    let active = true;
     lockBodyScroll();
     tick().then(() => {
-      if (sheetPanel !== null) {
+      if (active && sheetPanel !== null) {
         sheetPanel.focus();
       }
     });
     return {
       destroy() {
+        active = false;
         unlockBodyScroll();
+        if (
+          previousFocus instanceof HTMLElement &&
+          previousFocus.isConnected &&
+          (document.activeElement === document.body || node.contains(document.activeElement))
+        ) {
+          previousFocus.focus();
+        }
       }
     };
   }
@@ -295,22 +305,45 @@
     border-left: var(--sheet-border, none);
   }
 
+  /* Top/bottom stretch edge to edge by default, exactly as before: --sheet-
+     band-width is `auto`, so `margin-inline: auto` has nothing to distribute
+     and the panel still spans --sheet-left to --sheet-right.
+
+     Setting --sheet-band-width (or --sheet-band-max-width) caps it, and the
+     auto margins then centre it between those same two insets -- which is the
+     shape a bottom "launch" sheet wants above phone widths, and previously
+     had to be faked with hand-computed calc() offsets.
+
+     Deliberately NOT --sheet-width/--sheet-max-width, even though the issue
+     proposed those names. Those already mean "the width of a left/right
+     panel", so a consumer who themes them for their side sheets would find
+     their bottom sheets silently reshaped by an upgrade. side="center" avoids
+     the same collision the same way, with its own --sheet-center-* tokens. */
   .sheet-panel.top,
   .sheet-panel.bottom {
     left: var(--sheet-left, 0);
     right: var(--sheet-right, 0);
     height: var(--sheet-height, 300px);
     max-height: var(--sheet-max-height, 100vh);
+    width: var(--sheet-band-width, auto);
+    max-width: var(--sheet-band-max-width, none);
+    box-sizing: var(--sheet-band-box-sizing, content-box);
+    margin-inline: auto;
+    border: var(--sheet-band-border, none);
   }
 
+  /* A capped panel is a floating card and needs all four edges; an
+     edge-to-edge one deliberately draws only the edge it enters from. The
+     entering edge falls back through --sheet-border so an existing theme that
+     sets only that keeps rendering exactly as it did. */
   .sheet-panel.top {
     top: var(--sheet-top, 0);
-    border-bottom: var(--sheet-border, none);
+    border-bottom: var(--sheet-band-border, var(--sheet-border, none));
   }
 
   .sheet-panel.bottom {
     bottom: var(--sheet-bottom, 0);
-    border-top: var(--sheet-border, none);
+    border-top: var(--sheet-band-border, var(--sheet-border, none));
   }
 
   /* `side="center"` is a fixed-size floating dialog, not an edge-anchored

package/dist-wc/index.js

@@ -17676,7 +17676,7 @@ customElements.define("sui-select", create_custom_element(Select_wc, {
 //#region src/lib/Sheet/Sheet.svelte
 var root$31 = /* @__PURE__ */ from_html("<span class=\"sheet-title svelte-1dln6bq\"> </span>"), root_1$28 = /* @__PURE__ */ from_html("<div class=\"sheet-close-button svelte-1dln6bq\"><!></div>"), root_2$22 = /* @__PURE__ */ from_html("<div class=\"sheet-header svelte-1dln6bq\"><!> <!></div>"), root_3$20 = /* @__PURE__ */ from_html("<div class=\"sheet-footer svelte-1dln6bq\"><!></div>"), root_4$16 = /* @__PURE__ */ from_html("<div tabindex=\"-1\"><div role=\"dialog\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"sheet-content svelte-1dln6bq\"><!></div> <!></div></div>"), $$css$33 = {
 	hash: "svelte-1dln6bq",
-	code: ".sheet-overlay.svelte-1dln6bq {position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--sheet-overlay-z-index, 15);-webkit-tap-highlight-color:transparent;}.overlay-visible.svelte-1dln6bq {background-color:var(--sheet-overlay-background, #00000066);}.overlay-invisible.svelte-1dln6bq {background-color:transparent;}.overlay-interactive.svelte-1dln6bq {pointer-events:auto;}.overlay-noninteractive.svelte-1dln6bq {pointer-events:none;}.sheet-panel.svelte-1dln6bq {position:fixed;display:flex;flex-direction:column;background-color:var(--sheet-background, #ffffff);box-shadow:var(--sheet-box-shadow, -2px 0 8px rgba(0, 0, 0, 0.15));z-index:var(--sheet-z-index, 16);pointer-events:auto;outline:none;}\n\n  /* The panel itself is the initial focus target on open (scrollLockAction\n     focuses it directly, and it's the Tab-trap's own boundary), so removing\n     its outline unconditionally left a keyboard user with no visible sign\n     focus had moved into the sheet at all -- particularly visible on the\n     \"Raw\" variant, which has no focusable child for focus to land on\n     instead. :focus-visible restores a ring precisely when the browser\n     judges it's from keyboard/programmatic focus rather than a mouse click,\n     so clicking the trigger still shows nothing new. outline-offset is\n     negative (inset) rather than the usual positive offset other components\n     in this library use, because left/right/top/bottom panels sit flush\n     against a viewport edge -- a positive offset would clip there. */.sheet-panel.svelte-1dln6bq:focus-visible {outline:var(--sheet-panel-focus-outline, 2px solid #2563eb);outline-offset:var(--sheet-panel-focus-outline-offset, -2px);}\n\n  /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded\n     edge-to-edge values below, so an unconfigured Sheet renders unchanged.\n     Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:\n     auto to size to content) turns the panel from an edge-to-edge slide-in into\n     an anchored floating panel, without needing a different component. */.sheet-panel.left.svelte-1dln6bq,\n  .sheet-panel.right.svelte-1dln6bq {top:var(--sheet-top, 0);bottom:var(--sheet-bottom, 0);width:var(--sheet-width, 400px);max-width:var(--sheet-max-width, 100vw);}.sheet-panel.left.svelte-1dln6bq {left:var(--sheet-left, 0);border-right:var(--sheet-border, none);}.sheet-panel.right.svelte-1dln6bq {right:var(--sheet-right, 0);border-left:var(--sheet-border, none);}.sheet-panel.top.svelte-1dln6bq,\n  .sheet-panel.bottom.svelte-1dln6bq {left:var(--sheet-left, 0);right:var(--sheet-right, 0);height:var(--sheet-height, 300px);max-height:var(--sheet-max-height, 100vh);}.sheet-panel.top.svelte-1dln6bq {top:var(--sheet-top, 0);border-bottom:var(--sheet-border, none);}.sheet-panel.bottom.svelte-1dln6bq {bottom:var(--sheet-bottom, 0);border-top:var(--sheet-border, none);}\n\n  /* `side=\"center\"` is a fixed-size floating dialog, not an edge-anchored\n     panel: no top/bottom/left/right offset, sized by its own tokens rather\n     than --sheet-width/--sheet-height (so an existing left/right/top/bottom\n     theme is untouched by adding this variant), and centered with a\n     transform instead of stretching to an edge. */.sheet-panel.center.svelte-1dln6bq {top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sheet-center-width, 480px);max-width:var(--sheet-center-max-width, calc(100vw - 32px));max-height:var(--sheet-center-max-height, 90vh);}.sheet-header.svelte-1dln6bq {display:flex;align-items:center;padding:var(--sheet-header-padding, 16px 20px);background-color:var(--sheet-header-background, inherit);border-bottom:var(--sheet-header-border-bottom, 1px solid #e0e0e0);flex-shrink:0;}.sheet-title.svelte-1dln6bq {flex:1;font-size:var(--sheet-title-font-size, 18px);font-weight:var(--sheet-title-font-weight, 600);font-family:var(--sheet-title-font-family, inherit);color:var(--sheet-title-color, #1a1a1a);line-height:var(--sheet-title-line-height, 1.4);}.sheet-close-button.svelte-1dln6bq {--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, 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);--button-padding: 0;--button-hover-color: var(--sheet-close-button-hover-background, #f0f0f0);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.sheet-content.svelte-1dln6bq {flex:1;overflow-y:var(--sheet-content-overflow-y, auto);padding:var(--sheet-content-padding, 20px);scrollbar-width:var(--sheet-scrollbar-width, none);}.sheet-content.svelte-1dln6bq::-webkit-scrollbar {display:none;}.sheet-footer.svelte-1dln6bq {padding:var(--sheet-footer-padding, 16px 20px);background-color:var(--sheet-footer-background, inherit);border-top:var(--sheet-footer-border-top, 1px solid #e0e0e0);flex-shrink:0;}"
+	code: ".sheet-overlay.svelte-1dln6bq {position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--sheet-overlay-z-index, 15);-webkit-tap-highlight-color:transparent;}.overlay-visible.svelte-1dln6bq {background-color:var(--sheet-overlay-background, #00000066);}.overlay-invisible.svelte-1dln6bq {background-color:transparent;}.overlay-interactive.svelte-1dln6bq {pointer-events:auto;}.overlay-noninteractive.svelte-1dln6bq {pointer-events:none;}.sheet-panel.svelte-1dln6bq {position:fixed;display:flex;flex-direction:column;background-color:var(--sheet-background, #ffffff);box-shadow:var(--sheet-box-shadow, -2px 0 8px rgba(0, 0, 0, 0.15));z-index:var(--sheet-z-index, 16);pointer-events:auto;outline:none;}\n\n  /* The panel itself is the initial focus target on open (scrollLockAction\n     focuses it directly, and it's the Tab-trap's own boundary), so removing\n     its outline unconditionally left a keyboard user with no visible sign\n     focus had moved into the sheet at all -- particularly visible on the\n     \"Raw\" variant, which has no focusable child for focus to land on\n     instead. :focus-visible restores a ring precisely when the browser\n     judges it's from keyboard/programmatic focus rather than a mouse click,\n     so clicking the trigger still shows nothing new. outline-offset is\n     negative (inset) rather than the usual positive offset other components\n     in this library use, because left/right/top/bottom panels sit flush\n     against a viewport edge -- a positive offset would clip there. */.sheet-panel.svelte-1dln6bq:focus-visible {outline:var(--sheet-panel-focus-outline, 2px solid #2563eb);outline-offset:var(--sheet-panel-focus-outline-offset, -2px);}\n\n  /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded\n     edge-to-edge values below, so an unconfigured Sheet renders unchanged.\n     Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:\n     auto to size to content) turns the panel from an edge-to-edge slide-in into\n     an anchored floating panel, without needing a different component. */.sheet-panel.left.svelte-1dln6bq,\n  .sheet-panel.right.svelte-1dln6bq {top:var(--sheet-top, 0);bottom:var(--sheet-bottom, 0);width:var(--sheet-width, 400px);max-width:var(--sheet-max-width, 100vw);}.sheet-panel.left.svelte-1dln6bq {left:var(--sheet-left, 0);border-right:var(--sheet-border, none);}.sheet-panel.right.svelte-1dln6bq {right:var(--sheet-right, 0);border-left:var(--sheet-border, none);}\n\n  /* Top/bottom stretch edge to edge by default, exactly as before: --sheet-\n     band-width is `auto`, so `margin-inline: auto` has nothing to distribute\n     and the panel still spans --sheet-left to --sheet-right.\n\n     Setting --sheet-band-width (or --sheet-band-max-width) caps it, and the\n     auto margins then centre it between those same two insets -- which is the\n     shape a bottom \"launch\" sheet wants above phone widths, and previously\n     had to be faked with hand-computed calc() offsets.\n\n     Deliberately NOT --sheet-width/--sheet-max-width, even though the issue\n     proposed those names. Those already mean \"the width of a left/right\n     panel\", so a consumer who themes them for their side sheets would find\n     their bottom sheets silently reshaped by an upgrade. side=\"center\" avoids\n     the same collision the same way, with its own --sheet-center-* tokens. */.sheet-panel.top.svelte-1dln6bq,\n  .sheet-panel.bottom.svelte-1dln6bq {left:var(--sheet-left, 0);right:var(--sheet-right, 0);height:var(--sheet-height, 300px);max-height:var(--sheet-max-height, 100vh);width:var(--sheet-band-width, auto);max-width:var(--sheet-band-max-width, none);box-sizing:var(--sheet-band-box-sizing, content-box);margin-inline:auto;border:var(--sheet-band-border, none);}\n\n  /* A capped panel is a floating card and needs all four edges; an\n     edge-to-edge one deliberately draws only the edge it enters from. The\n     entering edge falls back through --sheet-border so an existing theme that\n     sets only that keeps rendering exactly as it did. */.sheet-panel.top.svelte-1dln6bq {top:var(--sheet-top, 0);border-bottom:var(--sheet-band-border, var(--sheet-border, none));}.sheet-panel.bottom.svelte-1dln6bq {bottom:var(--sheet-bottom, 0);border-top:var(--sheet-band-border, var(--sheet-border, none));}\n\n  /* `side=\"center\"` is a fixed-size floating dialog, not an edge-anchored\n     panel: no top/bottom/left/right offset, sized by its own tokens rather\n     than --sheet-width/--sheet-height (so an existing left/right/top/bottom\n     theme is untouched by adding this variant), and centered with a\n     transform instead of stretching to an edge. */.sheet-panel.center.svelte-1dln6bq {top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sheet-center-width, 480px);max-width:var(--sheet-center-max-width, calc(100vw - 32px));max-height:var(--sheet-center-max-height, 90vh);}.sheet-header.svelte-1dln6bq {display:flex;align-items:center;padding:var(--sheet-header-padding, 16px 20px);background-color:var(--sheet-header-background, inherit);border-bottom:var(--sheet-header-border-bottom, 1px solid #e0e0e0);flex-shrink:0;}.sheet-title.svelte-1dln6bq {flex:1;font-size:var(--sheet-title-font-size, 18px);font-weight:var(--sheet-title-font-weight, 600);font-family:var(--sheet-title-font-family, inherit);color:var(--sheet-title-color, #1a1a1a);line-height:var(--sheet-title-line-height, 1.4);}.sheet-close-button.svelte-1dln6bq {--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, 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);--button-padding: 0;--button-hover-color: var(--sheet-close-button-hover-background, #f0f0f0);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.sheet-content.svelte-1dln6bq {flex:1;overflow-y:var(--sheet-content-overflow-y, auto);padding:var(--sheet-content-padding, 20px);scrollbar-width:var(--sheet-scrollbar-width, none);}.sheet-content.svelte-1dln6bq::-webkit-scrollbar {display:none;}.sheet-footer.svelte-1dln6bq {padding:var(--sheet-footer-padding, 16px 20px);background-color:var(--sheet-footer-background, inherit);border-top:var(--sheet-footer-border-top, 1px solid #e0e0e0);flex-shrink:0;}"
 };
 function Sheet(e, t) {
 	push(t, !0), append_styles$1(e, $$css$33);
@@ -17731,10 +17731,11 @@ function Sheet(e, t) {
 		}
 	}
 	function Re(e) {
+		let t = document.activeElement, n = !0;
 		return lockBodyScroll(), tick().then(() => {
-			get(te) !== null && get(te).focus();
+			n && get(te) !== null && get(te).focus();
 		}), { destroy() {
-			unlockBodyScroll();
+			n = !1, unlockBodyScroll(), t instanceof HTMLElement && t.isConnected && (document.activeElement === document.body || e.contains(document.activeElement)) && t.focus();
 		} };
 	}
 	function Ue() {

package/package.json

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