@proximus/lavender-header 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist/index.js

@@ -1,981 +0,0 @@
-import { PxElement as g, boxShadowValues as y, noBorderRadiusValues as A, borderRadiusValues as $, borderValues as S, paddingValues as z, gradientValues as L, backgroundColorValues as b, WithFlexAttributes as c } from "@proximus/lavender-common";
-import "@proximus/lavender-layout";
-const C = '.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);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-default-inverted) )}.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-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color: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-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.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-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.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-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.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(C);
-const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "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.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"
-    ];
-  }
-  connectedCallback() {
-    var a, e, d, i;
-    super.connectedCallback(), this.backgroundColor || (this.backgroundColor = "container-default");
-    const t = this.querySelector("[slot]");
-    t && w.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), ((a = this.parentElement) == null ? void 0 : a.getAttribute("align-items")) === "stretch" && (((e = this.parentElement) == null ? void 0 : e.getAttribute("direction")) === "column" ? this.$el.style.width = "100%" : this.$el.style.height = "100%"), (((d = this.parentElement) == null ? void 0 : d.localName) === "px-grid-item" || ((i = this.parentElement) == null ? void 0 : i.localName) === "px-a") && (this.$el.style.height = "100%");
-  }
-  attributeChangedCallback(t, a, e) {
-    if (a !== e)
-      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, e, z);
-          break;
-        case "border":
-          this.updateAttribute(t, a, e, S);
-          break;
-        case "border-radius":
-          this.updateAttribute(
-            t,
-            a,
-            e,
-            $
-          );
-          break;
-        case "no-border-radius":
-        case "no-border-radius--mobile":
-        case "no-border-radius--tablet":
-        case "no-border-radius--laptop":
-          this.updateNoBorderRadius(
-            t,
-            a,
-            e,
-            A
-          );
-          break;
-        case "background-color":
-        case "background-color--mobile":
-        case "background-color--tablet":
-        case "background-color--laptop":
-          this.updateBackgroundColor(t, e);
-          break;
-        case "background-gradient":
-        case "background-gradient--mobile":
-        case "background-gradient--tablet":
-        case "background-gradient--laptop":
-          this.updateGradient(t, e);
-          break;
-        case "background-size":
-          this.updateAttribute(
-            t,
-            a,
-            e,
-            T
-          );
-          break;
-        case "background-image":
-        case "background-image--mobile":
-        case "background-image--tablet":
-        case "background-image--laptop":
-          this.updateBackgroundImg(t, e);
-          break;
-        case "background-position":
-          e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
-          break;
-        case "box-shadow":
-          this.updateAttribute(t, a, e, y);
-          break;
-        default:
-          super.attributeChangedCallback(t, a, e);
-          break;
-      }
-  }
-  updateBackgroundImg(t, a) {
-    this.$el.style.setProperty(`--${t}`, `url("${a}")`);
-  }
-  updateGradient(t, a) {
-    if (this.checkName(L, a)) {
-      const e = this.splitAttrNameFromBreakpoint(t);
-      t = e.attrName;
-      const d = e.breakpoint;
-      this.$el.style.setProperty(
-        `--${t}${d}`,
-        `linear-gradient(var(--px-color-bg-gradient-${a}))`
-      );
-    } else
-      console.error(
-        `${a} is not an allowed background-gradient value for ${this.$el}`
-      );
-  }
-  updateBackgroundColor(t, a) {
-    if (this.checkName(b, a)) {
-      const e = this.splitAttrNameFromBreakpoint(t), d = e.breakpoint;
-      this.$el.style.setProperty(
-        `--${e.attrName}${d}`,
-        `var(--px-color-bg-${a}-default)`
-      ), this.$el.style.setProperty(
-        `--${e.attrName}-inverted${d}`,
-        `var(--px-color-bg-${a}-inverted)`
-      );
-    } else
-      console.error(
-        `${a} is not an allowed ${t} value for ${this.$el}`
-      );
-  }
-  updateNoBorderRadius(t, a, e, d) {
-    if (!this.checkName(d, e))
-      console.error(
-        `${e} is not an allowed ${t} value for ${this.$el}`
-      );
-    else {
-      const i = this.splitAttrNameFromBreakpoint(t), r = i.breakpoint;
-      a !== null && a !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${a}${r}`
-      ), e !== null && e !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${e}${r}`
-      );
-    }
-  }
-  updateAttribute(t, a, e, d) {
-    if (!this.checkName(d, e))
-      console.error(
-        `${e} is not an allowed ${t} value for ${this.$el}`
-      );
-    else {
-      const i = this.splitAttrNameFromBreakpoint(t), r = i.breakpoint;
-      a !== null && a !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${a}${r}`
-      ), e !== null && e !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${e}${r}`
-      );
-    }
-  }
-  splitAttrNameFromBreakpoint(t) {
-    let a = "";
-    if (["--mobile", "--tablet", "--laptop"].some(
-      (e) => t.includes(e)
-    )) {
-      const e = t.split("--");
-      t = e[0], a = `--${e[1]}`;
-    }
-    return { attrName: t, breakpoint: a };
-  }
-  checkName(t, a) {
-    return t.includes(a);
-  }
-  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 backgroundColor() {
-    return this.getAttribute("background-color");
-  }
-  set backgroundColor(t) {
-    this.setAttribute("background-color", t);
-  }
-  get backgroundColorMobile() {
-    return this.getAttribute("background-color--mobile");
-  }
-  set backgroundColorMobile(t) {
-    this.setAttribute("background-color--mobile", t);
-  }
-  get backgroundColorTablet() {
-    return this.getAttribute("background-color--tablet");
-  }
-  set backgroundColorTablet(t) {
-    this.setAttribute("background-color--tablet", t);
-  }
-  get backgroundColorLaptop() {
-    return this.getAttribute("background-color--laptop");
-  }
-  set backgroundColorLaptop(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 backgroundImage() {
-    return this.getAttribute("background-image");
-  }
-  set backgroundImage(t) {
-    this.setAttribute("background-image", t);
-  }
-  get backgroundImageMobile() {
-    return this.getAttribute("background-image--mobile");
-  }
-  set backgroundImageMobile(t) {
-    this.setAttribute("background-image--mobile", t);
-  }
-  get backgroundImageTablet() {
-    return this.getAttribute("background-image--tablet");
-  }
-  set backgroundImageTablet(t) {
-    this.setAttribute("background-image--tablet", t);
-  }
-  get backgroundImageLaptop() {
-    return this.getAttribute("background-image--laptop");
-  }
-  set backgroundImageLaptop(t) {
-    this.setAttribute("background-image--laptop", t);
-  }
-  get backgroundSize() {
-    return this.getAttribute("background-size");
-  }
-  set backgroundSize(t) {
-    this.setAttribute("background-size", t);
-  }
-  get backgroundPosition() {
-    return this.getAttribute("background-position");
-  }
-  set backgroundPosition(t) {
-    this.setAttribute("background-position", t);
-  }
-  get boxShadow() {
-    return this.getAttribute("box-shadow");
-  }
-  set boxShadow(t) {
-    this.setAttribute("box-shadow", t);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(t) {
-    this.setAttribute("inverted", t);
-  }
-};
-p.nativeName = "div";
-let o = p;
-customElements.define("px-container", o);
-const B = ".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)}}', E = ".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)}", x = new CSSStyleSheet(), h = new CSSStyleSheet(), v = new CSSStyleSheet();
-x.replaceSync(B);
-h.replaceSync(R);
-v.replaceSync(E);
-const M = [
-  "",
-  "default",
-  "secondary",
-  "tertiary",
-  "link",
-  "patch",
-  "patch-info",
-  "patch-black-friday",
-  "patch-eco"
-], l = class l extends g {
-  constructor() {
-    super(x, h, 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 e = a.getAttribute("size"), d = a.getAttribute("color");
-      a && (a.addEventListener("click", () => {
-        this.$el.focus();
-      }), e || a.setAttribute("size", "xs"), d || a.setAttribute("color", "inherit"));
-    });
-  }
-  attributeChangedCallback(t, a, e) {
-    if (a !== e)
-      switch (t) {
-        case "variant":
-          this.updateVariant(a, e, M);
-          break;
-        case "state":
-          this.updateState(a, e);
-          break;
-        case "extended":
-          this.updateExtended();
-          break;
-        case "loading":
-          this.updateLoading();
-          break;
-        case "shape":
-          this.updateShape(a, e);
-          break;
-        default:
-          super.attributeChangedCallback(t, a, e);
-          break;
-      }
-  }
-  checkName(t, a) {
-    return !!t.includes(a);
-  }
-  checkClass(t) {
-    if (t.startsWith("patch-")) {
-      const a = t.split(/-(.*)/s);
-      for (const e of a)
-        e != "" && this.$el.classList.toggle(e);
-    } 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, e) {
-    a === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, a), this.checkName(e, a) || console.error(`Bad "variant" value for ${this.$el}`);
-  }
-  updateState(t, a) {
-    const e = ["", "default", "success", "error"];
-    this._toggleClass(t, a), this.checkName(e, 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 e = [
-      "",
-      "default",
-      "bottom-right",
-      "bottom-left",
-      "alternative"
-    ];
-    this._toggleClass(t, a), this.checkName(e, 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 I = ":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(I);
-class P extends HTMLElement {
-  constructor() {
-    super(), this.template = () => `
-    <px-container border-radius="none" padding="none" background-color="${this.backgroundColor}">
-      <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, e) {
-    if (a !== e)
-      switch (t) {
-        case "background-color":
-          this.$container.backgroundColor = b.indexOf(e) > 0 ? e : "container-none";
-          break;
-        case "background-gradient":
-          this.$container.gradient = this.gradient;
-          break;
-        case "background-image":
-          this.$container.backgroundImage = e;
-          break;
-        case "background-image--mobile":
-          this.$container.backgroundImageMobile = e;
-          break;
-        case "background-image--tablet":
-          this.$container.backgroundImageTablet = e;
-          break;
-        case "background-image--laptop":
-          this.$container.backgroundImageLaptop = e;
-          break;
-        case "background-size":
-          this.$container.backgroundSize = e;
-          break;
-        case "background-position":
-          this.$container.backgroundPosition = e;
-          break;
-        case "padding-block":
-          this.$container.paddingBlock = e;
-          break;
-        case "padding-top":
-          this.$container.paddingTop = e;
-          break;
-        case "padding-bottom":
-          this.$container.paddingBottom = e;
-          break;
-      }
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color") || "container-none";
-  }
-  set backgroundColor(t) {
-    this.setAttribute("background-color", t);
-  }
-  get gradient() {
-    return this.getAttribute("background-gradient");
-  }
-  set gradient(t) {
-    this.setAttribute("background-gradient", t);
-  }
-  get backgroundImage() {
-    return this.getAttribute("background-image");
-  }
-  set backgroundImage(t) {
-    this.setAttribute("background-image", t);
-  }
-  get backgroundImageMobile() {
-    return this.getAttribute("background-image--mobile");
-  }
-  set backgroundImageMobile(t) {
-    this.setAttribute("background-image--mobile", t);
-  }
-  get backgroundImageTablet() {
-    return this.getAttribute("background-image--tablet");
-  }
-  set backgroundImageTablet(t) {
-    this.setAttribute("background-image--tablet", t);
-  }
-  get backgroundImageLaptop() {
-    return this.getAttribute("background-image--laptop");
-  }
-  set backgroundImageLaptop(t) {
-    this.setAttribute("background-image--laptop", t);
-  }
-  get backgroundSize() {
-    return this.getAttribute("background-size");
-  }
-  set backgroundSize(t) {
-    this.setAttribute("background-size", t);
-  }
-  get backgroundPosition() {
-    return this.getAttribute("background-position");
-  }
-  set backgroundPosition(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, e) {
-    super.attributeChangedCallback(t, a, e), t === "href" && this.$button && e ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && e && (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) => {
-      const a = t.target.closest(
-        "px-header-item"
-      );
-      a && a.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((e) => {
-        e.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((e) => {
-        e.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(
-      (e) => `<px-mdd-section-item for="${e.getAttribute("for")}">${e.innerText}</px-mdd-section-item>`
-    ).join("")}
-          ${[...this.$actionLinks].map(
-      (e) => `<px-a href="${e.href}" slot="footer">${e.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
-};