@proximus/lavender-status 1.4.14-beta.1 → 1.4.14-beta.3

package/dist/Status.d.ts

@@ -1,5 +1,6 @@
-import { Icon } from '@proximus/lavender-icon';
+import { type Icon } from '@proximus/lavender-icon';
 import { PxElement } from '@proximus/lavender-common';
+import '@proximus/lavender-layout';
 export declare const statusStateValues: string[];
 export declare class Status extends PxElement<HTMLDivElement> {
     static nativeName: string;
@@ -12,10 +13,10 @@ export declare class Status extends PxElement<HTMLDivElement> {
     get $label(): HTMLSpanElement;
     get $statusIcon(): Icon;
     get $children(): NodeListOf<Element>;
-    get state(): string;
-    set state(value: string);
-    get iconAriaLabel(): string;
-    set iconAriaLabel(value: string);
+    get state(): string | null;
+    set state(value: string | null);
+    get iconAriaLabel(): string | null;
+    set iconAriaLabel(value: string | null);
     get iconOnly(): boolean;
     set iconOnly(value: boolean);
     get iconOnlyMobile(): boolean;

package/dist/index.es.js

@@ -1,157 +1,752 @@
-import { PxElement as a, log as c } from "@proximus/lavender-common";
-const u = ':host,:host>*{display:block;box-sizing:border-box}.status{color:var(--px-color-text-brand-default)}.status ::slotted([slot="label"]){font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l)}.status.success{color:var(--px-color-text-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-color-text-purpose-warning-default)}.status.error{color:var(--px-color-text-purpose-error-default)}.status.unlimited{color:var(--px-color-text-purpose-unlimited-default)}.status[disabled]{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .status{color:var(--px-color-text-brand-inverted)}:host([inverted]) .status.success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-laptop)}}', n = new CSSStyleSheet();
-n.replaceSync(u);
-const l = [
-  "",
-  "info",
-  "success",
-  "warning",
-  "error",
-  "ongoing",
-  "unlimited"
-], r = class r extends a {
-  constructor() {
-    super(n), this.template = () => `
-<div class="status">
-  <px-hstack gap="2xs" align-items="flex-start">
-    <px-icon name="information_fill" from="lavender" size="s" color="brand"></px-icon>
-    <slot name="label"></slot>
-  </px-hstack>
-</div>`, this.shadowRoot.innerHTML = this.template();
-  }
-  static get observedAttributes() {
-    return [
-      "state",
-      "icon-only",
-      "icon-only--mobile",
-      "icon-only--tablet",
-      "icon-only--laptop",
-      "disabled",
-      "inverted",
-      "icon-aria-label"
-    ];
-  }
-  attributeChangedCallback(t, s, e) {
-    if (s !== e)
-      switch (t) {
-        case "state":
-          this.updateState(e), this.$el.classList.toggle(`${e}`);
-          break;
-        case "icon-aria-label":
-          this.$statusIcon.setAttribute("aria-label", e);
-          break;
-        case "icon-only":
-          this.updateIconOnly(null);
-          break;
-        case "icon-only--mobile":
-          this.updateIconOnly("mobile");
-          break;
-        case "icon-only--tablet":
-          this.updateIconOnly("tablet");
-          break;
-        case "icon-only--laptop":
-          this.updateIconOnly("laptop");
-          break;
-        case "disabled":
-          this.$el.toggleAttribute("disabled", e !== null), this.$statusIcon.color = "state-disabled";
-          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), this.$statusIcon.toggleAttribute("inverted", e !== null);
-          break;
-        default:
-          super.attributeChangedCallback(t, s, e);
-          break;
-      }
-  }
-  updateState(t) {
-    if (!this.checkName(l, t)) {
-      c(
-        `"${t}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${l.join('", "')}".`
-      );
-      return;
-    }
-    const s = {
-      info: { name: "information_fill", color: "brand" },
-      success: { name: "checkmark_fill", color: "purpose-success" },
-      warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
-      error: { name: "minus_fill", color: "purpose-error" },
-      ongoing: { name: "clock_fill", color: "purpose-warning" },
-      unlimited: { name: "infinity_fill", color: "purpose-unlimited" }
-    }, { name: e, color: i } = s[t] || s.info;
-    this.$statusIcon.name = e, this.$statusIcon.color = i;
-  }
-  updateIconOnly(t) {
-    var e;
-    const s = t ? `--${t}` : "";
-    this.$label.setAttribute(`shown--sr${s}`, ""), (t === "laptop" || t === null) && this.$statusIcon.setAttribute(
-      "title",
-      ((e = this.$label.textContent) == null ? void 0 : e.trim()) || ""
-    );
-  }
-  get $label() {
-    return this.querySelector('[slot="label"]');
-  }
-  get $statusIcon() {
-    return this.shadowRoot.querySelector("px-icon");
-  }
-  get $children() {
-    return this.querySelectorAll("px-status > *");
-  }
-  get state() {
-    return this.getAttribute("state");
-  }
-  set state(t) {
-    this.setAttribute("state", t);
-  }
-  get iconAriaLabel() {
-    return this.getAttribute("icon-aria-label");
-  }
-  set iconAriaLabel(t) {
-    this.setAttribute("icon-aria-label", t);
-  }
-  get iconOnly() {
-    return this.hasAttribute("icon-only");
-  }
-  set iconOnly(t) {
-    t ? this.setAttribute("icon-only", "") : this.removeAttribute("icon-only");
-  }
-  get iconOnlyMobile() {
-    return this.hasAttribute("icon-only--mobile");
-  }
-  set iconOnlyMobile(t) {
-    t ? this.setAttribute("icon-only--mobile", "") : this.removeAttribute("icon-only--mobile");
-  }
-  get iconOnlyTablet() {
-    return this.hasAttribute("icon-only--tablet");
-  }
-  set iconOnlyTablet(t) {
-    t ? this.setAttribute("icon-only--tablet", "") : this.removeAttribute("icon-only--tablet");
-  }
-  get iconOnlyLaptop() {
-    return this.hasAttribute("icon-only--laptop");
-  }
-  set iconOnlyLaptop(t) {
-    t ? this.setAttribute("icon-only--laptop", "") : this.removeAttribute("icon-only--laptop");
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  set disabled(t) {
-    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
+import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, backgroundColorValues as r, checkName as i, gapValues as a, log as o, propertyToAttributeSetter as s } from "@proximus/lavender-common";
+//#region src/status.css?inline
+var c = ":host,:host>*{box-sizing:border-box;display:block}.status{color:var(--px-color-text-brand-default)}.status ::slotted([slot=label]){font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-s)}.status.success{color:var(--px-color-text-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-color-text-purpose-warning-default)}.status.error{color:var(--px-color-text-purpose-error-default)}.status.unlimited{color:var(--px-color-text-purpose-unlimited-default)}.status[disabled]{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .status{color:var(--px-color-text-brand-inverted)}:host([inverted]) .status.success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-color-text-state-disabled-inverted)}@media screen and (width>=48rem){.status ::slotted([slot=label]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (width>=64.0625rem){.status ::slotted([slot=label]){font-size:var(--px-text-size-label-m-laptop)}}", l = ":host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop,var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}", u = new CSSStyleSheet();
+u.replaceSync(l);
+var d = [
+	"",
+	"default",
+	"row",
+	"row-reverse",
+	"column",
+	"column-reverse"
+], f = [
+	"",
+	"default",
+	"stretch",
+	"flex-start",
+	"start",
+	"flex-end",
+	"end",
+	"center",
+	"baseline"
+], p = [
+	"",
+	"default",
+	"flex-start",
+	"start",
+	"flex-end",
+	"end",
+	"center",
+	"space-between",
+	"space-around",
+	"space-evenly"
+], m = [
+	"",
+	"default",
+	"nowrap",
+	"wrap",
+	"wrap-reverse"
+], h = [
+	"",
+	"visible",
+	"hidden",
+	"scroll",
+	"auto"
+], g = class extends n {
+	constructor() {
+		super(u), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.template = "<div class=\"flex-container\">\n      <slot></slot>\n  </div>", this.shadowRoot.innerHTML = this.template;
+	}
+	connectedCallback() {
+		this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"direction",
+			"direction--mobile",
+			"direction--tablet",
+			"direction--laptop",
+			"direction--desktop",
+			"gap",
+			"gap--mobile",
+			"gap--tablet",
+			"gap--laptop",
+			"gap--desktop",
+			"justify-content",
+			"justify-content--mobile",
+			"justify-content--tablet",
+			"justify-content--laptop",
+			"justify-content--desktop",
+			"align-items",
+			"align-items--mobile",
+			"align-items--tablet",
+			"align-items--laptop",
+			"align-items--desktop",
+			"wrap",
+			"wrap--mobile",
+			"wrap--tablet",
+			"wrap--laptop",
+			"wrap--desktop",
+			"overflow-x",
+			"overflow-x--mobile",
+			"overflow-x--tablet",
+			"overflow-x--laptop",
+			"overflow-x--desktop"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		switch (e) {
+			case "gap":
+			case "gap--mobile":
+			case "gap--tablet":
+			case "gap--laptop":
+			case "gap--desktop":
+				this.updateFlexProperties(e, t, n, a);
+				break;
+			case "justify-content":
+			case "justify-content--mobile":
+			case "justify-content--tablet":
+			case "justify-content--laptop":
+			case "justify-content--desktop":
+				this.updateFlexProperties(e, t, n, p);
+				break;
+			case "align-items":
+			case "align-items--mobile":
+			case "align-items--tablet":
+			case "align-items--laptop":
+			case "align-items--desktop":
+				this.updateFlexProperties(e, t, n, f);
+				break;
+			case "wrap":
+			case "wrap--mobile":
+			case "wrap--tablet":
+			case "wrap--laptop":
+			case "wrap--desktop":
+				this.updateFlexProperties(e, t, n, m);
+				break;
+			case "direction":
+			case "direction--mobile":
+			case "direction--tablet":
+			case "direction--laptop":
+			case "direction--desktop":
+				this.updateFlexProperties(e, t, n, d);
+				break;
+			case "overflow-x":
+			case "overflow-x--mobile":
+			case "overflow-x--tablet":
+			case "overflow-x--laptop":
+			case "overflow-x--desktop":
+				this.updateOverflowX(e, t, n, h);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	updateOverflowX(e, t, n, r) {
+		if (!i(r, n)) {
+			o(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+			return;
+		}
+		this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
+	}
+	updateFlexProperties(e, t, n, r) {
+		this.checkName(r, n) || o(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+		let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e, s = [];
+		if (!i) this.getAttribute(a + "--mobile") || s.push("mobile"), this.getAttribute(a + "--tablet") || s.push("tablet"), this.getAttribute(a + "--laptop") || s.push("laptop"), this.getAttribute(a + "--desktop") || s.push("desktop"), s.forEach((e) => {
+			this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
+		});
+		else {
+			let i = e.split("--")[1];
+			this.updateStyle(a, i, t, r), this.updateStyle(a, i, n, r);
+		}
+	}
+	updateStyle(e, t, n, r) {
+		n && (e === "gap" && r && r.includes(n) ? (this.$el.style.setProperty(`--flex-${e}--${t}-value`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`), this.style.setProperty(`--host-gap--${t}`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`)) : this.$el.style.setProperty(`--flex-${e}--${t}-value`, n));
+	}
+	get direction() {
+		return this.getAttribute("direction");
+	}
+	set direction(e) {
+		s(this, "direction", e);
+	}
+	get directionMobile() {
+		return this.getAttribute("direction--mobile");
+	}
+	set directionMobile(e) {
+		s(this, "direction--mobile", e);
+	}
+	get directionTablet() {
+		return this.getAttribute("direction--tablet");
+	}
+	set directionTablet(e) {
+		s(this, "direction--tablet", e);
+	}
+	get directionLaptop() {
+		return this.getAttribute("direction--laptop");
+	}
+	set directionLaptop(e) {
+		s(this, "direction--laptop", e);
+	}
+	get directionDesktop() {
+		return this.getAttribute("direction--desktop");
+	}
+	set directionDesktop(e) {
+		s(this, "direction--desktop", e);
+	}
+	get gap() {
+		return this.getAttribute("gap");
+	}
+	set gap(e) {
+		s(this, "gap", e);
+	}
+	get gapMobile() {
+		return this.getAttribute("gap--mobile");
+	}
+	set gapMobile(e) {
+		s(this, "gap--mobile", e);
+	}
+	get gapTablet() {
+		return this.getAttribute("gap--tablet");
+	}
+	set gapTablet(e) {
+		s(this, "gap--tablet", e);
+	}
+	get gapLaptop() {
+		return this.getAttribute("gap--laptop");
+	}
+	set gapLaptop(e) {
+		s(this, "gap--laptop", e);
+	}
+	get gapDesktop() {
+		return this.getAttribute("gap--desktop");
+	}
+	set gapDesktop(e) {
+		s(this, "gap--desktop", e);
+	}
+	get justifyContent() {
+		return this.getAttribute("justify-content");
+	}
+	set justifyContent(e) {
+		s(this, "justify-content", e);
+	}
+	get justifyContentMobile() {
+		return this.getAttribute("justify-content--mobile");
+	}
+	set justifyContentMobile(e) {
+		s(this, "justify-content--mobile", e);
+	}
+	get justifyContentTablet() {
+		return this.getAttribute("justify-content--tablet");
+	}
+	set justifyContentTablet(e) {
+		s(this, "justify-content--tablet", e);
+	}
+	get justifyContentLaptop() {
+		return this.getAttribute("justify-content--laptop");
+	}
+	set justifyContentLaptop(e) {
+		s(this, "justify-content--laptop", e);
+	}
+	get justifyContentDesktop() {
+		return this.getAttribute("justify-content--desktop");
+	}
+	set justifyContentDesktop(e) {
+		s(this, "justify-content--desktop", e);
+	}
+	get alignItems() {
+		return this.getAttribute("align-items");
+	}
+	set alignItems(e) {
+		s(this, "align-items", e);
+	}
+	get alignItemsMobile() {
+		return this.getAttribute("align-items--mobile");
+	}
+	set alignItemsMobile(e) {
+		s(this, "align-items--mobile", e);
+	}
+	get alignItemsTablet() {
+		return this.getAttribute("align-items--tablet");
+	}
+	set alignItemsTablet(e) {
+		s(this, "align-items--tablet", e);
+	}
+	get alignItemsLaptop() {
+		return this.getAttribute("align-items--laptop");
+	}
+	set alignItemsLaptop(e) {
+		s(this, "align-items--laptop", e);
+	}
+	get alignItemsDesktop() {
+		return this.getAttribute("align-items--desktop");
+	}
+	set alignItemsDesktop(e) {
+		s(this, "align-items--desktop", e);
+	}
+	get wrap() {
+		return this.getAttribute("wrap");
+	}
+	set wrap(e) {
+		s(this, "wrap", e);
+	}
+	get wrapMobile() {
+		return this.getAttribute("wrap--mobile");
+	}
+	set wrapMobile(e) {
+		s(this, "wrap--mobile", e);
+	}
+	get wrapTablet() {
+		return this.getAttribute("wrap--tablet");
+	}
+	set wrapTablet(e) {
+		s(this, "wrap--tablet", e);
+	}
+	get wrapLaptop() {
+		return this.getAttribute("wrap--laptop");
+	}
+	set wrapLaptop(e) {
+		s(this, "wrap--laptop", e);
+	}
+	get wrapDesktop() {
+		return this.getAttribute("wrap--desktop");
+	}
+	set wrapDesktop(e) {
+		s(this, "wrap--desktop", e);
+	}
+	get overflowX() {
+		return this.getAttribute("overflow-x");
+	}
+	set overflowX(e) {
+		s(this, "overflow-x", e);
+	}
+	get overflowXMobile() {
+		return this.getAttribute("overflow-x--mobile");
+	}
+	set overflowXMobile(e) {
+		s(this, "overflow-x--mobile", e);
+	}
+	get overflowXTablet() {
+		return this.getAttribute("overflow-x--tablet");
+	}
+	set overflowXTablet(e) {
+		s(this, "overflow-x--tablet", e);
+	}
+	get overflowXLaptop() {
+		return this.getAttribute("overflow-x--laptop");
+	}
+	set overflowXLaptop(e) {
+		s(this, "overflow-x--laptop", e);
+	}
+	get overflowXDesktop() {
+		return this.getAttribute("overflow-x--desktop");
+	}
+	set overflowXDesktop(e) {
+		s(this, "overflow-x--desktop", e);
+	}
+	get $el() {
+		return this.shadowRoot.querySelector(".flex-container");
+	}
 };
-r.nativeName = "div";
-let o = r;
-customElements.get("px-status") || customElements.define("px-status", o);
-export {
-  o as Status,
-  l as statusStateValues
+customElements.get("px-stack") || customElements.define("px-stack", g);
+var _ = class extends g {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
+	}
 };
+customElements.get("px-vstack") || customElements.define("px-vstack", _);
+var v = class extends g {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
+	}
+};
+customElements.get("px-hstack") || customElements.define("px-hstack", v);
+//#endregion
+//#region ../Layout/src/Spacer.ts
+var y = class extends HTMLElement {
+	constructor() {
+		super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
+	}
+	static get observedAttributes() {
+		return ["grow", "nogap"];
+	}
+	attributeChangedCallback(e, t, n) {
+		e === "grow" && (this.growValue = n || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
+	}
+	connectedCallback() {
+		this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && this.parentElement && (this.resizeObserver = new ResizeObserver(() => {
+			this.handleSizeChange();
+		}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
+	}
+	disconnectedCallback() {
+		this.resizeObserver?.disconnect(), this.recheckHandle &&= (cancelAnimationFrame(this.recheckHandle), void 0);
+	}
+	get grow() {
+		return this.getAttribute("grow");
+	}
+	set grow(e) {
+		this.setAttribute("grow", `${e}`);
+	}
+	scheduleRecheck() {
+		this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
+			this.recheckHandle = void 0, this.recalculateVisibility();
+		});
+	}
+	recalculateVisibility() {
+		this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
+	}
+	handleSizeChange() {
+		let e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
+		this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
+	}
+	updateParticipation() {
+		this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
+	}
+	get nogap() {
+		return this.hasAttribute("nogap");
+	}
+	set nogap(e) {
+		e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
+	}
+};
+customElements.get("px-spacer") || customElements.define("px-spacer", y);
+//#endregion
+//#region ../Layout/src/Page.css?inline
+var b = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", x = new CSSStyleSheet();
+x.replaceSync(b);
+var S = class extends n {
+	constructor() {
+		super(x), this.template = () => `
+    <px-container border-radius="none" padding="none">
+      <px-vstack>
+        <px-container id="header-container" border-radius="none">
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack
+              id="header-vstack-container"
+              gap="s"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
+              <slot name="header-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="image-container"
+          border-radius="none"
+          padding="none"
+          padding-top="xl"
+          id="image-box"
+          background-size="cover"
+          background-position="top center"
+          padding-bottom="xl"
+          border-radius="none"
+          bgimg="${this.backgroundImage}"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack grow="${this.grow}" basis="${this.basis}">
+              <slot name="image-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="body-container"
+          id="main"
+          background-color="${this.backgroundColor}"
+          padding="none"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack
+              id="body-vstack-container"
+              gap="l"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
+              <slot name="body-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="contact-container"
+          border-radius="none"
+          id="main"
+          background-color="surface-default"
+          padding="none"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
+              <slot name="contact-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="footer-container"
+          background-color="none"
+          border-radius="none"
+          style="background-color: rgb(108, 66, 156)"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
+              <slot name="footer-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+      </px-vstack>
+    </px-container>
+  `, this.shadowRoot.innerHTML = this.template();
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"background-image",
+			"gap",
+			"background-color",
+			"padding-vertical",
+			"padding-horizontal"
+		];
+	}
+	get $wideImage() {
+		return this.shadowRoot.querySelector("#image-box");
+	}
+	get $bodyVStackContainer() {
+		return this.shadowRoot.querySelector("#header-vstack-container");
+	}
+	get $bodyContainer() {
+		return this.shadowRoot.querySelector("#body-container");
+	}
+	get $contactContainer() {
+		return this.shadowRoot.querySelector("#contact-container");
+	}
+	get $footerContainer() {
+		return this.shadowRoot.querySelector("#footer-container");
+	}
+	get $headerContainer() {
+		return this.shadowRoot.querySelector("#header-container");
+	}
+	get $imageContainer() {
+		return this.shadowRoot.querySelector("#image-container");
+	}
+	get backgroundImage() {
+		return this.getAttribute("background-image");
+	}
+	get $main() {
+		return this.shadowRoot.querySelector("#main");
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color") || "none";
+	}
+	get paddingVertical() {
+		return this.getAttribute("padding-vertical");
+	}
+	get paddingHorizontal() {
+		return this.getAttribute("padding-horizontal");
+	}
+	set paddingVertical(e) {
+		this.setAttribute("padding-vertical", `${e}`);
+	}
+	set paddingHorizontal(e) {
+		this.setAttribute("padding-horizontal", `${e}`);
+	}
+	get gap() {
+		return this.getAttribute("gap");
+	}
+	connectedCallback() {
+		this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "background-image":
+				this.$imageContainer.setAttribute("background-image", n);
+				break;
+			case "gap":
+				this.$bodyVStackContainer.setAttribute("gap", n);
+				break;
+			case "background-color":
+				this.$bodyContainer.setAttribute("background-color", r.indexOf(n) > 0 ? n : "none");
+				break;
+			case "padding-vertical":
+				this.handlePaddingVerticalChange(n);
+				break;
+			case "padding-horizontal":
+				this.handlePaddingHorizontalChange(n);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	handlePaddingVerticalChange(e) {
+		this.$bodyContainer.paddingTop = e, this.$bodyContainer.paddingBottom = e;
+	}
+	handlePaddingHorizontalChange(e) {
+		this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
+	}
+};
+customElements.get("px-page") === void 0 && customElements.define("px-page", S);
+//#endregion
+//#region src/Status.ts
+var C = new CSSStyleSheet();
+C.replaceSync(c);
+var w = [
+	"",
+	"info",
+	"success",
+	"warning",
+	"error",
+	"ongoing",
+	"unlimited"
+], T = class extends t {
+	static {
+		this.nativeName = "div";
+	}
+	constructor() {
+		super(C), this.template = () => "\n<div class=\"status\">\n  <px-hstack gap=\"2xs\" align-items=\"flex-start\">\n    <px-icon name=\"information_fill\" from=\"lavender\" size=\"s\" color=\"brand\"></px-icon>\n    <slot name=\"label\"></slot>\n  </px-hstack>\n</div>", this.shadowRoot.innerHTML = this.template();
+	}
+	static get observedAttributes() {
+		return [
+			"state",
+			"icon-only",
+			"icon-only--mobile",
+			"icon-only--tablet",
+			"icon-only--laptop",
+			"disabled",
+			"inverted",
+			"icon-aria-label"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "state":
+				this.updateState(n), this.$el.classList.toggle(`${n}`);
+				break;
+			case "icon-aria-label":
+				this.$statusIcon.setAttribute("aria-label", n);
+				break;
+			case "icon-only":
+				this.updateIconOnly(null);
+				break;
+			case "icon-only--mobile":
+				this.updateIconOnly("mobile");
+				break;
+			case "icon-only--tablet":
+				this.updateIconOnly("tablet");
+				break;
+			case "icon-only--laptop":
+				this.updateIconOnly("laptop");
+				break;
+			case "disabled":
+				this.$el.toggleAttribute("disabled", n !== null), this.$statusIcon.color = "state-disabled";
+				break;
+			case "inverted":
+				for (let e = 0; e < this.$children.length; e++) this.$children[e].hasAttribute("inverted") || this.$children[e].toggleAttribute("inverted");
+				this.$el.toggleAttribute("inverted", n !== null), this.$statusIcon.toggleAttribute("inverted", n !== null);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	updateState(e) {
+		if (!this.checkName(w, e)) {
+			o(`"${e}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${w.join("\", \"")}".`);
+			return;
+		}
+		let t = {
+			info: {
+				name: "information_fill",
+				color: "brand"
+			},
+			success: {
+				name: "checkmark_fill",
+				color: "purpose-success"
+			},
+			warning: {
+				name: "exclamation_mark_fill",
+				color: "purpose-warning"
+			},
+			error: {
+				name: "minus_fill",
+				color: "purpose-error"
+			},
+			ongoing: {
+				name: "clock_fill",
+				color: "purpose-warning"
+			},
+			unlimited: {
+				name: "infinity_fill",
+				color: "purpose-unlimited"
+			}
+		}, { name: n, color: r } = t[e] || t.info;
+		this.$statusIcon.name = n, this.$statusIcon.color = r;
+	}
+	updateIconOnly(e) {
+		let t = e ? `--${e}` : "";
+		this.$label.setAttribute(`shown--sr${t}`, ""), (e === "laptop" || e === null) && this.$statusIcon.setAttribute("title", this.$label.textContent?.trim() || "");
+	}
+	get $label() {
+		return this.querySelector("[slot=\"label\"]");
+	}
+	get $statusIcon() {
+		return this.shadowRoot.querySelector("px-icon");
+	}
+	get $children() {
+		return this.querySelectorAll("px-status > *");
+	}
+	get state() {
+		return this.getAttribute("state");
+	}
+	set state(e) {
+		this._updateAttribute("state", e);
+	}
+	get iconAriaLabel() {
+		return this.getAttribute("icon-aria-label");
+	}
+	set iconAriaLabel(e) {
+		this._updateAttribute("icon-aria-label", e);
+	}
+	get iconOnly() {
+		return this.hasAttribute("icon-only");
+	}
+	set iconOnly(e) {
+		this._updateBooleanAttribute("icon-only", e);
+	}
+	get iconOnlyMobile() {
+		return this.hasAttribute("icon-only--mobile");
+	}
+	set iconOnlyMobile(e) {
+		this._updateBooleanAttribute("icon-only--mobile", e);
+	}
+	get iconOnlyTablet() {
+		return this.hasAttribute("icon-only--tablet");
+	}
+	set iconOnlyTablet(e) {
+		this._updateBooleanAttribute("icon-only--tablet", e);
+	}
+	get iconOnlyLaptop() {
+		return this.hasAttribute("icon-only--laptop");
+	}
+	set iconOnlyLaptop(e) {
+		this._updateBooleanAttribute("icon-only--laptop", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		this._updateBooleanAttribute("disabled", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		this._updateBooleanAttribute("inverted", e);
+	}
+};
+customElements.get("px-status") || customElements.define("px-status", T);
+//#endregion
+export { T as Status, w as statusStateValues };

package/package.json

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