@proximus/lavender-layout 2.0.0-alpha.21 → 2.0.0-alpha.210

package/dist/index.es.js

@@ -1,426 +1,429 @@
-import { WithExtraAttributes as d, AttributeBreakpointHandlerDelegate as u, gapValues as b, checkName as f, log as p, backgroundColorValues as x } from "@proximus/lavender-common";
-const m = ':host{display:block}: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{display:flex;height:100%;width:100%;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);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.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([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 only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.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([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 only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.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([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))}}', g = new CSSStyleSheet();
-g.replaceSync(m);
-const v = [
-  "",
-  "default",
-  "row",
-  "row-reverse",
-  "column",
-  "column-reverse"
-], k = [
-  "",
-  "default",
-  "stretch",
-  "flex-start",
-  "flex-end",
-  "center",
-  "baseline"
-], w = [
-  "",
-  "default",
-  "flex-start",
-  "flex-end",
-  "center",
-  "space-between",
-  "space-around",
-  "space-evenly"
-], y = ["", "default", "nowrap", "wrap", "wrap-reverse"], A = ["", "visible", "hidden", "scroll", "auto"];
-class l extends d {
-  constructor() {
-    super(g), this.overflowXAttributeDelegate = new u(
-      this,
-      "overflow-x",
-      (t) => t,
-      "--overflow-x"
-    ), this.template = `<div class="flex-container">
-      <slot></slot>
-  </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(t, i, e) {
-    switch (t) {
-      case "gap":
-      case "gap--mobile":
-      case "gap--tablet":
-      case "gap--laptop":
-      case "gap--desktop":
-        this.updateFlexProperties(t, i, e, b);
-        break;
-      case "justify-content":
-      case "justify-content--mobile":
-      case "justify-content--tablet":
-      case "justify-content--laptop":
-      case "justify-content--desktop":
-        this.updateFlexProperties(
-          t,
-          i,
-          e,
-          w
-        );
-        break;
-      case "align-items":
-      case "align-items--mobile":
-      case "align-items--tablet":
-      case "align-items--laptop":
-      case "align-items--desktop":
-        this.updateFlexProperties(t, i, e, k);
-        break;
-      case "wrap":
-      case "wrap--mobile":
-      case "wrap--tablet":
-      case "wrap--laptop":
-      case "wrap--desktop":
-        this.updateFlexProperties(t, i, e, y);
-        break;
-      case "direction":
-      case "direction--mobile":
-      case "direction--tablet":
-      case "direction--laptop":
-      case "direction--desktop":
-        this.updateFlexProperties(t, i, e, v);
-        break;
-      case "overflow-x":
-      case "overflow-x--mobile":
-      case "overflow-x--tablet":
-      case "overflow-x--laptop":
-      case "overflow-x--desktop":
-        this.updateOverflowX(t, i, e, A);
-        break;
-      default:
-        super.attributeChangedCallback(t, i, e);
-        break;
-    }
-  }
-  updateOverflowX(t, i, e, o) {
-    if (!f(o, e)) {
-      p(
-        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
-      );
-      return;
-    }
-    this.overflowXAttributeDelegate.attributeChangedCallback(
-      t,
-      i,
-      e
-    );
-  }
-  updateFlexProperties(t, i, e, o) {
-    this.checkName(o, e) || p(
-      `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
-    );
-    const c = t.indexOf("--") > -1, a = c ? t.split("--")[0] : t, s = [];
-    if (!c)
-      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((r) => {
-        this.updateStyle(a, r, i, o), this.updateStyle(a, r, e, o);
-      });
-    else {
-      const r = t.split("--")[1];
-      this.updateStyle(a, r, i, o), this.updateStyle(a, r, e, o);
-    }
-  }
-  updateStyle(t, i, e, o) {
-    e && (t === "gap" && o && o.includes(e) ? this.$el.style.setProperty(
-      `--flex-${t}--${i}-value`,
-      `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
-    ) : this.$el.style.setProperty(
-      `--flex-${t}--${i}-value`,
-      e
-    ));
-  }
-  get direction() {
-    return this.getAttribute("direction");
-  }
-  set direction(t) {
-    this.setAttribute("direction", t);
-  }
-  get directionMobile() {
-    return this.getAttribute("direction--mobile");
-  }
-  set directionMobile(t) {
-    this.setAttribute("direction--mobile", t);
-  }
-  get directionTablet() {
-    return this.getAttribute("direction--tablet");
-  }
-  set directionTablet(t) {
-    this.setAttribute("direction--tablet", t);
-  }
-  get directionLaptop() {
-    return this.getAttribute("direction--laptop");
-  }
-  set directionLaptop(t) {
-    this.setAttribute("direction--laptop", t);
-  }
-  get directionDesktop() {
-    return this.getAttribute("direction--desktop");
-  }
-  set directionDesktop(t) {
-    this.setAttribute("direction--desktop", t);
-  }
-  get gap() {
-    return this.getAttribute("gap");
-  }
-  set gap(t) {
-    this.setAttribute("gap", t);
-  }
-  get gapMobile() {
-    return this.getAttribute("gap--mobile");
-  }
-  set gapMobile(t) {
-    this.setAttribute("gap--mobile", t);
-  }
-  get gapTablet() {
-    return this.getAttribute("gap--tablet");
-  }
-  set gapTablet(t) {
-    this.setAttribute("gap--tablet", t);
-  }
-  get gapLaptop() {
-    return this.getAttribute("gap--laptop");
-  }
-  set gapLaptop(t) {
-    this.setAttribute("gap--laptop", t);
-  }
-  get gapDesktop() {
-    return this.getAttribute("gap--desktop");
-  }
-  set gapDesktop(t) {
-    this.setAttribute("gap--desktop", t);
-  }
-  get justifyContent() {
-    return this.getAttribute("justify-content");
-  }
-  set justifyContent(t) {
-    this.setAttribute("justify-content", t);
-  }
-  get justifyContentMobile() {
-    return this.getAttribute("justify-content--mobile");
-  }
-  set justifyContentMobile(t) {
-    this.setAttribute("justify-content--mobile", t);
-  }
-  get justifyContentTablet() {
-    return this.getAttribute("justify-content--tablet");
-  }
-  set justifyContentTablet(t) {
-    this.setAttribute("justify-content--tablet", t);
-  }
-  get justifyContentLaptop() {
-    return this.getAttribute("justify-content--laptop");
-  }
-  set justifyContentLaptop(t) {
-    this.setAttribute("justify-content--laptop", t);
-  }
-  get justifyContentDesktop() {
-    return this.getAttribute("justify-content--desktop");
-  }
-  set justifyContentDesktop(t) {
-    this.setAttribute("justify-content--desktop", t);
-  }
-  get alignItems() {
-    return this.getAttribute("align-items");
-  }
-  set alignItems(t) {
-    this.setAttribute("align-items", t);
-  }
-  get alignItemsMobile() {
-    return this.getAttribute("align-items--mobile");
-  }
-  set alignItemsMobile(t) {
-    this.setAttribute("align-items--mobile", t);
-  }
-  get alignItemsTablet() {
-    return this.getAttribute("align-items--tablet");
-  }
-  set alignItemsTablet(t) {
-    this.setAttribute("align-items--tablet", t);
-  }
-  get alignItemsLaptop() {
-    return this.getAttribute("align-items--laptop");
-  }
-  set alignItemsLaptop(t) {
-    this.setAttribute("align-items--laptop", t);
-  }
-  get alignItemsDesktop() {
-    return this.getAttribute("align-items--desktop");
-  }
-  set alignItemsDesktop(t) {
-    this.setAttribute("align-items--desktop", t);
-  }
-  get wrap() {
-    return this.getAttribute("wrap");
-  }
-  set wrap(t) {
-    this.setAttribute("wrap", t);
-  }
-  get wrapMobile() {
-    return this.getAttribute("wrap--mobile");
-  }
-  set wrapMobile(t) {
-    this.setAttribute("wrap--mobile", t);
-  }
-  get wrapTablet() {
-    return this.getAttribute("wrap--tablet");
-  }
-  set wrapTablet(t) {
-    this.setAttribute("wrap--tablet", t);
-  }
-  get wrapLaptop() {
-    return this.getAttribute("wrap--laptop");
-  }
-  set wrapLaptop(t) {
-    this.setAttribute("wrap--laptop", t);
-  }
-  get wrapDesktop() {
-    return this.getAttribute("wrap--desktop");
-  }
-  set wrapDesktop(t) {
-    this.setAttribute("wrap--desktop", t);
-  }
-  get overflowX() {
-    return this.getAttribute("overflow-x");
-  }
-  set overflowX(t) {
-    this.setAttribute("overflow-x", t);
-  }
-  get overflowXMobile() {
-    return this.getAttribute("overflow-x--mobile");
-  }
-  set overflowXMobile(t) {
-    this.setAttribute("overflow-x--mobile", t);
-  }
-  get overflowXTablet() {
-    return this.getAttribute("overflow-x--tablet");
-  }
-  set overflowXTablet(t) {
-    this.setAttribute("overflow-x--tablet", t);
-  }
-  get overflowXLaptop() {
-    return this.getAttribute("overflow-x--laptop");
-  }
-  set overflowXLaptop(t) {
-    this.setAttribute("overflow-x--laptop", t);
-  }
-  get overflowXDesktop() {
-    return this.getAttribute("overflow-x--desktop");
-  }
-  set overflowXDesktop(t) {
-    this.setAttribute("overflow-x--desktop", t);
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(".flex-container");
-  }
-}
-customElements.get("px-stack") || customElements.define("px-stack", l);
-class C extends l {
-  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", C);
-class $ extends l {
-  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", $);
-class S extends HTMLElement {
-  constructor() {
-    super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
-  }
-  static get observedAttributes() {
-    return ["grow", "nogap"];
-  }
-  attributeChangedCallback(t, i, e) {
-    t === "grow" && (this.growValue = e || "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.resizeObserver = new ResizeObserver(() => {
-      this.handleSizeChange();
-    }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
-  }
-  disconnectedCallback() {
-    var t;
-    (t = this.resizeObserver) == null || t.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
-  }
-  get grow() {
-    return this.getAttribute("grow");
-  }
-  set grow(t) {
-    this.setAttribute("grow", t);
-  }
-  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() {
-    const t = this.getBoundingClientRect(), i = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
-    this.isZeroSized !== i && (this.isZeroSized = i, 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(t) {
-    t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
-  }
-}
-customElements.get("px-spacer") || customElements.define("px-spacer", S);
-const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", h = new CSSStyleSheet();
-h.replaceSync(j);
-class z extends d {
-  constructor() {
-    super(h), this.template = (t) => `
+import { AttributeBreakpointHandlerDelegate as e, WithExtraAttributes as t, backgroundColorValues as n, checkName as r, gapValues as i, log as a, propertyToAttributeSetter as o, renderTemplate as s } from "@proximus/lavender-common";
+//#region src/Stack.css?inline
+var c = ":host{--host-gap--mobile:var(--px-spacing-none-mobile);--host-gap--tablet:var(--px-spacing-none-tablet);--host-gap--laptop:var(--px-spacing-none-desktop);--host-gap--desktop:var(--px-spacing-none-desktop);--overflow-x-all:visible;--overflow-x-all-mobile:initial;--overflow-x-all-tablet:initial;--overflow-x-all-laptop:initial;--overflow-x-all-desktop:initial;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{--flex-direction--mobile-value:row;--flex-direction--tablet-value:row;--flex-direction--laptop-value:row;--flex-direction--desktop-value:row;--flex-gap--mobile-value:var(--px-spacing-none-mobile);--flex-gap--tablet-value:var(--px-spacing-none-tablet);--flex-gap--laptop-value:var(--px-spacing-none-desktop);--flex-gap--desktop-value:var(--px-spacing-none-desktop);--flex-align-items--mobile-value:stretch;--flex-align-items--tablet-value:stretch;--flex-align-items--laptop-value:stretch;--flex-align-items--desktop-value:stretch;--flex-justify-content--mobile-value:flex-start;--flex-justify-content--tablet-value:flex-start;--flex-justify-content--laptop-value:flex-start;--flex-justify-content--desktop-value:flex-start;--flex-wrap--mobile-value:nowrap;--flex-wrap--tablet-value:nowrap;--flex-wrap--laptop-value:nowrap;--flex-wrap--desktop-value:nowrap;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))}}:host(px-vstack) .flex-container{--flex-direction--mobile-value:column!important;--flex-direction--tablet-value:column!important;--flex-direction--laptop-value:column!important;--flex-direction--desktop-value:column!important}:host(px-hstack) .flex-container{--flex-direction--mobile-value:row!important;--flex-direction--tablet-value:row!important;--flex-direction--laptop-value:row!important;--flex-direction--desktop-value:row!important}", l = new CSSStyleSheet();
+l.replaceSync(c);
+var u = document.createElement("template");
+u.innerHTML = "<div class=\"flex-container\"><slot></slot></div>";
+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 n extends t {
+	constructor() {
+		super(l), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.shadowRoot.firstChild || this.shadowRoot.appendChild(document.importNode(u.content, !0));
+	}
+	connectedCallback() {}
+	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, i);
+				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, i) {
+		r(i, n) ? this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n) : a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
+	}
+	updateFlexProperties(e, t, r, i) {
+		r !== null && !this.checkName(i, r) && a(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
+		let o = e.indexOf("--");
+		if (o === -1) for (let t of n.breakpoints) this.getAttribute(`${e}--${t}`) || this.updateStyle(e, t, r, i);
+		else {
+			let t = e.slice(0, o), n = e.slice(o + 2);
+			this.updateStyle(t, n, r || this.getAttribute(t), i);
+		}
+	}
+	updateStyle(e, t, n, r) {
+		let i = `--flex-${e}--${t}-value`, a = e === "gap";
+		if (!n) this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
+		else if (a && r && r.includes(n)) {
+			let e = `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`;
+			this.$el.style.setProperty(i, e), this.style.setProperty(`--host-gap--${t}`, e);
+		} else this.$el.style.setProperty(i, n);
+	}
+	static {
+		this.breakpoints = [
+			"mobile",
+			"tablet",
+			"laptop",
+			"desktop"
+		];
+	}
+	get direction() {
+		return this.getAttribute("direction") ?? "row";
+	}
+	set direction(e) {
+		o(this, "direction", e);
+	}
+	get directionMobile() {
+		return this.getAttribute("direction--mobile");
+	}
+	set directionMobile(e) {
+		o(this, "direction--mobile", e);
+	}
+	get directionTablet() {
+		return this.getAttribute("direction--tablet");
+	}
+	set directionTablet(e) {
+		o(this, "direction--tablet", e);
+	}
+	get directionLaptop() {
+		return this.getAttribute("direction--laptop");
+	}
+	set directionLaptop(e) {
+		o(this, "direction--laptop", e);
+	}
+	get directionDesktop() {
+		return this.getAttribute("direction--desktop");
+	}
+	set directionDesktop(e) {
+		o(this, "direction--desktop", e);
+	}
+	get gap() {
+		return this.getAttribute("gap") ?? "none";
+	}
+	set gap(e) {
+		o(this, "gap", e);
+	}
+	get gapMobile() {
+		return this.getAttribute("gap--mobile");
+	}
+	set gapMobile(e) {
+		o(this, "gap--mobile", e);
+	}
+	get gapTablet() {
+		return this.getAttribute("gap--tablet");
+	}
+	set gapTablet(e) {
+		o(this, "gap--tablet", e);
+	}
+	get gapLaptop() {
+		return this.getAttribute("gap--laptop");
+	}
+	set gapLaptop(e) {
+		o(this, "gap--laptop", e);
+	}
+	get gapDesktop() {
+		return this.getAttribute("gap--desktop");
+	}
+	set gapDesktop(e) {
+		o(this, "gap--desktop", e);
+	}
+	get justifyContent() {
+		return this.getAttribute("justify-content") ?? "flex-start";
+	}
+	set justifyContent(e) {
+		o(this, "justify-content", e);
+	}
+	get justifyContentMobile() {
+		return this.getAttribute("justify-content--mobile");
+	}
+	set justifyContentMobile(e) {
+		o(this, "justify-content--mobile", e);
+	}
+	get justifyContentTablet() {
+		return this.getAttribute("justify-content--tablet");
+	}
+	set justifyContentTablet(e) {
+		o(this, "justify-content--tablet", e);
+	}
+	get justifyContentLaptop() {
+		return this.getAttribute("justify-content--laptop");
+	}
+	set justifyContentLaptop(e) {
+		o(this, "justify-content--laptop", e);
+	}
+	get justifyContentDesktop() {
+		return this.getAttribute("justify-content--desktop");
+	}
+	set justifyContentDesktop(e) {
+		o(this, "justify-content--desktop", e);
+	}
+	get alignItems() {
+		return this.getAttribute("align-items") ?? "stretch";
+	}
+	set alignItems(e) {
+		o(this, "align-items", e);
+	}
+	get alignItemsMobile() {
+		return this.getAttribute("align-items--mobile");
+	}
+	set alignItemsMobile(e) {
+		o(this, "align-items--mobile", e);
+	}
+	get alignItemsTablet() {
+		return this.getAttribute("align-items--tablet");
+	}
+	set alignItemsTablet(e) {
+		o(this, "align-items--tablet", e);
+	}
+	get alignItemsLaptop() {
+		return this.getAttribute("align-items--laptop");
+	}
+	set alignItemsLaptop(e) {
+		o(this, "align-items--laptop", e);
+	}
+	get alignItemsDesktop() {
+		return this.getAttribute("align-items--desktop");
+	}
+	set alignItemsDesktop(e) {
+		o(this, "align-items--desktop", e);
+	}
+	get wrap() {
+		return this.getAttribute("wrap") ?? "nowrap";
+	}
+	set wrap(e) {
+		o(this, "wrap", e);
+	}
+	get wrapMobile() {
+		return this.getAttribute("wrap--mobile");
+	}
+	set wrapMobile(e) {
+		o(this, "wrap--mobile", e);
+	}
+	get wrapTablet() {
+		return this.getAttribute("wrap--tablet");
+	}
+	set wrapTablet(e) {
+		o(this, "wrap--tablet", e);
+	}
+	get wrapLaptop() {
+		return this.getAttribute("wrap--laptop");
+	}
+	set wrapLaptop(e) {
+		o(this, "wrap--laptop", e);
+	}
+	get wrapDesktop() {
+		return this.getAttribute("wrap--desktop");
+	}
+	set wrapDesktop(e) {
+		o(this, "wrap--desktop", e);
+	}
+	get overflowX() {
+		return this.getAttribute("overflow-x") ?? "visible";
+	}
+	set overflowX(e) {
+		o(this, "overflow-x", e);
+	}
+	get overflowXMobile() {
+		return this.getAttribute("overflow-x--mobile");
+	}
+	set overflowXMobile(e) {
+		o(this, "overflow-x--mobile", e);
+	}
+	get overflowXTablet() {
+		return this.getAttribute("overflow-x--tablet");
+	}
+	set overflowXTablet(e) {
+		o(this, "overflow-x--tablet", e);
+	}
+	get overflowXLaptop() {
+		return this.getAttribute("overflow-x--laptop");
+	}
+	set overflowXLaptop(e) {
+		o(this, "overflow-x--laptop", e);
+	}
+	get overflowXDesktop() {
+		return this.getAttribute("overflow-x--desktop");
+	}
+	set overflowXDesktop(e) {
+		o(this, "overflow-x--desktop", e);
+	}
+	get $el() {
+		return this.shadowRoot.firstElementChild;
+	}
+};
+customElements.get("px-stack") || customElements.define("px-stack", g);
+var _ = (e) => e === "direction" || e.startsWith("direction--"), v = class extends g {
+	get direction() {
+		return "column";
+	}
+	set direction(e) {
+		o(this, "direction", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		_(e) || super.attributeChangedCallback(e, t, n);
+	}
+};
+customElements.get("px-vstack") || customElements.define("px-vstack", v);
+var y = class extends g {
+	get direction() {
+		return "row";
+	}
+	set direction(e) {
+		o(this, "direction", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		_(e) || super.attributeChangedCallback(e, t, n);
+	}
+};
+customElements.get("px-hstack") || customElements.define("px-hstack", y);
+//#endregion
+//#region src/Spacer.ts
+var b = 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", b);
+//#endregion
+//#region src/Page.css?inline
+var x = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", S = new CSSStyleSheet();
+S.replaceSync(x);
+var C = class extends t {
+	constructor() {
+		super(S), this.template = () => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -457,15 +460,6 @@ class z extends d {
             <px-spacer></px-spacer>
           </px-hstack>
         </px-container>
-        ${t ? ` <px-hstack>
-        <px-spacer></px-spacer>
-        <px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
-          <px-vstack gap="s">
-            <slot name="image-sticky-container"></slot>
-          </px-vstack>
-        </px-container>
-        <px-spacer></px-spacer>
-      </px-hstack>` : ""}
         <px-container
           id="body-container"
           id="main"
@@ -522,111 +516,93 @@ class z extends d {
         </px-container>
       </px-vstack>
     </px-container>
-  `, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
-  }
-  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 $imageStickySlot() {
-    return this.querySelector('*[slot="image-sticky-container"]');
-  }
-  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(t) {
-    this.setAttribute("padding-vertical", t);
-  }
-  set paddingHorizontal(t) {
-    this.setAttribute("padding-horizontal", t);
-  }
-  get gap() {
-    return this.getAttribute("gap");
-  }
-  connectedCallback() {
-    this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
-  }
-  attributeChangedCallback(t, i, e) {
-    if (i !== e)
-      switch (t) {
-        case "background-image":
-          this.$imageContainer.setAttribute("background-image", e);
-          break;
-        case "gap":
-          this.$bodyVStackContainer.setAttribute("gap", e);
-          break;
-        case "background-color":
-          this.$bodyContainer.setAttribute(
-            "background-color",
-            x.indexOf(e) > 0 ? e : "none"
-          );
-          break;
-        case "padding-vertical":
-          this.handlePaddingVerticalChange(e);
-          break;
-        case "padding-horizontal":
-          this.handlePaddingHorizontalChange(e);
-          break;
-        default:
-          super.attributeChangedCallback(t, i, e);
-      }
-  }
-  handlePaddingVerticalChange(t) {
-    this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
-  }
-  handlePaddingHorizontalChange(t) {
-    this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
-  }
-}
-customElements.get("px-page") === void 0 && customElements.define("px-page", z);
-export {
-  $ as HStack,
-  z as Page,
-  S as Spacer,
-  l as Stack,
-  C as VStack,
-  k as alignItemsValues,
-  v as directionValues,
-  w as justifyContentValues,
-  A as overflowValues,
-  y as wrapValues
+  `, s(this.shadowRoot, 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, r) {
+		if (t !== r) switch (e) {
+			case "background-image":
+				this.$imageContainer.setAttribute("background-image", r);
+				break;
+			case "gap":
+				this.$bodyVStackContainer.setAttribute("gap", r);
+				break;
+			case "background-color":
+				this.$bodyContainer.setAttribute("background-color", n.indexOf(r) > 0 ? r : "none");
+				break;
+			case "padding-vertical":
+				this.handlePaddingVerticalChange(r);
+				break;
+			case "padding-horizontal":
+				this.handlePaddingHorizontalChange(r);
+				break;
+			default: super.attributeChangedCallback(e, t, r);
+		}
+	}
+	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", C);
+//#endregion
+export { y as HStack, C as Page, b as Spacer, g as Stack, v as VStack, f as alignItemsValues, d as directionValues, p as justifyContentValues, h as overflowValues, m as wrapValues };