@proximus/lavender-list 2.0.0-alpha.136 → 2.0.0-alpha.138

package/dist/index.es.js

@@ -1,16 +1,16 @@
-var $ = (o) => {
-  throw TypeError(o);
+var $ = (r) => {
+  throw TypeError(r);
 };
-var O = (o, t, e) => t.has(o) || $("Cannot " + e);
-var S = (o, t, e) => t.has(o) ? $("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e);
-var p = (o, t, e) => (O(o, t, "access private method"), e);
-const N = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", _ = ":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-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::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: 47.938rem){:host([hidden--mobile]),::slotted([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]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::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: 48rem) and (max-width: 64rem){:host([hidden--tablet]),::slotted([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]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::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: 64.0625rem){:host([shown--sr--laptop]),::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: 64.0625rem){:host([hidden--laptop]),::slotted([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]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 90.0625rem){: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]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([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}}", x = { DEV: !0, VITE_COMPONENT_DEBUG: "true" };
-function B(o) {
-  const t = document.createElement(o), e = Object.getPrototypeOf(t);
+var O = (r, t, e) => t.has(r) || $("Cannot " + e);
+var S = (r, t, e) => t.has(r) ? $("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e);
+var p = (r, t, e) => (O(r, t, "access private method"), e);
+const N = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", _ = ":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-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([word-break-all]){word-break:break-all}@media screen and (max-width: 47.938rem){:host([hidden--mobile]),::slotted([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]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::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}}:host([word-break-all--mobile]){word-break:break-all!important}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([hidden--tablet]),::slotted([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]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::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}}:host([word-break-all--tablet]){word-break:break-all!important}@media screen and (min-width: 64.0625rem){:host([shown--sr--laptop]),::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: 64.0625rem){:host([hidden--laptop]),::slotted([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]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}:host([word-break-all--laptop]){word-break:break-all!important}@media screen and (min-width: 90.0625rem){: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]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([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}:host([word-break-all--desktop]){word-break:break-all!important}}", x = { DEV: !0, VITE_COMPONENT_DEBUG: "true" };
+function B(r) {
+  const t = document.createElement(r), e = Object.getPrototypeOf(t);
   return Object.getOwnPropertyNames(e);
 }
-function G(o) {
-  const t = document.createElement(o), e = Object.getPrototypeOf(t);
+function G(r) {
+  const t = document.createElement(r), e = Object.getPrototypeOf(t);
   return Object.getOwnPropertyNames(e).map(
     (s) => s.toLowerCase()
   );
@@ -18,15 +18,15 @@ function G(o) {
 const C = new CSSStyleSheet();
 C.replaceSync(_);
 const h = typeof import.meta < "u" && typeof x < "u" ? x : void 0, P = (h == null ? void 0 : h.VITE_COMPONENT_DEBUG) === "true" || (h == null ? void 0 : h.DEV) === !0;
-typeof window < "u" && (window.isComponentDebug = v);
-function v() {
+typeof window < "u" && (window.isComponentDebug = k);
+function k() {
   return P;
 }
-function T(o) {
-  v() && console.error(o);
+function T(r) {
+  k() && console.error(r);
 }
-typeof window < "u" && (window.isComponentDebug = v);
-class k extends HTMLElement {
+typeof window < "u" && (window.isComponentDebug = k);
+class v extends HTMLElement {
   static get observedAttributes() {
     return [
       "grow",
@@ -75,7 +75,12 @@ class k extends HTMLElement {
       "order--laptop",
       "order--desktop",
       "sticky-top",
-      "sticky-bottom"
+      "sticky-bottom",
+      "word-break-all",
+      "word-break-all--mobile",
+      "word-break-all--tablet",
+      "word-break-all--laptop",
+      "word-break-all--desktop"
     ];
   }
   constructor(...t) {
@@ -86,7 +91,7 @@ class k extends HTMLElement {
   }
   attributeChangedCallback(t, e, s) {
     var i;
-    if (k.observedAttributes.indexOf(t) !== -1)
+    if (v.observedAttributes.indexOf(t) !== -1)
       switch (t) {
         case "grow":
         case "grow--mobile":
@@ -433,7 +438,7 @@ class k extends HTMLElement {
     this.setAttribute("order--desktop", t);
   }
 }
-const A = class A extends k {
+const A = class A extends v {
   // nativeName: string;
   static get observedAttributes() {
     return [
@@ -538,7 +543,7 @@ const R = [
   "12"
 ], z = ["Xs", "S", "M", "L", "Xl"];
 [
-  ...z.map((o) => o.toLowerCase())
+  ...z.map((r) => r.toLowerCase())
 ];
 const W = [
   "none",
@@ -551,46 +556,46 @@ const W = [
   "heading-to-content",
   "page-layout-between-sections"
 ];
-function I(o, t, e, s = "", i, l = o) {
+function I(r, t, e, s = "", i, l = r) {
   const n = new CSSStyleSheet(), d = e.reduce(
-    (E, r) => E + `
-  ${t(l, r)} {
-    ${o}: var(--${s}-${r}-desktop);
-    ${`${i}:var(--${s}-${r}-desktop)`}
+    (E, o) => E + `
+  ${t(l, o)} {
+    ${r}: var(--${s}-${o}-desktop);
+    ${`${i}:var(--${s}-${o}-desktop)`}
   }
   /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938rem) {
-    ${t(l, r)} {
-      ${o}: var(--${s}-${r}-mobile);
-      ${`${i}: var(--${s}-${r}-mobile)`}
+    ${t(l, o)} {
+      ${r}: var(--${s}-${o}-mobile);
+      ${`${i}: var(--${s}-${o}-mobile)`}
     }
   }
-  ${t(l, r, "mobile")} {
+  ${t(l, o, "mobile")} {
  /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938rem) {
-      ${o}: var(--${s}-${r}-mobile) !important;
-      ${`${i}: var(--${s}-${r}-mobile)`}
+      ${r}: var(--${s}-${o}-mobile) !important;
+      ${`${i}: var(--${s}-${o}-mobile)`}
     }
   }
-  ${t(l, r, "tablet")} {
+  ${t(l, o, "tablet")} {
   /* Tablet - min 768px max 1024px */
   @media only screen and (min-width: 48rem) and (max-width: 64rem) {
-      ${o}: var(--${s}-${r}-desktop) !important;
-      ${`${i}: var(--${s}-${r}-desktop)`}
+      ${r}: var(--${s}-${o}-desktop) !important;
+      ${`${i}: var(--${s}-${o}-desktop)`}
     }
   }
-  ${t(l, r, "laptop")} {
+  ${t(l, o, "laptop")} {
   /* Laptop - 1025px*/
   @media only screen and (min-width: 64.0625rem) {
-      ${o}: var(--${s}-${r}-desktop) !important;
-      ${`${i}: var(--${s}-${r}-desktop)`}
+      ${r}: var(--${s}-${o}-desktop) !important;
+      ${`${i}: var(--${s}-${o}-desktop)`}
     }
   }
-  ${t(l, r, "desktop")} {
+  ${t(l, o, "desktop")} {
   /* Desktop - 1025px*/
   @media only screen and (min-width: 64.0625rem) {
-      ${o}: var(--${s}-${r}-desktop) !important;
-      ${`${i}: var(--${s}-${r}-desktop)`}
+      ${r}: var(--${s}-${o}-desktop) !important;
+      ${`${i}: var(--${s}-${o}-desktop)`}
     }
   }`,
     ""
@@ -599,7 +604,7 @@ function I(o, t, e, s = "", i, l = o) {
 }
 const J = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);align-items:flex-start;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:host([variant="ul"]) .list-item,:host([variant="ol"]) .list-item{display:list-item;margin-left:var(--px-spacing-default-mobile)}:host([variant="ul"]) .list-item{list-style-type:disc}:host([variant="ol"]) .list-item{counter-set:list-item var(--item-index, 0);list-style-type:decimal}@media screen and (min-width: 48rem){.list-item{gap:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){.list-item{gap:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){.list-item{gap:var(--px-spacing-xs-desktop)}}', D = new CSSStyleSheet();
 D.replaceSync(J);
-const M = "px-list-item-connected", y = class y extends b {
+const M = "px-list-item-connected", w = class w extends b {
   template() {
     return `
       <div class="list-item" role="listitem">
@@ -643,12 +648,12 @@ const M = "px-list-item-connected", y = class y extends b {
     t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
   }
 };
-y.nativeName = "div";
-let u = y;
+w.nativeName = "div";
+let u = w;
 customElements.get("px-list-item") || customElements.define("px-list-item", u);
 const L = new CSSStyleSheet();
 L.replaceSync(N);
-const j = ["", "ul", "ol"], F = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='${t}']) .list`, K = "px-spacing", Q = I(
+const j = ["", "ul", "ol"], F = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .list`, K = "px-spacing", Q = I(
   "gap",
   F,
   W,
@@ -656,7 +661,7 @@ const j = ["", "ul", "ol"], F = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='$
   "--list-gap"
 );
 var a, g, f, m;
-const w = class w extends b {
+const y = class y extends b {
   constructor() {
     super(L, Q);
     S(this, a);
@@ -752,8 +757,8 @@ a = new WeakSet(), g = function() {
     const i = this.$children[s];
     e !== null ? (i.setAttribute("variant", e), e === "ol" ? i.style.setProperty("--item-index", String(s + 1)) : i.style.removeProperty("--item-index")) : (i.removeAttribute("variant"), i.style.removeProperty("--item-index"));
   }
-}, w.nativeName = "div";
-let c = w;
+}, y.nativeName = "div";
+let c = y;
 customElements.get("px-list") || customElements.define("px-list", c);
 export {
   M as LIST_ITEM_CONNECTED_EVENT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-list",
-  "version": "2.0.0-alpha.136",
+  "version": "2.0.0-alpha.138",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",