@proximus/lavender-banner 2.0.0-alpha.1 → 2.0.0-alpha.100

package/dist/Banner.d.ts

@@ -1,13 +1,21 @@
-import { Container } from '@proximus/lavender-container';
-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> {
+    #private;
     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(value?: string): void;
+    get $grid(): Grid;
     get $container(): Container;
     get $children(): NodeListOf<Element>;
     get backgroundColor(): string;
@@ -34,4 +42,12 @@ export declare class Banner extends PxElement<HTMLDivElement> {
     set inverted(value: boolean);
     get reduced(): boolean;
     set reduced(value: boolean);
+    get hasGridding(): boolean;
+    set hasGridding(value: boolean);
+    get hasGriddingMobile(): boolean;
+    set hasGriddingMobile(value: boolean);
+    get hasGriddingTablet(): boolean;
+    set hasGriddingTablet(value: boolean);
+    get hasGriddingLaptop(): boolean;
+    set hasGriddingLaptop(value: boolean);
 }

package/dist/index.es.js

@@ -1,24 +1,355 @@
-import { PxElement as d, backgroundSizeValues as c, gradientValues as g, 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 {
+var b = (a) => {
+  throw TypeError(a);
+};
+var k = (a, t, e) => t.has(a) || b("Cannot " + e);
+var m = (a, t, e) => t.has(a) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(a) : t.set(a, e);
+var l = (a, t, e) => (k(a, t, "access private method"), e);
+import "@proximus/lavender-container";
+import { cssTokenBreakpoints as A, gapValues as v, PxElement as C, log as h, VerticallyExtendedElement as x, backgroundSizeValues as $, gradientValues as I, backgroundColorValues as S } from "@proximus/lavender-common";
+const T = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8rem;height:100%}.banner[reduced]{min-height:5rem}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 screen and (min-width: 48rem){.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 screen and (min-width: 64.0625rem){.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))}}', L = ":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 screen and (max-width: 47.938rem){.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 screen and (min-width: 48rem) and (max-width: 64rem){.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 screen and (min-width: 64.0625rem){.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}}", f = new CSSStyleSheet();
+f.replaceSync(L);
+const M = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+], G = [
+  "",
+  "start",
+  "end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "stretch"
+], w = ["", "start", "end", "center", "stretch"], z = (a, t, e) => `:host([${a}${e ? `--${e}` : ""}='${t}']) .grid`, E = "px-spacing", P = A(
+  "gap",
+  z,
+  v,
+  E,
+  "--grid-gap"
+), u = class u extends C {
+  constructor() {
+    super(f, P), 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, e, n) {
+    if (e !== n)
+      switch (t) {
+        case "grid-cols":
+        case "grid-cols--mobile":
+        case "grid-cols--tablet":
+        case "grid-cols--laptop":
+          this.updateAttribute(t, e, n, M);
+          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,
+            e,
+            n,
+            G
+          );
+          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,
+            e,
+            n,
+            w
+          );
+          break;
+        default:
+          super.attributeChangedCallback(t, e, n);
+          break;
+      }
+  }
+  updateGap(t, e, n) {
+    if (!this.checkName(n, e)) {
+      h(
+        `${e} is not an allowed gap value for ${this.tagName.toLowerCase()}`
+      );
+      return;
+    }
+    const i = (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)`
+      ));
+    };
+    i(t), i(e);
+  }
+  updateAttribute(t, e, n, i) {
+    this.checkName(i, n) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" || t === "grid-cols--desktop" ? this.$el.style.setProperty(`--${t}`, n) : (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${t}-${n}`)) : h(
+      `${n} 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);
+  }
+};
+u.nativeName = "div";
+let c = u;
+customElements.get("px-grid") || customElements.define("px-grid", c);
+const y = new CSSStyleSheet();
+y.replaceSync(T);
+var o, d;
+const p = class p extends x {
   constructor() {
-    super(s), this.template = () => `<div class="banner">
+    super(y);
+    m(this, o);
+    this.template = () => `<div class="banner">
       <div class="contrast-helper"></div>
-      <px-container padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
-        <div class="banner-content">
-          <slot name="tag"></slot>
-          <slot name="media"></slot>
-          <slot name="title"></slot>
-          <slot name="description"></slot>
-          <slot name="content"></slot>
+      <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>
-        </div>
+        </px-vstack>
       </px-container>
     </div>`, this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
     return [
+      ...super.observedAttributes,
       "background-color",
       "background-gradient",
       "background-image",
@@ -29,78 +360,126 @@ const o = class o extends d {
       "background-position",
       "contrast-helper-gradient",
       "contrast-helper-overlay",
+      "has-gridding",
+      "has-gridding--mobile",
+      "has-gridding--tablet",
+      "has-gridding--laptop",
       "reduced",
       "inverted"
     ];
   }
   connectedCallback() {
-    var t;
-    (t = super.connectedCallback) == null || t.call(this), this.createGridTemplateAreas();
+    var e;
+    (e = super.connectedCallback) == null || e.call(this), l(this, o, d).call(this), this.createGridTemplateAreas(), this.createGridding(), this.observer = new MutationObserver(() => {
+      this.createGridTemplateAreas(), this.createGridding();
+    }), this.observer.observe(this, {
+      childList: !0,
+      subtree: !0
+    });
   }
-  attributeChangedCallback(t, a, e) {
-    if (a !== e)
-      switch (t) {
+  attributeChangedCallback(e, n, i) {
+    if (n !== i)
+      switch (e) {
         case "background-color":
-          this.$container.backgroundColor = l.indexOf(e) > 0 ? e : "none";
+          this.$container.backgroundColor = S.indexOf(i) > 0 ? i : "none";
           break;
         case "background-gradient":
-          this.$container.gradient = g.indexOf(e) > 0 ? e : "none";
+          this.$container.gradient = I.indexOf(i) > 0 ? i : "none";
           break;
         case "background-image":
-          this.$container.backgroundImage = e;
+          this.$container.backgroundImage = i;
           break;
         case "background-image--mobile":
-          this.$container.backgroundImageMobile = e;
+          this.$container.backgroundImageMobile = i;
           break;
         case "background-image--tablet":
-          this.$container.backgroundImageTablet = e;
+          this.$container.backgroundImageTablet = i;
           break;
         case "background-image--laptop":
-          this.$container.backgroundImageLaptop = e;
+          this.$container.backgroundImageLaptop = i;
           break;
         case "background-size":
-          this.$container.backgroundSize = c.indexOf(e) > 0 ? e : "";
+          this.$container.backgroundSize = $.indexOf(i) > 0 ? i : "";
           break;
         case "background-position":
-          this.$container.backgroundPosition = e;
+          this.$container.backgroundPosition = i;
           break;
         case "reduced":
-          this.$el.toggleAttribute("reduced", e !== null), this.createGridTemplateAreas();
+          this.$el.toggleAttribute("reduced", i !== null), this.isConnected && l(this, o, d).call(this), this.createGridTemplateAreas();
+          break;
+        case "has-gridding":
+        case "has-gridding--mobile":
+        case "has-gridding--tablet":
+        case "has-gridding--laptop":
+          this.createGridding(i);
           break;
         case "inverted":
-          for (let r = 0; r < this.$children.length; r++)
-            this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
-          this.$el.toggleAttribute("inverted", e !== null);
+          for (let s = 0; s < this.$children.length; s++)
+            this.$children[s].hasAttribute("inverted") || this.$children[s].toggleAttribute("inverted");
+          this.$el.toggleAttribute("inverted", i !== null);
           break;
         default:
-          super.attributeChangedCallback(t, a, e);
+          super.attributeChangedCallback(e, n, i);
           break;
       }
   }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
   createGridTemplateAreas() {
-    const t = this.shadowRoot.querySelector(
+    const e = this.shadowRoot.querySelector(
       ".banner-content"
-    ), a = ["tag", "media", "title", "description", "content", "action"];
-    let e = "";
-    this.reduced ? a.forEach((r) => {
-      const n = this.shadowRoot.querySelector(
-        `slot[name="${r}"]`
+    ), n = ["tag", "media", "title", "description", "content", "action"];
+    let i = "";
+    this.reduced ? n.forEach((s) => {
+      const r = this.shadowRoot.querySelector(
+        `slot[name="${s}"]`
       );
-      if (n && n.assignedElements().length > 0) {
-        if (r === "media") return;
-        e += `'media ${r}'
+      if (r && r.assignedElements().length > 0) {
+        if (s === "media") return;
+        i += `'media ${s}'
 `;
       }
-    }) : a.forEach((r) => {
-      const n = this.shadowRoot.querySelector(
-        `slot[name="${r}"]`
+    }) : n.forEach((s) => {
+      const r = this.shadowRoot.querySelector(
+        `slot[name="${s}"]`
       );
-      n && n.assignedElements().length > 0 && (e += `'${r}'
+      r && r.assignedElements().length > 0 && (i += `'${s}'
 `);
-    }), e || (e = "'content'"), t.style.gridTemplateAreas = e;
+    }), i || (i = "'content'"), e.style.gridTemplateAreas = i;
+  }
+  createGridding(e) {
+    const n = [
+      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
+      {
+        prop: "hasGriddingMobile",
+        gridAttr: "grid-cols--mobile",
+        attr: "col-span--mobile"
+      },
+      {
+        prop: "hasGriddingTablet",
+        gridAttr: "grid-cols--tablet",
+        attr: "col-span--tablet"
+      },
+      {
+        prop: "hasGriddingLaptop",
+        gridAttr: "grid-cols--laptop",
+        attr: "col-span--laptop"
+      }
+    ], i = this.shadowRoot.querySelector(
+      "px-grid > px-container"
+    );
+    e !== null ? n.forEach(({ prop: s, gridAttr: r, attr: j }) => {
+      this[s] && (this.$grid.setAttribute(r, "3"), i == null || i.setAttribute(j, "2"));
+    }) : n.forEach(({ gridAttr: s, attr: r }) => {
+      this.$grid.setAttribute(s, "1"), i == null || i.setAttribute(r, "1");
+    });
+  }
+  get $grid() {
+    return this.shadowRoot.querySelector("px-grid");
   }
   get $container() {
-    return this.shadowRoot.querySelector("px-container");
+    return this.shadowRoot.querySelector(".banner-container");
   }
   get $children() {
     return this.querySelectorAll("px-banner > *");
@@ -108,79 +487,105 @@ const o = class o extends d {
   get backgroundColor() {
     return this.getAttribute("background-color");
   }
-  set backgroundColor(t) {
-    this.setAttribute("background-color", t);
+  set backgroundColor(e) {
+    this.setAttribute("background-color", e);
   }
   get gradient() {
     return this.getAttribute("background-gradient");
   }
-  set gradient(t) {
-    this.setAttribute("background-gradient", t);
+  set gradient(e) {
+    this.setAttribute("background-gradient", e);
   }
   get backgroundImage() {
     return this.getAttribute("background-image");
   }
-  set backgroundImage(t) {
-    this.setAttribute("background-image", t);
+  set backgroundImage(e) {
+    this.setAttribute("background-image", e);
   }
   get backgroundImageMobile() {
     return this.getAttribute("background-image--mobile");
   }
-  set backgroundImageMobile(t) {
-    this.setAttribute("background-image--mobile", t);
+  set backgroundImageMobile(e) {
+    this.setAttribute("background-image--mobile", e);
   }
   get backgroundImageTablet() {
     return this.getAttribute("background-image--tablet");
   }
-  set backgroundImageTablet(t) {
-    this.setAttribute("background-image--tablet", t);
+  set backgroundImageTablet(e) {
+    this.setAttribute("background-image--tablet", e);
   }
   get backgroundImageLaptop() {
     return this.getAttribute("background-image--laptop");
   }
-  set backgroundImageLaptop(t) {
-    this.setAttribute("background-image--laptop", t);
+  set backgroundImageLaptop(e) {
+    this.setAttribute("background-image--laptop", e);
   }
   get backgroundSize() {
     return this.getAttribute("background-size");
   }
-  set backgroundSize(t) {
-    this.setAttribute("background-size", t);
+  set backgroundSize(e) {
+    this.setAttribute("background-size", e);
   }
   get backgroundPosition() {
     return this.getAttribute("background-position");
   }
-  set backgroundPosition(t) {
-    this.setAttribute("background-position", t);
+  set backgroundPosition(e) {
+    this.setAttribute("background-position", e);
   }
   get gradientContrastHelper() {
     return this.hasAttribute("contrast-helper-gradient");
   }
-  set gradientContrastHelper(t) {
-    t ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
+  set gradientContrastHelper(e) {
+    e ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
   }
   get overlayContrastHelper() {
     return this.hasAttribute("contrast-helper-overlay");
   }
-  set overlayContrastHelper(t) {
-    t ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
+  set overlayContrastHelper(e) {
+    e ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
   }
   get inverted() {
     return this.hasAttribute("inverted");
   }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  set inverted(e) {
+    e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
   }
   get reduced() {
     return this.hasAttribute("reduced");
   }
-  set reduced(t) {
-    t ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
+  set reduced(e) {
+    e ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
+  }
+  get hasGridding() {
+    return this.hasAttribute("has-gridding");
+  }
+  set hasGridding(e) {
+    e ? this.setAttribute("has-gridding", "") : this.removeAttribute("has-gridding");
+  }
+  get hasGriddingMobile() {
+    return this.hasAttribute("has-gridding--mobile");
+  }
+  set hasGriddingMobile(e) {
+    e ? this.setAttribute("has-gridding--mobile", "") : this.removeAttribute("has-gridding--mobile");
+  }
+  get hasGriddingTablet() {
+    return this.hasAttribute("has-gridding--tablet");
+  }
+  set hasGriddingTablet(e) {
+    e ? this.setAttribute("has-gridding--tablet", "") : this.removeAttribute("has-gridding--tablet");
+  }
+  get hasGriddingLaptop() {
+    return this.hasAttribute("has-gridding--laptop");
+  }
+  set hasGriddingLaptop(e) {
+    e ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
   }
 };
-o.nativeName = "div";
-let i = o;
-customElements.get("px-banner") || customElements.define("px-banner", i);
+o = new WeakSet(), d = function() {
+  this.$container.setAttribute("padding", this.reduced ? "m" : "l");
+}, p.nativeName = "div";
+let g = p;
+customElements.get("px-banner") || customElements.define("px-banner", g);
 export {
-  i as Banner
+  g as Banner
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-banner",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.100",
   "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"