@descope/web-components-ui 1.0.398 → 1.0.400

package/dist/cjs/index.cjs.js

@@ -366,7 +366,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) => {
@@ -2770,13 +2777,17 @@ const externalInputMixin =
       }
 
       createExternalInput() {
-        if (!this.isExternalInput) {
+        if (!this.isExternalInput || this.isReadOnly || this.isDisabled) {
           return null;
         }
 
         // use original input element as reference
         const origInput = this.baseElement.querySelector('input');
 
+        if (!origInput) {
+          return null;
+        }
+
         // to avoid focus loop between external-input and origInput
         // we set origInput's tabindex to -1
         // otherwise, shift-tab will never leave the component focus
@@ -5119,6 +5130,12 @@ const ContainerClass = compose(
       flexWrap: {},
 
       backgroundColor: {},
+      backgroundImage: {},
+      backgroundPositionX: {},
+      backgroundPositionY: {},
+      backgroundSize: {},
+      backgroundRepeat: {},
+
       color: {},
       borderRadius: {},
 
@@ -5166,7 +5183,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,