@proximus/lavender 1.0.0-alpha.19 → 1.0.0-alpha.20

package/dist/lavender.es.js

@@ -1069,6 +1069,532 @@ class Page extends WithFlexAttributes {
 if (customElements.get("px-page") === void 0) {
   customElements.define("px-page", Page);
 }
+const gridCss = ":host{--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;gap:var(--grid-gap--mobile, var(--px-spacing-inside-section-default-mobile));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)}@media screen and (min-width: 768px){.grid{gap:var( --grid-gap--tablet, var(--px-spacing-inside-section-default-tablet) )}}@media screen and (min-width: 1025px){.grid{gap:var( --grid-gap--laptop, var(--px-spacing-inside-section-default-desktop) )}}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 768px) and (max-width: 1024px){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 1025px){.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}}";
+const gridItemCss = '::slotted([col-span="1"]){grid-column:span 1 / span 1}::slotted([col-span="2"]){grid-column:span 2 / span 2}::slotted([col-span="3"]){grid-column:span 3 / span 3}::slotted([col-span="4"]){grid-column:span 4 / span 4}::slotted([col-span="5"]){grid-column:span 5 / span 5}::slotted([col-span="6"]){grid-column:span 6 / span 6}::slotted([col-span="7"]){grid-column:span 7 / span 7}::slotted([col-span="8"]){grid-column:span 8 / span 8}::slotted([col-span="9"]){grid-column:span 9 / span 9}::slotted([col-span="10"]){grid-column:span 10 / span 10}::slotted([col-span="11"]){grid-column:span 11 / span 11}::slotted([col-span="12"]){grid-column:span 12 / span 12}::slotted([col-span="full"]){grid-column:1 / -1}::slotted([order="1"]){order:1}::slotted([order="2"]){order:2}::slotted([order="3"]){order:3}::slotted([order="4"]){order:4}::slotted([order="5"]){order:5}::slotted([order="6"]){order:6}::slotted([order="first"]){order:-9999}::slotted([order="last"]){order:9999}::slotted([order="none"]){order:0}::slotted([justify-self="auto"]){justify-self:auto}::slotted([justify-self="start"]){justify-self:start}::slotted([justify-self="end"]){justify-self:end}::slotted([justify-self="center"]){justify-self:center}::slotted([justify-self="stretch"]){justify-self:stretch}::slotted([align-self="auto"]){align-self:auto}::slotted([align-self="start"]){align-self:start}::slotted([align-self="end"]){align-self:end}::slotted([align-self="center"]){align-self:center}::slotted([align-self="stretch"]){align-self:stretch}::slotted([place-self="auto"]){place-self:auto}::slotted([place-self="start"]){place-self:start}::slotted([place-self="end"]){place-self:end}::slotted([place-self="center"]){place-self:center}::slotted([place-self="stretch"]){place-self:stretch}@media only screen and (max-width: 767px){::slotted([col--mobile="auto"]){grid-column:auto}::slotted([col-span--mobile="1"]){grid-column:span 1 / span 1}::slotted([col-span--mobile="2"]){grid-column:span 2 / span 2}::slotted([col-span--mobile="3"]){grid-column:span 3 / span 3}::slotted([col-span--mobile="4"]){grid-column:span 4 / span 4}::slotted([col-span--mobile="5"]){grid-column:span 5 / span 5}::slotted([col-span--mobile="6"]){grid-column:span 6 / span 6}::slotted([col-span--mobile="7"]){grid-column:span 7 / span 7}::slotted([col-span--mobile="8"]){grid-column:span 8 / span 8}::slotted([col-span--mobile="9"]){grid-column:span 9 / span 9}::slotted([col-span--mobile="10"]){grid-column:span 10 / span 10}::slotted([col-span--mobile="11"]){grid-column:span 11 / span 11}::slotted([col-span--mobile="12"]){grid-column:span 12 / span 12}::slotted([col-span--mobile="full"]){grid-column:1 / -1}::slotted([order--mobile="1"]){order:1}::slotted([order--mobile="2"]){order:2}::slotted([order--mobile="3"]){order:3}::slotted([order--mobile="4"]){order:4}::slotted([order--mobile="5"]){order:5}::slotted([order--mobile="6"]){order:6}::slotted([order--mobile="first"]){order:-9999}::slotted([order--mobile="last"]){order:9999}::slotted([order--mobile="none"]){order:0}::slotted([justify-self--mobile="auto"]){justify-self:auto}::slotted([justify-self--mobile="start"]){justify-self:start}::slotted([justify-self--mobile="end"]){justify-self:end}::slotted([justify-self--mobile="center"]){justify-self:center}::slotted([justify-self--mobile="stretch"]){justify-self:stretch}::slotted([align-self--mobile="auto"]){align-self:auto}::slotted([align-self--mobile="start"]){align-self:start}::slotted([align-self--mobile="end"]){align-self:end}::slotted([align-self--mobile="center"]){align-self:center}::slotted([align-self--mobile="stretch"]){align-self:stretch}::slotted([place-self--mobile="auto"]){place-self:auto}::slotted([place-self--mobile="start"]){place-self:start}::slotted([place-self--mobile="end"]){place-self:end}::slotted([place-self--mobile="center"]){place-self:center}::slotted([place-self--mobile="stretch"]){place-self:stretch}}@media only screen and (min-width: 768px) and (max-width: 1024px){::slotted([col--tablet="auto"]){grid-column:auto}::slotted([col-span--tablet="1"]){grid-column:span 1 / span 1}::slotted([col-span--tablet="2"]){grid-column:span 2 / span 2}::slotted([col-span--tablet="3"]){grid-column:span 3 / span 3}::slotted([col-span--tablet="4"]){grid-column:span 4 / span 4}::slotted([col-span--tablet="5"]){grid-column:span 5 / span 5}::slotted([col-span--tablet="6"]){grid-column:span 6 / span 6}::slotted([col-span--tablet="7"]){grid-column:span 7 / span 7}::slotted([col-span--tablet="8"]){grid-column:span 8 / span 8}::slotted([col-span--tablet="9"]){grid-column:span 9 / span 9}::slotted([col-span--tablet="10"]){grid-column:span 10 / span 10}::slotted([col-span--tablet="11"]){grid-column:span 11 / span 11}::slotted([col-span--tablet="12"]){grid-column:span 12 / span 12}::slotted([col-span--tablet="full"]){grid-column:1 / -1}::slotted([order--tablet="1"]){order:1}::slotted([order--tablet="2"]){order:2}::slotted([order--tablet="3"]){order:3}::slotted([order--tablet="4"]){order:4}::slotted([order--tablet="5"]){order:5}::slotted([order--tablet="6"]){order:6}::slotted([order--tablet="first"]){order:-9999}::slotted([order--tablet="last"]){order:9999}::slotted([order--tablet="none"]){order:0}::slotted([justify-self--tablet="auto"]){justify-self:auto}::slotted([justify-self--tablet="start"]){justify-self:start}::slotted([justify-self--tablet="end"]){justify-self:end}::slotted([justify-self--tablet="center"]){justify-self:center}::slotted([justify-self--tablet="stretch"]){justify-self:stretch}::slotted([align-self--tablet="auto"]){align-self:auto}::slotted([align-self--tablet="start"]){align-self:start}::slotted([align-self--tablet="end"]){align-self:end}::slotted([align-self--tablet="center"]){align-self:center}::slotted([align-self--tablet="stretch"]){align-self:stretch}::slotted([place-self--tablet="auto"]){place-self:auto}::slotted([place-self--tablet="start"]){place-self:start}::slotted([place-self--tablet="end"]){place-self:end}::slotted([place-self--tablet="center"]){place-self:center}::slotted([place-self--tablet="stretch"]){place-self:stretch}}@media only screen and (min-width: 1025px){::slotted([col--laptop="auto"]){grid-column:auto}::slotted([col-span--laptop="1"]){grid-column:span 1 / span 1}::slotted([col-span--laptop="2"]){grid-column:span 2 / span 2}::slotted([col-span--laptop="3"]){grid-column:span 3 / span 3}::slotted([col-span--laptop="4"]){grid-column:span 4 / span 4}::slotted([col-span--laptop="5"]){grid-column:span 5 / span 5}::slotted([col-span--laptop="6"]){grid-column:span 6 / span 6}::slotted([col-span--laptop="7"]){grid-column:span 7 / span 7}::slotted([col-span--laptop="8"]){grid-column:span 8 / span 8}::slotted([col-span--laptop="9"]){grid-column:span 9 / span 9}::slotted([col-span--laptop="10"]){grid-column:span 10 / span 10}::slotted([col-span--laptop="11"]){grid-column:span 11 / span 11}::slotted([col-span--laptop="12"]){grid-column:span 12 / span 12}::slotted([col-span--laptop="full"]){grid-column:1 / -1}::slotted([justify-self--laptop="auto"]){justify-self:auto}::slotted([justify-self--laptop="start"]){justify-self:start}::slotted([justify-self--laptop="end"]){justify-self:end}::slotted([justify-self--laptop="center"]){justify-self:center}::slotted([justify-self--laptop="stretch"]){justify-self:stretch}::slotted([align-self--laptop="auto"]){align-self:auto}::slotted([align-self--laptop="start"]){align-self:start}::slotted([align-self--laptop="end"]){align-self:end}::slotted([align-self--laptop="center"]){align-self:center}::slotted([align-self--laptop="stretch"]){align-self:stretch}::slotted([place-self--laptop="auto"]){place-self:auto}::slotted([place-self--laptop="start"]){place-self:start}::slotted([place-self--laptop="end"]){place-self:end}::slotted([place-self--laptop="center"]){place-self:center}::slotted([place-self--laptop="stretch"]){place-self:stretch}}';
+const gridStyles = new CSSStyleSheet();
+gridStyles.replaceSync(gridCss);
+const gridItemStyles = new CSSStyleSheet();
+gridItemStyles.replaceSync(gridItemCss);
+const gridColsValues = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+];
+const contentAlignmentValues = [
+  "",
+  "start",
+  "end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "stretch"
+];
+const itemsAlignmentValues = ["", "start", "end", "center", "stretch"];
+const _Grid = class _Grid extends PxElement {
+  constructor() {
+    super(gridStyles, gridItemStyles);
+    this.template = () => `<div class="grid">
+    <slot></slot>
+    </div>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "gap",
+      "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() {
+    super.connectedCallback();
+    if (!this.gap) {
+      this.gap = "inside-section-default";
+    }
+    if (!this.alignItems) {
+      this.alignItems = "stretch";
+    }
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "gap":
+          this.updateGap(oldValue, newValue, gridGapValues);
+          break;
+        case "grid-cols":
+        case "grid-cols--mobile":
+        case "grid-cols--tablet":
+        case "grid-cols--laptop":
+          this.updateAttribute(attrName, oldValue, newValue, gridColsValues);
+          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(
+            attrName,
+            oldValue,
+            newValue,
+            contentAlignmentValues
+          );
+          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(
+            attrName,
+            oldValue,
+            newValue,
+            itemsAlignmentValues
+          );
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  updateGap(oldValue, newValue, attrValue) {
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad gap value for`, this.$el);
+      return;
+    }
+    const updateGapStyle = (value) => {
+      if (value !== null && value !== "" && value !== "default") {
+        this.$el.style.setProperty(
+          `--grid-gap--mobile`,
+          `var(--px-spacing-${value}-mobile)`
+        );
+        this.$el.style.setProperty(
+          `--grid-gap--tablet`,
+          `var(--px-spacing-${value}-tablet)`
+        );
+        this.$el.style.setProperty(
+          `--grid-gap--laptop`,
+          `var(--px-spacing-${value}-desktop)`
+        );
+      }
+    };
+    updateGapStyle(oldValue);
+    updateGapStyle(newValue);
+  }
+  updateAttribute(attrName, oldValue, newValue, attrValues) {
+    if (!this.checkName(attrValues, newValue)) {
+      console.error(
+        `${newValue} is not an allowed ${attrName} value for ${this.$el}`
+      );
+    } else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop") {
+      this.$el.style.setProperty(`--${attrName}`, newValue);
+    } else {
+      if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+        this.$el.classList.toggle(`${attrName}-${oldValue}`);
+      }
+      if (newValue !== null && newValue !== "" && newValue !== "default") {
+        this.$el.classList.toggle(`${attrName}-${newValue}`);
+      }
+    }
+  }
+  checkName(values, value) {
+    return values.includes(value);
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(value) {
+    this.setAttribute("gap", value);
+  }
+  get gridCols() {
+    return this.getAttribute("grid-cols");
+  }
+  set gridCols(value) {
+    this.setAttribute("grid-cols", value);
+  }
+  get gridColsMobile() {
+    return this.getAttribute("grid-cols--mobile");
+  }
+  set gridColsMobile(value) {
+    this.setAttribute("grid-cols--mobile", value);
+  }
+  get gridColsTablet() {
+    return this.getAttribute("grid-cols--tablet");
+  }
+  set gridColsTablet(value) {
+    this.setAttribute("grid-cols--tablet", value);
+  }
+  get gridColsLaptop() {
+    return this.getAttribute("grid-cols--laptop");
+  }
+  set gridColsLaptop(value) {
+    this.setAttribute("grid-cols--laptop", value);
+  }
+  get justifyContent() {
+    return this.getAttribute("justify-content");
+  }
+  set justifyContent(value) {
+    this.setAttribute("justify-content", value);
+  }
+  get justifyItems() {
+    return this.getAttribute("justify-items");
+  }
+  set justifyItems(value) {
+    this.setAttribute("justify-items", value);
+  }
+  get alignContent() {
+    return this.getAttribute("align-content");
+  }
+  set alignContent(value) {
+    this.setAttribute("align-content", value);
+  }
+  get alignItems() {
+    return this.getAttribute("align-items");
+  }
+  set alignItems(value) {
+    this.setAttribute("align-items", value);
+  }
+  get justifyContentMobile() {
+    return this.getAttribute("justify-content--mobile");
+  }
+  set justifyContentMobile(value) {
+    this.setAttribute("justify-content--mobile", value);
+  }
+  get justifyItemsMobile() {
+    return this.getAttribute("justify-items--mobile");
+  }
+  set justifyItemsMobile(value) {
+    this.setAttribute("justify-items--mobile", value);
+  }
+  get alignContentMobile() {
+    return this.getAttribute("align-content--mobile");
+  }
+  set alignContentMobile(value) {
+    this.setAttribute("align-content--mobile", value);
+  }
+  get alignItemsMobile() {
+    return this.getAttribute("align-items--mobile");
+  }
+  set alignItemsMobile(value) {
+    this.setAttribute("align-items--mobile", value);
+  }
+  get justifyContentTablet() {
+    return this.getAttribute("justify-content--tablet");
+  }
+  set justifyContentTablet(value) {
+    this.setAttribute("justify-content--tablet", value);
+  }
+  get justifyItemsTablet() {
+    return this.getAttribute("justify-items--tablet");
+  }
+  set justifyItemsTablet(value) {
+    this.setAttribute("justify-items--tablet", value);
+  }
+  get alignContentTablet() {
+    return this.getAttribute("align-content--tablet");
+  }
+  set alignContentTablet(value) {
+    this.setAttribute("align-content--tablet", value);
+  }
+  get alignItemsTablet() {
+    return this.getAttribute("align-items--tablet");
+  }
+  set alignItemsTablet(value) {
+    this.setAttribute("align-items--tablet", value);
+  }
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content--laptop");
+  }
+  set justifyContentLaptop(value) {
+    this.setAttribute("justify-content--laptop", value);
+  }
+  get justifyItemsLaptop() {
+    return this.getAttribute("justify-items--laptop");
+  }
+  set justifyItemsLaptop(value) {
+    this.setAttribute("justify-items--laptop", value);
+  }
+  get alignContentLaptop() {
+    return this.getAttribute("align-content--laptop");
+  }
+  set alignContentLaptop(value) {
+    this.setAttribute("align-content--laptop", value);
+  }
+  get alignItemsLaptop() {
+    return this.getAttribute("align-items--laptop");
+  }
+  set alignItemsLaptop(value) {
+    this.setAttribute("align-items--laptop", value);
+  }
+  get justifyContentDesktop() {
+    return this.getAttribute("justify-content--desktop");
+  }
+  set justifyContentDesktop(value) {
+    this.setAttribute("justify-content--desktop", value);
+  }
+  get justifyItemsDesktop() {
+    return this.getAttribute("justify-items--desktop");
+  }
+  set justifyItemsDesktop(value) {
+    this.setAttribute("justify-items--desktop", value);
+  }
+  get alignContentDesktop() {
+    return this.getAttribute("align-content--desktop");
+  }
+  set alignContentDesktop(value) {
+    this.setAttribute("align-content--desktop", value);
+  }
+  get alignItemsDesktop() {
+    return this.getAttribute("align-items--desktop");
+  }
+  set alignItemsDesktop(value) {
+    this.setAttribute("align-items--desktop", value);
+  }
+};
+_Grid.nativeName = "div";
+let Grid = _Grid;
+customElements.define("px-grid", Grid);
+const _GridItem = class _GridItem extends Grid {
+  constructor() {
+    super();
+    this.template = () => `<div class="grid-item">
+      <slot></slot>
+    </div>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "col-span",
+      "col-span--mobile",
+      "col-span--tablet",
+      "col-span--laptop",
+      "col-span--desktop",
+      "justify-self",
+      "align-self",
+      "place-self",
+      "justify-self--mobile",
+      "align-self--mobile",
+      "place-self--mobile",
+      "justify-self--tablet",
+      "align-self--tablet",
+      "place-self--tablet",
+      "justify-self--laptop",
+      "align-self--laptop",
+      "place-self--laptop",
+      "justify-self--desktop",
+      "align-self--desktop",
+      "place-self--desktop",
+      "order",
+      "order--mobile",
+      "order--tablet",
+      "order--laptop",
+      "order--desktop"
+    ];
+  }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    if (((_a = this.parentElement) == null ? void 0 : _a.getAttribute("align-items")) === "stretch") {
+      this.$el.style.height = "100%";
+    }
+  }
+  get colSpan() {
+    return this.getAttribute("col-span");
+  }
+  set colSpan(value) {
+    this.setAttribute("col-span", value);
+  }
+  get colSpanMobile() {
+    return this.getAttribute("col-span--mobile");
+  }
+  set colSpanMobile(value) {
+    this.setAttribute("col-span--mobile", value);
+  }
+  get colSpanTablet() {
+    return this.getAttribute("col-span--tablet");
+  }
+  set colSpanTablet(value) {
+    this.setAttribute("col-span--tablet", value);
+  }
+  get colSpanLaptop() {
+    return this.getAttribute("col-span--laptop");
+  }
+  set colSpanLaptop(value) {
+    this.setAttribute("col-span--laptop", value);
+  }
+  get colSpanDesktop() {
+    return this.getAttribute("col-span--desktop");
+  }
+  set colSpanDesktop(value) {
+    this.setAttribute("col-span--desktop", value);
+  }
+  get justifySelf() {
+    return this.getAttribute("justify-self");
+  }
+  set justifySelf(value) {
+    this.setAttribute("justify-self", value);
+  }
+  get alignSelf() {
+    return this.getAttribute("align-self");
+  }
+  set alignSelf(value) {
+    this.setAttribute("align-self", value);
+  }
+  get placeSelf() {
+    return this.getAttribute("place-self");
+  }
+  set placeSelf(value) {
+    this.setAttribute("place-self", value);
+  }
+  get justifySelfMobile() {
+    return this.getAttribute("justify-self--mobile");
+  }
+  set justifySelfMobile(value) {
+    this.setAttribute("justify-self--mobile", value);
+  }
+  get alignSelfMobile() {
+    return this.getAttribute("align-self--mobile");
+  }
+  set alignSelfMobile(value) {
+    this.setAttribute("align-self--mobile", value);
+  }
+  get placeSelfMobile() {
+    return this.getAttribute("place-self--mobile");
+  }
+  set placeSelfMobile(value) {
+    this.setAttribute("place-self--mobile", value);
+  }
+  get justifySelfTablet() {
+    return this.getAttribute("justify-self--tablet");
+  }
+  set justifySelfTablet(value) {
+    this.setAttribute("justify-self--tablet", value);
+  }
+  get alignSelfTablet() {
+    return this.getAttribute("align-self--tablet");
+  }
+  set alignSelfTablet(value) {
+    this.setAttribute("align-self--tablet", value);
+  }
+  get placeSelfTablet() {
+    return this.getAttribute("place-self--tablet");
+  }
+  set placeSelfTablet(value) {
+    this.setAttribute("place-self--tablet", value);
+  }
+  get justifySelfLaptop() {
+    return this.getAttribute("justify-self--laptop");
+  }
+  set justifySelfLaptop(value) {
+    this.setAttribute("justify-self--laptop", value);
+  }
+  get alignSelfLaptop() {
+    return this.getAttribute("align-self--laptop");
+  }
+  set alignSelfLaptop(value) {
+    this.setAttribute("align-self--laptop", value);
+  }
+  get placeSelfLaptop() {
+    return this.getAttribute("place-self--laptop");
+  }
+  set placeSelfLaptop(value) {
+    this.setAttribute("place-self--laptop", value);
+  }
+  get justifySelfDesktop() {
+    return this.getAttribute("justify-self--desktop");
+  }
+  set justifySelfDesktop(value) {
+    this.setAttribute("justify-self--desktop", value);
+  }
+  get alignSelfDesktop() {
+    return this.getAttribute("align-self--desktop");
+  }
+  set alignSelfDesktop(value) {
+    this.setAttribute("align-self--desktop", value);
+  }
+  get placeSelfDesktop() {
+    return this.getAttribute("place-self--desktop");
+  }
+  set placeSelfDesktop(value) {
+    this.setAttribute("place-self--desktop", value);
+  }
+  get order() {
+    return this.getAttribute("order");
+  }
+  set order(value) {
+    this.setAttribute("order", value);
+  }
+  get orderMobile() {
+    return this.getAttribute("order--mobile");
+  }
+  set orderMobile(value) {
+    this.setAttribute("order--mobile", value);
+  }
+  get orderTablet() {
+    return this.getAttribute("order--tablet");
+  }
+  set orderTablet(value) {
+    this.setAttribute("order--tablet", value);
+  }
+  get orderLaptop() {
+    return this.getAttribute("order--laptop");
+  }
+  set orderLaptop(value) {
+    this.setAttribute("order--laptop", value);
+  }
+  get orderDesktop() {
+    return this.getAttribute("order--desktop");
+  }
+  set orderDesktop(value) {
+    this.setAttribute("order--desktop", value);
+  }
+};
+_GridItem.nativeName = "div";
+let GridItem = _GridItem;
+customElements.define("px-grid-item", GridItem);
 const buttonCss = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn:not(.secondary,.tertiary,.patch){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1025px){.btn{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn:not(.secondary,.tertiary,.patch){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
 const linkCss = 'a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-m);font-weight:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-text-color-action-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-background-color-container-weak);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-background-color-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}';
 const styles$b = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625rem;border:var(--px-border-size-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-background-color-purpose-promo-default);color:var(--px-text-color-action-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-background-color-purpose-info-default);color:var(--px-text-color-action-neutral-default)}.black-friday{background-color:var(--px-background-color-container-neutral-rich-default);color:var(--px-text-color-action-neutral-inverted)}.eco{background-color:var(--px-background-color-purpose-success-default);color:var(--px-text-color-action-neutral-inverted)}.greyed{background-color:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}:host([inverted]) .patch{background-color:var(--px-background-color-purpose-promo-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-background-color-purpose-info-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-background-color-container-neutral-bare-default);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .eco{background-color:var(--px-background-color-purpose-success-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}";
@@ -4846,6 +5372,8 @@ export {
   Container,
   Entrypoint,
   FontIcon,
+  Grid,
+  GridItem,
   H1,
   H2,
   H3,
@@ -4892,16 +5420,19 @@ export {
   buttonIconSizeValues,
   buttonIconVariantValues,
   colorValues,
+  contentAlignmentValues,
   fontsizeValues,
   fontweightValues,
   gapValues,
   getSupportedAttributeNames,
   getViewportFormat,
   gradientValues,
+  gridColsValues,
   gridGapValues,
   headingValues,
   iconSizeValues$1 as iconSizeValues,
   isFalsy,
+  itemsAlignmentValues,
   linkShapeValues,
   linkVariantValues,
   noBorderRadiusValues,