@juspay/svelte-ui-components 4.54.0 → 4.54.1

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/utils.js

@@ -444,7 +444,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

@@ -7114,7 +7114,7 @@ function acquireScrollLock(e = typeof document > "u" ? null : document.body) {
 }
 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 +12468,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);
 				},
-				rightIcon: s,
+				get labelSuffix() {
+					return get(p);
+				},
+				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 +12788,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 +13547,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 +13640,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 = {

package/package.json

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