@juspay/svelte-ui-components 4.12.0 → 4.14.0

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/Snippet/Snippet.svelte

@@ -3,7 +3,7 @@
   import type { SnippetProperties } from './properties';
   import Button from '../Button/Button.svelte';
   import copySvg from '../assets/copy.svg?raw';
-  import { createCopyResetTimer } from './copyResetTimer';
+  import { createCopyState } from './copyState.svelte';
 
   let {
     text,
@@ -17,29 +17,25 @@
     classes
   }: SnippetProperties = $props();
 
-  let copied = $state(false);
-
-  // The reset timer used to be a bare setTimeout with nothing clearing it: a
-  // second copy before the first one's timer fired left two timers racing to
-  // flip `copied`, and navigating away mid-flash left the timer armed against
-  // a destroyed component. `createCopyResetTimer` (unit-tested on its own in
-  // copyResetTimer.test.ts) guarantees only one timer is ever pending, and
-  // onDestroy guarantees it never outlives the component it targets.
-  const resetTimer = createCopyResetTimer();
-  onDestroy(resetTimer.cancel);
-
-  async function handleCopy() {
-    try {
-      await navigator.clipboard.writeText(text);
-      copied = true;
-      oncopy?.();
-      resetTimer.arm(() => {
-        copied = false;
-      }, copyResetMs);
-    } catch {
-      // Clipboard API unavailable (non-secure context, iframe restrictions)
+  // The whole copy affordance -- clipboard write, `copied` flag, the reset
+  // timer's single-pending guarantee from #530, and teardown -- lives in
+  // `createCopyState` so a consumer who wants the behaviour without this
+  // component's `<code>` box can have it (#574). Getters rather than plain
+  // values, because the factory reads its options at copy time and these are
+  // props: passing them by value would freeze whatever they were at mount.
+  const copyState = createCopyState({
+    get copyResetMs() {
+      return copyResetMs;
+    },
+    get oncopy() {
+      return oncopy;
     }
-  }
+  });
+  onDestroy(copyState.destroy);
+
+  const handleCopy = (): void => {
+    void copyState.copy(text);
+  };
 </script>
 
 <div
@@ -53,9 +49,13 @@
   </code>
   {#if showCopyButton}
     <div class="snippet-copy">
-      <Button onclick={handleCopy} ariaLabel="Copy to clipboard">
-        {#if copied}
-          <span class="snippet-copied" aria-live="polite">{copiedLabel}</span>
+      <!-- The label is only supplied while the button shows an icon and has no
+           visible text of its own. Keeping it once the label swaps to
+           "Copied!" would leave a screen reader announcing "Copy to clipboard"
+           over the visible feedback (WCAG 2.5.3, Label in Name). -->
+      <Button onclick={handleCopy} {...copyState.copied ? {} : { ariaLabel: 'Copy to clipboard' }}>
+        {#if copyState.copied}
+          <span class="snippet-copied">{copiedLabel}</span>
         {:else if typeof copyIcon === 'function'}
           {@render copyIcon()}
         {:else}
@@ -64,6 +64,13 @@
         {/if}
       </Button>
     </div>
+    <!-- A live region has to be in the DOM *before* its text changes, or many
+         screen-reader/browser pairs never announce it. The visible label is
+         swapped inside the button, so the announcement lives here instead:
+         always rendered, outside the button, with only its text changing. -->
+    <span class="snippet-status" role="status" aria-live="polite"
+      >{copyState.copied ? copiedLabel : ''}</span
+    >
   {/if}
 </div>
 
@@ -132,6 +139,20 @@
     height: 100%;
   }
 
+  /* Announced, never shown: the visible "Copied!" is the label inside the
+     button, and repeating it on screen would read as a duplicate. */
+  .snippet-status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
   .snippet-copied {
     color: var(--snippet-copied-color, #4caf50);
     font-size: var(--snippet-copied-font-size, 12px);

package/dist/Snippet/copyState.svelte.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The copy-and-flash affordance behind `Snippet`, without its presentation.
+ *
+ * `Snippet` couples two separable things: this state machine — clipboard
+ * write, `copied` flag, reset timer, teardown — and a `<code>` box with a
+ * `$`-style prompt. A consumer who wants "copy this value" beside arbitrary
+ * content (a hostname in a settings row, a token, a URL) could take only the
+ * pair, so the affordance got hand-rolled outside the library instead. That
+ * is how the timer safety added in #530 failed to reach the surfaces most
+ * likely to need it: a duplicate has its own bare `setTimeout` and its own
+ * bugs.
+ *
+ * Extracted as a headless factory rather than a Svelte action because the
+ * caller has to *render* from `copied` — swapping a label for an icon — and
+ * an action can attach behaviour to an element but cannot hand state back to
+ * the template. The split follows `Tooltip/tooltip-action.ts`, which likewise
+ * keeps timing logic outside the component that uses it.
+ *
+ * Options are read at copy time, not captured at creation, so a caller with
+ * reactive values can pass getters:
+ *
+ * ```ts
+ * const state = createCopyState({
+ *   get copyResetMs() { return copyResetMs; },
+ *   get oncopy() { return oncopy; }
+ * });
+ * ```
+ */
+export type CopyStateOptions = {
+    /** Milliseconds before `copied` reverts. Defaults to `2000`. */
+    copyResetMs?: number;
+    /** Called once per successful copy. Never called when the write fails. */
+    oncopy?: () => void;
+};
+export type CopyState = {
+    /** True from a successful copy until the reset delay elapses. */
+    readonly copied: boolean;
+    /**
+     * Writes `text` to the clipboard. Resolves `true` on success, `false` if
+     * the clipboard was unavailable or refused — it never rejects, so a caller
+     * needs no try/catch of its own.
+     */
+    copy: (text: string) => Promise<boolean>;
+    /** Cancels any pending reset. Call from the owner's teardown. */
+    destroy: () => void;
+};
+export declare function createCopyState(options?: CopyStateOptions): CopyState;

package/dist/Snippet/copyState.svelte.js

@@ -0,0 +1,69 @@
+import { createCopyResetTimer } from './copyResetTimer';
+const DEFAULT_COPY_RESET_MS = 2000;
+/**
+ * The type says `number`, but a plain-JS or web-component caller can pass
+ * anything, and a getter can throw. Either would reach `setTimeout` as `NaN`
+ * — which fires immediately, so the feedback never appears — or leave the
+ * flag stuck on with no timer at all. An unusable delay must degrade to the
+ * default rather than break the affordance it controls.
+ */
+function resolveResetDelay(options) {
+    let requested;
+    try {
+        requested = options.copyResetMs;
+    }
+    catch {
+        return DEFAULT_COPY_RESET_MS;
+    }
+    if (typeof requested !== 'number' || !Number.isFinite(requested) || requested < 0) {
+        return DEFAULT_COPY_RESET_MS;
+    }
+    return requested;
+}
+export function createCopyState(options = {}) {
+    let copied = $state(false);
+    let destroyed = false;
+    const resetTimer = createCopyResetTimer();
+    return {
+        get copied() {
+            return copied;
+        },
+        async copy(text) {
+            if (destroyed) {
+                return false;
+            }
+            try {
+                await navigator.clipboard.writeText(text);
+            }
+            catch {
+                /* Clipboard unavailable: non-secure context, sandboxed iframe, or a
+                   permission refusal. Reporting success here — and flashing "Copied!"
+                   over a clipboard that never received the text — is the one outcome
+                   worse than showing no feedback at all. */
+                return false;
+            }
+            // The clipboard promise can settle after its owner has unmounted.
+            if (destroyed) {
+                return false;
+            }
+            // Resolved before the flag is set, so a throwing getter cannot leave
+            // `copied` true with nothing armed to clear it.
+            const delay = resolveResetDelay(options);
+            copied = true;
+            resetTimer.arm(() => {
+                copied = false;
+            }, delay);
+            try {
+                options.oncopy?.();
+            }
+            catch {
+                // A notification callback cannot undo the successful clipboard write.
+            }
+            return true;
+        },
+        destroy() {
+            destroyed = true;
+            resetTimer.cancel();
+        }
+    };
+}

package/dist/index.d.ts

@@ -102,6 +102,7 @@ export { default as Gallery } from './Gallery/Gallery.svelte';
 export { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
 export { SpeechToTextController } from './SpeechToText/controller.svelte';
+export { createCopyState } from './Snippet/copyState.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -139,6 +140,7 @@ export type * from './Progress/properties';
 export type * from './Pill/properties';
 export type * from './Pagination/properties';
 export type * from './Snippet/properties';
+export type * from './Snippet/copyState.svelte';
 export type * from './Gauge/properties';
 export type * from './SplitButton/properties';
 export type * from './KeyboardInput/properties';

package/dist/index.js

@@ -102,6 +102,7 @@ export { default as Gallery } from './Gallery/Gallery.svelte';
 export { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
 export { SpeechToTextController } from './SpeechToText/controller.svelte';
+export { createCopyState } from './Snippet/copyState.svelte';
 export { createSoundKit } from './SoundKit/SoundKit';
 export { validateInput, lockBodyScroll, unlockBodyScroll } from './utils';
 export { formatNumberIndian } from './_chart/format';

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() {
@@ -18013,23 +18014,66 @@ function createCopyResetTimer() {
 	};
 }
 //#endregion
+//#region src/lib/Snippet/copyState.svelte.ts
+var DEFAULT_COPY_RESET_MS = 2e3;
+function resolveResetDelay(e) {
+	let t;
+	try {
+		t = e.copyResetMs;
+	} catch {
+		return DEFAULT_COPY_RESET_MS;
+	}
+	return typeof t != "number" || !Number.isFinite(t) || t < 0 ? DEFAULT_COPY_RESET_MS : t;
+}
+function createCopyState(e = {}) {
+	let t = /* @__PURE__ */ state(!1), n = !1, i = createCopyResetTimer();
+	return {
+		get copied() {
+			return get(t);
+		},
+		async copy(a) {
+			if (n) return !1;
+			try {
+				await navigator.clipboard.writeText(a);
+			} catch {
+				return !1;
+			}
+			if (n) return !1;
+			let o = resolveResetDelay(e);
+			set(t, !0), i.arm(() => {
+				set(t, !1);
+			}, o);
+			try {
+				e.oncopy?.();
+			} catch {}
+			return !0;
+		},
+		destroy() {
+			n = !0, i.cancel();
+		}
+	};
+}
+//#endregion
 //#region src/lib/Snippet/Snippet.svelte
-var root$30 = /* @__PURE__ */ from_html("<span class=\"snippet-copied svelte-ql5iye\" aria-live=\"polite\"> </span>"), root_1$27 = /* @__PURE__ */ from_html("<span class=\"snippet-copy-icon svelte-ql5iye\"></span>"), root_2$21 = /* @__PURE__ */ from_html("<div class=\"snippet-copy svelte-ql5iye\"><!></div>"), root_3$19 = /* @__PURE__ */ from_html("<div><code class=\"snippet-code svelte-ql5iye\"><span class=\"snippet-prompt svelte-ql5iye\"> </span> <span class=\"snippet-text svelte-ql5iye\"> </span></code> <!></div>"), $$css$32 = {
+var root$30 = /* @__PURE__ */ from_html("<span class=\"snippet-copied svelte-ql5iye\"> </span>"), root_1$27 = /* @__PURE__ */ from_html("<span class=\"snippet-copy-icon svelte-ql5iye\"></span>"), root_2$21 = /* @__PURE__ */ from_html("<div class=\"snippet-copy svelte-ql5iye\"><!></div> <span class=\"snippet-status svelte-ql5iye\" role=\"status\" aria-live=\"polite\"> </span>", 1), root_3$19 = /* @__PURE__ */ from_html("<div><code class=\"snippet-code svelte-ql5iye\"><span class=\"snippet-prompt svelte-ql5iye\"> </span> <span class=\"snippet-text svelte-ql5iye\"> </span></code> <!></div>"), $$css$32 = {
 	hash: "svelte-ql5iye",
-	code: ".snippet.svelte-ql5iye {display:flex;align-items:center;justify-content:space-between;gap:var(--snippet-gap, 8px);background:var(--snippet-background, #1e1e1e);border:var(--snippet-border, 1px solid #333);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);color:var(--snippet-color, #e0e0e0);margin:var(--snippet-margin, 0);}.snippet-code.svelte-ql5iye {display:flex;align-items:center;overflow:hidden;flex:1;min-width:0;}.snippet-prompt.svelte-ql5iye {color:var(--snippet-prompt-color, #888);margin-right:var(--snippet-prompt-margin-right, 8px);flex-shrink:0;}.snippet-text.svelte-ql5iye {color:var(--snippet-text-color, #e0e0e0);font-family:var(--snippet-text-font-family, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.snippet-copy.svelte-ql5iye {--button-color: var(--snippet-copy-background, transparent);--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, var(--radius, 4px));--cursor: var(--snippet-copy-cursor, pointer);--button-hover-color: var(--snippet-copy-hover-background, #333);display:flex;align-items:center;justify-content:center;flex-shrink:0;}.snippet-copy-icon.svelte-ql5iye {display:inline-flex;align-items:center;justify-content:center;width:var(--snippet-copy-size, 16px);height:var(--snippet-copy-size, 16px);}.snippet-copy-icon.svelte-ql5iye svg {width:100%;height:100%;}.snippet-copied.svelte-ql5iye {color:var(--snippet-copied-color, #4caf50);font-size:var(--snippet-copied-font-size, 12px);font-family:var(--snippet-font-family, monospace);}"
+	code: ".snippet.svelte-ql5iye {display:flex;align-items:center;justify-content:space-between;gap:var(--snippet-gap, 8px);background:var(--snippet-background, #1e1e1e);border:var(--snippet-border, 1px solid #333);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);color:var(--snippet-color, #e0e0e0);margin:var(--snippet-margin, 0);}.snippet-code.svelte-ql5iye {display:flex;align-items:center;overflow:hidden;flex:1;min-width:0;}.snippet-prompt.svelte-ql5iye {color:var(--snippet-prompt-color, #888);margin-right:var(--snippet-prompt-margin-right, 8px);flex-shrink:0;}.snippet-text.svelte-ql5iye {color:var(--snippet-text-color, #e0e0e0);font-family:var(--snippet-text-font-family, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.snippet-copy.svelte-ql5iye {--button-color: var(--snippet-copy-background, transparent);--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, var(--radius, 4px));--cursor: var(--snippet-copy-cursor, pointer);--button-hover-color: var(--snippet-copy-hover-background, #333);display:flex;align-items:center;justify-content:center;flex-shrink:0;}.snippet-copy-icon.svelte-ql5iye {display:inline-flex;align-items:center;justify-content:center;width:var(--snippet-copy-size, 16px);height:var(--snippet-copy-size, 16px);}.snippet-copy-icon.svelte-ql5iye svg {width:100%;height:100%;}\n\n  /* Announced, never shown: the visible \"Copied!\" is the label inside the\n     button, and repeating it on screen would read as a duplicate. */.snippet-status.svelte-ql5iye {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}.snippet-copied.svelte-ql5iye {color:var(--snippet-copied-color, #4caf50);font-size:var(--snippet-copied-font-size, 12px);font-family:var(--snippet-font-family, monospace);}"
 };
 function Snippet(e, t) {
 	push(t, !0), append_styles$1(e, $$css$32);
-	let n = prop(t, "text", 7), i = prop(t, "prompt", 7, "$"), a = prop(t, "showCopyButton", 7, !0), o = prop(t, "testId", 7), s = prop(t, "copyIcon", 7), c = prop(t, "copiedLabel", 7, "Copied!"), l = prop(t, "copyResetMs", 7, 2e3), u = prop(t, "oncopy", 7), f = prop(t, "classes", 7), p = /* @__PURE__ */ state(!1), h = createCopyResetTimer();
-	onDestroy(h.cancel);
-	async function S() {
-		try {
-			await navigator.clipboard.writeText(n()), set(p, !0), u()?.(), h.arm(() => {
-				set(p, !1);
-			}, l());
-		} catch {}
-	}
-	var C = {
+	let n = prop(t, "text", 7), i = prop(t, "prompt", 7, "$"), a = prop(t, "showCopyButton", 7, !0), o = prop(t, "testId", 7), s = prop(t, "copyIcon", 7), c = prop(t, "copiedLabel", 7, "Copied!"), l = prop(t, "copyResetMs", 7, 2e3), u = prop(t, "oncopy", 7), f = prop(t, "classes", 7), p = createCopyState({
+		get copyResetMs() {
+			return l();
+		},
+		get oncopy() {
+			return u();
+		}
+	});
+	onDestroy(p.destroy);
+	let h = () => {
+		p.copy(n());
+	};
+	var S = {
 		get text() {
 			return n();
 		},
@@ -18084,15 +18128,13 @@ function Snippet(e, t) {
 		set classes(e) {
 			f(e), flushSync();
 		}
-	}, k = root_3$19(), R = child(k), G = child(R), te = child(G, !0);
-	reset(G);
-	var ne = sibling(G, 2), re = child(ne, !0);
-	reset(ne), reset(R);
-	var be = sibling(R, 2), Me = (e) => {
-		var t = root_2$21();
-		Button(child(t), {
-			onclick: S,
-			ariaLabel: "Copy to clipboard",
+	}, C = root_3$19(), k = child(C), R = child(k), G = child(R, !0);
+	reset(R);
+	var te = sibling(R, 2), ne = child(te, !0);
+	reset(te), reset(k);
+	var re = sibling(k, 2), be = (e) => {
+		var t = root_2$21(), n = first_child(t);
+		Button(child(n), spread_props({ onclick: h }, () => p.copied ? {} : { ariaLabel: "Copy to clipboard" }, {
 			children: (e, t) => {
 				var n = comment(), i = first_child(n), a = (e) => {
 					var t = root$30(), n = child(t, !0);
@@ -18105,17 +18147,19 @@ function Snippet(e, t) {
 					html(t, () => copy_default, !0), reset(t), append(e, t);
 				};
 				if_block(i, (e) => {
-					get(p) ? e(a) : typeof s() == "function" ? e(o, 1) : e(l, -1);
+					p.copied ? e(a) : typeof s() == "function" ? e(o, 1) : e(l, -1);
 				}), append(e, n);
 			},
 			$$slots: { default: !0 }
-		}), reset(t), append(e, t);
+		})), reset(n);
+		var i = sibling(n, 2), a = child(i, !0);
+		reset(i), template_effect(() => set_text(a, p.copied ? c() : "")), append(e, t);
 	};
-	return if_block(be, (e) => {
-		a() && e(Me);
-	}), reset(k), template_effect(() => {
-		set_class(k, 1, `snippet ${f() ?? "" ?? ""}`, "svelte-ql5iye"), set_attribute(k, "data-pw", typeof o() == "string" ? o() : null), set_attribute(k, "testid", typeof o() == "string" ? o() : null), set_text(te, i()), set_text(re, n());
-	}), append(e, k), pop(C);
+	return if_block(re, (e) => {
+		a() && e(be);
+	}), reset(C), template_effect(() => {
+		set_class(C, 1, `snippet ${f() ?? "" ?? ""}`, "svelte-ql5iye"), set_attribute(C, "data-pw", typeof o() == "string" ? o() : null), set_attribute(C, "testid", typeof o() == "string" ? o() : null), set_text(G, i()), set_text(ne, n());
+	}), append(e, C), pop(S);
 }
 create_custom_element(Snippet, {
 	text: {},

package/package.json

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