@proximus/lavender-common 1.0.0-alpha.69 → 1.0.0-alpha.71

package/dist/index.es.js

@@ -1,6 +1,6 @@
 const b = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]){order:var(--order-value)}:host([hidden]){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 (max-width: 767px){:host([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]){order:var(--order--mobile-value)!important}::slotted(*[shown--sr--mobile]){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) and (max-width: 1024px){:host([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]){order:var(--order--tablet-value)!important}::slotted(*[shown--sr--tablet]){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: 1025px){::slotted(*[shown--sr--laptop]){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: 1025px) and (max-width: 1440px){:host([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
-function h(i) {
-  const t = document.createElement(i), s = Object.getPrototypeOf(t);
+function h(r) {
+  const t = document.createElement(r), s = Object.getPrototypeOf(t);
   return Object.getOwnPropertyNames(s);
 }
 const u = new CSSStyleSheet();
@@ -117,8 +117,8 @@ class p extends HTMLElement {
           break;
       }
   }
-  updateProperties(t, s, e, o) {
-    if (o && !this.checkName(o, e)) {
+  updateProperties(t, s, e, i) {
+    if (i && !this.checkName(i, e)) {
       console.error(`Bad ${t} value for`, this.$el);
       return;
     }
@@ -517,38 +517,29 @@ const v = ["", "default", "none", "l"], d = [
   "default",
   "inherit",
   "brand",
-  "container-default",
-  "state-hover",
-  "state-active",
-  "state-disabled",
-  "body-neutral-strong",
-  "body-neutral-weak",
-  "heading-brand",
-  "heading-neutral",
+  "neutral",
+  "dimmed",
   "purpose-success",
   "purpose-warning",
   "purpose-error",
   "purpose-unlimited",
-  "purpose-promo"
+  "purpose-promo",
+  "state-hover",
+  "state-active",
+  "state-disabled",
+  "neutral",
+  "dimmed",
+  "heading-brand",
+  "heading-neutral"
 ], S = [
   "",
   "default",
   "inherit",
-  "normal",
-  "bold",
-  "extrabold",
-  "light"
-], $ = [
-  "",
-  "default",
-  "2xs",
-  "xs",
-  "s",
-  "m",
-  "l",
-  "xl",
-  "2xl"
-], x = ["", "default", "left", "center", "right"], j = ["", "none", "2xs", "xs", "s", "m", "l"], C = ["", "none", "s", "m", "l"], M = ["", "none", "main", "pill"], L = [
+  "body",
+  "title",
+  "title-large",
+  "subtitle"
+], $ = ["", "default", "xs", "s", "m", "l", "xl"], x = ["", "default", "left", "center", "right"], j = ["", "none", "3xs", "2xs", "xs", "s", "m", "l"], C = ["", "none", "s", "m", "l"], M = ["", "none", "main", "pill"], L = [
   "none",
   "main",
   "brand",
@@ -580,13 +571,13 @@ const v = ["", "default", "none", "l"], d = [
   "surface-brand-light",
   "container-primary",
   "container-secondary",
+  "container-light",
+  "container-default",
+  "container-strong",
   "state-hover",
   "state-hover-bordered",
   "state-active",
   "state-disabled",
-  "container-default",
-  "container-light",
-  "container-strong",
   "purpose-success",
   "purpose-warning",
   "purpose-error",
@@ -681,22 +672,22 @@ const v = ["", "default", "none", "l"], d = [
   "l",
   "2xl"
 ], R = ["", "default", "s", "m", "l"];
-function z(i) {
+function z(r) {
   const t = document.createElement("style");
-  t.innerHTML = i, document.head.appendChild(t);
+  t.innerHTML = r, document.head.appendChild(t);
 }
-function _(i) {
-  return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
+function _(r) {
+  return typeof r == "string" && (r === "false" || r === "0" || r === "null") || typeof r == "boolean" && !r;
 }
 function H() {
   return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
 }
-function P(i, t) {
-  return i.includes(t);
+function P(r, t) {
+  return r.includes(t);
 }
-function F(i, t) {
+function F(r, t, s = !0) {
   var e;
-  [
+  if ([
     "aria-label",
     "aria-labelledby",
     "aria-describedby",
@@ -730,45 +721,46 @@ function F(i, t) {
     "aria-invalid",
     "aria-busy",
     "aria-owns"
-  ].forEach((o) => {
-    i.getAttribute(o) && (t.setAttribute(o, i.getAttribute(o)), i.removeAttribute(o));
-  });
-  const s = `px-${((e = t.localName) == null ? void 0 : e.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
-  t.setAttribute("id", s), i.setAttribute("aria-labelledby", s);
+  ].forEach((i) => {
+    r.getAttribute(i) && (t.setAttribute(i, r.getAttribute(i)), r.removeAttribute(i));
+  }), s) {
+    const i = `px-${((e = t.localName) == null ? void 0 : e.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
+    t.setAttribute("id", i), r.setAttribute("aria-labelledby", i);
+  }
 }
-function I(i, t, s, e = "", o) {
+function I(r, t, s, e = "", i) {
   const a = new CSSStyleSheet(), l = s.reduce(
-    (n, r) => n + `
-  ${t(i, r)} {
+    (n, o) => n + `
+  ${t(r, o)} {
     @media only screen and (max-width: 767px) {
-      ${i}: var(--${e}-${r}-mobile);
-      ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
+      ${r}: var(--${e}-${o}-mobile);
+      ${i ? `${i}: var(--${e}-${o}-mobile)` : ""}
     }
-    ${i}: var(--${e}-${r}-desktop);
-    ${o ? `${o}:var(--${e}-${r}-desktop)` : ""}
+    ${r}: var(--${e}-${o}-desktop);
+    ${i ? `${i}:var(--${e}-${o}-desktop)` : ""}
   }
-  ${t(i, r, "mobile")} {
+  ${t(r, o, "mobile")} {
     @media only screen and (max-width: 767px) {
-      ${i}: var(--${e}-${r}-mobile) !important;
-      ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
+      ${r}: var(--${e}-${o}-mobile) !important;
+      ${i ? `${i}: var(--${e}-${o}-mobile)` : ""}
     }
   }
-  ${t(i, r, "tablet")} {
+  ${t(r, o, "tablet")} {
     @media only screen and (min-width: 768px) and (max-width: 1024px) {
-      ${i}: var(--${e}-${r}-desktop) !important;
-      ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
+      ${r}: var(--${e}-${o}-desktop) !important;
+      ${i ? `${i}: var(--${e}-${o}-desktop)` : ""}
     }
   }
-  ${t(i, r, "laptop")} {
+  ${t(r, o, "laptop")} {
     @media only screen and (min-width: 768px) {
-      ${i}: var(--${e}-${r}-desktop) !important;
-      ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
+      ${r}: var(--${e}-${o}-desktop) !important;
+      ${i ? `${i}: var(--${e}-${o}-desktop)` : ""}
     }
   }
-  ${t(i, r, "desktop")} {
+  ${t(r, o, "desktop")} {
     @media only screen and (min-width: 768px) {
-      ${i}: var(--${e}-${r}-desktop) !important;
-      ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
+      ${r}: var(--${e}-${o}-desktop) !important;
+      ${i ? `${i}: var(--${e}-${o}-desktop)` : ""}
     }
   }`,
     ""
@@ -776,8 +768,8 @@ function I(i, t, s, e = "", o) {
   return a.replaceSync(l), a;
 }
 class J {
-  constructor(t, s, e, o) {
-    this.component = t, this.attributeName = s, this.cssVariable = o, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = e, Object.defineProperty(
+  constructor(t, s, e, i) {
+    this.component = t, this.attributeName = s, this.cssVariable = i, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = e, Object.defineProperty(
       this.component,
       this.toCamelCase(this.attributeName),
       {
@@ -809,10 +801,10 @@ class J {
       }
   }
   setCSSProperty(t, s, e = !0) {
-    const [, o = ""] = t.split("--");
+    const [, i = ""] = t.split("--");
     this.component.style.setProperty(
-      `${this.cssVariable}${e ? "-all" : ""}${o ? `-${o}` : ""}`,
-      `${this._attributeValue(s, o)}`
+      `${this.cssVariable}${e ? "-all" : ""}${i ? `-${i}` : ""}`,
+      `${this._attributeValue(s, i)}`
     );
   }
   setCSSProperties() {
@@ -834,12 +826,12 @@ class J {
       e,
       !1
     );
-    const o = this.component.getAttribute(
+    const i = this.component.getAttribute(
       this.attributeNameLaptop
     );
-    o && this.setCSSProperty(
+    i && this.setCSSProperty(
       this.attributeNameLaptop,
-      o,
+      i,
       !1
     );
     const a = this.component.getAttribute(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-common",
-  "version": "1.0.0-alpha.69",
+  "version": "1.0.0-alpha.71",
   "description": "",
   "main": "dist/index.es.js",
   "type": "module",