@juspay/svelte-ui-components 4.54.0 → 4.54.2

package/dist/DiffViewer/DiffViewer.svelte

@@ -134,6 +134,14 @@
     transform: rotate(90deg);
   }
 
+  /* The rotate still happens. Only the 120ms slide is removed, so a reduced-motion
+     user gets the open or closed chevron immediately instead of watching it turn. */
+  @media (prefers-reduced-motion: reduce) {
+    .chevron {
+      transition: none;
+    }
+  }
+
   .counts {
     display: flex;
     gap: var(--diff-small-gap, 8px);

package/dist/SankeyChart/SankeyChart.svelte

@@ -18,6 +18,7 @@
   import { truncateToWidth } from '../_chart/labels';
   import {
     DEFAULT_CHART_CORNER_RADIUS,
+    CHART_LABEL_PLATE_PADDING,
     DEFAULT_CHART_MAX_HEIGHT,
     type TooltipAnchor
   } from '../_chart/types';
@@ -369,8 +370,10 @@
       measureText(truncateColumnLabel(label), colLabelFont).width,
       fontMetrics?.columnWidths[columnIndex] ?? 0
     );
-    const canvasLeft = -(marginX + firstColumnLabelGutter) + 2;
-    const canvasRight = plotWidth + lastColumnLabelGutter + marginX - 2;
+    // Inset by the plate padding: a header clamped any closer paints its plate
+    // outside the SVG, where it is clipped.
+    const canvasLeft = -(marginX + firstColumnLabelGutter) + CHART_LABEL_PLATE_PADDING;
+    const canvasRight = plotWidth + lastColumnLabelGutter + marginX - CHART_LABEL_PLATE_PADDING;
     const min = canvasLeft + textWidth / 2;
     const max = canvasRight - textWidth / 2;
     // Text wider than the whole canvas keeps its centre; the colWidth-based

package/dist/_chart/LabelPlate.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { onMount, type Snippet } from 'svelte';
+  import { CHART_LABEL_PLATE_PADDING } from './types';
 
   let { children }: { children: Snippet } = $props();
   let group: SVGGElement | null = $state(null);
   let bounds: { x: number; y: number; width: number; height: number } | null = $state(null);
-  const PADDING = 3;
+  const PADDING = CHART_LABEL_PLATE_PADDING;
 
   onMount(() => {
     const text = group?.querySelector('text');

package/dist/_chart/types.d.ts

@@ -18,6 +18,12 @@ export declare const DEFAULT_CHART_CORNER_RADIUS = 4;
  * an explicit `maxHeight` to override it.
  */
 export declare const DEFAULT_CHART_MAX_HEIGHT = 420;
+/**
+ * Padding (px) a label plate draws around its text's bounding box. A label that
+ * is clamped to a canvas edge must stay at least this far inside it, otherwise
+ * its plate paints outside the SVG and is clipped there.
+ */
+export declare const CHART_LABEL_PLATE_PADDING = 3;
 export type Margin = {
     top: number;
     right: number;

package/dist/_chart/types.js

@@ -17,3 +17,9 @@ export const DEFAULT_CHART_CORNER_RADIUS = 4;
  * an explicit `maxHeight` to override it.
  */
 export const DEFAULT_CHART_MAX_HEIGHT = 420;
+/**
+ * Padding (px) a label plate draws around its text's bounding box. A label that
+ * is clamped to a canvas edge must stay at least this far inside it, otherwise
+ * its plate paints outside the SVG and is clipped there.
+ */
+export const CHART_LABEL_PLATE_PADDING = 3;

package/dist/utils.js

@@ -386,8 +386,14 @@ function scrollLocksFor(container) {
         locks = new WeakMap();
         Object.defineProperty(owner, scrollLocksKey, { value: locks });
     }
-    // The same real owner can be adopted into another document while held.
-    Object.defineProperty(activeOwner, activeScrollLocksKey, { value: locks, configurable: true });
+    // The same real owner can be adopted into another document while held. A sealed or
+    // non-extensible owner cannot carry the pointer, so it keeps only the document registry.
+    try {
+        Object.defineProperty(activeOwner, activeScrollLocksKey, { value: locks, configurable: true });
+    }
+    catch {
+        // Locking still works; adoption of such an owner while held is not tracked.
+    }
     return locks;
 }
 const bodyScrollReleases = [];
@@ -415,9 +421,15 @@ export function acquireScrollLock(container = typeof document === 'undefined' ?
                 ]);
             }
         }
-        lock = { count: 0, overflow };
+        lock = {
+            count: 0,
+            overflow,
+            originalCssText: container.style.cssText,
+            lockedCssText: ''
+        };
         scrollLocks.set(container, lock);
         container.style.setProperty('overflow', 'hidden', 'important');
+        lock.lockedCssText = container.style.cssText;
     }
     lock.count += 1;
     const heldLock = lock;
@@ -429,11 +441,18 @@ export function acquireScrollLock(container = typeof document === 'undefined' ?
         released = true;
         heldLock.count -= 1;
         if (heldLock.count === 0) {
-            container.style.removeProperty('overflow');
-            container.style.removeProperty('overflow-x');
-            container.style.removeProperty('overflow-y');
-            for (const [name, value, priority] of heldLock.overflow) {
-                container.style.setProperty(name, value, priority);
+            if (container.style.cssText === heldLock.lockedCssText) {
+                // Nothing else wrote to the inline style while held: put it back verbatim, which keeps the
+                // declaration order that removing and re-adding the overflow longhands would change.
+                container.style.cssText = heldLock.originalCssText;
+            }
+            else {
+                container.style.removeProperty('overflow');
+                container.style.removeProperty('overflow-x');
+                container.style.removeProperty('overflow-y');
+                for (const [name, value, priority] of heldLock.overflow) {
+                    container.style.setProperty(name, value, priority);
+                }
             }
             scrollLocks.delete(container);
             Reflect.deleteProperty(container, activeScrollLocksKey);
@@ -444,7 +463,15 @@ export function acquireScrollLock(container = typeof document === 'undefined' ?
 export function resolveScrollContainer(node, container) {
     const resolved = typeof container === 'function' ? container() : container;
     if (typeof resolved === 'object') {
-        return resolved !== null && resolved.nodeType === 1 && typeof resolved.style === 'object'
+        // A custom-element Object property can be a JSON lookalike with nodeType 1
+        // and a plain style object. acquireScrollLock calls style.setProperty, so
+        // that lookalike must resolve to null instead of throwing.
+        return resolved !== null &&
+            resolved.nodeType === 1 &&
+            typeof resolved.getRootNode === 'function' &&
+            typeof resolved.style === 'object' &&
+            resolved.style !== null &&
+            typeof resolved.style.setProperty === 'function'
             ? resolved
             : null;
     }

package/dist-wc/index.js

@@ -7078,10 +7078,14 @@ function scrollLocksFor(e) {
 	let t = e;
 	if (t[activeScrollLocksKey]) return t[activeScrollLocksKey];
 	let n = e.ownerDocument, i = n[scrollLocksKey];
-	return i || (i = /* @__PURE__ */ new WeakMap(), Object.defineProperty(n, scrollLocksKey, { value: i })), Object.defineProperty(t, activeScrollLocksKey, {
-		value: i,
-		configurable: !0
-	}), i;
+	i || (i = /* @__PURE__ */ new WeakMap(), Object.defineProperty(n, scrollLocksKey, { value: i }));
+	try {
+		Object.defineProperty(t, activeScrollLocksKey, {
+			value: i,
+			configurable: !0
+		});
+	} catch {}
+	return i;
 }
 var bodyScrollReleases = [];
 function acquireScrollLock(e = typeof document > "u" ? null : document.body) {
@@ -7099,22 +7103,27 @@ function acquireScrollLock(e = typeof document > "u" ? null : document.body) {
 		}
 		n = {
 			count: 0,
-			overflow: i
-		}, t.set(e, n), e.style.setProperty("overflow", "hidden", "important");
+			overflow: i,
+			originalCssText: e.style.cssText,
+			lockedCssText: ""
+		}, t.set(e, n), e.style.setProperty("overflow", "hidden", "important"), n.lockedCssText = e.style.cssText;
 	}
 	n.count += 1;
 	let i = n, a = !1;
 	return () => {
 		if (!a && (a = !0, --i.count, i.count === 0)) {
-			e.style.removeProperty("overflow"), e.style.removeProperty("overflow-x"), e.style.removeProperty("overflow-y");
-			for (let [t, n, a] of i.overflow) e.style.setProperty(t, n, a);
+			if (e.style.cssText === i.lockedCssText) e.style.cssText = i.originalCssText;
+			else {
+				e.style.removeProperty("overflow"), e.style.removeProperty("overflow-x"), e.style.removeProperty("overflow-y");
+				for (let [t, n, a] of i.overflow) e.style.setProperty(t, n, a);
+			}
 			t.delete(e), Reflect.deleteProperty(e, activeScrollLocksKey);
 		}
 	};
 }
 function resolveScrollContainer(e, t) {
 	let n = typeof t == "function" ? t() : t;
-	return typeof n == "object" ? n !== null && n.nodeType === 1 && typeof n.style == "object" ? n : null : t === void 0 ? e?.ownerDocument.body ?? (typeof document > "u" ? null : document.body) : null;
+	return typeof n == "object" ? n !== null && n.nodeType === 1 && typeof n.getRootNode == "function" && typeof n.style == "object" && n.style !== null && typeof n.style.setProperty == "function" ? n : null : t === void 0 ? e?.ownerDocument.body ?? (typeof document > "u" ? null : document.body) : null;
 }
 function lockBodyScroll() {
 	typeof document < "u" && bodyScrollReleases.push(acquireScrollLock(document.body));
@@ -12468,129 +12477,152 @@ var rest_excludes$80 = new Set([
 };
 function Input_wc(e, t) {
 	push(t, !0), append_styles$1(e, $$css$160);
-	let n = prop(t, "inputAriaLabel", 7), i = prop(t, "inputId", 7), a = prop(t, "inputAutofocus", 7), o = /* @__PURE__ */ rest_props(t, rest_excludes$80), s = t.$$host, c = /* @__PURE__ */ user_derived(() => dispatchEvents(s, o)), l = (e) => {
+	let n = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.labelSuffix), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "label-suffix", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.labelSuffix ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, i = prop(t, "inputAriaLabel", 7), a = prop(t, "inputId", 7), o = prop(t, "inputAutofocus", 7), s = /* @__PURE__ */ rest_props(t, rest_excludes$80), c = t.$$host, l = /* @__PURE__ */ user_derived(() => dispatchEvents(c, s)), u = (e) => {
 		if (e == null) return null;
 		if (typeof e == "boolean") return e;
 		let t = String(e).trim().toLowerCase();
 		return t === "false" ? !1 : t === "" || t === "true" || t === "spellcheck" ? !0 : null;
-	}, u = t.$$host.querySelector("[slot=\"left-icon\"]") !== null, f = t.$$host.querySelector("[slot=\"right-icon\"]") !== null;
-	var p = {
+	}, f = t.$$host.querySelector("[slot=\"left-icon\"]") !== null, p = t.$$host.querySelector("[slot=\"right-icon\"]") !== null, h = t.$$host.querySelector("[slot=\"label-suffix\"]") !== null;
+	var S = {
 		get inputAriaLabel() {
-			return n();
+			return i();
 		},
 		set inputAriaLabel(e) {
-			n(e), flushSync();
+			i(e), flushSync();
 		},
 		get inputId() {
-			return i();
+			return a();
 		},
 		set inputId(e) {
-			i(e), flushSync();
+			a(e), flushSync();
 		},
 		get inputAutofocus() {
-			return a();
+			return o();
 		},
 		set inputAutofocus(e) {
-			a(e), flushSync();
+			o(e), flushSync();
 		}
-	}, h = comment(), S = first_child(h), C = (e) => {
+	}, C = comment(), k = first_child(C), R = (e) => {
 		{
-			let s = (e) => {
+			let c = (e) => {
 				var n = comment();
 				slot(first_child(n), t, "left-icon", {}, null), append(e, n);
-			}, u = (e) => {
+			}, f = (e) => {
 				var n = comment();
 				slot(first_child(n), t, "right-icon", {}, null), append(e, n);
-			}, f = /* @__PURE__ */ user_derived(() => l(t.spellcheck));
-			Input(e, spread_props(() => o, () => get(c), {
+			}, p = /* @__PURE__ */ user_derived(() => u(t.spellcheck)), S = /* @__PURE__ */ user_derived(() => h ? n : t.labelSuffix);
+			Input(e, spread_props(() => s, () => get(l), {
 				get id() {
-					return i();
+					return a();
 				},
 				get ariaLabel() {
-					return n();
+					return i();
 				},
 				get autofocus() {
-					return a();
+					return o();
 				},
 				get spellcheck() {
-					return get(f);
+					return get(p);
+				},
+				get labelSuffix() {
+					return get(S);
 				},
-				leftIcon: s,
-				rightIcon: u,
+				leftIcon: c,
+				rightIcon: f,
 				$$slots: {
 					leftIcon: !0,
 					rightIcon: !0
 				}
 			}));
 		}
-	}, k = (e) => {
+	}, G = (e) => {
 		{
-			let s = (e) => {
+			let c = (e) => {
 				var n = comment();
 				slot(first_child(n), t, "left-icon", {}, null), append(e, n);
-			}, u = /* @__PURE__ */ user_derived(() => l(t.spellcheck));
-			Input(e, spread_props(() => o, () => get(c), {
+			}, f = /* @__PURE__ */ user_derived(() => u(t.spellcheck)), p = /* @__PURE__ */ user_derived(() => h ? n : t.labelSuffix);
+			Input(e, spread_props(() => s, () => get(l), {
 				get id() {
-					return i();
+					return a();
 				},
 				get ariaLabel() {
-					return n();
+					return i();
 				},
 				get autofocus() {
-					return a();
+					return o();
 				},
 				get spellcheck() {
-					return get(u);
+					return get(f);
+				},
+				get labelSuffix() {
+					return get(p);
 				},
-				leftIcon: s,
+				leftIcon: c,
 				$$slots: { leftIcon: !0 }
 			}));
 		}
-	}, R = (e) => {
+	}, te = (e) => {
 		{
-			let s = (e) => {
+			let c = (e) => {
 				var n = comment();
 				slot(first_child(n), t, "right-icon", {}, null), append(e, n);
-			}, u = /* @__PURE__ */ user_derived(() => l(t.spellcheck));
-			Input(e, spread_props(() => o, () => get(c), {
+			}, f = /* @__PURE__ */ user_derived(() => u(t.spellcheck)), p = /* @__PURE__ */ user_derived(() => h ? n : t.labelSuffix);
+			Input(e, spread_props(() => s, () => get(l), {
 				get id() {
-					return i();
+					return a();
 				},
 				get ariaLabel() {
-					return n();
+					return i();
 				},
 				get autofocus() {
-					return a();
+					return o();
 				},
 				get spellcheck() {
-					return get(u);
+					return get(f);
+				},
+				get labelSuffix() {
+					return get(p);
 				},
-				rightIcon: s,
+				rightIcon: c,
 				$$slots: { rightIcon: !0 }
 			}));
 		}
-	}, G = (e) => {
+	}, ne = (e) => {
 		{
-			let s = /* @__PURE__ */ user_derived(() => l(t.spellcheck));
-			Input(e, spread_props(() => o, () => get(c), {
+			let c = /* @__PURE__ */ user_derived(() => u(t.spellcheck)), f = /* @__PURE__ */ user_derived(() => h ? n : t.labelSuffix);
+			Input(e, spread_props(() => s, () => get(l), {
 				get id() {
-					return i();
+					return a();
 				},
 				get ariaLabel() {
-					return n();
+					return i();
 				},
 				get autofocus() {
-					return a();
+					return o();
 				},
 				get spellcheck() {
-					return get(s);
+					return get(c);
+				},
+				get labelSuffix() {
+					return get(f);
 				}
 			}));
 		}
 	};
-	return if_block(S, (e) => {
-		u && f ? e(C) : u ? e(k, 1) : f ? e(R, 2) : e(G, -1);
-	}), append(e, h), pop(p);
+	return if_block(k, (e) => {
+		f && p ? e(R) : f ? e(G, 1) : p ? e(te, 2) : e(ne, -1);
+	}), append(e, C), pop(S);
 }
 customElements.define("sui-input", create_custom_element(Input_wc, {
 	value: {
@@ -12765,7 +12797,11 @@ customElements.define("sui-input", create_custom_element(Input_wc, {
 		attribute: "input-autofocus",
 		type: "Boolean"
 	}
-}, ["left-icon", "right-icon"], [], { mode: "open" }, formAssociated({ disabled: "disable" })));
+}, [
+	"label-suffix",
+	"left-icon",
+	"right-icon"
+], [], { mode: "open" }, formAssociated({ disabled: "disable" })));
 //#endregion
 //#region src/lib/KeyboardInput/KeyboardInput.svelte
 var root$82 = /* @__PURE__ */ from_html("<span class=\"separator svelte-14lwsom\"> </span>"), root_1$76 = /* @__PURE__ */ from_html("<!> <kbd class=\"key svelte-14lwsom\"> </kbd>", 1), root_2$60 = /* @__PURE__ */ from_html("<span></span>"), $$css$159 = {
@@ -13520,9 +13556,70 @@ var rest_excludes$74 = new Set([
 	code: "\n  /* A custom element defaults to `display: inline`, which has no definite\n     width for a percentage to resolve against -- so a component sizing itself\n     with `width: 100%` resolved against the wrong ancestor, and layout depended\n     on the consumer's surrounding markup rather than on the component. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-progress-display, block);}"
 };
 function Progress_wc(e, t) {
-	append_styles$1(e, $$css$150);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$74);
-	Progress(e, spread_props(() => n));
+	push(t, !0), append_styles$1(e, $$css$150);
+	let n = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.leadingLabel), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "leading-label", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.leadingLabel ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, i = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.headerStart), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "header-start", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.headerStart ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, a = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.headerEnd), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "header-end", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.headerEnd ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, o = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = comment();
+			snippet(first_child(n), () => t.note), append(e, n);
+		}, o = (e) => {
+			var n = comment();
+			slot(first_child(n), t, "note", {}, null), append(e, n);
+		};
+		if_block(i, (e) => {
+			t.note ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, s = /* @__PURE__ */ rest_props(t, rest_excludes$74), c = t.$$host.querySelector("[slot=\"leading-label\"]") !== null, l = t.$$host.querySelector("[slot=\"header-start\"]") !== null, u = t.$$host.querySelector("[slot=\"header-end\"]") !== null, f = t.$$host.querySelector("[slot=\"note\"]") !== null;
+	{
+		let p = /* @__PURE__ */ user_derived(() => c ? n : t.leadingLabel), h = /* @__PURE__ */ user_derived(() => l ? i : t.headerStart), S = /* @__PURE__ */ user_derived(() => u ? a : t.headerEnd), C = /* @__PURE__ */ user_derived(() => f ? o : t.note);
+		Progress(e, spread_props(() => s, {
+			get leadingLabel() {
+				return get(p);
+			},
+			get headerStart() {
+				return get(h);
+			},
+			get headerEnd() {
+				return get(S);
+			},
+			get note() {
+				return get(C);
+			}
+		}));
+	}
+	pop();
 }
 customElements.define("sui-progress", create_custom_element(Progress_wc, {
 	value: {
@@ -13552,7 +13649,12 @@ customElements.define("sui-progress", create_custom_element(Progress_wc, {
 	headerStart: { type: "Object" },
 	headerEnd: { type: "Object" },
 	note: { type: "Object" }
-}, [], [], { mode: "open" }));
+}, [
+	"leading-label",
+	"header-start",
+	"header-end",
+	"note"
+], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Radio/Radio.svelte
 var root$78 = /* @__PURE__ */ from_html("<span> </span>"), root_1$72 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-14bh706\"> </div>"), root_2$57 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-14bh706\"> </div>"), root_3$51 = /* @__PURE__ */ from_html("<label><input type=\"radio\" class=\"radio-input svelte-14bh706\"/> <span><span></span></span> <!></label> <!> <!>", 1), $$css$149 = {
@@ -38982,7 +39084,7 @@ function SankeyChart(e, t) {
 		}
 		return e;
 	}), Gt = /* @__PURE__ */ user_derived(() => get(Bt).nodes.length > 0 ? Math.max(...get(Bt).nodes.map((e) => e.column)) + 1 : 0), qt = /* @__PURE__ */ user_derived(() => get(Gt) <= 1 ? get(Rt) : (get(Rt) - a()) / (get(Gt) - 1)), Zt = (e) => truncateToWidth(e, Math.max(0, get(qt) - 6), get(Mt)), Qt = (e, t) => {
-		let n = e * get(qt) + a() / 2, i = Math.max(measureText(Zt(t), get(Mt)).width, get(kt)?.columnWidths[e] ?? 0), o = -(ut() + get(Lt)) + 2, s = get(Rt) + get(It) + ut() - 2, c = o + i / 2, l = s - i / 2;
+		let n = e * get(qt) + a() / 2, i = Math.max(measureText(Zt(t), get(Mt)).width, get(kt)?.columnWidths[e] ?? 0), o = -(ut() + get(Lt)) + 3, s = get(Rt) + get(It) + ut() - 3, c = o + i / 2, l = s - i / 2;
 		return l < c ? n : Math.min(Math.max(n, c), l);
 	}, $t = (e) => e === 0 && ct() === "left" || e === get(Gt) - 1 && e !== 0 && lt() === "left", en = (e, t) => truncateToWidth(e, t === 0 && ct() === "left" ? Math.max(0, get(Lt) + ut() - 10 - at()) : t === get(Gt) - 1 && lt() === "right" ? Math.max(0, get(It) + ut() - 10 - at()) : Math.max(0, get(qt) - a() - 20 - at()), get(jt)), tn = /* @__PURE__ */ user_derived(() => {
 		let e = new SvelteMap();

package/package.json

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