@proximus/lavender-list 2.0.0-alpha.11 → 2.0.0-alpha.111

package/dist/List.d.ts

@@ -1,9 +1,9 @@
-import { PxElement, AttributeBreakpointHandlerDelegate } from '@proximus/lavender-common';
-export declare const breakpointsValues: string[];
+import { PxElement } from '@proximus/lavender-common';
+export declare const listVariantValues: string[];
 export declare class List extends PxElement<HTMLDivElement> {
+    #private;
     static nativeName: string;
     private template;
-    AttributeDelegate: AttributeBreakpointHandlerDelegate;
     constructor();
     static get observedAttributes(): string[];
     connectedCallback(): void;
@@ -21,4 +21,6 @@ export declare class List extends PxElement<HTMLDivElement> {
     set gapLaptop(value: string);
     get gapDesktop(): string;
     set gapDesktop(value: string);
+    get variant(): string;
+    set variant(value: string);
 }

package/dist/ListItem.d.ts

@@ -1,8 +1,10 @@
 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,17 +1,32 @@
-const k = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", v = ":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}}";
-function A(r) {
-  const t = document.createElement(r), s = Object.getPrototypeOf(t);
-  return Object.getOwnPropertyNames(s);
+var $ = (o) => {
+  throw TypeError(o);
+};
+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);
+  return Object.getOwnPropertyNames(e);
 }
-function y(r) {
-  const t = document.createElement(r), s = Object.getPrototypeOf(t);
-  return Object.getOwnPropertyNames(s).map(
-    (e) => e.toLowerCase()
+function G(o) {
+  const t = document.createElement(o), e = Object.getPrototypeOf(t);
+  return Object.getOwnPropertyNames(e).map(
+    (s) => s.toLowerCase()
   );
 }
-const c = new CSSStyleSheet();
-c.replaceSync(v);
-class b extends HTMLElement {
+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() {
+  return P;
+}
+function T(o) {
+  v() && console.error(o);
+}
+typeof window < "u" && (window.isComponentDebug = v);
+class k extends HTMLElement {
   static get observedAttributes() {
     return [
       "grow",
@@ -58,18 +73,20 @@ class b extends HTMLElement {
       "order--mobile",
       "order--tablet",
       "order--laptop",
-      "order--desktop"
+      "order--desktop",
+      "sticky-top",
+      "sticky-bottom"
     ];
   }
   constructor(...t) {
     super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
-      c,
+      C,
       ...t
     ];
   }
-  attributeChangedCallback(t, s, e) {
+  attributeChangedCallback(t, e, s) {
     var i;
-    if (b.observedAttributes.indexOf(t) !== -1)
+    if (k.observedAttributes.indexOf(t) !== -1)
       switch (t) {
         case "grow":
         case "grow--mobile":
@@ -86,7 +103,7 @@ class b extends HTMLElement {
         case "basis--tablet":
         case "basis--laptop":
         case "basis--desktop":
-          this.style.setProperty(`--${t}-value`, e);
+          this.style.setProperty(`--${t}-value`, s);
           break;
         case "align-self":
         case "align-self--mobile":
@@ -95,9 +112,9 @@ class b extends HTMLElement {
         case "align-self--desktop":
           this.updateProperties(
             t,
-            s,
             e,
-            ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? w : S
+            s,
+            ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? q : R
           );
           break;
         case "justify-self":
@@ -107,9 +124,9 @@ class b extends HTMLElement {
         case "justify-self--desktop":
           this.updateProperties(
             t,
-            s,
             e,
-            $
+            s,
+            H
           );
           break;
         case "col-span":
@@ -117,50 +134,49 @@ class b extends HTMLElement {
         case "col-span--tablet":
         case "col-span--laptop":
         case "col-span--desktop":
-          this.updateProperties(t, s, e, x);
+          this.updateProperties(t, e, s, U);
           break;
         case "order":
         case "order--mobile":
         case "order--tablet":
         case "order--laptop":
         case "order--desktop":
-          this.updateProperties(t, s, e, j);
+          this.updateProperties(t, e, s, X);
           break;
       }
   }
-  updateProperties(t, s, e, i) {
-    if (i && !this.checkName(i, e)) {
-      console.error(`${e} is not a valid value for ${i}`);
-      return;
-    }
-    const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
-    if (!a)
+  updateProperties(t, e, s, i) {
+    i && (this.checkName(i, s) || T(
+      `"${s}" is not an allowed ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
+    ));
+    const l = t.indexOf("--") > -1, n = l ? t.split("--")[0] : t;
+    if (!l)
       this.style.setProperty(
-        `--${l}-value`,
-        s
-      ), this.style.setProperty(
-        `--${l}-value`,
+        `--${n}-value`,
         e
+      ), this.style.setProperty(
+        `--${n}-value`,
+        s
       );
     else {
-      const n = t.split("--")[1];
+      const d = t.split("--")[1];
       this.style.setProperty(
-        `--${l}--${n}-value`,
-        s
-      ), this.style.setProperty(
-        `--${l}--${n}-value`,
+        `--${n}--${d}-value`,
         e
+      ), this.style.setProperty(
+        `--${n}--${d}-value`,
+        s
       );
     }
   }
-  updateStyle(t, s, e) {
-    e !== null && e !== "" && e !== "default" && this.style.setProperty(
-      `--${t}--${s}-value`,
-      e
+  updateStyle(t, e, s) {
+    s !== null && s !== "" && s !== "default" && this.style.setProperty(
+      `--${t}--${e}-value`,
+      s
     );
   }
-  checkName(t, s) {
-    return t.includes(s);
+  checkName(t, e) {
+    return t.includes(e);
   }
   get $el() {
     return this;
@@ -417,70 +433,80 @@ class b extends HTMLElement {
     this.setAttribute("order--desktop", t);
   }
 }
-class g extends b {
-  constructor(...t) {
-    super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
-  }
+const A = class A extends k {
+  // nativeName: string;
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
-      ...y(this.nativeName)
+      ...G(this.nativeName)
     ];
   }
-  attributeChangedCallback(t, s, e) {
-    super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
+  attributeChangedCallback(t, e, s) {
+    super.attributeChangedCallback(t, e, s), s === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, s);
   }
-  connectedCallback() {
-    for (const t of A(this.nativeName))
-      if (!(t === "constructor" || this.accessorExclusions.includes(t)))
+  get ctor() {
+    return Object.getPrototypeOf(this).constructor;
+  }
+  constructor(...t) {
+    super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = B(
+      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)))
         try {
-          Object.defineProperty(this, t, {
+          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);
             }
           });
         } catch (s) {
-          console.warn(`Could not create property ${t} for`, this.$el, s);
+          console.warn(`Could not create property ${e} for`, this.$el, s);
         }
-    this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
   }
   get $el() {
-    return this.shadowRoot.querySelector(this.nativeName);
+    return this.shadowRoot.querySelector(this.ctor.nativeName);
   }
-  _updateAttribute(t, s) {
-    s ? this.setAttribute(t, s) : this.removeAttribute(t);
+  _updateAttribute(t, e) {
+    e ? this.setAttribute(t, e) : this.removeAttribute(t);
   }
-  _updateBooleanAttribute(t, s) {
-    s ? this.setAttribute(t, "") : this.removeAttribute(t);
+  _updateBooleanAttribute(t, e) {
+    e ? this.setAttribute(t, "") : this.removeAttribute(t);
   }
-}
-const S = [
+};
+A.accessorExclusions = [];
+let b = A;
+const R = [
   "",
   "default",
   "auto",
   "flex-start",
+  "start",
   "flex-end",
+  "end",
   "center",
   "baseline",
   "stretch"
-], w = [
+], q = [
   "",
   "default",
   "start",
   "end",
   "center",
   "stretch"
-], $ = [
+], H = [
   "",
   "default",
   "start",
   "end",
   "center",
   "stretch"
-], x = [
+], U = [
   "",
   "1",
   "2",
@@ -494,7 +520,7 @@ const S = [
   "10",
   "11",
   "12"
-], j = [
+], X = [
   "",
   "-1",
   "0",
@@ -510,11 +536,11 @@ const S = [
   "10",
   "11",
   "12"
-], C = ["Xs", "S", "M", "L", "Xl"];
+], z = ["Xs", "S", "M", "L", "Xl"];
 [
-  ...C.map((r) => r.toLowerCase())
+  ...z.map((o) => o.toLowerCase())
 ];
-const N = [
+const W = [
   "none",
   "2xs",
   "xs",
@@ -525,151 +551,116 @@ const N = [
   "heading-to-content",
   "page-layout-between-sections"
 ];
-function M(r, t, s, e = "", i) {
-  const a = new CSSStyleSheet(), l = s.reduce(
-    (n, o) => n + `
-  ${t(r, o)} {
-    ${r}: var(--${e}-${o}-desktop);
-    ${`${i}:var(--${e}-${o}-desktop)`}
+function I(o, t, e, s = "", i, l = o) {
+  const n = new CSSStyleSheet(), d = e.reduce(
+    (E, r) => E + `
+  ${t(l, r)} {
+    ${o}: var(--${s}-${r}-desktop);
+    ${`${i}:var(--${s}-${r}-desktop)`}
   }
   /* Mobile only - max 767px */
-  @media only screen and (max-width: 47.938em) {
-    ${t(r, o)} {
-      ${r}: var(--${e}-${o}-mobile);
-      ${`${i}: var(--${e}-${o}-mobile)`}
+  @media only screen and (max-width: 47.938rem) {
+    ${t(l, r)} {
+      ${o}: var(--${s}-${r}-mobile);
+      ${`${i}: var(--${s}-${r}-mobile)`}
     }
   }
-  ${t(r, o, "mobile")} {
+  ${t(l, r, "mobile")} {
  /* Mobile only - max 767px */
-  @media only screen and (max-width: 47.938em) {
-      ${r}: var(--${e}-${o}-mobile) !important;
-      ${`${i}: var(--${e}-${o}-mobile)`}
+  @media only screen and (max-width: 47.938rem) {
+      ${o}: var(--${s}-${r}-mobile) !important;
+      ${`${i}: var(--${s}-${r}-mobile)`}
     }
   }
-  ${t(r, o, "tablet")} {
+  ${t(l, r, "tablet")} {
   /* Tablet - min 768px max 1024px */
-  @media only screen and (min-width: 48em) and (max-width: 64em) {
-      ${r}: var(--${e}-${o}-desktop) !important;
-      ${`${i}: var(--${e}-${o}-desktop)`}
+  @media only screen and (min-width: 48rem) and (max-width: 64rem) {
+      ${o}: var(--${s}-${r}-desktop) !important;
+      ${`${i}: var(--${s}-${r}-desktop)`}
     }
   }
-  ${t(r, o, "laptop")} {
+  ${t(l, r, "laptop")} {
   /* Laptop - 1025px*/
-  @media only screen and (min-width: 64.0625em) {
-      ${r}: var(--${e}-${o}-desktop) !important;
-      ${`${i}: var(--${e}-${o}-desktop)`}
+  @media only screen and (min-width: 64.0625rem) {
+      ${o}: var(--${s}-${r}-desktop) !important;
+      ${`${i}: var(--${s}-${r}-desktop)`}
     }
   }
-  ${t(r, o, "desktop")} {
+  ${t(l, r, "desktop")} {
   /* Desktop - 1025px*/
-  @media only screen and (min-width: 64.0625em) {
-      ${r}: var(--${e}-${o}-desktop) !important;
-      ${`${i}: var(--${e}-${o}-desktop)`}
+  @media only screen and (min-width: 64.0625rem) {
+      ${o}: var(--${s}-${r}-desktop) !important;
+      ${`${i}: var(--${s}-${r}-desktop)`}
     }
   }`,
     ""
   );
-  return a.replaceSync(l), a;
+  return n.replaceSync(d), n;
 }
-class T {
-  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),
-      {
-        get: () => this.component.getAttribute(this.attributeName),
-        set: (a) => {
-          this.component.setAttribute(this.attributeName, a);
-        }
-      }
+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 {
+  template() {
+    return `
+      <div class="list-item" role="listitem">
+        <slot name="icon"></slot>
+        <slot name="label"></slot>
+      </div>
+    `;
+  }
+  constructor() {
+    super(D), this.shadowRoot.innerHTML = this.template();
+  }
+  connectedCallback() {
+    this.dispatchEvent(
+      new CustomEvent(M, {
+        bubbles: !0,
+        composed: !0
+      })
     );
   }
-  toCamelCase(t) {
-    return t.replace(/[-_]+(.)?/g, (s, e) => e ? e.toUpperCase() : "");
-  }
-  init(t) {
-    this.setCSSProperty(this.attributeName, t), this.setCSSProperties();
-  }
-  attributeChangedCallback(t, s, e) {
-    if (s !== e)
-      switch (!0) {
-        case t === this.attributeName:
-        case t === `${this.attributeName}--mobile`:
-        case t === `${this.attributeName}--tablet`:
-        case t === `${this.attributeName}--laptop`:
-        case t === `${this.attributeName}--desktop`:
-          this.setCSSProperty(t, e);
+  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;
-        default:
-          return;
       }
   }
-  setCSSProperty(t, s, e = !0) {
-    const [, i = ""] = t.split("--");
-    this.component.style.setProperty(
-      `${this.cssVariable}${e ? "-all" : ""}${i ? `-${i}` : ""}`,
-      `${this._attributeValue(s, i)}`
-    );
+  get $children() {
+    return this.querySelectorAll("px-list-item > *");
   }
-  setCSSProperties() {
-    const t = this.component.getAttribute(this.attributeName);
-    t && (this.setCSSProperty(this.attributeName, t), this.setCSSProperty(this.attributeNameMobile, t), this.setCSSProperty(this.attributeNameTablet, t), this.setCSSProperty(this.attributeNameLaptop, t), this.setCSSProperty(this.attributeNameDesktop, t));
-    const s = this.component.getAttribute(
-      this.attributeNameMobile
-    );
-    s && this.setCSSProperty(
-      this.attributeNameMobile,
-      s,
-      !1
-    );
-    const e = this.component.getAttribute(
-      this.attributeNameTablet
-    );
-    e && this.setCSSProperty(
-      this.attributeNameTablet,
-      e,
-      !1
-    );
-    const i = this.component.getAttribute(
-      this.attributeNameLaptop
-    );
-    i && this.setCSSProperty(
-      this.attributeNameLaptop,
-      i,
-      !1
-    );
-    const a = this.component.getAttribute(
-      this.attributeNameDesktop
-    );
-    a && this.setCSSProperty(
-      this.attributeNameDesktop,
-      a,
-      !1
-    );
+  get inverted() {
+    return this.hasAttribute("inverted");
   }
-  set attributeValue(t) {
-    this._attributeValue = t, this.setCSSProperties();
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
   }
-}
-const m = new CSSStyleSheet();
-m.replaceSync(k);
-const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='${t}']) .list`, D = "px-spacing", d = class d extends g {
+};
+y.nativeName = "div";
+let u = y;
+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(
+  "gap",
+  F,
+  W,
+  K,
+  "--list-gap"
+);
+var a, g, f, m;
+const w = class w extends b {
   constructor() {
-    super(
-      m,
-      M(
-        "gap",
-        L,
-        N,
-        D,
-        "--list-gap"
-      )
-    ), this.AttributeDelegate = new T(
-      this,
-      "gap",
-      (t) => t,
-      "--list-gap"
-    ), this.shadowRoot.innerHTML = this.template();
+    super(L, Q);
+    S(this, a);
+    this.shadowRoot.innerHTML = this.template();
   }
   template() {
     return `
@@ -679,18 +670,26 @@ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ?
     `;
   }
   static get observedAttributes() {
-    return ["inverted"];
+    return ["inverted", "variant"];
   }
   connectedCallback() {
-    super.connectedCallback(), this.gap || (this.gap = "xs");
+    this.gap || (this.gap = "xs"), this.addEventListener(M, () => {
+      p(this, a, g).call(this);
+    }), p(this, a, g).call(this);
   }
-  attributeChangedCallback(t, s, e) {
-    if (s !== e)
-      switch (t) {
+  attributeChangedCallback(e, s, i) {
+    if (s !== i)
+      switch (e) {
         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);
+          this.isConnected && p(this, a, f).call(this);
+          break;
+        case "variant":
+          this.checkName(j, i) || T(
+            `"${i}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${j.join('", "')}".`
+          ), this.isConnected && p(this, a, m).call(this, i), super.attributeChangedCallback(e, s, i);
+          break;
+        default:
+          super.attributeChangedCallback(e, s, i);
           break;
       }
   }
@@ -700,85 +699,65 @@ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ?
   get inverted() {
     return this.hasAttribute("inverted");
   }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  set inverted(e) {
+    e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
   }
   get gap() {
     return this.getAttribute("gap");
   }
-  set gap(t) {
-    t ? this.setAttribute("gap", t) : this.removeAttribute("gap");
+  set gap(e) {
+    e ? this.setAttribute("gap", e) : this.removeAttribute("gap");
   }
   get gapMobile() {
     return this.getAttribute("gap--mobile");
   }
-  set gapMobile(t) {
-    t ? this.setAttribute("gap--mobile", t) : this.removeAttribute("gap--mobile");
+  set gapMobile(e) {
+    e ? this.setAttribute("gap--mobile", e) : this.removeAttribute("gap--mobile");
   }
   get gapTablet() {
     return this.getAttribute("gap--tablet");
   }
-  set gapTablet(t) {
-    t ? this.setAttribute("gap--tablet", t) : this.removeAttribute("gap--tablet");
+  set gapTablet(e) {
+    e ? this.setAttribute("gap--tablet", e) : this.removeAttribute("gap--tablet");
   }
   get gapLaptop() {
     return this.getAttribute("gap--laptop");
   }
-  set gapLaptop(t) {
-    t ? this.setAttribute("gap--laptop", t) : this.removeAttribute("gap--laptop");
+  set gapLaptop(e) {
+    e ? this.setAttribute("gap--laptop", e) : this.removeAttribute("gap--laptop");
   }
   get gapDesktop() {
     return this.getAttribute("gap--desktop");
   }
-  set gapDesktop(t) {
-    t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
+  set gapDesktop(e) {
+    e ? this.setAttribute("gap--desktop", e) : this.removeAttribute("gap--desktop");
   }
-};
-d.nativeName = "div";
-let p = d;
-customElements.get("px-list") || customElements.define("px-list", p);
-const O = '.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)}::slotted([slot="label"][inverted]){color:var(--px-color-text-neutral-inverted)}@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)}}', f = new CSSStyleSheet();
-f.replaceSync(O);
-const u = class u extends g {
-  template() {
-    return `
-      <div class="list-item" role="listitem">
-        <slot name="icon"></slot>
-        <slot name="label"></slot>
-      </div>
-    `;
-  }
-  constructor() {
-    super(f), this.shadowRoot.innerHTML = this.template();
+  get variant() {
+    return this.getAttribute("variant");
   }
-  static get observedAttributes() {
-    return ["inverted"];
-  }
-  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");
+  set variant(e) {
+    e ? this.setAttribute("variant", e) : this.removeAttribute("variant");
   }
 };
-u.nativeName = "div";
-let h = u;
-customElements.get("px-list-item") || customElements.define("px-list-item", h);
+a = new WeakSet(), g = function() {
+  p(this, a, f).call(this), p(this, a, m).call(this, this.getAttribute("variant"));
+}, f = 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);
+}, m = 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"));
+  }
+}, w.nativeName = "div";
+let c = w;
+customElements.get("px-list") || customElements.define("px-list", c);
 export {
-  p as List,
-  h as ListItem,
-  E as breakpointsValues
+  M as LIST_ITEM_CONNECTED_EVENT,
+  c as List,
+  u as ListItem,
+  j as listVariantValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-list",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.111",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "clean": "rm -rf dist",
     "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
     "test": "vitest run --coverage",
-    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js  --outdir dist"
   },
   "publishConfig": {
     "access": "public"