@proximus/lavender-light 1.3.0-beta.6 → 1.4.1-alpha.1

package/dist/lavender-light.es.js

@@ -84,6 +84,7 @@ class WithExtraAttributes extends HTMLElement {
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
     if (WithExtraAttributes.observedAttributes.indexOf(name) === -1) {
       return;
     }
@@ -114,7 +115,7 @@ class WithExtraAttributes extends HTMLElement {
           name,
           oldValue,
           newValue,
-          this.isGrid ? cssGridAlignSelfValues : flexboxAlignSelfValues
+          ((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-grid" ? cssGridAlignSelfValues : flexboxAlignSelfValues
         );
         break;
       case "justify-self":
@@ -193,11 +194,19 @@ class WithExtraAttributes extends HTMLElement {
     var _a;
     return (_a = this.parentElement) == null ? void 0 : _a.tagName.toLowerCase();
   }
-  get isGrid() {
-    return this.$parentElementName === "px-grid";
-  }
-  get isStack() {
-    return this.$parentElementName === "px-stack";
+  get isInsideGridOrStack() {
+    let parent = this.parentElement;
+    while (parent) {
+      if (parent.localName === "px-grid" || parent.localName === "px-stack" && (parent == null ? void 0 : parent.getAttribute("direction")) === "row") {
+        return true;
+      }
+      if (window.getComputedStyle(parent).display === "contents") {
+        parent = parent.parentElement;
+        continue;
+      }
+      break;
+    }
+    return false;
   }
   get grow() {
     return this.getAttribute("grow");
@@ -456,7 +465,6 @@ class PxElement extends WithExtraAttributes {
     }
   }
   connectedCallback() {
-    var _a;
     for (const name of getSupportedPropertyNames(this.nativeName)) {
       if (name === "constructor" || this.accessorExclusions.includes(name)) {
         continue;
@@ -476,12 +484,9 @@ class PxElement extends WithExtraAttributes {
         console.warn(`Could not create property ${name} for`, this.$el, e);
       }
     }
-    if (this.isGrid || this.isStack) {
-      const parentDirection = (_a = this.parentElement) == null ? void 0 : _a.getAttribute("direction");
+    if (this.isInsideGridOrStack) {
       this.$el.style.display = "block";
-      if (this.isGrid || this.isStack && parentDirection === "row") {
-        this.$el.style.height = "100%";
-      }
+      this.$el.style.height = "100%";
     }
   }
   get $el() {
@@ -963,7 +968,6 @@ class AttributeBreakpointHandlerDelegate {
 }
 const containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
-const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
 const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
 const paddingPrefix = "px-padding";
 const _Container = class _Container extends PxElement {
@@ -1070,12 +1074,19 @@ const _Container = class _Container extends PxElement {
     if (!this.borderColor) {
       this.borderColor = "main";
     }
-    const anchorSlot = this.querySelector("[slot]");
-    if (anchorSlot) {
-      if (anchorValues.includes(anchorSlot.getAttribute("slot"))) {
-        this.shadowRoot.querySelector(".container").classList.toggle("anchored");
-      }
+    if (this.$slotAnchor) {
+      this.addAnchorClass();
     }
+    this.contentObserver = new MutationObserver(() => {
+      if (this.$slotAnchor) {
+        this.addAnchorClass();
+      }
+    });
+    this.contentObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
     this._bgObserver = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         var _a;
@@ -1091,6 +1102,7 @@ const _Container = class _Container extends PxElement {
   disconnectedCallback() {
     var _a;
     (_a = this._bgObserver) == null ? void 0 : _a.disconnect();
+    this.contentObserver.disconnect();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -1303,6 +1315,14 @@ const _Container = class _Container extends PxElement {
     updateAnchorOffsetStyle(oldValue);
     updateAnchorOffsetStyle(newValue);
   }
+  addAnchorClass() {
+    if (!this.$el.classList.contains("anchored")) {
+      this.$el.classList.add("anchored");
+    }
+  }
+  get $slotAnchor() {
+    return this.querySelector('[slot^="anchor"]');
+  }
   get padding() {
     return this.getAttribute("padding");
   }
@@ -2657,6 +2677,7 @@ class Icon extends WithExtraAttributes {
       <use xlink:href="#icon-${this.name}"></use>
     </svg>`);
     this.shadowRoot.innerHTML = __privateGet(this, _template).call(this);
+    this.role = "img";
     __privateSet(this, _internals, (_a = this.attachInternals) == null ? void 0 : _a.call(this));
     if (__privateGet(this, _internals)) {
       __privateGet(this, _internals).role = "img";