@juspay/svelte-ui-components 2.136.10 → 2.136.11

package/dist/FunnelChart/properties.d.ts

@@ -57,7 +57,8 @@ export type OptionalFunnelChartProperties = {
     aspectRatio?: number;
     /**
      * Upper bound (px) on the rendered chart height, so the aspect-ratio-derived height
-     * can't balloon on wide surfaces. Defaults to `Infinity` (uncapped).
+     * can't balloon on wide surfaces. Defaults to `DEFAULT_CHART_MAX_HEIGHT` (420), the
+     * same cap every other chart in this library applies.
      */
     maxHeight?: number;
     /** Lower bound (px) on the rendered chart height (defaults to `0`). */

package/dist/Img/Img.svelte

@@ -37,6 +37,107 @@
     transform: ((svg: string) => string) | null;
   };
 
+  // Root attributes that may be copied from fetched SVG markup onto the live
+  // <svg> host. The fetched document is remote, untrusted content — copying
+  // every attribute (the previous behaviour) let it plant executable `on*`
+  // handlers on an element in the host page, clobber the data-pw/testID test
+  // hooks, or override the component's CSS sizing contract with an inline
+  // style. An allowlist rather than an `on*` denylist is deliberate: a
+  // denylist misses vectors like `xlink:href="javascript:…"` and whatever
+  // attribute ships in browsers next. The names kept are what inlining
+  // actually needs — geometry/scaling, the namespace declarations exporters
+  // emit, the inheritable paint attributes that keep the icon's authored
+  // defaults while page CSS/currentColor themes it, and the accessibility
+  // metadata real icon sets ship (role, focusable, aria-*). `class` stays
+  // caller-owned via the `classes` prop, as before. Compared lowercased, so
+  // entries are lowercase (viewBox → 'viewbox') while the authored casing is
+  // preserved when the attribute is written to the host.
+  const SAFE_INLINE_ROOT_ATTRIBUTES: ReadonlySet<string> = new Set([
+    'xmlns',
+    'xmlns:xlink',
+    'viewbox',
+    'width',
+    'height',
+    'x',
+    'y',
+    'preserveaspectratio',
+    'fill',
+    'fill-opacity',
+    'fill-rule',
+    'stroke',
+    'stroke-width',
+    'stroke-opacity',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'clip-rule',
+    'color',
+    'opacity',
+    'overflow',
+    'role',
+    'focusable'
+  ]);
+
+  function isSafeInlineRootAttribute(lowerCaseName: string): boolean {
+    return SAFE_INLINE_ROOT_ATTRIBUTES.has(lowerCaseName) || lowerCaseName.startsWith('aria-');
+  }
+
+  /**
+   * Strips executable content from a fetched SVG's descendants.
+   *
+   * The root allowlist above only guards the root. Children are adopted into
+   * the live document wholesale, and an event-handler content attribute
+   * becomes a live handler the moment its element is adopted — so
+   * `<image onerror="…">` two levels down runs exactly like `onerror` on the
+   * root would. A root-only guard would look like a fix while leaving the same
+   * vector open one element deeper.
+   *
+   * A denylist rather than an allowlist here, deliberately: descendants
+   * legitimately carry the entire SVG geometry and paint vocabulary (`d`,
+   * `transform`, `gradientUnits`, …), so enumerating what is permitted would
+   * break real artwork. What is dangerous is narrow and well understood:
+   * scripting elements, `on*` handlers, and URL attributes pointing at
+   * `javascript:`.
+   */
+  function sanitizeInlinedSubtree(root: SVGSVGElement): void {
+    for (const element of Array.from(root.querySelectorAll('script, foreignObject'))) {
+      element.remove();
+    }
+    for (const element of Array.from(root.querySelectorAll('*'))) {
+      for (const attribute of Array.from(element.attributes)) {
+        const name = attribute.name.toLowerCase();
+        if (name.startsWith('on')) {
+          element.removeAttribute(attribute.name);
+          continue;
+        }
+        // `href`, `xlink:href` and `src` accept a javascript: URL, which runs
+        // on activation of an <a> wrapper or on load of a nested resource.
+        const isUrlAttribute = name === 'href' || name === 'xlink:href' || name === 'src';
+        if (isUrlAttribute && /^\s*javascript:/i.test(attribute.value)) {
+          element.removeAttribute(attribute.name);
+        }
+      }
+    }
+  }
+
+  // Root attribute names of the raw fetched markup, lowercased — or null when
+  // that markup does not parse as SVG on its own. Distinguishes what arrived
+  // over the network (untrusted, the allowlist applies) from what the caller's
+  // transformSvg hook added (caller intent, passes through).
+  function collectRootAttributeNames(markup: string): ReadonlySet<string> | null {
+    const parsed = new DOMParser().parseFromString(markup, 'image/svg+xml');
+    if (parsed.querySelector('parsererror') !== null) {
+      return null;
+    }
+    const root = parsed.querySelector('svg');
+    if (root === null) {
+      return null;
+    }
+    return new Set(Array.from(root.attributes, (attribute) => attribute.name.toLowerCase()));
+  }
+
   async function loadInlineSvg(
     host: SVGSVGElement,
     url: string,
@@ -50,7 +151,8 @@
         return;
       }
       const rawSvg = await response.text();
-      const markup = typeof transform === 'function' ? transform(rawSvg) : rawSvg;
+      const hasTransform = typeof transform === 'function';
+      const markup = hasTransform ? transform(rawSvg) : rawSvg;
       const parsed = new DOMParser().parseFromString(markup, 'image/svg+xml');
       if (parsed.querySelector('parsererror') !== null) {
         failedInlineSrc = url;
@@ -70,12 +172,26 @@
       while (host.firstChild !== null) {
         host.removeChild(host.firstChild);
       }
+      // With no transform the parsed root IS the fetched root, so every name
+      // is network-supplied and only the allowlist applies. With a transform,
+      // names absent from the raw payload were added by the caller's own hook
+      // and pass through; if the raw payload only parses after the transform,
+      // nothing can be attributed to the caller and the allowlist applies to
+      // everything.
+      const fetchedRootNames = hasTransform ? collectRootAttributeNames(rawSvg) : null;
       for (const attribute of Array.from(sourceSvg.attributes)) {
-        if (attribute.name === 'class') {
+        const name = attribute.name.toLowerCase();
+        if (name === 'class') {
           continue;
         }
-        host.setAttribute(attribute.name, attribute.value);
+        const addedByTransform = fetchedRootNames !== null && !fetchedRootNames.has(name);
+        if (isSafeInlineRootAttribute(name) || addedByTransform) {
+          host.setAttribute(attribute.name, attribute.value);
+        }
       }
+      // Before adoption, not after: an event-handler attribute becomes a live
+      // handler as soon as its element enters the document.
+      sanitizeInlinedSubtree(sourceSvg);
       while (sourceSvg.firstChild !== null) {
         host.appendChild(sourceSvg.firstChild);
       }

package/dist-wc/index.js

@@ -3477,7 +3477,7 @@ function create_custom_element(e, t, n, i, a, o) {
 }
 //#endregion
 //#region src/lib/Img/Img.svelte
-var root$88 = /* @__PURE__ */ from_svg("<svg></svg>"), root_1$75 = /* @__PURE__ */ from_html("<img/>"), $$css$85 = {
+var root_1$75 = /* @__PURE__ */ from_svg("<svg></svg>"), root_2$57 = /* @__PURE__ */ from_html("<img/>"), $$css$85 = {
 	hash: "svelte-13ogpty",
 	code: "img.svelte-13ogpty,\n  svg.svelte-13ogpty {object-fit:var(--image-object-fit);height:var(--image-height, 24px);width:var(--image-width, 24px);padding:var(--image-padding, 0px);border-radius:var(--image-border-radius, 0px);margin:var(--image-margin, 0px);filter:var(--image-filter, none);background:var(--image-background);border:var(--image-border);transition:var(--image-transition);}img.svelte-13ogpty:hover,\n  svg.svelte-13ogpty:hover {background:var(--image-hover-background, var(--image-background));border:var(--image-hover-border, var(--image-border));}"
 };
@@ -3491,35 +3491,88 @@ function Img(e, t) {
 	function C() {
 		typeof a() == "string" && a().length > 0 && get(f) !== a() ? set(f, a()) : o()?.();
 	}
-	async function k(e, t, n, i) {
+	let k = new Set([
+		"xmlns",
+		"xmlns:xlink",
+		"viewbox",
+		"width",
+		"height",
+		"x",
+		"y",
+		"preserveaspectratio",
+		"fill",
+		"fill-opacity",
+		"fill-rule",
+		"stroke",
+		"stroke-width",
+		"stroke-opacity",
+		"stroke-linecap",
+		"stroke-linejoin",
+		"stroke-miterlimit",
+		"stroke-dasharray",
+		"stroke-dashoffset",
+		"clip-rule",
+		"color",
+		"opacity",
+		"overflow",
+		"role",
+		"focusable"
+	]);
+	function R(e) {
+		return k.has(e) || e.startsWith("aria-");
+	}
+	function G(e) {
+		for (let t of Array.from(e.querySelectorAll("script, foreignObject"))) t.remove();
+		for (let t of Array.from(e.querySelectorAll("*"))) for (let e of Array.from(t.attributes)) {
+			let n = e.name.toLowerCase();
+			if (n.startsWith("on")) {
+				t.removeAttribute(e.name);
+				continue;
+			}
+			(n === "href" || n === "xlink:href" || n === "src") && /^\s*javascript:/i.test(e.value) && t.removeAttribute(e.name);
+		}
+	}
+	function te(e) {
+		let t = new DOMParser().parseFromString(e, "image/svg+xml");
+		if (t.querySelector("parsererror") !== null) return null;
+		let n = t.querySelector("svg");
+		return n === null ? null : new Set(Array.from(n.attributes, (e) => e.name.toLowerCase()));
+	}
+	async function ne(e, t, n, i) {
 		try {
 			let a = await fetch(t, { signal: i });
 			if (!a.ok) {
 				set(p, t, !0);
 				return;
 			}
-			let o = await a.text(), s = typeof n == "function" ? n(o) : o, c = new DOMParser().parseFromString(s, "image/svg+xml");
-			if (c.querySelector("parsererror") !== null) {
+			let o = await a.text(), s = typeof n == "function", c = s ? n(o) : o, l = new DOMParser().parseFromString(c, "image/svg+xml");
+			if (l.querySelector("parsererror") !== null) {
 				set(p, t, !0);
 				return;
 			}
-			let l = c.querySelector("svg");
-			if (l === null) {
+			let u = l.querySelector("svg");
+			if (u === null) {
 				set(p, t, !0);
 				return;
 			}
 			if (i.aborted) return;
 			for (; e.firstChild !== null;) e.removeChild(e.firstChild);
-			for (let t of Array.from(l.attributes)) t.name !== "class" && e.setAttribute(t.name, t.value);
-			for (; l.firstChild !== null;) e.appendChild(l.firstChild);
+			let f = s ? te(o) : null;
+			for (let t of Array.from(u.attributes)) {
+				let n = t.name.toLowerCase();
+				if (n === "class") continue;
+				let i = f !== null && !f.has(n);
+				(R(n) || i) && e.setAttribute(t.name, t.value);
+			}
+			for (G(u); u.firstChild !== null;) e.appendChild(u.firstChild);
 		} catch {
 			i.aborted || set(p, t, !0);
 		}
 	}
-	function R(e, t) {
+	function re(e, t) {
 		let n = new AbortController();
 		function i(t) {
-			n.abort(), n = new AbortController(), k(e, t.url, t.transform, n.signal);
+			n.abort(), n = new AbortController(), ne(e, t.url, t.transform, n.signal);
 		}
 		return i(t), {
 			update(e) {
@@ -3530,7 +3583,7 @@ function Img(e, t) {
 			}
 		};
 	}
-	var G = {
+	var be = {
 		get src() {
 			return n();
 		},
@@ -3579,23 +3632,23 @@ function Img(e, t) {
 		set testId(e) {
 			u(e), flushSync();
 		}
-	}, te = comment(), ne = first_child(te), re = (e) => {
-		var t = root$88();
-		action(t, (e, t) => R?.(e, t), () => ({
+	}, Me = comment(), Re = first_child(Me), Ue = (e) => {
+		var t = root_1$75();
+		action(t, (e, t) => re?.(e, t), () => ({
 			url: get(f),
 			transform: l() ?? null
 		})), template_effect(() => {
 			set_class(t, 0, clsx(s() ?? ""), "svelte-13ogpty"), set_attribute(t, "role", i().length > 0 ? "img" : null), set_attribute(t, "aria-label", i().length > 0 ? i() : null), set_attribute(t, "aria-hidden", i().length === 0 ? "true" : null), set_attribute(t, "data-pw", u()), set_attribute(t, "testID", u());
 		}), append(e, t);
-	}, be = (e) => {
-		var t = root_1$75();
+	}, it = (e) => {
+		var t = root_2$57();
 		template_effect(() => {
 			set_class(t, 1, clsx(s() ?? ""), "svelte-13ogpty"), set_attribute(t, "src", get(f)), set_attribute(t, "alt", i()), set_attribute(t, "data-pw", u()), set_attribute(t, "testid", u());
 		}), event("error", t, C), replay_events(t), append(e, t);
 	};
-	return if_block(ne, (e) => {
-		get(S) ? e(re) : e(be, -1);
-	}), append(e, te), pop(G);
+	return if_block(Re, (e) => {
+		get(S) ? e(Ue) : e(it, -1);
+	}), append(e, Me), pop(be);
 }
 create_custom_element(Img, {
 	src: {},
@@ -12723,6 +12776,11 @@ customElements.define("sui-choicebox", create_custom_element(Choicebox_wc, {
 		reflect: !0,
 		type: "Boolean"
 	},
+	showIndicator: {
+		attribute: "show-indicator",
+		reflect: !0,
+		type: "Boolean"
+	},
 	testId: {
 		attribute: "test-id",
 		type: "String"

package/package.json

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