@proximus/lavender-list 1.4.6-beta.2 → 1.4.6

package/dist/List.d.ts

@@ -1,7 +1,6 @@
 import { PxElement } from '@proximus/lavender-common';
 export declare const listVariantValues: string[];
 export declare class List extends PxElement<HTMLDivElement> {
-    #private;
     static nativeName: string;
     private template;
     constructor();

package/dist/ListItem.d.ts

@@ -1,10 +1,8 @@
 import { PxElement } from '@proximus/lavender-common';
-export declare const LIST_ITEM_CONNECTED_EVENT = "px-list-item-connected";
 export declare class ListItem extends PxElement<HTMLDivElement> {
     static nativeName: string;
     private template;
     constructor();
-    connectedCallback(): void;
     static get observedAttributes(): string[];
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     get $children(): NodeListOf<Element>;

package/dist/index.es.js

@@ -1,32 +1,23 @@
-var w = (o) => {
-  throw TypeError(o);
-};
-var M = (o, t, e) => t.has(o) || w("Cannot " + e);
-var $ = (o, t, e) => t.has(o) ? w("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e);
-var p = (o, t, e) => (M(o, t, "access private method"), e);
-const D = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", E = ":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([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: 767px){: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: 768px) and (max-width: 1024px){: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: 1025px){: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: 1025px){: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: 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]),::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}}", O = {};
-function N(o) {
-  const t = document.createElement(o), e = Object.getPrototypeOf(t);
-  return Object.getOwnPropertyNames(e);
+const A = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", y = ":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]),::slotted([order]){order:var(--order-value)}: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: 767px){: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: 768px) and (max-width: 1024px){: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: 1025px){: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: 1025px){: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: 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]),::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}}", w = {};
+function $(o) {
+  const t = document.createElement(o), s = Object.getPrototypeOf(t);
+  return Object.getOwnPropertyNames(s);
 }
-function _(o) {
-  const t = document.createElement(o), e = Object.getPrototypeOf(t);
-  return Object.getOwnPropertyNames(e).map(
-    (s) => s.toLowerCase()
+function x(o) {
+  const t = document.createElement(o), s = Object.getPrototypeOf(t);
+  return Object.getOwnPropertyNames(s).map(
+    (e) => e.toLowerCase()
   );
 }
-const x = new CSSStyleSheet();
-x.replaceSync(E);
-const B = typeof import.meta < "u" && typeof O < "u" && !0;
+const f = new CSSStyleSheet();
+f.replaceSync(y);
+const S = typeof import.meta < "u" && typeof w < "u" && !1;
 typeof window < "u" && (window.isComponentDebug = m);
 function m() {
-  return B;
-}
-function S(o) {
-  m() && console.error(o);
+  return S;
 }
 typeof window < "u" && (window.isComponentDebug = m);
-class v extends HTMLElement {
+class b extends HTMLElement {
   static get observedAttributes() {
     return [
       "grow",
@@ -78,13 +69,13 @@ class v extends HTMLElement {
   }
   constructor(...t) {
     super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
-      x,
+      f,
       ...t
     ];
   }
-  attributeChangedCallback(t, e, s) {
+  attributeChangedCallback(t, s, e) {
     var i;
-    if (v.observedAttributes.indexOf(t) !== -1)
+    if (b.observedAttributes.indexOf(t) !== -1)
       switch (t) {
         case "grow":
         case "grow--mobile":
@@ -101,7 +92,7 @@ class v extends HTMLElement {
         case "basis--tablet":
         case "basis--laptop":
         case "basis--desktop":
-          this.style.setProperty(`--${t}-value`, s);
+          this.style.setProperty(`--${t}-value`, e);
           break;
         case "align-self":
         case "align-self--mobile":
@@ -110,9 +101,9 @@ class v extends HTMLElement {
         case "align-self--desktop":
           this.updateProperties(
             t,
-            e,
             s,
-            ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? R : G
+            e,
+            ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? C : j
           );
           break;
         case "justify-self":
@@ -122,9 +113,9 @@ class v extends HTMLElement {
         case "justify-self--desktop":
           this.updateProperties(
             t,
-            e,
             s,
-            q
+            e,
+            M
           );
           break;
         case "col-span":
@@ -132,49 +123,47 @@ class v extends HTMLElement {
         case "col-span--tablet":
         case "col-span--laptop":
         case "col-span--desktop":
-          this.updateProperties(t, e, s, H);
+          this.updateProperties(t, s, e, T);
           break;
         case "order":
         case "order--mobile":
         case "order--tablet":
         case "order--laptop":
         case "order--desktop":
-          this.updateProperties(t, e, s, P);
+          this.updateProperties(t, s, e, L);
           break;
       }
   }
-  updateProperties(t, e, s, i) {
-    i && (this.checkName(i, s) || S(
-      `${s} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
-    ));
-    const l = t.indexOf("--") > -1, n = l ? t.split("--")[0] : t;
+  updateProperties(t, s, e, i) {
+    i && (this.checkName(i, e) || (`${e}${i}${this.tagName.toLowerCase()}`, void 0));
+    const l = t.indexOf("--") > -1, a = l ? t.split("--")[0] : t;
     if (!l)
       this.style.setProperty(
-        `--${n}-value`,
-        e
-      ), this.style.setProperty(
-        `--${n}-value`,
+        `--${a}-value`,
         s
+      ), this.style.setProperty(
+        `--${a}-value`,
+        e
       );
     else {
-      const h = t.split("--")[1];
+      const n = t.split("--")[1];
       this.style.setProperty(
-        `--${n}--${h}-value`,
-        e
-      ), this.style.setProperty(
-        `--${n}--${h}-value`,
+        `--${a}--${n}-value`,
         s
+      ), this.style.setProperty(
+        `--${a}--${n}-value`,
+        e
       );
     }
   }
-  updateStyle(t, e, s) {
-    s !== null && s !== "" && s !== "default" && this.style.setProperty(
-      `--${t}--${e}-value`,
-      s
+  updateStyle(t, s, e) {
+    e !== null && e !== "" && e !== "default" && this.style.setProperty(
+      `--${t}--${s}-value`,
+      e
     );
   }
-  checkName(t, e) {
-    return t.includes(e);
+  checkName(t, s) {
+    return t.includes(s);
   }
   get $el() {
     return this;
@@ -431,55 +420,55 @@ class v extends HTMLElement {
     this.setAttribute("order--desktop", t);
   }
 }
-const k = class k extends v {
+const u = class u extends b {
   // nativeName: string;
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
-      ..._(this.nativeName)
+      ...x(this.nativeName)
     ];
   }
-  attributeChangedCallback(t, e, s) {
-    super.attributeChangedCallback(t, e, s), s === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, s);
+  attributeChangedCallback(t, s, e) {
+    super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
   }
   get ctor() {
     return Object.getPrototypeOf(this).constructor;
   }
   constructor(...t) {
-    super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = N(
+    super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = $(
       this.ctor.nativeName
     )), this.enhanceWithNativeProperties();
   }
   enhanceWithNativeProperties() {
     var t;
-    for (const e of this.ctor.supportedPropertyNames)
-      if (!(e === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(e)))
+    for (const s of this.ctor.supportedPropertyNames)
+      if (!(s === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(s)))
         try {
-          Object.defineProperty(this, e, {
+          Object.defineProperty(this, s, {
             get() {
-              return this.$el[e];
+              return this.$el[s];
             },
-            set(s) {
-              this.$el[e] !== s && (this.$el[e] = s);
+            set(e) {
+              this.$el[s] !== e && (this.$el[s] = e);
             }
           });
-        } catch (s) {
-          console.warn(`Could not create property ${e} for`, this.$el, s);
+        } catch (e) {
+          console.warn(`Could not create property ${s} for`, this.$el, e);
         }
   }
   get $el() {
     return this.shadowRoot.querySelector(this.ctor.nativeName);
   }
-  _updateAttribute(t, e) {
-    e ? this.setAttribute(t, e) : this.removeAttribute(t);
+  _updateAttribute(t, s) {
+    s ? this.setAttribute(t, s) : this.removeAttribute(t);
   }
-  _updateBooleanAttribute(t, e) {
-    e ? this.setAttribute(t, "") : this.removeAttribute(t);
+  _updateBooleanAttribute(t, s) {
+    s ? this.setAttribute(t, "") : this.removeAttribute(t);
   }
 };
-k.accessorExclusions = [];
-let d = k;
-const G = [
+u.accessorExclusions = [];
+let p = u;
+const j = [
   "",
   "default",
   "auto",
@@ -488,21 +477,21 @@ const G = [
   "center",
   "baseline",
   "stretch"
-], R = [
+], C = [
   "",
   "default",
   "start",
   "end",
   "center",
   "stretch"
-], q = [
+], M = [
   "",
   "default",
   "start",
   "end",
   "center",
   "stretch"
-], H = [
+], T = [
   "",
   "1",
   "2",
@@ -516,7 +505,7 @@ const G = [
   "10",
   "11",
   "12"
-], P = [
+], L = [
   "",
   "-1",
   "0",
@@ -532,11 +521,11 @@ const G = [
   "10",
   "11",
   "12"
-], X = ["Xs", "S", "M", "L", "Xl"];
+], D = ["Xs", "S", "M", "L", "Xl"];
 [
-  ...X.map((o) => o.toLowerCase())
+  ...D.map((o) => o.toLowerCase())
 ];
-const I = [
+const O = [
   "none",
   "2xs",
   "xs",
@@ -547,117 +536,61 @@ const I = [
   "heading-to-content",
   "page-layout-between-sections"
 ];
-function W(o, t, e, s = "", i, l = o) {
-  const n = new CSSStyleSheet(), h = e.reduce(
-    (L, r) => L + `
-  ${t(l, r)} {
-    ${o}: var(--${s}-${r}-desktop);
-    ${`${i}:var(--${s}-${r}-desktop)`}
+function E(o, t, s, e = "", i) {
+  const l = new CSSStyleSheet(), a = s.reduce(
+    (n, r) => n + `
+  ${t(o, r)} {
+    ${o}: var(--${e}-${r}-desktop);
+    ${`${i}:var(--${e}-${r}-desktop)`}
   }
   /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938em) {
-    ${t(l, r)} {
-      ${o}: var(--${s}-${r}-mobile);
-      ${`${i}: var(--${s}-${r}-mobile)`}
+    ${t(o, r)} {
+      ${o}: var(--${e}-${r}-mobile);
+      ${`${i}: var(--${e}-${r}-mobile)`}
     }
   }
-  ${t(l, r, "mobile")} {
+  ${t(o, r, "mobile")} {
  /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938em) {
-      ${o}: var(--${s}-${r}-mobile) !important;
-      ${`${i}: var(--${s}-${r}-mobile)`}
+      ${o}: var(--${e}-${r}-mobile) !important;
+      ${`${i}: var(--${e}-${r}-mobile)`}
     }
   }
-  ${t(l, r, "tablet")} {
+  ${t(o, r, "tablet")} {
   /* Tablet - min 768px max 1024px */
   @media only screen and (min-width: 48em) and (max-width: 64em) {
-      ${o}: var(--${s}-${r}-desktop) !important;
-      ${`${i}: var(--${s}-${r}-desktop)`}
+      ${o}: var(--${e}-${r}-desktop) !important;
+      ${`${i}: var(--${e}-${r}-desktop)`}
     }
   }
-  ${t(l, r, "laptop")} {
+  ${t(o, r, "laptop")} {
   /* Laptop - 1025px*/
   @media only screen and (min-width: 64.0625em) {
-      ${o}: var(--${s}-${r}-desktop) !important;
-      ${`${i}: var(--${s}-${r}-desktop)`}
+      ${o}: var(--${e}-${r}-desktop) !important;
+      ${`${i}: var(--${e}-${r}-desktop)`}
     }
   }
-  ${t(l, r, "desktop")} {
+  ${t(o, r, "desktop")} {
   /* Desktop - 1025px*/
   @media only screen and (min-width: 64.0625em) {
-      ${o}: var(--${s}-${r}-desktop) !important;
-      ${`${i}: var(--${s}-${r}-desktop)`}
+      ${o}: var(--${e}-${r}-desktop) !important;
+      ${`${i}: var(--${e}-${r}-desktop)`}
     }
   }`,
     ""
   );
-  return n.replaceSync(h), n;
+  return l.replaceSync(a), l;
 }
-const z = '.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 only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}', j = new CSSStyleSheet();
-j.replaceSync(z);
-const C = "px-list-item-connected", A = class A extends d {
-  template() {
-    return `
-      <div class="list-item" role="listitem">
-        <slot name="icon"></slot>
-        <slot name="label"></slot>
-      </div>
-    `;
-  }
-  constructor() {
-    super(j), this.shadowRoot.innerHTML = this.template();
-  }
-  connectedCallback() {
-    this.dispatchEvent(
-      new CustomEvent(C, {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  static get observedAttributes() {
-    return ["inverted"];
-  }
-  // TODO: factorize code
-  attributeChangedCallback(t, e, s) {
-    if (e !== s)
-      switch (t) {
-        case "inverted":
-          for (let i = 0; i < this.$children.length; i++)
-            this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
-          this.$el.toggleAttribute("inverted", s !== null);
-          break;
-      }
-  }
-  get $children() {
-    return this.querySelectorAll("px-list-item > *");
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-};
-A.nativeName = "div";
-let b = A;
-customElements.get("px-list-item") || customElements.define("px-list-item", b);
-const T = new CSSStyleSheet();
-T.replaceSync(D);
-const J = ["", "ul", "ol"], U = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='${t}']) .list`, F = "px-spacing", K = W(
+const v = new CSSStyleSheet();
+v.replaceSync(A);
+const N = ["", "ul", "ol"], _ = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, B = "px-spacing", G = E(
   "gap",
-  U,
-  I,
-  F,
+  _,
+  O,
+  B,
   "--list-gap"
-);
-var a, g, c, f;
-const y = class y extends d {
-  constructor() {
-    super(T, K);
-    $(this, a);
-    this.shadowRoot.innerHTML = this.template();
-  }
+), g = class g extends p {
   template() {
     return `
       <div class="list" role="list">
@@ -665,27 +598,33 @@ const y = class y extends d {
       </div>
     `;
   }
+  constructor() {
+    super(v, G), this.shadowRoot.innerHTML = this.template();
+  }
   static get observedAttributes() {
     return ["inverted", "variant"];
   }
   connectedCallback() {
-    this.gap || (this.gap = "xs"), this.addEventListener(C, () => {
-      p(this, a, g).call(this);
-    }), p(this, a, g).call(this);
+    this.gap || (this.gap = "xs");
   }
-  attributeChangedCallback(e, s, i) {
-    if (s !== i)
-      switch (e) {
+  attributeChangedCallback(t, s, e) {
+    if (s !== e)
+      switch (t) {
         case "inverted":
-          this.isConnected && p(this, a, c).call(this);
+          for (let i = 0; i < this.$children.length; i++)
+            this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
+          this.$el.toggleAttribute("inverted", e !== null);
           break;
         case "variant":
-          this.checkName(J, i) || S(
-            `${i} is not an allowed variant value for ${this.tagName.toLowerCase()}`
-          ), this.isConnected && p(this, a, f).call(this, i), super.attributeChangedCallback(e, s, i);
+          this.checkName(N, e) || (`${e}${this.tagName.toLowerCase()}`, void 0);
+          for (let i = 0; i < this.$children.length; i++) {
+            const l = this.$children[i];
+            e !== null ? (l.setAttribute("variant", e), e === "ol" ? l.style.setProperty("--item-index", String(i + 1)) : l.style.removeProperty("--item-index")) : (l.removeAttribute("variant"), l.style.removeProperty("--item-index"));
+          }
+          super.attributeChangedCallback(t, s, e);
           break;
         default:
-          super.attributeChangedCallback(e, s, i);
+          super.attributeChangedCallback(t, s, e);
           break;
       }
   }
@@ -695,65 +634,92 @@ const y = class y extends d {
   get inverted() {
     return this.hasAttribute("inverted");
   }
-  set inverted(e) {
-    e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
   }
   get gap() {
     return this.getAttribute("gap");
   }
-  set gap(e) {
-    e ? this.setAttribute("gap", e) : this.removeAttribute("gap");
+  set gap(t) {
+    t ? this.setAttribute("gap", t) : this.removeAttribute("gap");
   }
   get gapMobile() {
     return this.getAttribute("gap--mobile");
   }
-  set gapMobile(e) {
-    e ? this.setAttribute("gap--mobile", e) : this.removeAttribute("gap--mobile");
+  set gapMobile(t) {
+    t ? this.setAttribute("gap--mobile", t) : this.removeAttribute("gap--mobile");
   }
   get gapTablet() {
     return this.getAttribute("gap--tablet");
   }
-  set gapTablet(e) {
-    e ? this.setAttribute("gap--tablet", e) : this.removeAttribute("gap--tablet");
+  set gapTablet(t) {
+    t ? this.setAttribute("gap--tablet", t) : this.removeAttribute("gap--tablet");
   }
   get gapLaptop() {
     return this.getAttribute("gap--laptop");
   }
-  set gapLaptop(e) {
-    e ? this.setAttribute("gap--laptop", e) : this.removeAttribute("gap--laptop");
+  set gapLaptop(t) {
+    t ? this.setAttribute("gap--laptop", t) : this.removeAttribute("gap--laptop");
   }
   get gapDesktop() {
     return this.getAttribute("gap--desktop");
   }
-  set gapDesktop(e) {
-    e ? this.setAttribute("gap--desktop", e) : this.removeAttribute("gap--desktop");
+  set gapDesktop(t) {
+    t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
   }
   get variant() {
     return this.getAttribute("variant");
   }
-  set variant(e) {
-    e ? this.setAttribute("variant", e) : this.removeAttribute("variant");
+  set variant(t) {
+    t ? this.setAttribute("variant", t) : this.removeAttribute("variant");
+  }
+};
+g.nativeName = "div";
+let h = g;
+customElements.get("px-list") || customElements.define("px-list", h);
+const R = '.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 only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}', k = new CSSStyleSheet();
+k.replaceSync(R);
+const c = class c extends p {
+  template() {
+    return `
+      <div class="list-item" role="listitem">
+        <slot name="icon"></slot>
+        <slot name="label"></slot>
+      </div>
+    `;
+  }
+  constructor() {
+    super(k), this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return ["inverted"];
+  }
+  // TODO: factorize code
+  attributeChangedCallback(t, s, e) {
+    if (s !== e)
+      switch (t) {
+        case "inverted":
+          for (let i = 0; i < this.$children.length; i++)
+            this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
+          this.$el.toggleAttribute("inverted", e !== null);
+          break;
+      }
+  }
+  get $children() {
+    return this.querySelectorAll("px-list-item > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
   }
 };
-a = new WeakSet(), g = function() {
-  p(this, a, c).call(this), p(this, a, f).call(this, this.getAttribute("variant"));
-}, c = function() {
-  var s;
-  const e = this.hasAttribute("inverted");
-  for (let i = 0; i < this.$children.length; i++)
-    this.$children[i].toggleAttribute("inverted", e);
-  (s = this.$el) == null || s.toggleAttribute("inverted", e);
-}, f = function(e) {
-  for (let s = 0; s < this.$children.length; s++) {
-    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"));
-  }
-}, y.nativeName = "div";
-let u = y;
-customElements.get("px-list") || customElements.define("px-list", u);
+c.nativeName = "div";
+let d = c;
+customElements.get("px-list-item") || customElements.define("px-list-item", d);
 export {
-  C as LIST_ITEM_CONNECTED_EVENT,
-  u as List,
-  b as ListItem,
-  J as listVariantValues
+  h as List,
+  d as ListItem,
+  N as listVariantValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-list",
-  "version": "1.4.6-beta.2",
+  "version": "1.4.6",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",