@proximus/lavender-header 1.0.0-alpha.8 → 1.0.0-beta.0

package/dist/index.js

@@ -1,1370 +0,0 @@
-import { PxElement as u, cssTokenBreakpoints as a, paddingValues as n, boxShadowValues as R, backgroundSizeValues as I, noBorderRadiusValues as P, borderRadiusValues as _, borderSideValues as q, borderValues as H, gradientValues as F, backgroundColorValues as f, borderColorValues as j, transferAccessibilityAttributes as N, WithExtraAttributes as k, fontweightValues as O, colorValues as W, fontsizeValues as G } from "@proximus/lavender-common";
-import "@proximus/lavender-layout";
-const Y = ':host{display:block}.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);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-inverted)}.border-none{border:none}.border-s{border:var(--px-border-size-s) solid var(--border-color)}.border-m{border:var(--px-border-size-m) solid var(--border-color)}.border-l{border:var(--px-border-size-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-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:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.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( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 767px){.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) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.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-size-s) * -1);left:calc(var(--px-border-size-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-m) * -1);left:calc(var(--px-border-size-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)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}}@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)}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', m = new CSSStyleSheet();
-m.replaceSync(Y);
-const J = ["anchor-right", "anchor-left", "anchor-full"], d = (l, t, e) => `:host([${l}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", h = class h extends u {
-  constructor() {
-    super(
-      m,
-      a(
-        "padding",
-        d,
-        n,
-        s,
-        "--container-padding"
-      ),
-      a(
-        "padding-inline",
-        d,
-        n,
-        s
-      ),
-      a(
-        "padding-block",
-        d,
-        n,
-        s
-      ),
-      a(
-        "padding-top",
-        d,
-        n,
-        s
-      ),
-      a(
-        "padding-right",
-        d,
-        n,
-        s,
-        "--container-padding-right"
-      ),
-      a(
-        "padding-bottom",
-        d,
-        n,
-        s
-      ),
-      a(
-        "padding-left",
-        d,
-        n,
-        s,
-        "--container-padding-left"
-      )
-    ), 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,
-      "border",
-      "border-color",
-      "border-side",
-      "border-side--mobile",
-      "border-side--tablet",
-      "border-side--laptop",
-      "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() {
-    super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "container-neutral-bare"), this.borderColor || (this.borderColor = "container-main");
-    const t = this.querySelector("[slot]");
-    t && J.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored");
-  }
-  attributeChangedCallback(t, e, r) {
-    if (e !== r)
-      switch (t) {
-        case "border":
-          this.updateAttribute(t, e, r, H);
-          break;
-        case "border-color":
-          this.updateBorderColor(t, r);
-          break;
-        case "border-side":
-        case "border-side--mobile":
-        case "border-side--tablet":
-        case "border-side--laptop":
-          this.updateAttribute(t, e, r, q);
-          break;
-        case "border-radius":
-          this.updateAttribute(
-            t,
-            e,
-            r,
-            _
-          );
-          break;
-        case "no-border-radius":
-        case "no-border-radius--mobile":
-        case "no-border-radius--tablet":
-        case "no-border-radius--laptop":
-          this.updateNoBorderRadius(
-            t,
-            e,
-            r,
-            P
-          );
-          break;
-        case "background-color":
-        case "background-color--mobile":
-        case "background-color--tablet":
-        case "background-color--laptop":
-          this.updateBackgroundColor(t, r);
-          break;
-        case "background-gradient":
-        case "background-gradient--mobile":
-        case "background-gradient--tablet":
-        case "background-gradient--laptop":
-          this.updateGradient(t, r);
-          break;
-        case "background-size":
-          this.updateAttribute(
-            t,
-            e,
-            r,
-            I
-          );
-          break;
-        case "background-image":
-        case "background-image--mobile":
-        case "background-image--tablet":
-        case "background-image--laptop":
-          this.updateBackgroundImg(t, r);
-          break;
-        case "background-position":
-          r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
-          break;
-        case "box-shadow":
-          this.updateAttribute(t, e, r, R);
-          break;
-        default:
-          super.attributeChangedCallback(t, e, r);
-          break;
-      }
-  }
-  updateBackgroundImg(t, e) {
-    this.$el.style.setProperty(`--${t}`, `url("${e}")`);
-  }
-  updateGradient(t, e) {
-    if (this.checkName(F, e)) {
-      const r = this.splitAttrNameFromBreakpoint(t);
-      t = r.attrName;
-      const o = r.breakpoint;
-      this.$el.style.setProperty(
-        `--${t}${o}`,
-        `linear-gradient(var(--px-background-color-container-gradient-${e}))`
-      );
-    } else
-      console.error(
-        `${e} is not an allowed background-gradient value for ${this.$el}`
-      );
-  }
-  updateBackgroundColor(t, e) {
-    if (this.checkName(f, e)) {
-      const r = this.splitAttrNameFromBreakpoint(t), o = r.breakpoint;
-      this.$el.style.setProperty(
-        `--${r.attrName}${o}`,
-        `var(--px-background-color-${e}-default)`
-      ), this.$el.style.setProperty(
-        `--${r.attrName}-inverted${o}`,
-        `var(--px-background-color-${e}-inverted)`
-      );
-    } else
-      console.error(
-        `${e} is not an allowed ${t} value for ${this.$el}`
-      );
-  }
-  updateBorderColor(t, e) {
-    this.checkName(j, e) ? (this.$el.style.setProperty(
-      `--${t}`,
-      `var(--px-border-color-${e}-default)`
-    ), this.$el.style.setProperty(
-      `--${t}-inverted`,
-      `var(--px-border-color-${e}-inverted)`
-    )) : console.error(
-      `${e} is not an allowed ${t} value for ${this.$el}`
-    );
-  }
-  updateNoBorderRadius(t, e, r, o) {
-    if (!this.checkName(o, r))
-      console.error(
-        `${r} is not an allowed ${t} value for ${this.$el}`
-      );
-    else {
-      const i = this.splitAttrNameFromBreakpoint(t), b = i.breakpoint;
-      e !== null && e !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${e}${b}`
-      ), r !== null && r !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${r}${b}`
-      );
-    }
-  }
-  updateAttribute(t, e, r, o) {
-    if (!this.checkName(o, r))
-      console.error(
-        `${r} is not an allowed ${t} value for ${this.$el}`
-      );
-    else {
-      const i = this.splitAttrNameFromBreakpoint(t), b = i.breakpoint;
-      e !== null && e !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${e}${b}`
-      ), r !== null && r !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${r}${b}`
-      );
-    }
-  }
-  splitAttrNameFromBreakpoint(t) {
-    let e = "";
-    if (["--mobile", "--tablet", "--laptop"].some(
-      (r) => t.includes(r)
-    )) {
-      const r = t.split("--");
-      t = r[0], e = `--${r[1]}`;
-    }
-    return { attrName: t, breakpoint: e };
-  }
-  checkName(t, e) {
-    return t.includes(e);
-  }
-  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 borderColor() {
-    return this.getAttribute("border-color");
-  }
-  set borderColor(t) {
-    this.setAttribute("border-color", t);
-  }
-  get borderSide() {
-    return this.getAttribute("border-side");
-  }
-  set borderSide(t) {
-    this.setAttribute("border-side", t);
-  }
-  get borderSideMobile() {
-    return this.getAttribute("border-side--mobile");
-  }
-  set borderSideMobile(t) {
-    this.setAttribute("border-side--mobile", t);
-  }
-  get borderSideTablet() {
-    return this.getAttribute("border-side--tablet");
-  }
-  set borderSideTablet(t) {
-    this.setAttribute("border-side--tablet", t);
-  }
-  get borderSideLaptop() {
-    return this.getAttribute("border-side--laptop");
-  }
-  set borderSideLaptop(t) {
-    this.setAttribute("border-side--laptop", 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);
-  }
-};
-h.nativeName = "div";
-let c = h;
-customElements.define("px-container", c);
-const y = '.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-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-border-color-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-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,.actionable-tag){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);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,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);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-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.actionable-tag{background:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-after-element-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}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-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-neutral-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-neutral-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-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-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-neutral-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-after-element-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}}@media only screen and (min-width: 1025px){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-after-element-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}', A = 'a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-m);font-weight:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-mobile)}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-text-color-action-hover-default)}a.no-style{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-background-color-container-weak);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}a.icon-link{color:var(--px-icon-color-content-brand-default)}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-background-color-container-weak-inverted)}:host([inverted]) a.icon-link{color:var(--px-icon-color-content-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', K = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625em;border:var(--px-border-size-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-label-m-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-background-color-purpose-promo-default);color:var(--px-text-color-action-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.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-background-color-purpose-info-default);color:var(--px-text-color-action-neutral-default)}.black-friday{background-color:var(--px-background-color-container-neutral-rich-default);color:var(--px-text-color-action-neutral-inverted)}.eco{background-color:var(--px-background-color-purpose-success-default);color:var(--px-text-color-action-neutral-inverted)}.greyed{background-color:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}:host([inverted]) .patch{background-color:var(--px-background-color-purpose-promo-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-background-color-purpose-info-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-background-color-container-neutral-bare-default);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .eco{background-color:var(--px-background-color-purpose-success-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Q = ":host{display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:400;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([inverted]) .tag{background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", z = new CSSStyleSheet(), $ = new CSSStyleSheet(), S = new CSSStyleSheet(), L = new CSSStyleSheet();
-z.replaceSync(y);
-$.replaceSync(A);
-S.replaceSync(K);
-L.replaceSync(Q);
-const U = [
-  "",
-  "default",
-  "secondary",
-  "tertiary",
-  "link",
-  "patch",
-  "patch-info",
-  "patch-black-friday",
-  "patch-eco",
-  "actionable-tag"
-], X = [
-  "extended",
-  "extended--mobile",
-  "extended--tablet",
-  "extended--laptop"
-], x = class x extends u {
-  constructor() {
-    super(z, $, S, L), this.template = () => `<button class="btn">
-      <slot name="before"></slot><slot></slot><slot name="after"></slot>
-     </button>`, this.shadowRoot.innerHTML = this.template();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "variant",
-      "state",
-      "loading",
-      "shape",
-      "inverted",
-      ...X
-    ];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const t = this.querySelectorAll("px-icon");
-    t && t.forEach((e) => {
-      const r = e.getAttribute("size"), o = e.getAttribute("color");
-      e && (e.addEventListener("click", () => {
-        this.$el.focus();
-      }), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
-    }), N(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
-      var r;
-      e.preventDefault(), (r = this.closest("form")) == null || r.submit();
-    }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
-      var r;
-      e.preventDefault(), (r = this.closest("form")) == null || r.reset();
-    });
-  }
-  attributeChangedCallback(t, e, r) {
-    if (e !== r)
-      switch (t) {
-        case "variant":
-          this.updateVariant(e, r, U);
-          break;
-        case "state":
-          this.updateState(e, r);
-          break;
-        case "extended":
-        case "extended--mobile":
-        case "extended--tablet":
-        case "extended--laptop":
-          this.updateExtended(t, r);
-          break;
-        case "loading":
-          this.updateLoading();
-          break;
-        case "shape":
-          this.updateShape(e, r);
-          break;
-        default:
-          super.attributeChangedCallback(t, e, r);
-          break;
-      }
-  }
-  checkName(t, e) {
-    return !!t.includes(e);
-  }
-  checkClass(t) {
-    if (t.startsWith("patch-")) {
-      const e = t.split(/-(.*)/s);
-      for (const r of e)
-        r != "" && this.$el.classList.toggle(r);
-    } else
-      this.$el.classList.toggle(t);
-  }
-  _toggleClass(t, e) {
-    t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
-  }
-  updateVariant(t, e, r) {
-    e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "variant" value for ${this.$el}`);
-  }
-  updateState(t, e) {
-    const r = ["", "default", "success", "error"];
-    this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "sate" value for ${this.$el}`);
-  }
-  updateExtended(t, e) {
-    e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
-  }
-  updateLoading() {
-    const t = this.querySelector("px-spinner");
-    t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
-  }
-  updateShape(t, e) {
-    const r = [
-      "",
-      "default",
-      "bottom-right",
-      "bottom-left",
-      "alternative"
-    ];
-    this._toggleClass(t, e), this.checkName(r, e) || 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 extendedMobile() {
-    return this.getAttribute("extended--mobile");
-  }
-  set extendedMobile(t) {
-    this.setAttribute("extended--mobile", t);
-  }
-  get extendedTablet() {
-    return this.getAttribute("extended--tablet");
-  }
-  set extendedTablet(t) {
-    this.setAttribute("extended--tablet", t);
-  }
-  get extendedLaptop() {
-    return this.getAttribute("extended--laptop");
-  }
-  set extendedLaptop(t) {
-    this.setAttribute("extended--laptop", 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);
-  }
-};
-x.nativeName = "button";
-let p = x;
-customElements.get("px-button") || customElements.define("px-button", p);
-const Z = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-mobile)}@media only screen and (min-width: 768px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-tablet)}}@media only screen and (min-width: 1025px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-desktop)}}', T = new CSSStyleSheet();
-T.replaceSync(Z);
-class D extends HTMLElement {
-  constructor() {
-    super(), this.template = () => `
-    <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
-      <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
-        <px-vstack gap="heading-to-content">
-          <slot name="heading"></slot>
-          <px-vstack gap="after-element-none">
-            <slot></slot>
-          </px-vstack>
-        </px-vstack>
-      </div>
-    </px-container>
-    <div class="content-wrapper">
-      <slot name="overlap"></slot>
-    </div>
-  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [T];
-  }
-  connectedCallback() {
-    const t = this.querySelector('[slot="heading"]');
-    !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "after-element-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",
-      "padding-block--mobile",
-      "padding-top--mobile",
-      "padding-bottom--mobile",
-      "padding-block--tablet",
-      "padding-top--tablet",
-      "padding-bottom--tablet",
-      "padding-block--laptop",
-      "padding-top--laptop",
-      "padding-bottom--laptop",
-      "border",
-      "border-side",
-      "border-side--mobile",
-      "border-side--tablet",
-      "border-side--laptop"
-    ];
-  }
-  get $container() {
-    return this.shadowRoot.querySelector("px-container");
-  }
-  attributeChangedCallback(t, e, r) {
-    if (e !== r)
-      switch (t) {
-        case "background-color":
-          this.$container.backgroundColor = f.indexOf(r) > 0 ? r : "none";
-          break;
-        case "background-gradient":
-          this.$container.gradient = this.gradient;
-          break;
-        case "background-image":
-          this.$container.backgroundImage = r;
-          break;
-        case "background-image--mobile":
-          this.$container.backgroundImageMobile = r;
-          break;
-        case "background-image--tablet":
-          this.$container.backgroundImageTablet = r;
-          break;
-        case "background-image--laptop":
-          this.$container.backgroundImageLaptop = r;
-          break;
-        case "background-size":
-          this.$container.backgroundSize = r;
-          break;
-        case "background-position":
-          this.$container.backgroundPosition = r;
-          break;
-        case "padding-block":
-          this.$container.paddingBlock = r;
-          break;
-        case "padding-top":
-          this.$container.paddingTop = r;
-          break;
-        case "padding-bottom":
-          this.$container.paddingBottom = r;
-          break;
-        case "padding-block--mobile":
-          this.$container.paddingBlockMobile = r;
-          break;
-        case "padding-top--mobile":
-          this.$container.paddingTopMobile = r;
-          break;
-        case "padding-bottom--mobile":
-          this.$container.paddingBottomMobile = r;
-          break;
-        case "padding-block--tablet":
-          this.$container.paddingBlockTablet = r;
-          break;
-        case "padding-top--tablet":
-          this.$container.paddingTopTablet = r;
-          break;
-        case "padding-bottom--tablet":
-          this.$container.paddingBottomTablet = r;
-          break;
-        case "padding-block--laptop":
-          this.$container.paddingBlockLaptop = r;
-          break;
-        case "padding-top--laptop":
-          this.$container.paddingTopLaptop = r;
-          break;
-        case "padding-bottom--laptop":
-          this.$container.paddingBottomLaptop = r;
-          break;
-        case "border":
-          this.$container.border = r;
-          break;
-        case "border-side":
-          this.$container.borderSide = r;
-          break;
-        case "border-side--mobile":
-          this.$container.borderSideMobile = r;
-          break;
-        case "border-side--tablet":
-          this.$container.borderSideTablet = r;
-          break;
-        case "border-side--laptop":
-          this.$container.borderSideLaptop = r;
-          break;
-      }
-  }
-  get $slotOverlap() {
-    return this.querySelector('[slot="overlap"]');
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color") || "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);
-  }
-  get paddingBlockMobile() {
-    return this.getAttribute("padding-block--mobile");
-  }
-  set paddingBlockMobile(t) {
-    this.setAttribute("padding-block--mobile", t);
-  }
-  get paddingTopMobile() {
-    return this.getAttribute("padding-top--mobile");
-  }
-  set paddingTopMobile(t) {
-    this.setAttribute("padding-top--mobile", t);
-  }
-  get paddingBottomMobile() {
-    return this.getAttribute("padding-bottom--mobile");
-  }
-  set paddingBottomMobile(t) {
-    this.setAttribute("padding-bottom--mobile", t);
-  }
-  get paddingBlockTablet() {
-    return this.getAttribute("padding-block--tablet");
-  }
-  set paddingBlockTablet(t) {
-    this.setAttribute("padding-block--tablet", t);
-  }
-  get paddingTopTablet() {
-    return this.getAttribute("padding-top--tablet");
-  }
-  set paddingTopTablet(t) {
-    this.setAttribute("padding-top--tablet", t);
-  }
-  get paddingBottomTablet() {
-    return this.getAttribute("padding-bottom--tablet");
-  }
-  set paddingBottomTablet(t) {
-    this.setAttribute("padding-bottom--tablet", t);
-  }
-  get paddingBlockLaptop() {
-    return this.getAttribute("padding-block--laptop");
-  }
-  set paddingBlockLaptop(t) {
-    this.setAttribute("padding-block--laptop", t);
-  }
-  get paddingTopLaptop() {
-    return this.getAttribute("padding-top--laptop");
-  }
-  set paddingTopLaptop(t) {
-    this.setAttribute("padding-top--laptop", t);
-  }
-  get paddingBottomLaptop() {
-    return this.getAttribute("padding-bottom--laptop");
-  }
-  set paddingBottomLaptop(t) {
-    this.setAttribute("padding-bottom--laptop", t);
-  }
-  get border() {
-    return this.getAttribute("border");
-  }
-  set border(t) {
-    this.setAttribute("border", t);
-  }
-  get borderSide() {
-    return this.getAttribute("border-side");
-  }
-  set borderSide(t) {
-    this.setAttribute("border-side", t);
-  }
-  get borderSideMobile() {
-    return this.getAttribute("border-side--mobile");
-  }
-  set borderSideMobile(t) {
-    this.setAttribute("border-side--mobile", t);
-  }
-  get borderSideTablet() {
-    return this.getAttribute("border-side--tablet");
-  }
-  set borderSideTablet(t) {
-    this.setAttribute("border-side--tablet", t);
-  }
-  get borderSideLaptop() {
-    return this.getAttribute("border-side--laptop");
-  }
-  set borderSideLaptop(t) {
-    this.setAttribute("border-side--laptop", t);
-  }
-}
-customElements.define("px-section", D);
-const V = ":host>*{padding:2em 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:var(--px-text-size-label-l-mobile)}button[aria-expanded=true],button:focus{outline:0;font-weight:700;border-bottom:2px solid var(--px-background-color-action-primary-default);color:var(--px-background-color-action-primary-default)}button:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}@media screen and (min-width: 1024px){button{font-size:var(--px-text-size-label-l-desktop)}}px-a{height:100%;display:block}px-a:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}", B = new CSSStyleSheet();
-B.replaceSync(V);
-class tt extends k {
-  constructor() {
-    super(), this.template = () => `${this.getAttribute("href") ? `<px-a font-size="body-l" variant="no-style" href="${this.getAttribute("href")}">
-          <slot></slot>
-        </px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [B];
-  }
-  static get observedAttributes() {
-    return ["for", "href"];
-  }
-  connectedCallback() {
-    this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y();
-  }
-  attributeChangedCallback(t, e, r) {
-    super.attributeChangedCallback(t, e, r), t === "href" && this.$button && r ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && r && (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", tt);
-const et = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-action-brand{color:var(--px-text-color-action-brand-default)}.color-action-neutral{color:var(--px-text-color-action-neutral-default)}.color-action-hover{color:var(--px-text-color-action-hover-default)}.color-action-active{color:var(--px-text-color-action-active-default)}.color-action-disabled{color:var(--px-text-color-action-disabled-default)}.color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-default)}.color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-default)}.color-heading-brand{color:var(--px-text-color-heading-brand-default)}.color-heading-neutral{color:var(--px-text-color-heading-neutral-default)}.color-purpose-success{color:var(--px-text-color-purpose-success-default)}.color-purpose-warning{color:var(--px-text-color-purpose-warning-default)}.color-purpose-error{color:var(--px-text-color-purpose-error-default)}.color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-text-color-purpose-promo-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-action-brand{color:var(--px-text-color-action-brand-inverted)}:host([inverted]) .color-action-neutral{color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .color-action-hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) .color-action-active{color:var(--px-text-color-action-active-inverted)}:host([inverted]) .color-action-disabled{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-inverted)}:host([inverted]) .color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-inverted)}:host([inverted]) .color-heading-brand{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .color-heading-neutral{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-text-color-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-text-color-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-text-color-purpose-promo-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}}@media only screen and (min-width: 1025px){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}", C = new CSSStyleSheet(), M = new CSSStyleSheet(), w = new CSSStyleSheet();
-C.replaceSync(A);
-M.replaceSync(y);
-w.replaceSync(et);
-const rt = [
-  "link",
-  "no-style",
-  "skip-link",
-  "btn-default",
-  "btn-secondary",
-  "btn-tertiary",
-  "icon-link"
-], ot = ["", "default", "alternative"], v = class v extends u {
-  constructor() {
-    super(C, M, w), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
-    const t = document.createElement(this.nativeName);
-    t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "disabled",
-      "variant",
-      "shape",
-      "extended",
-      "inverted",
-      "font-size",
-      "color",
-      "font-weight"
-    ];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after);
-  }
-  attributeChangedCallback(t, e, r) {
-    if (e !== r)
-      switch (t) {
-        case "disabled":
-          this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
-          break;
-        case "variant":
-          this.updateVariant(e, r);
-          break;
-        case "shape":
-          this.updateShape(e, r);
-          break;
-        case "extended":
-          this.$el.classList.toggle(t);
-          break;
-        case "font-size":
-          this.updateTypography(t, e, r, G);
-          break;
-        case "color":
-          this.updateTypography(t, e, r, W);
-          break;
-        case "font-weight":
-          this.updateTypography(t, e, r, O);
-          break;
-        default:
-          super.attributeChangedCallback(t, e, r);
-          break;
-      }
-  }
-  configureBeforeAfterIcon(t) {
-    const e = t.getAttribute("size"), r = t.getAttribute("color");
-    t.addEventListener("click", () => {
-      this.$el.focus();
-    }), e || t.setAttribute("size", "2xs"), r || t.setAttribute("color", "inherit");
-  }
-  checkName(t, e) {
-    return t.includes(e);
-  }
-  _toggleClassList(t) {
-    if (t.startsWith("btn-")) {
-      const e = t.split("-");
-      for (const r of e)
-        this.$el.classList.toggle(r);
-    } else
-      this.$el.classList.toggle(t);
-  }
-  updateVariant(t, e) {
-    t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(rt, e) || console.error(`Bad "variant" value for ${this.$el}`), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
-  }
-  updateShape(t, e) {
-    t !== null && t !== "" && t !== "default" && this._toggleClassList(t), e !== null && e !== "" && e !== "default" && this._toggleClassList(e), this.checkName(ot, e) || console.error(`Bad "shape" value for ${this.$el}`);
-  }
-  updateTypography(t, e, r, o) {
-    e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(o, r) || console.error(`Bad ${t} value for ${this.$el}`);
-  }
-  get $before() {
-    return this.querySelector('[slot="before"]');
-  }
-  get $after() {
-    return this.querySelector('[slot="after"]');
-  }
-  get $iconNotBeforeAfter() {
-    return this.querySelector(
-      'px-icon:not([slot="before"], [slot="after"])'
-    );
-  }
-  get disabled() {
-    return this.getAttribute("disabled");
-  }
-  set disabled(t) {
-    this.setAttribute("disabled", t);
-  }
-  get variant() {
-    return this.getAttribute("variant");
-  }
-  set variant(t) {
-    this.setAttribute("variant", t);
-  }
-  get shape() {
-    return this.getAttribute("shape");
-  }
-  set shape(t) {
-    this.setAttribute("shape", t);
-  }
-  get extended() {
-    return this.getAttribute("extended");
-  }
-  set extended(t) {
-    this.setAttribute("extended", t);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(t) {
-    this.setAttribute("inverted", t);
-  }
-  get fontsize() {
-    return this.getAttribute("font-size");
-  }
-  set fontsize(t) {
-    this.setAttribute("font-size", t);
-  }
-  get color() {
-    return this.getAttribute("color");
-  }
-  set color(t) {
-    this.setAttribute("color", t);
-  }
-  get fontweight() {
-    return this.getAttribute("font-weight");
-  }
-  set fontweight(t) {
-    this.setAttribute("font-weight", t);
-  }
-};
-v.nativeName = "a";
-let g = v;
-customElements.get("px-a") || customElements.define("px-a", g);
-class it extends HTMLElement {
-  constructor() {
-    super(), this.template = `<px-a font-weight="bold" font-size="body-l" color="action-brand" variant="no-style">
-    <slot></slot>
-  </px-a>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template;
-    const t = this.shadowRoot.querySelector("px-a");
-    t && Array.from(this.attributes).forEach((e) => {
-      t.setAttribute(e.name, e.value);
-    });
-  }
-}
-customElements.get("px-mdd-a") || customElements.define("px-mdd-a", it);
-const at = "#panel-container{position:absolute;left:0;right:0;z-index:999}@media screen and (max-width: 767px){#panel-container{top:0;border-top:none}}#backdrop-filter{position:absolute;display:none;z-index:998;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}}", E = new CSSStyleSheet();
-E.replaceSync(at);
-class nt extends k {
-  constructor() {
-    var t;
-    super(E), this.template = `
-    <div id="navigation-items-container">
-      <slot name="skip"></slot>
-      <px-section padding-block--mobile="s" padding-block="none"  background-color="none">
-          <px-hstack gap="after-element-default" 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="after-element-default">
-              <slot name="header-actions"></slot>
-              <px-button-icon variant="naked">
-                <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="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 e = t.target.closest(
-        "px-header-item"
-      );
-      e && e.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((r) => {
-        r.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((r) => {
-        r.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 e;
-    const t = `
-      <px-mdd name="__lavender_mobile_menu">
-        <span slot="title">Menu</span>
-        <px-mdd-section>
-          ${[...this.$navigationItems].map(
-      (r) => `<px-mdd-section-item for="${r.getAttribute("for")}">${r.innerText}</px-mdd-section-item>`
-    ).join("")}
-          ${[...this.$actionLinks].filter((r) => r.hasAttribute("promoted")).map(
-      (r) => `<px-mdd-a  href="${r.getAttribute("href")}" slot="footer">${r.innerText}</px-mdd-a>`
-    ).join("")}
-      </px-mdd>
-    `;
-    (e = this.$megaDropdowns.item(0)) == null || e.insertAdjacentHTML("beforebegin", t);
-  }
-  i11yEnableActions(t = !0) {
-    this.querySelectorAll('[slot="header-actions"]').forEach(
-      (e) => {
-        if (t) {
-          e.removeAttribute("tabindex");
-          return;
-        }
-        e.setAttribute("tabindex", "-1");
-      }
-    );
-  }
-  togglePanel(t) {
-    this.$megaDropdowns.forEach((e) => {
-      e.name === t && e.hidden && (e.hidden = !e.hidden, t !== "__lavender_mobile_menu" && (this.querySelector(`px-header-item[for="${t}"]`).checked = !e.hidden), document.body.style.overflow = e.hidden ? "auto" : "hidden"), e.name !== t && !e.hidden && (e.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", nt);
-export {
-  nt as Header,
-  tt as HeaderItem
-};