@proximus/lavender-light 2.0.0-alpha.65 → 2.0.0-alpha.69

package/dist/lavender-light.es.js

@@ -963,7 +963,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 +1069,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 +1097,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 +1310,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 +2672,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";