@proximus/lavender-cell 1.0.0-alpha.12

package/dist/index.js

@@ -0,0 +1,886 @@
+import { WithFlexAttributes as b, backgroundColorValues as v } from "@proximus/lavender-common";
+const w = "::slotted(*[grow]){flex-grow:var(--flex-grow-value)}::slotted(*[shrink]){flex-shrink:var(--flex-shrink-value)}::slotted(*[basis]){flex-basis:var(--flex-basis-value)}::slotted(*[align-self]){align-self:var(--flex-align-self-value)}::slotted(*[grow--mobile]){flex-grow:var(--flex-grow--mobile-value)}::slotted(*[shrink--mobile]){flex-shrink:var(--flex-shrink--mobile-value)}::slotted(*[basis--mobile]){flex-basis:var(--flex-basis--mobile-value)}::slotted(*[align-self--mobile]){align-self:var(--flex-align-self--mobile-value)}@media screen and (min-width: 768px){::slotted(*[grow--tablet]){flex-grow:var(--flex-grow--tablet-value)}::slotted(*[shrink--tablet]){flex-shrink:var(--flex-shrink--tablet-value)}::slotted(*[basis--tablet]){flex-basis:var(--flex-basis--tablet-value)}::slotted(*[align-self--tablet]){align-self:var(--flex-align-self--tablet-value)}}@media screen and (min-width: 1025px){::slotted(*[grow--laptop]){flex-grow:var(--flex-grow--laptop-value)}::slotted(*[shrink--laptop]){flex-shrink:var(--flex-shrink--laptop-value)}::slotted(*[basis--laptop]){flex-basis:var(--flex-basis--laptop-value)}::slotted(*[align-self--laptop]){align-self:var(--flex-align-self--laptop-value)}}@media screen and (min-width: 1441px){::slotted(*[grow--desktop]){flex-grow:var(--flex-grow--desktop-value)}::slotted(*[shrink--desktop]){flex-shrink:var(--flex-shrink--desktop-value)}::slotted(*[basis--desktop]){flex-basis:var(--flex-basis--desktop-value)}::slotted(*[align-self--desktop]){align-self:var(--flex-align-self--desktop-value)}}@media only screen and (min-width: 0px) and (max-width: 767px){::slotted(*[hidden--mobile]){display:none}}@media only screen and (min-width: 768px) and (max-width: 1024px){::slotted(*[hidden--tablet]){display:none}}@media only screen and (min-width: 1025px) and (max-width: 1440px){::slotted(*[hidden--laptop]){display:none}}@media only screen and (min-width: 1441px){::slotted(*[hidden--desktop]){display:none}}", h = new CSSStyleSheet();
+h.replaceSync(w);
+class c extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      "grow",
+      "grow--tablet",
+      "grow--laptop",
+      "grow--desktop",
+      "shrink",
+      "shrink--mobile",
+      "shrink--tablet",
+      "shrink--laptop",
+      "shrink--desktop",
+      "basis",
+      "basis--mobile",
+      "basis--tablet",
+      "basis--laptop",
+      "basis--desktop",
+      "align-self",
+      "hidden--mobile",
+      "hidden--tablet",
+      "hidden--laptop",
+      "hidden--desktop"
+    ];
+  }
+  constructor(...t) {
+    super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
+      h,
+      ...t
+    ];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (c.observedAttributes.indexOf(t) !== -1)
+      if (i === null)
+        this.style.removeProperty(t);
+      else
+        switch (t) {
+          case "grow":
+          case "shrink":
+          case "basis":
+          case "grow--mobile":
+          case "grow--tablet":
+          case "grow--laptop":
+          case "grow--desktop":
+          case "shrink--mobile":
+          case "shrink--tablet":
+          case "shrink--laptop":
+          case "shrink--desktop":
+          case "basis--mobile":
+          case "basis--tablet":
+          case "basis--laptop":
+          case "basis--desktop":
+          case "align-self":
+            this.style.setProperty(`--flex-${t}-value`, i);
+            break;
+        }
+  }
+  get grow() {
+    return this.getAttribute("grow");
+  }
+  set grow(t) {
+    this.setAttribute("grow", t);
+  }
+  get shrink() {
+    return this.getAttribute("shrink");
+  }
+  set shrink(t) {
+    this.setAttribute("shrink", t);
+  }
+  get basis() {
+    return this.getAttribute("basis");
+  }
+  set basis(t) {
+    this.setAttribute("basis", t);
+  }
+  get growMobile() {
+    return this.getAttribute("grow--mobile");
+  }
+  set growMobile(t) {
+    this.setAttribute("grow--mobile", t);
+  }
+  get growTablet() {
+    return this.getAttribute("grow--tablet");
+  }
+  set growTablet(t) {
+    this.setAttribute("grow--tablet", t);
+  }
+  get growLaptop() {
+    return this.getAttribute("grow--laptop");
+  }
+  set growLaptop(t) {
+    this.setAttribute("grow--laptop", t);
+  }
+  get growDesktop() {
+    return this.getAttribute("grow--desktop");
+  }
+  set growDesktop(t) {
+    this.setAttribute("grow--desktop", t);
+  }
+  get shrinkMobile() {
+    return this.getAttribute("shrink--mobile");
+  }
+  set shrinkMobile(t) {
+    this.setAttribute("shrink--mobile", t);
+  }
+  get shrinkTablet() {
+    return this.getAttribute("shrink--tablet");
+  }
+  set shrinkTablet(t) {
+    this.setAttribute("shrink--tablet", t);
+  }
+  get shrinkLaptop() {
+    return this.getAttribute("shrink--laptop");
+  }
+  set shrinkLaptop(t) {
+    this.setAttribute("shrink--laptop", t);
+  }
+  get shrinkDesktop() {
+    return this.getAttribute("shrink--desktop");
+  }
+  set shrinkDesktop(t) {
+    this.setAttribute("shrink--desktop", t);
+  }
+  get basisMobile() {
+    return this.getAttribute("basis--mobile");
+  }
+  set basisMobile(t) {
+    this.setAttribute("basis--mobile", t);
+  }
+  get basisTablet() {
+    return this.getAttribute("basis--tablet");
+  }
+  set basisTablet(t) {
+    this.setAttribute("basis--tablet", t);
+  }
+  get basisLaptop() {
+    return this.getAttribute("basis--laptop");
+  }
+  set basisLaptop(t) {
+    this.setAttribute("basis--laptop", t);
+  }
+  get basisDesktop() {
+    return this.getAttribute("basis--desktop");
+  }
+  set basisDesktop(t) {
+    this.setAttribute("basis--desktop", t);
+  }
+  get alignSelf() {
+    return this.getAttribute("align-self");
+  }
+  set alignSelf(t) {
+    this.setAttribute("align-self", t);
+  }
+  get $el() {
+    return this;
+  }
+  get hiddenMobile() {
+    return this.getAttribute("hidden--mobile");
+  }
+  set hiddenMobile(t) {
+    this.setAttribute("hidden--mobile", t);
+  }
+  get hiddenTablet() {
+    return this.getAttribute("hidden--tablet");
+  }
+  set hiddenTablet(t) {
+    this.setAttribute("hidden--tablet", t);
+  }
+  get hiddenLaptop() {
+    return this.getAttribute("hidden--laptop");
+  }
+  set hiddenLaptop(t) {
+    this.setAttribute("hidden--laptop", t);
+  }
+  get hiddenDesktop() {
+    return this.getAttribute("hidden--desktop");
+  }
+  set hiddenDesktop(t) {
+    this.setAttribute("hidden--desktop", t);
+  }
+}
+const y = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value)}}", f = new CSSStyleSheet();
+f.replaceSync(y);
+const A = [
+  "after-element-none",
+  "after-element-2xs",
+  "after-element-xs",
+  "after-element-s",
+  "after-element-default",
+  "after-element-l",
+  "heading-to-subtitle",
+  "heading-to-content",
+  "inside-section-none",
+  "inside-section-xs",
+  "inside-section-s",
+  "inside-section-default",
+  "inside-section-l",
+  "between-sections"
+], S = [
+  "",
+  "default",
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+], C = [
+  "",
+  "default",
+  "stretch",
+  "flex-start",
+  "flex-end",
+  "center",
+  "baseline"
+], $ = [
+  "",
+  "default",
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+], _ = ["", "default", "nowrap", "wrap", "wrap-reverse"];
+class p extends b {
+  constructor() {
+    super(f), this.template = `<div class="flex-container">
+      <slot></slot>
+  </div>`, this.shadowRoot.innerHTML = this.template;
+  }
+  connectedCallback() {
+    this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "inside-section-none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap");
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "direction",
+      "direction--mobile",
+      "direction--tablet",
+      "direction--laptop",
+      "direction--desktop",
+      "gap",
+      "gap--mobile",
+      "gap--tablet",
+      "gap--laptop",
+      "gap--desktop",
+      "justify-content",
+      "justify-content--mobile",
+      "justify-content--tablet",
+      "justify-content--laptop",
+      "justify-content--desktop",
+      "align-items",
+      "align-items--mobile",
+      "align-items--tablet",
+      "align-items--laptop",
+      "align-items--desktop",
+      "wrap",
+      "wrap--mobile",
+      "wrap--tablet",
+      "wrap--laptop",
+      "wrap--desktop"
+    ];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (t.indexOf("direction") > -1 && !["column", "row"].includes(i))
+      throw new Error("Invalid direction");
+    switch (t) {
+      case "gap":
+      case "gap--mobile":
+      case "gap--tablet":
+      case "gap--laptop":
+      case "gap--desktop":
+        this.updateFlexProperties(t, e, i, A);
+        break;
+      case "justify-content":
+      case "justify-content--mobile":
+      case "justify-content--tablet":
+      case "justify-content--laptop":
+      case "justify-content--desktop":
+        this.updateFlexProperties(
+          t,
+          e,
+          i,
+          $
+        );
+        break;
+      case "align-items":
+      case "align-items--mobile":
+      case "align-items--tablet":
+      case "align-items--laptop":
+      case "align-items--desktop":
+        this.updateFlexProperties(t, e, i, C);
+        break;
+      case "wrap":
+      case "wrap--mobile":
+      case "wrap--tablet":
+      case "wrap--laptop":
+      case "wrap--desktop":
+        this.updateFlexProperties(t, e, i, _);
+        break;
+      case "direction":
+      case "direction--mobile":
+      case "direction--tablet":
+      case "direction--laptop":
+      case "direction--desktop":
+        this.updateFlexProperties(t, e, i, S);
+        break;
+      default:
+        super.attributeChangedCallback(t, e, i);
+        break;
+    }
+  }
+  updateFlexProperties(t, e, i, s) {
+    this.checkName(s, i) || console.error(`Bad ${t} value for`, this.$el);
+    const l = t.indexOf("--") > -1, a = l ? t.split("--")[0] : t, o = [];
+    if (!l)
+      this.getAttribute(a + "--mobile") || o.push("mobile"), this.getAttribute(a + "--tablet") || o.push("tablet"), this.getAttribute(a + "--laptop") || o.push("laptop"), this.getAttribute(a + "--desktop") || o.push("desktop"), o.forEach((n) => {
+        this.updateStyle(a, n, e, s), this.updateStyle(a, n, i, s);
+      });
+    else {
+      const n = t.split("--")[1];
+      this.updateStyle(a, n, e, s), this.updateStyle(a, n, i, s);
+    }
+  }
+  updateStyle(t, e, i, s) {
+    i !== null && i !== "" && i !== "default" && (t === "gap" && s.includes(i) ? this.$el.style.setProperty(
+      `--flex-${t}--${e}-value`,
+      `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
+    ) : this.$el.style.setProperty(
+      `--flex-${t}--${e}-value`,
+      i
+    ));
+  }
+  checkName(t, e) {
+    return t.includes(e);
+  }
+  get direction() {
+    return this.getAttribute("direction");
+  }
+  set direction(t) {
+    this.setAttribute("direction", t);
+  }
+  get directionMobile() {
+    return this.getAttribute("direction--mobile");
+  }
+  set directionMobile(t) {
+    this.setAttribute("direction--mobile", t);
+  }
+  get directionTablet() {
+    return this.getAttribute("direction--tablet");
+  }
+  set directionTablet(t) {
+    this.setAttribute("direction--tablet", t);
+  }
+  get directionLaptop() {
+    return this.getAttribute("direction--laptop");
+  }
+  set directionLaptop(t) {
+    this.setAttribute("direction--laptop", t);
+  }
+  get directionDesktop() {
+    return this.getAttribute("direction--desktop");
+  }
+  set directionDesktop(t) {
+    this.setAttribute("direction--desktop", t);
+  }
+  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 justifyContent() {
+    return this.getAttribute("justify-content");
+  }
+  set justifyContent(t) {
+    this.setAttribute("justify-content", t);
+  }
+  get justifyContentMobile() {
+    return this.getAttribute("justify-content--mobile");
+  }
+  set justifyContentMobile(t) {
+    this.setAttribute("justify-content--mobile", t);
+  }
+  get justifyContentTablet() {
+    return this.getAttribute("justify-content--tablet");
+  }
+  set justifyContentTablet(t) {
+    this.setAttribute("justify-content--tablet", t);
+  }
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content--laptop");
+  }
+  set justifyContentLaptop(t) {
+    this.setAttribute("justify-content--laptop", t);
+  }
+  get justifyContentDesktop() {
+    return this.getAttribute("justify-content--desktop");
+  }
+  set justifyContentDesktop(t) {
+    this.setAttribute("justify-content--desktop", t);
+  }
+  get alignItems() {
+    return this.getAttribute("align-items");
+  }
+  set alignItems(t) {
+    this.setAttribute("align-items", t);
+  }
+  get alignItemsMobile() {
+    return this.getAttribute("align-items--mobile");
+  }
+  set alignItemsMobile(t) {
+    this.setAttribute("align-items--mobile", t);
+  }
+  get alignItemsTablet() {
+    return this.getAttribute("align-items--tablet");
+  }
+  set alignItemsTablet(t) {
+    this.setAttribute("align-items--tablet", t);
+  }
+  get alignItemsLaptop() {
+    return this.getAttribute("align-items--laptop");
+  }
+  set alignItemsLaptop(t) {
+    this.setAttribute("align-items--laptop", t);
+  }
+  get alignItemsDesktop() {
+    return this.getAttribute("align-items--desktop");
+  }
+  set alignItemsDesktop(t) {
+    this.setAttribute("align-items--desktop", t);
+  }
+  get wrap() {
+    return this.getAttribute("wrap");
+  }
+  set wrap(t) {
+    this.setAttribute("wrap", t);
+  }
+  get wrapMobile() {
+    return this.getAttribute("wrap--mobile");
+  }
+  set wrapMobile(t) {
+    this.setAttribute("wrap--mobile", t);
+  }
+  get wrapTablet() {
+    return this.getAttribute("wrap--tablet");
+  }
+  set wrapTablet(t) {
+    this.setAttribute("wrap--tablet", t);
+  }
+  get wrapLaptop() {
+    return this.getAttribute("wrap--laptop");
+  }
+  set wrapLaptop(t) {
+    this.setAttribute("wrap--laptop", t);
+  }
+  get wrapDesktop() {
+    return this.getAttribute("wrap--desktop");
+  }
+  set wrapDesktop(t) {
+    this.setAttribute("wrap--desktop", t);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".flex-container");
+  }
+}
+customElements.get("px-stack") || customElements.define("px-stack", p);
+class j extends p {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
+  }
+}
+customElements.get("px-vstack") || customElements.define("px-vstack", j);
+class z extends p {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
+  }
+}
+customElements.get("px-hstack") || customElements.define("px-hstack", z);
+class I extends HTMLElement {
+  constructor() {
+    super();
+  }
+  static get observedAttributes() {
+    return ["grow"];
+  }
+  attributeChangedCallback(t, e, i) {
+    t === "grow" && (this.style.flexGrow = i);
+  }
+  connectedCallback() {
+    this.style.flexGrow = this.getAttribute("grow") || "1";
+  }
+  get grow() {
+    return this.getAttribute("grow");
+  }
+  set grow(t) {
+    this.setAttribute("grow", t);
+  }
+}
+customElements.define("px-spacer", I);
+const L = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", x = new CSSStyleSheet();
+x.replaceSync(L);
+class H extends b {
+  constructor() {
+    super(x), this.template = (t) => `
+    <px-container border-radius="none" padding="none">
+      <px-vstack>
+        <px-container id="header-container" border-radius="none">
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack
+              id="header-vstack-container"
+              gap="1rem"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
+              <slot name="header-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="image-container"
+          border-radius="none"
+          padding="none"
+          padding-top="xl"
+          id="image-box"
+          background-size="cover"
+          background-position="top center"
+          padding-bottom="xl"
+          border-radius="none"
+          bgimg="${this.backgroundImage}"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack grow="${this.grow}" basis="${this.basis}">
+              <slot name="image-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        ${t ? ` <px-hstack>
+        <px-spacer></px-spacer>
+        <px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
+          <px-vstack gap="1rem">
+            <slot name="image-sticky-container"></slot>
+          </px-vstack>
+        </px-container>
+        <px-spacer></px-spacer>
+      </px-hstack>` : ""}
+        <px-container
+          id="body-container"
+          id="main"
+          background-color="${this.backgroundColor}"
+          padding="none"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack
+              id="body-vstack-container"
+              gap="3rem"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
+              <slot name="body-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="contact-container"
+          border-radius="none"
+          id="main"
+          background-color="container-weak"
+          padding="none"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="contact-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="footer-container"
+          background-color="none"
+          border-radius="none"
+          style="background-color: rgb(108, 66, 156)"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="footer-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+      </px-vstack>
+    </px-container>
+  `, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "background-image",
+      "gap",
+      "background-color",
+      "padding-vertical",
+      "padding-horizontal"
+    ];
+  }
+  get $wideImage() {
+    return this.shadowRoot.querySelector("#image-box");
+  }
+  get $bodyVStackContainer() {
+    return this.shadowRoot.querySelector("#header-vstack-container");
+  }
+  get $bodyContainer() {
+    return this.shadowRoot.querySelector("#body-container");
+  }
+  get $contactContainer() {
+    return this.shadowRoot.querySelector("#contact-container");
+  }
+  get $footerContainer() {
+    return this.shadowRoot.querySelector("#footer-container");
+  }
+  get $headerContainer() {
+    return this.shadowRoot.querySelector("#header-container");
+  }
+  get $imageContainer() {
+    return this.shadowRoot.querySelector("#image-container");
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  get $imageStickySlot() {
+    return this.querySelector('*[slot="image-sticky-container"]');
+  }
+  get $main() {
+    return this.shadowRoot.querySelector("#main");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color") || "none";
+  }
+  get paddingVertical() {
+    return this.getAttribute("padding-vertical");
+  }
+  get paddingHorizontal() {
+    return this.getAttribute("padding-horizontal");
+  }
+  set paddingVertical(t) {
+    this.setAttribute("padding-vertical", t);
+  }
+  set paddingHorizontal(t) {
+    this.setAttribute("padding-horizontal", t);
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  connectedCallback() {
+    this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "background-image":
+          this.$imageContainer.setAttribute("background-image", i);
+          break;
+        case "gap":
+          this.$bodyVStackContainer.setAttribute("gap", i);
+          break;
+        case "background-color":
+          this.$bodyContainer.setAttribute(
+            "background-color",
+            v.indexOf(i) > 0 ? i : "none"
+          );
+          break;
+        case "padding-vertical":
+          this.handlePaddingVerticalChange(i);
+          break;
+        case "padding-horizontal":
+          this.handlePaddingHorizontalChange(i);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, i);
+      }
+  }
+  handlePaddingVerticalChange(t) {
+    this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
+  }
+  handlePaddingHorizontalChange(t) {
+    this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
+  }
+}
+customElements.get("px-page") === void 0 && customElements.define("px-page", H);
+const M = '.cell__container{font-family:var(--px-font-family);line-height:var(--px-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:700;color:var(--px-text-color-heading-neutral-default);padding:var(--px-padding-s-mobile)}.cell__container,.cell__container *{box-sizing:border-box}.cell__container ::slotted([slot="description"]){font-weight:400;font-size:var(--px-text-size-label-m-mobile)}.cell__container ::slotted([slot="suffix"]){text-align:right}@media only screen and (min-width: 768px){.cell__container{font-size:var(--px-text-size-label-l-tablet);padding:var(--px-padding-s-tablet)}.cell__container ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.cell__container{font-size:var(--px-text-size-label-l-desktop);padding:var(--px-padding-s-desktop)}.cell__container ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) .cell__container{color:var(--px-text-color-heading-neutral-inverted)}', R = '.tile__container{display:flex;flex-direction:column;font-family:var(--px-font-family);line-height:var(--px-line-height-m);font-size:var(--px-text-size-label-m-mobile);font-weight:700;color:var(--px-text-color-action-neutral-default)}.tile__container,.tile__container *{box-sizing:border-box}.tile__container .tile__header:not(.tile__header--empty)+.tile__content:not(.tile__content--empty){margin-top:var(--px-spacing-inside-section-default-mobile)}.tile__container ::slotted([slot="prefix"]){font-weight:400}.tile__container ::slotted([slot="description"]){font-weight:400}@media only screen and (min-width: 768px){.tile__container{font-size:var(--px-text-size-label-m-tablet)}.tile__container .tile__header:not(.tile__header--empty)+.tile__content:not(.tile__content--empty){margin-top:var(--px-spacing-inside-section-default-tablet)}}@media only screen and (min-width: 1025px){.tile__container{font-size:var(--px-text-size-label-m-desktop)}.tile__container .tile__header:not(.tile__header--empty)+.tile__content:not(.tile__content--empty){margin-top:var(--px-spacing-inside-section-default-desktop)}}:host([inverted]) .tile__container{color:var(--px-text-color-action-neutral-inverted)}', T = new CSSStyleSheet();
+T.replaceSync(R);
+const d = ["", "default", "xs", "s", "l", "2xl"], g = ["", "default", "s", "m", "l"], m = new CSSStyleSheet();
+m.replaceSync(M);
+const P = ["", "default", "naked", "contained"], u = ["secondary"];
+class q extends c {
+  template() {
+    return `
+      <div class="cell__container">
+        <px-hstack gap="after-element-s" justify-content="space-between" align-items="center">
+          <px-hstack gap="after-element-s" align-items="center">
+            <slot name="prefix"></slot>
+            <slot name="visual"></slot>
+            <px-vstack gap="after-element-2xs">
+              <slot></slot>
+              <slot name="description"></slot>
+            </px-vstack>
+          </px-hstack>
+          <px-hstack gap="after-element-s" align-items="center" class="cell__suffix-action-container">
+            <px-stack direction="column" gap="after-element-2xs" align-items="flex-end" class="cell__suffix-container">
+              <slot name="suffix"></slot>
+            </px-stack>
+            <span class="cell__action-indicator"></span>
+          </px-hstack>
+        </px-hstack>
+      </div>
+    `;
+  }
+  constructor() {
+    super(m), this.shadowRoot.innerHTML = this.template();
+  }
+  connectedCallback() {
+    if (this.$slotVisual) {
+      const t = this.querySelector("px-icon"), e = this.querySelector("px-img");
+      t && this.configurePrefixIcon(t), e && this.configurePrefixImg(e);
+    }
+    this.$slotSuffix && this.configureSlotSuffix(), this.$actionIndicator.textContent.trim() || (this.$suffixActionContainer.gap = "after-element-none");
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted", "variant"];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (super.attributeChangedCallback(t, e, i), e !== i)
+      switch (t) {
+        case "variant":
+          this.updateVariant(e, i, P);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, i);
+          break;
+      }
+  }
+  configureSlotSuffix() {
+    const t = this.querySelectorAll("px-button-icon"), e = t.length > 0;
+    t.length > 1 && (this.$suffixContainer.gap = "after-element-s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center"), e && t.forEach((s) => {
+      s.hasAttribute("variant") ? u.includes(
+        s.getAttribute("variant")
+      ) || (console.error(
+        `Wrong button-icon variant value for suffix. Allowed values are: ${u.join(
+          ", "
+        )}.`
+      ), s.setAttribute("variant", "secondary")) : s.setAttribute("variant", "secondary");
+    });
+  }
+  configurePrefixIcon(t) {
+    t.hasAttribute("size") ? d.includes(
+      t.getAttribute("size")
+    ) ? (t.getAttribute("size") === "" || t.getAttribute("size") === "default") && t.setAttribute("size", "s") : (console.error(
+      `Wrong icon size value for prefix. Allowed values are: ${d.join(
+        ", "
+      )}.`
+    ), t.setAttribute("size", "s")) : t.setAttribute("size", "s"), t.setAttribute("color", "content-brand");
+  }
+  configurePrefixImg(t) {
+    t.hasAttribute("width") ? g.includes(
+      t.getAttribute("width")
+    ) ? (t.getAttribute("width") === "" || t.getAttribute("width") === "default") && t.setAttribute("width", "s") : (console.error(
+      `Wrong img width value for prefix. Allowed values are: ${g.join(
+        ", "
+      )}.`
+    ), t.setAttribute("width", "s")) : t.setAttribute("width", "s"), t.setAttribute("border-radius", "pill");
+  }
+  checkName(t, e) {
+    return t.includes(e);
+  }
+  _toggleClass(t, e) {
+    t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(e);
+  }
+  updateVariant(t, e, i) {
+    if (!this.checkName(i, e)) {
+      console.error(
+        `${e} is not an allowed variant value for ${this.$el}.`
+      );
+      return;
+    }
+    this._toggleClass(t, e);
+  }
+  get $suffixContainer() {
+    return this.shadowRoot.querySelector(".cell__suffix-container");
+  }
+  get $actionIndicator() {
+    return this.shadowRoot.querySelector(
+      ".cell__action-indicator"
+    );
+  }
+  get $suffixActionContainer() {
+    return this.shadowRoot.querySelector(
+      ".cell__suffix-action-container"
+    );
+  }
+  get $slotPrefix() {
+    return this.querySelector('[slot="prefix"]');
+  }
+  get $slotVisual() {
+    return this.querySelector('[slot="visual"]');
+  }
+  get $slotDescription() {
+    return this.querySelector('[slot="description"]');
+  }
+  get $slotSuffix() {
+    return this.querySelector('[slot="suffix"]');
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+}
+const D = ":host{display:block}.cell{background-color:transparent}.cell,.cell *{box-sizing:border-box}.contained{background-color:var(--px-color-background-action-neutral-bare-default);border-radius:var(--px-radius-main)}:host([inverted]) .cell{background-color:transparent}:host([inverted]) .contained{background-color:var(--px-color-background-action-neutral-bare-inverted)}", k = new CSSStyleSheet();
+k.replaceSync(D);
+class E extends q {
+  template() {
+    return `
+      <div class="cell">
+        ${super.template()}
+      </div>
+    `;
+  }
+  constructor() {
+    super(), this.shadowRoot.adoptedStyleSheets = [
+      ...this.shadowRoot.adoptedStyleSheets,
+      k
+    ];
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".cell");
+  }
+}
+customElements.define("px-cell", E);
+export {
+  E as Cell
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-cell",
+  "version": "1.0.0-alpha.12",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "2e2d845407e7c36959a31fd015a416e598d2d5a9",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}