@descope/web-components-ui 1.0.346 → 1.0.348

package/dist/cjs/index.cjs.js

@@ -1133,7 +1133,7 @@ const createProxy = ({
 
     constructor() {
       super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${isFunction(style) ? style() : style}</style>
+			<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
 			<${wrappedEleName}>
 			${slots
         .map(
@@ -4984,6 +4984,12 @@ const disableRules = [
   'html_block',
 ];
 
+const decodeHTML = (html) => {
+  const textArea = document.createElement('textarea');
+  textArea.innerHTML = html;
+  return textArea.value;
+};
+
 /* eslint-disable no-param-reassign */
 
 const componentName$C = getComponentName('enriched-text');
@@ -5020,12 +5026,8 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
         margin-bottom: 1em;
       }
       a {
-        text-decoration: none;
         cursor: pointer;
       }
-      a:hover {
-        text-decoration: underline;
-      }
       blockquote {
         padding: 0 2em;
       }
@@ -5112,7 +5114,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
   }
 
   #initProcessor() {
-    this.processor = new MarkdownIt();
+    this.processor = new MarkdownIt('commonmark', { html: true });
     this.#storeOrigRenderers();
     this.#updateProcessorRules();
     this.#customizeLinkRenderer();
@@ -5132,11 +5134,11 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
       return;
     }
 
-    let html = this.textContent;
+    let html = decodeHTML(this.innerHTML);
 
     try {
       const tokens = this.processor.parse(html, { references: undefined });
-      html = this.processor.renderer.render(tokens, { breaks: true });
+      html = this.processor.renderer.render(tokens, { html: true, breaks: true });
     } catch (e) {
       // eslint-disable-next-line no-console
       console.warn('Not parsing invalid markdown token');
@@ -5162,11 +5164,16 @@ const EnrichedTextClass = compose(
       fontSize: {},
       fontFamily: {},
       fontWeight: {},
-      fontWeightBold: { selector: () => ':host strong', property: 'font-weight' },
+      fontWeightBold: [
+        { selector: () => ':host strong', property: 'font-weight' },
+        { selector: () => ':host b', property: 'font-weight' },
+      ],
       textColor: { property: 'color' },
       textLineHeight: { property: 'line-height' },
       textAlign: {},
       linkColor: { selector: 'a', property: 'color' },
+      linkTextDecoration: { selector: 'a', property: 'text-decoration' },
+      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
       minHeight: {},
       minWidth: {},
     },
@@ -5190,10 +5197,6 @@ class RawLink extends createBaseClass({ componentName: componentName$B, baseSele
 		}
 		:host a {
 			display: inline;
-			text-decoration: none;
-		}
-		:host a:hover {
-			text-decoration: underline;
 		}
 		</style>
 		<div>
@@ -5220,12 +5223,13 @@ class RawLink extends createBaseClass({ componentName: componentName$B, baseSele
 
 const selectors$2 = {
   host: { selector: () => ':host' },
+  link: { selector: () => ':host a' },
   anchor: {},
   wrapper: { selector: () => ':host > div' },
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$1, host: host$h, wrapper: wrapper$1 } = selectors$2;
+const { anchor, text: text$1, host: host$h, wrapper: wrapper$1, link: link$3 } = selectors$2;
 
 const LinkClass = compose(
   createStyleMixin({
@@ -5233,6 +5237,7 @@ const LinkClass = compose(
       hostWidth: { ...host$h, property: 'width' },
       hostDirection: { ...text$1, property: 'direction' },
       textAlign: wrapper$1,
+      textDecoration: { ...link$3, property: 'text-decoration', fallback: 'none' },
       textColor: [
         { ...anchor, property: 'color' },
         { ...text$1, property: TextClass.cssVarList.textColor },
@@ -5260,6 +5265,8 @@ const EnrichedText = {
   [vars$u.textColor]: globalRefs$l.colors.surface.dark,
 
   [vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
+  [vars$u.linkTextDecoration]: 'none',
+  [vars$u.linkHoverTextDecoration]: 'underline',
 
   [vars$u.minWidth]: '0.25em',
   [vars$u.minHeight]: '1.35em',
@@ -5353,6 +5360,10 @@ const link$1 = {
     [vars$t.hostWidth]: '100%',
   },
 
+  _hover: {
+    [vars$t.textDecoration]: 'underline',
+  },
+
   mode: {
     secondary: {
       [vars$t.textColor]: globalRefs$k.colors.secondary.main,
@@ -12576,6 +12587,9 @@ const RadioButtonClass = compose(
       radioMargin: { selector: '::part(radio)', property: 'margin' },
       radioCheckedSize: { selector: '::part(radio)::after', property: 'border-width' },
       radioCheckedColor: { selector: '::part(radio)::after', property: 'border-color' },
+      radioBorderColor: { selector: '::part(radio)', property: 'border-color', fallback: 'none' },
+      radioBorderWidth: { selector: '::part(radio)', property: 'border-width', fallback: 0 },
+      radioBorderStyle: { selector: '::part(radio)', property: 'border-style', fallback: 'solid' },
     },
   }),
   composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
@@ -12813,6 +12827,8 @@ const radioButton = {
   [vars$1.radioCheckedSize]: `calc(var(${vars$1.radioSize})/5)`,
   [vars$1.radioCheckedColor]: globalRefs.colors.surface.light,
   [vars$1.radioBackgroundColor]: globalRefs.colors.surface.light,
+  [vars$1.radioBorderColor]: 'none',
+  [vars$1.radioBorderWidth]: 0,
 
   _checked: {
     [vars$1.radioBackgroundColor]: globalRefs.colors.surface.contrast,