@descope/web-components-ui 1.0.370 → 1.0.371

package/dist/index.esm.js

@@ -1453,7 +1453,7 @@ const componentName$_ = getComponentName('icon');
 
 class RawIcon extends createBaseClass({ componentName: componentName$_, baseSelector: 'slot' }) {
   static get observedAttributes() {
-    return ['src', 'fill-color'];
+    return ['src'];
   }
 
   #icon;
@@ -1478,36 +1478,23 @@ class RawIcon extends createBaseClass({ componentName: componentName$_, baseSele
 	`;
   }
 
-  get fillColor() {
-    return this.getAttribute('fill-color') === 'true';
-  }
-
   get src() {
     return this.getAttribute('src');
   }
 
   // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
   // with the value from the `st-fill` attribute
-  updateFillColor() {
-    if (this.#icon && this.fillColor) {
-      const fillCssVar = (selector) => {
-        this.querySelectorAll(selector).forEach((ele) =>
-          ele.setAttribute(
-            'fill',
-            `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
-          )
-        );
-      };
-
-      fillCssVar('*[fill]');
-      fillCssVar('path');
-    }
-  }
-
-  resetIcon() {
-    if (!this.#icon) return;
-    this.innerHTML = '';
-    this.appendChild(this.#icon.cloneNode(true));
+  // eslint-disable-next-line class-methods-use-this
+  updateFillColor(node) {
+    // set fill to root node and all its relevant selectors
+    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
+
+    elementsToReplace.forEach((ele) => {
+      ele.setAttribute(
+        'fill',
+        `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
+      );
+    });
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -1517,13 +1504,13 @@ class RawIcon extends createBaseClass({ componentName: componentName$_, baseSele
 
     if (attrName === 'src') {
       createIcon(this.src).then((res) => {
-        this.#icon = res;
-        this.resetIcon();
-        this.updateFillColor();
+        this.innerHTML = '';
+        if (res) {
+          const clonedNode = res.cloneNode(true);
+          this.updateFillColor(clonedNode);
+          this.appendChild(clonedNode);
+        }
       });
-    } else if (attrName === 'fill-color') {
-      this.resetIcon();
-      this.updateFillColor();
     }
   }
 }
@@ -12791,7 +12778,6 @@ const button = {
   [compVars$6.outlineColor]: 'transparent',
 
   [compVars$6.iconSize]: '1.5em',
-  [compVars$6.iconColor]: 'currentColor',
 
   size: {
     xs: { [compVars$6.fontSize]: '12px' },