@proximus/lavender-header 1.0.0-alpha.1

package/dist/index.js

@@ -0,0 +1,987 @@
+import { PxElement as g, shadowValues as y, noBorderRadiusValues as A, borderRadiusValues as $, borderValues as S, paddingValues as z, gradientValues as L, bgColorValues as b, WithFlexAttributes as c } from "@proximus/lavender-common";
+import "@proximus/lavender-layout";
+const w = '.container{font-family:var(--px-font-family);background-color:var(--background-color);background:var(--background-gradient);border-radius:var(--px-radius-main);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var( --background-color, var(--px-color-bg-container-rich-default) )}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.padding-block-2xs{padding-block:var(--px-padding-2xs)}.padding-block-xs{padding-block:var(--px-padding-xs)}.padding-block-s{padding-block:var(--px-padding-s)}.padding-block-m{padding-block:var(--px-padding-m)}.padding-block-l{padding-block:var(--px-padding-l)}.padding-block-xl{padding-block:var(--px-padding-xl)}.padding-block-none{padding-block:var(--px-padding-none)}.padding-inline-2xs{padding-inline:var(--px-padding-2xs)}.padding-inline-xs{padding-inline:var(--px-padding-xs)}.padding-inline-s{padding-inline:var(--px-padding-s)}.padding-inline-m{padding-inline:var(--px-padding-m)}.padding-inline-l{padding-inline:var(--px-padding-l)}.padding-inline-xl{padding-inline:var(--px-padding-xl)}.padding-inline-none{padding-inline:var(--px-padding-none)}.padding-top-2xs{padding-top:var(--px-padding-2xs)}.padding-top-xs{padding-top:var(--px-padding-xs)}.padding-top-s{padding-top:var(--px-padding-s)}.padding-top-m{padding-top:var(--px-padding-m)}.padding-top-l{padding-top:var(--px-padding-l)}.padding-top-xl{padding-top:var(--px-padding-xl)}.padding-top-none{padding-top:var(--px-padding-none)}.padding-right-2xs{padding-right:var(--px-padding-2xs)}.padding-right-xs{padding-right:var(--px-padding-xs)}.padding-right-s{padding-right:var(--px-padding-s)}.padding-right-m{padding-right:var(--px-padding-m)}.padding-right-l{padding-right:var(--px-padding-l)}.padding-right-xl{padding-right:var(--px-padding-xl)}.padding-right-none{padding-right:var(--px-padding-none)}.padding-bottom-2xs{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs{padding-bottom:var(--px-padding-xs)}.padding-bottom-s{padding-bottom:var(--px-padding-s)}.padding-bottom-m{padding-bottom:var(--px-padding-m)}.padding-bottom-l{padding-bottom:var(--px-padding-l)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl)}.padding-bottom-none{padding-bottom:var(--px-padding-none)}.padding-left-2xs{padding-left:var(--px-padding-2xs)}.padding-left-xs{padding-left:var(--px-padding-xs)}.padding-left-s{padding-left:var(--px-padding-s)}.padding-left-m{padding-left:var(--px-padding-m)}.padding-left-l{padding-left:var(--px-padding-l)}.padding-left-xl{padding-left:var(--px-padding-xl)}.padding-left-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border{border:var(--px-border-m) solid var(--px-color-border-main-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:var(--px-shadow-none)}.box-shadow-s{box-shadow:var(--px-shadow-s)}.box-shadow-m{box-shadow:var(--px-shadow-m)}.box-shadow-l{box-shadow:var(--px-shadow-l)}.box-shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-gradient--mobile, var(--background-gradient) )}.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.padding-top-l{padding-top:var(--px-padding-l-mobile)}.padding-top-xl{padding-top:var(--px-padding-xl-mobile)}.padding-right-l{padding-right:var(--px-padding-l-mobile)}.padding-right-xl{padding-right:var(--px-padding-xl-mobile)}.padding-bottom-l{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.padding-left-l{padding-left:var(--px-padding-l-mobile)}.padding-left-xl{padding-left:var(--px-padding-xl-mobile)}.padding-2xs--mobile{padding:var(--px-padding-2xs)}.padding-xs--mobile{padding:var(--px-padding-xs)}.padding-s--mobile{padding:var(--px-padding-s)}.padding-m--mobile{padding:var(--px-padding-m)}.padding-l--mobile{padding:var(--px-padding-l-mobile)}.padding-xl--mobile{padding:var(--px-padding-xl-mobile)}.padding-none--mobile{padding:var(--px-padding-none)}.padding-block-2xs--mobile{padding-block:var(--px-padding-2xs)}.padding-block-xs--mobile{padding-block:var(--px-padding-xs)}.padding-block-s--mobile{padding-block:var(--px-padding-s)}.padding-block-m--mobile{padding-block:var(--px-padding-m)}.padding-block-l--mobile{padding-block:var(--px-padding-l-mobile)}.padding-block-xl--mobile{padding-block:var(--px-padding-xl-mobile)}.padding-block-none--mobile{padding-block:var(--px-padding-none)}.padding-inline-2xs--mobile{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--mobile{padding-inline:var(--px-padding-xs)}.padding-inline-s--mobile{padding-inline:var(--px-padding-s)}.padding-inline-m--mobile{padding-inline:var(--px-padding-m)}.padding-inline-l--mobile{padding-inline:var(--px-padding-l-mobile)}.padding-inline-xl--mobile{padding-inline:var(--px-padding-xl-mobile)}.padding-inline-none--mobile{padding-inline:var(--px-padding-none)}.padding-top-2xs--mobile{padding-top:var(--px-padding-2xs)}.padding-top-xs--mobile{padding-top:var(--px-padding-xs)}.padding-top-s--mobile{padding-top:var(--px-padding-s)}.padding-top-m--mobile{padding-top:var(--px-padding-m)}.padding-top-l--mobile{padding-top:var(--px-padding-l-mobile)}.padding-top-xl--mobile{padding-top:var(--px-padding-xl-mobile)}.padding-top-none--mobile{padding-top:var(--px-padding-none)}.padding-right-2xs--mobile{padding-right:var(--px-padding-2xs)}.padding-right-xs--mobile{padding-right:var(--px-padding-xs)}.padding-right-s--mobile{padding-right:var(--px-padding-s)}.padding-right-m--mobile{padding-right:var(--px-padding-m)}.padding-right-l--mobile{padding-right:var(--px-padding-l-mobile)}.padding-right-xl--mobile{padding-right:var(--px-padding-xl-mobile)}.padding-right-none--mobile{padding-right:var(--px-padding-none)}.padding-bottom-2xs--mobile{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--mobile{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--mobile{padding-bottom:var(--px-padding-s)}.padding-bottom-m--mobile{padding-bottom:var(--px-padding-m)}.padding-bottom-l--mobile{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl--mobile{padding-bottom:var(--px-padding-xl-mobile)}.padding-bottom-none--mobile{padding-bottom:var(--px-padding-none)}.padding-left-2xs--mobile{padding-left:var(--px-padding-2xs)}.padding-left-xs--mobile{padding-left:var(--px-padding-xs)}.padding-left-s--mobile{padding-left:var(--px-padding-s)}.padding-left-m--mobile{padding-left:var(--px-padding-m)}.padding-left-l--mobile{padding-left:var(--px-padding-l-mobile)}.padding-left-xl--mobile{padding-left:var(--px-padding-xl-mobile)}.padding-left-none--mobile{padding-left:var(--px-padding-none)}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-gradient--tablet, var(--background-gradient) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.padding-2xs--tablet{padding:var(--px-padding-2xs)}.padding-xs--tablet{padding:var(--px-padding-xs)}.padding-s--tablet{padding:var(--px-padding-s)}.padding-m--tablet{padding:var(--px-padding-m)}.padding-l--tablet{padding:var(--px-padding-l)}.padding-xl--tablet{padding:var(--px-padding-xl)}.padding-none--tablet{padding:var(--px-padding-none)}.padding-block-2xs--tablet{padding-block:var(--px-padding-2xs)}.padding-block-xs--tablet{padding-block:var(--px-padding-xs)}.padding-block-s--tablet{padding-block:var(--px-padding-s)}.padding-block-m--tablet{padding-block:var(--px-padding-m)}.padding-block-l--tablet{padding-block:var(--px-padding-l)}.padding-block-xl--tablet{padding-block:var(--px-padding-xl)}.padding-block-none--tablet{padding-block:var(--px-padding-none)}.padding-inline-2xs--tablet{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--tablet{padding-inline:var(--px-padding-xs)}.padding-inline-s--tablet{padding-inline:var(--px-padding-s)}.padding-inline-m--tablet{padding-inline:var(--px-padding-m)}.padding-inline-l--tablet{padding-inline:var(--px-padding-l)}.padding-inline-xl--tablet{padding-inline:var(--px-padding-xl)}.padding-inline-none--tablet{padding-inline:var(--px-padding-none)}.padding-top-2xs--tablet{padding-top:var(--px-padding-2xs)}.padding-top-xs--tablet{padding-top:var(--px-padding-xs)}.padding-top-s--tablet{padding-top:var(--px-padding-s)}.padding-top-m--tablet{padding-top:var(--px-padding-m)}.padding-top-l--tablet{padding-top:var(--px-padding-l)}.padding-top-xl--tablet{padding-top:var(--px-padding-xl)}.padding-top-none--tablet{padding-top:var(--px-padding-none)}.padding-right-2xs--tablet{padding-right:var(--px-padding-2xs)}.padding-right-xs--tablet{padding-right:var(--px-padding-xs)}.padding-right-s--tablet{padding-right:var(--px-padding-s)}.padding-right-m--tablet{padding-right:var(--px-padding-m)}.padding-right-l--tablet{padding-right:var(--px-padding-l)}.padding-right-xl--tablet{padding-right:var(--px-padding-xl)}.padding-right-none--tablet{padding-right:var(--px-padding-none)}.padding-bottom-2xs--tablet{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--tablet{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--tablet{padding-bottom:var(--px-padding-s)}.padding-bottom-m--tablet{padding-bottom:var(--px-padding-m)}.padding-bottom-l--tablet{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--tablet{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--tablet{padding-bottom:var(--px-padding-none)}.padding-left-2xs--tablet{padding-left:var(--px-padding-2xs)}.padding-left-xs--tablet{padding-left:var(--px-padding-xs)}.padding-left-s--tablet{padding-left:var(--px-padding-s)}.padding-left-m--tablet{padding-left:var(--px-padding-m)}.padding-left-l--tablet{padding-left:var(--px-padding-l)}.padding-left-xl--tablet{padding-left:var(--px-padding-xl)}.padding-left-none--tablet{padding-left:var(--px-padding-none)}}@media only screen and (min-width: 1025px){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-gradient--laptop, var(--background-gradient) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}.padding-2xs--laptop{padding:var(--px-padding-2xs)}.padding-xs--laptop{padding:var(--px-padding-xs)}.padding-s--laptop{padding:var(--px-padding-s)}.padding-m--laptop{padding:var(--px-padding-m)}.padding-l--laptop{padding:var(--px-padding-l)}.padding-xl--laptop{padding:var(--px-padding-xl)}.padding-none--laptop{padding:var(--px-padding-none)}.padding-block-2xs--laptop{padding-block:var(--px-padding-2xs)}.padding-block-xs--laptop{padding-block:var(--px-padding-xs)}.padding-block-s--laptop{padding-block:var(--px-padding-s)}.padding-block-m--laptop{padding-block:var(--px-padding-m)}.padding-block-l--laptop{padding-block:var(--px-padding-l)}.padding-block-xl--laptop{padding-block:var(--px-padding-xl)}.padding-block-none--laptop{padding-block:var(--px-padding-none)}.padding-inline-2xs--laptop{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--laptop{padding-inline:var(--px-padding-xs)}.padding-inline-s--laptop{padding-inline:var(--px-padding-s)}.padding-inline-m--laptop{padding-inline:var(--px-padding-m)}.padding-inline-l--laptop{padding-inline:var(--px-padding-l)}.padding-inline-xl--laptop{padding-inline:var(--px-padding-xl)}.padding-inline-none--laptop{padding-inline:var(--px-padding-none)}.padding-top-2xs--laptop{padding-top:var(--px-padding-2xs)}.padding-top-xs--laptop{padding-top:var(--px-padding-xs)}.padding-top-s--laptop{padding-top:var(--px-padding-s)}.padding-top-m--laptop{padding-top:var(--px-padding-m)}.padding-top-l--laptop{padding-top:var(--px-padding-l)}.padding-top-xl--laptop{padding-top:var(--px-padding-xl)}.padding-top-none--laptop{padding-top:var(--px-padding-none)}.padding-right-2xs--laptop{padding-right:var(--px-padding-2xs)}.padding-right-xs--laptop{padding-right:var(--px-padding-xs)}.padding-right-s--laptop{padding-right:var(--px-padding-s)}.padding-right-m--laptop{padding-right:var(--px-padding-m)}.padding-right-l--laptop{padding-right:var(--px-padding-l)}.padding-right-xl--laptop{padding-right:var(--px-padding-xl)}.padding-right-none--laptop{padding-right:var(--px-padding-none)}.padding-bottom-2xs--laptop{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--laptop{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--laptop{padding-bottom:var(--px-padding-s)}.padding-bottom-m--laptop{padding-bottom:var(--px-padding-m)}.padding-bottom-l--laptop{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--laptop{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--laptop{padding-bottom:var(--px-padding-none)}.padding-left-2xs--laptop{padding-left:var(--px-padding-2xs)}.padding-left-xs--laptop{padding-left:var(--px-padding-xs)}.padding-left-s--laptop{padding-left:var(--px-padding-s)}.padding-left-m--laptop{padding-left:var(--px-padding-m)}.padding-left-l--laptop{padding-left:var(--px-padding-l)}.padding-left-xl--laptop{padding-left:var(--px-padding-xl)}.padding-left-none--laptop{padding-left:var(--px-padding-none)}}', u = new CSSStyleSheet();
+u.replaceSync(w);
+const I = ["anchor-right", "anchor-left", "anchor-full"], C = ["", "cover", "contain", "default"], p = class p extends g {
+  constructor() {
+    super(u), this.template = () => `<div class="container">
+    <slot name="anchor-left"></slot>
+    <slot name="anchor-right"></slot>
+    <slot name="anchor-full"></slot>
+    <slot></slot>
+    </div>`, this.onWindowResize = () => {
+      this.hasAttribute("background-image") && this.loadImg("background-image", this.getAttribute("background-image")), this.hasAttribute("background-image--mobile") && this.loadImg(
+        "background-image--mobile",
+        this.getAttribute("background-image--mobile")
+      ), this.hasAttribute("background-image--tablet") && this.loadImg(
+        "background-image--tablet",
+        this.getAttribute("background-image--tablet")
+      ), this.hasAttribute("background-image--laptop") && this.loadImg(
+        "background-image--laptop",
+        this.getAttribute("background-image--laptop")
+      );
+    }, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "padding",
+      "padding-inline",
+      "padding-block",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "padding--mobile",
+      "padding-inline--mobile",
+      "padding-block--mobile",
+      "padding-top--mobile",
+      "padding-right--mobile",
+      "padding-bottom--mobile",
+      "padding-left--mobile",
+      "padding--tablet",
+      "padding-inline--tablet",
+      "padding-block--tablet",
+      "padding-top--tablet",
+      "padding-right--tablet",
+      "padding-bottom--tablet",
+      "padding-left--tablet",
+      "padding--laptop",
+      "padding-inline--laptop",
+      "padding-block--laptop",
+      "padding-top--laptop",
+      "padding-right--laptop",
+      "padding-bottom--laptop",
+      "padding-left--laptop",
+      "border",
+      "border-radius",
+      "no-border-radius",
+      "no-border-radius--mobile",
+      "no-border-radius--tablet",
+      "no-border-radius--laptop",
+      "background-color",
+      "background-color--mobile",
+      "background-color--tablet",
+      "background-color--laptop",
+      "background-gradient",
+      "background-gradient--mobile",
+      "background-gradient--tablet",
+      "background-gradient--laptop",
+      "background-image",
+      "background-image--mobile",
+      "background-image--tablet",
+      "background-image--laptop",
+      "background-size",
+      "background-position",
+      "box-shadow",
+      "inverted"
+    ];
+  }
+  get padding() {
+    return this.getAttribute("padding");
+  }
+  set padding(t) {
+    this.setAttribute("padding", t);
+  }
+  get paddingBlock() {
+    return this.getAttribute("padding-block");
+  }
+  set paddingBlock(t) {
+    this.setAttribute("padding-block", t);
+  }
+  get paddingInline() {
+    return this.getAttribute("padding-inline");
+  }
+  set paddingInline(t) {
+    this.setAttribute("padding-inline", t);
+  }
+  get paddingTop() {
+    return this.getAttribute("padding-top");
+  }
+  set paddingTop(t) {
+    this.setAttribute("padding-top", t);
+  }
+  get paddingRight() {
+    return this.getAttribute("padding-right");
+  }
+  set paddingRight(t) {
+    this.setAttribute("padding-right", t);
+  }
+  get paddingBottom() {
+    return this.getAttribute("padding-bottom");
+  }
+  set paddingBottom(t) {
+    this.setAttribute("padding-bottom", t);
+  }
+  get paddingLeft() {
+    return this.getAttribute("padding-left");
+  }
+  set paddingLeft(t) {
+    this.setAttribute("padding-left", t);
+  }
+  get paddingMobile() {
+    return this.getAttribute("padding--mobile");
+  }
+  set paddingMobile(t) {
+    this.setAttribute("padding--mobile", t);
+  }
+  get paddingBlockMobile() {
+    return this.getAttribute("padding-block--mobile");
+  }
+  set paddingBlockMobile(t) {
+    this.setAttribute("padding-block--mobile", t);
+  }
+  get paddingInlineMobile() {
+    return this.getAttribute("padding-inline--mobile");
+  }
+  set paddingInlineMobile(t) {
+    this.setAttribute("padding-inline--mobile", t);
+  }
+  get paddingTopMobile() {
+    return this.getAttribute("padding-top--mobile");
+  }
+  set paddingTopMobile(t) {
+    this.setAttribute("padding-top--mobile", t);
+  }
+  get paddingRightMobile() {
+    return this.getAttribute("padding-right--mobile");
+  }
+  set paddingRightMobile(t) {
+    this.setAttribute("padding-right--mobile", t);
+  }
+  get paddingBottomMobile() {
+    return this.getAttribute("padding-bottom--mobile");
+  }
+  set paddingBottomMobile(t) {
+    this.setAttribute("padding-bottom--mobile", t);
+  }
+  get paddingLeftMobile() {
+    return this.getAttribute("padding-left--mobile");
+  }
+  set paddingLeftMobile(t) {
+    this.setAttribute("padding-left--mobile", t);
+  }
+  get paddingTablet() {
+    return this.getAttribute("padding--tablet");
+  }
+  set paddingTablet(t) {
+    this.setAttribute("padding--tablet", t);
+  }
+  get paddingBlockTablet() {
+    return this.getAttribute("padding-block--tablet");
+  }
+  set paddingBlockTablet(t) {
+    this.setAttribute("padding-block--tablet", t);
+  }
+  get paddingInlineTablet() {
+    return this.getAttribute("padding-inline--tablet");
+  }
+  set paddingInlineTablet(t) {
+    this.setAttribute("padding-inline--tablet", t);
+  }
+  get paddingTopTablet() {
+    return this.getAttribute("padding-top--tablet");
+  }
+  set paddingTopTablet(t) {
+    this.setAttribute("padding-top--tablet", t);
+  }
+  get paddingRightTablet() {
+    return this.getAttribute("padding-right--tablet");
+  }
+  set paddingRightTablet(t) {
+    this.setAttribute("padding-right--tablet", t);
+  }
+  get paddingBottomTablet() {
+    return this.getAttribute("padding-bottom--tablet");
+  }
+  set paddingBottomTablet(t) {
+    this.setAttribute("padding-bottom--tablet", t);
+  }
+  get paddingLeftTablet() {
+    return this.getAttribute("padding-left--tablet");
+  }
+  set paddingLeftTablet(t) {
+    this.setAttribute("padding-left--tablet", t);
+  }
+  get paddingLaptop() {
+    return this.getAttribute("padding--laptop");
+  }
+  set paddingLaptop(t) {
+    this.setAttribute("padding--laptop", t);
+  }
+  get paddingBlockLaptop() {
+    return this.getAttribute("padding-block--laptop");
+  }
+  set paddingBlockLaptop(t) {
+    this.setAttribute("padding-block--laptop", t);
+  }
+  get paddingInlineLaptop() {
+    return this.getAttribute("padding-inline--laptop");
+  }
+  set paddingInlineLaptop(t) {
+    this.setAttribute("padding-inline--laptop", t);
+  }
+  get paddingTopLaptop() {
+    return this.getAttribute("padding-top--laptop");
+  }
+  set paddingTopLaptop(t) {
+    this.setAttribute("padding-top--laptop", t);
+  }
+  get paddingRightLaptop() {
+    return this.getAttribute("padding-right--laptop");
+  }
+  set paddingRightLaptop(t) {
+    this.setAttribute("padding-right--laptop", t);
+  }
+  get paddingBottomLaptop() {
+    return this.getAttribute("padding-bottom--laptop");
+  }
+  set paddingBottomLaptop(t) {
+    this.setAttribute("padding-bottom--laptop", t);
+  }
+  get paddingLeftLaptop() {
+    return this.getAttribute("padding-left--laptop");
+  }
+  set paddingLeftLaptop(t) {
+    this.setAttribute("padding-left--laptop", t);
+  }
+  get border() {
+    return this.getAttribute("border");
+  }
+  set border(t) {
+    this.setAttribute("border", t);
+  }
+  get borderRadius() {
+    return this.getAttribute("border-radius");
+  }
+  set borderRadius(t) {
+    this.setAttribute("border-radius", t);
+  }
+  get noBorderRadius() {
+    return this.getAttribute("no-border-radius");
+  }
+  set noBorderRadius(t) {
+    this.setAttribute("no-border-radius", t);
+  }
+  get noBorderRadiusMobile() {
+    return this.getAttribute("no-border-radius--mobile");
+  }
+  set noBorderRadiusMobile(t) {
+    this.setAttribute("no-border-radius--mobile", t);
+  }
+  get noBorderRadiusTablet() {
+    return this.getAttribute("no-border-radius--tablet");
+  }
+  set noBorderRadiusTablet(t) {
+    this.setAttribute("no-border-radius--tablet", t);
+  }
+  get noBorderRadiusLaptop() {
+    return this.getAttribute("no-border-radius--laptop");
+  }
+  set noBorderRadiusLaptop(t) {
+    this.setAttribute("no-border-radius--laptop", t);
+  }
+  get bgColor() {
+    return this.getAttribute("background-color");
+  }
+  set bgColor(t) {
+    this.setAttribute("background-color", t);
+  }
+  get bgColorMobile() {
+    return this.getAttribute("background-color--mobile");
+  }
+  set bgColorMobile(t) {
+    this.setAttribute("background-color--mobile", t);
+  }
+  get bgColorTablet() {
+    return this.getAttribute("background-color--tablet");
+  }
+  set bgColorTablet(t) {
+    this.setAttribute("background-color--tablet", t);
+  }
+  get bgColorLaptop() {
+    return this.getAttribute("background-color--laptop");
+  }
+  set bgColorLaptop(t) {
+    this.setAttribute("background-color--laptop", t);
+  }
+  get gradient() {
+    return this.getAttribute("background-gradient");
+  }
+  set gradient(t) {
+    this.setAttribute("background-gradient", t);
+  }
+  get gradientMobile() {
+    return this.getAttribute("background-gradient--mobile");
+  }
+  set gradientMobile(t) {
+    this.setAttribute("background-gradient--mobile", t);
+  }
+  get gradientTablet() {
+    return this.getAttribute("background-gradient--tablet");
+  }
+  set gradientTablet(t) {
+    this.setAttribute("background-gradient--tablet", t);
+  }
+  get gradientLaptop() {
+    return this.getAttribute("background-gradient--laptop");
+  }
+  set gradientLaptop(t) {
+    this.setAttribute("background-gradient--laptop", t);
+  }
+  get bgImg() {
+    return this.getAttribute("background-image");
+  }
+  set bgImg(t) {
+    this.setAttribute("background-image", t);
+  }
+  get bgImgMobile() {
+    return this.getAttribute("background-image--mobile");
+  }
+  set bgImgMobile(t) {
+    this.setAttribute("background-image--mobile", t);
+  }
+  get bgImgTablet() {
+    return this.getAttribute("background-image--tablet");
+  }
+  set bgImgTablet(t) {
+    this.setAttribute("background-image--tablet", t);
+  }
+  get bgImgLaptop() {
+    return this.getAttribute("background-image--laptop");
+  }
+  set bgImgLaptop(t) {
+    this.setAttribute("background-image--laptop", t);
+  }
+  get bgImgSize() {
+    return this.getAttribute("background-size");
+  }
+  set bgImgSize(t) {
+    this.setAttribute("background-size", t);
+  }
+  get bgImgPosition() {
+    return this.getAttribute("background-position");
+  }
+  set bgImgPosition(t) {
+    this.setAttribute("background-position", t);
+  }
+  get shadow() {
+    return this.getAttribute("box-shadow");
+  }
+  set shadow(t) {
+    this.setAttribute("box-shadow", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  connectedCallback() {
+    var a, i, e, d;
+    super.connectedCallback(), this.style.setProperty(
+      "--background-color",
+      "var(--px-color-bg-container-rich-inverted)"
+    );
+    const t = this.querySelector("[slot]");
+    t && I.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), ((a = this.parentElement) == null ? void 0 : a.getAttribute("align-items")) === "stretch" && (((i = this.parentElement) == null ? void 0 : i.getAttribute("direction")) === "column" ? this.$el.style.width = "100%" : this.$el.style.height = "100%"), (((e = this.parentElement) == null ? void 0 : e.localName) === "px-grid-item" || ((d = this.parentElement) == null ? void 0 : d.localName) === "px-a") && (this.$el.style.height = "100%"), (this.hasAttribute("background-image") || this.hasAttribute("background-image--mobile") || this.hasAttribute("background-image--tablet") || this.hasAttribute("background-image--laptop")) && window.addEventListener("resize", this.onWindowResize);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.onWindowResize);
+  }
+  attributeChangedCallback(t, a, i) {
+    if (a !== i)
+      switch (t) {
+        case "padding":
+        case "padding-block":
+        case "padding-inline":
+        case "padding-top":
+        case "padding-right":
+        case "padding-bottom":
+        case "padding-left":
+        case "padding--mobile":
+        case "padding-block--mobile":
+        case "padding-inline--mobile":
+        case "padding-top--mobile":
+        case "padding-right--mobile":
+        case "padding-bottom--mobile":
+        case "padding-left--mobile":
+        case "padding--tablet":
+        case "padding-block--tablet":
+        case "padding-inline--tablet":
+        case "padding-top--tablet":
+        case "padding-right--tablet":
+        case "padding-bottom--tablet":
+        case "padding-left--tablet":
+        case "padding--laptop":
+        case "padding-block--laptop":
+        case "padding-inline--laptop":
+        case "padding-top--laptop":
+        case "padding-right--laptop":
+        case "padding-bottom--laptop":
+        case "padding-left--laptop":
+          this.updateAttribute(t, a, i, z);
+          break;
+        case "border":
+          this.updateAttribute(t, a, i, S);
+          break;
+        case "border-radius":
+          this.updateAttribute(
+            t,
+            a,
+            i,
+            $
+          );
+          break;
+        case "no-border-radius":
+        case "no-border-radius--mobile":
+        case "no-border-radius--tablet":
+        case "no-border-radius--laptop":
+          this.updateNoBorderRadius(
+            t,
+            a,
+            i,
+            A
+          );
+          break;
+        case "background-color":
+        case "background-color--mobile":
+        case "background-color--tablet":
+        case "background-color--laptop":
+          this.updateBgColor(t, i);
+          break;
+        case "background-gradient":
+        case "background-gradient--mobile":
+        case "background-gradient--tablet":
+        case "background-gradient--laptop":
+          this.updateGradient(t, i);
+          break;
+        case "background-size":
+          this.updateAttribute(t, a, i, C);
+          break;
+        case "background-image":
+        case "background-image--mobile":
+        case "background-image--tablet":
+        case "background-image--laptop":
+          i !== "" && (this.$el.classList.toggle("bgimg"), this.loadImg(t, i));
+          break;
+        case "background-position":
+          i !== null && i !== "" && (this.$el.style.backgroundPosition = i);
+          break;
+        case "box-shadow":
+          this.updateAttribute(t, a, i, y);
+          break;
+        default:
+          super.attributeChangedCallback(t, a, i);
+          break;
+      }
+  }
+  loadImg(t, a) {
+    t === "background-image" ? this.$el.style.backgroundImage = `url("${a}")` : window.matchMedia("only screen and (max-width: 767px)").matches && t === "background-image--mobile" ? this.$el.style.backgroundImage = `url("${a}")` : window.matchMedia(
+      "only screen and (min-width: 768px) and (max-width: 1024px)"
+    ).matches && t === "background-image--tablet" ? this.$el.style.backgroundImage = `url("${a}")` : window.matchMedia("only screen and (min-width: 1025px)").matches && t === "background-image--laptop" && (this.$el.style.backgroundImage = `url("${a}")`);
+  }
+  updateGradient(t, a) {
+    if (this.checkName(L, a)) {
+      const i = this.splitAttrNameFromBreakpoint(t);
+      t = i.attrName;
+      const e = i.breakpoint;
+      this.$el.style.setProperty(
+        `--${t}${e}`,
+        `linear-gradient(var(--px-color-bg-gradient-${a}))`
+      );
+    } else
+      console.error(
+        `${a} is not an allowed background-gradient value for ${this.$el}`
+      );
+  }
+  updateBgColor(t, a) {
+    if (this.checkName(b, a)) {
+      const i = this.splitAttrNameFromBreakpoint(t);
+      t = i.attrName;
+      const e = i.breakpoint, d = this.getAttribute("inverted") !== null ? "inverted" : "default";
+      this.$el.style.setProperty(
+        `--${t}${e}`,
+        `var(--px-color-bg-${a}-${d})`
+      );
+    } else
+      console.error(
+        `${a} is not an allowed ${t} value for ${this.$el}`
+      );
+  }
+  updateNoBorderRadius(t, a, i, e) {
+    if (!this.checkName(e, i))
+      console.error(
+        `${i} is not an allowed ${t} value for ${this.$el}`
+      );
+    else {
+      const d = this.splitAttrNameFromBreakpoint(t);
+      t = d.attrName;
+      const o = d.breakpoint;
+      a !== null && a !== "" && this.$el.classList.toggle(`${t}-${a}${o}`), i !== null && i !== "" && this.$el.classList.toggle(`${t}-${i}${o}`);
+    }
+  }
+  updateAttribute(t, a, i, e) {
+    if (!this.checkName(e, i))
+      console.error(
+        `${i} is not an allowed ${t} value for ${this.$el}`
+      );
+    else {
+      const d = this.splitAttrNameFromBreakpoint(t);
+      t = d.attrName;
+      const o = d.breakpoint;
+      a !== null && a !== "" && this.$el.classList.toggle(`${t}-${a}${o}`), i !== null && i !== "" && this.$el.classList.toggle(`${t}-${i}${o}`);
+    }
+  }
+  splitAttrNameFromBreakpoint(t) {
+    let a = "";
+    if (["--mobile", "--tablet", "--laptop"].some(
+      (i) => t.includes(i)
+    )) {
+      const i = t.split("--");
+      t = i[0], a = `--${i[1]}`;
+    }
+    return { attrName: t, breakpoint: a };
+  }
+  checkName(t, a) {
+    return t.includes(a);
+  }
+};
+p.nativeName = "div";
+let r = p;
+customElements.define("px-container", r);
+const T = ".btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:var(--px-padding-2xs) 0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs) var(--px-padding-s)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-base-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1441px){.btn{font-size:var(--px-text-size-base-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}", R = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,.link:hover{color:var(--px-color-txt-hover-default)}a:focus,.link:focus{outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1441px){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}a:focus,.link:focus{outline-offset:var(--px-offset);outline-width:var(--px-outline)}}', B = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-primary-inverted)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 768px){.patch{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-primary-inverted)}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-body-default)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-default)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}", h = new CSSStyleSheet(), x = new CSSStyleSheet(), v = new CSSStyleSheet();
+h.replaceSync(T);
+x.replaceSync(R);
+v.replaceSync(B);
+const M = [
+  "",
+  "default",
+  "secondary",
+  "tertiary",
+  "link",
+  "patch",
+  "patch-info",
+  "patch-black-friday",
+  "patch-eco"
+], l = class l extends g {
+  constructor() {
+    super(h, x, v), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
+    const t = document.createElement(this.nativeName);
+    t.classList.add("btn"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "variant",
+      "state",
+      "extended",
+      "loading",
+      "shape",
+      "inverted"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.querySelectorAll("px-icon");
+    t && t.forEach((a) => {
+      const i = a.getAttribute("size"), e = a.getAttribute("color");
+      a && (a.addEventListener("click", () => {
+        this.$el.focus();
+      }), i || a.setAttribute("size", "xs"), e || a.setAttribute("color", "inherit"));
+    });
+  }
+  attributeChangedCallback(t, a, i) {
+    if (a !== i)
+      switch (t) {
+        case "variant":
+          this.updateVariant(a, i, M);
+          break;
+        case "state":
+          this.updateState(a, i);
+          break;
+        case "extended":
+          this.updateExtended();
+          break;
+        case "loading":
+          this.updateLoading();
+          break;
+        case "shape":
+          this.updateShape(a, i);
+          break;
+        default:
+          super.attributeChangedCallback(t, a, i);
+          break;
+      }
+  }
+  checkName(t, a) {
+    return !!t.includes(a);
+  }
+  checkClass(t) {
+    if (t.startsWith("patch-")) {
+      const a = t.split(/-(.*)/s);
+      for (const i of a)
+        i != "" && this.$el.classList.toggle(i);
+    } else
+      this.$el.classList.toggle(t);
+  }
+  _toggleClass(t, a) {
+    t !== null && t !== "" && t !== "default" && this.checkClass(t), a !== null && a !== "" && a !== "default" && this.checkClass(a);
+  }
+  updateVariant(t, a, i) {
+    a === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, a), this.checkName(i, a) || console.error(`Bad "variant" value for ${this.$el}`);
+  }
+  updateState(t, a) {
+    const i = ["", "default", "success", "error"];
+    this._toggleClass(t, a), this.checkName(i, a) || console.error(`Bad "sate" value for ${this.$el}`);
+  }
+  updateExtended() {
+    this.$el.classList.toggle("extended");
+  }
+  updateLoading() {
+    const t = this.querySelector("px-spinner");
+    t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
+  }
+  updateShape(t, a) {
+    const i = [
+      "",
+      "default",
+      "bottom-right",
+      "bottom-left",
+      "alternative"
+    ];
+    this._toggleClass(t, a), this.checkName(i, a) || console.error(`Bad "shape" value for ${this.$el}`);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(t) {
+    this.setAttribute("state", t);
+  }
+  get extended() {
+    return this.getAttribute("extended");
+  }
+  set extended(t) {
+    this.setAttribute("extended", t);
+  }
+  get loading() {
+    return this.getAttribute("loading");
+  }
+  set loading(t) {
+    this.setAttribute("loading", t);
+  }
+  get shape() {
+    return this.getAttribute("shape");
+  }
+  set shape(t) {
+    this.setAttribute("shape", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+};
+l.nativeName = "button";
+let n = l;
+customElements.get("px-button") || customElements.define("px-button", n);
+const E = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}", m = new CSSStyleSheet();
+m.replaceSync(E);
+class P extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+    <px-container border-radius="none" padding="none" background-color="${this.bgColor}">
+      <div class="content-wrapper">
+        <px-vstack gap="under-display-vertical">
+          <slot name="heading"></slot>
+          <px-vstack gap="none">
+            <slot></slot>
+          </px-vstack>
+        </px-vstack>
+      </div>
+    </px-container>
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [m];
+  }
+  connectedCallback() {
+    this.querySelector('[slot="heading"]') || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
+  }
+  static get observedAttributes() {
+    return [
+      "background-color",
+      "background-gradient",
+      "background-image",
+      "background-image--mobile",
+      "background-image--tablet",
+      "background-image--laptop",
+      "background-size",
+      "background-position",
+      "padding-block",
+      "padding-top",
+      "padding-bottom"
+    ];
+  }
+  get $container() {
+    return this.shadowRoot.querySelector("px-container");
+  }
+  attributeChangedCallback(t, a, i) {
+    if (a !== i)
+      switch (t) {
+        case "background-color":
+          this.$container.bgColor = b.indexOf(i) > 0 ? i : "container-none";
+          break;
+        case "background-gradient":
+          this.$container.gradient = this.gradient;
+          break;
+        case "background-image":
+          this.$container.bgImg = i;
+          break;
+        case "background-image--mobile":
+          this.$container.bgImgMobile = i;
+          break;
+        case "background-image--tablet":
+          this.$container.bgImgTablet = i;
+          break;
+        case "background-image--laptop":
+          this.$container.bgImgLaptop = i;
+          break;
+        case "background-size":
+          this.$container.bgImgSize = i;
+          break;
+        case "background-position":
+          this.$container.bgImgPosition = i;
+          break;
+        case "padding-block":
+          this.$container.paddingBlock = i;
+          break;
+        case "padding-top":
+          this.$container.paddingTop = i;
+          break;
+        case "padding-bottom":
+          this.$container.paddingBottom = i;
+          break;
+      }
+  }
+  get bgColor() {
+    return this.getAttribute("background-color") || "container-none";
+  }
+  set bgColor(t) {
+    this.setAttribute("background-color", t);
+  }
+  get gradient() {
+    return this.getAttribute("background-gradient");
+  }
+  set gradient(t) {
+    this.setAttribute("background-gradient", t);
+  }
+  get bgImg() {
+    return this.getAttribute("background-image");
+  }
+  set bgImg(t) {
+    this.setAttribute("background-image", t);
+  }
+  get bgImgMobile() {
+    return this.getAttribute("background-image--mobile");
+  }
+  set bgImgMobile(t) {
+    this.setAttribute("background-image--mobile", t);
+  }
+  get bgImgTablet() {
+    return this.getAttribute("background-image--tablet");
+  }
+  set bgImgTablet(t) {
+    this.setAttribute("background-image--tablet", t);
+  }
+  get bgImgLaptop() {
+    return this.getAttribute("background-image--laptop");
+  }
+  set bgImgLaptop(t) {
+    this.setAttribute("background-image--laptop", t);
+  }
+  get bgImgSize() {
+    return this.getAttribute("background-size");
+  }
+  set bgImgSize(t) {
+    this.setAttribute("background-size", t);
+  }
+  get bgImgPosition() {
+    return this.getAttribute("background-position");
+  }
+  set bgImgPosition(t) {
+    this.setAttribute("background-position", t);
+  }
+  get paddingBlock() {
+    return this.getAttribute("padding-block");
+  }
+  set paddingBlock(t) {
+    this.setAttribute("padding-block", t);
+  }
+  get paddingTop() {
+    return this.getAttribute("padding-top");
+  }
+  set paddingTop(t) {
+    this.setAttribute("padding-top", t);
+  }
+  get paddingBottom() {
+    return this.getAttribute("padding-bottom");
+  }
+  set paddingBottom(t) {
+    this.setAttribute("padding-bottom", t);
+  }
+}
+customElements.define("px-section", P);
+const _ = ":host>*{padding:2rem 0;cursor:pointer}button{margin:0;padding:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit;font-family:var(--px-font-family);font-size:1rem}button[aria-expanded=true],button:focus{outline:0;font-weight:700;border-bottom:2px solid var(--px-color-bg-action-primary-default);color:var(--px-color-bg-action-primary-default)}button:hover{font-weight:700;color:var(--px-color-bg-action-primary-default)}px-a{height:100%;display:block}px-a:hover{font-weight:700;color:var(--px-color-bg-action-primary-default)}", k = new CSSStyleSheet();
+k.replaceSync(_);
+class q extends c {
+  constructor() {
+    super(), this.template = () => `${this.getAttribute("href") ? `<px-a variant="no-style" href="${this.getAttribute("href")}">
+          <slot></slot>
+        </px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [k];
+  }
+  static get observedAttributes() {
+    return ["for", "href"];
+  }
+  connectedCallback() {
+    this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y();
+  }
+  attributeChangedCallback(t, a, i) {
+    super.attributeChangedCallback(t, a, i), t === "href" && this.$button && i ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && i && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
+  }
+  setupButtonA11y() {
+    this.$button.setAttribute("tabindex", "0"), this.$button.role = "menuitem", this.$button.ariaExpanded = "false", this.$button.ariaHasPopup = "menu";
+  }
+  get for() {
+    return this.getAttribute("for");
+  }
+  set for(t) {
+    this.setAttribute("for", t);
+  }
+  get checked() {
+    return this.$button.ariaExpanded === "true";
+  }
+  set checked(t) {
+    if (typeof t != "boolean")
+      throw new Error("checked must be a boolean");
+    this.$button.setAttribute("tabindex", t ? "0" : "-1"), this.$button.ariaExpanded = `${!!t}`, this.$button.setAttribute("aria-controls", this.for);
+  }
+  get $button() {
+    return this.shadowRoot.querySelector("button");
+  }
+  get $a() {
+    return this.shadowRoot.querySelector("px-a");
+  }
+}
+customElements.get("px-header-item") || customElements.define("px-header-item", q);
+const F = "#panel-container{position:absolute;left:0;right:0;z-index:2}@media screen and (max-width: 767px){#panel-container{top:0;border-top:none}}#backdrop-filter{position:absolute;display:none;z-index:1;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media screen and (max-width: 767px){slot[name=header-entries]{display:none}}@media screen and (min-width: 768px){px-button-icon{display:none}}", f = new CSSStyleSheet();
+f.replaceSync(F);
+class H extends c {
+  constructor() {
+    var t;
+    super(f), this.template = `
+    <div id="navigation-items-container">
+      <px-section padding-block-mobile="s" padding-block="none"  background-color="container-none">
+          <px-hstack gap-tablet="2rem" gap="3rem" wrap="wrap" align-items="center">
+            <slot name="header-logo"></slot>
+            <slot name="header-entries"></slot>
+            <px-spacer></px-spacer>
+            <px-hstack gap-mobile="none" gap="1rem">
+              <slot name="header-actions"></slot>
+              <px-button-icon>
+                <px-icon name="burger_menu" from="lavender"></px-icon
+              </px-button-icon>
+            </px-hstack>
+          </px-hstack>
+      </px-section>
+      <px-section id="panel-container" background-color="container-weak" padding="none" background-color="container-none">
+          <slot name="header-panels">
+      </px-section>
+      <div id="backdrop-filter"></div>
+      <slot name="main"></slot>
+    </div>
+  `, this.shadowRoot.innerHTML = this.template, this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "navigation", this.internals.ariaOrientation = "horizontal");
+  }
+  connectedCallback() {
+    this.addEventListener("click", (t) => {
+      t.target.closest("px-header-item") && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((a) => {
+        a.checked = !1;
+      }), t.target.checked = !0, this.i11yEnableActions(!1), this.togglePanel(t.target.for));
+    }), this.shadowRoot.addEventListener("click", (t) => {
+      t.target.closest("px-button-icon") && (this.$backdropFilter.style.display = "block", this.$burgerMenu.setAttribute("tabindex", "0"), this.togglePanel("__lavender_mobile_menu"));
+    }), this.addEventListener("section-item-click", (t) => {
+      this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((i) => {
+        i.checked = !1;
+      }), t.detail.for !== "__lavender_mobile_menu" && (this.querySelector(
+        `px-header-item[for="${t.detail.for}"]`
+      ).checked = !0), this.i11yEnableActions(!1), this.togglePanel(t.detail.for);
+    }), this.addEventListener("close-panel", () => {
+      this.hidePanel(), this.i11yEnableActions(!0);
+    }), this.$backdropFilter.addEventListener("click", () => {
+      this.hidePanel(), this.i11yEnableActions(!0);
+    }), this.createMobileMenuPanel();
+  }
+  createMobileMenuPanel() {
+    var a;
+    const t = `
+      <px-mdd name="__lavender_mobile_menu">
+        <span slot="title">Menu</span>
+        <px-mdd-section>
+          ${[...this.$navigationItems].map(
+      (i) => `<px-mdd-section-item for="${i.getAttribute("for")}">${i.innerText}</px-mdd-section-item>`
+    ).join("")}
+          ${[...this.$actionLinks].map(
+      (i) => `<px-a href="${i.href}" slot="footer">${i.innerText}</px-a>`
+    ).join("")}
+      </px-mdd>
+    `;
+    (a = this.$megaDropdowns.item(0)) == null || a.insertAdjacentHTML("beforebegin", t);
+  }
+  i11yEnableActions(t = !0) {
+    this.querySelectorAll('[slot="header-actions"]').forEach(
+      (a) => {
+        if (t) {
+          a.removeAttribute("tabindex");
+          return;
+        }
+        a.setAttribute("tabindex", "-1");
+      }
+    );
+  }
+  togglePanel(t) {
+    this.$megaDropdowns.forEach((a) => {
+      a.name === t && a.hidden && (a.hidden = !a.hidden, t !== "__lavender_mobile_menu" && (this.querySelector(`px-header-item[for="${t}"]`).checked = !a.hidden), document.body.style.overflow = a.hidden ? "auto" : "hidden"), a.name !== t && !a.hidden && (a.hidden = !0);
+    });
+  }
+  hidePanel() {
+    this.$backdropFilter.style.display = "none", this.$navigationItems.forEach((t) => {
+      t.checked = !1, t.$button.setAttribute("tabindex", "0");
+    }), this.$megaDropdowns.forEach((t) => {
+      t.hidden = !0;
+    }), this.i11yEnableActions(!0), document.body.style.overflow = "auto";
+  }
+  get $navigationItems() {
+    return this.querySelectorAll("px-header-item");
+  }
+  get $megaDropdowns() {
+    return this.querySelectorAll("px-mdd");
+  }
+  get $actionLinks() {
+    return this.querySelectorAll("px-action-link");
+  }
+  get $backdropFilter() {
+    return this.shadowRoot.querySelector("#backdrop-filter");
+  }
+  get $burgerMenu() {
+    return this.shadowRoot.querySelector("px-button-icon");
+  }
+}
+customElements.get("px-header") || customElements.define("px-header", H);
+export {
+  H as Header,
+  q as HeaderItem
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-header",
+  "version": "1.0.0-alpha.1",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  },
+  "gitHead": "d5f53c3ede6b6df6fa861f4acc3db916d9d11bd0"
+}