@juspay/svelte-ui-components 4.12.0 → 4.13.0

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

@@ -18013,23 +18013,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 +18127,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 +18146,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.13.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",