@descope/web-components-ui 1.0.372 → 1.0.374

package/dist/cjs/index.cjs.js

@@ -5487,7 +5487,6 @@ class EnrichedText extends createBaseClass({ componentName: componentName$F, bas
     this.attachShadow({ mode: 'open' }).innerHTML = `
     <style>
       :host {
-        display: inline-block;
         line-height: 1em;
         word-break: break-word;
       }
@@ -5618,6 +5617,14 @@ class EnrichedText extends createBaseClass({ componentName: componentName$F, bas
 
     let html = decodeHTML(this.innerHTML);
 
+    if (!html) {
+      this.setAttribute('empty', 'true');
+
+      return;
+    }
+
+    this.removeAttribute('empty');
+
     try {
       const tokens = this.processor.parse(html, { references: undefined });
       html = this.processor.renderer.render(tokens, { html: true, breaks: true });
@@ -5642,6 +5649,7 @@ const EnrichedTextClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
+      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
       hostDirection: { selector: () => ':host', property: 'direction' },
       fontSize: {},
       fontFamily: {},
@@ -5796,6 +5804,14 @@ const enrichedText = {
   [vars$w.fontWeightBold]: '900',
   [vars$w.minWidth]: '0.25em',
   [vars$w.minHeight]: '1.35em',
+
+  [vars$w.hostDisplay]: 'inline-block',
+
+  _empty: {
+    _hideWhenEmpty: {
+      [vars$w.hostDisplay]: 'none',
+    },
+  },
 };
 
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
@@ -12079,7 +12095,10 @@ const MappingsFieldClass = compose(
         { ...labelsText, property: 'line-height' },
         { ...labels, property: 'line-height' },
       ],
-      labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
+      labelTextColor: [
+        { ...labels, property: TextClass.cssVarList.textColor },
+        { ...separator, property: 'color' },
+      ],
       itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
       valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
       attrLabelMinWidth: { ...attrLabel, property: 'min-width' },