@descope/web-components-ui 1.3.0 → 1.5.0

package/dist/index.esm.js

@@ -394,11 +394,6 @@ const isNearBlack$1 = (color) => color.luminosity() < 0.01;
 const isNearWhite$1 = (color) => color.luminosity() > 0.99;
 
 const generateDarkColor$1 = (color, theme) => {
-  if (theme === 'dark') {
-    return isNearWhite$1(color)
-      ? darken$1(color, colorGaps$1.edgeColor.darkLight)
-      : lighten$1(color, colorGaps$1.darkLight);
-  }
 
   return isNearBlack$1(color)
     ? lighten$1(color, colorGaps$1.edgeColor.darkLight)
@@ -406,11 +401,6 @@ const generateDarkColor$1 = (color, theme) => {
 };
 
 const generateLightColor$1 = (color, theme) => {
-  if (theme === 'dark') {
-    return isNearBlack$1(color)
-      ? lighten$1(color, colorGaps$1.edgeColor.darkLight)
-      : darken$1(color, colorGaps$1.darkLight);
-  }
 
   return isNearWhite$1(color)
     ? darken$1(color, colorGaps$1.edgeColor.darkLight)
@@ -418,11 +408,6 @@ const generateLightColor$1 = (color, theme) => {
 };
 
 const generateHighlightColor$1 = (color, theme) => {
-  if (theme === 'dark') {
-    return isNearBlack$1(color)
-      ? lighten$1(color, colorGaps$1.edgeColor.highlight)
-      : darken$1(color, colorGaps$1.highlight);
-  }
 
   return isNearWhite$1(color)
     ? darken$1(color, colorGaps$1.edgeColor.highlight)
@@ -434,9 +419,9 @@ const genColor$1 = (color, theme) => {
 
   const res = {
     main: mainColor.hex(),
-    dark: color.dark || generateDarkColor$1(mainColor, theme),
-    light: color.light || generateLightColor$1(mainColor, theme),
-    highlight: color.highlight || generateHighlightColor$1(mainColor, theme),
+    dark: color.dark || generateDarkColor$1(mainColor),
+    light: color.light || generateLightColor$1(mainColor),
+    highlight: color.highlight || generateHighlightColor$1(mainColor),
     contrast: color.contrast || contrast$1(mainColor),
   };
 
@@ -550,12 +535,12 @@ const transformTheme$1 = (theme, path, getTransformation) => {
 
 const getThemeRefs$1 = (theme, prefix) =>
   transformTheme$1(theme, [], (path) =>
-    set$1({}, path, `var(${getVarName$1(prefix ? [prefix, ...path] : path)})`),
+    set$1({}, path, `var(${getVarName$1(path)})`),
   );
 
 const getThemeVars$1 = (theme, prefix) =>
   transformTheme$1(theme, [], (path) =>
-    set$1({}, path, getVarName$1(prefix ? [prefix, ...path] : path)),
+    set$1({}, path, getVarName$1(path)),
   );
 
 // allows to generate css variables with nested fallbacks
@@ -627,11 +612,11 @@ const themeToCSSVarsObj = (theme) =>
 
 const getThemeRefs = (theme, prefix) =>
   transformTheme(theme, [], (path) =>
-    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+    set({}, path, `var(${getVarName(path)})`)
   );
 
 const getThemeVars = (theme, prefix) =>
-  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+  transformTheme(theme, [], (path) => set({}, path, getVarName(path)));
 
 const globalsThemeToStyle = (theme, themeName = '') => {
   const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
@@ -17638,6 +17623,9 @@ class RawAlert extends createBaseClass$1({ componentName: componentName$2, baseS
         display: flex;
         width: 100%;
       }
+      :host([empty="true"]) {
+        display: none;
+      }
       .icon {
         flex-shrink: 0;
       }
@@ -17667,11 +17655,19 @@ class RawAlert extends createBaseClass$1({ componentName: componentName$2, baseS
 
     this.slotEle.addEventListener('slotchange', this.handleSlotChange.bind(this));
 
+    syncAttrs(this.textComp, this, { includeAttrs: ['empty'] });
+
+    observeChildren(this, this.handleChildrenChange.bind(this));
+
     forwardAttrs$1(this, this.textComp, {
       includeAttrs: ['variant', 'full-width', 'link-target-blank'],
     });
   }
 
+  handleChildrenChange() {
+    this.textComp.textContent = this.textContent;
+  }
+
   handleSlotChange() {
     const assignedNodes = this.slotEle.assignedNodes({ flatten: true });
     if (!assignedNodes.length) return;