@proximus/lavender-section 1.0.0-alpha.16 → 1.0.0-alpha.18

package/dist/index.js

@@ -1,26 +1,29 @@
 import { backgroundColorValues as a } from "@proximus/lavender-common";
 import "@proximus/lavender-container";
 import "@proximus/lavender-layout";
-const d = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}", i = new CSSStyleSheet();
-i.replaceSync(d);
+const d = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 768px){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 1025px){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', o = new CSSStyleSheet();
+o.replaceSync(d);
 class r extends HTMLElement {
   constructor() {
     super(), this.template = () => `
     <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
-      <div class="content-wrapper">
+      <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
         <px-vstack gap="heading-to-content">
           <slot name="heading"></slot>
-          <px-vstack gap="after-element-none">
+          <px-vstack gap="none">
             <slot></slot>
           </px-vstack>
         </px-vstack>
       </div>
     </px-container>
-  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
+    <div class="content-wrapper">
+      <slot name="overlap"></slot>
+    </div>
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [o];
   }
   connectedCallback() {
     const t = this.querySelector('[slot="heading"]');
-    !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"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "after-element-none");
+    !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"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
   }
   static get observedAttributes() {
     return [
@@ -54,8 +57,8 @@ class r extends HTMLElement {
   get $container() {
     return this.shadowRoot.querySelector("px-container");
   }
-  attributeChangedCallback(t, o, e) {
-    if (o !== e)
+  attributeChangedCallback(t, i, e) {
+    if (i !== e)
       switch (t) {
         case "background-color":
           this.$container.backgroundColor = a.indexOf(e) > 0 ? e : "none";
@@ -134,6 +137,9 @@ class r extends HTMLElement {
           break;
       }
   }
+  get $slotOverlap() {
+    return this.querySelector('[slot="overlap"]');
+  }
   get backgroundColor() {
     return this.getAttribute("background-color") || "none";
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-section",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.18",
   "description": "",
   "main": "dist/index.js",
   "exports": {
@@ -42,5 +42,5 @@
       }
     }
   },
-  "gitHead": "3ca2d46ec9e634abc9692e3f2aac0feafb120da1"
+  "gitHead": "7683b6952d1da07fe58b0f4ddef292e3954ab85d"
 }