@proximus/lavender-table 1.2.0-alpha.37

package/dist/index.js

@@ -0,0 +1,656 @@
+import { WithFlexAttributes as a, backgroundColorValues as b } from "@proximus/lavender-common";
+const u = ":host{display:table;width:100%}", r = new CSSStyleSheet();
+r.replaceSync(u);
+class x extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+      <slot></slot>
+    `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r];
+  }
+  connectedCallback() {
+    this.style.display = "table", this.setAttribute("role", "table");
+  }
+}
+customElements.get("px-table") || customElements.define("px-table", x);
+const m = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-background-color-container-weak-default)}", l = new CSSStyleSheet();
+l.replaceSync(m);
+class y extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+        <slot></slot>
+    `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l];
+  }
+  connectedCallback() {
+    this.style.display = "table-header-group", this.setAttribute("role", "rowgroup");
+  }
+}
+customElements.get("px-thead") || customElements.define("px-thead", y);
+const f = ":host{display:table-row}", n = new CSSStyleSheet();
+n.replaceSync(f);
+class v extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+        <slot></slot>
+    `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [n];
+  }
+  connectedCallback() {
+    this.style.display = "table-row", this.setAttribute("role", "row");
+  }
+}
+customElements.get("px-tr") || customElements.define("px-tr", v);
+const k = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-border-size-l) solid var( --th-border-color-default, var(--px-border-color-container-main-default) )}.th{padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:400;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-m);color:var(--px-text-color-body-neutral-strong-default)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-text-color-body-neutral-weak-default)}@media only screen and (min-width: 768px){.th{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-tablet)}}@media only screen and (min-width: 1025px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}', p = new CSSStyleSheet();
+p.replaceSync(k);
+class w extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+      <div class="th">
+        <px-vstack gap="after-element-none">
+          <px-hstack gap="after-element-2xs" align-items="center">
+            <slot></slot>
+            <slot name="info"></slot>
+          </px-hstack>
+          <slot name="description"></slot>
+        </px-vstack>
+      </div>
+    `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [p];
+  }
+  connectedCallback() {
+    this.style.display = "table-cell", this.style.verticalAlign = "middle", this.style.borderBottom = "var(--px-border-size-l) solid var(--th-border-color-default)", this.setAttribute("role", "columnheader");
+    const t = this.querySelector('[slot="info"]');
+    t && (t.setAttribute("size", "xs"), t.setAttribute("color", "content-brand"));
+  }
+}
+customElements.get("px-th") || customElements.define("px-th", w);
+const S = ":host{display:table-row-group}::slotted(px-tr){background-color:var(--px-background-color-container-weak-default)}::slotted(px-tr:hover){background-color:var(--px-background-color-action-neutral-hover-default)}", d = new CSSStyleSheet();
+d.replaceSync(S);
+class $ extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+        <slot></slot>
+    `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [d];
+  }
+  connectedCallback() {
+    this.style.display = "table-row-group", this.setAttribute("role", "rowgroup");
+  }
+}
+customElements.get("px-tbody") || customElements.define("px-tbody", $);
+const A = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-border-size-m) solid var( --td-border-color-default, var(--px-border-color-container-main-default) )}.td{height:100%;padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:400;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-m);color:var(--px-text-color-body-neutral-strong-default)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-text-color-body-neutral-weak-default)}@media only screen and (min-width: 768px){.td{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-tablet)}}@media only screen and (min-width: 1025px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-tablet)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}', C = ".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)}}", c = new CSSStyleSheet();
+c.replaceSync(C);
+const j = [
+  "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"
+];
+class o extends a {
+  constructor() {
+    super(c), this.template = `<div class="flex-container">
+      <slot></slot>
+  </div>`, this.shadowRoot.innerHTML = this.template;
+  }
+  connectedCallback() {
+    this.hasAttribute("direction") || (this.direction = "row");
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "direction",
+      "direction--mobile",
+      "direction--tablet",
+      "direction--laptop",
+      "direction--desktop",
+      "gap",
+      "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, i, e) {
+    if (t.indexOf("direction") > -1 && !["column", "row"].includes(e))
+      throw new Error("Invalid direction");
+    switch (t) {
+      case "gap":
+        this.$el.style.setProperty(
+          "--flex-gap-mobile-value",
+          this.getGapCSSVariable(e, "mobile")
+        ), this.$el.style.setProperty(
+          "--flex-gap-tablet-value",
+          this.getGapCSSVariable(e, "tablet")
+        ), this.$el.style.setProperty(
+          "--flex-gap-laptop-value",
+          this.getGapCSSVariable(e, "desktop")
+        ), this.$el.style.setProperty(
+          "--flex-gap-desktop-value",
+          this.getGapCSSVariable(e, "desktop")
+        );
+        break;
+      case "direction":
+        this.$el.style.getPropertyValue("--flex-direction--mobile-value") || this.$el.style.setProperty(
+          "--flex-direction--mobile-value",
+          e
+        ), this.$el.style.getPropertyValue("--flex-direction--tablet-value") || this.$el.style.setProperty(
+          "--flex-direction--tablet-value",
+          e
+        ), this.$el.style.getPropertyValue("--flex-direction--laptop-value") || this.$el.style.setProperty(
+          "--flex-direction--laptop-value",
+          e
+        ), this.$el.style.getPropertyValue("--flex-direction--desktop-value") || this.$el.style.setProperty(
+          "--flex-direction--desktop-value",
+          e
+        );
+        break;
+      case "justify-content":
+        this.$el.style.getPropertyValue(
+          "--flex-justify-content--mobile-value"
+        ) || this.$el.style.setProperty(
+          "--flex-justify-content--mobile-value",
+          e
+        ), this.$el.style.getPropertyValue(
+          "--flex-justify-content--tablet-value"
+        ) || this.$el.style.setProperty(
+          "--flex-justify-content--tablet-value",
+          e
+        ), this.$el.style.getPropertyValue(
+          "--flex-justify-content--laptop-value"
+        ) || this.$el.style.setProperty(
+          "--flex-justify-content--laptop-value",
+          e
+        ), this.$el.style.getPropertyValue(
+          "--flex-justify-content--desktop-value"
+        ) || this.$el.style.setProperty(
+          "--flex-justify-content--desktop-value",
+          e
+        );
+        break;
+      case "align-items":
+        this.$el.style.getPropertyValue("--flex-align-items--mobile-value") || this.$el.style.setProperty(
+          "--flex-align-items--mobile-value",
+          e
+        ), this.$el.style.getPropertyValue("--flex-align-items--tablet-value") || this.$el.style.setProperty(
+          "--flex-align-items--tablet-value",
+          e
+        ), this.$el.style.getPropertyValue("--flex-align-items--laptop-value") || this.$el.style.setProperty(
+          "--flex-align-items--laptop-value",
+          e
+        ), this.$el.style.getPropertyValue("--flex-align-items--desktop-value") || this.$el.style.setProperty(
+          "--flex-align-items--desktop-value",
+          e
+        );
+        break;
+      case "wrap":
+        this.$el.style.getPropertyValue("--flex-wrap-mobile-value") || this.$el.style.setProperty("--flex-wrap-mobile-value", e), this.$el.style.getPropertyValue("--flex-wrap-tablet-value") || this.$el.style.setProperty("--flex-wrap-tablet-value", e), this.$el.style.getPropertyValue("--flex-wrap-laptop-value") || this.$el.style.setProperty("--flex-wrap-laptop-value", e), this.$el.style.getPropertyValue("--flex-wrap-desktop-value") || this.$el.style.setProperty("--flex-wrap-desktop-value", e);
+        break;
+      case "direction--mobile":
+      case "direction--tablet":
+      case "direction--laptop":
+      case "direction--desktop":
+      case "justify-content--mobile":
+      case "justify-content--tablet":
+      case "justify-content--laptop":
+      case "justify-content--desktop":
+      case "align-items--mobile":
+      case "align-items--tablet":
+      case "align-items--laptop":
+      case "align-items--desktop":
+      case "wrap-mobile":
+      case "wrap-tablet":
+      case "wrap-laptop":
+      case "wrap-desktop":
+        this.$el.style.setProperty(`--flex-${t}-value`, e);
+        break;
+      default:
+        super.attributeChangedCallback(t, i, e);
+        break;
+    }
+  }
+  getGapCSSVariable(t, i = "mobile") {
+    return j.includes(t) ? `var(--px-spacing-${t}-${i})` : t;
+  }
+  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", o);
+class z extends o {
+  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", z);
+class P extends o {
+  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", P);
+class T extends HTMLElement {
+  constructor() {
+    super();
+  }
+  static get observedAttributes() {
+    return ["grow"];
+  }
+  attributeChangedCallback(t, i, e) {
+    t === "grow" && (this.style.flexGrow = e);
+  }
+  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", T);
+const L = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", h = new CSSStyleSheet();
+h.replaceSync(L);
+class E extends a {
+  constructor() {
+    super(h), 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, i, e) {
+    if (i !== e)
+      switch (t) {
+        case "background-image":
+          this.$imageContainer.setAttribute("background-image", e);
+          break;
+        case "gap":
+          this.$bodyVStackContainer.setAttribute("gap", e);
+          break;
+        case "background-color":
+          this.$bodyContainer.setAttribute(
+            "background-color",
+            b.indexOf(e) > 0 ? e : "none"
+          );
+          break;
+        case "padding-vertical":
+          this.handlePaddingVerticalChange(e);
+          break;
+        case "padding-horizontal":
+          this.handlePaddingHorizontalChange(e);
+          break;
+        default:
+          super.attributeChangedCallback(t, i, e);
+      }
+  }
+  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", E);
+const g = new CSSStyleSheet();
+g.replaceSync(A);
+class R extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+      <div class="td">
+        <px-hstack gap="after-element-xs" align-items="center">
+          <slot name="icon"></slot>
+          <px-vstack gap="after-element-none" align-items="start">
+            <px-hstack gap="after-element-2xs" align-items="center">
+              <slot></slot>
+              <slot name="info"></slot>
+            </px-hstack>
+            <slot name="description"></slot>
+          </px-vstack>
+        </px-hstack>
+      </div>
+    `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [g];
+  }
+  connectedCallback() {
+    this.style.display = "table-cell", this.style.verticalAlign = "middle", this.style.borderBottom = "var(--px-border-size-m) solid var(--td-border-color-default)", this.setAttribute("role", "cell");
+    const t = this.querySelector('[slot="icon"]');
+    t && (t.setAttribute("size", "l"), t.setAttribute("color", "content-neutral-strong"));
+    const i = this.querySelector('[slot="info"]');
+    i && (i.setAttribute("size", "xs"), i.setAttribute("color", "content-brand"));
+  }
+}
+customElements.get("px-td") || customElements.define("px-td", R);
+export {
+  x as Table,
+  $ as Tbody,
+  R as Td,
+  w as Th,
+  y as Thead,
+  v as Tr
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-table",
+  "version": "1.2.0-alpha.37",
+  "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": "386a3db8effe039dc90ab1efc481161fb6086502",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}