@proximus/lavender-timeline 1.4.14-beta.2 → 1.4.15-alpha.2

package/dist/Timeline.d.ts

@@ -6,8 +6,8 @@ export declare class Timeline extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     configureChildren(): void;
-    get $el(): Element;
+    get $el(): Element | null;
     get $children(): NodeListOf<Element>;
-    get inverted(): string;
-    set inverted(value: string);
+    get inverted(): boolean;
+    set inverted(value: boolean);
 }

package/dist/TimelineItem.d.ts

@@ -7,11 +7,11 @@ export declare class TimelineItem extends HTMLElement {
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     updateItem(oldValue: string, newValue: string): void;
     updateIndicator(item: string): void;
-    get $el(): Element;
-    get inverted(): string;
-    set inverted(value: string);
-    get lastchild(): string;
-    set lastchild(value: string);
-    get item(): string;
-    set item(value: string);
+    get $el(): Element | null;
+    get inverted(): boolean;
+    set inverted(value: boolean);
+    get lastchild(): boolean;
+    set lastchild(value: boolean);
+    get item(): string | null;
+    set item(value: string | null);
 }

package/dist/index.es.js

@@ -1,138 +1,577 @@
-var s = (n) => {
-  throw TypeError(n);
+//#region src/timeline.css?inline
+var e = ".timeline{margin:0;padding:0;list-style:none}", t = ":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%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([word-break-all]){word-break:break-all}@media screen and (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%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--mobile]){word-break:break-all!important}@media screen and (width>=48rem) and (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%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--tablet]){word-break:break-all!important}@media screen and (width>=64.0625rem){:host([shown--sr--laptop]),::slotted([shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}: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 (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}}";
+//#endregion
+//#region ../common/src/common.ts
+function n(e) {
+	let t = document.createElement(e), n = Object.getPrototypeOf(t);
+	return Object.getOwnPropertyNames(n);
+}
+function r(e) {
+	let t = document.createElement(e), n = Object.getPrototypeOf(t);
+	return Object.getOwnPropertyNames(n).map((e) => e.toLowerCase());
+}
+var i = new CSSStyleSheet();
+i.replaceSync(t);
+var a = {
+	BASE_URL: "/",
+	DEV: !0,
+	MODE: "production",
+	PROD: !1,
+	SSR: !1,
+	VITE_COMPONENT_DEBUG: "true"
+}, o = a?.VITE_COMPONENT_DEBUG === "true" || a?.DEV === !0;
+typeof window < "u" && (window.isComponentDebug = s);
+function s() {
+	return o;
+}
+function c(e) {
+	s() && console.error(e);
+}
+typeof window < "u" && (window.isComponentDebug = s);
+var l = class e extends HTMLElement {
+	static get observedAttributes() {
+		return /* @__PURE__ */ "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.sticky-top.sticky-bottom.word-break-all.word-break-all--mobile.word-break-all--tablet.word-break-all--laptop.word-break-all--desktop".split(".");
+	}
+	constructor(...e) {
+		super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [i, ...e];
+	}
+	attributeChangedCallback(t, n, r) {
+		if (e.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`, r);
+				break;
+			case "align-self":
+			case "align-self--mobile":
+			case "align-self--tablet":
+			case "align-self--laptop":
+			case "align-self--desktop":
+				this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? d : u);
+				break;
+			case "justify-self":
+			case "justify-self--mobile":
+			case "justify-self--tablet":
+			case "justify-self--laptop":
+			case "justify-self--desktop":
+				this.updateProperties(t, n, r, f);
+				break;
+			case "col-span":
+			case "col-span--mobile":
+			case "col-span--tablet":
+			case "col-span--laptop":
+			case "col-span--desktop":
+				this.updateProperties(t, n, r, p);
+				break;
+			case "order":
+			case "order--mobile":
+			case "order--tablet":
+			case "order--laptop":
+			case "order--desktop": this.updateProperties(t, n, r, m);
+		}
+	}
+	updateProperties(e, t, n, r) {
+		r && (this.checkName(r, n) || c(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
+		let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e;
+		if (!i) this.style.setProperty(`--${a}-value`, t), this.style.setProperty(`--${a}-value`, n);
+		else {
+			let r = e.split("--")[1];
+			this.style.setProperty(`--${a}--${r}-value`, t), this.style.setProperty(`--${a}--${r}-value`, n);
+		}
+	}
+	updateStyle(e, t, n) {
+		n !== null && n !== "" && n !== "default" && this.style.setProperty(`--${e}--${t}-value`, n);
+	}
+	checkName(e, t) {
+		return e.includes(t);
+	}
+	get $el() {
+		return this;
+	}
+	get $parentElementName() {
+		return this.parentElement?.tagName.toLowerCase();
+	}
+	get isInsideGridOrStack() {
+		let e = this.parentElement;
+		for (; e;) {
+			if (e.localName === "px-grid" || e.localName === "px-stack" && e?.getAttribute("direction") === "row") return !0;
+			if (window.getComputedStyle(e).display === "contents") {
+				e = e.parentElement;
+				continue;
+			}
+			break;
+		}
+		return !1;
+	}
+	get grow() {
+		return this.getAttribute("grow");
+	}
+	set grow(e) {
+		h(this, "grow", e);
+	}
+	get growMobile() {
+		return this.getAttribute("grow--mobile");
+	}
+	set growMobile(e) {
+		h(this, "grow--mobile", e);
+	}
+	get growTablet() {
+		return this.getAttribute("grow--tablet");
+	}
+	set growTablet(e) {
+		h(this, "grow--tablet", e);
+	}
+	get growLaptop() {
+		return this.getAttribute("grow--laptop");
+	}
+	set growLaptop(e) {
+		h(this, "grow--laptop", e);
+	}
+	get growDesktop() {
+		return this.getAttribute("grow--desktop");
+	}
+	set growDesktop(e) {
+		h(this, "grow--desktop", e);
+	}
+	get shrink() {
+		return this.getAttribute("shrink");
+	}
+	set shrink(e) {
+		h(this, "shrink", e);
+	}
+	get shrinkMobile() {
+		return this.getAttribute("shrink--mobile");
+	}
+	set shrinkMobile(e) {
+		h(this, "shrink--mobile", e);
+	}
+	get shrinkTablet() {
+		return this.getAttribute("shrink--tablet");
+	}
+	set shrinkTablet(e) {
+		h(this, "shrink--tablet", e);
+	}
+	get shrinkLaptop() {
+		return this.getAttribute("shrink--laptop");
+	}
+	set shrinkLaptop(e) {
+		h(this, "shrink--laptop", e);
+	}
+	get shrinkDesktop() {
+		return this.getAttribute("shrink--desktop");
+	}
+	set shrinkDesktop(e) {
+		h(this, "shrink--desktop", e);
+	}
+	get basis() {
+		return this.getAttribute("basis");
+	}
+	set basis(e) {
+		h(this, "basis", e);
+	}
+	get basisMobile() {
+		return this.getAttribute("basis--mobile");
+	}
+	set basisMobile(e) {
+		h(this, "basis--mobile", e);
+	}
+	get basisTablet() {
+		return this.getAttribute("basis--tablet");
+	}
+	set basisTablet(e) {
+		h(this, "basis--tablet", e);
+	}
+	get basisLaptop() {
+		return this.getAttribute("basis--laptop");
+	}
+	set basisLaptop(e) {
+		h(this, "basis--laptop", e);
+	}
+	get basisDesktop() {
+		return this.getAttribute("basis--desktop");
+	}
+	set basisDesktop(e) {
+		h(this, "basis--desktop", e);
+	}
+	get alignSelf() {
+		return this.getAttribute("align-self");
+	}
+	set alignSelf(e) {
+		h(this, "align-self", e);
+	}
+	get alignSelfMobile() {
+		return this.getAttribute("align-self--mobile");
+	}
+	set alignSelfMobile(e) {
+		h(this, "align-self--mobile", e);
+	}
+	get alignSelfTablet() {
+		return this.getAttribute("align-self--tablet");
+	}
+	set alignSelfTablet(e) {
+		h(this, "align-self--tablet", e);
+	}
+	get alignSelfLaptop() {
+		return this.getAttribute("align-self--laptop");
+	}
+	set alignSelfLaptop(e) {
+		h(this, "align-self--laptop", e);
+	}
+	get alignSelfDesktop() {
+		return this.getAttribute("align-self--desktop");
+	}
+	set alignSelfDesktop(e) {
+		h(this, "align-self--desktop", e);
+	}
+	get justifySelf() {
+		return this.getAttribute("justify-self");
+	}
+	set justifySelf(e) {
+		h(this, "justify-self", e);
+	}
+	get justifySelfMobile() {
+		return this.getAttribute("justify-self--mobile");
+	}
+	set justifySelfMobile(e) {
+		h(this, "justify-self--mobile", e);
+	}
+	get justifySelfTablet() {
+		return this.getAttribute("justify-self--tablet");
+	}
+	set justifySelfTablet(e) {
+		h(this, "justify-self--tablet", e);
+	}
+	get justifySelfLaptop() {
+		return this.getAttribute("justify-self--laptop");
+	}
+	set justifySelfLaptop(e) {
+		h(this, "justify-self--laptop", e);
+	}
+	get justifySelfDesktop() {
+		return this.getAttribute("justify-self--desktop");
+	}
+	set justifySelfDesktop(e) {
+		h(this, "justify-self--desktop", e);
+	}
+	get hiddenMobile() {
+		return this.hasAttribute("hidden--mobile");
+	}
+	set hiddenMobile(e) {
+		g(this, "hidden--mobile", e);
+	}
+	get hiddenTablet() {
+		return this.hasAttribute("hidden--tablet");
+	}
+	set hiddenTablet(e) {
+		g(this, "hidden--tablet", e);
+	}
+	get hiddenLaptop() {
+		return this.hasAttribute("hidden--laptop");
+	}
+	set hiddenLaptop(e) {
+		g(this, "hidden--laptop", e);
+	}
+	get hiddenDesktop() {
+		return this.hasAttribute("hidden--desktop");
+	}
+	set hiddenDesktop(e) {
+		g(this, "hidden--desktop", e);
+	}
+	get colSpan() {
+		return this.getAttribute("col-span");
+	}
+	set colSpan(e) {
+		h(this, "col-span", e);
+	}
+	get colSpanMobile() {
+		return this.getAttribute("col-span--mobile");
+	}
+	set colSpanMobile(e) {
+		h(this, "col-span--mobile", e);
+	}
+	get colSpanTablet() {
+		return this.getAttribute("col-span--tablet");
+	}
+	set colSpanTablet(e) {
+		h(this, "col-span--tablet", e);
+	}
+	get colSpanLaptop() {
+		return this.getAttribute("col-span--laptop");
+	}
+	set colSpanLaptop(e) {
+		h(this, "col-span--laptop", e);
+	}
+	get colSpanDesktop() {
+		return this.getAttribute("col-span--desktop");
+	}
+	set colSpanDesktop(e) {
+		h(this, "col-span--desktop", e);
+	}
+	get order() {
+		return this.getAttribute("order");
+	}
+	set order(e) {
+		h(this, "order", e);
+	}
+	get orderMobile() {
+		return this.getAttribute("order--mobile");
+	}
+	set orderMobile(e) {
+		h(this, "order--mobile", e);
+	}
+	get orderTablet() {
+		return this.getAttribute("order--tablet");
+	}
+	set orderTablet(e) {
+		h(this, "order--tablet", e);
+	}
+	get orderLaptop() {
+		return this.getAttribute("order--laptop");
+	}
+	set orderLaptop(e) {
+		h(this, "order--laptop", e);
+	}
+	get orderDesktop() {
+		return this.getAttribute("order--desktop");
+	}
+	set orderDesktop(e) {
+		h(this, "order--desktop", e);
+	}
 };
-var x = (n, e, t) => e.has(n) || s("Cannot " + t);
-var d = (n, e, t) => e.has(n) ? s("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t);
-var o = (n, e, t) => (x(n, e, "access private method"), t);
-const v = ".timeline{list-style:none;margin:0;padding:0}", b = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-size-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{display:flex;flex-direction:column;margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media screen and (min-width: 48rem){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}}@media screen and (min-width: 90.0625rem){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop)}}', c = new CSSStyleSheet();
-c.replaceSync(b);
-const p = "px-timeline-item-connected";
-let l = "1";
-class u extends HTMLElement {
-  template() {
-    return `
-      <li class="timeline-item" role="listitem">
-        <div class="indicator-area">
-          <div class="indicator"></div>
-        </div>
-        <div class="content-area">
-          <slot name="title"></slot>
-          <slot name="content"></slot>
-        </div>
-      </li>
-    `;
-  }
-  constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [c];
-  }
-  connectedCallback() {
-    this.dispatchEvent(
-      new CustomEvent(p, {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  static get observedAttributes() {
-    return ["inverted", "lastchild", "item"];
-  }
-  attributeChangedCallback(e, t, i) {
-    if (t !== i)
-      switch (e) {
-        case "item":
-          this.updateItem(t, i), this.updateIndicator(l);
-          break;
-      }
-  }
-  updateItem(e, t) {
-    e !== null && e !== "" && (l = e), t !== null && t !== "" && (l = t);
-  }
-  updateIndicator(e) {
-    const t = this.$el.querySelector(".indicator");
-    t.innerHTML = e;
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(".timeline-item");
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(e) {
-    this.setAttribute("inverted", e);
-  }
-  get lastchild() {
-    return this.getAttribute("lastchild");
-  }
-  set lastchild(e) {
-    this.setAttribute("lastchild", e);
-  }
-  get item() {
-    return this.getAttribute("item");
-  }
-  set item(e) {
-    this.setAttribute("item", e);
-  }
+(class extends l {
+	static {
+		this.accessorExclusions = [];
+	}
+	static get observedAttributes() {
+		return [...super.observedAttributes, ...r(this.nativeName)];
+	}
+	attributeChangedCallback(e, t, n) {
+		super.attributeChangedCallback(e, t, n), n === null ? this.$el.toggleAttribute(e) : this.$el.setAttribute(e, n);
+	}
+	get ctor() {
+		return Object.getPrototypeOf(this).constructor;
+	}
+	constructor(...e) {
+		super(...e), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = n(this.ctor.nativeName)), this.enhanceWithNativeProperties();
+	}
+	enhanceWithNativeProperties() {
+		for (let e of this.ctor.supportedPropertyNames) if (!(e === "constructor" || (this.ctor?.accessorExclusions ?? []).includes(e))) try {
+			Object.defineProperty(this, e, {
+				get() {
+					return this.$el[e];
+				},
+				set(t) {
+					this.$el[e] !== t && (this.$el[e] = t);
+				}
+			});
+		} catch (t) {
+			console.warn(`Could not create property ${e} for`, this.$el, t);
+		}
+	}
+	get $el() {
+		return this.shadowRoot.querySelector(this.ctor.nativeName);
+	}
+	_updateAttribute(e, t) {
+		h(this, e, t);
+	}
+	_updateBooleanAttribute(e, t) {
+		g(this, e, t);
+	}
+});
+var u = [
+	"",
+	"default",
+	"auto",
+	"flex-start",
+	"start",
+	"flex-end",
+	"end",
+	"center",
+	"baseline",
+	"stretch"
+], d = [
+	"",
+	"default",
+	"start",
+	"end",
+	"center",
+	"stretch"
+], f = [
+	"",
+	"default",
+	"start",
+	"end",
+	"center",
+	"stretch"
+], p = [
+	"",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"10",
+	"11",
+	"12"
+], m = [
+	"",
+	"-1",
+	"0",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"10",
+	"11",
+	"12"
+];
+[...[
+	"Xs",
+	"S",
+	"M",
+	"L",
+	"Xl"
+].map((e) => e.toLowerCase())];
+function h(e, t, n) {
+	if (n == null || n === "") {
+		e.removeAttribute(t);
+		return;
+	}
+	e.setAttribute(t, n.toString());
 }
-customElements.get("px-timeline-item") || customElements.define("px-timeline-item", u);
-const h = new CSSStyleSheet();
-h.replaceSync(v);
-var a, r;
-class g extends HTMLElement {
-  constructor() {
-    super();
-    d(this, a);
-    this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [h];
-  }
-  template() {
-    return `
-      <ol class="timeline" role="list">
-        <slot></slot>
-      </ol>
-    `;
-  }
-  static get observedAttributes() {
-    return ["inverted"];
-  }
-  connectedCallback() {
-    this.addEventListener(p, () => {
-      this.configureChildren(), o(this, a, r).call(this);
-    }), this.configureChildren(), o(this, a, r).call(this);
-  }
-  attributeChangedCallback(t, i, m) {
-    if (i !== m)
-      switch (t) {
-        case "inverted":
-          this.isConnected && o(this, a, r).call(this);
-          break;
-      }
-  }
-  configureChildren() {
-    const t = this.$children[this.$children.length - 1];
-    t && !t.hasAttribute("lastchild") && t.setAttribute("lastchild", "");
-    for (let i = 0; i < this.$children.length; i++)
-      this.$children[i].setAttribute("item", `${i + 1}`);
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(".timeline");
-  }
-  get $children() {
-    return this.querySelectorAll("px-timeline-item");
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(t) {
-    this.setAttribute("inverted", t);
-  }
+function g(e, t, n) {
+	if (!n) {
+		e.removeAttribute(t);
+		return;
+	}
+	e.setAttribute(t, "");
 }
-a = new WeakSet(), r = function() {
-  const t = this.hasAttribute("inverted");
-  for (let i = 0; i < this.$children.length; i++)
-    this.$children[i].toggleAttribute("inverted", t);
+//#endregion
+//#region src/timelineitem.css?inline
+var _ = ".timeline-item{gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);display:flex}.indicator-area{position:relative}.indicator-area:before{content:\"\";width:var(--px-size-border-m);background:var(--px-color-border-main-default);height:calc(100% - 26px);display:block;position:absolute;top:26px;left:12px}.indicator-area .indicator{text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default);justify-content:center;align-items:center;display:flex}.content-area{margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile);flex-direction:column;display:flex}.content-area ::slotted([slot=title]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot=content]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot=title]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot=content]){color:var(--px-color-text-dimmed-inverted)}@media screen and (width>=48rem){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot=title]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot=content]){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot=title]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot=content]){font-size:var(--px-text-size-body-m-laptop)}}@media screen and (width>=90.0625rem){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot=title]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot=content]){font-size:var(--px-text-size-body-m-desktop)}}", v = new CSSStyleSheet();
+v.replaceSync(_);
+var y = "px-timeline-item-connected", b = "1", x = class extends HTMLElement {
+	template() {
+		return "\n      <li class=\"timeline-item\" role=\"listitem\">\n        <div class=\"indicator-area\">\n          <div class=\"indicator\"></div>\n        </div>\n        <div class=\"content-area\">\n          <slot name=\"title\"></slot>\n          <slot name=\"content\"></slot>\n        </div>\n      </li>\n    ";
+	}
+	constructor() {
+		super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [v];
+	}
+	connectedCallback() {
+		this.dispatchEvent(new CustomEvent(y, {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	static get observedAttributes() {
+		return [
+			"inverted",
+			"lastchild",
+			"item"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "item": this.updateItem(t, n), this.updateIndicator(b);
+		}
+	}
+	updateItem(e, t) {
+		e !== null && e !== "" && (b = e), t !== null && t !== "" && (b = t);
+	}
+	updateIndicator(e) {
+		let t = this.$el?.querySelector(".indicator");
+		t && (t.innerHTML = e);
+	}
+	get $el() {
+		return this.shadowRoot.querySelector(".timeline-item");
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		g(this, "inverted", e);
+	}
+	get lastchild() {
+		return this.hasAttribute("lastchild");
+	}
+	set lastchild(e) {
+		g(this, "lastchild", e);
+	}
+	get item() {
+		return this.getAttribute("item");
+	}
+	set item(e) {
+		h(this, "item", e);
+	}
 };
-customElements.get("px-timeline") || customElements.define("px-timeline", g);
-export {
-  p as TIMELINE_ITEM_CONNECTED_EVENT,
-  g as Timeline,
-  u as TimelineItem
+customElements.get("px-timeline-item") || customElements.define("px-timeline-item", x);
+//#endregion
+//#region src/Timeline.ts
+var S = new CSSStyleSheet();
+S.replaceSync(e);
+var C = class extends HTMLElement {
+	template() {
+		return "\n      <ol class=\"timeline\" role=\"list\">\n        <slot></slot>\n      </ol>\n    ";
+	}
+	constructor() {
+		super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [S];
+	}
+	static get observedAttributes() {
+		return ["inverted"];
+	}
+	connectedCallback() {
+		this.addEventListener(y, () => {
+			this.configureChildren(), this.#e();
+		}), this.configureChildren(), this.#e();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "inverted": this.isConnected && this.#e();
+		}
+	}
+	#e() {
+		let e = this.hasAttribute("inverted");
+		for (let t = 0; t < this.$children.length; t++) this.$children[t].toggleAttribute("inverted", e);
+	}
+	configureChildren() {
+		let e = this.$children[this.$children.length - 1];
+		e && !e.hasAttribute("lastchild") && e.setAttribute("lastchild", "");
+		for (let e = 0; e < this.$children.length; e++) this.$children[e].setAttribute("item", `${e + 1}`);
+	}
+	get $el() {
+		return this.shadowRoot.querySelector(".timeline");
+	}
+	get $children() {
+		return this.querySelectorAll("px-timeline-item");
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		g(this, "inverted", e);
+	}
 };
+customElements.get("px-timeline") || customElements.define("px-timeline", C);
+//#endregion
+export { y as TIMELINE_ITEM_CONNECTED_EVENT, C as Timeline, x as TimelineItem };

package/package.json

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