@proximus/lavender-status 1.4.15-alpha.7 → 1.4.16-alpha.2

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;

package/dist/index.es.js

@@ -1,8 +1,601 @@
-import { PxElement as e, log as t } from "@proximus/lavender-common";
+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 n = ":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-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 (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)}}", r = new CSSStyleSheet();
-r.replaceSync(n);
-var i = [
+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");
+	}
+};
+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",
@@ -10,12 +603,12 @@ var i = [
 	"error",
 	"ongoing",
 	"unlimited"
-], a = class extends e {
+], T = class extends t {
 	static {
 		this.nativeName = "div";
 	}
 	constructor() {
-		super(r), 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();
+		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 [
@@ -60,11 +653,11 @@ var i = [
 		}
 	}
 	updateState(e) {
-		if (!this.checkName(i, e)) {
-			t(`"${e}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
+		if (!this.checkName(w, e)) {
+			o(`"${e}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${w.join("\", \"")}".`);
 			return;
 		}
-		let n = {
+		let t = {
 			info: {
 				name: "information_fill",
 				color: "brand"
@@ -89,8 +682,8 @@ var i = [
 				name: "infinity_fill",
 				color: "purpose-unlimited"
 			}
-		}, { name: r, color: a } = n[e] || n.info;
-		this.$statusIcon.name = r, this.$statusIcon.color = a;
+		}, { name: n, color: r } = t[e] || t.info;
+		this.$statusIcon.name = n, this.$statusIcon.color = r;
 	}
 	updateIconOnly(e) {
 		let t = e ? `--${e}` : "";
@@ -154,6 +747,6 @@ var i = [
 		this._updateBooleanAttribute("inverted", e);
 	}
 };
-customElements.get("px-status") || customElements.define("px-status", a);
+customElements.get("px-status") || customElements.define("px-status", T);
 //#endregion
-export { a as Status, i as statusStateValues };
+export { T as Status, w as statusStateValues };

package/package.json

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