@proximus/lavender-grid 1.0.0-alpha.4

package/dist/PxGrid.es.js

@@ -0,0 +1,547 @@
+import { PxElement as r, gapValues as d } from "@proximus/lavender-common";
+const u = ":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;--place-content: initial;--place-items: initial;display:grid}.grid{display:grid;gap:var(--px-gap-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);place-content:var(--place-content);place-items:var(--place-items)}.grid ::slotted(px-grid-item){display:grid}.grid.flex{display:flex;flex-flow:row wrap}.grid.flex ::slotted(px-grid-item){display:flex;flex:1 1 0px}.grid.flex ::slotted(px-grid-item[shrink]){flex:0 0 auto}.gap-expanded{gap:var(--px-gap-tablet-expanded)}.gap-none{gap:var(--px-gap-none)!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}.place-content-normal{place-content:normal}.place-content-start{place-content:start}.place-content-end{place-content:end}.place-content-center{place-content:center}.place-content-space-between{place-content:space-between}.place-content-space-around{place-content:space-around}.place-content-space-evenly{place-content:space-evenly}.place-content-stretch{place-content:stretch}.place-items-start{place-items:start}.place-items-end{place-items:end}.place-items-center{place-items:center}.place-items-stretch{place-items:stretch}@media only screen and (max-width: 767px){.grid{gap:var(--px-gap-mobile);grid-template-columns:repeat(var(--grid-cols-mobile, var(--grid-cols)),minmax(0,1fr))}.gap-expanded{gap:var(--px-gap-mobile-expanded)}.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}.place-content-normal-mobile{place-content:normal}.place-content-start-mobile{place-content:start}.place-content-end-mobile{place-content:end}.place-content-center-mobile{place-content:center}.place-content-space-between-mobile{place-content:space-between}.place-content-space-around-mobile{place-content:space-around}.place-content-space-evenly-mobile{place-content:space-evenly}.place-content-stretch-mobile{place-content:stretch}.place-items-start-mobile{place-items:start}.place-items-end-mobile{place-items:end}.place-items-center-mobile{place-items:center}.place-items-stretch-mobile{place-items:stretch}}@media only screen and (min-width: 768px) and (max-width: 1024px){.grid{gap:var(--px-gap-tablet);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}.place-content-normal-tablet{place-content:normal}.place-content-start-tablet{place-content:start}.place-content-end-tablet{place-content:end}.place-content-center-tablet{place-content:center}.place-content-space-between-tablet{place-content:space-between}.place-content-space-around-tablet{place-content:space-around}.place-content-space-evenly-tablet{place-content:space-evenly}.place-content-stretch-tablet{place-content:stretch}.place-items-start-tablet{place-items:start}.place-items-end-tablet{place-items:end}.place-items-center-tablet{place-items:center}.place-items-stretch-tablet{place-items:stretch}}@media only screen and (min-width: 1025px) and (max-width: 1440px){.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}.place-content-normal-laptop{place-content:normal}.place-content-start-laptop{place-content:start}.place-content-end-laptop{place-content:end}.place-content-center-laptop{place-content:center}.place-content-space-between-laptop{place-content:space-between}.place-content-space-around-laptop{place-content:space-around}.place-content-space-evenly-laptop{place-content:space-evenly}.place-content-stretch-laptop{place-content:stretch}.place-items-start-laptop{place-items:start}.place-items-end-laptop{place-items:end}.place-items-center-laptop{place-items:center}.place-items-stretch-laptop{place-items:stretch}}@media only screen and (min-width: 1441px){.grid{grid-template-columns:repeat(var(--grid-cols-desktop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-desktop{justify-content:normal}.justify-content-start-desktop{justify-content:start}.justify-content-end-desktop{justify-content:end}.justify-content-center-desktop{justify-content:center}.justify-content-space-between-desktop{justify-content:space-between}.justify-content-space-around-desktop{justify-content:space-around}.justify-content-space-evenly-desktop{justify-content:space-evenly}.justify-content-stretch-desktop{justify-content:stretch}.justify-items-start-desktop{justify-items:start}.justify-items-end-desktop{justify-items:end}.justify-items-center-desktop{justify-items:center}.justify-items-stretch-desktop{justify-items:stretch}.align-content-normal-desktop{align-content:normal}.align-content-start-desktop{align-content:start}.align-content-end-desktop{align-content:end}.align-content-center-desktop{align-content:center}.align-content-space-between-desktop{align-content:space-between}.align-content-space-around-desktop{align-content:space-around}.align-content-space-evenly-desktop{align-content:space-evenly}.align-content-stretch-desktop{align-content:stretch}.align-items-start-desktop{align-items:start}.align-items-end-desktop{align-items:end}.align-items-center-desktop{align-items:center}.align-items-stretch-desktop{align-items:stretch}.place-content-normal-desktop{place-content:normal}.place-content-start-desktop{place-content:start}.place-content-end-desktop{place-content:end}.place-content-center-desktop{place-content:center}.place-content-space-between-desktop{place-content:space-between}.place-content-space-around-desktop{place-content:space-around}.place-content-space-evenly-desktop{place-content:space-evenly}.place-content-stretch-desktop{place-content:stretch}.place-items-start-desktop{place-items:start}.place-items-end-desktop{place-items:end}.place-items-center-desktop{place-items:center}.place-items-stretch-desktop{place-items:stretch}}", g = '.grid-item{display:grid;width:100%}::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}}', o = new CSSStyleSheet();
+o.replaceSync(u);
+const c = new CSSStyleSheet();
+c.replaceSync(g);
+const f = [
+  "",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+], m = [
+  "",
+  "start",
+  "end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "stretch"
+], a = class a extends r {
+  constructor() {
+    super(o, c), 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",
+      "grid-cols-desktop",
+      "justify-content",
+      "justify-items",
+      "align-content",
+      "align-items",
+      "place-content",
+      "place-items",
+      "justify-content-mobile",
+      "justify-items-mobile",
+      "align-content-mobile",
+      "align-items-mobile",
+      "place-content-mobile",
+      "place-items-mobile",
+      "justify-content-tablet",
+      "justify-items-tablet",
+      "align-content-tablet",
+      "align-items-tablet",
+      "place-content-tablet",
+      "place-items-tablet",
+      "justify-content-laptop",
+      "justify-items-laptop",
+      "align-content-laptop",
+      "align-items-laptop",
+      "place-content-laptop",
+      "place-items-laptop",
+      "justify-content-desktop",
+      "justify-items-desktop",
+      "align-content-desktop",
+      "align-items-desktop",
+      "place-content-desktop",
+      "place-items-desktop"
+    ];
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get gridCols() {
+    return this.getAttribute("grid-cols");
+  }
+  set gridCols(t) {
+    this.setAttribute("grid-cols", t);
+  }
+  get gridColsMobile() {
+    return this.getAttribute("grid-cols-mobile");
+  }
+  set gridColsMobile(t) {
+    this.setAttribute("grid-cols-mobile", t);
+  }
+  get gridColsTablet() {
+    return this.getAttribute("grid-cols-tablet");
+  }
+  set gridColsTablet(t) {
+    this.setAttribute("grid-cols-tablet", t);
+  }
+  get gridColsLaptop() {
+    return this.getAttribute("grid-cols-laptop");
+  }
+  set gridColsLaptop(t) {
+    this.setAttribute("grid-cols-laptop", t);
+  }
+  get gridColsDesktop() {
+    return this.getAttribute("grid-cols-desktop");
+  }
+  set gridColsDesktop(t) {
+    this.setAttribute("grid-cols-desktop", t);
+  }
+  get justifyContent() {
+    return this.getAttribute("justify-content");
+  }
+  set justifyContent(t) {
+    this.setAttribute("justify-content", t);
+  }
+  get justifyItems() {
+    return this.getAttribute("justify-items");
+  }
+  set justifyItems(t) {
+    this.setAttribute("justify-items", t);
+  }
+  get alignContent() {
+    return this.getAttribute("align-content");
+  }
+  set alignContent(t) {
+    this.setAttribute("align-content", t);
+  }
+  get alignItems() {
+    return this.getAttribute("align-items");
+  }
+  set alignItems(t) {
+    this.setAttribute("align-items", t);
+  }
+  get placeContent() {
+    return this.getAttribute("place-content");
+  }
+  set placeContent(t) {
+    this.setAttribute("place-content", t);
+  }
+  get placeItems() {
+    return this.getAttribute("place-items");
+  }
+  set placeItems(t) {
+    this.setAttribute("place-items", t);
+  }
+  get justifyContentMobile() {
+    return this.getAttribute("justify-content-mobile");
+  }
+  set justifyContentMobile(t) {
+    this.setAttribute("justify-content-mobile", t);
+  }
+  get justifyItemsMobile() {
+    return this.getAttribute("justify-items-mobile");
+  }
+  set justifyItemsMobile(t) {
+    this.setAttribute("justify-items-mobile", t);
+  }
+  get alignContentMobile() {
+    return this.getAttribute("align-content-mobile");
+  }
+  set alignContentMobile(t) {
+    this.setAttribute("align-content-mobile", t);
+  }
+  get alignItemsMobile() {
+    return this.getAttribute("align-items-mobile");
+  }
+  set alignItemsMobile(t) {
+    this.setAttribute("align-items-mobile", t);
+  }
+  get placeContentMobile() {
+    return this.getAttribute("place-content-mobile");
+  }
+  set placeContentMobile(t) {
+    this.setAttribute("place-content-mobile", t);
+  }
+  get placeItemsMobile() {
+    return this.getAttribute("place-items-mobile");
+  }
+  set placeItemsMobile(t) {
+    this.setAttribute("place-items-mobile", t);
+  }
+  get justifyContentTablet() {
+    return this.getAttribute("justify-content-tablet");
+  }
+  set justifyContentTablet(t) {
+    this.setAttribute("justify-content-tablet", t);
+  }
+  get justifyItemsTablet() {
+    return this.getAttribute("justify-items-tablet");
+  }
+  set justifyItemsTablet(t) {
+    this.setAttribute("justify-items-tablet", t);
+  }
+  get alignContentTablet() {
+    return this.getAttribute("align-content-tablet");
+  }
+  set alignContentTablet(t) {
+    this.setAttribute("align-content-tablet", t);
+  }
+  get alignItemsTablet() {
+    return this.getAttribute("align-items-tablet");
+  }
+  set alignItemsTablet(t) {
+    this.setAttribute("align-items-tablet", t);
+  }
+  get placeContentTablet() {
+    return this.getAttribute("place-content-tablet");
+  }
+  set placeContentTablet(t) {
+    this.setAttribute("place-content-tablet", t);
+  }
+  get placeItemsTablet() {
+    return this.getAttribute("place-items-tablet");
+  }
+  set placeItemsTablet(t) {
+    this.setAttribute("place-items-tablet", t);
+  }
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content-laptop");
+  }
+  set justifyContentLaptop(t) {
+    this.setAttribute("justify-content-laptop", t);
+  }
+  get justifyItemsLaptop() {
+    return this.getAttribute("justify-items-laptop");
+  }
+  set justifyItemsLaptop(t) {
+    this.setAttribute("justify-items-laptop", t);
+  }
+  get alignContentLaptop() {
+    return this.getAttribute("align-content-laptop");
+  }
+  set alignContentLaptop(t) {
+    this.setAttribute("align-content-laptop", t);
+  }
+  get alignItemsLaptop() {
+    return this.getAttribute("align-items-laptop");
+  }
+  set alignItemsLaptop(t) {
+    this.setAttribute("align-items-laptop", t);
+  }
+  get placeContentLaptop() {
+    return this.getAttribute("place-content-laptop");
+  }
+  set placeContentLaptop(t) {
+    this.setAttribute("place-content-laptop", t);
+  }
+  get placeItemsLaptop() {
+    return this.getAttribute("place-items-laptop");
+  }
+  set placeItemsLaptop(t) {
+    this.setAttribute("place-items-laptop", t);
+  }
+  get justifyContentDesktop() {
+    return this.getAttribute("justify-content-desktop");
+  }
+  set justifyContentDesktop(t) {
+    this.setAttribute("justify-content-desktop", t);
+  }
+  get justifyItemsDesktop() {
+    return this.getAttribute("justify-items-desktop");
+  }
+  set justifyItemsDesktop(t) {
+    this.setAttribute("justify-items-desktop", t);
+  }
+  get alignContentDesktop() {
+    return this.getAttribute("align-content-desktop");
+  }
+  set alignContentDesktop(t) {
+    this.setAttribute("align-content-desktop", t);
+  }
+  get alignItemsDesktop() {
+    return this.getAttribute("align-items-desktop");
+  }
+  set alignItemsDesktop(t) {
+    this.setAttribute("align-items-desktop", t);
+  }
+  get placeContentDesktop() {
+    return this.getAttribute("place-content-desktop");
+  }
+  set placeContentDesktop(t) {
+    this.setAttribute("place-content-desktop", t);
+  }
+  get placeItemsDesktop() {
+    return this.getAttribute("place-items-desktop");
+  }
+  set placeItemsDesktop(t) {
+    this.setAttribute("place-items-desktop", t);
+  }
+  attributeChangedCallback(t, s, e) {
+    if (s !== e)
+      switch (t) {
+        case "gap":
+          this.updateAttribute(t, s, e, d);
+          break;
+        case "grid-cols":
+        case "grid-cols-mobile":
+        case "grid-cols-tablet":
+        case "grid-cols-laptop":
+        case "grid-cols-desktop":
+          this.updateAttribute(t, s, e, f);
+          break;
+        case "justify-content":
+        case "justify-items":
+        case "align-content":
+        case "align-items":
+        case "place-content":
+        case "place-items":
+        case "justify-content-mobile":
+        case "justify-items-mobile":
+        case "align-content-mobile":
+        case "align-items-mobile":
+        case "place-content-mobile":
+        case "place-items-mobile":
+        case "justify-content-tablet":
+        case "justify-items-tablet":
+        case "align-content-tablet":
+        case "align-items-tablet":
+        case "place-content-tablet":
+        case "place-items-tablet":
+        case "justify-content-laptop":
+        case "justify-items-laptop":
+        case "align-content-laptop":
+        case "align-items-laptop":
+        case "place-content-laptop":
+        case "place-items-laptop":
+        case "justify-content-desktop":
+        case "justify-items-desktop":
+        case "align-content-desktop":
+        case "align-items-desktop":
+        case "place-content-desktop":
+        case "place-items-desktop":
+          this.updateAttribute(t, s, e, m);
+          break;
+        default:
+          super.attributeChangedCallback(t, s, e);
+          break;
+      }
+  }
+  updateAttribute(t, s, e, p) {
+    this.checkName(p, e) ? t === "grid-cols" || t === "grid-cols-mobile" || t === "grid-cols-tablet" || t === "grid-cols-laptop" || t === "grid-cols-desktop" ? 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}`
+    );
+  }
+  checkName(t, s) {
+    return t.includes(s);
+  }
+};
+a.nativeName = "div";
+let n = a;
+customElements.define("px-grid", n);
+const i = class i extends n {
+  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"
+    ];
+  }
+  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);
+  }
+};
+i.nativeName = "div";
+let l = i;
+customElements.define("px-grid-item", l);
+export {
+  n as Grid,
+  l as GridItem
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@proximus/lavender-grid",
+  "version": "1.0.0-alpha.4",
+  "description": "",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  },
+  "gitHead": "15a231df98020f83813279639a9a7712a5a5e759"
+}