@proximus/lavender-header 2.0.0-alpha.75 → 2.0.0-alpha.76

package/dist/index.es.js

@@ -1,8 +1,8 @@
-var V = (o) => {
-  throw TypeError(o);
+var V = (r) => {
+  throw TypeError(r);
 };
-var D = (o, t, e) => t.has(o) || V("Cannot " + e);
-var d = (o, t, e) => (D(o, t, "read from private field"), e ? e.call(o) : t.get(o)), u = (o, t, e) => t.has(o) ? V("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), m = (o, t, e, r) => (D(o, t, "write to private field"), r ? r.call(o, e) : t.set(o, e), e), b = (o, t, e) => (D(o, t, "access private method"), e);
+var F = (r, t, e) => t.has(r) || V("Cannot " + e);
+var d = (r, t, e) => (F(r, t, "read from private field"), e ? e.call(r) : t.get(r)), u = (r, t, e) => t.has(r) ? V("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), k = (r, t, e, o) => (F(r, t, "write to private field"), o ? o.call(r, e) : t.set(r, e), e), b = (r, t, e) => (F(r, t, "access private method"), e);
 import "@proximus/lavender-button-icon";
 import "@proximus/lavender-cell";
 import { WithExtraAttributes as J, fontsizeValues as zt, PxElement as $t, transferAccessibilityAttributes as At, fontweightValues as St, colorValues as Ct, log as q, checkName as Et, WrappedInteractiveStateController as Lt } from "@proximus/lavender-common";
@@ -34,8 +34,8 @@ class Mt extends J {
   disconnectedCallback() {
     this.contentObserver.disconnect();
   }
-  attributeChangedCallback(t, e, r) {
-    super.attributeChangedCallback(t, e, r), t === "href" && this.$a && r ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$button && r && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
+  attributeChangedCallback(t, e, o) {
+    super.attributeChangedCallback(t, e, o), t === "href" && this.$a && o ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$button && o && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
   }
   setupButtonA11y() {
     this.$button.ariaExpanded = "false", this.$button.setAttribute("aria-controls", this.for || "");
@@ -69,7 +69,7 @@ const Rt = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a
 it.replaceSync(Rt);
 nt.replaceSync(qt);
 st.replaceSync(It);
-const Nt = [...zt, "link-m", "link-s"], jt = [
+const Nt = [...zt, "link-m", "link-s"], Ot = [
   "link",
   "no-style",
   "skip-link",
@@ -77,10 +77,10 @@ const Nt = [...zt, "link-m", "link-s"], jt = [
   "btn-secondary",
   "btn-tertiary",
   "icon-link"
-], Ot = ["", "default", "alternative"], O = class O extends $t {
+], jt = ["", "default", "alternative"], j = class j extends $t {
   constructor() {
     super(it, nt, st), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
-    const t = document.createElement(O.nativeName);
+    const t = document.createElement(j.nativeName);
     t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
   }
   static get observedAttributes() {
@@ -110,72 +110,72 @@ const Nt = [...zt, "link-m", "link-s"], jt = [
   }
   disconnectedCallback() {
   }
-  attributeChangedCallback(t, e, r) {
-    if (e !== r)
+  attributeChangedCallback(t, e, o) {
+    if (e !== o)
       switch (t) {
         case "disabled":
-          this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
+          this.$el.toggleAttribute("aria-disabled"), o !== null && this.$el.setAttribute("aria-disabled", "true");
           break;
         case "variant":
-          this.updateVariant(e, r);
+          this.updateVariant(e, o);
           break;
         case "shape":
         case "shape--mobile":
         case "shape--tablet":
         case "shape--laptop":
         case "shape--desktop":
-          this.updateShape(t, r, Ot);
+          this.updateShape(t, o, jt);
           break;
         case "extended":
         case "extended--mobile":
         case "extended--tablet":
         case "extended--laptop":
         case "extended--desktop":
-          this.updateExtended(t, r);
+          this.updateExtended(t, o);
           break;
         case "font-size":
           this.updateTypography(
             t,
             e,
-            r,
+            o,
             Nt
           );
           break;
         case "color":
-          this.updateTypography(t, e, r, Ct);
+          this.updateTypography(t, e, o, Ct);
           break;
         case "font-weight":
-          this.updateTypography(t, e, r, St);
+          this.updateTypography(t, e, o, St);
           break;
         case "title":
-          r && (this.$el.setAttribute("title", r), this.removeAttribute("title"));
+          o && (this.$el.setAttribute("title", o), this.removeAttribute("title"));
           break;
         default:
-          super.attributeChangedCallback(t, e, r);
+          super.attributeChangedCallback(t, e, o);
           break;
       }
   }
   configureBeforeAfterIcon(t) {
-    const e = t.getAttribute("size"), r = t.getAttribute("color");
+    const e = t.getAttribute("size"), o = t.getAttribute("color");
     t.addEventListener("click", () => {
       this.$el.focus();
-    }), e || t.setAttribute("size", "xs"), r || t.setAttribute("color", "inherit");
+    }), e || t.setAttribute("size", "xs"), o || t.setAttribute("color", "inherit");
   }
   _toggleClassList(t) {
     if (t.startsWith("btn-")) {
       const e = t.split("-");
-      for (const r of e)
-        this.$el.classList.toggle(r);
+      for (const o of e)
+        this.$el.classList.toggle(o);
     } 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(jt, e) || q(
+    t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(Ot, e) || q(
       `${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
     ), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
   }
-  updateShape(t, e, r) {
-    if (!Et(r, e)) {
+  updateShape(t, e, o) {
+    if (!Et(o, e)) {
       q(
         `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
       );
@@ -183,9 +183,9 @@ const Nt = [...zt, "link-m", "link-s"], jt = [
     }
     e !== null && e !== "" && this.$el.setAttribute(t, e);
   }
-  updateTypography(t, e, r, a) {
-    e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(a, r) || q(
-      `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+  updateTypography(t, e, o, a) {
+    e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${t}-${o}`), this.checkName(a, o) || q(
+      `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
     );
   }
   updateExtended(t, e) {
@@ -305,40 +305,40 @@ const Nt = [...zt, "link-m", "link-s"], jt = [
     t ? this.setAttribute("title", t) : this.removeAttribute("title");
   }
 };
-O.nativeName = "a";
-let I = O;
+j.nativeName = "a";
+let I = j;
 customElements.get("px-a") || customElements.define("px-a", I);
-var v, P, dt;
+var m, P, dt;
 class Pt extends I {
   constructor() {
     super();
     u(this, P);
-    u(this, v);
-    this.$el.classList.add("wrapper"), m(this, v, new Lt(
+    u(this, m);
+    this.$el.classList.add("wrapper"), k(this, m, new Lt(
       this,
       this.$el,
       () => b(this, P, dt).call(this)
     ));
   }
   connectedCallback() {
-    super.connectedCallback(), d(this, v).connect();
+    super.connectedCallback(), d(this, m).connect();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), d(this, v).disconnect();
+    super.disconnectedCallback(), d(this, m).disconnect();
   }
-  attributeChangedCallback(e, r, a) {
-    if (r !== a)
+  attributeChangedCallback(e, o, a) {
+    if (o !== a)
       switch (e) {
         case "disabled":
-          super.attributeChangedCallback(e, r, a), a !== null && d(this, v).clearInteractiveState();
+          super.attributeChangedCallback(e, o, a), a !== null && d(this, m).clearInteractiveState();
           break;
         default:
-          super.attributeChangedCallback(e, r, a);
+          super.attributeChangedCallback(e, o, a);
           break;
       }
   }
 }
-v = new WeakMap(), P = new WeakSet(), dt = function() {
+m = new WeakMap(), P = new WeakSet(), dt = function() {
   return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
 };
 customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", Pt);
@@ -355,73 +355,73 @@ class Bt extends HTMLElement {
 }
 customElements.get("px-mdd-a") || customElements.define("px-mdd-a", Bt);
 const Ht = "#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{display:none;margin:0;padding:0}#panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#backdrop-filter{display:none;position:absolute;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 only screen and (min-width: 48em){#dropdown-zone--desktop{display:flex;justify-content:space-between;align-items:center;margin-block:var(--px-padding-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}}@media only screen and (min-width: 64.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}";
-function N(o) {
-  var t = typeof o;
-  return o != null && (t == "object" || t == "function");
+function N(r) {
+  var t = typeof r;
+  return r != null && (t == "object" || t == "function");
 }
 var Wt = typeof global == "object" && global && global.Object === Object && global, _t = typeof self == "object" && self && self.Object === Object && self, lt = Wt || _t || Function("return this")(), U = function() {
   return lt.Date.now();
-}, Ft = /\s/;
-function Dt(o) {
-  for (var t = o.length; t-- && Ft.test(o.charAt(t)); )
+}, Dt = /\s/;
+function Ft(r) {
+  for (var t = r.length; t-- && Dt.test(r.charAt(t)); )
     ;
   return t;
 }
 var Ut = /^\s+/;
-function Yt(o) {
-  return o && o.slice(0, Dt(o) + 1).replace(Ut, "");
+function Yt(r) {
+  return r && r.slice(0, Ft(r) + 1).replace(Ut, "");
 }
-var j = lt.Symbol, pt = Object.prototype, Zt = pt.hasOwnProperty, Xt = pt.toString, C = j ? j.toStringTag : void 0;
-function Jt(o) {
-  var t = Zt.call(o, C), e = o[C];
+var O = lt.Symbol, pt = Object.prototype, Zt = pt.hasOwnProperty, Xt = pt.toString, C = O ? O.toStringTag : void 0;
+function Jt(r) {
+  var t = Zt.call(r, C), e = r[C];
   try {
-    o[C] = void 0;
-    var r = !0;
+    r[C] = void 0;
+    var o = !0;
   } catch {
   }
-  var a = Xt.call(o);
-  return r && (t ? o[C] = e : delete o[C]), a;
+  var a = Xt.call(r);
+  return o && (t ? r[C] = e : delete r[C]), a;
 }
 var Kt = Object.prototype, Qt = Kt.toString;
-function Gt(o) {
-  return Qt.call(o);
+function Gt(r) {
+  return Qt.call(r);
 }
-var Vt = "[object Null]", te = "[object Undefined]", tt = j ? j.toStringTag : void 0;
-function ee(o) {
-  return o == null ? o === void 0 ? te : Vt : tt && tt in Object(o) ? Jt(o) : Gt(o);
+var Vt = "[object Null]", te = "[object Undefined]", tt = O ? O.toStringTag : void 0;
+function ee(r) {
+  return r == null ? r === void 0 ? te : Vt : tt && tt in Object(r) ? Jt(r) : Gt(r);
 }
-function oe(o) {
-  return o != null && typeof o == "object";
+function oe(r) {
+  return r != null && typeof r == "object";
 }
 var re = "[object Symbol]";
-function ae(o) {
-  return typeof o == "symbol" || oe(o) && ee(o) == re;
+function ae(r) {
+  return typeof r == "symbol" || oe(r) && ee(r) == re;
 }
 var et = NaN, ie = /^[-+]0x[0-9a-f]+$/i, ne = /^0b[01]+$/i, se = /^0o[0-7]+$/i, de = parseInt;
-function ot(o) {
-  if (typeof o == "number")
-    return o;
-  if (ae(o))
+function ot(r) {
+  if (typeof r == "number")
+    return r;
+  if (ae(r))
     return et;
-  if (N(o)) {
-    var t = typeof o.valueOf == "function" ? o.valueOf() : o;
-    o = N(t) ? t + "" : t;
-  }
-  if (typeof o != "string")
-    return o === 0 ? o : +o;
-  o = Yt(o);
-  var e = ne.test(o);
-  return e || se.test(o) ? de(o.slice(2), e ? 2 : 8) : ie.test(o) ? et : +o;
+  if (N(r)) {
+    var t = typeof r.valueOf == "function" ? r.valueOf() : r;
+    r = N(t) ? t + "" : t;
+  }
+  if (typeof r != "string")
+    return r === 0 ? r : +r;
+  r = Yt(r);
+  var e = ne.test(r);
+  return e || se.test(r) ? de(r.slice(2), e ? 2 : 8) : ie.test(r) ? et : +r;
 }
 var le = "Expected a function", pe = Math.max, ce = Math.min;
-function be(o, t, e) {
-  var r, a, s, n, l, c, g = 0, A = !1, h = !1, W = !0;
-  if (typeof o != "function")
+function be(r, t, e) {
+  var o, a, s, n, l, c, g = 0, A = !1, h = !1, W = !0;
+  if (typeof r != "function")
     throw new TypeError(le);
   t = ot(t) || 0, N(e) && (A = !!e.leading, h = "maxWait" in e, s = h ? pe(ot(e.maxWait) || 0, t) : s, W = "trailing" in e ? !!e.trailing : W);
   function _(p) {
-    var x = r, S = a;
-    return r = a = void 0, g = p, n = o.apply(S, x), n;
+    var x = o, S = a;
+    return o = a = void 0, g = p, n = r.apply(S, x), n;
   }
   function mt(p) {
     return g = p, l = setTimeout(M, t), A ? _(p) : n;
@@ -441,17 +441,17 @@ function be(o, t, e) {
     l = setTimeout(M, kt(p));
   }
   function Q(p) {
-    return l = void 0, W && r ? _(p) : (r = a = void 0, n);
+    return l = void 0, W && o ? _(p) : (o = a = void 0, n);
   }
   function yt() {
-    l !== void 0 && clearTimeout(l), g = 0, r = c = a = l = void 0;
+    l !== void 0 && clearTimeout(l), g = 0, o = c = a = l = void 0;
   }
   function wt() {
     return l === void 0 ? n : Q(U());
   }
-  function F() {
+  function D() {
     var p = U(), x = K(p);
-    if (r = arguments, a = this, c = p, x) {
+    if (o = arguments, a = this, c = p, x) {
       if (l === void 0)
         return mt(c);
       if (h)
@@ -459,15 +459,15 @@ function be(o, t, e) {
     }
     return l === void 0 && (l = setTimeout(M, t)), n;
   }
-  return F.cancel = yt, F.flush = wt, F;
+  return D.cancel = yt, D.flush = wt, D;
 }
 var ue = "Expected a function";
-function he(o, t, e) {
-  var r = !0, a = !0;
-  if (typeof o != "function")
+function he(r, t, e) {
+  var o = !0, a = !0;
+  if (typeof r != "function")
     throw new TypeError(ue);
-  return N(e) && (r = "leading" in e ? !!e.leading : r, a = "trailing" in e ? !!e.trailing : a), be(o, t, {
-    leading: r,
+  return N(e) && (o = "leading" in e ? !!e.leading : o, a = "trailing" in e ? !!e.trailing : a), be(r, t, {
+    leading: o,
     maxWait: t,
     trailing: a
   });
@@ -475,7 +475,7 @@ function he(o, t, e) {
 const ct = new CSSStyleSheet();
 ct.replaceSync(Ht);
 const xe = "Menu";
-var T, i, bt, Y, Z, ut, X, f, E, L, k;
+var T, i, bt, Y, Z, ut, X, f, E, L, v;
 class ge extends J {
   constructor() {
     var e;
@@ -519,21 +519,21 @@ class ge extends J {
       <div id="backdrop-filter"></div>
       <slot name="main"></slot>
     </div>
-  `, m(this, T, () => {
+  `, k(this, T, () => {
       window.innerWidth >= 768 && (b(this, i, ut).call(this), b(this, i, bt).call(this));
     }), this.shadowRoot.innerHTML = this.template, this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.role = "navigation", this.internals && (this.internals.role = "navigation");
   }
   connectedCallback() {
     this.addEventListener("click", (e) => {
-      const r = e.target.closest(
+      const o = e.target.closest(
         "px-header-item"
       );
-      r && r.for && (e.target.checked === !1 ? (this.$backdropFilter.style.display = "block", d(this, i, E).forEach((a) => {
+      o && o.for && (e.target.checked === !1 ? (this.$backdropFilter.style.display = "block", d(this, i, E).forEach((a) => {
         a.checked = !1;
-      }), r.checked = !0, b(this, i, Y).call(this, e.target.for)) : b(this, i, X).call(this));
+      }), o.checked = !0, b(this, i, Y).call(this, e.target.for)) : b(this, i, X).call(this));
     }), this.addEventListener("section-item-click", (e) => {
-      this.$backdropFilter.style.display = "block", d(this, i, E).forEach((r) => {
-        r.checked = !1;
+      this.$backdropFilter.style.display = "block", d(this, i, E).forEach((o) => {
+        o.checked = !1;
       }), this.querySelector(
         `px-header-item[for="${e.detail.for}"]`
       ).checked = !0, b(this, i, Y).call(this, e.detail.for);
@@ -549,11 +549,11 @@ class ge extends J {
       "close-panel-from-dialog",
       (e) => {
         this.dispatchEvent(new CustomEvent("close-panel")), e.detail.clientY < d(this, i, L).getBoundingClientRect().bottom && requestAnimationFrame(() => {
-          var r;
-          (r = document.elementFromPoint(
+          var o;
+          (o = document.elementFromPoint(
             e.detail.clientX,
             e.detail.clientY
-          )) == null || r.click();
+          )) == null || o.click();
         });
       }
     ), !this.$targetGroupDropdown && !this.$userLanguageDropdown && (this.$dropDownZoneDesktop.style.display = "none"), this.primaryNavigationAriaLabel || this.setAttribute("primary-navigation-aria-label", xe), window.addEventListener("resize", he(d(this, T), 200));
@@ -566,11 +566,11 @@ class ge extends J {
       "back-to-menu-label"
     ];
   }
-  attributeChangedCallback(e, r, a) {
-    if (r !== a)
+  attributeChangedCallback(e, o, a) {
+    if (o !== a)
       switch (e) {
         case "close-button-aria-label":
-          d(this, i, k).forEach((s) => {
+          d(this, i, v).forEach((s) => {
             s.setAttribute("close-button-aria-label", a);
           });
           break;
@@ -581,7 +581,7 @@ class ge extends J {
           this.$primaryNavigation.setAttribute("aria-label", a);
           break;
         case "back-to-menu-label":
-          d(this, i, k).forEach((s) => {
+          d(this, i, v).forEach((s) => {
             s.setAttribute("back-to-menu-label", a);
           });
           break;
@@ -634,24 +634,26 @@ class ge extends J {
   }
 }
 T = new WeakMap(), i = new WeakSet(), bt = function() {
-  const e = this.querySelectorAll("px-mdd"), r = d(this, i, L).getBoundingClientRect().bottom;
+  const e = this.querySelectorAll("px-mdd"), o = d(this, i, L).getBoundingClientRect().bottom;
   e.forEach((a) => {
-    a.dialogOffsetTop = `${r}px`;
+    a.dialogOffsetTop = `${o}px`;
   });
 }, Y = function(e) {
-  d(this, i, f).$megaDropDown.hidden = !0, d(this, i, k).forEach((r) => {
-    r.name === e && r.hidden && (r.dialogOffsetTop = `${d(this, i, L).getBoundingClientRect().bottom}px`, r.hidden = !r.hidden, this.querySelector(`px-header-item[for="${e}"]`).checked = !r.hidden, document.body.style.overflow = r.hidden ? "auto" : "hidden"), r.name !== e && !r.hidden && (r.hidden = !0);
+  d(this, i, f).$megaDropDown.hidden = !0, d(this, i, v).forEach((o) => {
+    o.name === e && o.hidden && (o.dialogOffsetTop = `${d(this, i, L).getBoundingClientRect().bottom}px`, o.hidden = !o.hidden, this.querySelector(`px-header-item[for="${e}"]`).checked = !o.hidden, document.body.style.overflow = o.hidden ? "auto" : "hidden"), o.name !== e && !o.hidden && (o.hidden = !0);
   });
 }, Z = function() {
-  this.$backdropFilter.style.display = "none", d(this, i, k).forEach((e) => {
+  this.$backdropFilter.style.display = "none", d(this, i, v).forEach((e) => {
     e.hidden || (e.hidden = !0);
   }), d(this, i, f).$megaDropDown.dialogOffsetTop = `${d(this, i, L).getBoundingClientRect().bottom}px`, d(this, i, f).$megaDropDown.hidden = !1, document.body.style.overflow = "hidden";
 }, ut = function() {
-  d(this, i, f) && (d(this, i, f).$megaDropDown.hidden = !0, this.$burgerMenu.setAttribute("aria-expanded", "false"), document.body.style.overflow = "auto", this.$backdropFilter.style.display = "none");
+  d(this, i, f) && (d(this, i, f).$megaDropDown.hidden = !0, this.$burgerMenu.setAttribute("aria-expanded", "false"), Array.from(d(this, i, v)).some(
+    (o) => !o.hidden
+  ) || (document.body.style.overflow = "auto", this.$backdropFilter.style.display = "none"));
 }, X = function() {
   this.$backdropFilter.style.display = "none", d(this, i, f).$megaDropDown.hidden = !0, d(this, i, E).forEach((e) => {
     e.checked = !1;
-  }), d(this, i, k).forEach((e) => {
+  }), d(this, i, v).forEach((e) => {
     e.hidden = !0;
   }), document.body.style.overflow = "auto";
 }, f = function() {
@@ -660,7 +662,7 @@ T = new WeakMap(), i = new WeakSet(), bt = function() {
   return this.querySelectorAll("px-header-item");
 }, L = function() {
   return this.shadowRoot.querySelector("header");
-}, k = function() {
+}, v = function() {
   return this.querySelectorAll("px-mdd");
 };
 customElements.get("px-header") || customElements.define("px-header", ge);
@@ -670,13 +672,13 @@ const fe = ':host{position:relative}::slotted([slot="popover"]){position:absolut
   "bottom-left",
   "bottom-right"
 ];
-function rt(o, t, e = "bottom-left", r, a = !1) {
+function rt(r, t, e = "bottom-left", o, a = !1) {
   "anchorName" in document.documentElement.style && a === !1 || t.addEventListener("toggle", () => {
     var A, h;
-    if (!o || !t)
+    if (!r || !t)
       return;
-    const s = o.getBoundingClientRect(), n = ((A = window.visualViewport) == null ? void 0 : A.height) ?? window.innerHeight, l = ((h = window.visualViewport) == null ? void 0 : h.width) ?? window.innerWidth, c = r.getPropertyValue("--px-padding-s-mobile") || "16px", g = parseInt(
-      (r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
+    const s = r.getBoundingClientRect(), n = ((A = window.visualViewport) == null ? void 0 : A.height) ?? window.innerHeight, l = ((h = window.visualViewport) == null ? void 0 : h.width) ?? window.innerWidth, c = o.getPropertyValue("--px-padding-s-mobile") || "16px", g = parseInt(
+      (o.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
     );
     ["top-left", "top-right"].includes(e) ? (t.style.bottom = `calc( ${c} + ${n - s.top - window.scrollY}px)`, t.style.top = "auto", e === "top-left" ? t.style.left = l < 768 ? `${c}px` : `${s.left}px` : t.style.right = l < 768 ? `${c}px` : `${l - s.right}px`) : (t.style.top = `${s.bottom + window.scrollY}px`, e === "bottom-left" ? t.style.left = l < 768 ? `${c}px` : `${s.left}px` : t.style.right = l < 768 ? `${c}px` : `${l - s.right - g}px`);
   });
@@ -695,11 +697,11 @@ class me extends J {
     this.template = () => `
   <style>${this.css}</style>
   <slot name="trigger"></slot>
-  <slot name="popover"></slot>`, this.isAboutToClose = !1, m(this, y, () => {
+  <slot name="popover"></slot>`, this.isAboutToClose = !1, k(this, y, () => {
       this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.$trigger.ariaExpanded = "true");
-    }), m(this, w, () => {
+    }), k(this, w, () => {
       this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
-    }), m(this, z, () => {
+    }), k(this, z, () => {
       this.$popoverElement.matches(":popover-open") || setTimeout(() => {
         this.isAboutToClose = !1;
       });
@@ -763,8 +765,8 @@ class me extends J {
       this.usePolyfill
     );
   }
-  attributeChangedCallback(e, r, a) {
-    if (r !== a)
+  attributeChangedCallback(e, o, a) {
+    if (o !== a)
       switch (e) {
         case "id":
           this.initPopover();
@@ -779,7 +781,7 @@ class me extends J {
           );
           break;
         default:
-          super.attributeChangedCallback(e, r, a);
+          super.attributeChangedCallback(e, o, a);
           break;
       }
   }
@@ -863,9 +865,9 @@ class ke extends HTMLElement {
       throw new Error(
         "<px-header-mobile-menu> must be used within a <px-header>."
       );
-    const r = e.querySelectorAll("px-header-item"), a = e.querySelectorAll("px-action-link"), s = this.shadowRoot.querySelector("px-mdd-section");
+    const o = e.querySelectorAll("px-header-item"), a = e.querySelectorAll("px-action-link"), s = this.shadowRoot.querySelector("px-mdd-section");
     s.innerHTML = `
-     ${[...r].map((n) => {
+     ${[...o].map((n) => {
       const l = n.getAttribute("for"), c = n.getAttribute("href");
       return l ? `<px-mdd-section-item for="${l}">${n.innerText}</px-mdd-section-item>` : c ? `<px-mdd-section-item href="${c}">${n.innerText}</px-mdd-section-item>` : "";
     }).join("")}
@@ -880,11 +882,11 @@ class ke extends HTMLElement {
   }
 }
 B = new WeakMap(), H = new WeakSet(), vt = function() {
-  const e = this.closest("px-header"), r = e.querySelector(
+  const e = this.closest("px-header"), o = e.querySelector(
     'px-dropdown[slot="target-group"]'
   ), a = e.querySelector(
     'px-dropdown[slot="user-language"]'
-  ), s = r == null ? void 0 : r.cloneNode(
+  ), s = o == null ? void 0 : o.cloneNode(
     !0
   );
   s == null || s.removeAttribute("id"), s == null || s.setAttribute("slot", "mdd-footer"), s == null || s.setAttribute("grow", "3"), s == null || s.setAttribute("anchoralignment", "top-left");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-header",
-  "version": "2.0.0-alpha.75",
+  "version": "2.0.0-alpha.76",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",