@limetech/lime-elements 39.2.1 → 39.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [39.3.0](https://github.com/Lundalogik/lime-elements/compare/v39.2.2...v39.3.0) (2026-02-23)
+
+### Features
+
+
+* **markdown:** hydrate JSON attributes on whitelisted custom elements ([ef3a7a9](https://github.com/Lundalogik/lime-elements/commit/ef3a7a95d7340362dc7916fe16542e39278e74b0))
+
+## [39.2.2](https://github.com/Lundalogik/lime-elements/compare/v39.2.1...v39.2.2) (2026-02-22)
+
+### Bug Fixes
+
+
+* **email-viewer:** add explicit font and meta attributes to sanitization schema ([c3ea360](https://github.com/Lundalogik/lime-elements/commit/c3ea360fcc50fe7131caf366b695614d41c14e9d))
+
 ## [39.2.1](https://github.com/Lundalogik/lime-elements/compare/v39.2.0...v39.2.1) (2026-02-22)
 
 ### Bug Fixes

package/dist/cjs/limel-file-viewer.cjs.entry.js

@@ -4569,6 +4569,7 @@ class PostalMime {
     }
 }
 
+var _a, _b, _c, _d, _e, _f, _g;
 const allowedMimeTypes = new Set([
     'image/png',
     'image/jpeg',
@@ -4594,7 +4595,7 @@ const allowedMimeTypes = new Set([
 async function sanitizeEmailHTML(html) {
     const file = await index.unified()
         .use(index.rehypeParse)
-        .use(index.rehypeSanitize, getEmailSanitizationSchema())
+        .use(index.rehypeSanitize, emailSanitizationSchema)
         .use(() => {
         return (tree) => {
             index.visit(tree, 'element', (node) => {
@@ -4607,65 +4608,62 @@ async function sanitizeEmailHTML(html) {
         .process(html);
     return file.toString();
 }
+// Base src protocols from defaultSchema, extended with 'data' below.
+const defaultSrcProtocols = (_b = (_a = index.defaultSchema.protocols) === null || _a === void 0 ? void 0 : _a.src) !== null && _b !== void 0 ? _b : [];
 /**
- * Returns a rehype-sanitize schema that allows all standard HTML elements
- * and attributes needed for rich email rendering, including `style`.
+ * Rehype-sanitize schema that allows all standard HTML elements and attributes
+ * needed for rich email rendering, including `style`.
+ *
+ * Hoisted to module scope since the schema has no runtime dependencies and
+ * doesn't need to be reconstructed on every sanitization call.
  */
-function getEmailSanitizationSchema() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const defaultSrcProtocols = (_b = (_a = index.defaultSchema.protocols) === null || _a === void 0 ? void 0 : _a.src) !== null && _b !== void 0 ? _b : [];
-    const schema = Object.assign(Object.assign({}, index.defaultSchema), {
-        // Disable the 'user-content-' prefix that rehype-sanitize adds to
-        // id and name attributes. Email HTML uses ids for internal anchor
-        // links (href="#section") that must resolve without a prefix.
-        clobberPrefix: '', protocols: Object.assign(Object.assign({}, index.defaultSchema.protocols), {
-            // Email bodies often embed images as data URLs. We allow `data:` here,
-            // but still validate the MIME type in `sanitizeDangerousUrls`.
-            src: [...defaultSrcProtocols, 'http', 'https', 'data']
-        }), attributes: Object.assign(Object.assign({}, index.defaultSchema.attributes), { table: [
-                ...((_c = index.defaultSchema.attributes.table) !== null && _c !== void 0 ? _c : []),
-                // Email HTML often relies on these legacy attributes.
-                'cellpadding',
-                'cellPadding',
-                'cellspacing',
-                'cellSpacing',
-                'border',
-                'dir',
-                'width',
-                'height',
-            ], font: ['face'], colgroup: [...((_d = index.defaultSchema.attributes.colgroup) !== null && _d !== void 0 ? _d : []), 'span'], col: [...((_e = index.defaultSchema.attributes.col) !== null && _e !== void 0 ? _e : []), 'width', 'span'], '*': [
-                ...((_f = index.defaultSchema.attributes['*']) !== null && _f !== void 0 ? _f : []),
-                'style', // Allow inline styles on all elements
-                // NOTE: rehype/parse maps `class` to the HAST property name
-                // `className`, which is what rehype-sanitize checks.
-                'className',
-                'class', // Keep for completeness
-                'id', // Allow id for anchors/internal navigation
-                // Used to store remote image URLs without loading them immediately.
-                'data-remote-src',
-                'dataRemoteSrc',
-            ] }),
-        // Allow common email-specific tags
-        tagNames: [
-            ...((_g = index.defaultSchema.tagNames) !== null && _g !== void 0 ? _g : []),
-            // Allow full-document HTML emails. These tags won't render as text,
-            // but keeping them avoids their contents being surfaced as plain text.
-            'html',
-            'head',
-            'body',
-            'title',
-            'meta',
-            // Preserve embedded email CSS.
-            'style',
-            // Preserve table column sizing when using <colgroup>/<col>.
-            'colgroup',
-            'col',
-            'center', // Deprecated but widely used in email
-            'font', // Deprecated but widely used in email
-        ]
-    });
-    return schema;
-}
+const emailSanitizationSchema = Object.assign(Object.assign({}, index.defaultSchema), {
+    // Disable the 'user-content-' prefix that rehype-sanitize adds to
+    // id and name attributes. Email HTML uses ids for internal anchor
+    // links (href="#section") that must resolve without a prefix.
+    clobberPrefix: '', protocols: Object.assign(Object.assign({}, index.defaultSchema.protocols), {
+        // Email bodies often embed images as data URLs. We allow `data:` here,
+        // but still validate the MIME type in `sanitizeDangerousUrls`.
+        src: [...defaultSrcProtocols, 'data']
+    }), attributes: Object.assign(Object.assign({}, index.defaultSchema.attributes), { table: [
+            ...((_c = index.defaultSchema.attributes.table) !== null && _c !== void 0 ? _c : []),
+            // Email HTML often relies on these legacy attributes.
+            // rehype-parse converts to camelCase HAST properties.
+            'cellPadding',
+            'cellSpacing',
+            'border',
+            'dir',
+            'width',
+            'height',
+        ], font: ['color', 'size', 'face'], meta: ['charset', 'content', 'name'], colgroup: [...((_d = index.defaultSchema.attributes.colgroup) !== null && _d !== void 0 ? _d : []), 'span'], col: [...((_e = index.defaultSchema.attributes.col) !== null && _e !== void 0 ? _e : []), 'width', 'span'], '*': [
+            ...((_f = index.defaultSchema.attributes['*']) !== null && _f !== void 0 ? _f : []),
+            'style', // Allow inline styles on all elements
+            // NOTE: rehype/parse maps `class` to the HAST property name
+            // `className`, which is what rehype-sanitize checks.
+            'className',
+            'id', // Allow id for anchors/internal navigation
+            // Used to store remote image URLs without loading them immediately.
+            'dataRemoteSrc',
+        ] }),
+    // Allow common email-specific tags
+    tagNames: [
+        ...((_g = index.defaultSchema.tagNames) !== null && _g !== void 0 ? _g : []),
+        // Allow full-document HTML emails. These tags won't render as text,
+        // but keeping them avoids their contents being surfaced as plain text.
+        'html',
+        'head',
+        'body',
+        'title',
+        'meta',
+        // Preserve embedded email CSS.
+        'style',
+        // Preserve table column sizing when using <colgroup>/<col>.
+        'colgroup',
+        'col',
+        'center', // Deprecated but widely used in email
+        'font', // Deprecated but widely used in email
+    ]
+});
 /**
  * Validates and normalizes potentially dangerous URL attributes.
  *

package/dist/cjs/limel-markdown.cjs.entry.js

@@ -35,6 +35,82 @@ class ImageIntersectionObserver {
     }
 }
 
+/**
+ * After innerHTML is set on a container, custom elements receive all
+ * attribute values as strings. This function walks whitelisted custom
+ * elements and parses any attribute values that look like JSON objects
+ * or arrays, setting them as JS properties instead.
+ *
+ * This enables markdown content to include custom elements with complex
+ * props, e.g.:
+ * ```html
+ * <limel-chip text="GitHub" link='{"href":"https://github.com","target":"_blank"}'></limel-chip>
+ * ```
+ *
+ * @param container - The root element to search within.
+ * @param whitelist - The list of whitelisted custom element definitions.
+ */
+function hydrateCustomElements(container, whitelist) {
+    if (!container || !(whitelist === null || whitelist === void 0 ? void 0 : whitelist.length)) {
+        return;
+    }
+    for (const definition of whitelist) {
+        const elements = container.querySelectorAll(definition.tagName);
+        for (const element of elements) {
+            hydrateElement(element, definition.attributes);
+        }
+    }
+}
+function hydrateElement(element, attributes) {
+    for (const attrName of attributes) {
+        const value = element.getAttribute(attrName);
+        if (!value) {
+            continue;
+        }
+        const parsed = tryParseJson(value);
+        if (parsed !== undefined) {
+            // Set the JS property (camelCase) instead of the attribute
+            const propName = attributeToPropName(attrName);
+            element[propName] = parsed;
+        }
+    }
+}
+function tryParseJson(value) {
+    const trimmed = value.trim();
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+        (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+        try {
+            return JSON.parse(trimmed);
+        }
+        catch (_a) {
+            // The sanitizer may HTML-encode quotes inside attribute values.
+            // Try decoding common HTML entities before giving up.
+            try {
+                const decoded = trimmed
+                    .replaceAll('&#x22;', '"')
+                    .replaceAll('&#34;', '"')
+                    .replaceAll('&quot;', '"')
+                    .replaceAll('&#x27;', "'")
+                    .replaceAll('&#39;', "'")
+                    .replaceAll('&apos;', "'")
+                    .replaceAll('&amp;', '&');
+                return JSON.parse(decoded);
+            }
+            catch (_b) {
+                return;
+            }
+        }
+    }
+}
+/**
+ * Convert a kebab-case attribute name to a camelCase property name.
+ * e.g. "menu-items" → "menuItems"
+ * @param attrName
+ */
+function attributeToPropName(attrName) {
+    return attrName.replaceAll(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
 const markdownCss = () => `@charset "UTF-8";code{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-size:var(--limel-theme-default-small-font-size);letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:var(--limel-theme-default-font-size)}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:var(--limel-theme-default-font-size);word-break:break-word}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:"";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:var(--limel-theme-default-font-size)}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}blockquote{position:relative;max-width:100%;margin:0.75rem 0;padding:0.5rem;border-left:0.25rem solid rgb(var(--contrast-500));background-color:rgb(var(--contrast-200))}blockquote:before,blockquote:after{position:absolute;line-height:0;font-size:2rem;opacity:0.4}blockquote:before{content:"“";left:-0.5rem;top:0.5rem}blockquote:after{content:"”";right:-0.25rem;bottom:-0.25rem}blockquote blockquote{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0.25rem;border-color:rgb(var(--contrast-700));border-left-width:1px}blockquote blockquote:before,blockquote blockquote:after{display:none}blockquote:has(>blockquote){padding-left:0.25rem;padding-bottom:0}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:var(--limel-theme-default-font-size);margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}kbd{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:var(--limel-theme-default-font-size);margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:"H1"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:"H2"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:"H3"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:"H4"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:"H5"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:"H6"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}*,*::before,*::after{box-sizing:border-box}* :where(:not(img,video,svg,canvas,iframe)),*::before :where(:not(img,video,svg,canvas,iframe)),*::after :where(:not(img,video,svg,canvas,iframe)){min-width:0;min-height:0}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}:host(limel-markdown.reset-img-height) #markdown img{height:auto}`;
 
 const Markdown = class {
@@ -69,7 +145,7 @@ const Markdown = class {
         this.imageIntersectionObserver = null;
     }
     async textChanged() {
-        var _a;
+        var _a, _b;
         try {
             this.cleanupImageIntersectionObserver();
             const html = await markdownParser.markdownToHTML(this.value, {
@@ -79,6 +155,7 @@ const Markdown = class {
                 removeEmptyParagraphs: this.removeEmptyParagraphs,
             });
             this.rootElement.innerHTML = html;
+            hydrateCustomElements(this.rootElement, (_b = this.whitelist) !== null && _b !== void 0 ? _b : []);
             this.setupImageIntersectionObserver();
         }
         catch (error) {
@@ -95,7 +172,7 @@ const Markdown = class {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (index.h(index.Host, { key: 'b1939b572c0a9ac59178497f56ebc469bc707d98' }, index.h("div", { key: 'f9dd27e5263281fad9e6d1da9d25d3ccd3a9990e', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (index.h(index.Host, { key: 'd7e3122596fa19c63e05d69855fbc693cb8c4fe7' }, index.h("div", { key: '9a65798b0888a3d2d7a35c0d320408faa3d937b6', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

package/dist/collection/components/email-viewer/sanitize-email-html.js

@@ -1,3 +1,4 @@
+var _a, _b, _c, _d, _e, _f, _g;
 import { unified } from "unified";
 import rehypeParse from "rehype-parse";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
@@ -28,7 +29,7 @@ const allowedMimeTypes = new Set([
 export async function sanitizeEmailHTML(html) {
     const file = await unified()
         .use(rehypeParse)
-        .use(rehypeSanitize, getEmailSanitizationSchema())
+        .use(rehypeSanitize, emailSanitizationSchema)
         .use(() => {
         return (tree) => {
             visit(tree, 'element', (node) => {
@@ -41,65 +42,62 @@ export async function sanitizeEmailHTML(html) {
         .process(html);
     return file.toString();
 }
+// Base src protocols from defaultSchema, extended with 'data' below.
+const defaultSrcProtocols = (_b = (_a = defaultSchema.protocols) === null || _a === void 0 ? void 0 : _a.src) !== null && _b !== void 0 ? _b : [];
 /**
- * Returns a rehype-sanitize schema that allows all standard HTML elements
- * and attributes needed for rich email rendering, including `style`.
+ * Rehype-sanitize schema that allows all standard HTML elements and attributes
+ * needed for rich email rendering, including `style`.
+ *
+ * Hoisted to module scope since the schema has no runtime dependencies and
+ * doesn't need to be reconstructed on every sanitization call.
  */
-function getEmailSanitizationSchema() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const defaultSrcProtocols = (_b = (_a = defaultSchema.protocols) === null || _a === void 0 ? void 0 : _a.src) !== null && _b !== void 0 ? _b : [];
-    const schema = Object.assign(Object.assign({}, defaultSchema), {
-        // Disable the 'user-content-' prefix that rehype-sanitize adds to
-        // id and name attributes. Email HTML uses ids for internal anchor
-        // links (href="#section") that must resolve without a prefix.
-        clobberPrefix: '', protocols: Object.assign(Object.assign({}, defaultSchema.protocols), {
-            // Email bodies often embed images as data URLs. We allow `data:` here,
-            // but still validate the MIME type in `sanitizeDangerousUrls`.
-            src: [...defaultSrcProtocols, 'http', 'https', 'data']
-        }), attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { table: [
-                ...((_c = defaultSchema.attributes.table) !== null && _c !== void 0 ? _c : []),
-                // Email HTML often relies on these legacy attributes.
-                'cellpadding',
-                'cellPadding',
-                'cellspacing',
-                'cellSpacing',
-                'border',
-                'dir',
-                'width',
-                'height',
-            ], font: ['face'], colgroup: [...((_d = defaultSchema.attributes.colgroup) !== null && _d !== void 0 ? _d : []), 'span'], col: [...((_e = defaultSchema.attributes.col) !== null && _e !== void 0 ? _e : []), 'width', 'span'], '*': [
-                ...((_f = defaultSchema.attributes['*']) !== null && _f !== void 0 ? _f : []),
-                'style', // Allow inline styles on all elements
-                // NOTE: rehype/parse maps `class` to the HAST property name
-                // `className`, which is what rehype-sanitize checks.
-                'className',
-                'class', // Keep for completeness
-                'id', // Allow id for anchors/internal navigation
-                // Used to store remote image URLs without loading them immediately.
-                'data-remote-src',
-                'dataRemoteSrc',
-            ] }),
-        // Allow common email-specific tags
-        tagNames: [
-            ...((_g = defaultSchema.tagNames) !== null && _g !== void 0 ? _g : []),
-            // Allow full-document HTML emails. These tags won't render as text,
-            // but keeping them avoids their contents being surfaced as plain text.
-            'html',
-            'head',
-            'body',
-            'title',
-            'meta',
-            // Preserve embedded email CSS.
-            'style',
-            // Preserve table column sizing when using <colgroup>/<col>.
-            'colgroup',
-            'col',
-            'center', // Deprecated but widely used in email
-            'font', // Deprecated but widely used in email
-        ]
-    });
-    return schema;
-}
+const emailSanitizationSchema = Object.assign(Object.assign({}, defaultSchema), {
+    // Disable the 'user-content-' prefix that rehype-sanitize adds to
+    // id and name attributes. Email HTML uses ids for internal anchor
+    // links (href="#section") that must resolve without a prefix.
+    clobberPrefix: '', protocols: Object.assign(Object.assign({}, defaultSchema.protocols), {
+        // Email bodies often embed images as data URLs. We allow `data:` here,
+        // but still validate the MIME type in `sanitizeDangerousUrls`.
+        src: [...defaultSrcProtocols, 'data']
+    }), attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { table: [
+            ...((_c = defaultSchema.attributes.table) !== null && _c !== void 0 ? _c : []),
+            // Email HTML often relies on these legacy attributes.
+            // rehype-parse converts to camelCase HAST properties.
+            'cellPadding',
+            'cellSpacing',
+            'border',
+            'dir',
+            'width',
+            'height',
+        ], font: ['color', 'size', 'face'], meta: ['charset', 'content', 'name'], colgroup: [...((_d = defaultSchema.attributes.colgroup) !== null && _d !== void 0 ? _d : []), 'span'], col: [...((_e = defaultSchema.attributes.col) !== null && _e !== void 0 ? _e : []), 'width', 'span'], '*': [
+            ...((_f = defaultSchema.attributes['*']) !== null && _f !== void 0 ? _f : []),
+            'style', // Allow inline styles on all elements
+            // NOTE: rehype/parse maps `class` to the HAST property name
+            // `className`, which is what rehype-sanitize checks.
+            'className',
+            'id', // Allow id for anchors/internal navigation
+            // Used to store remote image URLs without loading them immediately.
+            'dataRemoteSrc',
+        ] }),
+    // Allow common email-specific tags
+    tagNames: [
+        ...((_g = defaultSchema.tagNames) !== null && _g !== void 0 ? _g : []),
+        // Allow full-document HTML emails. These tags won't render as text,
+        // but keeping them avoids their contents being surfaced as plain text.
+        'html',
+        'head',
+        'body',
+        'title',
+        'meta',
+        // Preserve embedded email CSS.
+        'style',
+        // Preserve table column sizing when using <colgroup>/<col>.
+        'colgroup',
+        'col',
+        'center', // Deprecated but widely used in email
+        'font', // Deprecated but widely used in email
+    ]
+});
 /**
  * Validates and normalizes potentially dangerous URL attributes.
  *

package/dist/collection/components/markdown/hydrate-custom-elements.js

@@ -0,0 +1,75 @@
+/**
+ * After innerHTML is set on a container, custom elements receive all
+ * attribute values as strings. This function walks whitelisted custom
+ * elements and parses any attribute values that look like JSON objects
+ * or arrays, setting them as JS properties instead.
+ *
+ * This enables markdown content to include custom elements with complex
+ * props, e.g.:
+ * ```html
+ * <limel-chip text="GitHub" link='{"href":"https://github.com","target":"_blank"}'></limel-chip>
+ * ```
+ *
+ * @param container - The root element to search within.
+ * @param whitelist - The list of whitelisted custom element definitions.
+ */
+export function hydrateCustomElements(container, whitelist) {
+    if (!container || !(whitelist === null || whitelist === void 0 ? void 0 : whitelist.length)) {
+        return;
+    }
+    for (const definition of whitelist) {
+        const elements = container.querySelectorAll(definition.tagName);
+        for (const element of elements) {
+            hydrateElement(element, definition.attributes);
+        }
+    }
+}
+function hydrateElement(element, attributes) {
+    for (const attrName of attributes) {
+        const value = element.getAttribute(attrName);
+        if (!value) {
+            continue;
+        }
+        const parsed = tryParseJson(value);
+        if (parsed !== undefined) {
+            // Set the JS property (camelCase) instead of the attribute
+            const propName = attributeToPropName(attrName);
+            element[propName] = parsed;
+        }
+    }
+}
+function tryParseJson(value) {
+    const trimmed = value.trim();
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+        (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+        try {
+            return JSON.parse(trimmed);
+        }
+        catch (_a) {
+            // The sanitizer may HTML-encode quotes inside attribute values.
+            // Try decoding common HTML entities before giving up.
+            try {
+                const decoded = trimmed
+                    .replaceAll('&#x22;', '"')
+                    .replaceAll('&#34;', '"')
+                    .replaceAll('&quot;', '"')
+                    .replaceAll('&#x27;', "'")
+                    .replaceAll('&#39;', "'")
+                    .replaceAll('&apos;', "'")
+                    .replaceAll('&amp;', '&');
+                return JSON.parse(decoded);
+            }
+            catch (_b) {
+                return;
+            }
+        }
+    }
+}
+/**
+ * Convert a kebab-case attribute name to a camelCase property name.
+ * e.g. "menu-items" → "menuItems"
+ * @param attrName
+ */
+function attributeToPropName(attrName) {
+    return attrName.replaceAll(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}

package/dist/collection/components/markdown/markdown.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { markdownToHTML } from "./markdown-parser";
 import { globalConfig } from "../../global/config";
 import { ImageIntersectionObserver } from "./image-intersection-observer";
+import { hydrateCustomElements } from "./hydrate-custom-elements";
 /**
  * The Markdown component receives markdown syntax
  * and renders it as HTML.
@@ -19,6 +20,7 @@ import { ImageIntersectionObserver } from "./image-intersection-observer";
  * @exampleComponent limel-example-markdown-blockquotes
  * @exampleComponent limel-example-markdown-horizontal-rule
  * @exampleComponent limel-example-markdown-custom-component
+ * @exampleComponent limel-example-markdown-custom-component-with-json-props
  * @exampleComponent limel-example-markdown-remove-empty-paragraphs
  * @exampleComponent limel-example-markdown-composite
  */
@@ -53,7 +55,7 @@ export class Markdown {
         this.imageIntersectionObserver = null;
     }
     async textChanged() {
-        var _a;
+        var _a, _b;
         try {
             this.cleanupImageIntersectionObserver();
             const html = await markdownToHTML(this.value, {
@@ -63,6 +65,7 @@ export class Markdown {
                 removeEmptyParagraphs: this.removeEmptyParagraphs,
             });
             this.rootElement.innerHTML = html;
+            hydrateCustomElements(this.rootElement, (_b = this.whitelist) !== null && _b !== void 0 ? _b : []);
             this.setupImageIntersectionObserver();
         }
         catch (error) {
@@ -79,7 +82,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: 'b1939b572c0a9ac59178497f56ebc469bc707d98' }, h("div", { key: 'f9dd27e5263281fad9e6d1da9d25d3ccd3a9990e', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: 'd7e3122596fa19c63e05d69855fbc693cb8c4fe7' }, h("div", { key: '9a65798b0888a3d2d7a35c0d320408faa3d937b6', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {