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

package/dist/PxGrid.es.js

@@ -1,9 +1,9 @@
-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 d, gridGapValues as u } 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}}", f = '::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}}', c = new CSSStyleSheet();
+c.replaceSync(g);
+const p = new CSSStyleSheet();
+p.replaceSync(f);
+const b = [
   "1",
   "2",
   "3",
@@ -16,7 +16,7 @@ const f = [
   "10",
   "11",
   "12"
-], b = [
+], m = [
   "",
   "start",
   "end",
@@ -25,9 +25,9 @@ const f = [
   "space-around",
   "space-evenly",
   "stretch"
-], m = ["", "start", "end", "center"], i = class i extends p {
+], y = ["", "start", "end", "center", "stretch"], o = class o extends d {
   constructor() {
-    super(a, r), this.template = () => `<div class="grid">
+    super(c, p), this.template = () => `<div class="grid">
     <slot></slot>
     </div>`, this.shadowRoot.innerHTML = this.template();
   }
@@ -62,19 +62,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, s) {
+    if (e !== s)
       switch (t) {
         case "gap":
-          this.updateAttribute(t, s, e, u);
+          this.updateGap(e, s, u);
           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, s, b);
           break;
         case "justify-content":
         case "align-content":
@@ -88,9 +88,9 @@ const f = [
         case "align-content--desktop":
           this.updateAttribute(
             t,
-            s,
             e,
-            b
+            s,
+            m
           );
           break;
         case "justify-items":
@@ -105,23 +105,42 @@ const f = [
         case "align-items--desktop":
           this.updateAttribute(
             t,
-            s,
             e,
-            m
+            s,
+            y
           );
           break;
         default:
-          super.attributeChangedCallback(t, s, e);
+          super.attributeChangedCallback(t, e, s);
           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, s) {
+    if (!this.checkName(s, e)) {
+      console.error("Bad gap value for", this.$el);
+      return;
+    }
+    const n = (l) => {
+      l !== null && l !== "" && l !== "default" && (this.$el.style.setProperty(
+        "--grid-gap--mobile",
+        `var(--px-spacing-${l}-mobile)`
+      ), this.$el.style.setProperty(
+        "--grid-gap--tablet",
+        `var(--px-spacing-${l}-tablet)`
+      ), this.$el.style.setProperty(
+        "--grid-gap--laptop",
+        `var(--px-spacing-${l}-desktop)`
+      ));
+    };
+    n(t), n(e);
+  }
+  updateAttribute(t, e, s, n) {
+    this.checkName(n, s) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" ? this.$el.style.setProperty(`--${t}`, s) : (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), s !== null && s !== "" && s !== "default" && this.$el.classList.toggle(`${t}-${s}`)) : console.error(
+      `${s} 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,10 +293,10 @@ 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 {
+o.nativeName = "div";
+let i = o;
+customElements.define("px-grid", i);
+const r = class r extends i {
   constructor() {
     super(), this.template = () => `<div class="grid-item">
       <slot></slot>
@@ -468,13 +487,13 @@ const o = class o extends l {
     this.setAttribute("order--desktop", t);
   }
 };
-o.nativeName = "div";
-let n = o;
-customElements.define("px-grid-item", n);
+r.nativeName = "div";
+let a = r;
+customElements.define("px-grid-item", a);
 export {
-  l as Grid,
-  n as GridItem,
-  b as contentAlignmentValues,
-  f as gridColsValues,
-  m as itemsAlignmentValues
+  i as Grid,
+  a as GridItem,
+  m as contentAlignmentValues,
+  b as gridColsValues,
+  y as itemsAlignmentValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-grid",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.14",
   "description": "",
   "main": "src/index.ts",
   "files": [
@@ -26,5 +26,5 @@
       }
     }
   },
-  "gitHead": "15a3f7932429caa1756aee628a5d57f95a9e4282"
+  "gitHead": "671fab7ee21d1c0ec6498b45b0bb2fd47e6e6c84"
 }