@juspay/svelte-ui-components 4.4.0 → 4.6.0

package/dist/KeyboardInput/KeyboardInput.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import type { KeyboardInputProperties } from './properties';
 
-  let { keys, separator = '+', testId, onclick, classes }: KeyboardInputProperties = $props();
+  let {
+    keys,
+    separator = '+',
+    testId,
+    onclick,
+    classes,
+    literal = false
+  }: KeyboardInputProperties = $props();
 
   const KEY_SYMBOLS: Record<string, string> = {
     cmd: '\u2318',
@@ -28,6 +35,9 @@
   let interactive = $derived(typeof onclick === 'function');
 
   function getSymbol(key: string): string {
+    if (literal) {
+      return key;
+    }
     return KEY_SYMBOLS[key.toLowerCase()] ?? key;
   }
 

package/dist/KeyboardInput/properties.d.ts

@@ -6,6 +6,15 @@ export type OptionalKeyboardInputProperties = {
     separator?: string;
     testId?: string;
     classes?: string;
+    /**
+     * When true, every key renders exactly as given — the built-in KEY_SYMBOLS
+     * table (`space` → ␣, `tab` → ⇥, `cmd` → ⌘, …) is bypassed entirely.
+     * Defaults to false, so existing consumers keep today's glyph substitution
+     * unchanged. Use this when the word itself is the label that must appear
+     * (e.g. a "Hold SPACE" caption or a physical-key caption reading "Tab"),
+     * not the typographic symbol.
+     */
+    literal?: boolean;
 };
 export type KeyboardInputEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/MarkdownText/MarkdownText.svelte

@@ -2,9 +2,16 @@
   import { renderMarkdown } from './markdown';
   import type { MarkdownTextProperties } from './properties';
 
-  let { markdown, breaks = false, testId, classes, tableLabel }: MarkdownTextProperties = $props();
-
-  let html = $derived(renderMarkdown(markdown, { breaks, tableLabel }));
+  let {
+    markdown,
+    breaks = false,
+    testId,
+    classes,
+    tableLabel,
+    sanitize
+  }: MarkdownTextProperties = $props();
+
+  let html = $derived(renderMarkdown(markdown, { breaks, tableLabel, sanitize }));
 </script>
 
 <div

package/dist/MarkdownText/markdown.js

@@ -55,26 +55,127 @@ function escapeHtml(value) {
         .replace(/"/g, '"')
         .replace(/'/g, ''');
 }
-const sanitizingRenderer = {
-    html(token) {
-        return escapeHtml(token.text);
-    },
-    link(token) {
-        if (hasSafeProtocol(token.href, SAFE_LINK_PROTOCOLS)) {
-            return false;
-        }
-        return escapeHtml(token.text);
-    },
-    image(token) {
-        if (hasSafeProtocol(token.href, SAFE_IMAGE_PROTOCOLS)) {
-            return false;
-        }
-        return escapeHtml(token.text);
+/**
+ * `allowedProtocols` can only NARROW a surface's default allow-list, never
+ * widen it -- intersecting with the library default (rather than substituting
+ * it) is what makes listing an unsafe scheme like `javascript:` a no-op
+ * instead of a hole. Casing is normalised so `'HTTPS:'` narrows the same as
+ * `'https:'`, matching how `hasSafeProtocol` reads `URL.protocol` (always
+ * lower-case).
+ */
+function narrow(defaults, allowedProtocols) {
+    if (!allowedProtocols) {
+        return defaults;
     }
-};
+    const requested = new Set(allowedProtocols.map((protocol) => protocol.toLowerCase()));
+    return new Set([...defaults].filter((protocol) => requested.has(protocol)));
+}
+function resolveProtocolSets(sanitize) {
+    return {
+        links: narrow(SAFE_LINK_PROTOCOLS, sanitize?.allowedProtocols),
+        images: narrow(SAFE_IMAGE_PROTOCOLS, sanitize?.allowedProtocols)
+    };
+}
+/**
+ * `null` means "no restriction" (today's default: every tag marked's GFM
+ * output can produce renders normally) -- unlike the protocol allow-lists,
+ * there is no built-in default set to fall back to once this exists, so its
+ * absence is what keeps old behaviour byte-for-byte.
+ */
+function resolveTagAllowList(allowedTags) {
+    return allowedTags ? new Set(allowedTags) : null;
+}
+function tagAllowed(allowed, tag) {
+    return allowed === null || allowed.has(tag);
+}
+function createSanitizingRenderer(protocols, allowedTags, disableTaskLists) {
+    return {
+        html(token) {
+            return escapeHtml(token.text);
+        },
+        link(token) {
+            if (hasSafeProtocol(token.href, protocols.links) && tagAllowed(allowedTags, 'a')) {
+                return false;
+            }
+            return escapeHtml(token.text);
+        },
+        image(token) {
+            if (hasSafeProtocol(token.href, protocols.images) && tagAllowed(allowedTags, 'img')) {
+                return false;
+            }
+            return escapeHtml(token.text);
+        },
+        strong(token) {
+            if (tagAllowed(allowedTags, 'strong')) {
+                return false;
+            }
+            return this.parser.parseInline(token.tokens);
+        },
+        em(token) {
+            if (tagAllowed(allowedTags, 'em')) {
+                return false;
+            }
+            return this.parser.parseInline(token.tokens);
+        },
+        del(token) {
+            if (tagAllowed(allowedTags, 'del')) {
+                return false;
+            }
+            return this.parser.parseInline(token.tokens);
+        },
+        codespan(token) {
+            if (tagAllowed(allowedTags, 'code')) {
+                return false;
+            }
+            return escapeHtml(token.text);
+        },
+        code(token) {
+            if (tagAllowed(allowedTags, 'pre')) {
+                return false;
+            }
+            return `${escapeHtml(token.text)}\n`;
+        },
+        blockquote(token) {
+            if (tagAllowed(allowedTags, 'blockquote')) {
+                return false;
+            }
+            return this.parser.parse(token.tokens);
+        },
+        heading(token) {
+            if (tagAllowed(allowedTags, `h${token.depth}`)) {
+                return false;
+            }
+            return `${this.parser.parseInline(token.tokens)}\n`;
+        },
+        list(token) {
+            if (tagAllowed(allowedTags, token.ordered ? 'ol' : 'ul')) {
+                return false;
+            }
+            return token.items.map((item) => this.parser.parse(item.tokens)).join('');
+        },
+        table(token) {
+            if (tagAllowed(allowedTags, 'table')) {
+                return false;
+            }
+            const rowText = (cells) => cells.map((cell) => this.parser.parseInline(cell.tokens)).join(' | ');
+            const lines = [rowText(token.header), ...token.rows.map(rowText)];
+            return `<p>${lines.join('<br>')}</p>`;
+        },
+        hr() {
+            return tagAllowed(allowedTags, 'hr') ? false : '';
+        },
+        checkbox() {
+            return disableTaskLists ? '' : false;
+        }
+    };
+}
 /* Safe to share across SSR requests: each instance's configuration (renderer,
    gfm, breaks) is fixed at construction and parse() takes no per-request state,
-   so the cache only ever holds config-immutable parsers keyed by option shape. */
+   so the cache only ever holds config-immutable parsers keyed by option shape.
+   The key folds in the resolved protocol sets, tag allow-list and task-list
+   toggle (sorted for a stable string) so differently-configured `sanitize`
+   options get their own cached instance and never share a renderer with a
+   different allow-list. */
 const instances = new Map();
 /* External links open in a new tab with `rel="noopener noreferrer"` — the same
    default the library's Button/Card apply to `target="_blank"` anchors. The
@@ -108,10 +209,23 @@ function wrapTables(html, label) {
 }
 function instanceFor(options) {
     const breaks = options.breaks === true;
-    const key = breaks ? 'breaks' : 'default';
+    const protocols = resolveProtocolSets(options.sanitize);
+    const allowedTags = resolveTagAllowList(options.sanitize?.allowedTags);
+    const disableTaskLists = options.sanitize?.disableTaskLists === true;
+    const key = [
+        breaks ? 'breaks' : 'default',
+        [...protocols.links].sort().join(','),
+        [...protocols.images].sort().join(','),
+        allowedTags ? [...allowedTags].sort().join(',') : '*',
+        disableTaskLists ? 'no-tasks' : 'tasks'
+    ].join('|');
     let instance = instances.get(key);
     if (!instance) {
-        instance = new Marked({ gfm: true, breaks, renderer: sanitizingRenderer });
+        instance = new Marked({
+            gfm: true,
+            breaks,
+            renderer: createSanitizingRenderer(protocols, allowedTags, disableTaskLists)
+        });
         instances.set(key, instance);
     }
     return instance;

package/dist/MarkdownText/properties.d.ts

@@ -20,6 +20,57 @@ export type OptionalMarkdownTextProperties = {
      * worse than none.
      */
     tableLabel?: string;
+    /**
+     * Narrow which URL protocols survive on rendered links/images. See
+     * `MarkdownSanitizeOptions`.
+     */
+    sanitize?: MarkdownSanitizeOptions;
+};
+/**
+ * A consumer's own link policy can be stricter than the library default
+ * (`http:`/`https:`/`mailto:`/`tel:` for links, `http:`/`https:` for images) —
+ * for example, no live `mailto:`/`tel:` in a chat surface. `allowedProtocols`
+ * lets a caller restrict which of those defaults survive; it is intersected
+ * with the library's own allow-list for each surface, so it can only NARROW
+ * what already renders, never widen it (listing `javascript:` here can never
+ * resurrect it). Omitting `sanitize`, or `allowedProtocols`, keeps today's
+ * defaults untouched. This is independent of the "raw HTML is always escaped"
+ * guarantee, which has no opt-out.
+ */
+export type MarkdownSanitizeOptions = {
+    /**
+     * Protocols (e.g. `'https:'`, `'mailto:'`) allowed to survive on rendered
+     * links and images, intersected with the library's own default allow-list
+     * for each surface. An empty array drops every link and image, keeping
+     * their text.
+     */
+    allowedProtocols?: string[];
+    /**
+     * Narrows which markdown-GENERATED tags are allowed to render as
+     * themselves. Unlike `allowedProtocols` there is no pre-set default list to
+     * intersect with — every tag `marked`'s own GFM output can produce renders
+     * normally until this is supplied, so passing it narrows from "everything"
+     * rather than from a built-in allow-list. A disallowed tag renders its
+     * parsed inner content as plain markup-free text instead of the element —
+     * the same "keep the text, drop the element" contract `allowedProtocols`
+     * uses for an unsafe link/image. Recognised names: `'a'`, `'img'`,
+     * `'strong'`, `'em'`, `'del'`, `'code'` (inline), `'pre'` (code block),
+     * `'blockquote'`, `'ul'`, `'ol'`, `'table'`, `'hr'`, and `'h1'`–`'h6'`. An
+     * unrecognised name is simply ignored — it narrows nothing, it does not
+     * error. Omitting `allowedTags` keeps today's defaults untouched: every tag
+     * renders as it does now. This is independent of the "raw HTML is always
+     * escaped" guarantee, which has no opt-out and is never affected by this
+     * list.
+     */
+    allowedTags?: string[];
+    /**
+     * Render GFM task-list items (`- [ ] done`) as plain list text instead of
+     * an `<input type="checkbox">`. The checkbox already renders `disabled` by
+     * default (it never submits or toggles), so this is a presentation choice
+     * for surfaces that would rather not show checkbox glyphs at all, not a
+     * safety one. Defaults to `false`, keeping today's checkbox rendering.
+     */
+    disableTaskLists?: boolean;
 };
 export type RenderMarkdownOptions = {
     /** Render single newlines as `<br>` (GFM "breaks" mode). */
@@ -33,4 +84,6 @@ export type RenderMarkdownOptions = {
     inline?: boolean;
     /** Accessible name for the scroll region wrapping each table. See `MarkdownTextProperties.tableLabel`. */
     tableLabel?: string;
+    /** Narrow the protocol allow-list. See `MarkdownSanitizeOptions`. */
+    sanitize?: MarkdownSanitizeOptions;
 };

package/dist-wc/index.js

@@ -9834,7 +9834,7 @@ var root$64 = /* @__PURE__ */ from_html("<span class=\"separator svelte-14lwsom\
 };
 function KeyboardInput(e, t) {
 	push(t, !0), append_styles$1(e, $$css$63);
-	let n = prop(t, "keys", 7), i = prop(t, "separator", 7, "+"), a = prop(t, "testId", 7), o = prop(t, "onclick", 7), s = prop(t, "classes", 7), c = {
+	let n = prop(t, "keys", 7), i = prop(t, "separator", 7, "+"), a = prop(t, "testId", 7), o = prop(t, "onclick", 7), s = prop(t, "classes", 7), c = prop(t, "literal", 7, !1), l = {
 		cmd: "⌘",
 		command: "⌘",
 		ctrl: "⌃",
@@ -9853,14 +9853,14 @@ function KeyboardInput(e, t) {
 		left: "←",
 		right: "→",
 		space: "␣"
-	}, l = /* @__PURE__ */ user_derived(() => Array.isArray(n()) ? n() : n().split(i()).map((e) => e.trim())), u = /* @__PURE__ */ user_derived(() => typeof o() == "function");
-	function f(e) {
-		return c[e.toLowerCase()] ?? e;
-	}
+	}, u = /* @__PURE__ */ user_derived(() => Array.isArray(n()) ? n() : n().split(i()).map((e) => e.trim())), f = /* @__PURE__ */ user_derived(() => typeof o() == "function");
 	function p(e) {
+		return c() ? e : l[e.toLowerCase()] ?? e;
+	}
+	function h(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), o()?.(new MouseEvent("click")));
 	}
-	var h = {
+	var S = {
 		get keys() {
 			return n();
 		},
@@ -9890,9 +9890,15 @@ function KeyboardInput(e, t) {
 		},
 		set classes(e) {
 			s(e), flushSync();
+		},
+		get literal() {
+			return c();
+		},
+		set literal(e = !1) {
+			c(e), flushSync();
 		}
-	}, S = root_2$41();
-	return each(S, 21, () => get(l), index, (e, t, n) => {
+	}, C = root_2$41();
+	return each(C, 21, () => get(u), index, (e, t, n) => {
 		var a = root_1$53(), o = first_child(a), s = (e) => {
 			var t = root$64(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, i())), append(e, t);
@@ -9901,21 +9907,22 @@ function KeyboardInput(e, t) {
 			n > 0 && e(s);
 		});
 		var c = sibling(o, 2), l = child(c, !0);
-		reset(c), template_effect((e) => set_text(l, e), [() => f(get(t))]), append(e, a);
-	}), reset(S), template_effect(() => {
-		set_class(S, 1, `keyboard-input ${s() ?? "" ?? ""}`, "svelte-14lwsom"), set_attribute(S, "data-pw", typeof a() == "string" ? a() : null), set_attribute(S, "testid", typeof a() == "string" ? a() : null), set_attribute(S, "role", get(u) ? "button" : null), set_attribute(S, "tabindex", get(u) ? 0 : null);
-	}), delegated("click", S, function(...e) {
-		(get(u) ? o() : null)?.apply(this, e);
-	}), delegated("keydown", S, function(...e) {
-		(get(u) ? p : null)?.apply(this, e);
-	}), append(e, S), pop(h);
+		reset(c), template_effect((e) => set_text(l, e), [() => p(get(t))]), append(e, a);
+	}), reset(C), template_effect(() => {
+		set_class(C, 1, `keyboard-input ${s() ?? "" ?? ""}`, "svelte-14lwsom"), set_attribute(C, "data-pw", typeof a() == "string" ? a() : null), set_attribute(C, "testid", typeof a() == "string" ? a() : null), set_attribute(C, "role", get(f) ? "button" : null), set_attribute(C, "tabindex", get(f) ? 0 : null);
+	}), delegated("click", C, function(...e) {
+		(get(f) ? o() : null)?.apply(this, e);
+	}), delegated("keydown", C, function(...e) {
+		(get(f) ? h : null)?.apply(this, e);
+	}), append(e, C), pop(S);
 }
 delegate(["click", "keydown"]), create_custom_element(KeyboardInput, {
 	keys: {},
 	separator: {},
 	testId: {},
 	onclick: {},
-	classes: {}
+	classes: {},
+	literal: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/KeyboardInput.wc.svelte
@@ -9943,6 +9950,10 @@ customElements.define("sui-keyboard-input", create_custom_element(KeyboardInput_
 		type: "String"
 	},
 	classes: { type: "String" },
+	literal: {
+		reflect: !0,
+		type: "Boolean"
+	},
 	onclick: { type: "Object" }
 }, [], [], { mode: "open" }));
 //#endregion
@@ -33643,6 +33654,71 @@ function hasSafeProtocol(e, t) {
 function escapeHtml(e) {
 	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
+function narrow(e, t) {
+	if (!t) return e;
+	let n = new Set(t.map((e) => e.toLowerCase()));
+	return new Set([...e].filter((e) => n.has(e)));
+}
+function resolveProtocolSets(e) {
+	return {
+		links: narrow(SAFE_LINK_PROTOCOLS, e?.allowedProtocols),
+		images: narrow(SAFE_IMAGE_PROTOCOLS, e?.allowedProtocols)
+	};
+}
+function resolveTagAllowList(e) {
+	return e ? new Set(e) : null;
+}
+function tagAllowed(e, t) {
+	return e === null || e.has(t);
+}
+function createSanitizingRenderer(e, t, n) {
+	return {
+		html(e) {
+			return escapeHtml(e.text);
+		},
+		link(n) {
+			return hasSafeProtocol(n.href, e.links) && tagAllowed(t, "a") ? !1 : escapeHtml(n.text);
+		},
+		image(n) {
+			return hasSafeProtocol(n.href, e.images) && tagAllowed(t, "img") ? !1 : escapeHtml(n.text);
+		},
+		strong(e) {
+			return tagAllowed(t, "strong") ? !1 : this.parser.parseInline(e.tokens);
+		},
+		em(e) {
+			return tagAllowed(t, "em") ? !1 : this.parser.parseInline(e.tokens);
+		},
+		del(e) {
+			return tagAllowed(t, "del") ? !1 : this.parser.parseInline(e.tokens);
+		},
+		codespan(e) {
+			return tagAllowed(t, "code") ? !1 : escapeHtml(e.text);
+		},
+		code(e) {
+			return tagAllowed(t, "pre") ? !1 : `${escapeHtml(e.text)}\n`;
+		},
+		blockquote(e) {
+			return tagAllowed(t, "blockquote") ? !1 : this.parser.parse(e.tokens);
+		},
+		heading(e) {
+			return tagAllowed(t, `h${e.depth}`) ? !1 : `${this.parser.parseInline(e.tokens)}\n`;
+		},
+		list(e) {
+			return tagAllowed(t, e.ordered ? "ol" : "ul") ? !1 : e.items.map((e) => this.parser.parse(e.tokens)).join("");
+		},
+		table(e) {
+			if (tagAllowed(t, "table")) return !1;
+			let n = (e) => e.map((e) => this.parser.parseInline(e.tokens)).join(" | ");
+			return `<p>${[n(e.header), ...e.rows.map(n)].join("<br>")}</p>`;
+		},
+		hr() {
+			return tagAllowed(t, "hr") ? !1 : "";
+		},
+		checkbox() {
+			return n ? "" : !1;
+		}
+	};
+}
 function annotateExternalLinks(e) {
 	return e.replace(EXTERNAL_ANCHOR_PATTERN, "<a href=\"$1\" target=\"_blank\" rel=\"noopener noreferrer\"");
 }
@@ -33651,12 +33727,18 @@ function wrapTables(e, t) {
 	return e.replace(TABLE_OPEN, `${n}<table>`).replace(TABLE_CLOSE, "</table></div>");
 }
 function instanceFor(e) {
-	let t = e.breaks === !0, n = t ? "breaks" : "default", i = instances.get(n);
-	return i || (i = new q({
+	let t = e.breaks === !0, n = resolveProtocolSets(e.sanitize), i = resolveTagAllowList(e.sanitize?.allowedTags), a = e.sanitize?.disableTaskLists === !0, o = [
+		t ? "breaks" : "default",
+		[...n.links].sort().join(","),
+		[...n.images].sort().join(","),
+		i ? [...i].sort().join(",") : "*",
+		a ? "no-tasks" : "tasks"
+	].join("|"), s = instances.get(o);
+	return s || (s = new q({
 		gfm: !0,
 		breaks: t,
-		renderer: sanitizingRenderer
-	}), instances.set(n, i)), i;
+		renderer: createSanitizingRenderer(n, i, a)
+	}), instances.set(o, s)), s;
 }
 function renderMarkdown(e, t = {}) {
 	let n = instanceFor(t), i = t.inline === !0 ? n.parseInline(e) : n.parse(e);
@@ -33664,23 +33746,13 @@ function renderMarkdown(e, t = {}) {
 	let a = annotateExternalLinks(i);
 	return t.inline === !0 ? a : wrapTables(a, t.tableLabel);
 }
-var SAFE_LINK_PROTOCOLS, SAFE_IMAGE_PROTOCOLS, NUMERIC_REFERENCE, NAMED_WHITESPACE_REFERENCE, STRIPPED_BY_URL_PARSER, sanitizingRenderer, instances, EXTERNAL_ANCHOR_PATTERN, TABLE_OPEN, TABLE_CLOSE, init_markdown = __esmMin((() => {
+var SAFE_LINK_PROTOCOLS, SAFE_IMAGE_PROTOCOLS, NUMERIC_REFERENCE, NAMED_WHITESPACE_REFERENCE, STRIPPED_BY_URL_PARSER, instances, EXTERNAL_ANCHOR_PATTERN, TABLE_OPEN, TABLE_CLOSE, init_markdown = __esmMin((() => {
 	init_marked_esm(), SAFE_LINK_PROTOCOLS = new Set([
 		"http:",
 		"https:",
 		"mailto:",
 		"tel:"
-	]), SAFE_IMAGE_PROTOCOLS = new Set(["http:", "https:"]), NUMERIC_REFERENCE = /&#(x[0-9a-f]+|[0-9]+);?/gi, NAMED_WHITESPACE_REFERENCE = /&(tab|newline);/gi, STRIPPED_BY_URL_PARSER = /[\u0000-\u0020\u007f]/g, sanitizingRenderer = {
-		html(e) {
-			return escapeHtml(e.text);
-		},
-		link(e) {
-			return hasSafeProtocol(e.href, SAFE_LINK_PROTOCOLS) ? !1 : escapeHtml(e.text);
-		},
-		image(e) {
-			return hasSafeProtocol(e.href, SAFE_IMAGE_PROTOCOLS) ? !1 : escapeHtml(e.text);
-		}
-	}, instances = /* @__PURE__ */ new Map(), EXTERNAL_ANCHOR_PATTERN = /<a href="(https?:\/\/[^"]*)"/g, TABLE_OPEN = /<table>/g, TABLE_CLOSE = /<\/table>/g;
+	]), SAFE_IMAGE_PROTOCOLS = new Set(["http:", "https:"]), NUMERIC_REFERENCE = /&#(x[0-9a-f]+|[0-9]+);?/gi, NAMED_WHITESPACE_REFERENCE = /&(tab|newline);/gi, STRIPPED_BY_URL_PARSER = /[\u0000-\u0020\u007f]/g, instances = /* @__PURE__ */ new Map(), EXTERNAL_ANCHOR_PATTERN = /<a href="(https?:\/\/[^"]*)"/g, TABLE_OPEN = /<table>/g, TABLE_CLOSE = /<\/table>/g;
 })), root$11 = /* @__PURE__ */ from_html("<div class=\"avatar svelte-ivh8u\"><!></div>"), root_1$10 = /* @__PURE__ */ from_html("<div class=\"header svelte-ivh8u\"><!></div>"), root_2$7 = /* @__PURE__ */ from_html("<span class=\"marker svelte-ivh8u\" aria-hidden=\"true\"></span>"), root_3$7 = /* @__PURE__ */ from_html("<div class=\"body svelte-ivh8u\"><!></div>"), root_4$6 = /* @__PURE__ */ from_html("<div class=\"body svelte-ivh8u\"></div>"), root_5$6 = /* @__PURE__ */ from_html("<div class=\"body text svelte-ivh8u\"> </div>"), root_6$6 = /* @__PURE__ */ from_html("<div class=\"clamp-toggle svelte-ivh8u\"><!></div>"), root_7$5 = /* @__PURE__ */ from_html("<span class=\"typing svelte-ivh8u\"><!></span>"), root_8$5 = /* @__PURE__ */ from_html("<div class=\"message-attachments svelte-ivh8u\"><!></div>"), root_9$2 = /* @__PURE__ */ from_html("<div class=\"action svelte-ivh8u\"><!></div>"), root_10$1 = /* @__PURE__ */ from_html("<div class=\"action svelte-ivh8u\"><!></div> <div class=\"action svelte-ivh8u\"><!></div>", 1), root_11$1 = /* @__PURE__ */ from_html("<div class=\"actions svelte-ivh8u\"><!> <!> <!> <!></div>"), root_12$1 = /* @__PURE__ */ from_html("<article><div class=\"row svelte-ivh8u\"><!> <div class=\"content svelte-ivh8u\"><!> <div><!> <!> <!> <!></div> <!> <!></div></div></article>"), $$css$12 = {
 	hash: "svelte-ivh8u",
 	code: ".chat-message.svelte-ivh8u {box-sizing:border-box;display:flex;flex-direction:column;max-width:var(--chat-message-max-width, 82%);margin:var(--chat-message-margin, 0);}.chat-message.party-sender.svelte-ivh8u {align-self:flex-end;align-items:flex-end;}.chat-message.party-responder.svelte-ivh8u {align-self:flex-start;align-items:flex-start;}.row.svelte-ivh8u {display:flex;gap:var(--chat-message-gap, 10px);align-items:flex-end;width:100%;}.chat-message.party-sender.svelte-ivh8u .row:where(.svelte-ivh8u) {flex-direction:row-reverse;}.avatar.svelte-ivh8u {display:flex;flex-shrink:0;align-items:center;justify-content:center;}.content.svelte-ivh8u {display:flex;flex-direction:column;gap:var(--chat-message-content-gap, 6px);min-width:0;}.header.svelte-ivh8u {font-size:var(--chat-message-header-font-size, 0.75rem);color:var(--chat-message-header-color, #71717a);}.bubble.svelte-ivh8u {box-sizing:border-box;padding:var(--chat-message-bubble-padding, 9px 13px);border-radius:var(--chat-message-bubble-border-radius, 16px);font-size:var(--chat-message-font-size, 0.9375rem);line-height:var(--chat-message-line-height, 1.5);color:var(--chat-message-color, #27272a);background:var(--chat-message-background, #f4f4f5);border:var(--chat-message-border, none);box-shadow:var(--chat-message-box-shadow, none);word-wrap:break-word;overflow-wrap:anywhere;}\n\n  /* Only the marker variant becomes a containing block: making every bubble relative\n     would silently re-base any absolutely-positioned content a consumer renders in a\n     body snippet. */.bubble.has-marker.svelte-ivh8u {position:relative;}.marker.svelte-ivh8u {\n    /* Decorative and absolutely positioned, so it sits over the bubble's leading\n       padding — where a link at the start of a responder message also sits. Without\n       this it silently eats those clicks. */pointer-events:none;position:absolute;inset-block:var(--chat-message-marker-inset-block, 0);\n    /* Logical, so the bar follows `role` alignment into RTL instead of pinning left. */inset-inline-start:var(--chat-message-marker-offset, 0px);width:var(--chat-message-marker-width, 2px);border-radius:var(--chat-message-marker-border-radius, 0);background:var(--chat-message-marker-color, #6d28d9);}.chat-message.party-sender.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-sender-color, #ffffff);background:var(--chat-message-sender-background, #18181b);border:var(--chat-message-sender-border, none);border-radius:var(\n      --chat-message-sender-border-radius,\n      var(--chat-message-bubble-border-radius, 16px)\n    );}.chat-message.party-responder.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-responder-color, var(--chat-message-color, #27272a));background:var(--chat-message-responder-background, transparent);border:var(--chat-message-responder-border, none);padding:var(--chat-message-responder-padding, 2px 0);}.chat-message.error.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-error-color, #e0334b);}.text.svelte-ivh8u {white-space:pre-wrap;}.typing.svelte-ivh8u {display:inline-flex;align-items:center;}.message-attachments.svelte-ivh8u {display:flex;flex-direction:column;gap:var(--chat-message-attachments-gap, 8px);margin:var(--chat-message-attachments-margin, 4px 0 0 0);}.message-attachments.svelte-ivh8u:empty {display:none;}.actions.svelte-ivh8u {display:flex;align-items:center;gap:var(--chat-message-actions-gap, 2px);opacity:var(--chat-message-actions-opacity, 0);transition:var(--chat-message-actions-transition, opacity 0.15s ease);--button-width: var(--chat-message-action-size, 28px);--button-height: var(--chat-message-action-size, 28px);--button-padding: var(--chat-message-action-padding, 6px);--button-border-radius: var(--chat-message-action-border-radius, 6px);--button-color: var(--chat-message-action-background-color, transparent);--button-text-color: var(--chat-message-action-color, #71717a);--button-content-gap: 0px;--button-hover-color: var(--chat-message-action-hover-background-color, #f4f4f5);}.chat-message.svelte-ivh8u:hover .actions:where(.svelte-ivh8u),\n  .chat-message.svelte-ivh8u:focus-within .actions:where(.svelte-ivh8u) {opacity:1;}.action.svelte-ivh8u {display:flex;}.action.svelte-ivh8u svg {height:100%;width:100%;}\n\n  @media (hover: none) {.actions.svelte-ivh8u {opacity:1;}\n  }.clamp-toggle.svelte-ivh8u {display:flex;margin-top:var(--chat-message-clamp-toggle-margin-top, 4px);}\n\n  /* Clamp the rendered body, not the source: the message keeps its markup and its\n     copy text, and expanding is a state change rather than a re-render. */.bubble[data-clamped='true'].svelte-ivh8u .body:where(.svelte-ivh8u) {display:-webkit-box;line-clamp:var(--chat-message-clamp-lines, var(--chat-message-clamp-lines-prop, 2));-webkit-line-clamp:var(--chat-message-clamp-lines, var(--chat-message-clamp-lines-prop, 2));-webkit-box-orient:vertical;overflow:hidden;}.body.svelte-ivh8u p {margin:var(--chat-message-paragraph-margin, 0 0 0.5em 0);}.body.svelte-ivh8u p:last-child {margin-bottom:0;}.body.svelte-ivh8u a {color:var(--chat-message-link-color, #6d28d9);text-decoration:underline;text-underline-offset:2px;}.body.svelte-ivh8u code {font-family:var(--chat-message-code-font-family, ui-monospace, monospace);font-size:0.88em;background:var(--chat-message-code-background, rgba(0, 0, 0, 0.05));padding:1px 5px;border-radius:4px;}.body.svelte-ivh8u pre {background:var(--chat-message-pre-background, rgba(0, 0, 0, 0.05));padding:10px 12px;border-radius:8px;overflow-x:auto;margin:0.5em 0;}.body.svelte-ivh8u pre code {background:transparent;padding:0;}.body.svelte-ivh8u ul,\n  .body.svelte-ivh8u ol {margin:var(--chat-message-list-margin, 0.4em 0);padding-left:var(--chat-message-list-padding, 1.4em);}.body.svelte-ivh8u li {margin:0.2em 0;}.body.svelte-ivh8u h1,\n  .body.svelte-ivh8u h2,\n  .body.svelte-ivh8u h3,\n  .body.svelte-ivh8u h4,\n  .body.svelte-ivh8u h5,\n  .body.svelte-ivh8u h6 {margin:var(--chat-message-heading-margin, 0.8em 0 0.4em 0);line-height:1.3;}.body.svelte-ivh8u h1 {font-size:1.35em;}.body.svelte-ivh8u h2 {font-size:1.2em;}.body.svelte-ivh8u h3 {font-size:1.1em;}.body.svelte-ivh8u h4,\n  .body.svelte-ivh8u h5,\n  .body.svelte-ivh8u h6 {font-size:1em;}.body.svelte-ivh8u blockquote {margin:0.5em 0;padding:2px 0 2px 12px;border-left:3px solid var(--chat-message-blockquote-border-color, rgba(0, 0, 0, 0.15));opacity:var(--chat-message-blockquote-opacity, 0.85);}.body.svelte-ivh8u table {display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0.5em 0;}.body.svelte-ivh8u th,\n  .body.svelte-ivh8u td {padding:5px 10px;border:1px solid var(--chat-message-table-border-color, rgba(0, 0, 0, 0.12));text-align:left;}.body.svelte-ivh8u th {background:var(--chat-message-table-header-background, rgba(0, 0, 0, 0.04));}.body.svelte-ivh8u img {max-width:100%;border-radius:var(--chat-message-image-border-radius, 8px);}.body.svelte-ivh8u hr {border:none;border-top:1px solid var(--chat-message-hr-color, rgba(0, 0, 0, 0.12));margin:0.8em 0;}"
@@ -37000,11 +37072,12 @@ var root$4 = /* @__PURE__ */ from_html("<div></div>"), $$css$5 = {
 };
 function MarkdownText(e, t) {
 	push(t, !0), append_styles$1(e, $$css$5);
-	let n = prop(t, "markdown", 7), i = prop(t, "breaks", 7, !1), a = prop(t, "testId", 7), o = prop(t, "classes", 7), s = prop(t, "tableLabel", 7), c = /* @__PURE__ */ user_derived(() => renderMarkdown(n(), {
+	let n = prop(t, "markdown", 7), i = prop(t, "breaks", 7, !1), a = prop(t, "testId", 7), o = prop(t, "classes", 7), s = prop(t, "tableLabel", 7), c = prop(t, "sanitize", 7), l = /* @__PURE__ */ user_derived(() => renderMarkdown(n(), {
 		breaks: i(),
-		tableLabel: s()
+		tableLabel: s(),
+		sanitize: c()
 	}));
-	var l = {
+	var u = {
 		get markdown() {
 			return n();
 		},
@@ -37034,18 +37107,25 @@ function MarkdownText(e, t) {
 		},
 		set tableLabel(e) {
 			s(e), flushSync();
+		},
+		get sanitize() {
+			return c();
+		},
+		set sanitize(e) {
+			c(e), flushSync();
 		}
-	}, u = root$4();
-	return html(u, () => get(c), !0), reset(u), template_effect(() => {
-		set_class(u, 1, `markdown-text ${o() ?? "" ?? ""}`, "svelte-1d6q5h0"), set_attribute(u, "data-pw", typeof a() == "string" ? a() : null), set_attribute(u, "testid", typeof a() == "string" ? a() : null);
-	}), append(e, u), pop(l);
+	}, f = root$4();
+	return html(f, () => get(l), !0), reset(f), template_effect(() => {
+		set_class(f, 1, `markdown-text ${o() ?? "" ?? ""}`, "svelte-1d6q5h0"), set_attribute(f, "data-pw", typeof a() == "string" ? a() : null), set_attribute(f, "testid", typeof a() == "string" ? a() : null);
+	}), append(e, f), pop(u);
 }
 create_custom_element(MarkdownText, {
 	markdown: {},
 	breaks: {},
 	testId: {},
 	classes: {},
-	tableLabel: {}
+	tableLabel: {},
+	sanitize: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/MarkdownText.wc.svelte
@@ -37070,7 +37150,8 @@ customElements.define("sui-markdown-text", create_custom_element(MarkdownText_wc
 	tableLabel: {
 		attribute: "table-label",
 		type: "String"
-	}
+	},
+	sanitize: { type: "Object" }
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/wc/components/ChatComposer.wc.svelte

package/package.json

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