@proximus/lavender-banner 2.0.0-alpha.6 → 2.0.0-alpha.60

package/dist/Banner.d.ts

@@ -1,15 +1,19 @@
-import { Container } from '@proximus/lavender-container';
-import { Grid } from '@proximus/lavender-grid';
-import { PxElement } from '@proximus/lavender-common';
-export declare class Banner extends PxElement<HTMLDivElement> {
+import type { Container } from '@proximus/lavender-container';
+import '@proximus/lavender-container';
+import type { Grid } from '@proximus/lavender-grid';
+import '@proximus/lavender-grid';
+import { VerticallyExtendedElement } from '@proximus/lavender-common';
+export declare class Banner extends VerticallyExtendedElement<HTMLDivElement> {
     static nativeName: string;
+    observer: MutationObserver;
     private template;
     constructor();
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    disconnectedCallback(): void;
     createGridTemplateAreas(): void;
-    createGridding(): void;
+    createGridding(value?: string): void;
     get $grid(): Grid;
     get $container(): Container;
     get $children(): NodeListOf<Element>;

package/dist/index.es.js

@@ -1,28 +1,346 @@
-import { PxElement as d, backgroundSizeValues as g, gradientValues as c, backgroundColorValues as l } from "@proximus/lavender-common";
-const b = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}:host(:not([reduced])) ::slotted([slot="action"]){grid-area:action;margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 64.0625em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}', s = new CSSStyleSheet();
-s.replaceSync(b);
-const o = class o extends d {
+import "@proximus/lavender-container";
+import { cssTokenBreakpoints as b, gapValues as m, PxElement as h, log as c, VerticallyExtendedElement as f, backgroundSizeValues as y, gradientValues as j, backgroundColorValues as k } from "@proximus/lavender-common";
+const A = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em;height:100%}.banner[reduced]{min-height:5em}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}::slotted([slot="action"]){grid-area:action;z-index:2}:host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 64.0625em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}', v = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 48em) and (max-width: 64em){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 64.0625em){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", g = new CSSStyleSheet();
+g.replaceSync(v);
+const x = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+], C = [
+  "",
+  "start",
+  "end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "stretch"
+], $ = ["", "start", "end", "center", "stretch"], I = (u, t, i) => `:host([${u}${i ? `--${i}` : ""}='${t}']) .grid`, S = "px-spacing", T = b(
+  "gap",
+  I,
+  m,
+  S,
+  "--grid-gap"
+), o = class o extends h {
   constructor() {
-    super(s), this.template = () => `<div class="banner">
+    super(g, T), this.template = () => `<div class="grid">
+    <slot></slot>
+    </div>`, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "grid-cols",
+      "grid-cols--mobile",
+      "grid-cols--tablet",
+      "grid-cols--laptop",
+      "justify-content",
+      "justify-items",
+      "align-content",
+      "align-items",
+      "justify-content--mobile",
+      "justify-items--mobile",
+      "align-content--mobile",
+      "align-items--mobile",
+      "justify-content--tablet",
+      "justify-items--tablet",
+      "align-content--tablet",
+      "align-items--tablet",
+      "justify-content--laptop",
+      "justify-items--laptop",
+      "align-content--laptop",
+      "align-items--laptop",
+      "justify-content--desktop",
+      "justify-items--desktop",
+      "align-content--desktop",
+      "align-items--desktop"
+    ];
+  }
+  connectedCallback() {
+    this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
+  }
+  attributeChangedCallback(t, i, e) {
+    if (i !== e)
+      switch (t) {
+        case "grid-cols":
+        case "grid-cols--mobile":
+        case "grid-cols--tablet":
+        case "grid-cols--laptop":
+          this.updateAttribute(t, i, e, x);
+          break;
+        case "justify-content":
+        case "align-content":
+        case "justify-content--mobile":
+        case "align-content--mobile":
+        case "justify-content--tablet":
+        case "align-content--tablet":
+        case "justify-content--laptop":
+        case "align-content--laptop":
+        case "justify-content--desktop":
+        case "align-content--desktop":
+          this.updateAttribute(
+            t,
+            i,
+            e,
+            C
+          );
+          break;
+        case "justify-items":
+        case "align-items":
+        case "justify-items--mobile":
+        case "align-items--mobile":
+        case "justify-items--tablet":
+        case "align-items--tablet":
+        case "justify-items--laptop":
+        case "align-items--laptop":
+        case "justify-items--desktop":
+        case "align-items--desktop":
+          this.updateAttribute(
+            t,
+            i,
+            e,
+            $
+          );
+          break;
+        default:
+          super.attributeChangedCallback(t, i, e);
+          break;
+      }
+  }
+  updateGap(t, i, e) {
+    if (!this.checkName(e, i)) {
+      c(
+        `${i} is not an allowed gap value for ${this.tagName.toLowerCase()}`
+      );
+      return;
+    }
+    const n = (s) => {
+      s !== null && s !== "" && s !== "default" && (this.$el.style.setProperty(
+        "--grid-gap--mobile",
+        `var(--px-spacing-${s}-mobile)`
+      ), this.$el.style.setProperty(
+        "--grid-gap--tablet",
+        `var(--px-spacing-${s}-tablet)`
+      ), this.$el.style.setProperty(
+        "--grid-gap--laptop",
+        `var(--px-spacing-${s}-laptop)`
+      ));
+    };
+    n(t), n(i);
+  }
+  updateAttribute(t, i, e, n) {
+    this.checkName(n, e) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" || t === "grid-cols--desktop" ? this.$el.style.setProperty(`--${t}`, e) : (i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(`${t}-${i}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`)) : c(
+      `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    );
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get gapMobile() {
+    return this.getAttribute("gap--mobile");
+  }
+  set gapMobile(t) {
+    this.setAttribute("gap--mobile", t);
+  }
+  get gapTablet() {
+    return this.getAttribute("gap--tablet");
+  }
+  set gapTablet(t) {
+    this.setAttribute("gap--tablet", t);
+  }
+  get gapLaptop() {
+    return this.getAttribute("gap--laptop");
+  }
+  set gapLaptop(t) {
+    this.setAttribute("gap--laptop", t);
+  }
+  get gridCols() {
+    return this.getAttribute("grid-cols");
+  }
+  set gridCols(t) {
+    this.setAttribute("grid-cols", t);
+  }
+  get gridColsMobile() {
+    return this.getAttribute("grid-cols--mobile");
+  }
+  set gridColsMobile(t) {
+    this.setAttribute("grid-cols--mobile", t);
+  }
+  get gridColsTablet() {
+    return this.getAttribute("grid-cols--tablet");
+  }
+  set gridColsTablet(t) {
+    this.setAttribute("grid-cols--tablet", t);
+  }
+  get gridColsLaptop() {
+    return this.getAttribute("grid-cols--laptop");
+  }
+  set gridColsLaptop(t) {
+    this.setAttribute("grid-cols--laptop", t);
+  }
+  get justifyContent() {
+    return this.getAttribute("justify-content");
+  }
+  set justifyContent(t) {
+    this.setAttribute("justify-content", t);
+  }
+  get justifyItems() {
+    return this.getAttribute("justify-items");
+  }
+  set justifyItems(t) {
+    this.setAttribute("justify-items", t);
+  }
+  get alignContent() {
+    return this.getAttribute("align-content");
+  }
+  set alignContent(t) {
+    this.setAttribute("align-content", t);
+  }
+  get alignItems() {
+    return this.getAttribute("align-items");
+  }
+  set alignItems(t) {
+    this.setAttribute("align-items", t);
+  }
+  get justifyContentMobile() {
+    return this.getAttribute("justify-content--mobile");
+  }
+  set justifyContentMobile(t) {
+    this.setAttribute("justify-content--mobile", t);
+  }
+  get justifyItemsMobile() {
+    return this.getAttribute("justify-items--mobile");
+  }
+  set justifyItemsMobile(t) {
+    this.setAttribute("justify-items--mobile", t);
+  }
+  get alignContentMobile() {
+    return this.getAttribute("align-content--mobile");
+  }
+  set alignContentMobile(t) {
+    this.setAttribute("align-content--mobile", t);
+  }
+  get alignItemsMobile() {
+    return this.getAttribute("align-items--mobile");
+  }
+  set alignItemsMobile(t) {
+    this.setAttribute("align-items--mobile", t);
+  }
+  get justifyContentTablet() {
+    return this.getAttribute("justify-content--tablet");
+  }
+  set justifyContentTablet(t) {
+    this.setAttribute("justify-content--tablet", t);
+  }
+  get justifyItemsTablet() {
+    return this.getAttribute("justify-items--tablet");
+  }
+  set justifyItemsTablet(t) {
+    this.setAttribute("justify-items--tablet", t);
+  }
+  get alignContentTablet() {
+    return this.getAttribute("align-content--tablet");
+  }
+  set alignContentTablet(t) {
+    this.setAttribute("align-content--tablet", t);
+  }
+  get alignItemsTablet() {
+    return this.getAttribute("align-items--tablet");
+  }
+  set alignItemsTablet(t) {
+    this.setAttribute("align-items--tablet", t);
+  }
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content--laptop");
+  }
+  set justifyContentLaptop(t) {
+    this.setAttribute("justify-content--laptop", t);
+  }
+  get justifyItemsLaptop() {
+    return this.getAttribute("justify-items--laptop");
+  }
+  set justifyItemsLaptop(t) {
+    this.setAttribute("justify-items--laptop", t);
+  }
+  get alignContentLaptop() {
+    return this.getAttribute("align-content--laptop");
+  }
+  set alignContentLaptop(t) {
+    this.setAttribute("align-content--laptop", t);
+  }
+  get alignItemsLaptop() {
+    return this.getAttribute("align-items--laptop");
+  }
+  set alignItemsLaptop(t) {
+    this.setAttribute("align-items--laptop", t);
+  }
+  get justifyContentDesktop() {
+    return this.getAttribute("justify-content--desktop");
+  }
+  set justifyContentDesktop(t) {
+    this.setAttribute("justify-content--desktop", t);
+  }
+  get justifyItemsDesktop() {
+    return this.getAttribute("justify-items--desktop");
+  }
+  set justifyItemsDesktop(t) {
+    this.setAttribute("justify-items--desktop", t);
+  }
+  get alignContentDesktop() {
+    return this.getAttribute("align-content--desktop");
+  }
+  set alignContentDesktop(t) {
+    this.setAttribute("align-content--desktop", t);
+  }
+  get alignItemsDesktop() {
+    return this.getAttribute("align-items--desktop");
+  }
+  set alignItemsDesktop(t) {
+    this.setAttribute("align-items--desktop", t);
+  }
+};
+o.nativeName = "div";
+let a = o;
+customElements.get("px-grid") || customElements.define("px-grid", a);
+const d = new CSSStyleSheet();
+d.replaceSync(A);
+const l = class l extends f {
+  constructor() {
+    super(d), this.template = () => `<div class="banner">
       <div class="contrast-helper"></div>
-      <px-container class="banner-container" padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
-        <px-grid gap="none">
-          <px-container padding="none" background-color="none">
-            <div class="banner-content">
-              <slot name="tag"></slot>
-              <slot name="media"></slot>
-              <slot name="title"></slot>
-              <slot name="description"></slot>
-              <slot name="content"></slot>
-              <slot name="action"></slot>
-            </div>
-          </px-container>
-        </px-grid>
+      <px-container class="banner-container" padding--mobile="m" border-radius="main" >
+        <px-vstack>
+          <px-grid gap="none">
+            <px-container padding="none" background-color="none">
+              <div class="banner-content">
+                <slot name="tag"></slot>
+                <slot name="media"></slot>
+                <slot name="title"></slot>
+                <slot name="description"></slot>
+                <slot name="content"></slot>
+              </div>
+            </px-container>
+          </px-grid>
+          <slot name="action"></slot>
+        </px-vstack>
       </px-container>
     </div>`, this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
     return [
+      ...super.observedAttributes,
       "background-color",
       "background-gradient",
       "background-image",
@@ -43,16 +361,21 @@ const o = class o extends d {
   }
   connectedCallback() {
     var t;
-    (t = super.connectedCallback) == null || t.call(this), this.createGridTemplateAreas(), this.createGridding();
+    (t = super.connectedCallback) == null || t.call(this), this.reduced ? this.$container.setAttribute("padding", "m") : this.$container.setAttribute("padding", "l"), this.createGridTemplateAreas(), this.createGridding(), this.observer = new MutationObserver(() => {
+      this.createGridTemplateAreas(), this.createGridding();
+    }), this.observer.observe(this, {
+      childList: !0,
+      subtree: !0
+    });
   }
   attributeChangedCallback(t, i, e) {
     if (i !== e)
       switch (t) {
         case "background-color":
-          this.$container.backgroundColor = l.indexOf(e) > 0 ? e : "none";
+          this.$container.backgroundColor = k.indexOf(e) > 0 ? e : "none";
           break;
         case "background-gradient":
-          this.$container.gradient = c.indexOf(e) > 0 ? e : "none";
+          this.$container.gradient = j.indexOf(e) > 0 ? e : "none";
           break;
         case "background-image":
           this.$container.backgroundImage = e;
@@ -67,7 +390,7 @@ const o = class o extends d {
           this.$container.backgroundImageLaptop = e;
           break;
         case "background-size":
-          this.$container.backgroundSize = g.indexOf(e) > 0 ? e : "";
+          this.$container.backgroundSize = y.indexOf(e) > 0 ? e : "";
           break;
         case "background-position":
           this.$container.backgroundPosition = e;
@@ -79,11 +402,11 @@ const o = class o extends d {
         case "has-gridding--mobile":
         case "has-gridding--tablet":
         case "has-gridding--laptop":
-          this.createGridding();
+          this.createGridding(e);
           break;
         case "inverted":
-          for (let r = 0; r < this.$children.length; r++)
-            this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
+          for (let n = 0; n < this.$children.length; n++)
+            this.$children[n].hasAttribute("inverted") || this.$children[n].toggleAttribute("inverted");
           this.$el.toggleAttribute("inverted", e !== null);
           break;
         default:
@@ -91,51 +414,56 @@ const o = class o extends d {
           break;
       }
   }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
   createGridTemplateAreas() {
     const t = this.shadowRoot.querySelector(
       ".banner-content"
     ), i = ["tag", "media", "title", "description", "content", "action"];
     let e = "";
-    this.reduced ? i.forEach((r) => {
-      const a = this.shadowRoot.querySelector(
-        `slot[name="${r}"]`
+    this.reduced ? i.forEach((n) => {
+      const s = this.shadowRoot.querySelector(
+        `slot[name="${n}"]`
       );
-      if (a && a.assignedElements().length > 0) {
-        if (r === "media") return;
-        e += `'media ${r}'
+      if (s && s.assignedElements().length > 0) {
+        if (n === "media") return;
+        e += `'media ${n}'
 `;
       }
-    }) : i.forEach((r) => {
-      const a = this.shadowRoot.querySelector(
-        `slot[name="${r}"]`
+    }) : i.forEach((n) => {
+      const s = this.shadowRoot.querySelector(
+        `slot[name="${n}"]`
       );
-      a && a.assignedElements().length > 0 && (e += `'${r}'
+      s && s.assignedElements().length > 0 && (e += `'${n}'
 `);
     }), e || (e = "'content'"), t.style.gridTemplateAreas = e;
   }
-  createGridding() {
-    const t = [
-      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
+  createGridding(t) {
+    const i = [
+      { 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"
       }
-    ], i = this.shadowRoot.querySelector(
+    ], e = this.shadowRoot.querySelector(
       "px-grid > px-container"
     );
-    t.forEach(({ prop: e, gridProp: r, attr: a }) => {
-      this[e] && (this.$grid[r] = "3", i.setAttribute(a, "2"));
+    t !== null ? i.forEach(({ prop: n, gridAttr: s, attr: p }) => {
+      this[n] && (this.$grid.setAttribute(s, "3"), e == null || e.setAttribute(p, "2"));
+    }) : i.forEach(({ gridAttr: n, attr: s }) => {
+      this.$grid.setAttribute(n, "1"), e == null || e.setAttribute(s, "1");
     });
   }
   get $grid() {
@@ -244,9 +572,9 @@ const o = class o extends d {
     t ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
   }
 };
-o.nativeName = "div";
-let n = o;
-customElements.get("px-banner") || customElements.define("px-banner", n);
+l.nativeName = "div";
+let r = l;
+customElements.get("px-banner") || customElements.define("px-banner", r);
 export {
-  n as Banner
+  r as Banner
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-banner",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.60",
   "description": "",
   "files": [
     "dist"
@@ -11,7 +11,7 @@
     "clean": "rm -rf dist",
     "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
     "test": "vitest run --coverage",
-    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js  --outdir dist"
   },
   "publishConfig": {
     "access": "public"