@juspay/svelte-ui-components 4.3.0 → 4.5.0

package/dist/EmptyState/EmptyState.svelte

@@ -9,7 +9,8 @@
     classes,
     testId,
     titleSnippet,
-    descriptionSnippet
+    descriptionSnippet,
+    density
   }: EmptyStateProperties = $props();
 </script>
 
@@ -17,6 +18,7 @@
   class="empty-state {classes ?? ''}"
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
+  data-density={typeof density === 'string' ? density : null}
 >
   {#if typeof icon === 'function'}
     <div class="empty-state-icon">
@@ -62,13 +64,28 @@
   .empty-state {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: var(--empty-state-align-items, center);
     padding: var(--empty-state-padding, 32px 16px);
     text-align: var(--empty-state-text-align, center);
     gap: var(--empty-state-gap, 0px);
     color: inherit;
   }
 
+  /* Density-scoped fallbacks. Higher specificity than `.empty-state` alone, so
+     these only take over when `data-density` is actually set — no attribute,
+     no match, today's defaults above stand untouched. `--empty-state-padding`
+     and `--empty-state-gap` are read first in both cases, so an instance-level
+     override always wins over either density's default. */
+  .empty-state[data-density='page'] {
+    padding: var(--empty-state-padding, 48px 24px);
+    gap: var(--empty-state-gap, 12px);
+  }
+
+  .empty-state[data-density='panel'] {
+    padding: var(--empty-state-padding, 16px 12px);
+    gap: var(--empty-state-gap, 4px);
+  }
+
   .empty-state-icon {
     width: var(--empty-state-icon-size, 48px);
     height: var(--empty-state-icon-size, 48px);

package/dist/EmptyState/properties.d.ts

@@ -16,6 +16,16 @@ export type OptionalEmptyStateProperties = {
     children?: Snippet;
     classes?: string;
     testId?: string;
+    /**
+     * Sets sane padding/gap defaults for the placeholder's context, without
+     * requiring a wrapper class. Omit for today's default sizing (unchanged).
+     * `'page'` is roomier, for a full route/view standing in for its content.
+     * `'panel'` is tighter, for a constrained panel, popover, or rail.
+     * Exposed on the root element as `data-density` so a consumer's own CSS can
+     * target it too. Either default can still be overridden per-instance with
+     * `--empty-state-padding` / `--empty-state-gap`, which always take priority.
+     */
+    density?: 'page' | 'panel';
     /**
      * Optional snippet that replaces the `title` string at render time.
      * When provided, the mandatory `title` prop is still required for backward-compatibility

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

@@ -13717,12 +13717,12 @@ customElements.define("sui-card", create_custom_element(Card_wc, {
 //#region src/lib/EmptyState/EmptyState.svelte
 var root$44 = /* @__PURE__ */ from_html("<div class=\"empty-state-icon svelte-vmfces\"><!></div>"), root_1$37 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"><!></div>"), root_2$31 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"> </div>"), root_3$29 = /* @__PURE__ */ from_html("<div class=\"empty-state-actions svelte-vmfces\"><!></div>"), root_4$25 = /* @__PURE__ */ from_html("<div><!> <div class=\"empty-state-title svelte-vmfces\"><!></div> <!> <!></div>"), $$css$43 = {
 	hash: "svelte-vmfces",
-	code: ".empty-state.svelte-vmfces {display:flex;flex-direction:column;align-items:center;padding:var(--empty-state-padding, 32px 16px);text-align:var(--empty-state-text-align, center);gap:var(--empty-state-gap, 0px);color:inherit;}.empty-state-icon.svelte-vmfces {width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);color:var(--empty-state-icon-color, currentColor);opacity:var(--empty-state-icon-opacity, 0.4);margin-bottom:var(--empty-state-icon-margin-bottom, 16px);display:flex;align-items:center;justify-content:center;}.empty-state-icon.svelte-vmfces svg {width:100%;height:100%;}.empty-state-title.svelte-vmfces {font-size:var(--empty-state-title-font-size, 16px);font-weight:var(--empty-state-title-font-weight, 600);color:var(--empty-state-title-color, inherit);}.empty-state-description.svelte-vmfces {font-size:var(--empty-state-description-font-size, 14px);color:var(--empty-state-description-color, inherit);opacity:var(--empty-state-description-opacity, 0.6);max-width:var(--empty-state-description-max-width, 360px);margin-top:4px;}.empty-state-actions.svelte-vmfces {display:var(--empty-state-actions-display, block);flex-direction:var(--empty-state-actions-flex-direction, row);align-items:var(--empty-state-actions-align-items, stretch);justify-content:var(--empty-state-actions-justify-content, normal);gap:var(--empty-state-actions-gap, 0);margin-top:var(--empty-state-actions-margin-top, 16px);}"
+	code: ".empty-state.svelte-vmfces {display:flex;flex-direction:column;align-items:var(--empty-state-align-items, center);padding:var(--empty-state-padding, 32px 16px);text-align:var(--empty-state-text-align, center);gap:var(--empty-state-gap, 0px);color:inherit;}\n\n  /* Density-scoped fallbacks. Higher specificity than `.empty-state` alone, so\n     these only take over when `data-density` is actually set — no attribute,\n     no match, today's defaults above stand untouched. `--empty-state-padding`\n     and `--empty-state-gap` are read first in both cases, so an instance-level\n     override always wins over either density's default. */.empty-state[data-density='page'].svelte-vmfces {padding:var(--empty-state-padding, 48px 24px);gap:var(--empty-state-gap, 12px);}.empty-state[data-density='panel'].svelte-vmfces {padding:var(--empty-state-padding, 16px 12px);gap:var(--empty-state-gap, 4px);}.empty-state-icon.svelte-vmfces {width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);color:var(--empty-state-icon-color, currentColor);opacity:var(--empty-state-icon-opacity, 0.4);margin-bottom:var(--empty-state-icon-margin-bottom, 16px);display:flex;align-items:center;justify-content:center;}.empty-state-icon.svelte-vmfces svg {width:100%;height:100%;}.empty-state-title.svelte-vmfces {font-size:var(--empty-state-title-font-size, 16px);font-weight:var(--empty-state-title-font-weight, 600);color:var(--empty-state-title-color, inherit);}.empty-state-description.svelte-vmfces {font-size:var(--empty-state-description-font-size, 14px);color:var(--empty-state-description-color, inherit);opacity:var(--empty-state-description-opacity, 0.6);max-width:var(--empty-state-description-max-width, 360px);margin-top:4px;}.empty-state-actions.svelte-vmfces {display:var(--empty-state-actions-display, block);flex-direction:var(--empty-state-actions-flex-direction, row);align-items:var(--empty-state-actions-align-items, stretch);justify-content:var(--empty-state-actions-justify-content, normal);gap:var(--empty-state-actions-gap, 0);margin-top:var(--empty-state-actions-margin-top, 16px);}"
 };
 function EmptyState(e, t) {
 	push(t, !0), append_styles$1(e, $$css$43);
-	let n = prop(t, "title", 7), i = prop(t, "description", 7), a = prop(t, "icon", 7), o = prop(t, "children", 7), s = prop(t, "classes", 7), c = prop(t, "testId", 7), l = prop(t, "titleSnippet", 7), u = prop(t, "descriptionSnippet", 7);
-	var f = {
+	let n = prop(t, "title", 7), i = prop(t, "description", 7), a = prop(t, "icon", 7), o = prop(t, "children", 7), s = prop(t, "classes", 7), c = prop(t, "testId", 7), l = prop(t, "titleSnippet", 7), u = prop(t, "descriptionSnippet", 7), f = prop(t, "density", 7);
+	var p = {
 		get title() {
 			return n();
 		},
@@ -13770,47 +13770,53 @@ function EmptyState(e, t) {
 		},
 		set descriptionSnippet(e) {
 			u(e), flushSync();
+		},
+		get density() {
+			return f();
+		},
+		set density(e) {
+			f(e), flushSync();
 		}
-	}, p = root_4$25(), h = child(p), S = (e) => {
+	}, h = root_4$25(), S = child(h), C = (e) => {
 		var t = root$44();
 		snippet(child(t), a), reset(t), append(e, t);
 	};
-	if_block(h, (e) => {
-		typeof a() == "function" && e(S);
+	if_block(S, (e) => {
+		typeof a() == "function" && e(C);
 	});
-	var C = sibling(h, 2), k = child(C), R = (e) => {
+	var k = sibling(S, 2), R = child(k), te = (e) => {
 		var t = comment();
 		snippet(first_child(t), l), append(e, t);
-	}, te = (e) => {
+	}, ne = (e) => {
 		var t = text();
 		template_effect(() => set_text(t, n())), append(e, t);
 	};
-	if_block(k, (e) => {
-		typeof l() == "function" ? e(R) : e(te, -1);
-	}), reset(C);
-	var ne = sibling(C, 2), re = (e) => {
+	if_block(R, (e) => {
+		typeof l() == "function" ? e(te) : e(ne, -1);
+	}), reset(k);
+	var re = sibling(k, 2), G = (e) => {
 		var t = root_1$37();
 		snippet(child(t), u), reset(t), template_effect(() => {
 			set_attribute(t, "data-pw", typeof c() == "string" ? `${c()}-description` : null), set_attribute(t, "testid", typeof c() == "string" ? `${c()}-description` : null);
 		}), append(e, t);
-	}, G = (e) => {
+	}, be = (e) => {
 		var t = root_2$31(), n = child(t, !0);
 		reset(t), template_effect(() => {
 			set_attribute(t, "data-pw", typeof c() == "string" ? `${c()}-description` : null), set_attribute(t, "testid", typeof c() == "string" ? `${c()}-description` : null), set_text(n, i());
 		}), append(e, t);
 	};
-	if_block(ne, (e) => {
-		typeof u() == "function" ? e(re) : typeof i() == "string" && i().length > 0 && e(G, 1);
+	if_block(re, (e) => {
+		typeof u() == "function" ? e(G) : typeof i() == "string" && i().length > 0 && e(be, 1);
 	});
-	var be = sibling(ne, 2), Me = (e) => {
+	var Me = sibling(re, 2), Re = (e) => {
 		var t = root_3$29();
 		snippet(child(t), o), reset(t), append(e, t);
 	};
-	return if_block(be, (e) => {
-		typeof o() == "function" && e(Me);
-	}), reset(p), template_effect(() => {
-		set_class(p, 1, `empty-state ${s() ?? "" ?? ""}`, "svelte-vmfces"), set_attribute(p, "data-pw", typeof c() == "string" ? c() : null), set_attribute(p, "testid", typeof c() == "string" ? c() : null), set_attribute(C, "data-pw", typeof c() == "string" ? `${c()}-title` : null), set_attribute(C, "testid", typeof c() == "string" ? `${c()}-title` : null);
-	}), append(e, p), pop(f);
+	return if_block(Me, (e) => {
+		typeof o() == "function" && e(Re);
+	}), reset(h), template_effect(() => {
+		set_class(h, 1, `empty-state ${s() ?? "" ?? ""}`, "svelte-vmfces"), set_attribute(h, "data-pw", typeof c() == "string" ? c() : null), set_attribute(h, "testid", typeof c() == "string" ? c() : null), set_attribute(h, "data-density", typeof f() == "string" ? f() : null), set_attribute(k, "data-pw", typeof c() == "string" ? `${c()}-title` : null), set_attribute(k, "testid", typeof c() == "string" ? `${c()}-title` : null);
+	}), append(e, h), pop(p);
 }
 create_custom_element(EmptyState, {
 	title: {},
@@ -13820,7 +13826,8 @@ create_custom_element(EmptyState, {
 	classes: {},
 	testId: {},
 	titleSnippet: {},
-	descriptionSnippet: {}
+	descriptionSnippet: {},
+	density: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/EmptyState.wc.svelte
@@ -13884,6 +13891,7 @@ customElements.define("sui-empty-state", create_custom_element(EmptyState_wc, {
 		attribute: "test-id",
 		type: "String"
 	},
+	density: { type: "String" },
 	icon: { type: "Object" },
 	titleSnippet: { type: "Object" },
 	descriptionSnippet: { type: "Object" }
@@ -33635,6 +33643,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\"");
 }
@@ -33643,12 +33716,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);
@@ -33656,23 +33735,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;}"
@@ -36992,11 +37061,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();
 		},
@@ -37026,18 +37096,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
@@ -37062,7 +37139,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.3.0",
+  "version": "4.5.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",