@proximus/lavender 1.4.9-beta.1 → 1.4.10-alpha.2

package/dist/lavender.es.js

@@ -3880,7 +3880,6 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
                 <slot name="title"></slot>
                 <slot name="description"></slot>
                 <slot name="content"></slot>
-                
               </div>
             </px-container>
           </px-grid>
@@ -4016,20 +4015,20 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
   }
   createGridding(value) {
     const breakpoints = [
-      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
+      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridProp: "gridColsMobile",
+        gridAttr: "grid-cols--mobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridProp: "gridColsTablet",
+        gridAttr: "grid-cols--tablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridProp: "gridColsLaptop",
+        gridAttr: "grid-cols--laptop",
         attr: "col-span--laptop"
       }
     ];
@@ -4037,16 +4036,16 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
       "px-grid > px-container"
     );
     if (value !== null) {
-      breakpoints.forEach(({ prop, gridProp, attr }) => {
+      breakpoints.forEach(({ prop, gridAttr, attr }) => {
         if (this[prop]) {
-          this.$grid[gridProp] = "3";
-          spanElement.setAttribute(attr, "2");
+          this.$grid.setAttribute(gridAttr, "3");
+          spanElement == null ? void 0 : spanElement.setAttribute(attr, "2");
         }
       });
     } else {
-      breakpoints.forEach(({ gridProp, attr }) => {
-        this.$grid[gridProp] = "1";
-        spanElement.removeAttribute(attr);
+      breakpoints.forEach(({ gridAttr, attr }) => {
+        this.$grid.setAttribute(gridAttr, "1");
+        spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
       });
     }
   }
@@ -7123,7 +7122,7 @@ class CellSwitch extends WithExtraAttributes {
     return `
     <div class="cell-switch">
       <px-cell hoverable>
-        <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
+        <px-switch slot="action-indicator" inert></px-switch>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -8017,7 +8016,7 @@ class CellRadio extends WithExtraAttributes {
     return `
     <div class="cell-radio">
       <px-cell hoverable>
-        <px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
+        <px-radio slot="prefix" inert></px-radio>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -8647,17 +8646,20 @@ class Section extends HTMLElement {
     this.shadowRoot.adoptedStyleSheets = [styleSheet$t];
   }
   connectedCallback() {
+    var _a, _b;
     this.$container.setAttribute("background-color", this.backgroundColor);
-    if (this.$slotOverlap) {
-      this.shadowRoot.firstElementChild.querySelector(".content-wrapper").classList.add("overlapped");
-    }
-    const headingSlot = this.querySelector('[slot="heading"]');
     if (!this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop) {
       this.$container.paddingBlock = "none";
     }
-    if (!headingSlot) {
-      this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
-    }
+    this.setHeadingSpacing = this.setHeadingSpacing.bind(this);
+    this.setHeadingSpacing();
+    (_a = this.$slotHeading) == null ? void 0 : _a.addEventListener("slotchange", this.setHeadingSpacing);
+    this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this);
+    this.toggleOverlapSpacing();
+    (_b = this.$slotOverlap) == null ? void 0 : _b.addEventListener(
+      "slotchange",
+      this.toggleOverlapSpacing
+    );
   }
   static get observedAttributes() {
     return [
@@ -8688,9 +8690,6 @@ class Section extends HTMLElement {
       "border-side--laptop"
     ];
   }
-  get $container() {
-    return this.shadowRoot.querySelector("px-container");
-  }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (name) {
@@ -8772,9 +8771,71 @@ class Section extends HTMLElement {
       }
     }
   }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.$slotHeading) == null ? void 0 : _a.removeEventListener(
+      "slotchange",
+      this.setHeadingSpacing
+    );
+    (_b = this.$slotOverlap) == null ? void 0 : _b.removeEventListener(
+      "slotchange",
+      this.toggleOverlapSpacing
+    );
+  }
+  toggleOverlapSpacing() {
+    const overlapSlot = this.$slotOverlap;
+    const mainContentWrapper = this.$mainContentWrapper;
+    if (!overlapSlot || !mainContentWrapper) return;
+    const assignedNodes = overlapSlot.assignedNodes({ flatten: true });
+    const hasOverlapContent = assignedNodes.some(this.isNotEmptyNode);
+    mainContentWrapper.classList.toggle("overlapped", hasOverlapContent);
+  }
+  isNotEmptyNode(node) {
+    if (node.nodeType === Node.ELEMENT_NODE) return true;
+    if (node.nodeType === Node.TEXT_NODE) {
+      return (node.textContent ?? "").trim().length > 0;
+    }
+    return false;
+  }
+  setHeadingSpacing() {
+    var _a;
+    const headingSlot = this.$slotHeading;
+    const vStack = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("px-vstack");
+    if (headingSlot && vStack) {
+      const hasHeadingContent = headingSlot.assignedElements().length > 0;
+      if (hasHeadingContent) {
+        vStack.setAttribute("gap", "heading-to-content");
+      } else {
+        vStack.setAttribute("gap", "none");
+      }
+    }
+  }
+  get $container() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("px-container");
+  }
+  get $mainContentWrapper() {
+    var _a;
+    return (_a = this.$container) == null ? void 0 : _a.querySelector(".content-wrapper");
+  }
   get $slotOverlap() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'slot[name="overlap"]'
+    );
+  }
+  get $slottedOverlap() {
     return this.querySelector('[slot="overlap"]');
   }
+  get $slotHeading() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'slot[name="heading"]'
+    );
+  }
+  get $slottedHeading() {
+    return this.querySelector('[slot="heading"]');
+  }
   get backgroundColor() {
     return this.getAttribute("background-color") || "none";
   }
@@ -9182,6 +9243,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
             </div>
           </px-container>
         </px-grid>
+        <slot name="overlap" slot="overlap"></slot>
       </px-section>
     </div>`;
     this.shadowRoot.innerHTML = this.template();
@@ -9218,12 +9280,6 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         </px-stack>`
       );
     }
-    if (this.$overlapSlot) {
-      this.shadowRoot.querySelector("px-section").insertAdjacentHTML(
-        "beforeend",
-        `<slot name="overlap" slot="overlap"></slot>`
-      );
-    }
     if (this.$subtitleSlot) {
       this.$subtitleSlot.setAttribute("variant", "subtitle");
     }
@@ -16500,7 +16556,7 @@ class TileCheckbox extends WithExtraAttributes {
       <div class="tile-checkbox">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-checkbox slot="suffix" aria-hidden="true" tabindex="-1"></px-checkbox>
+          <px-checkbox slot="suffix" inert></px-checkbox>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -16780,7 +16836,7 @@ class TileRadio extends WithExtraAttributes {
       <div class="tile-radio">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-radio slot="suffix" aria-hidden="true" tabindex="-1"></px-radio>
+          <px-radio slot="suffix" inert></px-radio>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -17222,7 +17278,7 @@ class TileSwitch extends WithExtraAttributes {
       <div class="tile-switch">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-switch slot="suffix" aria-hidden="true" tabindex="-1"></px-switch>
+          <px-switch slot="suffix" inert></px-switch>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>