@descope/web-components-ui 1.0.399 → 1.0.401

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) => {
@@ -3138,7 +3145,7 @@ const ButtonClass = compose(
 
       labelTextColor: { property: 'color' },
       iconColor: {
-        selector: () => `::slotted(${IconClass.componentName})`,
+        selector: () => `::slotted(*)`,
         property: IconClass.cssVarList.fill,
       },
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
@@ -5123,6 +5130,12 @@ const ContainerClass = compose(
       flexWrap: {},
 
       backgroundColor: {},
+      backgroundImage: {},
+      backgroundPositionX: {},
+      backgroundPositionY: {},
+      backgroundSize: {},
+      backgroundRepeat: {},
+
       color: {},
       borderRadius: {},
 
@@ -5170,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,
@@ -12718,6 +12739,7 @@ const UserAuthMethodClass = compose(
         { ...methodIconSlot, property: 'width' },
         { ...methodIconSlot, property: 'height' },
       ],
+      iconColor: [{ selector: () => '::slotted(*)', property: IconClass.cssVarList.fill }],
     },
   }),
   draggableMixin,
@@ -12733,6 +12755,7 @@ const userAuthMethod = {
   [vars$g.itemsGap]: '16px',
   [vars$g.hostMinWidth]: '530px',
   [vars$g.iconSize]: '24px',
+  [vars$g.iconColor]: 'currentcolor',
   _fullWidth: {
     [vars$g.hostWidth]: '100%',
   },