@proximus/lavender 1.0.0-alpha.11 → 1.0.0-alpha.12

package/dist/lavender.es.js

@@ -174,6 +174,11 @@ class WithFlexAttributes extends HTMLElement {
   }
 }
 class PxElement extends WithFlexAttributes {
+  constructor(semanticTokensStylesheet, ...adoptedStylesheets) {
+    super(semanticTokensStylesheet, ...adoptedStylesheets);
+    this.replayAttributes = false;
+    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
+  }
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
@@ -181,6 +186,12 @@ class PxElement extends WithFlexAttributes {
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.shadowRoot) {
+      console.warn(
+        "shadowRoot not available yet, replaying attributes once connected"
+      );
+      this.replayAttributes = true;
+    }
     super.attributeChangedCallback(name, oldValue, newValue);
     if (newValue === null) {
       this.$el.toggleAttribute(name);
@@ -188,14 +199,18 @@ class PxElement extends WithFlexAttributes {
       this.$el.setAttribute(name, newValue);
     }
   }
-  constructor(semanticTokensStylesheet, ...adoptedStylesheets) {
-    super(semanticTokensStylesheet, ...adoptedStylesheets);
-    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
-  }
   connectedCallback() {
-    replayAttributes(this, PxElement.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
+    if (this.replayAttributes) {
+      replayAttributes(
+        this,
+        Object.getPrototypeOf(this).constructor.observedAttributes,
+        (name, value) => {
+          if (this.getAttribute(name) !== null) {
+            this.attributeChangedCallback(name, null, value);
+          }
+        }
+      );
+    }
     for (const name of getSupportedAttributeNames(this.nativeName)) {
       if (name === "constructor") {
         continue;
@@ -1395,10 +1410,20 @@ const _Container = class _Container extends PxElement {
           this.updateAttribute(attrName, oldValue, newValue, borderValues);
           break;
         case "borderradius":
-          this.updateAttribute(attrName, oldValue, newValue, borderRadiusValues);
+          this.updateAttribute(
+            attrName,
+            oldValue,
+            newValue,
+            borderRadiusValues
+          );
           break;
         case "noborderradius":
-          this.updateAttribute(attrName, oldValue, newValue, noBorderRadiusValues);
+          this.updateAttribute(
+            attrName,
+            oldValue,
+            newValue,
+            noBorderRadiusValues
+          );
           break;
         case "bgcolor":
           this.updateAttribute(attrName, oldValue, newValue, bgColorValues);
@@ -1444,7 +1469,9 @@ const _Container = class _Container extends PxElement {
     if (this.checkName(gradientValues, newValue)) {
       this.$el.style.background = `linear-gradient(var(--px-color-bg-gradient-${newValue}))`;
     } else {
-      console.error(`${newValue} is not an allowed gradient value for ${this.$el}`);
+      console.error(
+        `${newValue} is not an allowed gradient value for ${this.$el}`
+      );
     }
   }
   updateAttribute(attrName, oldValue, newValue, attrValues) {
@@ -1455,7 +1482,9 @@ const _Container = class _Container extends PxElement {
       this.$el.classList.toggle(`${attrName}-${newValue}`);
     }
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
+      console.error(
+        `${newValue} is not an allowed ${attrName} value for ${this.$el}`
+      );
     }
   }
   checkName(values, value) {