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

package/dist/index.js

@@ -1,13 +1,13 @@
 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-spacing-inside-section-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-mobile)}@media only screen and (min-width: 768px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-tablet)}}@media only screen and (min-width: 1025px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-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">
@@ -16,7 +16,10 @@ class r extends HTMLElement {
         </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"]');
@@ -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.17",
   "description": "",
   "main": "dist/index.js",
   "exports": {
@@ -42,5 +42,5 @@
       }
     }
   },
-  "gitHead": "3ca2d46ec9e634abc9692e3f2aac0feafb120da1"
+  "gitHead": "2fc1887049a9bd838575a81ee8d8d2d63929df11"
 }