@descope/web-components-ui 1.0.399 → 1.0.400-1

package/dist/index.esm.js

@@ -2720,6 +2720,12 @@ const ContainerClass = compose(
       flexWrap: {},
 
       backgroundColor: {},
+      backgroundImage: {},
+      backgroundPositionX: {},
+      backgroundPositionY: {},
+      backgroundSize: {},
+      backgroundRepeat: {},
+
       color: {},
       borderRadius: {},
 
@@ -9076,9 +9082,9 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
   updateLabel(val) {
     if (!val) {
       this.classList.add('hide-label');
-      this.label.innerHTML = '';
+      this.label.textContent = '';
     } else {
-      this.label.innerHTML = val;
+      this.label.textContent = val;
       this.classList.remove('hide-label');
     }
   }
@@ -9927,15 +9933,15 @@ class RawUploadFile extends BaseInputClass$3 {
   }
 
   updateTitle(val) {
-    this.title.innerHTML = val;
+    this.title.textContent = val;
   }
 
   updateDescription(val) {
-    this.description.innerHTML = val;
+    this.description.textContent = val;
   }
 
   updateButtonLabel(val) {
-    this.button.innerHTML = val;
+    this.button.textContent = val;
   }
 
   updateButtonSize(val) {
@@ -11112,7 +11118,7 @@ const renderCodeSnippet = (value, lang) =>
 
 const renderText = (text) =>
   `<div class="row-details__value text" title="${text}">${text}</div>`;
-const renderJson = (value) => renderCodeSnippet(JSON.stringify(value, null, 2), 'json');
+const renderJson = (value) => renderCodeSnippet(escapeXML(JSON.stringify(value, null, 2)), 'json');
 const renderXml = (value) => renderCodeSnippet(escapeXML(value), 'xml');
 
 const defaultRowDetailsValueRenderer = (value) => {
@@ -15344,7 +15350,14 @@ const themeToStyle = ({ globals, components }, themeName) => ({
   components: createComponentsTheme(components),
 });
 
-const useVar = (varName) => `var(${varName})`;
+// allows to generate css variables with nested fallbacks
+const useVar = (...varNames) => {
+  return varNames.reduceRight((acc, value) => {
+    if (value.startsWith('--')) return `var(${value}${acc ? `, ${acc}` : acc})`;
+
+    return `${value}${acc ? `, ${acc}` : acc}`;
+  }, '');
+};
 
 const createHelperVars = (theme, prefix) => {
   const res = transformTheme(theme, [], (path, value) => {
@@ -16257,7 +16270,15 @@ const container = {
   [compVars$5.itemsGrow]: '0',
   [compVars$5.hostWidth]: '100%',
   [compVars$5.boxShadow]: 'none',
+
   [compVars$5.backgroundColor]: globalRefs$t.colors.surface.main,
+
+  [compVars$5.backgroundImage]: '', // we need to set a value to avoid inner containers from inheriting the parent's background image
+  [compVars$5.backgroundPositionX]: 'center',
+  [compVars$5.backgroundPositionY]: 'center',
+  [compVars$5.backgroundSize]: 'cover',
+  [compVars$5.backgroundRepeat]: 'no-repeat',
+
   [compVars$5.color]: globalRefs$t.colors.surface.contrast,
   [compVars$5.borderRadius]: '0px',
   [compVars$5.hostDirection]: globalRefs$t.direction,