@proximus/lavender-grid 1.0.0-alpha.13 → 1.0.0-alpha.15

package/dist/PxGrid.es.js

@@ -1,9 +1,7 @@
-import { PxElement as p, gridGapValues as u } from "@proximus/lavender-common";
-const d = ":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(--px-spacing-component-default-horizontal);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)}.gap-expanded{gap:var(--px-spacing-component-expanded-horizontal)}.gap-none{gap:0!important}.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{gap:var(--px-spacing-component-default-horizontal-mobile);grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.gap-expanded{gap:var(--px-spacing-component-expanded-horizontal-mobile)}.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}}", g = '::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}}', a = new CSSStyleSheet();
-a.replaceSync(d);
-const r = new CSSStyleSheet();
-r.replaceSync(g);
-const f = [
+import { PxElement as c, gridGapValues as r } from "@proximus/lavender-common";
+const g = ":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}}", o = new CSSStyleSheet();
+o.replaceSync(g);
+const u = [
   "1",
   "2",
   "3",
@@ -16,7 +14,7 @@ const f = [
   "10",
   "11",
   "12"
-], b = [
+], p = [
   "",
   "start",
   "end",
@@ -25,9 +23,9 @@ const f = [
   "space-around",
   "space-evenly",
   "stretch"
-], m = ["", "start", "end", "center"], i = class i extends p {
+], m = ["", "start", "end", "center", "stretch"], l = class l extends c {
   constructor() {
-    super(a, r), this.template = () => `<div class="grid">
+    super(o), this.template = () => `<div class="grid">
     <slot></slot>
     </div>`, this.shadowRoot.innerHTML = this.template();
   }
@@ -62,19 +60,19 @@ const f = [
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.alignItems || (this.alignItems = "stretch");
+    super.connectedCallback(), this.gap || (this.gap = "inside-section-default"), this.alignItems || (this.alignItems = "stretch");
   }
-  attributeChangedCallback(t, s, e) {
-    if (s !== e)
+  attributeChangedCallback(t, e, n) {
+    if (e !== n)
       switch (t) {
         case "gap":
-          this.updateAttribute(t, s, e, u);
+          this.updateGap(e, n, r);
           break;
         case "grid-cols":
         case "grid-cols--mobile":
         case "grid-cols--tablet":
         case "grid-cols--laptop":
-          this.updateAttribute(t, s, e, f);
+          this.updateAttribute(t, e, n, u);
           break;
         case "justify-content":
         case "align-content":
@@ -88,9 +86,9 @@ const f = [
         case "align-content--desktop":
           this.updateAttribute(
             t,
-            s,
             e,
-            b
+            n,
+            p
           );
           break;
         case "justify-items":
@@ -105,23 +103,42 @@ const f = [
         case "align-items--desktop":
           this.updateAttribute(
             t,
-            s,
             e,
+            n,
             m
           );
           break;
         default:
-          super.attributeChangedCallback(t, s, e);
+          super.attributeChangedCallback(t, e, n);
           break;
       }
   }
-  updateAttribute(t, s, e, c) {
-    this.checkName(c, e) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" ? this.$el.style.setProperty(`--${t}`, e) : (s !== null && s !== "" && s !== "default" && this.$el.classList.toggle(`${t}-${s}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`)) : console.error(
-      `${e} is not an allowed ${t} value for ${this.$el}`
+  updateGap(t, e, n) {
+    if (!this.checkName(n, e)) {
+      console.error("Bad gap value for", this.$el);
+      return;
+    }
+    const s = (i) => {
+      i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
+        "--grid-gap--mobile",
+        `var(--px-spacing-${i}-mobile)`
+      ), this.$el.style.setProperty(
+        "--grid-gap--tablet",
+        `var(--px-spacing-${i}-tablet)`
+      ), this.$el.style.setProperty(
+        "--grid-gap--laptop",
+        `var(--px-spacing-${i}-desktop)`
+      ));
+    };
+    s(t), s(e);
+  }
+  updateAttribute(t, e, n, s) {
+    this.checkName(s, n) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" ? this.$el.style.setProperty(`--${t}`, n) : (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${t}-${n}`)) : console.error(
+      `${n} is not an allowed ${t} value for ${this.$el}`
     );
   }
-  checkName(t, s) {
-    return t.includes(s);
+  checkName(t, e) {
+    return t.includes(e);
   }
   get gap() {
     return this.getAttribute("gap");
@@ -274,207 +291,12 @@ const f = [
     this.setAttribute("align-items--desktop", t);
   }
 };
-i.nativeName = "div";
-let l = i;
-customElements.define("px-grid", l);
-const o = class o extends l {
-  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 t;
-    super.connectedCallback(), ((t = this.parentElement) == null ? void 0 : t.getAttribute("align-items")) === "stretch" && (this.$el.style.height = "100%");
-  }
-  get colSpan() {
-    return this.getAttribute("col-span");
-  }
-  set colSpan(t) {
-    this.setAttribute("col-span", t);
-  }
-  get colSpanMobile() {
-    return this.getAttribute("col-span--mobile");
-  }
-  set colSpanMobile(t) {
-    this.setAttribute("col-span--mobile", t);
-  }
-  get colSpanTablet() {
-    return this.getAttribute("col-span--tablet");
-  }
-  set colSpanTablet(t) {
-    this.setAttribute("col-span--tablet", t);
-  }
-  get colSpanLaptop() {
-    return this.getAttribute("col-span--laptop");
-  }
-  set colSpanLaptop(t) {
-    this.setAttribute("col-span--laptop", t);
-  }
-  get colSpanDesktop() {
-    return this.getAttribute("col-span--desktop");
-  }
-  set colSpanDesktop(t) {
-    this.setAttribute("col-span--desktop", t);
-  }
-  get justifySelf() {
-    return this.getAttribute("justify-self");
-  }
-  set justifySelf(t) {
-    this.setAttribute("justify-self", t);
-  }
-  get alignSelf() {
-    return this.getAttribute("align-self");
-  }
-  set alignSelf(t) {
-    this.setAttribute("align-self", t);
-  }
-  get placeSelf() {
-    return this.getAttribute("place-self");
-  }
-  set placeSelf(t) {
-    this.setAttribute("place-self", t);
-  }
-  get justifySelfMobile() {
-    return this.getAttribute("justify-self--mobile");
-  }
-  set justifySelfMobile(t) {
-    this.setAttribute("justify-self--mobile", t);
-  }
-  get alignSelfMobile() {
-    return this.getAttribute("align-self--mobile");
-  }
-  set alignSelfMobile(t) {
-    this.setAttribute("align-self--mobile", t);
-  }
-  get placeSelfMobile() {
-    return this.getAttribute("place-self--mobile");
-  }
-  set placeSelfMobile(t) {
-    this.setAttribute("place-self--mobile", t);
-  }
-  get justifySelfTablet() {
-    return this.getAttribute("justify-self--tablet");
-  }
-  set justifySelfTablet(t) {
-    this.setAttribute("justify-self--tablet", t);
-  }
-  get alignSelfTablet() {
-    return this.getAttribute("align-self--tablet");
-  }
-  set alignSelfTablet(t) {
-    this.setAttribute("align-self--tablet", t);
-  }
-  get placeSelfTablet() {
-    return this.getAttribute("place-self--tablet");
-  }
-  set placeSelfTablet(t) {
-    this.setAttribute("place-self--tablet", t);
-  }
-  get justifySelfLaptop() {
-    return this.getAttribute("justify-self--laptop");
-  }
-  set justifySelfLaptop(t) {
-    this.setAttribute("justify-self--laptop", t);
-  }
-  get alignSelfLaptop() {
-    return this.getAttribute("align-self--laptop");
-  }
-  set alignSelfLaptop(t) {
-    this.setAttribute("align-self--laptop", t);
-  }
-  get placeSelfLaptop() {
-    return this.getAttribute("place-self--laptop");
-  }
-  set placeSelfLaptop(t) {
-    this.setAttribute("place-self--laptop", t);
-  }
-  get justifySelfDesktop() {
-    return this.getAttribute("justify-self--desktop");
-  }
-  set justifySelfDesktop(t) {
-    this.setAttribute("justify-self--desktop", t);
-  }
-  get alignSelfDesktop() {
-    return this.getAttribute("align-self--desktop");
-  }
-  set alignSelfDesktop(t) {
-    this.setAttribute("align-self--desktop", t);
-  }
-  get placeSelfDesktop() {
-    return this.getAttribute("place-self--desktop");
-  }
-  set placeSelfDesktop(t) {
-    this.setAttribute("place-self--desktop", t);
-  }
-  get order() {
-    return this.getAttribute("order");
-  }
-  set order(t) {
-    this.setAttribute("order", t);
-  }
-  get orderMobile() {
-    return this.getAttribute("order--mobile");
-  }
-  set orderMobile(t) {
-    this.setAttribute("order--mobile", t);
-  }
-  get orderTablet() {
-    return this.getAttribute("order--tablet");
-  }
-  set orderTablet(t) {
-    this.setAttribute("order--tablet", t);
-  }
-  get orderLaptop() {
-    return this.getAttribute("order--laptop");
-  }
-  set orderLaptop(t) {
-    this.setAttribute("order--laptop", t);
-  }
-  get orderDesktop() {
-    return this.getAttribute("order--desktop");
-  }
-  set orderDesktop(t) {
-    this.setAttribute("order--desktop", t);
-  }
-};
-o.nativeName = "div";
-let n = o;
-customElements.define("px-grid-item", n);
+l.nativeName = "div";
+let a = l;
+customElements.define("px-grid", a);
 export {
-  l as Grid,
-  n as GridItem,
-  b as contentAlignmentValues,
-  f as gridColsValues,
+  a as Grid,
+  p as contentAlignmentValues,
+  u as gridColsValues,
   m as itemsAlignmentValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-grid",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.15",
   "description": "",
   "main": "src/index.ts",
   "files": [
@@ -21,10 +21,12 @@
           "CHANGELOG.md",
           "package.json",
           "dist/*.js",
-          "dist/css/**/*.css"
+          "dist/*.cjs",
+          "dist/css/**/*.css",
+          "dist/js/**/*.js"
         ]
       }
     }
   },
-  "gitHead": "15a3f7932429caa1756aee628a5d57f95a9e4282"
+  "gitHead": "b8dcbe6979ae4c984cf44a4ce6d86b087446e711"
 }