@proximus/lavender-common 0.1.0-alpha.54 → 0.1.0-alpha.55

package/dist/index.js

@@ -1,14 +1,15 @@
-const a = "::slotted(*[grow]){flex-grow:var(--flex-grow-value)}::slotted(*[shrink]){flex-shrink:var(--flex-shrink-value)}::slotted(*[basis]){flex-basis:var(--flex-basis-value)}::slotted(*[align-self]){align-self:var(--flex-align-self-value)}::slotted(*[grow--mobile]){flex-grow:var(--flex-grow--mobile-value)}::slotted(*[shrink--mobile]){flex-shrink:var(--flex-shrink--mobile-value)}::slotted(*[basis--mobile]){flex-basis:var(--flex-basis--mobile-value)}::slotted(*[align-self--mobile]){align-self:var(--flex-align-self--mobile-value)}::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (min-width: 768px){::slotted(*[grow--tablet]){flex-grow:var(--flex-grow--tablet-value)}::slotted(*[shrink--tablet]){flex-shrink:var(--flex-shrink--tablet-value)}::slotted(*[basis--tablet]){flex-basis:var(--flex-basis--tablet-value)}::slotted(*[align-self--tablet]){align-self:var(--flex-align-self--tablet-value)}}@media screen and (min-width: 1025px){::slotted(*[grow--laptop]){flex-grow:var(--flex-grow--laptop-value)}::slotted(*[shrink--laptop]){flex-shrink:var(--flex-shrink--laptop-value)}::slotted(*[basis--laptop]){flex-basis:var(--flex-basis--laptop-value)}::slotted(*[align-self--laptop]){align-self:var(--flex-align-self--laptop-value)}}@media screen and (min-width: 1441px){::slotted(*[grow--desktop]){flex-grow:var(--flex-grow--desktop-value)}::slotted(*[shrink--desktop]){flex-shrink:var(--flex-shrink--desktop-value)}::slotted(*[basis--desktop]){flex-basis:var(--flex-basis--desktop-value)}::slotted(*[align-self--desktop]){align-self:var(--flex-align-self--desktop-value)}}@media only screen and (min-width: 0px) and (max-width: 767px){::slotted(*[hidden--mobile]){display:none}}@media only screen and (min-width: 768px) and (max-width: 1024px){::slotted(*[hidden--tablet]){display:none}}@media only screen and (min-width: 1025px) and (max-width: 1440px){::slotted(*[hidden--laptop]){display:none}}@media only screen and (min-width: 1441px){::slotted(*[hidden--desktop]){display:none}}";
-function r(e) {
-  const t = document.createElement(e), s = Object.getPrototypeOf(t);
-  return Object.getOwnPropertyNames(s);
+const u = "::slotted(*[grow]),::slotted(*[grow--mobile]),::slotted(*[grow--tablet]),::slotted(*[grow--laptop]),::slotted(*[grow--desktop]){flex-grow:var(--grow--mobile-value)}::slotted(*[shrink]),::slotted(*[shrink--mobile]),::slotted(*[shrink--tablet]),::slotted(*[shrink--laptop]),::slotted(*[shrink--desktop]){flex-shrink:var(--shrink--mobile-value)}::slotted(*[basis]),::slotted(*[basis--mobile]),::slotted(*[basis--tablet]),::slotted(*[basis--laptop]),::slotted(*[basis--desktop]){flex-basis:var(--basis--mobile-value)}::slotted(*[align-self]),::slotted(*[align-self--mobile]),::slotted(*[align-self--tablet]),::slotted(*[align-self--laptop]),::slotted(*[align-self--desktop]){align-self:var(--align-self--mobile-value)}::slotted(*[col-span]),::slotted(*[col-span--mobile]),::slotted(*[col-span--tablet]),::slotted(*[col-span--laptop]),::slotted(*[col-span--desktop]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}::slotted(*[justify-self]),::slotted(*[justify-self--mobile]),::slotted(*[justify-self--tablet]),::slotted(*[justify-self--laptop]),::slotted(*[justify-self--desktop]){justify-self:var(--justify-self--mobile-value)}::slotted(*[order]),::slotted(*[order--mobile]),::slotted(*[order--tablet]),::slotted(*[order--laptop]),::slotted(*[order--desktop]){order:var(--order--mobile-value)}::slotted(*[hidden]),::slotted(*[hidden--mobile]){display:none}::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (min-width: 768px){::slotted(*[grow]),::slotted(*[grow--mobile]),::slotted(*[grow--tablet]),::slotted(*[grow--laptop]),::slotted(*[grow--desktop]){flex-grow:var(--grow--tablet-value)}::slotted(*[shrink]),::slotted(*[shrink--mobile]),::slotted(*[shrink--tablet]),::slotted(*[shrink--laptop]),::slotted(*[shrink--desktop]){flex-shrink:var(--shrink--tablet-value)}::slotted(*[basis]),::slotted(*[basis--mobile]),::slotted(*[basis--tablet]),::slotted(*[basis--laptop]),::slotted(*[basis--desktop]){flex-basis:var(--basis--tablet-value)}::slotted(*[align-self]),::slotted(*[align-self--mobile]),::slotted(*[align-self--tablet]),::slotted(*[align-self--laptop]),::slotted(*[align-self--desktop]){align-self:var(--align-self--tablet-value)}::slotted(*[col-span]),::slotted(*[col-span--mobile]),::slotted(*[col-span--tablet]),::slotted(*[col-span--laptop]),::slotted(*[col-span--desktop]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}::slotted(*[justify-self]),::slotted(*[justify-self--mobile]),::slotted(*[justify-self--tablet]),::slotted(*[justify-self--laptop]),::slotted(*[justify-self--desktop]){justify-self:var(--justify-self--tablet-value)}::slotted(*[order]),::slotted(*[order--mobile]),::slotted(*[order--tablet]),::slotted(*[order--laptop]),::slotted(*[order--desktop]){order:var(--order--tablet-value)}::slotted(*[hidden]),::slotted(*[hidden--tablet]){display:none}}@media screen and (min-width: 1025px){::slotted(*[grow]),::slotted(*[grow--mobile]),::slotted(*[grow--tablet]),::slotted(*[grow--laptop]),::slotted(*[grow--desktop]){flex-grow:var(--grow--laptop-value)}::slotted(*[shrink]),::slotted(*[shrink--mobile]),::slotted(*[shrink--tablet]),::slotted(*[shrink--laptop]),::slotted(*[shrink--desktop]){flex-shrink:var(--shrink--laptop-value)}::slotted(*[basis]),::slotted(*[basis--mobile]),::slotted(*[basis--tablet]),::slotted(*[basis--laptop]),::slotted(*[basis--desktop]){flex-basis:var(--basis--laptop-value)}::slotted(*[align-self]),::slotted(*[align-self--mobile]),::slotted(*[align-self--tablet]),::slotted(*[align-self--laptop]),::slotted(*[align-self--desktop]){align-self:var(--align-self--laptop-value)}::slotted(*[col-span]),::slotted(*[col-span--mobile]),::slotted(*[col-span--tablet]),::slotted(*[col-span--laptop]),::slotted(*[col-span--desktop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}::slotted(*[justify-self]),::slotted(*[justify-self--mobile]),::slotted(*[justify-self--tablet]),::slotted(*[justify-self--laptop]),::slotted(*[justify-self--desktop]){justify-self:var(--justify-self--laptop-value)}::slotted(*[order]),::slotted(*[order--mobile]),::slotted(*[order--tablet]),::slotted(*[order--laptop]),::slotted(*[order--desktop]){order:var(--order--laptop-value)}::slotted(*[hidden]),::slotted(*[hidden--laptop]){display:none}}@media screen and (min-width: 1441px){::slotted(*[grow]),::slotted(*[grow--mobile]),::slotted(*[grow--tablet]),::slotted(*[grow--laptop]),::slotted(*[grow--desktop]){flex-grow:var(--grow--desktop-value)}::slotted(*[shrink]),::slotted(*[shrink--mobile]),::slotted(*[shrink--tablet]),::slotted(*[shrink--laptop]),::slotted(*[shrink--desktop]){flex-shrink:var(--shrink--desktop-value)}::slotted(*[basis]),::slotted(*[basis--mobile]),::slotted(*[basis--tablet]),::slotted(*[basis--laptop]),::slotted(*[basis--desktop]){flex-basis:var(--basis--desktop-value)}::slotted(*[align-self]),::slotted(*[align-self--mobile]),::slotted(*[align-self--tablet]),::slotted(*[align-self--laptop]),::slotted(*[align-self--desktop]){align-self:var(--align-self--desktop-value)}::slotted(*[col-span]),::slotted(*[col-span--mobile]),::slotted(*[col-span--tablet]),::slotted(*[col-span--laptop]),::slotted(*[col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}::slotted(*[justify-self]),::slotted(*[justify-self--mobile]),::slotted(*[justify-self--tablet]),::slotted(*[justify-self--laptop]),::slotted(*[justify-self--desktop]){justify-self:var(--justify-self--desktop-value)}::slotted(*[order]),::slotted(*[order--mobile]),::slotted(*[order--tablet]),::slotted(*[order--laptop]),::slotted(*[order--desktop]){order:var(--order--desktop-value)}::slotted(*[hidden]),::slotted(*[hidden--desktop]){display:none}}";
+function d(o) {
+  const t = document.createElement(o), e = Object.getPrototypeOf(t);
+  return Object.getOwnPropertyNames(e);
 }
-const l = new CSSStyleSheet();
-l.replaceSync(a);
-class o extends HTMLElement {
+const b = new CSSStyleSheet();
+b.replaceSync(u);
+class i extends HTMLElement {
   static get observedAttributes() {
     return [
       "grow",
+      "grow--mobile",
       "grow--tablet",
       "grow--laptop",
       "grow--desktop",
@@ -23,62 +24,161 @@ class o extends HTMLElement {
       "basis--laptop",
       "basis--desktop",
       "align-self",
+      "align-self--mobile",
+      "align-self--tablet",
+      "align-self--laptop",
+      "align-self--desktop",
+      "justify-self",
+      "justify-self--mobile",
+      "justify-self--tablet",
+      "justify-self--laptop",
+      "justify-self--desktop",
+      "hidden",
       "hidden--mobile",
       "hidden--tablet",
       "hidden--laptop",
       "hidden--desktop",
-      "shown--sr"
+      "shown--sr",
+      "col-span",
+      "col-span--mobile",
+      "col-span--tablet",
+      "col-span--laptop",
+      "col-span--desktop",
+      "order",
+      "order--mobile",
+      "order--tablet",
+      "order--laptop",
+      "order--desktop"
     ];
   }
   constructor(...t) {
     super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
-      l,
+      b,
       ...t
     ];
   }
-  attributeChangedCallback(t, s, i) {
-    if (o.observedAttributes.indexOf(t) !== -1)
-      if (i === null)
-        this.style.removeProperty(t);
-      else
-        switch (t) {
-          case "grow":
-          case "shrink":
-          case "basis":
-          case "grow--mobile":
-          case "grow--tablet":
-          case "grow--laptop":
-          case "grow--desktop":
-          case "shrink--mobile":
-          case "shrink--tablet":
-          case "shrink--laptop":
-          case "shrink--desktop":
-          case "basis--mobile":
-          case "basis--tablet":
-          case "basis--laptop":
-          case "basis--desktop":
-          case "align-self":
-            this.style.setProperty(`--flex-${t}-value`, i);
-            break;
-        }
+  attributeChangedCallback(t, e, s) {
+    if (i.observedAttributes.indexOf(t) !== -1)
+      switch (t) {
+        case "grow":
+        case "grow--mobile":
+        case "grow--tablet":
+        case "grow--laptop":
+        case "grow--desktop":
+        case "shrink":
+        case "shrink--mobile":
+        case "shrink--tablet":
+        case "shrink--laptop":
+        case "shrink--desktop":
+        case "basis":
+        case "basis--mobile":
+        case "basis--tablet":
+        case "basis--laptop":
+        case "basis--desktop":
+          this.updateProperties(t, e, s, null);
+          break;
+        case "align-self":
+        case "align-self--mobile":
+        case "align-self--tablet":
+        case "align-self--laptop":
+        case "align-self--desktop":
+          this.updateProperties(
+            t,
+            e,
+            s,
+            this.isGrid ? h : g
+          );
+          break;
+        case "justify-self":
+        case "justify-self--mobile":
+        case "justify-self--tablet":
+        case "justify-self--laptop":
+        case "justify-self--desktop":
+          this.updateProperties(
+            t,
+            e,
+            s,
+            c
+          );
+          break;
+        case "col-span":
+        case "col-span--mobile":
+        case "col-span--tablet":
+        case "col-span--laptop":
+        case "col-span--desktop":
+          this.updateProperties(t, e, s, f);
+          break;
+        case "order":
+        case "order--mobile":
+        case "order--tablet":
+        case "order--laptop":
+        case "order--desktop":
+          this.updateProperties(t, e, s, k);
+          break;
+      }
+  }
+  updateProperties(t, e, s, n) {
+    if (n && !this.checkName(n, s)) {
+      console.error(`Bad ${t} value for`, this.$el);
+      return;
+    }
+    const p = t.indexOf("--") > -1, l = p ? t.split("--")[0] : t, r = [];
+    if (!p)
+      this.getAttribute(l + "--mobile") || r.push("mobile"), this.getAttribute(l + "--tablet") || r.push("tablet"), this.getAttribute(l + "--laptop") || r.push("laptop"), this.getAttribute(l + "--desktop") || r.push("desktop"), r.forEach((a) => {
+        i.prototype.updateStyle.call(
+          this,
+          l,
+          a,
+          e
+        ), i.prototype.updateStyle.call(
+          this,
+          l,
+          a,
+          s
+        );
+      });
+    else {
+      const a = t.split("--")[1];
+      i.prototype.updateStyle.call(
+        this,
+        l,
+        a,
+        e
+      ), i.prototype.updateStyle.call(
+        this,
+        l,
+        a,
+        s
+      );
+    }
+  }
+  updateStyle(t, e, s) {
+    s !== null && s !== "" && s !== "default" && this.style.setProperty(
+      `--${t}--${e}-value`,
+      s
+    );
+  }
+  checkName(t, e) {
+    return t.includes(e);
   }
-  get grow() {
-    return this.getAttribute("grow");
+  get $el() {
+    return this;
   }
-  set grow(t) {
-    this.setAttribute("grow", t);
+  get $parentElementName() {
+    var t;
+    return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
   }
-  get shrink() {
-    return this.getAttribute("shrink");
+  get isGrid() {
+    return this.$parentElementName === "px-grid";
   }
-  set shrink(t) {
-    this.setAttribute("shrink", t);
+  get isStack() {
+    return this.$parentElementName === "px-stack";
   }
-  get basis() {
-    return this.getAttribute("basis");
+  get grow() {
+    return this.getAttribute("grow");
   }
-  set basis(t) {
-    this.setAttribute("basis", t);
+  set grow(t) {
+    this.setAttribute("grow", t);
   }
   get growMobile() {
     return this.getAttribute("grow--mobile");
@@ -104,6 +204,12 @@ class o extends HTMLElement {
   set growDesktop(t) {
     this.setAttribute("grow--desktop", t);
   }
+  get shrink() {
+    return this.getAttribute("shrink");
+  }
+  set shrink(t) {
+    this.setAttribute("shrink", t);
+  }
   get shrinkMobile() {
     return this.getAttribute("shrink--mobile");
   }
@@ -128,6 +234,12 @@ class o extends HTMLElement {
   set shrinkDesktop(t) {
     this.setAttribute("shrink--desktop", t);
   }
+  get basis() {
+    return this.getAttribute("basis");
+  }
+  set basis(t) {
+    this.setAttribute("basis", t);
+  }
   get basisMobile() {
     return this.getAttribute("basis--mobile");
   }
@@ -158,8 +270,59 @@ class o extends HTMLElement {
   set alignSelf(t) {
     this.setAttribute("align-self", t);
   }
-  get $el() {
-    return this;
+  get alignSelfMobile() {
+    return this.getAttribute("align-self--mobile");
+  }
+  set alignSelfMobile(t) {
+    this.setAttribute("align-self--mobile", t);
+  }
+  get alignSelfTablet() {
+    return this.getAttribute("align-self--tablet");
+  }
+  set alignSelfTablet(t) {
+    this.setAttribute("align-self--tablet", t);
+  }
+  get alignSelfLaptop() {
+    return this.getAttribute("align-self--laptop");
+  }
+  set alignSelfLaptop(t) {
+    this.setAttribute("align-self--laptop", t);
+  }
+  get alignSelfDesktop() {
+    return this.getAttribute("align-self--desktop");
+  }
+  set alignSelfDesktop(t) {
+    this.setAttribute("align-self--desktop", t);
+  }
+  get justifySelf() {
+    return this.getAttribute("justify-self");
+  }
+  set justifySelf(t) {
+    this.setAttribute("justify-self", t);
+  }
+  get justifySelfMobile() {
+    return this.getAttribute("justify-self--mobile");
+  }
+  set justifySelfMobile(t) {
+    this.setAttribute("justify-self--mobile", t);
+  }
+  get justifySelfTablet() {
+    return this.getAttribute("justify-self--tablet");
+  }
+  set justifySelfTablet(t) {
+    this.setAttribute("justify-self--tablet", t);
+  }
+  get justifySelfLaptop() {
+    return this.getAttribute("justify-self--laptop");
+  }
+  set justifySelfLaptop(t) {
+    this.setAttribute("justify-self--laptop", t);
+  }
+  get justifySelfDesktop() {
+    return this.getAttribute("justify-self--desktop");
+  }
+  set justifySelfDesktop(t) {
+    this.setAttribute("justify-self--desktop", t);
   }
   get hiddenMobile() {
     return this.getAttribute("hidden--mobile");
@@ -185,42 +348,166 @@ class o extends HTMLElement {
   set hiddenDesktop(t) {
     this.setAttribute("hidden--desktop", t);
   }
+  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 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);
+  }
 }
-class n extends o {
+class m extends i {
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
-      ...r(this.nativeName)
+      ...d(this.nativeName)
     ];
   }
-  attributeChangedCallback(t, s, i) {
-    super.attributeChangedCallback(t, s, i), i === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, i);
+  attributeChangedCallback(t, e, s) {
+    super.attributeChangedCallback(t, e, s), s === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, s);
   }
   constructor(...t) {
     super(...t), this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
   }
   connectedCallback() {
-    for (const t of r(this.nativeName))
-      t !== "constructor" && Object.defineProperty(this, t, {
+    var t;
+    for (const e of d(this.nativeName))
+      e !== "constructor" && Object.defineProperty(this, e, {
         get() {
-          return this.$el[t];
+          return this.$el[e];
         },
         set(s) {
-          this.$el[t] !== s && (this.$el[t] = s);
+          this.$el[e] !== s && (this.$el[e] = s);
         }
       });
+    if (this.isGrid || this.isStack) {
+      const e = (t = this.parentElement) == null ? void 0 : t.getAttribute("direction");
+      this.$el.style.display = "block", (this.isGrid || this.isStack && e === "row") && (this.$el.style.height = "100%");
+    }
   }
   get $el() {
     return this.shadowRoot.querySelector(this.nativeName);
   }
 }
-const p = [
+const y = [
   "",
   "default",
   "inside-section-none",
   "inside-section-default",
   "inside-section-l"
-], d = [
+], g = [
+  "",
+  "default",
+  "auto",
+  "flex-start",
+  "flex-end",
+  "center",
+  "baseline",
+  "stretch"
+], h = [
+  "",
+  "default",
+  "start",
+  "end",
+  "center",
+  "stretch"
+], c = [
+  "",
+  "default",
+  "start",
+  "end",
+  "center",
+  "stretch"
+], f = [
+  "",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+], k = [
+  "",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+], A = [
+  "",
+  "default",
+  "auto",
+  "start",
+  "end",
+  "center",
+  "stretch"
+], w = [
   "",
   "default",
   "inherit",
@@ -236,7 +523,7 @@ const p = [
   "heading-l",
   "heading-m",
   "heading-s"
-], u = [
+], v = [
   "",
   "default",
   "inherit",
@@ -254,7 +541,7 @@ const p = [
   "purpose-error",
   "purpose-unlimited",
   "purpose-promo"
-], h = [
+], j = [
   "",
   "default",
   "inherit",
@@ -262,7 +549,7 @@ const p = [
   "bold",
   "extrabold",
   "light"
-], b = [
+], S = [
   "",
   "default",
   "2xs",
@@ -272,7 +559,7 @@ const p = [
   "l",
   "xl",
   "2xl"
-], g = ["", "default", "left", "center", "right"], c = ["", "none", "2xs", "xs", "s", "m", "l"], m = ["", "none", "s", "m", "l"], f = ["", "none", "main", "pill"], k = [
+], x = ["", "default", "left", "center", "right"], M = ["", "none", "2xs", "xs", "s", "m", "l"], L = ["", "none", "s", "m", "l"], T = ["", "none", "main", "pill"], D = [
   "none",
   "container-main",
   "container-brand",
@@ -283,7 +570,7 @@ const p = [
   "purpose-warning",
   "purpose-error",
   "purpose-unlimited"
-], x = [
+], $ = [
   "",
   "all",
   "top",
@@ -292,7 +579,7 @@ const p = [
   "left",
   "block",
   "inline"
-], w = [
+], C = [
   "",
   "none",
   "container-neutral-bare",
@@ -318,7 +605,7 @@ const p = [
   "purpose-info",
   "purpose-eco",
   "purpose-notification"
-], v = ["", "none", "s", "m", "l", "xl"], A = [
+], N = ["", "none", "s", "m", "l", "xl"], P = [
   "",
   "default",
   "title-4xl",
@@ -329,7 +616,7 @@ const p = [
   "title-m",
   "title-s",
   "subtitle"
-], y = [
+], G = [
   "",
   "purple-top-red",
   "purple-top-magenta",
@@ -379,58 +666,64 @@ const p = [
   "color-bottom-right-blue",
   "color-bottom-right-turquoise",
   "color-bottom-right-green"
-], S = [
+], V = [
   "",
   "all",
   "top",
   "right",
   "bottom",
   "left"
-], V = [
+], O = [
   "",
   "default",
   "xs",
   "s",
   "l",
   "2xl"
-], C = ["", "default", "s", "m", "l"];
-function M(e) {
+], q = ["", "default", "s", "m", "l"];
+function E(o) {
   const t = document.createElement("style");
-  t.innerHTML = e, document.head.appendChild(t);
+  t.innerHTML = o, document.head.appendChild(t);
 }
-function L(e) {
-  return typeof e == "string" && (e === "false" || e === "0" || e === "null") || typeof e == "boolean" && !e;
+function R(o) {
+  return typeof o == "string" && (o === "false" || o === "0" || o === "null") || typeof o == "boolean" && !o;
 }
-function T() {
+function z() {
   return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
 }
-function q(e, t) {
-  return e.includes(t);
+function B(o, t) {
+  return o.includes(t);
 }
 export {
-  n as PxElement,
-  o as WithFlexAttributes,
-  M as addGlobalStylesheet,
-  V as assetContainerIconSizeValues,
-  C as assetContainerImgWidthValues,
-  w as backgroundColorValues,
-  k as borderColorValues,
-  f as borderRadiusValues,
-  x as borderSideValues,
-  m as borderValues,
-  v as boxShadowValues,
-  q as checkName,
-  u as colorValues,
-  d as fontsizeValues,
-  h as fontweightValues,
-  r as getSupportedAttributeNames,
-  T as getViewportFormat,
-  y as gradientValues,
-  p as gridGapValues,
-  A as headingValues,
-  b as iconSizeValues,
-  L as isFalsy,
-  S as noBorderRadiusValues,
-  c as paddingValues,
-  g as textalignValues
+  m as PxElement,
+  i as WithExtraAttributes,
+  E as addGlobalStylesheet,
+  O as assetContainerIconSizeValues,
+  q as assetContainerImgWidthValues,
+  C as backgroundColorValues,
+  D as borderColorValues,
+  T as borderRadiusValues,
+  $ as borderSideValues,
+  L as borderValues,
+  N as boxShadowValues,
+  B as checkName,
+  v as colorValues,
+  h as cssGridAlignSelfValues,
+  f as cssGridColSpanValues,
+  c as cssGridJustifySelfValues,
+  k as cssGridOrderValues,
+  A as cssGridPlaceSelfValues,
+  g as flexboxAlignSelfValues,
+  w as fontsizeValues,
+  j as fontweightValues,
+  d as getSupportedAttributeNames,
+  z as getViewportFormat,
+  G as gradientValues,
+  y as gridGapValues,
+  P as headingValues,
+  S as iconSizeValues,
+  R as isFalsy,
+  V as noBorderRadiusValues,
+  M as paddingValues,
+  x as textalignValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-common",
-  "version": "0.1.0-alpha.54",
+  "version": "0.1.0-alpha.55",
   "description": "",
   "main": "dist/index.js",
   "exports": {
@@ -24,7 +24,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bad89d519c6fc1d431ebc46bee89fcd80cf18b83",
+  "gitHead": "b8dcbe6979ae4c984cf44a4ce6d86b087446e711",
   "lerna": {
     "command": {
       "publish": {
@@ -33,7 +33,8 @@
           "package.json",
           "dist/*.js",
           "dist/*.cjs",
-          "dist/css/**/*.css"
+          "dist/css/**/*.css",
+          "dist/js/**/*.js"
         ]
       }
     }