@proximus/lavender-list 1.0.0-alpha.1

package/dist/List.d.ts

@@ -0,0 +1,24 @@
+import { PxElement, AttributeBreakpointHandlerDelegate } from '@proximus/lavender-common';
+export declare const breakpointsValues: string[];
+export declare class List extends PxElement<HTMLDivElement> {
+    static nativeName: string;
+    private template;
+    AttributeDelegate: AttributeBreakpointHandlerDelegate;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    get $children(): NodeListOf<Element>;
+    get inverted(): boolean;
+    set inverted(value: boolean);
+    get gap(): string;
+    set gap(value: string);
+    get gapMobile(): string;
+    set gapMobile(value: string);
+    get gapTablet(): string;
+    set gapTablet(value: string);
+    get gapLaptop(): string;
+    set gapLaptop(value: string);
+    get gapDesktop(): string;
+    set gapDesktop(value: string);
+}

package/dist/ListItem.d.ts

@@ -0,0 +1,11 @@
+import { PxElement } from '@proximus/lavender-common';
+export declare class ListItem extends PxElement<HTMLDivElement> {
+    static nativeName: string;
+    private template;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    get $children(): NodeListOf<Element>;
+    get inverted(): boolean;
+    set inverted(value: boolean);
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './List';
+export * from './ListItem';

package/dist/index.es.js

@@ -0,0 +1,786 @@
+const v = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", A = ":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}::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}::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}::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]),::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 g(a) {
+  const t = document.createElement(a), s = Object.getPrototypeOf(t);
+  return Object.getOwnPropertyNames(s);
+}
+const c = new CSSStyleSheet();
+c.replaceSync(A);
+class b extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      "grow",
+      "grow--mobile",
+      "grow--tablet",
+      "grow--laptop",
+      "grow--desktop",
+      "shrink",
+      "shrink--mobile",
+      "shrink--tablet",
+      "shrink--laptop",
+      "shrink--desktop",
+      "basis",
+      "basis--mobile",
+      "basis--tablet",
+      "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--mobile",
+      "shown--sr--tablet",
+      "shown--sr--laptop",
+      "shown--sr--desktop",
+      "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 = [
+      c,
+      ...t
+    ];
+  }
+  attributeChangedCallback(t, s, e) {
+    if (b.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.style.setProperty(`--${t}-value`, e);
+          break;
+        case "align-self":
+        case "align-self--mobile":
+        case "align-self--tablet":
+        case "align-self--laptop":
+        case "align-self--desktop":
+          this.updateProperties(
+            t,
+            s,
+            e,
+            this.isGrid ? S : y
+          );
+          break;
+        case "justify-self":
+        case "justify-self--mobile":
+        case "justify-self--tablet":
+        case "justify-self--laptop":
+        case "justify-self--desktop":
+          this.updateProperties(
+            t,
+            s,
+            e,
+            $
+          );
+          break;
+        case "col-span":
+        case "col-span--mobile":
+        case "col-span--tablet":
+        case "col-span--laptop":
+        case "col-span--desktop":
+          this.updateProperties(t, s, e, w);
+          break;
+        case "order":
+        case "order--mobile":
+        case "order--tablet":
+        case "order--laptop":
+        case "order--desktop":
+          this.updateProperties(t, s, e, 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 o = t.indexOf("--") > -1, l = o ? t.split("--")[0] : t;
+    if (!o)
+      this.style.setProperty(
+        `--${l}-value`,
+        s
+      ), this.style.setProperty(
+        `--${l}-value`,
+        e
+      );
+    else {
+      const n = t.split("--")[1];
+      this.style.setProperty(
+        `--${l}--${n}-value`,
+        s
+      ), this.style.setProperty(
+        `--${l}--${n}-value`,
+        e
+      );
+    }
+  }
+  updateStyle(t, s, e) {
+    e !== null && e !== "" && e !== "default" && this.style.setProperty(
+      `--${t}--${s}-value`,
+      e
+    );
+  }
+  checkName(t, s) {
+    return t.includes(s);
+  }
+  get $el() {
+    return this;
+  }
+  get $parentElementName() {
+    var t;
+    return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
+  }
+  get isGrid() {
+    return this.$parentElementName === "px-grid";
+  }
+  get isStack() {
+    return this.$parentElementName === "px-stack";
+  }
+  get grow() {
+    return this.getAttribute("grow");
+  }
+  set grow(t) {
+    this.setAttribute("grow", t);
+  }
+  get growMobile() {
+    return this.getAttribute("grow--mobile");
+  }
+  set growMobile(t) {
+    this.setAttribute("grow--mobile", t);
+  }
+  get growTablet() {
+    return this.getAttribute("grow--tablet");
+  }
+  set growTablet(t) {
+    this.setAttribute("grow--tablet", t);
+  }
+  get growLaptop() {
+    return this.getAttribute("grow--laptop");
+  }
+  set growLaptop(t) {
+    this.setAttribute("grow--laptop", t);
+  }
+  get growDesktop() {
+    return this.getAttribute("grow--desktop");
+  }
+  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");
+  }
+  set shrinkMobile(t) {
+    this.setAttribute("shrink--mobile", t);
+  }
+  get shrinkTablet() {
+    return this.getAttribute("shrink--tablet");
+  }
+  set shrinkTablet(t) {
+    this.setAttribute("shrink--tablet", t);
+  }
+  get shrinkLaptop() {
+    return this.getAttribute("shrink--laptop");
+  }
+  set shrinkLaptop(t) {
+    this.setAttribute("shrink--laptop", t);
+  }
+  get shrinkDesktop() {
+    return this.getAttribute("shrink--desktop");
+  }
+  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");
+  }
+  set basisMobile(t) {
+    this.setAttribute("basis--mobile", t);
+  }
+  get basisTablet() {
+    return this.getAttribute("basis--tablet");
+  }
+  set basisTablet(t) {
+    this.setAttribute("basis--tablet", t);
+  }
+  get basisLaptop() {
+    return this.getAttribute("basis--laptop");
+  }
+  set basisLaptop(t) {
+    this.setAttribute("basis--laptop", t);
+  }
+  get basisDesktop() {
+    return this.getAttribute("basis--desktop");
+  }
+  set basisDesktop(t) {
+    this.setAttribute("basis--desktop", t);
+  }
+  get alignSelf() {
+    return this.getAttribute("align-self");
+  }
+  set alignSelf(t) {
+    this.setAttribute("align-self", t);
+  }
+  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");
+  }
+  set hiddenMobile(t) {
+    this.setAttribute("hidden--mobile", t);
+  }
+  get hiddenTablet() {
+    return this.getAttribute("hidden--tablet");
+  }
+  set hiddenTablet(t) {
+    this.setAttribute("hidden--tablet", t);
+  }
+  get hiddenLaptop() {
+    return this.getAttribute("hidden--laptop");
+  }
+  set hiddenLaptop(t) {
+    this.setAttribute("hidden--laptop", t);
+  }
+  get hiddenDesktop() {
+    return this.getAttribute("hidden--desktop");
+  }
+  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 m extends b {
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      ...g(this.nativeName)
+    ];
+  }
+  attributeChangedCallback(t, s, e) {
+    super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
+  }
+  constructor(...t) {
+    super(...t), this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
+  }
+  connectedCallback() {
+    var t;
+    for (const s of g(this.nativeName))
+      if (s !== "constructor")
+        try {
+          Object.defineProperty(this, s, {
+            get() {
+              return this.$el[s];
+            },
+            set(e) {
+              this.$el[s] !== e && (this.$el[s] = e);
+            }
+          });
+        } catch (e) {
+          console.warn(`Could not create property ${s} for`, this.$el, e);
+        }
+    if (this.isGrid || this.isStack) {
+      const s = (t = this.parentElement) == null ? void 0 : t.getAttribute("direction");
+      this.$el.style.display = "block", (this.isGrid || this.isStack && s === "row") && (this.$el.style.height = "100%");
+    }
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(this.nativeName);
+  }
+}
+const y = [
+  "",
+  "default",
+  "auto",
+  "flex-start",
+  "flex-end",
+  "center",
+  "baseline",
+  "stretch"
+], S = [
+  "",
+  "default",
+  "start",
+  "end",
+  "center",
+  "stretch"
+], $ = [
+  "",
+  "default",
+  "start",
+  "end",
+  "center",
+  "stretch"
+], w = [
+  "",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+], x = [
+  "",
+  "-1",
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+], j = ["Xs", "S", "M", "L", "Xl"];
+[
+  ...j.map((a) => a.toLowerCase())
+];
+const C = [
+  "none",
+  "2xs",
+  "xs",
+  "s",
+  "default",
+  "l",
+  "heading-to-subtitle",
+  "heading-to-content",
+  "page-layout-between-sections"
+];
+function M(a, t, s, e = "", i) {
+  const o = new CSSStyleSheet(), l = s.reduce(
+    (n, r) => n + `
+  ${t(a, r)} {
+    ${a}: var(--${e}-${r}-desktop);
+    ${`${i}:var(--${e}-${r}-desktop)`}
+  }
+  /* Mobile only - max 767px */
+  @media only screen and (max-width: 47.938em) {
+    ${t(a, r)} {
+      ${a}: var(--${e}-${r}-mobile);
+      ${`${i}: var(--${e}-${r}-mobile)`}
+    }
+  }
+  ${t(a, r, "mobile")} {
+ /* Mobile only - max 767px */
+  @media only screen and (max-width: 47.938em) {
+      ${a}: var(--${e}-${r}-mobile) !important;
+      ${`${i}: var(--${e}-${r}-mobile)`}
+    }
+  }
+  ${t(a, r, "tablet")} {
+  /* Tablet - min 768px max 1024px */
+  @media only screen and (min-width: 48em) and (max-width: 64em) {
+      ${a}: var(--${e}-${r}-desktop) !important;
+      ${`${i}: var(--${e}-${r}-desktop)`}
+    }
+  }
+  ${t(a, r, "laptop")} {
+  /* Laptop - 1025px*/
+  @media only screen and (min-width: 64.0625em) {
+      ${a}: var(--${e}-${r}-desktop) !important;
+      ${`${i}: var(--${e}-${r}-desktop)`}
+    }
+  }
+  ${t(a, r, "desktop")} {
+  /* Desktop - 1025px*/
+  @media only screen and (min-width: 64.0625em) {
+      ${a}: var(--${e}-${r}-desktop) !important;
+      ${`${i}: var(--${e}-${r}-desktop)`}
+    }
+  }`,
+    ""
+  );
+  return o.replaceSync(l), o;
+}
+class D {
+  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: (o) => {
+          this.component.setAttribute(this.attributeName, o);
+        }
+      }
+    );
+  }
+  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);
+          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)}`
+    );
+  }
+  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 o = this.component.getAttribute(
+      this.attributeNameDesktop
+    );
+    o && this.setCSSProperty(
+      this.attributeNameDesktop,
+      o,
+      !1
+    );
+  }
+  set attributeValue(t) {
+    this._attributeValue = t, this.setCSSProperties();
+  }
+}
+const f = new CSSStyleSheet();
+f.replaceSync(v);
+const E = ["", "mobile", "tablet", "laptop"], T = (a, t, s) => `:host([${a}${s ? `--${s}` : ""}='${t}']) .list`, L = "px-spacing", d = class d extends m {
+  constructor() {
+    super(
+      f,
+      M(
+        "gap",
+        T,
+        C,
+        L,
+        "--list-gap"
+      )
+    ), this.AttributeDelegate = new D(
+      this,
+      "gap",
+      (t) => t,
+      "--list-gap"
+    ), this.shadowRoot.innerHTML = this.template();
+  }
+  template() {
+    return `
+      <div class="list" role="list">
+        <slot></slot>
+      </div>
+    `;
+  }
+  static get observedAttributes() {
+    return [
+      "gap",
+      "gap--mobile",
+      "gap--tablet",
+      "gap--laptop",
+      "gap--desktop",
+      "inverted"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.gap || (this.gap = "xs");
+  }
+  attributeChangedCallback(t, s, e) {
+    if (s !== e)
+      switch (t) {
+        case "gap":
+        case "gap--mobile":
+        case "gap--tablet":
+        case "gap--laptop":
+        case "gap--desktop":
+          this.AttributeDelegate.attributeChangedCallback(
+            t,
+            s,
+            e
+          );
+          break;
+        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");
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(t) {
+    t ? this.setAttribute("gap", t) : this.removeAttribute("gap");
+  }
+  get gapMobile() {
+    return this.getAttribute("gap--mobile");
+  }
+  set gapMobile(t) {
+    t ? this.setAttribute("gap--mobile", t) : this.removeAttribute("gap--mobile");
+  }
+  get gapTablet() {
+    return this.getAttribute("gap--tablet");
+  }
+  set gapTablet(t) {
+    t ? this.setAttribute("gap--tablet", t) : this.removeAttribute("gap--tablet");
+  }
+  get gapLaptop() {
+    return this.getAttribute("gap--laptop");
+  }
+  set gapLaptop(t) {
+    t ? this.setAttribute("gap--laptop", t) : this.removeAttribute("gap--laptop");
+  }
+  get gapDesktop() {
+    return this.getAttribute("gap--desktop");
+  }
+  set gapDesktop(t) {
+    t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
+  }
+};
+d.nativeName = "div";
+let p = d;
+customElements.get("px-list") || customElements.define("px-list", p);
+const N = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);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)}}', k = new CSSStyleSheet();
+k.replaceSync(N);
+const u = class u extends m {
+  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"];
+  }
+  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");
+  }
+};
+u.nativeName = "div";
+let h = u;
+customElements.get("px-list-item") || customElements.define("px-list-item", h);
+export {
+  p as List,
+  h as ListItem,
+  E as breakpointsValues
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@proximus/lavender-list",
+  "version": "1.0.0-alpha.1",
+  "description": "",
+  "main": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "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"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "customElements": "dist/custom-elements.json",
+  "web-types": "./dist/web-types.json",
+  "gitHead": "460ebd4c7e0171baabc0871a7058f475b5c9adbb"
+}